:root {
    --bg: #faf4ec;
    --bg-warm: #f5ede0;
    --surface: #ffffff;
    --surface-2: #f3ece1;
    --ink: #1a1916;
    --ink-soft: #4a4640;
    --ink-muted: #8a8478;
    --line: #e6dccb;
    --line-soft: #efe7d6;
    --accent: #1a1916;
    --accent-warm: #b8835a;
    --accent-soft: #d9b89a;
    --select: #e8a89a;
    --select-strong: #d97777;
    --select-glow: rgba(232, 168, 154, 0.25);
    --snap: #ec4899;
    --gold: #c8975a;
    --serif: 'Frank Ruhl Libre', 'Fraunces', Georgia, serif;
    --display: 'Suez One', 'Fraunces', Georgia, serif;
    --sans: 'Assistant', 'Heebo', -apple-system, sans-serif;

    --shadow-sm: 0 1px 2px rgba(26,25,22,0.06);
    --shadow-md: 0 4px 12px rgba(26,25,22,0.08);
    --shadow-lg: 0 12px 32px rgba(26,25,22,0.12);
    --shadow-xl: 0 24px 48px rgba(26,25,22,0.15);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
  }

  /* Original standalone styles applied to body. Scoped here to avoid leaking into host WP page. */
  .makeart-customizer-overlay * { box-sizing: border-box; }
  .makeart-customizer-overlay {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    overscroll-behavior: none;
  }

  /* ============================================
     TOP BAR
     ============================================ */
  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--line-soft);
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }

  .topbar-left, .topbar-right {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .topbar-right { justify-content: flex-end; }
  .topbar-left { justify-content: flex-start; }

  .topbar-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  .topbar-logo-mark {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), #8b6240);
    display: grid; place-items: center;
    color: #fff;
    font-family: var(--display);
    font-size: 17px;
    box-shadow: 0 3px 10px rgba(184,131,90,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    position: relative;
  }
  .topbar-logo-mark::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    opacity: 0.25;
  }
  .topbar-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }
  .topbar-logo-name {
    font-family: var(--display);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: -0.3px;
    color: var(--ink);
  }
  .topbar-logo-sub {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--accent-warm);
    letter-spacing: 1.5px;
    font-weight: 600;
  }

  .topbar-btn {
    width: 38px; height: 38px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-soft);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .18s ease;
    position: relative;
  }
  .topbar-btn:hover:not(:disabled) {
    background: var(--bg-warm);
    color: var(--ink);
  }
  .topbar-btn:active:not(:disabled) { transform: scale(0.94); }
  .topbar-btn:disabled { opacity: .3; cursor: not-allowed; }
  .topbar-btn svg { width: 18px; height: 18px; }
  .topbar-btn.close {
    background: var(--surface);
    border-color: var(--line);
  }
  .topbar-btn.close:hover {
    background: #fff5f5;
    color: #c44;
    border-color: #f0c4c4;
  }

  .topbar-divider {
    width: 1px; height: 24px;
    background: var(--line);
    margin: 0 6px;
  }

  .crumbs {
    font-size: 13px; color: var(--ink-muted);
    display: flex; align-items: center; gap: 8px;
    margin-right: 14px;
  }
  .crumbs strong {
    color: var(--ink);
    font-weight: 600;
    font-family: var(--serif);
    font-size: 14px;
  }
  .crumbs .sep { color: var(--line); }

  /* ============================================
     APP LAYOUT
     ============================================ */
  .app {
    display: grid;
    grid-template-columns: 84px 1fr 320px;
    height: 100vh;
    padding-top: 60px;
    transition: grid-template-columns .3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .app.panel-open {
    /* Side panel narrowed ~20% (380→300) per design feedback — was eating
       too much canvas real-estate. Internal paddings + row spacing were
       also tightened in concert; see .panel-body / .prop-row below. */
    grid-template-columns: 84px 300px 1fr 320px;
  }

  /* ===== Tab Rail ===== */
  .rail {
    background: linear-gradient(180deg, #1a1916 0%, #2a2724 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
    gap: 6px;
    position: relative;
  }
  .rail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(184,131,90,0.15), transparent 60%);
    pointer-events: none;
  }
  .rail-tabs { display: flex; flex-direction: column; gap: 6px; width: 100%; position: relative; z-index: 1; }
  .rail-tab {
    background: none; border: none;
    color: rgba(255,255,255,0.55);
    padding: 16px 8px;
    cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; gap: 7px;
    font-family: var(--sans);
    font-size: 11px; font-weight: 600;
    transition: all .2s;
    position: relative;
  }
  .rail-tab svg { width: 22px; height: 22px; transition: transform .2s ease; }
  .rail-tab:hover { color: rgba(255,255,255,0.9); }
  .rail-tab:hover svg { transform: scale(1.12); }
  .rail-tab.active { color: #fff; }
  .rail-tab.active::before {
    content: '';
    position: absolute;
    right: 0; top: 12px; bottom: 12px;
    width: 3px;
    background: linear-gradient(180deg, var(--gold), var(--accent-warm));
    border-radius: 3px 0 0 3px;
    box-shadow: 0 0 8px rgba(200,151,90,0.4);
  }
  .rail-spacer { flex: 1; }
  .rail-bottom-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    cursor: pointer; display: grid; place-items: center;
    margin: 4px 0; transition: all .2s;
    position: relative; z-index: 1;
  }
  .rail-bottom-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.15);
  }
  .rail-bottom-btn svg { width: 18px; height: 18px; }

  /* ===== Side Panel ===== */
  .panel {
    background: var(--surface);
    border-left: 1px solid var(--line);
    display: flex; flex-direction: column;
    overflow: hidden; position: relative;
    box-shadow: 4px 0 24px rgba(26,25,22,0.04);
  }
  .panel-close {
    position: absolute; top: 14px; left: 14px;
    background: var(--bg);
    border: 1px solid var(--line-soft);
    color: var(--ink-muted);
    cursor: pointer;
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    display: grid; place-items: center;
    transition: all .15s;
    z-index: 5;
  }
  .panel-close:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
  }
  .panel-close svg { width: 14px; height: 14px; }

  .panel-header {
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg, var(--bg-warm) 0%, var(--surface) 100%);
  }
  .panel-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.4px;
    line-height: 1.1;
  }
  .panel-sub {
    color: var(--ink-muted);
    font-size: 12px;
    margin-top: 4px;
  }
  .panel-body {
    flex: 1;
    overflow-y: auto;
    /* Tightened from 22 26 — narrower panel needs less internal breathing
       room and keeps the controls from feeling marooned. */
    padding: 16px 18px;
    -webkit-overflow-scrolling: touch;
  }
  .panel-body::-webkit-scrollbar { width: 6px; }
  .panel-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .panel-body::-webkit-scrollbar-track { background: transparent; }

  .field-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.4px; color: var(--ink-muted);
    margin-bottom: 10px; display: block;
  }
  .field + .field { margin-top: 22px; }

  /* ===== Element actions strip ===== */
  .el-actions {
    display: flex; gap: 8px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-warm);
  }
  .el-action {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    cursor: pointer;
    color: var(--ink); font-size: 13px; font-weight: 500;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    transition: all .15s;
  }
  .el-action:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: var(--ink-soft);
  }
  .el-action svg { width: 16px; height: 16px; color: var(--ink-soft); }
  .el-action:hover svg { color: var(--ink); }
  .el-action.remove:hover {
    border-color: #e8a8a8;
    background: #fff5f5;
    color: #c44;
  }
  .el-action.remove:hover svg { color: #c44; }

  /* ===== Property rows ===== */
  .prop-row {
    display: grid;
    /* Slightly narrower label column + tighter gap — pairs with the smaller
       panel width so values don't feel cramped against the right edge. */
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .prop-row:last-child { border-bottom: none; }
  .prop-label {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
  }
  .prop-content { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  .font-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    flex: 1;
    transition: all .15s;
    min-height: 44px;
  }
  .font-display:hover { border-color: var(--ink-soft); background: var(--bg); }
  .font-display-preview {
    width: 32px; height: 32px;
    background: var(--bg-warm);
    border-radius: var(--radius-sm);
    display: grid; place-items: center;
    font-size: 18px;
    font-weight: 500;
    flex-shrink: 0;
  }
  .font-display-name {
    flex: 1;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
  }

  .color-display {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--surface);
    cursor: pointer;
    transition: all .15s;
    box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  }
  .color-display:hover { transform: scale(1.05); }

  .seg-btn {
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: grid; place-items: center;
    color: var(--ink-soft);
    transition: all .15s;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
  }
  .seg-btn:hover { background: var(--bg); border-color: var(--ink-soft); }
  .seg-btn:active { transform: scale(0.95); }
  .seg-btn.active {
    background: var(--ink); color: #fff; border-color: var(--ink);
    box-shadow: 0 2px 8px rgba(26,25,22,0.2);
  }
  .seg-btn.active svg { color: #fff; }
  .seg-btn svg { width: 16px; height: 16px; }
  .seg-btn.pink-active.active {
    background: var(--surface);
    color: var(--select-strong);
    border-color: var(--select-strong);
    box-shadow: 0 0 0 3px var(--select-glow);
  }
  .seg-btn.pink-active.active svg { color: var(--select-strong); }

  /* Range slider */
  .range-wrap {
    flex: 1;
    position: relative;
    padding: 12px 4px;
    min-width: 120px;
  }
  .range-input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    background: var(--line);
    border-radius: 3px;
    outline: none;
  }
  .range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--ink);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform .15s;
  }
  .range-input::-webkit-slider-thumb:hover { transform: scale(1.15); }
  .range-input::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--ink);
    cursor: pointer;
  }
  .range-ticks {
    position: absolute;
    inset: 12px 4px auto 4px;
    height: 3px;
    pointer-events: none;
  }
  .range-tick {
    position: absolute;
    top: -5px;
    width: 1.5px; height: 13px;
    background: var(--ink-soft);
    border-radius: 2px;
    opacity: 0.3;
  }

  .move-grid { display: grid; grid-template-columns: repeat(4, 40px); gap: 6px; }
  .size-grid { display: grid; grid-template-columns: 40px 40px; gap: 6px; }
  .mirror-grid { display: grid; grid-template-columns: 40px 40px; gap: 6px; }

  /* ===== Sub-tabs ===== */
  .subtabs-wrap {
    display: flex;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-warm);
  }
  .subtab {
    flex: 1;
    padding: 14px 8px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all .15s;
    position: relative;
  }
  .subtab:hover { color: var(--ink); }
  .subtab.active {
    color: var(--select-strong);
    border-bottom-color: var(--select-strong);
    background: var(--surface);
  }
  .subtab svg { width: 22px; height: 22px; }

  /* ===== Text input with counter ===== */
  .text-input-wrap {
    position: relative;
  }
  .text-input {
    width: 100%; padding: 14px 16px;
    padding-left: 64px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    transition: all .15s;
  }
  .text-input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(26,25,22,0.05);
  }
  .text-input::placeholder { color: var(--ink-muted); }
  .text-counter {
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    background: var(--bg-warm);
    border-radius: 100px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--ink-muted);
    font-weight: 600;
    pointer-events: none;
    transition: all .15s;
  }
  .text-counter.warn {
    color: #c44;
    background: #fee;
  }

  /* ===== Upload zone ===== */
  .upload-zone {
    border: 2px dashed var(--line);
    border-radius: var(--radius-lg);
    padding: 36px 18px;
    text-align: center;
    cursor: pointer;
    transition: all .25s;
    background: var(--bg);
    display: block;
    position: relative;
    overflow: hidden;
  }
  .upload-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, var(--surface-2), transparent 70%);
    opacity: 0;
    transition: opacity .3s;
  }
  .upload-zone:hover {
    border-color: var(--accent-warm);
    transform: translateY(-1px);
  }
  .upload-zone:hover::before { opacity: 1; }
  .upload-zone > * { position: relative; }
  .upload-zone svg {
    width: 36px; height: 36px;
    color: var(--accent-warm);
    margin-bottom: 10px;
  }
  .upload-zone-title {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
  }
  .upload-zone-sub {
    color: var(--ink-muted);
    font-size: 12px;
    margin-top: 4px;
  }

  /* ===== Toggle ===== */
  .toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--line-soft);
    transition: all .15s;
  }
  .toggle-row:hover { border-color: var(--line); }
  .toggle-info { display: flex; flex-direction: column; gap: 2px; }
  .toggle-name { font-weight: 600; font-size: 13px; color: var(--ink); }
  .toggle-desc { color: var(--ink-muted); font-size: 11px; }
  .toggle {
    width: 42px; height: 24px;
    border-radius: 12px;
    background: var(--line);
    position: relative;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
  }
  .toggle::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    top: 2px; right: 2px;
    transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  }
  .toggle.on { background: var(--ink); }
  .toggle.on::after { transform: translateX(-18px); }

  /* ===== Font picker grid ===== */
  .font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .font-chip {
    padding: 16px 10px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: all .15s;
    text-align: center;
    font-size: 17px;
    color: var(--ink);
  }
  .font-chip:hover {
    border-color: var(--ink-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
  .font-chip.active {
    border-color: var(--ink);
    background: var(--bg-warm);
    box-shadow: 0 0 0 3px rgba(26,25,22,0.06);
  }
  .font-chip-name {
    font-size: 10px;
    color: var(--ink-muted);
    margin-top: 4px;
    font-family: var(--sans);
    display: block;
    font-weight: 600;
    letter-spacing: 0.3px;
  }

  /* ===== Color swatches ===== */
  .swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
  .swatch {
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .15s;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,0.08);
  }
  .swatch:hover { transform: scale(1.12); }
  .swatch.active {
    border-color: var(--ink);
    transform: scale(1.12);
  }

  /* Collapse */
  .collapse {
    overflow: hidden;
    transition: max-height .3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .collapse.closed { max-height: 0 !important; }

  /* ===== Icon grid ===== */
  .icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .icon-tile {
    aspect-ratio: 1;
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    display: grid; place-items: center;
    cursor: pointer;
    transition: all .15s;
    color: var(--ink-soft);
  }
  .icon-tile:hover {
    background: var(--surface);
    border-color: var(--accent-warm);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .icon-tile svg { width: 26px; height: 26px; }

  /* ===== Letters tab ===== */
  .letter-upload-row { margin-bottom: 14px; }
  .letter-upload-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--surface); color: var(--ink);
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .15s;
  }
  .letter-upload-btn:hover { border-color: var(--accent-warm); background: var(--bg); }
  .letter-upload-btn svg { width: 18px; height: 18px; }
  .letter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 across — bigger, more readable */
    gap: 12px;
  }
  .letter-section-title {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ink-soft);
    margin: 6px 0 -4px;
    display: flex; align-items: center; gap: 8px;
  }
  .letter-section-title::after {
    content: ''; flex: 1; height: 1px; background: var(--line-soft);
  }
  .letter-tile {
    aspect-ratio: 1;
    background: var(--surface);
    border: 1.5px solid var(--line-soft);
    border-radius: var(--radius-md);
    display: grid; place-items: center;
    cursor: pointer;
    transition: all .18s ease;
    color: var(--ink);
    padding: 10px;
    position: relative;
    overflow: hidden;
  }
  .letter-tile:hover {
    background: var(--bg);
    border-color: var(--accent-warm);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(40, 28, 14, 0.10);
  }
  .letter-tile.active {
    background: var(--bg-warm, #fef0e6);
    border-color: var(--accent-warm, #ed6a26);
    box-shadow: 0 0 0 3px rgba(237, 106, 38, 0.18);
  }
  .letter-tile img {
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
  }
  .letter-tile svg { width: 100%; height: 100%; max-width: 56px; max-height: 56px; }
  .letter-tile svg path { fill: var(--ink); transition: fill .15s; }
  .letter-tile:hover svg path { fill: var(--accent-warm); }
  .letter-tile-code {
    position: absolute; bottom: 4px; right: 6px;
    font-size: 10px; font-weight: 700;
    color: var(--ink-soft); opacity: .55;
    letter-spacing: 0.4px;
  }

  /* Cross-link footer — sibling-product navigation. */
  .letter-related-links {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
  }
  .letter-related-title {
    font-size: 12px; font-weight: 700;
    color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: 1px;
    margin: 0 0 10px;
  }
  .letter-related-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    transition: all .15s;
    margin-bottom: 6px;
  }
  .letter-related-link:hover {
    background: var(--bg-warm, #fef0e6);
    border-color: var(--accent-warm);
    transform: translateX(-2px);
  }
  .letter-related-link .lr-emoji { font-size: 18px; }
  .letter-related-link .lr-text  { flex: 1; font-size: 13px; }
  .letter-related-link .lr-arrow { color: var(--ink-soft); }

  /* ===== Templates ===== */
  .template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .template-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--surface);
    transition: all .25s;
  }
  .template-card:hover {
    border-color: var(--accent-warm);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
  .template-preview {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-warm) 100%);
    display: grid;
    place-items: center;
    border-bottom: 1px solid var(--line-soft);
    position: relative;
  }
  .template-name {
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
  }

  /* ===== Search ===== */
  .search { position: relative; margin-bottom: 18px; }
  .search input {
    width: 100%; padding: 12px 16px 12px 40px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg);
    font-family: var(--sans);
    font-size: 14px;
    transition: all .15s;
  }
  .search input:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--surface);
  }
  .search svg {
    position: absolute;
    left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--ink-muted);
  }
  .icon-cats {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .icon-cat {
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    color: var(--ink-soft);
  }
  .icon-cat:hover { background: var(--bg); border-color: var(--ink-muted); }
  .icon-cat.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
  }

  /* ===== STAGE ===== */
  .stage {
    position: relative;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(184,131,90,0.06) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(232,168,154,0.05) 0%, transparent 50%),
      var(--bg);
    overflow: hidden;
  }

  .stage-canvas {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 50px;
    position: relative;
    overflow: hidden;
  }

  /* Decorative grain */
  .stage-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 1px 1px, rgba(26,25,22,0.025) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
    opacity: 0.6;
  }

  /* ===== Quick toolbar ===== */
  .quick-toolbar {
    position: absolute;
    top: 50%;
    left: 28px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 5;
  }
  .quick-btn {
    width: 46px; height: 46px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    display: grid; place-items: center;
    color: var(--ink-soft);
    transition: all .15s;
    position: relative;
  }
  .quick-btn:hover {
    background: var(--bg-warm);
    color: var(--ink);
  }
  .quick-btn svg { width: 22px; height: 22px; }
  .quick-btn::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    box-shadow: var(--shadow-md);
  }
  .quick-btn:hover::after { opacity: 1; }

  /* ===== Zoom controls ===== */
  .zoom-controls {
    position: absolute;
    bottom: 110px;
    right: 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 4px;
    box-shadow: var(--shadow-md);
    z-index: 5;
  }
  .zoom-btn {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    display: grid; place-items: center;
    color: var(--ink-soft);
    transition: all .15s;
  }
  .zoom-btn:hover { background: var(--bg-warm); color: var(--ink); }
  .zoom-btn svg { width: 16px; height: 16px; }
  .zoom-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .zoom-display {
    font-size: 11px;
    color: var(--ink-soft);
    text-align: center;
    padding: 4px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    font-weight: 700;
    font-family: var(--serif);
    letter-spacing: 0.5px;
  }

  /* ===== Cart button ===== */
  .cart-btn {
    position: absolute;
    bottom: 110px;
    left: 28px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ink) 0%, #2a2724 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow:
      0 12px 28px rgba(26,25,22,0.3),
      inset 0 1px 0 rgba(255,255,255,0.1);
    transition: all .2s;
    z-index: 5;
  }
  .cart-btn:hover {
    transform: translateY(-3px);
    box-shadow:
      0 16px 36px rgba(26,25,22,0.4),
      inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .cart-btn:active { transform: translateY(-1px); }
  .cart-btn svg { width: 24px; height: 24px; }
  .cart-badge {
    position: absolute;
    top: -2px; right: -2px;
    background: var(--accent-warm);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    display: grid; place-items: center;
    border: 2px solid var(--bg);
  }

  /* ===== PRODUCT ===== */
  .product-wrap {
    position: relative;
    width: min(560px, 78%);
    aspect-ratio: 1;
    z-index: 2;
  }
  .product-wrap.drag-over::after {
    content: 'שחררו תמונה כאן';
    position: absolute;
    inset: 0;
    background: rgba(232,168,154,0.25);
    border: 3px dashed var(--select-strong);
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    color: var(--select-strong);
    font-family: var(--display);
    font-size: 24px;
    font-weight: 600;
    z-index: 100;
    pointer-events: none;
    backdrop-filter: blur(2px);
  }
  .product {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(145deg, #d4c4ad 0%, #b09775 60%, #98815c 100%);
    border-radius: var(--radius-lg);
    box-shadow:
      0 30px 60px -20px rgba(26,25,22,0.35),
      0 0 0 1px rgba(26,25,22,0.08),
      inset 0 1px 0 rgba(255,255,255,0.4);
    overflow: hidden;
  }
  .product::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(92deg, transparent 0px, rgba(101,67,33,0.1) 2px, transparent 4px, rgba(101,67,33,0.05) 8px, transparent 14px),
      repeating-linear-gradient(88deg, transparent 0px, rgba(80,50,20,0.07) 1px, transparent 3px);
    pointer-events: none;
  }
  .product::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 30% 30%, transparent 0%, rgba(0,0,0,0.18) 100%);
    pointer-events: none;
    border-radius: var(--radius-lg);
  }
  /* Sibling layer that holds the selection handles for the currently-selected
     element. Lives OUTSIDE the masked design-area, so handles stay visible
     even when the element's bounding-box falls outside the SVG clip mask
     (e.g. corners hanging off the heart in a LOVE collage). The customizer
     JS positions a .selection-box-floating inside this layer to track the
     selected element's screen position. */
  .handles-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;          /* layer itself doesn't block clicks */
    z-index: 50;                    /* above design-area */
  }
  .handles-layer .selection-box-floating {
    position: absolute;
    pointer-events: none;
  }
  .handles-layer .handle {
    pointer-events: auto;           /* but the handles themselves DO take clicks */
  }

  .design-area {
    position: absolute;
    /* Default fallback bounds — overridden by inline style coming from the
       admin meta box (print_box_left/top/width/height). NOTE: never use the
       `inset` shorthand here. In RTL the `right` it sets wins over the
       inline `left`, which silently shifts the frame to the wrong column. */
    top:    12%;
    left:   12%;
    width:  76%;
    height: 76%;
    right:  auto;
    bottom: auto;
    border-radius: 6px;
    overflow: visible;
  }

  /* ===== ELEMENTS ===== */
  .element {
    position: absolute;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transform-origin: center;
  }
  .element.selected { z-index: 10; }
  .element-text {
    width: 100%; height: 100%;
    display: flex; align-items: center;
    line-height: 1.1;
    word-break: break-word;
    padding: 4px;
  }
  .element-img { width: 100%; height: 100%; object-fit: contain; }
  .element-svg { width: 100%; height: 100%; }

  /* ===== Selection Box ===== */
  .selection-box {
    position: absolute; inset: 0;
    border: 1.5px solid var(--select);
    pointer-events: none;
    border-radius: 2px;
    box-shadow: 0 0 0 4px var(--select-glow);
  }
  .selection-box .handle {
    position: absolute;
    pointer-events: auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-warm);
    border: 1.5px solid var(--select);
    display: grid; place-items: center;
    color: var(--ink-soft);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    transition: all .15s;
  }
  .selection-box .handle:hover {
    transform: scale(1.12);
    color: var(--ink);
    background: var(--surface);
  }
  .selection-box .handle svg { width: 13px; height: 13px; }
  .handle.tl { top: -14px; left: -14px; cursor: move; }
  .handle.tr { top: -14px; right: -14px; cursor: grab; }
  .handle.bl { bottom: -14px; left: -14px; cursor: pointer; }
  .handle.bl:hover {
    color: #fff;
    background: #c44;
    border-color: #c44;
  }
  .handle.br { bottom: -14px; right: -14px; cursor: nwse-resize; }

  /* ===== Snap Guides ===== */
  .snap-guide {
    position: absolute;
    background: var(--snap);
    pointer-events: none;
    z-index: 8;
    box-shadow: 0 0 8px rgba(236,72,153,0.5);
  }
  .snap-guide.h { left: 0; right: 0; height: 1px; }
  .snap-guide.v { top: 0; bottom: 0; width: 1px; }

  /* ===== Add hints ===== */
  .add-hint {
    position: absolute;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 2px dashed var(--ink-soft);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink-soft);
    transition: all .25s;
    z-index: 4;
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-md);
  }
  .add-hint:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    transform: scale(1.08);
    border-style: solid;
    box-shadow: var(--shadow-lg);
  }
  .add-hint svg { width: 28px; height: 28px; }
  .add-hint-label {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    background: rgba(255,255,255,0.95);
    padding: 4px 12px;
    border-radius: 100px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-sm);
  }

  /* ===== Stage Bottom ===== */
  .stage-bottom {
    padding: 16px 32px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    z-index: 10;
  }
  .price-tag { display: flex; flex-direction: column; }
  .price-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ink-muted);
    font-weight: 600;
  }
  .price-val {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.1;
  }
  .price-val .currency {
    font-size: 18px;
    color: var(--ink-muted);
    margin-left: 2px;
    margin-right: 2px;
    /* Font-family is set via inline style on each .currency span
     * (system-ui first — its SF Hebrew / Segoe UI ₪ glyph is clearly
     * distinct from ש, unlike Heebo). Don't override with !important
     * here — it would defeat the inline style. */
  }
  .stage-btns { display: flex; gap: 10px; }

  .btn {
    padding: 14px 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
  }
  .btn:hover { background: var(--bg-warm); }
  .btn-primary {
    background: linear-gradient(135deg, var(--ink) 0%, #2a2724 100%);
    color: #fff;
    border-color: var(--ink);
    box-shadow: 0 4px 12px rgba(26,25,22,0.2);
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(26,25,22,0.3);
  }

  /* ===== Info Panel ===== */
  .info {
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(26,25,22,0.04);
  }
  .info-header {
    padding: 26px 24px 20px;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg, var(--bg-warm) 0%, var(--surface) 100%);
  }
  .info-cat {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--accent-warm);
    font-weight: 700;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .info-cat::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-warm);
  }
  .info-name {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
  }
  .info-desc {
    color: var(--ink-muted);
    font-size: 12.5px;
    line-height: 1.55;
  }
  .info-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line-soft);
  }
  .info-section h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--ink-muted);
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .info-section h4 .count {
    color: var(--ink);
    background: var(--bg-warm);
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
  }

  .layers { display: flex; flex-direction: column; gap: 6px; }
  .layer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
  }
  .layer:hover {
    border-color: var(--ink-soft);
    background: var(--surface);
  }
  .layer.active {
    border-color: var(--select-strong);
    background: rgba(232,168,154,0.08);
    box-shadow: 0 0 0 3px var(--select-glow);
  }
  .layer-icon {
    width: 30px; height: 30px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    display: grid; place-items: center;
    color: var(--ink-soft);
    flex-shrink: 0;
    border: 1px solid var(--line-soft);
  }
  .layer-icon svg { width: 14px; height: 14px; }
  .layer-name {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
  }
  .layer-actions { display: flex; gap: 2px; }
  .layer-act {
    background: none;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    padding: 6px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    transition: all .15s;
  }
  .layer-act:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
  .layer-act.del:hover { color: #c44; background: rgba(196,68,68,0.08); }
  .layer-act svg { width: 14px; height: 14px; }

  .empty-layers {
    text-align: center;
    padding: 24px 12px;
    color: var(--ink-muted);
    font-size: 12px;
    background: var(--bg);
    border-radius: var(--radius-md);
    font-style: italic;
    border: 1px dashed var(--line);
  }

  .layer-order-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    margin-top: 10px;
  }
  .layer-order-btn {
    padding: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .15s;
    font-weight: 600;
  }
  .layer-order-btn:hover:not(:disabled) {
    background: var(--bg-warm);
    color: var(--ink);
  }
  .layer-order-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .layer-order-btn svg { width: 14px; height: 14px; }

  .tab-content { display: none; }
  .tab-content.active {
    /* Was display:block which let the panel-body grow taller than the panel
       itself, killing scroll. Flex-column with min-height:0 lets panel-body
       become the scroll container — letters/numbers/shapes lists now scroll
       smoothly when content exceeds viewport. */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .engraving-notice {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(184,131,90,0.08);
    border: 1px solid rgba(184,131,90,0.25);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.55;
    display: none;
  }
  .engraving-notice.show { display: block; }
  .engraving-notice strong { color: var(--accent-warm); font-weight: 700; }

  .panel.hidden { display: none; }

  /* ===== Mobile bottom nav (hidden on desktop) ===== */
  .mobile-bottombar { display: none; }
  .mobile-info-trigger { display: none; }
  .mobile-info-overlay { display: none; }

  /* ============================================
     MOBILE LAYOUT
     ============================================ */
  @media (max-width: 768px) {
    .topbar {
      padding: 0 12px;
      height: 56px;
    }
    .topbar-left .crumbs { display: none; }
    .topbar-logo-text {
      display: none;
    }
    .topbar-logo-mark { width: 32px; height: 32px; font-size: 15px; }

    /* Hide most topbar buttons on mobile, keep only essentials */
    .topbar-right .topbar-btn:not(.close):not(.mobile-keep) { display: none; }
    .topbar-divider { display: none; }

    .app, .app.panel-open {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "stage";
      padding-top: 56px;
      padding-bottom: 64px;
    }

    .rail { display: none; }
    .info { display: none; }

    .stage { grid-area: stage; height: 100%; }
    .stage-canvas {
      padding: 16px;
      padding-bottom: 80px;
    }
    .product-wrap { width: 88%; }

    /* Floating left toolbar -> bottom row, above bottom nav */
    .quick-toolbar {
      flex-direction: row;
      top: auto;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      padding: 5px;
    }
    .quick-btn { width: 42px; height: 42px; }
    .quick-btn svg { width: 20px; height: 20px; }
    .quick-btn::after {
      left: 50%;
      bottom: calc(100% + 10px);
      top: auto;
      transform: translateX(-50%);
    }

    /* Zoom moves to right edge */
    .zoom-controls {
      bottom: 80px;
      right: 12px;
      flex-direction: column;
      padding: 3px;
    }
    .zoom-btn { width: 36px; height: 36px; }
    .zoom-display { font-size: 10px; padding: 3px 0; }

    /* Cart button on left */
    .cart-btn {
      bottom: 80px;
      left: 12px;
      width: 50px; height: 50px;
    }
    .cart-btn svg { width: 20px; height: 20px; }

    /* Stage bottom (price + buttons) - sits above mobile bottombar */
    .stage-bottom {
      position: fixed;
      bottom: 64px;
      left: 0; right: 0;
      z-index: 30;
      padding: 10px 14px;
      box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
    }
    .price-val { font-size: 22px; }
    .price-val .currency { font-size: 14px; }
    .btn { padding: 10px 16px; font-size: 13px; }

    /* Mobile bottom nav */
    .mobile-bottombar {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: 64px;
      background: var(--surface);
      border-top: 1px solid var(--line);
      z-index: 40;
      padding: 0;
      box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
    }
    .mobile-tab {
      flex: 1;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      color: var(--ink-muted);
      font-size: 10px;
      font-weight: 600;
      transition: color .15s;
      position: relative;
    }
    .mobile-tab svg { width: 22px; height: 22px; }
    .mobile-tab.active { color: var(--ink); }
    .mobile-tab.active::before {
      content: '';
      position: absolute;
      top: 0;
      left: 25%; right: 25%;
      height: 2px;
      background: var(--accent-warm);
      border-radius: 0 0 2px 2px;
    }

    /* Side panel becomes bottom sheet */
    .panel {
      position: fixed;
      bottom: 64px;
      left: 0; right: 0;
      max-height: 70vh;
      border-left: none;
      border-top: 1px solid var(--line);
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -12px 40px rgba(0,0,0,0.15);
      z-index: 45;
      animation: slideUp .3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }

    /* Sheet handle */
    .panel::before {
      content: '';
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px; height: 4px;
      background: var(--line);
      border-radius: 2px;
    }

    .panel-close {
      top: 18px;
      left: 14px;
    }

    .panel-header {
      padding: 24px 20px 14px;
      padding-top: 28px;
    }
    .panel-title { font-size: 22px; }
    .panel-body { padding: 18px 20px; padding-bottom: 24px; }

    .add-hint { width: 56px; height: 56px; }
    .add-hint svg { width: 22px; height: 22px; }
    .add-hint-label { font-size: 10px; padding: 3px 9px; }

    /* Mobile info trigger button */
    .mobile-info-trigger {
      display: grid;
      place-items: center;
      position: absolute;
      top: 16px; right: 16px;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
      cursor: pointer;
      z-index: 5;
      color: var(--ink-soft);
    }
    .mobile-info-trigger svg { width: 18px; height: 18px; }

    /* Info as overlay on mobile */
    .mobile-info-overlay {
      display: none;
      position: fixed;
      inset: 56px 0 64px 0;
      background: var(--surface);
      z-index: 50;
      overflow-y: auto;
    }
    .mobile-info-overlay.show { display: block; }
    .mobile-info-overlay .info {
      display: flex;
      box-shadow: none;
      border-right: none;
    }
    .mobile-info-close {
      position: absolute;
      top: 14px; left: 14px;
      width: 36px; height: 36px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: grid; place-items: center;
      z-index: 2;
    }
    .mobile-info-close svg { width: 16px; height: 16px; }

    /* Hide quick toolbar when panel is open on mobile */
    .panel-open .quick-toolbar { display: none; }
    .panel-open .zoom-controls { display: none; }
    .panel-open .cart-btn { display: none; }

    /* Action btns: full row */
    .el-actions { padding: 12px 16px; }
    .el-action { padding: 10px; font-size: 12px; }

    /* Property rows: tighter on mobile */
    .prop-row {
      grid-template-columns: 70px 1fr;
      gap: 10px;
      padding: 10px 0;
    }
    .move-grid, .size-grid, .mirror-grid {
      grid-template-columns: repeat(4, 38px);
    }
    .seg-btn { width: 38px; height: 38px; }

    .icon-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .template-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  }

  /* ============================================
     SMALL MOBILE
     ============================================ */
  @media (max-width: 380px) {
    .topbar { padding: 0 8px; }
    .topbar-btn { width: 34px; height: 34px; }
    .stage-canvas { padding: 12px; padding-bottom: 80px; }
    .stage-bottom { padding: 8px 12px; }
    .price-val { font-size: 20px; }
    .btn { padding: 9px 14px; font-size: 12px; }
    .quick-btn { width: 40px; height: 40px; }
    .cart-btn { width: 46px; height: 46px; }
  }

/* ============================================
   PLUGIN MODE — full-screen modal overlay.
   Overrides the standalone-page styles when embedded in a WP product page.
   ============================================ */
.makeart-customizer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.makeart-customizer-overlay[hidden] { display: none; }

body.makeart-customizer-open { overflow: hidden; }

/* Make the inner .topbar / .app render inside the overlay rather than fixed-to-viewport */
.makeart-customizer-overlay > .topbar { position: relative; }
.makeart-customizer-overlay > .app { padding-top: 0; height: calc(100vh - 60px); }

/* Text elements inside the canvas should hug their content (snug frame). */
.makeart-customizer-overlay .element[data-type="text"] { display: flex; align-items: center; justify-content: center; }
.makeart-customizer-overlay .element-text { white-space: nowrap !important; padding: 4px 6px; line-height: 1.15; }

/* Remove the white plate/frame behind the product mockup — show product directly on canvas.
 * We apply these rules BOTH under the .makeart-customizer-overlay scope (modal embedded
 * in product page) AND globally — some entry points (standalone customizer page,
 * direct shortcode embed) don't add the overlay class to <body>, leaving the
 * product div with its default wood-gradient background and rendering as a
 * white/wood plate around the actual product image (e.g. white square framing
 * the transparent skull). The unscoped variant covers those cases. */
.makeart-customizer-overlay .product,
.product-wrap .product { background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.makeart-customizer-overlay .product::before,
.product-wrap .product::before,
.makeart-customizer-overlay .product::after,
.product-wrap .product::after { display: none !important; }
.makeart-customizer-overlay .product-wrap,
.stage-canvas .product-wrap { background: transparent !important; box-shadow: none !important; }
.makeart-customizer-overlay .stage-canvas { background: var(--bg) !important; }
.makeart-customizer-overlay .stage-canvas::before,
.stage-canvas::before { display: none !important; }
/* Global stage-canvas — fall back to page bg when not under overlay scope. */
body:not(.makeart-customizer-overlay) .stage-canvas { background: var(--bg, #faf4ec) !important; }

/* Text element wrapper: sized via inline `el.w%` / `el.h%` from JS so the
   selection frame, the per-zone clip-path and the rendered text bounds all
   agree. Keeping `width:max-content !important` here defeated those inline
   styles, letting the wrapper expand to the rendered glyph size and pushing
   text out of its zone. We keep `min-width:0 / min-height:0` so the flex
   container can actually shrink to el.w% (otherwise inline-flex's implicit
   `min-width:auto` would fall back to min-content). */
.makeart-customizer-overlay .element[data-type="text"] {
  min-width: 0;
  min-height: 0;
  overflow: visible;
}
.makeart-customizer-overlay .element[data-type="text"] .element-text {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  flex: 0 0 auto;
}

/* Outer canvas selection indicator — removed per design feedback. The product
   backdrop is selected via a subtle ring instead of a dashed frame around
   the whole product. */
.makeart-customizer-overlay #product-wrap.product-selected {
  outline: none;
  box-shadow: 0 0 0 2px rgba(237, 106, 38, 0.18);
  border-radius: 6px;
}

/* Red printing-box frame — shows the customer where their design will print/engrave.
   Acts as a clipping mask: anything that extends past this frame is hidden,
   exactly like Fancy Product Designer. Element bodies clip here; selection
   handles still draw on top via overflow:visible on the handle layer. */
.makeart-customizer-overlay .printing-box-frame {
  border: 2px dashed #e11d48 !important;
  border-radius: 4px !important;
  background: rgba(225, 29, 72, 0.04);
  box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.18);
  pointer-events: auto;
  /* overflow: visible — design-area itself doesn't clip, so the wrapper +
     selection handles can extend outside the print box. The CONTENT of each
     element (img/svg) is independently clipped to the print-box rect via
     clip-path on `.element-content` so only the handles/frame escape. */
  overflow: visible;
}
/* Hard-clip the visible content of each element to the design-area's
   bounding rect. The wrapper itself is NOT clipped — that lets the
   selection frame and handles spill outside while the photo/text/icon
   is hidden the moment it crosses the print-box edge.
   We use a CSS variable set per render() so the clip moves with the
   element as it's dragged. */
.makeart-customizer-overlay .element > .element-content {
  position: relative;
  width: 100%; height: 100%;
  clip-path: var(--print-clip, none);
  -webkit-clip-path: var(--print-clip, none);
}
/* Selection handles must stay visible even when an element clips at the frame
   edge. They're rendered inside .selection-box which sits as a child of the
   element; we lift them above the clip via z-index + a CSS escape hatch. */
.makeart-customizer-overlay .printing-box-frame .selection-box .handle {
  z-index: 5;
}
.makeart-customizer-overlay .printing-box-frame::before {
  content: 'אזור עיצוב';
  position: absolute;
  top: -22px; right: 0;
  background: #e11d48; color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px 4px 0 0;
  letter-spacing: .3px;
}
/* Multi-zone products: per-zone overlays already mark each rectangle, so
   suppress the outer print-box frame + label entirely. */
.makeart-customizer-overlay .printing-box-frame.makeart-zones-active {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.makeart-customizer-overlay .printing-box-frame.makeart-zones-active::before {
  content: none;
}
/* Template products (admin defined fixed slots): suppress the outer
   design-zone marker + dashed pink frame so the customer's view shows
   only the template content, identical to the admin's preview. The
   slots themselves (camera placeholder, text fields) provide all the
   visual context the customer needs. */
.makeart-template-product .makeart-customizer-overlay .printing-box-frame {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.makeart-template-product .makeart-customizer-overlay .printing-box-frame::before {
  content: none !important;
}

/* ============================================
   VIEW SWITCHER  (multi-view products: front/back/box/...)
   Thumbnail strip floating on the LEFT edge of the canvas. Mirrors how FPD
   surfaced multiple product faces — clicking a thumbnail swaps the product
   image, the print-box bounds, and the active design state.
   ============================================ */
.makeart-customizer-overlay .view-switcher {
  position: absolute;
  left: 18px;            /* RTL-safe: visually anchored to canvas left edge */
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 8px;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--line, #e7dfd0);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(40, 28, 14, 0.10);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}
.makeart-customizer-overlay .view-switcher[hidden] { display: none; }
.makeart-customizer-overlay .view-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  background: #fff no-repeat center / contain;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
  position: relative;
}
.makeart-customizer-overlay .view-thumb:hover {
  border-color: var(--ink-soft, #b59a72);
  transform: translateY(-1px);
}
.makeart-customizer-overlay .view-thumb.active {
  border-color: var(--orange, #ed6a26);
  box-shadow: 0 0 0 3px rgba(237,106,38,0.16);
}
.makeart-customizer-overlay .view-thumb .view-thumb-label {
  position: absolute;
  bottom: 2px; left: 0; right: 0;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--ink, #2a1810);
  background: rgba(255,255,255,0.85);
  padding: 1px 0;
  pointer-events: none;
}
@media (max-width: 720px) {
  .makeart-customizer-overlay .view-switcher {
    flex-direction: row;
    left: 50%;
    top: auto;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 8px 10px;
  }
  .makeart-customizer-overlay .view-thumb { width: 52px; height: 52px; }
}

/* ============================================
   ENGRAVING BLEND MODE
   For mix-blend-mode multiply to blend with the product image below,
   the design-area + product must share an isolated stacking context.
   ============================================ */
.makeart-customizer-overlay #product-wrap { isolation: isolate; }
.makeart-customizer-overlay .design-area  { mix-blend-mode: normal; }
/* Engrave look on text/icon: stronger ink + slight saturation drop */
.makeart-customizer-overlay .element[data-type="text"]  .element-text { filter: contrast(1.1); }
.makeart-customizer-overlay .element[data-type="icon"]  .element-svg  { filter: contrast(1.1); }