/* In raglan mode: hide set-in sleeve/body shadows, show raglan-specific shadows */
    .raglan-mode #f-sleeve-shading,
    .raglan-mode #f-body-shading { display: none !important; }
    #f-raglan-shading { display: none; }
    .raglan-mode #f-raglan-shading { display: block !important; }
    /* Back view */
    .raglan-mode #b-sleeve-shading,
    .raglan-mode #b-body-shading { display: none !important; }
    #b-raglan-shading { display: none; }
    .raglan-mode #b-raglan-shading { display: block !important; }
    :root {
      /* MODERN PREMIUM PALETTE (Indigo & Slate) */
      --primary: #6366f1;
      --primary-soft: rgba(99, 102, 241, 0.12);
      --accent: #f59e0b;
      --bg-page: #f8fafc;
      --bg-canvas: #ffffff;
      --bg-glass: rgba(255, 255, 255, 0.75);
      --text-main: #0f172a;
      --text-low: #64748b;
      --muted: #94a3b8;
      --border-soft: rgba(226, 232, 240, 0.8);
      --border: rgba(226, 232, 240, 0.5);
      --border-deep: rgba(203, 213, 225, 0.6);
      --border-input: #e2e8f0;
      --shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.1);
      --shadow-deep: 0 20px 25px -5px rgb(0 0 0 / 0.1);
      --shadow-active: 0 0 0 4px rgba(99, 102, 241, 0.15);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 24px;
      --green: #22c55e;
      --blue: #6366f1;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
    }

    body {
      font-family: 'Outfit', 'DM Sans', system-ui, -apple-system, sans-serif;
      background: var(--bg-page);
      color: var(--text-main);
      overflow-x: hidden;
      line-height: 1.5;
    }

    /* HEADER - MINIMAL PREMIUM */
    .hdr {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border-soft);
      padding: 0 32px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 300;
    }

    .hdr h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 28px;
      color: var(--text-main);
      letter-spacing: 0.5px;
      font-weight: 400;
    }

    .price-box {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .price-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-low);
      margin-bottom: -2px;
    }

    .price-orig {
      display: none;
      /* Cleaner look without slash price if not needed, or better styled */
    }

    .price-sale {
      color: var(--primary);
      font-size: 32px;
      font-weight: 700;
      font-family: 'Bebas Neue', sans-serif;
      line-height: 1;
    }

    .price-detail {
      font-size: 11px;
      color: var(--text-low);
      margin-top: 4px;
    }

    /* LAYOUT - PREMIUM FULL WIDTH */
    .main {
      position: relative;
      display: block;
      min-height: calc(100vh - 80px);
      overflow: auto;
      background: radial-gradient(circle at center, #ffffff 0%, #f5f5f7 100%);
    }

    /* LEFT PANEL - NOW FLOATING DESIGNER */
    .left {
      position: fixed;
      top: calc(80px + 16px);
      right: 24px;
      width: 420px;
      max-height: calc(100vh - 80px - 32px);
      background: var(--bg-glass);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-deep);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      z-index: 100;
      transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
    }

    /* RIGHT PANEL – MOBILE-FIRST PREVIEW CANVAS */
    .right {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 25px 480px 35px 32px;
      /* Space for the floating sidebar */
      /* min-height: 800px; */
      z-index: 1;
    }


    /* STEP ACCORDION - PREMIUM MODULES */
    .step {
      border-bottom: 1px solid var(--border-soft);
      transition: background 0.2s;
    }

    .step-hdr {
      display: flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      min-height: 64px;
      padding: 0 16px;
      transition: all 0.2s ease;
    }

    .step-hdr:hover {
      background: var(--bg-canvas);
    }

    .step-num {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--primary-soft);
      border-radius: 50%;
      font-size: 14px;
      font-weight: 700;
      color: var(--primary);
      flex-shrink: 0;
      margin-right: 12px;
    }

    .step-hdr.open {
      background: #fff;
    }

    .step-title {
      flex: 1;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.2px;
      color: var(--text-main);
    }

    .step-hdr.open .step-title {
      color: var(--primary);
    }

    .step-tog {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: var(--text-low);
      transition: transform 0.3s ease;
    }

    .step-hdr.open .step-tog {
      transform: rotate(45deg);
      color: var(--primary);
    }

    .step-body {
      display: none;
      padding: 8px 20px 20px;
      background: #fff;
    }

    .step-body.open {
      display: block;
      animation: fd .2s ease;
    }

    @keyframes fd {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

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

    .sym-load-overlay {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 100;
      border-radius: var(--radius-md);
      gap: 16px;
      pointer-events: all;
      transition: opacity 0.3s ease;
    }

    .sym-spinner {
      width: 48px;
      height: 48px;
      border: 3px solid var(--primary-soft);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .sym-load-overlay span {
      font-size: 14px;
      font-weight: 600;
      color: var(--primary);
      letter-spacing: 0.5px;
      animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.7;
        transform: scale(0.98);
      }
    }

    /* FORM CONTROLS - REFINED */
    .fg {
      margin-bottom: 20px;
    }

    .fl {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-low);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    .sel {
      width: 100%;
      padding: 10px 0;
      border: none;
      border-bottom: 1px solid var(--border-input);
      border-radius: 0;
      font-size: 14px;
      font-family: inherit;
      color: var(--text-main);
      background: transparent 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='M1 1l4 4 4-4' stroke='%2386868b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center;
      appearance: none;
      cursor: pointer;
      outline: none;
      transition: all 0.2s;
    }

    .sel:focus {
      border-bottom-color: var(--primary);
      padding-left: 4px;
    }

    .tog-grp {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--bg-canvas);
      padding: 4px;
      border-radius: var(--radius-md);
      border: 1px solid var(--border-soft);
    }

    .tog-btn {
      padding: 10px;
      text-align: center;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-low);
      background: transparent;
      border: none;
      border-radius: 10px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      font-family: inherit;
    }

    .tog-btn.on {
      background: #fff;
      color: var(--primary);
      box-shadow: var(--shadow-active);
      transform: translateY(-1px);
    }

    .tog-btn:hover:not(.on) {
      color: var(--text-main);
    }

    /* KNIT SELECTOR - reference sprite */
    .knit-styles {
      display: flex;
      gap: 4px;
    }

    .knit-styles a {
      border: 1px solid #959cb0;
      color: #338eff;
      display: block;
      float: left;
      height: 30px;
      margin-right: 4.2151162791%;
      text-indent: -9999px;
      width: 16.5697674419%;
      background-image: url("data:image/png;base64,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");

    }

    .knit-styles a:hover {
      border-color: var(--blue);
    }

    .knit-styles a.active {
      border: 1px solid var(--primary);
      box-shadow: 0 0 0 1px var(--primary), var(--shadow-active);
    }

    .knit-styles a.plain_knit {
      background-position: 50% 0px;
    }

    .knit-styles a.single_line_knit {
      background-position: 50% -41px;
    }

    .knit-styles a.single_line_with_border_knit {
      background-position: 50% -80.5px;
    }

    .knit-styles a.two_lines_knit {
      background-position: 50% -121px;
    }

    .knit-styles a.two_lines_with_border_knit {
      background-position: 50% -161px;
    }

    /* CHECKBOX */
    .cbrow {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      padding: 3px 0;
    }

    .cbbox {
      width: 18px;
      height: 18px;
      border: 2px solid var(--muted);
      border-radius: 4px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .15s;
    }

    .cbbox.on {
      background: var(--blue);
      border-color: var(--blue);
    }

    .cblabel {
      font-size: 12px;
      color: var(--muted);
    }

    .cbbox.on+.cblabel {
      color: var(--blue);
      font-weight: 600;
    }

    .cbhelp {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid var(--blue);
      color: var(--blue);
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      position: relative;
    }

    .cbhelp .cbtooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: #1e2535;
      color: #fff;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      padding: 10px 14px;
      border-radius: 8px;
      width: 260px;
      text-align: center;
      pointer-events: none;
      z-index: 500;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    }

    .cbhelp .cbtooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #1e2535;
    }

    .cbhelp:hover .cbtooltip {
      display: block;
    }

    /* COLOR ZONES - REFINED */
    .zones-list {
      background: #fff;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }

    .zone-row {
      display: flex;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-soft);
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .zone-row:last-child {
      border-bottom: none;
    }

    /* Thin separator between zone groups */
    .zone-group-sep {
      display: none !important;
    }

    .zone-row:hover {
      background: var(--bg-canvas);
    }

    .zone-row.zopen {
      background: var(--bg-canvas);
    }

    .zswatch {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
      margin-right: 12px;
      transition: transform 0.2s;
    }

    .zone-row:hover .zswatch {
      transform: scale(1.1);
    }

    .zname {
      flex: 1;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-main);
    }

    .zcolorname {
      font-size: 12px;
      color: var(--text-low);
      margin-right: 8px;
    }

    .zarrow {
      color: var(--text-low);
      font-size: 18px;
      transition: transform 0.2s;
    }

    .zone-row.zopen .zarrow {
      transform: rotate(90deg);
      color: var(--primary);
    }

    /* FLOATING PALETTE - PREMIUM GLASS */
    .palette-float {
      position: fixed;
      z-index: 400;
      background: var(--bg-glass);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: var(--radius-lg);
      padding: 16px;
      box-shadow: var(--shadow-deep);
      width: 260px;
      display: none;
      transition: opacity 0.2s;
    }

    .palette-float.show {
      display: block;
      animation: floatIn 0.3s cubic-bezier(0.2, 0, 0, 1);
    }

    @keyframes floatIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pf-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .pf-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-low);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .pf-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
    }

    .pf-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
    }

    .pc {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px var(--border-soft);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pc:hover {
      transform: scale(1.2);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      z-index: 2;
    }

    .pc.sel {
      box-shadow: 0 0 0 2px var(--primary);
    }

    /* DESIGN GRID - REFINED */
    .dg {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .dslot {
      background: #fff;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-md);
      padding: 12px 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }

    .dslot:hover {
      border-color: var(--primary);
      box-shadow: var(--shadow-soft);
      transform: translateY(-2px);
    }

    .dslot.on {
      border-color: var(--primary);
      background: var(--primary-soft);
      box-shadow: 0 0 0 1px var(--primary);
    }

    .dslot.done::after {
      content: '✓';
      position: absolute;
      top: 8px;
      right: 8px;
      width: 16px;
      height: 16px;
      background: var(--primary);
      color: #fff;
      font-size: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-weight: 900;
    }

    .dslot-img {
      height: 64px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }

    .dslot:hover .dslot-img {
      transform: scale(1.05);
    }

    .dslot-lbl {
      font-size: 9px;
      color: var(--text-main);
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1.2;
    }

    /* SIZE LINKS - MODERN TAB SELECTOR */
    .sz-list {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .sz-link {
      padding: 10px 16px;
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-md);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-main);
      cursor: pointer;
      transition: all 0.2s;
      background: #fff;
      text-decoration: none !important;
    }

    .sz-link:hover {
      background: var(--bg-canvas);
      border-color: var(--primary);
    }

    .sz-link.on {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .size-guide-link {
      font-size: 12px;
      color: var(--primary);
      font-weight: 600;
      cursor: pointer;
      margin-top: 12px;
      display: inline-block;
      text-decoration: underline;
    }

    /* MEASUREMENT PANEL */
    .mpanel-bg {
      position: fixed;
      inset: 0;
      z-index: 500;
      pointer-events: none;
    }

    .mpanel-bg.on {
      pointer-events: all;
    }

    .mpanel-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .4);
      opacity: 0;
      transition: opacity .25s;
    }

    .mpanel-bg.on .mpanel-overlay {
      opacity: 1;
    }

    .mpanel {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 420px;
      max-width: 95vw;
      background: #1e2a38;
      color: #fff;
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform .3s ease;
      display: flex;
      flex-direction: column;
    }

    .mpanel-bg.on .mpanel {
      transform: translateX(0);
    }

    .mpanel-hdr {
      padding: 20px 22px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      flex-shrink: 0;
    }

    .mpanel-hdr h2 {
      font-size: 20px;
      font-weight: 700;
    }

    .mpanel-hdr h2 span {
      font-weight: 300;
      color: #aac4e0;
    }

    .mpanel-close {
      background: none;
      border: none;
      color: #aaa;
      font-size: 22px;
      cursor: pointer;
      padding: 2px 6px;
      line-height: 1;
    }

    .mpanel-close:hover {
      color: #fff;
    }

    .mpanel-body {
      padding: 20px 22px;
      flex: 1;
    }

    .meas-item {
      margin-bottom: 28px;
    }

    .meas-letter {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #aac4e0;
      margin-bottom: 4px;
    }

    .meas-title {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 8px;
      color: #fff;
    }

    .meas-desc {
      font-size: 13px;
      color: #9eb3c8;
      line-height: 1.55;
      margin-bottom: 12px;
    }

    .meas-img {
      width: 100%;
      border-radius: 6px;
      overflow: hidden;
      background: #2c3e50;
    }

    .meas-img img {
      width: 100%;
      display: block;
    }

    /* ACTIONS - PREMIUM BUTTONS */
    .actions {
      padding: 24px;
      border-top: 1px solid var(--border-soft);
      background: #fff;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: auto;
    }

    .abtn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px;
      border: none;
      border-radius: var(--radius-md);
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .abtn:active {
      transform: scale(0.98);
    }

    .abtn-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .abtn-cart {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .abtn-cart:hover {
      background: #000;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
      transform: translateY(-2px);
    }

    .abtn-save {
      background: var(--primary-soft);
      color: var(--primary);
    }

    .abtn-save:hover {
      background: #eef1f6;
    }

    .abtn-share,
    .abtn-bulk {
      background: var(--bg-canvas);
      color: var(--text-main);
      border: 1px solid var(--border-soft);
    }

    .abtn-share:hover,
    .abtn-bulk:hover {
      background: #fff;
      border-color: var(--primary);
    }

    /* RIGHT PANEL handled above in layout section */
    .preview-toolbar {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .gtog {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      color: var(--muted);
    }

    .gdot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #b0b8cc;
      transition: background .2s;
    }

    .gdot.on {
      background: var(--blue);
    }

    .tbr {
      display: flex;
      gap: 7px;
    }

    .tbtn {
      padding: 5px 13px;
      border: none;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .5px;
      cursor: pointer;
      text-transform: uppercase;
    }

    .tbtn-dup {
      background: var(--green);
      color: #fff;
    }

    .tbtn-reset {
      background: #fff;
      color: #e02020;
      border: 1.5px solid #e02020;
    }
    .tbtn-reset:hover {
      background: #fff0f0;
    }

    /* ── Reset-design confirm overlay ── */
    .reset-confirm-bg {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s;
    }
    .reset-confirm-bg.on {
      opacity: 1;
      pointer-events: all;
    }
    .reset-confirm-card {
      background: #fff;
      border-radius: 14px;
      padding: 32px 28px 24px;
      width: 340px;
      text-align: center;
      box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    }
    .reset-confirm-icon {
      font-size: 36px;
      margin-bottom: 12px;
    }
    .reset-confirm-title {
      font-size: 16px;
      font-weight: 700;
      color: #1a2035;
      margin-bottom: 8px;
    }
    .reset-confirm-sub {
      font-size: 13px;
      color: #6b7591;
      margin-bottom: 24px;
      line-height: 1.5;
    }
    .reset-confirm-btns {
      display: flex;
      gap: 10px;
    }
    .reset-confirm-btns button {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      border: none;
    }
    .reset-cancel-btn {
      background: #f0f2f8;
      color: #3a4260;
    }
    .reset-cancel-btn:hover { background: #e4e7f2; }
    .reset-ok-btn {
      background: #e02020;
      color: #fff;
    }
    .reset-ok-btn:hover { background: #c01818; }

    /* SVG PREVIEW */
    .preview-area {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      position: relative;
      padding: 0 40px;
    }

    .preview-card {
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 24px;
      box-shadow: var(--shadow-deep);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      border: 1px solid var(--border-soft);
    }

    .jwrap {
      width: 570px;
      height: 570px;
      position: relative;
      transition: opacity .22s, transform .22s;
    }

    .jview {
      display: none;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .jview.on {
      display: block;
    }

    .jview svg {
      width: 100%;
      height: 100%;
    }

    /* SVG HOVER */
    .el {
      cursor: pointer;
    }

    .el-hovered,
    .el-hovered path,
    .el-hovered rect,
    .el-hovered circle,
    .el-hovered ellipse,
    .el-hovered polygon {
      stroke: #74c143 !important;
      stroke-width: 2px !important;
      stroke-dasharray: 5, 5 !important;
    }

    .ztip {
      position: absolute;
      background: rgba(41, 128, 185, .9);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 20px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .15s;
      z-index: 100;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: .3px;
    }

    .ztip.on {
      opacity: 1;
    }

    /* GUIDE OVERLAY */
    .guide-ov {
      position: absolute;
      inset: 0;
      pointer-events: none;
      display: none;
    }

    .guide-ov.on {
      display: block;
    }

    /* Show design-zone dashed boxes when guides are active */
    .guides-on .emb-box rect {
      stroke-opacity: 1 !important;
    }

    /* THUMBNAILS - PREMIUM VIEW SWITCHER */
    .thumbs {
      display: flex;
      flex-direction: row;
      gap: 12px;
      margin-top: 24px;
      /* background: rgba(255, 255, 255, 0.4); */
      /* backdrop-filter: blur(8px); */
      padding: 8px 16px;
      border-radius: 40px;
      justify-content: center;
      /* border: 1px solid rgba(255, 255, 255, 0.5);
      box-shadow: var(--shadow-soft); */
    }

    .thumb {
      width: 56px;
      height: 56px;
      border: 2px solid transparent;
      border-radius: 50%;
      cursor: pointer;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .thumb:hover {
      transform: translateY(-2px);
      border-color: var(--border-soft);
    }

    .thumb.on {
      border-color: var(--primary);
      /* box-shadow: 0 0 0 1px var(--primary); */
      transform: scale(1.1);
    }

    .thumb svg,
    .thumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .tlbl {
      display: none;
      /* Cleaner look without text labels for iconic views */
    }

    /* DESIGN MODAL - REFINED GLASS */
    .modal-bg {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .modal-bg.on {
      opacity: 1;
      pointer-events: all;
    }

    .modal {
      background: #fff;
      border-radius: var(--radius-lg);
      width: 800px;
      max-width: 96vw;
      height: 640px;
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(0, 0, 0, 0.25);
      box-shadow: var(--shadow-deep);
      transform: translateY(20px) scale(0.98);
      transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
      position: relative;
    }

    .modal-bg.on .modal {
      transform: translateY(0) scale(1);
    }

    .mhdr {
      background: #fff;
      color: var(--text-main);
      padding: 20px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-soft);
      flex-shrink: 0;
    }

    .mhdr h3 {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .mhdr h2 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 19px;
      letter-spacing: 1px;
    }

    .mclose {
      background: none;
      border: none;
      color: var(--text-low);
      font-size: 22px;
      cursor: pointer;
      transition: color 0.2s;
    }

    .mclose:hover {
      color: var(--primary);
    }

    .mtabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .mtab {
      flex: 1;
      padding: 9px 12px;
      text-align: center;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      color: var(--muted);
      border-bottom: 3px solid transparent;
      transition: all .15s;
    }

    .mtab.on {
      color: var(--primary);
      border-bottom: 3px solid var(--primary);
      background: var(--bg-canvas);
    }

    .mbody {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .mleft {
      flex: 1;
      padding: 14px 16px;
      overflow-y: auto;
      border-right: 1px solid var(--border);
    }

    .mright {
      width: 320px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      flex-shrink: 0;
    }

    .mlabel {
      display: block;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 6px;
    }

    .minput {
      width: 100%;
      padding: 10px 0;
      border: none;
      border-bottom: 1px solid var(--border-input);
      background: transparent;
      font-size: 14px;
      font-family: 'DM Sans', sans-serif;
      outline: none;
      transition: all .2s;
      color: #000;
    }

    .minput:focus {
      border-bottom-color: var(--primary);
      padding-left: 4px;
    }

    .msel {
      width: 100%;
      padding: 10px 0;
      border: none;
      border-bottom: 1px solid var(--border-input);
      background: transparent 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='M1 1l4 4 4-4' stroke='%238492a6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center;
      appearance: none;
      cursor: pointer;
      font-size: 13px;
      font-family: 'DM Sans', sans-serif;
      outline: none;
      transition: all .2s;
      color: #000;
    }

    .msel:focus {
      border-bottom-color: var(--primary);
      padding-left: 4px;
    }

    .app-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
    }

    .app-btn {
      padding: 10px;
      text-align: center;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-main);
      background: var(--bg-canvas);
      border: 1px solid var(--border-soft);
      transition: all .2s;
      font-family: 'DM Sans', sans-serif;
    }

    .app-btn:hover {
      background: #eee;
      border-color: var(--border-deep);
    }

    .app-btn.on {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
      box-shadow: var(--shadow-active);
      transform: translateY(-1px);
    }

    .prev-box {
      background: #f0f2f7;
      border: 1px solid var(--border);
      border-radius: 6px;
      height: 200px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding: 16px;
    }

    .prev-box.badge-active {
      background: transparent;
      border: none;
      padding: 0;
    }

    .editable-prev-div {
      border-radius: 6px;
    }

    /* Editable Symbols UI additions */
    .edit-text-overlay {
      position: absolute;
      bottom: 10px;
      right: 10px;
      pointer-events: none;
      z-index: 10;
    }

    .edit-text-btn {
      pointer-events: auto;
      background: #1a1a1a;
      color: #fff;
      border: none;
      border-radius: 20px;
      padding: 8px 18px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .edit-text-btn:hover {
      transform: translateY(-2px);
      background: #000;
    }

    .editable-inputs-container {
      margin-top: 14px;
      display: none;
      border-top: 1px solid var(--border);
      padding-top: 14px;
    }

    .editable-input-group {
      margin-bottom: 12px;
    }

    .editable-logo-upload {
      margin-top: 10px;
      padding: 12px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .editable-logo-upload:hover {
      background: #f1f5f9;
      border-color: #6366f1;
    }

    .logo-upload-icon {
      font-size: 20px;
      color: #64748b;
    }

    .logo-upload-text {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
    }

    /* Force Franchise-Bold on all editable SVG text - font is loaded at page level */
    .editable-svg-item svg text,
    .editable-svg-item svg textPath,
    .editable-prev-div svg text,
    .editable-prev-div svg textPath {
      font-family: 'Franchise-Bold', sans-serif !important;
    }


    .prev-box.badge-active .prev-badge {
      display: block;
    }

    .badge-svg-item {
      border-radius: 6px;
      overflow: hidden;
    }

    .badge-svg-item svg {
      display: block;
    }

    .prev-badge {
      position: absolute;
      top: 6px;
      left: 6px;
      z-index: 20;
      color: #333;
      background: rgba(255, 255, 255, 0.85);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      pointer-events: none;
      padding: 2px 6px;
      border-radius: 3px;
    }

    .prev-text {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px;
      letter-spacing: 3px;
      color: #222;
      padding: 16px;
      text-align: center;
      word-break: break-all;
      transition: all .2s;
    }

    /* Edit Text Overlay */
    .edit-text-overlay {
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 10;
      display: none;
      align-items: center;
      justify-content: flex-end;
    }

    .edit-text-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: #1a1a2e;
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
      transition: background .2s, transform .1s;
    }

    .edit-text-btn:hover {
      background: #e63946;
      transform: scale(1.04);
    }

    /* Editable Inputs Container */
    .editable-inputs-container {
      display: none;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border, #e5e7eb);
    }

    .editable-input-group {
      margin-bottom: 10px;
    }

    /* Logo Upload Area */
    .editable-logo-upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 14px;
      border: 2px dashed var(--border, #d1d5db);
      border-radius: 8px;
      cursor: pointer;
      transition: border-color .2s, background .2s;
      margin-top: 4px;
    }

    .editable-logo-upload:hover {
      border-color: var(--primary, #4361ee);
      background: rgba(67, 97, 238, .04);
    }

    .logo-upload-icon {
      font-size: 22px;
    }

    .logo-upload-text {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      color: #8492a6;
    }


    .fb-row {
      display: flex;
      gap: 8px;
    }

    .fbtn {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 7px 9px;
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      background: #fff;
      transition: border-color .15s;
    }

    .fbtn:hover {
      border-color: var(--blue);
    }

    .fbtn.active {
      border-color: var(--blue);
      background: var(--blue-light);
      color: var(--blue);
    }

    .fbtn.active .farrow {
      color: var(--blue);
    }

    .fdot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid rgba(0, 0, 0, .15);
      flex-shrink: 0;
    }

    .farrow {
      margin-left: auto;
      font-size: 9px;
      color: var(--muted);
    }

    .mpalgrid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      margin-top: 6px;
    }

    .mpc {
      width: 26px;
      height: 26px;
      border-radius: 4px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform .12s, border-color .12s;
    }

    .mpc:hover {
      transform: scale(1.18);
      border-color: rgba(0, 0, 0, .2);
    }

    .mpc.sel {
      border-color: var(--blue);
    }

    .sym-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      overflow-y: auto;
      align-content: start;
    }

    .sym-item {
      overflow: visible;
      position: relative;
    }

    .editable-svg-item {
      overflow: visible !important;
    }

    .sym-item {
      border: 1px dashed var(--border-deep);
      border-radius: 6px;
      padding: 10px 4px;
      text-align: center;
      cursor: pointer;
      transition: all .2s;
      font-size: 10px;
      background: #fff;
    }

    .sym-item:hover,
    .sym-item.on {
      border-color: var(--primary);
      border-style: solid;
      background: var(--bg-canvas);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .sym-item.on {
      border-width: 2px;
      padding: 9px 3px;
    }

    .sym-icon {
      font-size: 20px;
      margin-bottom: 2px;
    }

    .letter-item {
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 4px;
      text-align: center;
      cursor: pointer;
      transition: all .15s;
      background: #fff;
    }

    .letter-item:hover,
    .letter-item.on {
      border-color: var(--blue);
      background: var(--blue-light);
    }

    .letter-item.svg-letter {
      padding: 4px;
    }

    .letter-item.varsity-style {
      font-family: 'Alfa Slab One', sans-serif;
      color: #2c3e50;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.1;
    }

    .letter-item.script-style {
      font-family: 'Lobster Two', cursive;
      color: #555;
      font-size: 18px;
      line-height: 1.1;
    }

    .uzone {
      border: 2px dashed var(--border);
      border-radius: 8px;
      padding: 24px 16px;
      text-align: center;
      cursor: pointer;
      transition: all .15s;
    }

    .uzone:hover {
      border-color: var(--blue);
      background: var(--blue-light);
    }

    .uzone input {
      display: none;
    }

    /* Upload Tab redesign */
    .upload-btn-label {
      display: block;
      background: #27ae60;
      color: #fff;
      text-align: center;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.2px;
      padding: 13px 0;
      border-radius: 6px;
      cursor: pointer;
      transition: filter .15s;
      margin-bottom: 14px;
    }

    .upload-btn-label:hover {
      filter: brightness(1.1);
    }

    .removebg-loader {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: var(--radius-lg);
      z-index: 100;
    }
    .removebg-spinner {
      width: 52px;
      height: 52px;
      border: 5px solid #e0e4f0;
      border-top-color: #5b67e8;
      border-radius: 50%;
      animation: rmbg-spin 0.75s linear infinite;
    }
    @keyframes rmbg-spin {
      to { transform: rotate(360deg); }
    }
    .removebg-loader-lbl {
      font-size: 15px;
      font-weight: 600;
      color: #5b67e8;
      letter-spacing: 0.01em;
    }
    .removebg-loader-sub {
      font-size: 12px;
      color: #888;
      font-weight: 400;
    }
    .removebg-cancel {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 32px;
      height: 32px;
      border: none;
      background: rgba(0,0,0,0.07);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #555;
      line-height: 1;
      transition: background 0.15s;
    }
    .removebg-cancel:hover {
      background: rgba(0,0,0,0.14);
      color: #222;
    }

    .upload-removebg-row {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }

    .upload-removebg-check {
      display: flex;
      align-items: center;
      gap: 9px;
      cursor: pointer;
      font-size: 13px;
      color: #2980b9;
      font-weight: 500;
    }

    .upload-removebg-check input {
      display: none;
    }

    .upload-check-box {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      background: #2980b9;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
    }

    .upload-check-box::after {
      content: '✓';
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .upload-removebg-check input:not(:checked)~.upload-check-box {
      background: #fff;
      border: 2px solid #c5cdd8;
    }

    .upload-removebg-check input:not(:checked)~.upload-check-box::after {
      display: none;
    }

    .upload-info-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 13px;
      color: #2c3345;
    }

    .upload-info-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      background: #1a1a1a;
      color: #fff;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .mfooter {
      padding: 10px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      background: #f9fafb;
    }

    .mflinks {
      display: flex;
      gap: 14px;
    }

    .mflink {
      font-size: 11px;
      color: var(--muted);
      cursor: pointer;
      text-decoration: underline;
    }

    .mfbtns {
      display: flex;
      gap: 8px;
    }

    .mbtn-apply {
      background: var(--primary);
      color: #fff;
      padding: 10px 24px;
      border: none;
      border-radius: var(--radius-md);
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
    }

    .mbtn-apply:hover {
      background: #000;
      transform: translateY(-1px);
    }

    .mbtn-remove {
      background: #fff;
      color: #e74c3c;
      padding: 10px 24px;
      border: 1px solid #e74c3c;
      border-radius: var(--radius-md);
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
    }

    .mbtn-remove:hover {
      background: #fdf2f2;
      border-color: #c0392b;
      color: #c0392b;
    }

    .note-ta {
      width: 100%;
      padding: 9px 11px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      resize: vertical;
      min-height: 70px;
      outline: none;
    }

    .note-ta:focus {
      border-color: var(--blue);
    }

    /* EMB OUTLINE BOXES - shown on hover/active */
    .emb-box {
      cursor: pointer;
    }

    .emb-box:hover rect {
      stroke-opacity: 1 !important;
      stroke: #ff6e47 !important;
      stroke-width: 1px !important;
      stroke-dasharray: 5px 3px !important;
      fill: rgba(255, 255, 255, 0) !important;
    }

    /* TOAST */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: #1e2535;
      color: #fff;
      padding: 9px 20px;
      border-radius: 30px;
      font-size: 12px;
      font-weight: 600;
      z-index: 9999;
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
      white-space: nowrap;
    }

    .toast.on {
      transform: translateX(-50%) translateY(0);
    }

    /* VALIDATION MODAL */
    .val-bg {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }

    .val-bg.on {
      opacity: 1;
      pointer-events: all;
    }

    .val-modal {
      background: #fff;
      border-radius: 12px;
      width: 480px;
      max-width: 94vw;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
      transform: translateY(16px);
      transition: transform .2s;
      overflow: hidden;
    }

    .val-bg.on .val-modal {
      transform: none;
    }

    .val-mhead {
      padding: 20px 24px 16px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .val-mhead h3 {
      color: #e02020;
      font-size: 17px;
      font-weight: 700;
    }

    .val-mclose {
      background: none;
      border: none;
      font-size: 22px;
      color: #aaa;
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }

    .val-mclose:hover {
      color: #555;
    }

    .val-mbody {
      padding: 20px 24px 8px;
    }

    .val-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .val-list li {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 9px 0;
      border-bottom: 1px solid #fff;
      font-size: 14px;
      color: #2c3345;
    }

    .val-list li:last-child {
      border-bottom: none;
    }

    .val-num {
      color: #8492a6;
      font-size: 12px;
      font-weight: 700;
      min-width: 18px;
    }

    .val-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
    }

    .val-icon.ok {
      background: #27ae60;
      color: #fff;
    }

    .val-icon.miss {
      background: #e02020;
      color: #fff;
    }

    .val-mfoot {
      padding: 16px 24px 20px;
      text-align: center;
    }

    .val-okbtn {
      background: #2980b9;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 12px 52px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px;
      letter-spacing: 1px;
      cursor: pointer;
    }

    .val-okbtn:hover {
      filter: brightness(1.1);
    }

    /* SAVE DESIGN MODAL */
    .save-modal-bg {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 3000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }
    .save-modal-bg.on {
      opacity: 1;
      pointer-events: all;
    }
    .save-modal {
      background: #fff;
      border-radius: 12px;
      width: 500px;
      max-width: 94vw;
      box-shadow: 0 20px 60px rgba(0,0,0,.3);
      transform: translateY(16px);
      transition: transform .2s;
      overflow: hidden;
    }
    .save-modal-bg.on .save-modal {
      transform: none;
    }
    .save-modal-head {
      padding: 20px 24px 16px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .save-modal-head h3 {
      font-size: 18px;
      font-weight: 700;
      color: #1e2535;
    }
    .save-modal-head h3 span {
      color: #e02020;
    }
    .save-modal-close {
      background: none;
      border: none;
      font-size: 22px;
      color: #aaa;
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }
    .save-modal-close:hover { color: #555; }
    .save-modal-body {
      padding: 24px;
    }
    .save-email-input {
      width: 100%;
      border: 2px solid #4a90d9;
      border-radius: 6px;
      padding: 14px 16px;
      font-size: 15px;
      outline: none;
      box-sizing: border-box;
      font-family: inherit;
      color: #1e2535;
    }
    .save-email-input::placeholder { color: #aaa; }
    .save-email-input:focus { border-color: #2980b9; }
    .save-modal-err {
      color: #e02020;
      font-size: 12px;
      margin-top: 6px;
      min-height: 16px;
    }
    .save-modal-foot {
      padding: 8px 24px 24px;
      display: flex;
      gap: 12px;
      justify-content: center;
    }
    .save-submit-btn {
      background: #2980b9;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 12px 48px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px;
      letter-spacing: 1px;
      cursor: pointer;
      transition: filter .2s;
    }
    .save-submit-btn:hover { filter: brightness(1.1); }
    .save-cancel-btn {
      background: #f0f0f0;
      color: #555;
      border: none;
      border-radius: 8px;
      padding: 12px 32px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 18px;
      letter-spacing: 1px;
      cursor: pointer;
    }
    .save-cancel-btn:hover { background: #e0e0e0; }

    /* DUP ALERT MODAL */
    .dup-alert-bg {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 3000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }
    .dup-alert-bg.on {
      opacity: 1;
      pointer-events: all;
    }
    .dup-alert-card {
      background: #2a2020;
      border-radius: 12px;
      width: 380px;
      max-width: 94vw;
      padding: 28px 32px;
      box-shadow: 0 20px 60px rgba(0,0,0,.5);
      transform: translateY(16px);
      transition: transform .2s;
      text-align: center;
    }
    .dup-alert-bg.on .dup-alert-card {
      transform: none;
    }
    .dup-alert-title {
      font-size: 15px;
      font-weight: 600;
      color: #f0d0d0;
      margin-bottom: 24px;
    }
    .dup-alert-ok {
      background: #f4b8b8;
      color: #1e2535;
      border: none;
      border-radius: 30px;
      padding: 10px 36px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
    }
    .dup-alert-ok:hover { background: #f0a0a0; }

    /* MOBILE HEADER CART BUTTON – hidden on desktop */
    .hdr-cart-btn {
      display: none;
    }

    /* =====================================================
   RESPONSIVE – TABLET  (≤1024px)
   Desktop layout preserved, just slightly tighter
===================================================== */
    /* =====================================================
   RESPONSIVE – TABLET  (≤1024px)
===================================================== */
    @media(max-width:1024px) {
      .main {
        grid-template-columns: 320px 1fr;
      }

      .jwrap {
        width: 380px;
        height: 380px;
      }
    }

    /* =====================================================
   RESPONSIVE – MOBILE  (≤768px)
   Sticky compact jacket on top, config panel below
===================================================== */
    @media(max-width:768px) {

      /* ── Header ── */
      .hdr {
        padding: 8px 12px;
        gap: 8px;
        min-height: unset;
        height: auto;
        align-items: center;
      }

      .hdr h1 {
        font-size: 14px;
        line-height: 1.25;
        flex: 0 0 auto;
      }

      .hdr h1 br {
        display: block;
      }

      .price-box {
        flex: 1;
        text-align: center;
      }

      .price-label {
        font-size: 8px;
        letter-spacing: .5px;
      }

      .price-orig {
        display: none;
      }

      .price-sale {
        font-size: 20px;
      }

      .price-detail {
        display: none;
      }

      /* Mobile cart button */
      .hdr-cart-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--blue);
        color: #fff;
        border: none;
        border-radius: 20px;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 13px;
        letter-spacing: 1px;
        padding: 10px 12px;
        cursor: pointer;
        flex-shrink: 0;
        white-space: nowrap;
        /* min-height: 44px; */
      }

      /* ── Main: column stack, preview on top ── */
      .main {
        display: flex;
        flex-direction: column;
        min-height: unset;
        overflow: visible;
      }

      /* Preview panel — sticky at top below header */
      .right {
        position: -webkit-sticky;
        position: sticky;
        top: 56px;
        z-index: 200;
        inset: auto;
        width: 100%;
        min-height: unset;
        background: #e6ecf5;
        border-bottom: 2px solid var(--border);
        padding: 6px 10px 10px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        order: 1;
      }

      /* Config panel — full width below preview */
      .left {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-top: 1px solid var(--border-soft);
        overflow-y: visible;
        order: 2;
      }

      /* ── Toolbar ── */
      .preview-toolbar {
        margin-bottom: 5px;
        flex-wrap: wrap;
        gap: 4px;
      }

      .tbtn {
        padding: 6px 10px;
        font-size: 10px;
        min-height: 34px;
      }

      .gtog {
        font-size: 9px;
      }

      /* ── Preview area ── */
      .preview-area {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0;
        position: relative;
      }

      /* ── Jacket ── */
      .jwrap {
        width: calc(100% - 56px);
        /* leave room for thumbs column */
        max-width: 340px;
        height: 280px;
        margin: 0 auto;
      }

      /* ── Thumbs: vertical column pinned right ── */
      .thumbs {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: fit-content;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 5px 3px;
        background: rgba(255, 255, 255, .75);
        border-radius: 10px;
        backdrop-filter: blur(4px);
        z-index: 10;
        overflow: hidden;
      }

      .twrap {
        flex-direction: column;
        align-items: center;
      }

      .thumb {
        width: 44px;
        height: 48px;
      }

      .tlbl {
        font-size: 6px;
      }

      /* ── Steps in config panel ── */
      .step-hdr {
        min-height: 52px;
      }

      .step-num {
        width: 44px;
        font-size: 17px;
      }

      .step-title {
        font-size: 14px;
        padding: 0 12px;
      }

      .step-body {
        padding: 12px;
      }

      /* Larger touch targets for toggle buttons */
      .tog-btn {
        padding: 10px 6px;
        font-size: 12px;
        min-height: 44px;
      }

      /* Design slot grid */
      .dg {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
      }

      .dslot-img {
        height: 50px;
      }

      .dslot-lbl {
        font-size: 8px;
      }

      /* Action buttons full width */
      .abtn {
        font-size: 14px;
        padding: 13px;
      }

      .abtn-row {
        flex-direction: column;
        gap: 6px;
      }

      /* ── Palette: centred overlay ── */
      .palette-float {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px);
        max-width: 340px;
        z-index: 600;
      }

      /* ── Modal: full screen ── */
      .modal {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
      }

      .mhdr {
        padding: 14px 16px;
      }

      .mhdr h2,
      .mhdr h3 {
        font-size: 16px;
      }

      .mtab {
        font-size: 11px;
        padding: 8px 6px;
      }

      /* Modal body: sym-grid on top (scrollable), preview below (fixed) */
      .mbody {
        flex-direction: column;
        overflow: hidden;
      }

      .mleft {
        border-right: none;
        border-bottom: 1px solid var(--border);
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 10px 12px;
      }

      .mright {
        width: 100%;
        flex-shrink: 0;
        max-height: 260px;
        overflow-y: auto;
        padding: 10px 12px;
        border-top: 1px solid var(--border-soft);
      }

      /* Sym grid — 5 cols on mobile is fine, just smaller */
      .sym-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
      }

      .sym-item {
        padding: 6px 2px;
        font-size: 9px;
      }

      .sym-item.on {
        padding: 5px 1px;
      }

      /* Editable grid thumbnails slightly smaller */
      .editable-svg-item {
        height: 72px !important;
      }

      /* Zone label rows */
      .zone-label {
        font-size: 11px;
      }

      /* Inputs in modal */
      .minput {
        font-size: 16px;
      }

      /* 16px prevents iOS zoom */
      .mlabel {
        font-size: 11px;
      }

      /* App buttons (treatment options) */
      .app-btn {
        padding: 6px 10px;
        font-size: 11px;
        min-height: 38px;
      }

      /* Color palette grid */
      .pf-grid {
        grid-template-columns: repeat(8, 1fr);
      }

      .pc {
        width: 32px;
        height: 32px;
      }

      /* Summary panel */
      .mpanel {
        width: 100%;
        max-width: 100%;
      }

      /* ── Hide ADD TO CART from bottom actions (in header now) ── */
      .abtn-cart {
        display: none;
      }

      .actions {
        padding: 10px 12px;
      }
    }

    /* =====================================================
   RESPONSIVE – NARROW MOBILE  (≤480px)
===================================================== */
    @media(max-width:480px) {
      .right {
        top: 45px;
      }

      .hdr {
        padding: 6px 10px;
      }

      .hdr h1 {
        font-size: 12px;
      }

      .price-sale {
        font-size: 18px;
      }

      .hdr-cart-btn {
        font-size: 11px;
        padding: 8px 10px;
      }

      .jwrap {
        height: 265px;
      }

      .thumb {
        width: 42px;
        height: 46px;
      }

      .tlbl {
        font-size: 6px;
      }

      .step-num {
        width: 40px;
        font-size: 16px;
      }

      .step-title {
        font-size: 13px;
        padding: 0 10px;
      }

      .step-body {
        padding: 10px 10px 12px;
      }

      .fg {
        margin-bottom: 10px;
      }

      .tog-btn {
        padding: 9px 4px;
        font-size: 11px;
      }

      .dg {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }

      .dslot-img {
        height: 44px;
      }

      .dslot-lbl {
        font-size: 7px;
      }

      .abtn {
        font-size: 13px;
        padding: 12px;
      }

      .abtn-row {
        gap: 5px;
      }

      .mpanel {
        width: 100%;
        max-width: 100%;
      }

      .val-modal {
        width: calc(100vw - 20px);
        border-radius: 8px;
      }

      .pf-grid {
        grid-template-columns: repeat(7, 1fr);
      }

      .pc {
        width: 30px;
        height: 30px;
      }

      /* Modal preview area compact */
      .mright {
        max-height: 220px;
      }

      /* Sym grid 4 cols on very small screens */
      .sym-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

/* ============================================================
   WP override: desktop view-thumbnails as a vertically-centered
   pill on the LEFT, so all 4 views stay in the viewport without
   scrolling inside the iframe. (Mobile keeps its right column.)
============================================================ */
@media (min-width: 769px) {
  /* .right { padding-left: 150px; } */
  .thumbs {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    margin-top: 0;
    gap: 16px;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 40px;
    box-shadow: var(--shadow-soft);
    z-index: 20;
  }
  .thumbs .twrap { flex-direction: column; align-items: center; }
}