/* gangsheet — CSS extracted verbatim from monolith */
/* ── MOBILE NAV ── */
    .nav-toggle{display:none!important}
    @media(max-width:1024px){.nav-toggle{display:-webkit-flex!important;display:flex!important;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:#0D1B2A;flex-shrink:0}.site-nav__links{display:none!important}.site-nav a.btn{display:none!important}}
    .mobile-nav{display:none!important;position:fixed!important;inset:0;z-index:9999!important;background-color:#1A3040;flex-direction:column;padding:2rem;overflow-y:auto}
    .mobile-nav.is-open{display:flex!important}
    @media(min-width:1025px){.site-header__inner{display:flex!important;align-items:center!important;gap:24px!important;flex-wrap:nowrap!important}.site-header__logo{flex-shrink:0!important}.site-nav{display:flex!important;align-items:center!important;gap:16px!important;flex:1 1 auto!important;flex-wrap:nowrap!important;min-width:0!important}.site-nav__links{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;gap:20px!important;list-style:none!important;margin:0 auto!important;padding:0!important}.site-nav__link{white-space:nowrap!important;font-size:.875rem!important}.site-nav .site-account{display:inline-flex!important;align-items:center!important;flex-shrink:0!important}.site-nav .site-account[hidden]{display:none!important}.site-nav > a.btn{flex-shrink:0!important;white-space:nowrap!important}}
    .top-bar{min-height:40px!important;height:auto!important}.top-bar__inner{flex-wrap:wrap!important;padding-block:6px!important;gap:6px 20px!important}.top-bar__left{flex-wrap:wrap!important}.top-bar__left a,.top-bar__right{white-space:nowrap!important}
    @media(max-width:768px){.top-bar__inner{justify-content:center!important}.top-bar__left,.top-bar__right{justify-content:center!important}}
    @media(max-width:480px){.top-bar{display:none!important}}

    /* ── APP SHELL ── */
    .gs-app{display:flex;flex-direction:column;overflow:hidden;background:#e5e7eb}
    .gs-app-header{height:52px;flex-shrink:0;background:#fff;border-bottom:1px solid var(--color-border);display:flex;align-items:center;padding:0 12px;gap:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);z-index:10}
    .gs-app-header__left{display:flex;align-items:center;gap:10px;flex-shrink:0}
    .gs-app-title{font-family:var(--font-heading);font-size:.8rem;font-weight:700;color:var(--color-text);margin:0;white-space:nowrap}
    .gs-app-breadcrumb{font-size:11px;color:var(--color-text-muted)}
    .gs-app-breadcrumb a{color:var(--color-text-muted);text-decoration:none}
    .gs-app-breadcrumb a:hover{color:var(--color-primary)}
    .gs-app-sep{color:var(--color-text-muted);margin:0 4px}
    .gs-app-header__actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
    /* The title is static text identical to the breadcrumb's last crumb (no JS
       ever writes it), so it is 183px of pure duplication in a row that does not
       fit. header-dock.js docks the 382px tool toolbar between the title and the
       actions UNCONDITIONALLY on every non-mobile width, so the row needs
       355+382+613+gaps+padding = 1410px. Below that the overflow is CLIPPED by
       .gs-app{overflow-x:hidden} rather than scrolled, which silently cut the
       Checkout button in half on a 1280 laptop (only 49px of 170 visible).
       Dropping the title brings the requirement to 1227 and restores Checkout at
       the common laptop widths. */
    /* NB .gs-app-sep appears TWICE: once inside the breadcrumb as the "/"
       between Home and the page name, and once as the divider before the
       title. Hiding it unscoped painted "HomeGang Sheet Builder" — only the
       direct child of __left (the title's divider) should go. */
    .gs-app-title,.gs-app-header__left > .gs-app-sep{display:none}
    /* Below ~1200 the docked toolbar still cannot fit beside the actions, and
       because it is flex-shrink:1 with the default min-width:auto it refuses to
       shrink below its content — so the overflow landed on Checkout instead
       (196px of it cut off at 850). min-width:0 lets it actually shrink; the
       tools stay reachable by scrolling inside it. Checkout is the money path
       and must never be the thing that gets clipped. Tablets use overlay
       scrollbars, so this adds no visible chrome. */
    @media (max-width: 1199px) {
      .gs-floating-toolbar--docked{min-width:0;overflow-x:auto;overscroll-behavior-x:contain}
    }
    .gs-hdr-btn{padding:5px 12px;font-size:11px;font-weight:700;font-family:var(--font-heading);border-radius:var(--radius-sm);cursor:pointer;border:1.5px solid var(--color-border);background:var(--color-bg);color:var(--color-text);transition:all .15s;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;text-decoration:none}
    .gs-hdr-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
    .gs-hdr-btn--primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
    .gs-hdr-btn--primary:hover{opacity:.9;color:#fff}

    /* ── APP BODY ── */
    .gs-app-body{flex:1;display:flex;min-height:0;overflow:hidden}

    /* ── SIDEBARS ── */
    .gs-sidebar{display:flex;flex-shrink:0;height:100%}
    .gs-sidebar--left{flex-direction:row}
    .gs-sidebar--right{flex-direction:row-reverse}
    .gs-sidebar__icons{width:60px;background:#0D1B2A;display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:2px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.05)}
    .gs-sidebar--right .gs-sidebar__icons{border-right:none;border-left:1px solid rgba(255,255,255,.05)}
    .gs-sidebar__icon-btn{width:48px;height:50px;background:none;border:none;border-radius:10px;color:rgba(255,255,255,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;transition:all .15s;padding:0}
    .gs-sidebar__icon-btn svg{width:18px;height:18px;flex-shrink:0}
    .gs-sidebar__icon-label{font-size:9px;font-weight:700;font-family:var(--font-heading);letter-spacing:.03em;line-height:1}
    .gs-sidebar__icon-btn:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
    .gs-sidebar__icon-btn.is-active{background:rgba(77,201,230,.15);color:var(--color-primary)}
    .gs-sidebar__panels{width:0;overflow:hidden;transition:width .22s ease;background:#fff;flex-shrink:0}
    .gs-sidebar--left.is-open .gs-sidebar__panels{width:272px;border-right:1px solid var(--color-border)}
    .gs-sidebar--right.is-open .gs-sidebar__panels{width:272px;border-left:1px solid var(--color-border)}
    .gs-sidebar__panel{display:none;width:272px;height:100%;overflow-y:auto;padding:12px;box-sizing:border-box;flex-direction:column;gap:10px}
    .gs-sidebar__panel.is-active{display:flex}
    /* These are <h2> now, not <div>. The page had one <h1> and no <h2> at all,
       so a screen-reader user had no outline to navigate by — the panels were
       unreachable except by tabbing through every control. The visual design is
       unchanged; margin:0 and font-size are restated because a heading brings
       browser defaults a div never had. */
    .gs-sidebar__panel-title{margin:0;font-family:var(--font-heading);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);padding-bottom:8px;border-bottom:1px solid var(--color-border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;position:relative;padding-left:8px}
    .gs-sidebar__panel-title::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:12px;background:var(--color-primary);border-radius:2px}
    .gs-sidebar__hint{font-size:11px;color:var(--color-text-muted);line-height:1.6;margin:0;flex-shrink:0}
    .gs-count-badge{font-size:10px;background:var(--color-primary);color:#fff;border-radius:99px;padding:1px 6px;font-weight:700}

    /* ── SIZE SELECTOR ── */
    /* minmax(0,1fr), NOT 1fr — 2026-09-01.
       `1fr` is `minmax(auto, 1fr)`, and that `auto` floor is the widest word in
       the column. "TRUCKLOAD" is 138px at 13px Syne, so column 1 inflated to
       153.7px and column 2 was squeezed to 111.1px: measured on PRODUCTION, the
       right-hand cards (ARMFUL, UTE LOAD, TANDEM, ROAD TRAIN) rendered 11px past
       the panel's right edge and the size panel grew a horizontal scrollbar
       (scrollWidth 283 vs clientWidth 272). minmax(0,1fr) drops the floor and
       the columns are equal again.
       break-word is the companion: with the floor gone a name that still cannot
       fit must WRAP rather than be silently cut off, and a cut-off name on the
       control that sets the price is the worse of the two.
       ⚠ "TRUCKLOAD" needs 138px in a 105px card and now wraps mid-word. It is
       the only one of the eight that does. Renaming it, or a one-column grid,
       are the real fixes and both are the owner's call. */
    .gs-size-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;flex-shrink:0}
    .gs-size-btn{overflow-wrap:break-word}
    /* 8px 4px, not 8px 6px: 6px left "HANDFUL" 2px short of its own card and
       broke it across two lines for nothing. 4px gives every name 109px of
       inner width - measured, seven of the eight then set on one line and
       "UTE LOAD" gained a line back. "TRUCKLOAD" needs 138px and is the only
       genuine overflow. Set HERE rather than as a padding-left/right pair in a
       later rule, which is what I did first: this shorthand comes after it in
       the file and silently won. */
    .gs-size-btn{padding:8px 4px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);cursor:pointer;text-align:center;transition:border-color .2s,background .2s;font-family:var(--font-body)}
    .gs-size-btn:hover{border-color:var(--color-primary)}
    /* D3: the implied per-metre rate, under the price. Quiet on purpose -
       it is the mechanism made visible, not a second headline. */
    .gs-size-btn__rate{display:block;font-size:9px;font-weight:600;letter-spacing:.04em;color:var(--color-text-muted);margin-top:1px;font-variant-numeric:tabular-nums}
    .gs-size-btn.is-active .gs-size-btn__rate{color:var(--color-primary)}
    .gs-size-btn.is-active{border-color:var(--color-primary);background:rgba(77,201,230,.06);box-shadow:0 0 0 3px rgba(77,201,230,.12)}
    .gs-size-btn__label{font-size:10px;font-weight:700;font-family:var(--font-heading);color:var(--color-text);display:block}
    .gs-size-btn__sub{font-size:10px;color:var(--color-primary);display:block;margin-top:2px;font-weight:700;font-family:var(--font-heading)}
    .gs-size-btn.is-active .gs-size-btn__label,.gs-size-btn.is-active .gs-size-btn__sub{color:var(--color-primary)}

    /* ── DROPZONE ── */
    .gs-dropzone{border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:16px 10px;text-align:center;cursor:pointer;transition:border-color .25s,background .25s;position:relative;background:var(--color-bg-subtle);flex-shrink:0}
    .gs-dropzone:hover,.gs-dropzone.is-drag-over{border-color:var(--color-primary);background:rgba(77,201,230,.04)}
    .gs-dropzone__icon{color:var(--color-primary);margin-bottom:8px;display:flex;justify-content:center}
    .gs-dropzone__text{font-size:12px;font-weight:600;color:var(--color-text);display:block;margin-bottom:3px}
    .gs-dropzone__sub{font-size:10px;color:var(--color-text-muted)}
    .gs-dropzone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

    /* ── DESIGN LIST ── */
    .gs-design-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:60px}
    .gs-design-item{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:8px;background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius-md);transition:border-color .2s}
    .gs-design-item:hover{border-color:rgba(77,201,230,.25)}
    .gs-design-item__thumb{width:40px;height:40px;border-radius:var(--radius-sm);object-fit:contain;background:repeating-conic-gradient(#e0e0e0 0% 25%,#f5f5f5 0% 50%) 0 0/8px 8px;display:block}
    .gs-design-item__name{font-size:10px;font-weight:600;color:var(--color-text);margin-bottom:4px;word-break:break-all;line-height:1.3}
    .gs-design-controls{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:4px}
    .gs-design-controls label{font-size:9px;color:var(--color-text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:1px}
    .gs-design-controls input[type="number"]{width:100%;padding:3px 5px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text)}
    .gs-design-add-btn{width:100%;padding:4px 8px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:10px;font-weight:700;font-family:var(--font-heading);cursor:pointer;transition:opacity .2s}
    .gs-design-add-btn:hover{opacity:.85}
    .gs-res-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:2px 5px;border-radius:99px;margin-bottom:3px}
    .gs-res-badge--ok{background:rgba(16,185,129,.1);color:#059669}
    .gs-res-badge--warn{background:rgba(245,158,11,.1);color:#b45309}
    .gs-res-badge--bad{background:rgba(239,68,68,.1);color:#dc2626}
    /* Print-quality floating chip on the canvas (Phase A, 2026-05-30) */
    .gs-q-chip{position:absolute;z-index:30;display:none;align-items:center;gap:4px;padding:3px 7px;border-radius:99px;font-size:10px;font-weight:700;font-family:var(--font-heading);pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.18);white-space:nowrap;transform:translateY(-100%);margin-top:-4px;letter-spacing:.2px}
    .gs-q-chip.is-visible{display:inline-flex}
    .gs-q-chip--ok{background:#059669;color:#fff}
    .gs-q-chip--warn{background:#b45309;color:#fff}
    .gs-q-chip--bad{background:#dc2626;color:#fff}
    /* Live dimensions chip — top-left of selected bbox (Active Rulers, 2026-05-30) */
    .gs-dim-chip{position:absolute;z-index:30;display:none;padding:3px 7px;border-radius:99px;font:10px/1 'Courier New',monospace;font-weight:700;color:#fff;background:rgba(13,27,42,.85);pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.18);white-space:nowrap;transform:translate(0,-100%);margin-top:-4px;letter-spacing:.3px;font-variant-numeric:tabular-nums}
    .gs-dim-chip.is-visible{display:inline-block}
    /* Print-quality row inside Edit Selected panel */
    .gs-sel-quality{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);margin-bottom:8px;font-size:11px;font-family:var(--font-body)}
    .gs-sel-quality--ok{background:rgba(16,185,129,.08);color:#065f46}
    .gs-sel-quality--warn{background:rgba(245,158,11,.1);color:#92400e}
    .gs-sel-quality--bad{background:rgba(239,68,68,.1);color:#991b1b}
    .gs-sel-quality__chip{font-weight:700;font-family:var(--font-heading);font-size:10px;padding:2px 6px;border-radius:99px;background:rgba(255,255,255,.6);flex-shrink:0}
    .gs-sel-quality__text{flex:1;line-height:1.35}
    /* Tile thumbnail dot — worst placed copy quality (Phase B trimmed) */
    .gs-q-dot{position:absolute;top:-3px;left:-3px;width:12px;height:12px;border-radius:99px;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:pointer;display:none;z-index:2;padding:0;background:none}
    .gs-q-dot.is-visible{display:block}
    .gs-q-dot--warn{background:#b45309}
    .gs-q-dot--bad{background:#dc2626;animation:gs-q-pulse 1.4s ease-in-out infinite}
    @keyframes gs-q-pulse{0%,100%{box-shadow:0 1px 3px rgba(0,0,0,.3),0 0 0 0 rgba(220,38,38,.4)}50%{box-shadow:0 1px 3px rgba(0,0,0,.3),0 0 0 6px rgba(220,38,38,0)}}
    /* First-time hint balloon near canvas chip */
    .gs-q-hint{position:absolute;z-index:31;background:#0D1B2A;color:#fff;padding:10px 14px;border-radius:8px;font-size:12px;font-family:var(--font-body);line-height:1.4;max-width:240px;box-shadow:0 6px 18px rgba(0,0,0,.3);pointer-events:auto;display:none}
    .gs-q-hint.is-visible{display:block}
    .gs-q-hint::after{content:'';position:absolute;top:-6px;left:24px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #0D1B2A}
    .gs-q-hint__close{display:inline-block;margin-top:6px;font-size:11px;color:#4DC9E6;cursor:pointer;text-decoration:underline;background:none;border:none;padding:0;font-family:var(--font-body)}
    /* ── Names & Numbers panel (Feature #2, 2026-05-30) ── */
    .gs-nn-intro{font-size:11px;color:var(--color-text-muted);line-height:1.45;margin:0 0 10px;font-family:var(--font-body)}
    .gs-nn-label{display:block;font-size:11px;font-weight:700;font-family:var(--font-heading);color:var(--color-text);margin-bottom:4px}
    .gs-nn-label__hint{font-weight:400;color:var(--color-text-muted);font-family:var(--font-body);font-size:10px}
    .gs-nn-label__hint code{background:var(--color-bg-subtle);padding:1px 4px;border-radius:3px;font-size:9px}
    .gs-nn-textarea{width:100%;padding:8px 10px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-family:'Courier New',monospace;font-size:12px;line-height:1.5;color:var(--color-text);background:var(--color-bg);resize:vertical;min-height:90px;box-sizing:border-box}
    .gs-nn-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(77,201,230,.12)}
    .gs-nn-actions-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
    .gs-nn-mini-btn{padding:6px 4px;background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:10px;font-weight:700;font-family:var(--font-heading);color:var(--color-text);cursor:pointer;text-align:center;white-space:nowrap;transition:all .15s;letter-spacing:.2px}
    .gs-nn-mini-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
    .gs-nn-mini-btn--danger:hover{border-color:#dc2626;color:#dc2626}
    .gs-nn-status{font-size:11px;color:var(--color-text-muted);font-family:var(--font-body);margin:8px 0;line-height:1.4}
    .gs-nn-status.has-warn{color:#b45309}
    .gs-nn-section{margin-top:14px;padding-top:12px;border-top:1px solid var(--color-border)}
    .gs-nn-section__title{font-size:10px;font-weight:700;font-family:var(--font-heading);color:var(--color-text);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
    .gs-nn-style-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:11px;font-family:var(--font-body)}
    .gs-nn-style-row > label{flex:0 0 50px;font-weight:600;font-family:var(--font-heading);color:var(--color-text);font-size:10px}
    .gs-nn-select{flex:1;padding:5px 8px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text)}
    .gs-nn-slider{flex:1;height:4px}
    .gs-nn-size-display{font-size:10px;color:var(--color-text-muted);min-width:46px;text-align:right;font-family:var(--font-body)}
    .gs-nn-style-row--swatches{flex-wrap:wrap}
    .gs-nn-swatches{display:flex;gap:4px;flex:1;flex-wrap:wrap}
    .gs-nn-swatches button{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--color-border);cursor:pointer;padding:0;transition:transform .15s}
    .gs-nn-swatches button:hover{transform:scale(1.15)}
    .gs-nn-swatches button.is-active{border-color:var(--color-text);box-shadow:0 0 0 2px var(--color-primary)}
    .gs-nn-hex{width:74px;padding:4px 6px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:10px;font-family:'Courier New',monospace;text-transform:uppercase;background:var(--color-bg);color:var(--color-text)}
    .gs-nn-style-row--toggles{justify-content:flex-start;gap:14px}
    .gs-nn-toggle{display:flex;align-items:center;gap:5px;font-size:11px;font-family:var(--font-body);color:var(--color-text);cursor:pointer;font-weight:600;flex:0 0 auto}
    .gs-nn-toggle input{margin:0;flex:0 0 auto}
    /* N&N v2 — curve, stroke, stacked, per-entry colour (2026-05-30) */
    .gs-nn-curve-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:11px;font-family:var(--font-body)}
    .gs-nn-curve-row > label{flex:0 0 50px;font-weight:600;font-family:var(--font-heading);color:var(--color-text);font-size:10px;display:flex;align-items:center;gap:4px}
    .gs-nn-curve-icon{width:16px;height:10px;flex-shrink:0;transition:transform .15s}
    .gs-nn-curve-icon path{fill:none;stroke:var(--color-primary);stroke-width:1.5}
    .gs-nn-curve-value{font-size:10px;color:var(--color-text-muted);min-width:30px;text-align:right;font-family:var(--font-body)}
    .gs-nn-stroke-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:11px;font-family:var(--font-body);flex-wrap:wrap}
    .gs-nn-stroke-row > label{flex:0 0 50px;font-weight:600;font-family:var(--font-heading);color:var(--color-text);font-size:10px}
    .gs-nn-stroke-swatches{display:flex;gap:3px;flex-wrap:wrap}
    .gs-nn-stroke-swatches button{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--color-border);cursor:pointer;padding:0;transition:transform .15s}
    .gs-nn-stroke-swatches button:hover{transform:scale(1.15)}
    .gs-nn-stroke-swatches button.is-active{border-color:var(--color-text);box-shadow:0 0 0 2px var(--color-primary)}
    .gs-nn-stroke-hex{width:64px;padding:3px 5px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:10px;font-family:'Courier New',monospace;text-transform:uppercase;background:var(--color-bg)}
    .gs-nn-stroke-width{flex:1;min-width:60px}
    .gs-nn-stroke-warn{width:100%;font-size:10px;color:#b45309;font-family:var(--font-body);margin-top:4px}
    .gs-nn-name-size-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:11px;font-family:var(--font-body)}
    .gs-nn-name-size-row > label{flex:0 0 60px;font-weight:600;font-family:var(--font-heading);color:var(--color-text);font-size:10px}
    .gs-nn-overrides{margin-top:10px;border-top:1px solid var(--color-border);padding-top:10px}
    .gs-nn-overrides__title{font-size:10px;font-weight:700;font-family:var(--font-heading);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
    .gs-nn-overrides__reset-all{background:none;border:none;color:var(--color-primary);font-size:9px;font-weight:600;cursor:pointer;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.3px}
    .gs-nn-overrides__reset-all:hover{text-decoration:underline}
    .gs-nn-chips{display:flex;flex-wrap:wrap;gap:4px;max-height:120px;overflow-y:auto;padding:2px}
    .gs-nn-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 6px 3px 4px;background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:99px;font-size:10px;font-family:var(--font-body);color:var(--color-text);cursor:pointer;max-width:120px;position:relative;transition:border-color .15s}
    .gs-nn-chip:hover{border-color:var(--color-primary)}
    .gs-nn-chip__swatch{width:12px;height:12px;border-radius:50%;border:1px solid var(--color-border);flex-shrink:0}
    .gs-nn-chip__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
    .gs-nn-chip.is-overridden{border-color:var(--color-primary)}
    .gs-nn-chip.is-overridden::after{content:'';position:absolute;top:-2px;right:-2px;width:6px;height:6px;border-radius:50%;background:var(--color-primary)}
    .gs-nn-chip-popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 6px 18px rgba(0,0,0,.2);padding:10px;z-index:50;min-width:180px}
    .gs-nn-chip-popover__title{font-size:10px;font-weight:700;font-family:var(--font-heading);color:var(--color-text);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .gs-nn-chip-popover__hex-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}
    .gs-nn-chip-popover__hex-row input[type="color"]{width:32px;height:28px;border:1px solid var(--color-border);border-radius:4px;cursor:pointer;padding:0}
    .gs-nn-chip-popover__hex-row input[type="text"]{flex:1;padding:4px 6px;border:1px solid var(--color-border);border-radius:4px;font-size:10px;font-family:'Courier New',monospace;text-transform:uppercase}
    .gs-nn-chip-popover__reset{font-size:10px;color:var(--color-text-muted);background:none;border:none;cursor:pointer;text-decoration:underline;font-family:var(--font-body);padding:2px 0}
    .gs-nn-chip-popover__reset:hover{color:var(--color-primary)}
    .gs-nn-preview__sample-stack{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
    .gs-nn-radio-group{display:grid;grid-template-columns:1fr 1fr;gap:6px}
    .gs-nn-radio{display:flex;align-items:center;gap:5px;padding:6px 8px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-body);cursor:pointer;background:var(--color-bg);transition:all .15s}
    .gs-nn-radio:hover{border-color:var(--color-primary)}
    .gs-nn-radio input{margin:0}
    .gs-nn-radio input:checked + *,.gs-nn-radio:has(input:checked){border-color:var(--color-primary);background:rgba(77,201,230,.08);color:var(--color-primary);font-weight:700}
    .gs-nn-preview{min-height:60px;padding:12px 10px;background:repeating-conic-gradient(#e8e8e8 0% 25%,#f5f5f5 0% 50%) 0 0/12px 12px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden}
    .gs-nn-preview__placeholder{font-size:10px;color:var(--color-text-muted);font-family:var(--font-body);font-style:italic}
    .gs-nn-preview__sample{white-space:nowrap;line-height:1;color:#000}
    .gs-nn-warn{background:rgba(245,158,11,.1);border-left:3px solid #b45309;color:#92400e;padding:8px 10px;font-size:11px;font-family:var(--font-body);line-height:1.4;border-radius:var(--radius-sm);margin-top:10px}
    .gs-nn-sticky-actions{position:sticky;bottom:0;background:var(--color-bg);padding:12px 0 0;margin-top:14px;border-top:1px solid var(--color-border);z-index:5}
    .gs-nn-generate-btn{width:100%;padding:11px 12px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:13px;font-weight:700;font-family:var(--font-heading);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;letter-spacing:.3px}
    .gs-nn-generate-btn:not(:disabled):hover{background:#0D9CB8;transform:translateY(-1px);box-shadow:0 4px 12px rgba(77,201,230,.4)}
    .gs-nn-generate-btn:disabled{background:var(--color-border);color:var(--color-text-muted);cursor:not-allowed}
    .gs-nn-generate-btn.has-pending{animation:gs-nn-pulse 1.4s ease-in-out infinite}
    @keyframes gs-nn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(77,201,230,.5)}50%{box-shadow:0 0 0 6px rgba(77,201,230,0)}}
    .gs-nn-tip{font-size:10px;color:var(--color-text-muted);font-family:var(--font-body);margin:8px 0 0;line-height:1.4;text-align:center}
    /* Edit Selected awareness banner */
    .gs-sel-nn-banner{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(77,201,230,.08);border:1px solid rgba(77,201,230,.3);border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-body);color:var(--color-text);line-height:1.35;margin-bottom:8px}
    .gs-sel-nn-banner__text{flex:1}
    .gs-sel-nn-banner__btn{padding:4px 8px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:10px;font-weight:700;font-family:var(--font-heading);cursor:pointer;white-space:nowrap}
    .gs-sel-nn-banner__btn:hover{background:#0D9CB8}
    /* Reorder banner — persistent context for users editing a past order (2026-05-30) */
    .gs-reorder-banner{position:absolute;top:0;left:0;right:0;z-index:25;background:linear-gradient(90deg,#4DC9E6,#0D9CB8);color:#fff;padding:8px 14px;display:none;align-items:center;gap:12px;font-family:var(--font-body);font-size:12px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.15);animation:gs-reorder-slide .3s ease}
    .gs-reorder-banner.is-visible{display:flex}
    @keyframes gs-reorder-slide{from{transform:translateY(-100%)}to{transform:translateY(0)}}
    .gs-reorder-banner__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:rgba(255,255,255,.2);border-radius:50%}
    .gs-reorder-banner__text{flex:1;line-height:1.35}
    .gs-reorder-banner__text strong{font-family:var(--font-heading);font-weight:700;letter-spacing:.3px}
    .gs-reorder-banner__close{flex:0 0 auto;background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:0 4px;line-height:1;opacity:.85;font-weight:700}
    .gs-reorder-banner__close:hover{opacity:1}
    /* Prefilled-from-order badge for qty + notes inputs */
    .gs-prefill-badge{display:inline-block;margin-left:6px;padding:1px 7px;background:rgba(77,201,230,.15);color:#0D9CB8;border-radius:99px;font-size:9px;font-weight:700;font-family:var(--font-heading);letter-spacing:.3px;text-transform:uppercase}
    /* ── Cloud Drafts panel + header (Section 31, 2026-05-30) ── */
    .gs-drafts-tabs{display:flex;gap:2px;margin-bottom:8px;border-bottom:1.5px solid var(--color-border)}
    .gs-drafts-tab{flex:1;padding:8px 4px;background:none;border:none;border-bottom:2px solid transparent;font-size:11px;font-weight:700;font-family:var(--font-heading);color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:color .15s,border-color .15s;margin-bottom:-1.5px}
    .gs-drafts-tab:hover{color:var(--color-text)}
    .gs-drafts-tab.is-active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
    .gs-drafts-tab__count{background:var(--color-bg-subtle);color:var(--color-text-muted);font-size:9px;padding:1px 5px;border-radius:99px;font-weight:600}
    .gs-drafts-tab.is-active .gs-drafts-tab__count{background:rgba(77,201,230,.15);color:var(--color-primary)}
    .gs-drafts-quota{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--color-text-muted);font-family:var(--font-body);margin-bottom:10px;padding:0 2px}
    .gs-drafts-quota.is-near-cap{color:#b45309;font-weight:600}
    .gs-drafts-quota.is-at-cap{color:#dc2626;font-weight:700}
    #drafts-quota-upsell{color:var(--color-primary);font-weight:600;font-family:var(--font-heading);cursor:default}
    .gs-drafts-list{display:flex;flex-direction:column;gap:8px;min-height:120px}
    .gs-drafts-empty{font-size:11px;color:var(--color-text-muted);font-family:var(--font-body);text-align:center;padding:20px 10px;line-height:1.6}
    .gs-drafts-hint{font-size:9px;color:var(--color-text-muted);font-family:var(--font-body);margin-top:12px;text-align:center;line-height:1.4;padding:0 6px}
    .gs-draft-item{display:grid;grid-template-columns:50px 1fr auto;gap:8px;padding:8px;background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius-md);transition:border-color .15s,background .15s;cursor:pointer;align-items:center;position:relative}
    .gs-draft-item:hover{border-color:var(--color-primary);background:rgba(77,201,230,.04)}
    .gs-draft-item.is-active{border-color:var(--color-primary);background:rgba(77,201,230,.08)}
    .gs-draft-item.is-readonly{opacity:.65}
    .gs-draft-item.is-readonly::after{content:'READ-ONLY';position:absolute;top:4px;right:4px;font-size:8px;font-weight:700;color:#b45309;background:rgba(245,158,11,.15);padding:1px 4px;border-radius:3px;font-family:var(--font-heading);letter-spacing:.3px}
    .gs-draft-item__thumb{width:50px;height:30px;border-radius:var(--radius-sm);object-fit:cover;background:repeating-conic-gradient(#e0e0e0 0% 25%,#f5f5f5 0% 50%) 0 0/6px 6px;display:block;border:1px solid var(--color-border)}
    .gs-draft-item__thumb--empty{display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:9px;font-family:var(--font-body)}
    .gs-draft-item__main{min-width:0;display:flex;flex-direction:column;gap:1px}
    .gs-draft-item__name{font-size:12px;font-weight:700;font-family:var(--font-heading);color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
    .gs-draft-item__name input{width:100%;border:1.5px solid var(--color-primary);border-radius:3px;padding:2px 4px;font:inherit;color:inherit;background:#fff;outline:none}
    .gs-draft-item__meta{font-size:9px;color:var(--color-text-muted);font-family:var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .gs-draft-item__from-order{display:inline-block;margin-right:4px;color:var(--color-primary);font-weight:700}
    .gs-draft-item__actions{display:flex;gap:2px;opacity:0;transition:opacity .15s}
    .gs-draft-item:hover .gs-draft-item__actions{opacity:1}
    .gs-draft-item__btn{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:3px;border-radius:3px;display:inline-flex;align-items:center;line-height:1}
    .gs-draft-item__btn:hover{color:var(--color-primary);background:rgba(77,201,230,.1)}
    .gs-draft-item__btn--danger:hover{color:#dc2626;background:rgba(220,38,38,.1)}
    .gs-draft-trash-countdown{font-size:9px;color:#b45309;font-weight:700;font-family:var(--font-heading)}
    /* Header save group */
    .gs-hdr-save-group{display:flex;align-items:center;gap:6px}
    .gs-hdr-btn--save{background:rgba(77,201,230,.1);border-color:rgba(77,201,230,.4);color:var(--color-primary)}
    .gs-hdr-btn--save:hover{background:var(--color-primary);color:#fff}
    .gs-hdr-btn--save.is-saving{opacity:.6;cursor:wait}
    .gs-hdr-btn--save.has-failed{background:rgba(220,38,38,.1);border-color:#dc2626;color:#dc2626}
    .gs-hdr-active-draft{display:flex;align-items:center;gap:4px;padding:4px 10px;background:rgba(255,255,255,.06);border:1px solid var(--color-border);border-radius:99px;max-width:200px;font-family:var(--font-heading);font-size:11px;color:var(--color-text);font-weight:600}
    .gs-hdr-active-draft__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;cursor:pointer}
    .gs-hdr-active-draft__name:hover{color:var(--color-primary)}
    .gs-hdr-active-draft__name input{border:1.5px solid var(--color-primary);border-radius:3px;padding:1px 4px;font:inherit;color:inherit;background:#fff;outline:none;max-width:140px}
    .gs-hdr-active-draft__dirty{color:var(--color-primary);font-weight:700;visibility:hidden;font-size:14px;line-height:1}
    .gs-hdr-active-draft.is-dirty .gs-hdr-active-draft__dirty{visibility:visible}
    .gs-hdr-active-draft__detach{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:0 2px;font-size:14px;line-height:1}
    .gs-hdr-active-draft__detach:hover{color:#dc2626}
    /* Save / Save As split-button (Wave 1, 2026-05-30) */
    .gs-hdr-save-split{display:flex;align-items:center;position:relative}
    .gs-hdr-save-split .gs-hdr-btn--save{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;padding-right:8px}
    .gs-hdr-btn--save-more{border-top-left-radius:0;border-bottom-left-radius:0;padding:5px 6px;font-size:10px;color:var(--color-primary)}
    .gs-hdr-save-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:160px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 6px 20px rgba(0,0,0,.18);padding:4px;z-index:100}
    .gs-hdr-save-menu button{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;background:none;border:none;border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-body);color:var(--color-text);cursor:pointer;text-align:left}
    .gs-hdr-save-menu button:hover{background:rgba(77,201,230,.1);color:var(--color-primary)}
    /* Drafts search + sort (Wave 1) */
    .gs-drafts-filter{display:flex;gap:6px;margin-bottom:10px}
    .gs-drafts-filter input[type="search"]{flex:1;min-width:0;padding:5px 8px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text)}
    .gs-drafts-filter input[type="search"]:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(77,201,230,.12)}
    .gs-drafts-filter select{padding:5px 6px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);cursor:pointer;flex-shrink:0}
    /* Mobile: hide active-draft chip; keep save button only */
    @media(max-width:1024px){
      .gs-hdr-active-draft{display:none!important}
      .gs-hdr-save-menu{right:auto;left:0}
    }
    .gs-remove-btn{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:14px;padding:0;line-height:1;float:right}
    .gs-remove-btn:hover{color:var(--color-primary)}
    .gs-empty-designs{text-align:center;color:var(--color-text-muted);font-size:11px;padding:16px 0;line-height:1.7}

    /* ── LIBRARY ── */
    .gs-library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;overflow-y:auto;flex:1;min-height:60px;align-content:start;grid-auto-rows:min-content}
    .gs-library-item{position:relative;width:100%;aspect-ratio:1/1;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:repeating-conic-gradient(#e0e0e0 0% 25%,#f5f5f5 0% 50%) 0 0/8px 8px;cursor:pointer;overflow:hidden;transition:border-color .15s,transform .15s}
    .gs-library-item:hover{border-color:var(--color-primary);transform:scale(1.03)}
    .gs-library-item img{width:100%;height:100%;object-fit:contain;display:block}
    .gs-library-item__name{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-size:9px;background:rgba(13,27,42,.78);color:#fff;font-family:var(--font-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity .15s}
    .gs-library-item:hover .gs-library-item__name{opacity:1}
    /* Show-auto toggle + per-tile star (Wave 2) */
    .gs-lib-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 2px;margin-bottom:6px;border-bottom:1px solid var(--color-border)}
    .gs-lib-toggle{display:flex;align-items:center;gap:5px;font-size:10px;font-family:var(--font-body);color:var(--color-text);cursor:pointer;font-weight:600}
    .gs-lib-toggle input{margin:0}
    .gs-lib-toggle__count{color:var(--color-text-muted);font-weight:400}
    .gs-lib-toggle__hint{color:var(--color-text-muted);font-size:11px;cursor:help;line-height:1}
    .gs-library-item--auto{outline:2px dashed rgba(180,83,9,.5);outline-offset:-2px}
    .gs-library-item__star{position:absolute;top:3px;right:3px;width:20px;height:20px;border:none;background:rgba(0,0,0,.55);border-radius:50%;color:#fff;font-size:11px;cursor:pointer;padding:0;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2}
    .gs-library-item__star:hover{background:#b45309}
    .gs-library-item__star.is-starred{background:#eab308;color:#000}
    .gs-library-item__star.is-starred:hover{background:#eab308}
    .gs-library-empty{font-size:11px;color:var(--color-text-muted);text-align:center;padding:16px 6px;line-height:1.7;grid-column:1/-1}
    .gs-design-savelib-btn{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:0;line-height:1;font-size:13px;float:right;margin-right:6px;transition:color .15s}
    .gs-design-savelib-btn:hover{color:var(--color-primary)}
    .gs-design-savelib-btn.is-saved{color:var(--color-primary)}

    /* ── SELECTED / EDIT PANEL ── */
    .gs-no-selection{font-size:12px;color:var(--color-text-muted);text-align:center;padding:12px 0;font-style:italic}
    .gs-selected-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
    .gs-selected-controls label{font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--color-text-muted);display:block;margin-bottom:2px}
    .gs-selected-controls input{width:100%;padding:4px 6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text)}
    .gs-sel-name{font-size:11px;font-weight:600;margin-bottom:8px;color:var(--color-text);word-break:break-all}
    .gs-sel-delete{width:100%;padding:5px;background:none;color:#dc2626;border:1.5px solid rgba(220,38,38,.3);border-radius:var(--radius-sm);font-size:11px;font-weight:700;font-family:var(--font-heading);cursor:pointer;transition:all .2s}
    .gs-sel-delete:hover{background:rgba(220,38,38,.06);border-color:#dc2626}
    .gs-color-tools{border-top:1px solid var(--color-border);padding-top:10px}
    .gs-color-tools__title{font-size:10px;font-weight:700;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);margin-bottom:8px}
    .gs-color-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
    .gs-color-row label{font-size:11px;font-weight:600;color:var(--color-text);min-width:54px}
    .gs-color-row input[type="color"]{width:28px;height:24px;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;padding:1px;background:var(--color-bg);flex-shrink:0}
    .gs-color-row input[type="range"]{flex:1;min-width:40px;accent-color:var(--color-primary)}
    .gs-color-row span.gs-val{font-size:10px;color:var(--color-text-muted);min-width:26px;text-align:right}
    .gs-color-row input[type="number"]{width:50px;padding:3px 5px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text)}
    .gs-mini-btn{padding:3px 8px;font-size:10px;font-weight:700;font-family:var(--font-heading);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:var(--color-bg);color:var(--color-text);transition:all .15s;white-space:nowrap}
    .gs-mini-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
    .gs-mini-btn--full{width:100%;margin-bottom:4px}
    .gs-mini-btn--danger:hover{border-color:#dc2626;color:#dc2626}

    /* ── COLOUR TOOLS v2 (S21, 2026-05-12) ── */
    .gs-color-tools__title{display:flex;align-items:center;gap:6px}
    .gs-color-presets{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
    .gs-color-chip{flex:0 0 auto;padding:5px 10px;min-height:28px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-bg);color:var(--color-text);font-size:11px;font-weight:600;font-family:var(--font-heading);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
    .gs-color-chip:hover{border-color:var(--color-primary);color:var(--color-primary)}
    .gs-color-chip[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
    .gs-color-slider input[type="range"]{flex:1;min-width:0;accent-color:var(--color-primary)}
    .gs-color-slider .gs-val{min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
    .gs-color-recolour,.gs-color-replace{align-items:center;gap:6px}
    .gs-color-swatch{display:inline-block;width:22px;height:22px;border-radius:4px;border:1px solid var(--color-border);flex-shrink:0}
    .gs-color-arrow{color:var(--color-text-muted);font-size:14px}
    .gs-color-tray{display:flex;gap:6px;margin-top:8px;margin-bottom:8px}
    .gs-color-tray .gs-mini-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px}
    .gs-color-warn{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;padding:6px 8px;background:#FFF6E0;border:1px solid #F5C46B;border-radius:6px;color:#7A4C00;font-size:11px;line-height:1.35}
    .gs-color-warn[hidden]{display:none}
    .gs-color-bg{margin-top:8px;padding-top:8px;border-top:1px dashed var(--color-border)}
    #img-replace-pick[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
    .gs-picking,.gs-picking canvas{cursor:crosshair !important}
    @media (max-width:720px), (max-height:500px) and (orientation:landscape) and (pointer:coarse){
      .gs-color-presets{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
      .gs-color-chip{scroll-snap-align:start;min-height:32px}
      .gs-color-slider input[type="range"]{height:36px}
    }

    /* ── HALFTONE (S21, 2026-05-12) ── */
    .gs-color-section{border-top:1px dashed var(--color-border);margin-top:8px;padding-top:8px}
    .gs-color-section__summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;padding:2px 0;font-size:11px;font-weight:700;font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text)}
    .gs-color-section__summary::-webkit-details-marker{display:none}
    .gs-color-section__summary::marker{display:none}
    .gs-color-section__label{flex:1}
    .gs-color-section__caret{transition:transform .15s ease;color:var(--color-text-muted)}
    .gs-color-section[open] .gs-color-section__caret{transform:rotate(180deg)}
    .gs-halftone__body{padding-top:6px;display:flex;flex-direction:column;gap:6px}
    .gs-halftone__actions{display:flex;gap:6px;margin-top:4px}
    .gs-halftone__actions .gs-mini-btn:first-child{flex:0 0 auto}
    .gs-halftone__actions .gs-mini-btn--full{flex:1;display:flex;align-items:center;justify-content:center;gap:4px}
    .gs-seg{display:inline-flex;gap:2px;background:var(--color-bg);border:1px solid var(--color-border);padding:2px;border-radius:6px}
    .gs-seg__btn{border:0;background:transparent;color:var(--color-text-muted);padding:3px 8px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .15s,color .15s}
    .gs-seg__btn:hover{color:var(--color-text)}
    .gs-seg__btn.is-active{background:var(--color-primary);color:#fff}
    .gs-select{flex:1;padding:4px 6px;font-size:11px;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);min-width:0}
    .gs-halftone.is-busy .gs-halftone__actions .gs-mini-btn{pointer-events:none;opacity:.6}

    /* ── ENHANCED TEXT TOOL (S20, 2026-05-11) ── */
    .gs-text-font-select{flex:1 1 auto;min-width:0;padding:4px 6px;font-size:12px;font-family:var(--font-body);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text)}
    .gs-text-font-select:focus{outline:2px solid var(--color-primary);outline-offset:1px}
    .gs-text-size-slider{flex:1 1 auto;min-width:60px;accent-color:var(--color-primary)}
    .gs-text-mm-caption{font-size:10px;color:var(--color-text-muted);margin-left:4px;white-space:nowrap}
    .gs-text-warn{margin:4px 0 0 0;font-size:10px;color:#9a6300;background:#fff8e6;border:1px solid #ffd980;border-radius:var(--radius-sm);padding:3px 6px;line-height:1.4}
    .gs-text-swatches{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto}
    .gs-text-swatch{width:20px;height:20px;border-radius:50%;border:2px solid var(--color-border);cursor:pointer;padding:0;transition:transform .15s,border-color .15s}
    .gs-text-swatch:hover{transform:scale(1.15)}
    .gs-text-swatch.is-active{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
    .gs-text-swatch--white{border-color:#999}
    .gs-text-hex-input{width:74px;padding:3px 5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text)}
    .gs-mini-btn[aria-pressed="true"]{background:var(--color-primary);color:#0D1B2A;border-color:var(--color-primary)}
    .gs-text-recent-row{font-size:10px;color:var(--color-text-muted)}

    /* ── CANVAS AREA ── */
    .gs-canvas-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative}
    .gs-ruler-row{display:flex;height:24px;flex-shrink:0}
    .gs-ruler-corner{width:50px;height:24px;background:#1f2937;flex-shrink:0;display:flex;align-items:center;justify-content:center;font:9px/1 'Courier New',monospace;color:rgba(255,255,255,.7);letter-spacing:.2px;user-select:none;font-variant-numeric:tabular-nums}
    .gs-ruler-corner #ruler-corner-readout{white-space:nowrap;text-align:center;font-weight:600}
    .gs-ruler-corner.is-empty #ruler-corner-readout{color:rgba(255,255,255,.3);font-weight:400}
    .gs-ruler-x{flex:1;height:24px;background:#1f2937;display:block;min-width:0}
    .gs-canvas-main{flex:1;display:flex;min-height:0}
    .gs-ruler-y{width:24px;background:#1f2937;display:block;flex-shrink:0;min-height:0}
    .gs-canvas-viewport{flex:1;overflow:auto;background:#374151;position:relative}
    /* 🔴 `width:max-content` is load-bearing — do not "tidy" it away.
       Without it the LEFT of a zoomed sheet is unreachable. This is a block box,
       so it fills the inline axis (locked to the viewport's width) but GROWS in
       the block axis — which is exactly why vertical scrolling always worked and
       horizontal did not. `justify-content:center` then centres a canvas that is
       wider than the container, pushing half the overflow to the LEFT, where
       scrollLeft cannot follow it because it cannot go negative.
       Measured on production 2026-09-10 at 231% zoom: canvas 1741px, viewport
       scrollWidth 1263px, and the first 461px of the sheet could not be scrolled
       to at all — designs placed on the left of the sheet were invisible and
       unselectable. With max-content the container grows to the canvas (1706+80
       padding = 1786 = scrollWidth), so nothing overflows to the left, and
       min-width:100% keeps a SMALL sheet perfectly centred (verified: equal
       176px gaps either side, and at fit-to-screen). */
    .gs-canvas-centering{min-width:100%;width:max-content;min-height:100%;display:flex;align-items:center;justify-content:center;padding:40px;box-sizing:border-box}
    .gs-canvas-outer{flex-shrink:0;background:repeating-conic-gradient(#c8c8c8 0% 25%,#f0f0f0 0% 50%) 0 0/16px 16px;box-shadow:0 4px 24px rgba(0,0,0,.4);position:relative}
    .gs-canvas-outer canvas{display:block}
    /* Safe-area margin guide — DOM overlay (not a Fabric object), so it can't be
       selected/packed/exported or affect object & overlap counts. */
    .gs-safe-margin{position:absolute;display:none;pointer-events:none;z-index:28;border:1.5px dashed rgba(77,201,230,.85);border-radius:2px;box-shadow:0 0 0 1px rgba(13,27,42,.25) inset}
    .gs-safe-margin.is-on{display:block}
    .gs-hdr-btn.is-active{background:rgba(77,201,230,.12);border-color:var(--color-primary);color:var(--color-primary)}

    /* ── FLOATING TOOLBAR ── */
    .gs-floating-toolbar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:20;background:rgba(13,27,42,.92);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:4px 8px;display:flex;align-items:center;gap:2px;backdrop-filter:blur(8px);white-space:nowrap;pointer-events:all}
    .gs-ft-btn{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;padding:4px 9px;border-radius:100px;font-size:11px;font-weight:700;font-family:var(--font-heading);transition:all .15s}
    .gs-ft-btn:hover{background:rgba(255,255,255,.1);color:#fff}
    .gs-ft-btn--danger:hover{background:rgba(220,38,38,.2);color:#f87171}
    .gs-ft-divider{width:1px;height:14px;background:rgba(255,255,255,.15);margin:0 2px;flex-shrink:0}
    .gs-dims-chip{font-size:9px;color:rgba(255,255,255,.35);padding:0 6px;max-width:160px;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-body)}

    /* ── ZOOM PILL ── */
    .gs-zoom-pill{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:25;background:#fff;border:1px solid #d1d5db;border-radius:100px;padding:4px 6px;display:flex;align-items:center;gap:0;box-shadow:0 2px 8px rgba(0,0,0,.12)}
    .gs-zoom-btn{background:none;border:none;color:#6b7280;cursor:pointer;padding:4px 8px;border-radius:100px;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
    .gs-zoom-btn svg{width:18px;height:18px;flex-shrink:0}
    .gs-zoom-btn:hover{background:#f3f4f6;color:#111827}
    .gs-zoom-pct{font-size:12px;font-weight:700;color:var(--color-accent,#FF4D00);font-family:var(--font-heading);min-width:38px;text-align:center;padding:0 2px}

    /* ── STATUS BAR ── */
    .gs-status-bar{height:32px;flex-shrink:0;background:#111827;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 14px;gap:12px;font-size:11px;color:rgba(255,255,255,.5)}
    .gs-status-div{width:1px;height:12px;background:rgba(255,255,255,.1);flex-shrink:0}
    .gs-util-inline{display:flex;align-items:center;gap:5px}
    .gs-util-track-sm{width:80px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
    .gs-util-fill-sm{height:100%;border-radius:2px;background:linear-gradient(90deg,#10b981,#4DC9E6);width:0%;transition:width .4s}
    .gs-status-hint{margin-left:auto;font-style:italic;font-size:10px}
    /* Inline overflow warning that lives inside the status bar */
    .gs-status-warn{display:none;align-items:center;gap:7px;margin-left:auto;padding:4px 6px 4px 10px;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.4);border-radius:100px;font-size:10px;font-weight:700;color:#fbbf24;font-family:var(--font-heading);max-width:60%;animation:gsStatusWarnIn .3s ease}
    .gs-status-warn.is-shown{display:flex}
    .gs-status-warn svg{flex-shrink:0;stroke:#fbbf24}
    .gs-status-warn-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
    .gs-status-warn-x{background:rgba(255,255,255,.08);border:none;color:#fbbf24;cursor:pointer;font-size:13px;line-height:1;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.85;transition:all .15s;padding:0}
    .gs-status-warn-x:hover{opacity:1;background:rgba(251,191,36,.2)}
    .gs-status-bar.has-warn .gs-status-hint{display:none}
    @keyframes gsStatusWarnIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
    /* Persistent-issue popover (shared by status bar + mobile pill) */
    .gs-status-warn{cursor:pointer}
    .gs-issues-caret{display:none;font-size:9px;line-height:1;margin:0 1px;opacity:.85}
    .gs-issues-pop{position:fixed;z-index:130;display:none;flex-direction:column;gap:1px;min-width:230px;max-width:340px;background:#1f2937;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.55);padding:6px}
    .gs-issues-pop.is-open{display:flex}
    .gs-issue-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:9px 10px;border-radius:7px;font:600 12px/1.3 var(--font-body);color:#e5e7eb}
    .gs-issue-row:hover{background:rgba(255,255,255,.07)}
    .gs-issue-row svg{flex-shrink:0;stroke:#fbbf24}
    .gs-issue-row--bad svg{stroke:#f87171}
    .gs-issue-txt{flex:1;min-width:0}
    .gs-issue-go{font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--color-accent,#FF4D00);flex-shrink:0}
    /* Mobile warning pill (status bar is hidden on mobile) — sits by the zoom controls */
    .gs-warn-pill{position:absolute;bottom:12px;left:12px;z-index:26;display:none;align-items:center;gap:6px;background:rgba(245,158,11,.18);border:1px solid rgba(245,158,11,.55);color:#fbbf24;font:800 12px var(--font-heading);padding:8px 13px;border-radius:100px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
    .gs-warn-pill svg{stroke:#fbbf24;flex-shrink:0}
    .gs-warn-pill--bad{background:rgba(220,38,38,.18);border-color:rgba(248,113,113,.6);color:#fca5a5}
    .gs-warn-pill--bad svg{stroke:#fca5a5}
    body.is-mobile .gs-warn-pill.is-shown{display:inline-flex}

    /* ── WARNING ── */
    .gs-warning-list{flex-shrink:0;max-height:80px;overflow-y:auto}
    .gs-warning{display:flex;gap:6px;align-items:flex-start;padding:8px 10px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-sm);font-size:11px;color:#92400e;margin:4px 8px 0}
    .gs-warning svg{flex-shrink:0;margin-top:1px}
    /* An actionable warning (a refusal offering a recovery) must not be clipped
       by the list's 80px scroll cap — the button would sit below the fold of a
       scroll area nobody expects to scroll. */
    .gs-warning-list.has-action-warning{max-height:none;overflow-y:visible}
    .gs-warning--action{flex-wrap:wrap}
    .gs-warning__action{margin-left:auto;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.5);
      color:#92400e;font-family:var(--font-heading);font-size:10px;font-weight:700;
      padding:3px 9px;border-radius:var(--radius-sm);cursor:pointer;flex-shrink:0}
    .gs-warning__action:hover{background:rgba(245,158,11,.3)}
    .gs-warning__action:focus-visible{outline:2px solid #92400e;outline-offset:1px}

    /* ── PRICE BOX (right sidebar) ── */
    .gs-price-box{text-align:center;padding:16px 12px;background:linear-gradient(145deg,#111827 0%,#1A3040 55%,#111827 100%);border-radius:var(--radius-lg);position:relative;overflow:hidden;border:1px solid rgba(77,201,230,.18);box-shadow:0 4px 16px rgba(0,0,0,.15);flex-shrink:0}
    .gs-price-box::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(77,201,230,.18) 0%,transparent 70%);pointer-events:none}
    .gs-price-label{font-size:10px;color:rgba(255,255,255,.45);font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:4px}
    .gs-price-amount{font-family:var(--font-heading);font-size:2.2rem;font-weight:800;color:#fff;display:block;line-height:1;text-shadow:0 0 30px rgba(77,201,230,.3)}
    .gs-price-amount .cents{font-size:1rem;opacity:.7}
    .gs-price-sub{font-size:10px;color:rgba(255,255,255,.4);margin-top:6px;display:block}
    .gs-price-breakdown{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
    .gs-price-row{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.4);margin-bottom:4px}
    .gs-price-row span:last-child{color:rgba(255,255,255,.8);font-weight:600}
    @keyframes gs-price-flash{0%{opacity:1;transform:scale(1)}30%{opacity:.6;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
    .gs-price-amount.is-updating{animation:gs-price-flash .35s ease}

    /* ── ORDER FORM ── */
    .gs-order-form .form-group{margin-bottom:8px}
    .gs-order-form label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);display:block;margin-bottom:3px}
    .gs-order-form input,.gs-order-form textarea{width:100%;padding:8px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;background:var(--color-bg);color:var(--color-text);transition:border-color .2s;box-sizing:border-box}
    .gs-order-form input:focus,.gs-order-form textarea:focus{outline:none;border-color:var(--color-primary)}
    .gs-order-form textarea{min-height:60px;resize:vertical}
    .gs-submit-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--color-primary) 0%,#cc3800 100%);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-heading);font-size:13px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .2s,opacity .2s;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 14px rgba(77,201,230,.3);letter-spacing:.03em}
    .gs-submit-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(77,201,230,.4)}
    .gs-submit-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
    .gs-guarantee-box{background:linear-gradient(135deg,rgba(16,185,129,.04) 0%,var(--color-bg-subtle) 100%);border:1px solid rgba(16,185,129,.2);border-radius:var(--radius-md);padding:10px;margin-bottom:8px;flex-shrink:0}
    .gs-guarantee-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
    .gs-guarantee-list li{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--color-text)}
    .gs-guarantee-list li i{color:#10b981;flex-shrink:0}

    /* ── SUCCESS ── */
    .gs-success{display:none;text-align:center;padding:32px 16px;flex-shrink:0}
    .gs-success.is-visible{display:block}
    .gs-success__icon{width:56px;height:56px;background:rgba(16,185,129,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#059669}

    /* ── TIPS COLLAPSIBLE ── */
    .gs-tips-details{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;flex-shrink:0}
    .gs-tips-summary{padding:8px 12px;cursor:pointer;font-size:11px;font-weight:700;font-family:var(--font-heading);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;background:var(--color-bg-subtle);list-style:none;display:flex;align-items:center;justify-content:space-between}
    .gs-tips-summary::after{content:'▸';transition:transform .2s}
    .gs-tips-details[open] .gs-tips-summary::after{transform:rotate(90deg)}
    .gs-tips-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
    .gs-tip-item{display:flex;gap:8px;align-items:flex-start}
    .gs-tip-item__icon{color:var(--color-primary);flex-shrink:0;margin-top:1px}
    .gs-tip-item__title{font-size:11px;font-weight:700;font-family:var(--font-heading);margin-bottom:2px}
    .gs-tip-item__body{font-size:10px;color:var(--color-text-muted);line-height:1.6}

    /* ── LAYER PANEL ── */
    .gs-layers-list{display:flex;flex-direction:column;gap:3px;overflow-y:auto;flex:1;min-height:40px}
    .gs-layer-item{display:flex;align-items:center;gap:5px;padding:5px 7px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);transition:border-color .15s;font-size:11px}
    .gs-layer-item:hover{border-color:rgba(77,201,230,.3)}
    .gs-layer-item.is-selected{border-color:var(--color-primary);background:rgba(77,201,230,.06)}
    /* .gs-layer-name became a real <button> so the layers panel is reachable by
       keyboard — it is the only non-mouse route to selecting an object. These
       resets keep it looking exactly like the <span> it replaced; without them
       the browser's button chrome lands in the middle of the panel. */
    .gs-layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--color-text);cursor:pointer;font-size:11px;
      background:none;border:0;padding:0;margin:0;font-family:inherit;text-align:left;line-height:inherit;min-width:0;display:block}
    /* A focus ring the user can actually see — the panel is the entry point to
       the canvas, so losing focus here strands a keyboard user completely. */
    .gs-layer-name:focus-visible{outline:2px solid var(--color-accent,#00a7e1);outline-offset:1px;border-radius:2px}
    .gs-layer-btn:focus-visible{outline:2px solid var(--color-accent,#00a7e1);outline-offset:1px}
    .gs-layer-name[disabled]{cursor:default}
    .gs-layer-item.is-locked .gs-layer-name{color:var(--color-text-muted);cursor:default}
    .gs-layer-btn{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:2px;border-radius:3px;display:flex;align-items:center;flex-shrink:0;transition:color .15s}
    .gs-layer-btn:hover{color:var(--color-primary)}
    .gs-layer-btn.is-active{color:#b45309}
    .gs-layer-empty{font-size:11px;color:var(--color-text-muted);text-align:center;padding:16px 0;font-style:italic}

    /* ── ALIGN TOOLS ── */
    .gs-align-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:6px}
    .gs-align-btn{padding:5px 4px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;transition:all .15s;color:var(--color-text-muted);font-size:9px;font-weight:700;font-family:var(--font-heading)}
    .gs-align-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
    .gs-align-btn svg{width:11px;height:11px;flex-shrink:0}

    /* ── SECTION DIVIDER / LABELS in edit panel ── */
    .gs-section-div{border-top:1px solid var(--color-border);margin:8px 0 6px;flex-shrink:0}
    .gs-section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);margin-bottom:5px}
    .gs-action-row{display:flex;gap:4px;margin-bottom:5px}
    .gs-action-row .gs-mini-btn{flex:1;text-align:center;padding:4px}
    .gs-mini-btn--icon{display:inline-flex;align-items:center;justify-content:center;gap:3px}
    .gs-mini-btn--icon svg{width:11px;height:11px;flex-shrink:0}
    /* Align buttons carry a Material Symbols glyph, not an inline SVG, so the
       svg rule above does not size them. Matched to the svg size on purpose:
       they sit in the same row stack as the layer-order buttons. */
    .gs-mini-btn--align .material-symbols-rounded{font-size:14px;line-height:1;flex-shrink:0}
    .gs-mini-btn.is-active{background:rgba(77,201,230,.12);border-color:var(--color-primary);color:var(--color-primary)}
    .gs-mini-btn--lock.is-active{background:rgba(245,158,11,.1);border-color:#b45309;color:#b45309}

    /* ── SNAP / UNDO buttons in header ── */
    .gs-hdr-btn--icon-only{padding:5px 8px}
    .gs-hdr-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
    .gs-hdr-divider{width:1px;height:20px;background:var(--color-border);flex-shrink:0}

    /* ── MOBILE ── */
    @media(max-width:768px){
      .gs-app{height:auto;overflow:visible}
      .gs-app-body{flex-direction:column;overflow:visible}
      .gs-sidebar{height:auto;flex-shrink:0}
      .gs-sidebar--left{flex-direction:column}
      .gs-sidebar--right{flex-direction:column}
      .gs-sidebar__icons{flex-direction:row;width:100%;height:48px;justify-content:space-evenly;border-right:none;border-left:none;border-bottom:1px solid rgba(255,255,255,.05)}
      .gs-sidebar--right .gs-sidebar__icons{border-top:1px solid rgba(255,255,255,.05);border-bottom:none}
      .gs-sidebar__panels{width:100%!important;max-height:0;height:auto;overflow:hidden;transition:max-height .3s ease;border-right:none!important;border-left:none!important;border-bottom:1px solid var(--color-border)}
      .gs-sidebar.is-open .gs-sidebar__panels{max-height:600px}
      .gs-sidebar__panel{width:100%}
      /* FLOAT THE PANELS OVER THE CANVAS, don't push it.
         In flow, opening a panel added its full height to the page, so the sheet
         was shoved down and the tablet layout became a long scroll with the
         canvas and the order rail never on screen together. Each panel now
         hovers out of its own icon bar — the left one drops down, the right one
         rises — so the canvas keeps its height and the page keeps its length no
         matter which panel is open.
         z-index must clear the canvas area, which v28-skin lifts to 9999 for the
         paper texture. */
      .gs-sidebar{position:relative;z-index:10001}
      .gs-sidebar__panels{position:absolute;left:0;right:0;background:#efe9db;
        box-shadow:0 10px 26px rgba(21,19,16,.30)}
      .gs-sidebar--left .gs-sidebar__panels{top:100%}
      .gs-sidebar--right .gs-sidebar__panels{bottom:100%}
      /* Scrollable while open: the 600px cap left ~86px of the order rail
         unreachable, including the bottom edge of Add to Cart. Kept hidden while
         closing so the collapse animation does not show a scrollbar. */
      .gs-sidebar.is-open .gs-sidebar__panels{overflow-y:auto;overscroll-behavior:contain}
      /* Sized to remaining viewport — was a fixed 300px which left phones
         with ~250px of usable canvas after chrome. dvh handles the iOS
         Safari URL bar; vh fallback for older browsers. */
      .gs-canvas-viewport{min-height:55vh;min-height:55dvh;padding:10px}
      /* THE CANVAS AREA MUST NOT COLLAPSE HERE.
         Measured on a real iPad portrait (768x1024): this area computed to
         height:0 with overflow:hidden, so the canvas — rendered at 694x718 —
         was clipped to nothing. Not merely below the fold: scrolling could not
         reach it. The builder had no design surface at all on that device.
         Cause: the rule above gives min-height to .gs-canvas-viewport, but the
         COLLAPSING element is its parent. .gs-canvas-area is flex:1 (=1 1 0%),
         and .gs-app-body above is a column whose siblings (both sidebars) are
         height:auto + flex-shrink:0. They totalled 1086px against an 866px
         body, so the only flexible child was squeezed to zero.
         Phones escape this only because body.is-mobile absolutely positions the
         area (see the is-mobile block below) — and that class needs MOB_MQ,
         which gates at 720px. An iPad is 768. So this stacked layout is dead
         code below 720 and broken between 721 and 768, which is exactly where
         iPad portrait lands. */
      .gs-canvas-area{flex:none;height:auto}
      /* And .gs-app-body must size to its content too, or the fix above just
         moves the damage. It is flex:1 (line 28) and stayed a fixed 866px, so
         .gs-app stopped 403px short of the canvas — which, with overflow:visible
         here and z-index:9999 on the canvas area, left the sheet painting on top
         of the site footer instead of above it. */
      .gs-app-body{flex:none;height:auto}
      /* The header row did not wrap, so the action buttons ran 279px past the
         viewport and the page scrolled sideways by 264px — the Download button
         sat off-screen.
         height:auto is not optional here: the header is a fixed 52px, so
         wrapping alone pushed the second row 28px THROUGH the panel-tab bar
         underneath it. Wrapping without letting the container grow just moves
         the breakage somewhere less obvious. */
      .gs-app-header,.gs-app-header__actions{flex-wrap:wrap}
      .gs-app-header{height:auto;row-gap:6px;padding-bottom:6px}
      /* flex-wrap alone was not enough once the touch-target minimums made the
         buttons bigger: a flex ITEM defaults to min-width:auto, so this row
         could not shrink below its content (876px in a 753px viewport) and
         therefore never reached the point of wrapping. It reported
         flex-wrap:wrap the whole time while overflowing by 135px. */
      .gs-app-header__actions{min-width:0;flex:1 1 100%}
      .gs-ruler-row,.gs-ruler-y{display:none}
      .gs-status-hint{display:none}
      .gs-app-title,.gs-app-breadcrumb{display:none}
    }

    /* ── TABLET LANDSCAPE (769–1024) ────────────────────────────────────────
       The band between the stacked layout above and the desktop shell.

       It kept the desktop ROW, where an open panel occupies 272px of real width
       beside a 60px icon rail. With both sidebars open that is 664px of a 1024px
       iPad, leaving the sheet 345px — a third of the screen to design on, and no
       pinch-zoom to compensate because the gesture layer gates at 720px.

       The row is right here; what is wrong is that the panels take their width
       from the canvas. So the rails stay in flow and the panels float over the
       sheet, the same treatment as portrait.

       Deliberately NOT the stacked portrait layout: at 1024x768 a vertical stack
       would push the sheet below the fold on a screen wider than it is tall. */
    @media (min-width:769px) and (max-width:1024px){
      .gs-sidebar{position:relative;z-index:10001}
      .gs-sidebar__panels{position:absolute;top:0;bottom:0;height:auto;
        box-shadow:0 10px 26px rgba(21,19,16,.30)}
      .gs-sidebar--left .gs-sidebar__panels{left:100%}
      .gs-sidebar--right .gs-sidebar__panels{right:100%}
      /* Borders belong to the in-flow layout; a floating panel carries the
         shadow instead, or a stray edge hangs over the sheet. */
      .gs-sidebar--left.is-open .gs-sidebar__panels{border-right:0}
      .gs-sidebar--right.is-open .gs-sidebar__panels{border-left:0}

      /* HEADER. This band fixed the sidebars and left the header on the desktop
         row, where it never fitted: at 885px the left block (355) plus the
         actions (613) plus padding needed 992px, and BOTH flex children are
         flex-shrink:0, so nothing could give — 47px of real horizontal scroll,
         on a page whose body is overflow-x:visible.

         The title is static text identical to the breadcrumb's last crumb, so
         it is pure duplication; the breadcrumb is kept because it carries the
         only Home link once the home button is hidden.

         Hiding the title alone is NOT enough at the bottom of the band (769px
         still came up ~40px short), so the left block is also made shrinkable.
         A flex item defaults to min-width:auto and will not shrink below its
         content — the same trap this file already documents for the <=768
         actions row — hence min-width:0 on both the item and the crumb. */
      .gs-app-header__left{min-width:0;flex-shrink:1}
      .gs-app-breadcrumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    }

    @media(max-width:480px){
      .gs-app-header__actions .gs-hdr-btn:first-child{display:none}
    }

    /* ─────────────────────────────────────────────────────────────────
       MOBILE SHELL v1 (S21, 2026-05-12) — body.is-mobile, viewport <=720px
       The builder takes over the full viewport as a fixed overlay so the WP
       site header + footer + above-canvas explainer disappear cleanly on
       phones. All toolbar/pill positioning is relative to .gs-app which IS
       the viewport — avoids iOS Safari's address-bar-overlap-fixed-bottom bug.
       ───────────────────────────────────────────────────────────────── */
    .gs-mob-backdrop,.gs-mob-cart-pill{display:none}

    /* iOS-safe scroll lock: pin both html and body, kill overscroll. Without
       this the body can still touch-scroll under the fixed .gs-app overlay
       on iOS Safari + Chrome Android, revealing the WP site footer below. */
    html.is-mobile-builder, body.is-mobile{
      margin:0 !important; padding:0 !important;
      position:fixed !important; inset:0 !important;
      width:100% !important; height:100% !important;
      overflow:hidden !important; overscroll-behavior:none !important;
    }
    body.is-mobile main#main-content > div:first-of-type{display:none !important}

    /* The builder shell becomes a full-viewport overlay. */
    body.is-mobile .gs-app{
      position:fixed !important;
      inset:0 !important;
      width:100vw !important;
      height:100vh !important;
      height:100dvh !important;
      max-height:100dvh !important;
      z-index:9000 !important;
      display:flex !important;
      flex-direction:column !important;
      background:#0A1420 !important;
      overflow:hidden !important;
      padding-bottom:env(safe-area-inset-bottom, 0) !important;
    }
    body.is-mobile .gs-app-header{flex:0 0 44px !important;height:44px !important;padding:0 8px !important}
    body.is-mobile .gs-app-header__left .gs-app-title,
    body.is-mobile .gs-app-header__left .gs-app-breadcrumb,
    body.is-mobile .gs-app-header__left .gs-app-sep{display:none !important}
    body.is-mobile .gs-app-header__actions .gs-hdr-btn{padding:5px 7px !important}
    /* Hide only LABEL spans on mobile header buttons — keep Material Symbol icon
       spans visible. Without the :not() the rule would hide the icon too the
       moment any header button uses <span class="material-symbols-rounded">. */
    body.is-mobile .gs-app-header__actions .gs-hdr-btn > span:not(.material-symbols-rounded){display:none !important}
    body.is-mobile .gs-app-header__actions .gs-hdr-divider{display:none !important}

    body.is-mobile .gs-app-body{flex:1 1 auto !important;min-height:0 !important;position:relative !important;overflow:hidden !important;display:block !important;flex-direction:initial !important}

    /* Right sidebar — slide-up cart sheet (off-screen by default) */
    body.is-mobile .gs-sidebar--right{
      position:fixed !important;
      left:0 !important; right:0 !important;
      bottom:0 !important; top:auto !important;
      width:100% !important; height:75dvh !important; height:75vh !important;
      z-index:9020 !important;
      background:var(--color-bg) !important;
      border-top:1px solid var(--color-border) !important;
      border-radius:16px 16px 0 0 !important;
      box-shadow:0 -8px 32px rgba(0,0,0,.4) !important;
      transform:translateY(101%) !important;
      transition:transform .25s ease !important;
      display:flex !important; flex-direction:column !important;
      overflow:hidden !important;
      padding-bottom:env(safe-area-inset-bottom, 0) !important;
    }
    body.is-mobile .gs-sidebar--right.is-mob-open{transform:translateY(0) !important}
    body.is-mobile .gs-sidebar--right .gs-sidebar__icons{display:none !important}
    body.is-mobile .gs-sidebar--right .gs-sidebar__panels{width:100% !important;max-width:none !important;max-height:none !important;height:100% !important;border:none !important;overflow-y:auto !important;padding:24px 16px 16px !important;-webkit-overflow-scrolling:touch}
    body.is-mobile .gs-sidebar--right .gs-sidebar__panel{padding:0 !important;width:100% !important}
    body.is-mobile .gs-sidebar--right::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:4px;background:var(--color-border);border-radius:2px;z-index:2}

    /* Left sidebar: icons become bottom toolbar, panels become slide-up drawer.
       Avoid display:contents — iOS Safari has known % height / positioning bugs
       with display:contents children. Keep .gs-sidebar--left as a normal block
       and let its children be position:fixed so they use the viewport directly. */
    body.is-mobile .gs-sidebar--left{position:static !important;width:auto !important;height:0 !important;flex-shrink:0 !important;display:block !important;overflow:visible !important}
    body.is-mobile .gs-sidebar--left .gs-sidebar__icons{
      position:fixed !important;
      left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
      height:56px !important; width:100% !important;
      padding-bottom:env(safe-area-inset-bottom, 0) !important;
      box-sizing:content-box !important;
      flex-direction:row !important; justify-content:space-around !important; align-items:center !important;
      background:#0D1B2A !important;
      border-top:1px solid rgba(255,255,255,.12) !important; border-right:none !important; border-left:none !important;
      z-index:9010 !important; padding-left:6px !important; padding-right:6px !important; padding-top:4px !important; gap:0 !important;
      transform:none !important;
    }
    body.is-mobile .gs-sidebar--left .gs-sidebar__icon-btn{flex:1 !important;min-width:0 !important;padding:6px 4px !important;border-radius:8px !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:2px !important;background:transparent !important;color:#cfd8e3 !important}
    body.is-mobile .gs-sidebar--left .gs-sidebar__icon-btn.is-active{background:rgba(77,201,230,.18) !important;color:var(--color-primary) !important}
    body.is-mobile .gs-sidebar--left .gs-sidebar__icon-btn svg{width:20px !important;height:20px !important}
    body.is-mobile .gs-sidebar--left .gs-sidebar__icon-label{font-size:9px !important;line-height:1 !important;display:block !important}

    body.is-mobile .gs-sidebar--left .gs-sidebar__panels{
      position:fixed !important;
      left:0 !important; right:0 !important;
      bottom:calc(56px + env(safe-area-inset-bottom, 0)) !important; top:auto !important;
      width:100% !important; max-width:none !important; max-height:none !important;
      height:65dvh !important; height:65vh !important;
      background:var(--color-bg) !important;
      border-top:1px solid var(--color-border) !important; border-right:none !important; border-left:none !important; border-bottom:none !important;
      border-radius:16px 16px 0 0 !important;
      box-shadow:0 -8px 32px rgba(0,0,0,.4) !important;
      transform:translateY(calc(100% + 56px + env(safe-area-inset-bottom, 0))) !important;
      transition:transform .25s ease !important;
      overflow:hidden !important;
      z-index:9015 !important;
      display:flex !important; flex-direction:column !important;
    }
    body.is-mobile .gs-sidebar--left.is-mob-open .gs-sidebar__panels{transform:translateY(0) !important}
    body.is-mobile .gs-sidebar--left .gs-sidebar__panel{padding:24px 16px 16px !important;width:100% !important;height:100% !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch}
    body.is-mobile .gs-sidebar--left .gs-sidebar__panels::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:4px;background:var(--color-border);border-radius:2px;z-index:2;pointer-events:none}

    /* Canvas area: fills the middle band between header (44px) and pill+toolbar */
    body.is-mobile .gs-canvas-area{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:120px !important;width:100% !important;flex:none !important;display:flex !important;flex-direction:column !important;overflow:hidden !important}
    body.is-mobile .gs-canvas-viewport{flex:1 !important;min-height:0 !important;padding:6px !important;background:#2a3540 !important}
    body.is-mobile .gs-canvas-centering{padding:8px !important}
    body.is-mobile .gs-ruler-row,body.is-mobile .gs-ruler-y{display:none !important}

    body.is-mobile .gs-status-bar{display:none !important}

    /* S23 (2026-05-13): Floating toolbar HIDDEN on mobile. Its 6 actions move:
       Build Sheet → bottom-right FAB, Preview + Clear → header (icon + ⋮ menu),
       + Text → Designs panel, Gap → Sheet panel chips, Select All → Layers panel.
       Frees the entire top of canvas for content. Desktop unchanged. */
    body.is-mobile .gs-floating-toolbar{display:none !important}

    /* Mobile-only header buttons hidden on desktop */
    .gs-hdr-mob-only{display:none}
    body.is-mobile .gs-hdr-mob-only{display:inline-flex !important;align-items:center;justify-content:center;padding:5px 7px !important;min-width:36px;min-height:36px}

    /* S34 (2026-05-17): Back-to-site home anchor — mobile-only, top-left of header.
       Reclaims the space left empty when .gs-app-breadcrumb is hidden on mobile.
       44×44 hit target, transparent at rest, cyan on hover/focus-visible. */
    .gs-hdr-btn--home{padding:0 !important;min-width:44px !important;min-height:44px !important;border-color:transparent !important;background:transparent !important;color:#cfd8e3 !important;text-decoration:none !important}
    .gs-hdr-btn--home .material-symbols-rounded{font-size:22px !important;line-height:1 !important}
    .gs-hdr-btn--home:hover,.gs-hdr-btn--home:focus-visible{border-color:var(--color-primary) !important;color:var(--color-primary) !important;background:rgba(77,201,230,.08) !important}
    .gs-hdr-btn--home:focus-visible{outline:2px solid var(--color-primary) !important;outline-offset:2px !important}
    body.is-mobile #full-preview-btn-mob,
    body.is-mobile #gs-mob-overflow-btn{flex-shrink:0}

    /* Overflow popover — destructive items live here */
    .gs-mob-overflow-menu{display:none}
    body.is-mobile .gs-mob-overflow-menu{position:fixed !important;top:48px !important;right:8px !important;background:#fff !important;border:1px solid #e5e7eb !important;border-radius:10px !important;box-shadow:0 8px 24px rgba(0,0,0,.18) !important;padding:4px !important;z-index:9030 !important;min-width:170px !important;display:none}
    body.is-mobile .gs-mob-overflow-menu[hidden]{display:none !important}
    body.is-mobile .gs-mob-overflow-menu.is-open{display:block !important}
    body.is-mobile .gs-mob-overflow-menu.is-open[hidden]{display:block !important}
    .gs-mob-overflow-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;font-family:var(--font-heading);font-size:13px;font-weight:600;color:var(--color-text);cursor:pointer;border-radius:6px;text-align:left}
    .gs-mob-overflow-item:hover{background:#f1f5f9}
    .gs-mob-overflow-item--danger{color:#dc2626}
    .gs-mob-overflow-item--danger:hover{background:rgba(220,38,38,.08)}

    /* Build Sheet FAB — bottom-right corner, above zoom pill / cart pill */
    .gs-mob-fab{display:none}
    body.is-mobile .gs-mob-fab{
      display:flex !important; align-items:center; justify-content:center;
      position:fixed !important;
      right:14px !important;
      bottom:calc(132px + env(safe-area-inset-bottom, 0)) !important;
      width:52px !important; height:52px !important;
      border-radius:50% !important;
      background:linear-gradient(135deg,var(--color-primary) 0%,#0D9CB8 100%) !important;
      color:#fff !important;
      border:0 !important;
      box-shadow:0 8px 22px rgba(77,201,230,.45), 0 2px 6px rgba(0,0,0,.2) !important;
      z-index:9007 !important;
      cursor:pointer !important;
      -webkit-tap-highlight-color:transparent !important;
      transition:transform .15s ease, box-shadow .15s ease !important;
    }
    body.is-mobile .gs-mob-fab:active{transform:scale(.92) !important;box-shadow:0 4px 12px rgba(77,201,230,.5) !important}
    body.is-mobile .gs-mob-fab:disabled{opacity:.45 !important;cursor:not-allowed !important;box-shadow:0 2px 6px rgba(0,0,0,.15) !important}
    body.is-mobile .gs-mob-fab__icon{font-size:26px !important;line-height:1 !important}
    /* One-time discoverability pulse — fires once via .is-fresh class added by JS */
    @keyframes gsMobFabPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
    body.is-mobile .gs-mob-fab.is-fresh{animation:gsMobFabPulse 1.6s ease-in-out 2}

    /* Mobile-only Gap + Text rows (added via _bindMobileToolbar at canvas init) */
    .gs-mob-gap-row,.gs-mob-text-row,.gs-mob-select-all-row{display:none}
    body.is-mobile .gs-mob-gap-row,
    body.is-mobile .gs-mob-text-row,
    body.is-mobile .gs-mob-select-all-row{display:block !important;margin-top:12px}
    body.is-mobile .gs-mob-gap-row label,
    body.is-mobile .gs-mob-text-row label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:6px}
    body.is-mobile .gs-mob-gap-chips{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
    body.is-mobile .gs-mob-gap-chip{flex:1;min-width:46px;padding:9px 0;min-height:38px;border:1.5px solid var(--color-border);border-radius:8px;background:var(--color-bg);font-weight:700;font-family:var(--font-heading);font-size:13px;color:var(--color-text);cursor:pointer;transition:all .15s}
    body.is-mobile .gs-mob-gap-chip.is-active{border-color:var(--color-primary);background:rgba(77,201,230,.12);color:var(--color-primary)}
    body.is-mobile .gs-mob-gap-custom{display:flex;align-items:center;gap:8px}
    body.is-mobile .gs-mob-gap-custom input{width:64px;padding:8px;font-size:14px;text-align:center;border:1.5px solid var(--color-border);border-radius:6px;font-family:var(--font-heading);font-weight:700}
    body.is-mobile .gs-mob-gap-hint{font-size:10px;color:var(--color-text-muted);margin:6px 0 0;font-style:italic}
    body.is-mobile .gs-mob-add-text-btn,
    body.is-mobile .gs-mob-select-all-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border:1.5px solid var(--color-border);background:var(--color-bg);border-radius:8px;font-family:var(--font-heading);font-weight:700;font-size:13px;color:var(--color-text);cursor:pointer}
    body.is-mobile .gs-mob-add-text-btn:hover,
    body.is-mobile .gs-mob-select-all-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}

    /* Sticky cart pill — above the toolbar (fixed positions relative to viewport
       since .gs-app is full-viewport, fixed == absolute relative to .gs-app). */
    body.is-mobile .gs-mob-cart-pill{
      display:flex !important;
      position:fixed !important;
      left:8px !important; right:8px !important;
      bottom:calc(64px + env(safe-area-inset-bottom, 0)) !important;
      align-items:center !important; justify-content:space-between !important;
      gap:10px !important;
      background:linear-gradient(135deg,var(--color-primary) 0%,#cc3800 100%) !important;
      color:#fff !important; padding:10px 14px !important;
      border-radius:14px !important;
      font-family:var(--font-heading) !important; font-weight:700 !important;
      box-shadow:0 6px 20px rgba(77,201,230,.4) !important;
      z-index:9005 !important;
      cursor:pointer !important;
      -webkit-tap-highlight-color:transparent !important;
    }
    body.is-mobile .gs-mob-cart-pill__label{font-size:12px !important;letter-spacing:.02em !important}
    body.is-mobile .gs-mob-cart-pill__price{font-size:18px !important;letter-spacing:0 !important;flex:1 !important;text-align:right !important}
    body.is-mobile .gs-mob-cart-pill__cents{font-size:12px !important;opacity:.85 !important}
    body.is-mobile .gs-mob-cart-pill__arrow{font-size:18px !important}

    body.is-mobile .gs-mob-backdrop{display:block !important;position:fixed !important;inset:0 !important;background:rgba(0,0,0,.45) !important;z-index:9008 !important;opacity:0 !important;pointer-events:none !important;transition:opacity .2s ease !important}
    body.is-mobile .gs-mob-backdrop.is-open{opacity:1 !important;pointer-events:auto !important}

    body.is-mobile .gs-color-presets{flex-wrap:nowrap !important;overflow-x:auto !important}
    /* Mobile-only halftone Apply hint (S22, 2026-05-13) */
    body.is-mobile #ht-mob-note[hidden]{display:flex !important;align-items:center !important;gap:6px !important;color:#0D9CB8 !important}
    body.is-mobile #ht-apply{opacity:.55 !important}
    body.is-mobile .gs-color-slider input[type=range]{height:36px}
    body.is-mobile #img-replace-target,body.is-mobile #img-recolour-hex{flex-shrink:0}

    @media(max-width:380px){
      body.is-mobile .gs-mob-cart-pill__price{font-size:16px !important}
      body.is-mobile .gs-sidebar--left .gs-sidebar__icon-btn{padding:6px 2px !important}
    }

    /* ─────────────────────────────────────────────────────────────────
       LANDSCAPE MOBILE OVERRIDES (S24, 2026-05-14)
       Activated by body.is-mobile.is-landscape-mobile via JS. The portrait
       bottom-up drawer + cart pill is replaced with side drawers (left tools,
       right cart), shrunken 44px bottom toolbar with absorbed cart-icon-with-
       price, and the cart pill is hidden. Canvas claims the wide middle.
       Iphone 14 Pro landscape ≈ 852×393: header 44 + toolbar 44 = 88 chrome,
       leaves ~305px of canvas height vs portrait shell's 226px.
       ───────────────────────────────────────────────────────────────── */

    /* Hide the portrait sticky cart pill — price absorbed into the toolbar. */
    body.is-mobile.is-landscape-mobile .gs-mob-cart-pill{display:none !important}

    /* Bottom toolbar: shrink to 44px, drop labels (icon-only). */
    body.is-mobile.is-landscape-mobile .gs-sidebar--left .gs-sidebar__icons{
      height:44px !important; padding-top:2px !important; padding-bottom:env(safe-area-inset-bottom, 0) !important;
    }
    body.is-mobile.is-landscape-mobile .gs-sidebar--left .gs-sidebar__icon-label{display:none !important}
    body.is-mobile.is-landscape-mobile .gs-sidebar--left .gs-sidebar__icon-btn{padding:5px 4px !important}
    body.is-mobile.is-landscape-mobile .gs-sidebar--left .gs-sidebar__icon-btn svg{width:22px !important;height:22px !important}

    /* Cart-icon-with-price (6th item, injected by JS). Portrait: hidden. */
    .gs-mob-toolbar-cart{display:none}
    body.is-mobile.is-landscape-mobile .gs-mob-toolbar-cart{
      display:flex !important; align-items:center !important; gap:6px !important;
      flex:1.4 !important; min-width:0 !important;
      padding:5px 8px !important; margin:0 2px !important;
      background:linear-gradient(135deg,var(--color-primary) 0%,#0D9CB8 100%) !important;
      color:#fff !important; border:0 !important; border-radius:8px !important;
      font-family:var(--font-heading) !important; font-weight:700 !important; font-size:13px !important;
      box-shadow:0 2px 8px rgba(77,201,230,.4) !important;
      cursor:pointer !important; -webkit-tap-highlight-color:transparent !important;
      justify-content:center !important; line-height:1 !important;
    }
    body.is-mobile.is-landscape-mobile .gs-mob-toolbar-cart .material-symbols-rounded{font-size:18px !important;line-height:1 !important}
    body.is-mobile.is-landscape-mobile .gs-mob-toolbar-cart-price{font-variant-numeric:tabular-nums;letter-spacing:0}
    body.is-mobile.is-landscape-mobile .gs-mob-toolbar-cart:active{transform:scale(.96) !important}

    /* Left tool drawer: from-left side panel instead of bottom-up sheet. */
    body.is-mobile.is-landscape-mobile .gs-sidebar--left .gs-sidebar__panels{
      top:44px !important; bottom:calc(44px + env(safe-area-inset-bottom, 0)) !important;
      left:0 !important; right:auto !important;
      width:min(40dvw, 320px) !important; height:auto !important;
      max-width:320px !important;
      border-radius:0 16px 16px 0 !important;
      transform:translateX(-101%) !important;
      box-shadow:8px 0 32px rgba(0,0,0,.4) !important;
    }
    body.is-mobile.is-landscape-mobile .gs-sidebar--left.is-mob-open .gs-sidebar__panels{
      transform:translateX(0) !important;
    }
    /* Drag handle: vertical bar on right edge instead of horizontal pill on top. */
    body.is-mobile.is-landscape-mobile .gs-sidebar--left .gs-sidebar__panels::before{
      top:50% !important; left:auto !important; right:6px !important;
      transform:translateY(-50%) !important;
      width:4px !important; height:40px !important;
    }

    /* Right cart sheet: from-right side panel. */
    body.is-mobile.is-landscape-mobile .gs-sidebar--right{
      top:44px !important; bottom:calc(44px + env(safe-area-inset-bottom, 0)) !important;
      right:0 !important; left:auto !important;
      width:min(50dvw, 360px) !important; height:auto !important;
      border-radius:16px 0 0 16px !important;
      transform:translateX(101%) !important;
      box-shadow:-8px 0 32px rgba(0,0,0,.4) !important;
    }
    body.is-mobile.is-landscape-mobile .gs-sidebar--right.is-mob-open{
      transform:translateX(0) !important;
    }
    body.is-mobile.is-landscape-mobile .gs-sidebar--right::before{
      top:50% !important; left:6px !important;
      transform:translateY(-50%) !important;
      width:4px !important; height:40px !important;
    }

    /* Canvas area: clear only the 44px toolbar (cart pill is gone). */
    body.is-mobile.is-landscape-mobile .gs-canvas-area{
      bottom:calc(44px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* FAB sits just above the bottom toolbar (no cart pill in the way). */
    body.is-mobile.is-landscape-mobile .gs-mob-fab{
      bottom:calc(56px + env(safe-area-inset-bottom, 0)) !important;
      right:10px !important;
      width:46px !important; height:46px !important;
    }
    body.is-mobile.is-landscape-mobile .gs-mob-fab__icon{font-size:22px !important}

    /* Halftone Apply hint (#ht-mob-note) reads better as a single line in landscape. */
    body.is-mobile.is-landscape-mobile #ht-mob-note{font-size:11px !important}

    /* Reduced-motion: instant transitions on drawer/cart-sheet slide. */
    @media (prefers-reduced-motion: reduce){
      body.is-mobile.is-landscape-mobile .gs-sidebar--left .gs-sidebar__panels,
      body.is-mobile.is-landscape-mobile .gs-sidebar--right{transition:none !important}
    }

    /* ── PHASE 1-2 FEATURES ── */
    .gs-design-action-row{display:flex;gap:3px;margin-top:4px}
    .gs-design-action-btn{flex:1;padding:3px 4px;font-size:9px;font-weight:700;font-family:var(--font-heading);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:var(--color-bg);color:var(--color-text-muted);white-space:nowrap;text-align:center;transition:all .15s}
    .gs-design-action-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
    .gs-design-action-btn--accent{border-color:rgba(77,201,230,.4);color:var(--color-primary)}
    .gs-design-action-btn--accent:hover{background:var(--color-primary);color:#fff}
    /* AI Background Removal — trade perk (S20, 2026-05-11) */
    .gs-design-bgremove-row{display:flex;align-items:center;gap:6px;margin-top:4px}
    .gs-design-action-btn--bgremove{flex:1;border-color:rgba(255,77,0,.45);color:#FF4D00;font-weight:700;position:relative;overflow:hidden}
    .gs-design-action-btn--bgremove:hover{background:#FF4D00;color:#fff;border-color:#FF4D00}
    .gs-design-action-btn--bgremove[disabled]{opacity:.7;cursor:wait}
    .gs-design-action-btn--bgremove.is-processing{background:linear-gradient(90deg,#FF4D00 var(--bg-pct,0%),transparent var(--bg-pct,0%));color:#fff;border-color:#FF4D00}
    .gs-trade-perk-badge{font-size:8px;font-weight:800;letter-spacing:.04em;padding:2px 5px;border-radius:3px;background:linear-gradient(135deg,#FFD700,#B8860B);color:#0D1B2A;white-space:nowrap;font-family:var(--font-heading);text-transform:uppercase}
    .gs-design-item__thumb{position:relative}
    .gs-design-thumb-overlay{position:absolute;inset:0;background:rgba(13,27,42,.55);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);z-index:2;backdrop-filter:blur(2px)}
    .gs-design-thumb-overlay[hidden]{display:none}
    .gs-spinner{width:22px;height:22px;border:2.5px solid rgba(255,255,255,.25);border-top-color:#4DC9E6;border-radius:50%;animation:gs-spin 0.7s linear infinite}
    @keyframes gs-spin{to{transform:rotate(360deg)}}
    .gs-rotate-label{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--color-text-muted);cursor:pointer;user-select:none;margin-top:4px;padding:1px 0}
    .gs-rotate-label input[type="checkbox"]{width:11px;height:11px;accent-color:var(--color-primary);cursor:pointer;flex-shrink:0}
    .gs-rotate-label:hover{color:var(--color-primary)}
    .gs-ft-btn--build{background:rgba(77,201,230,.15);color:var(--color-primary)}
    .gs-ft-btn--build:hover{background:rgba(77,201,230,.3);color:#fff}
    .gs-ft-gap-label{display:flex;align-items:center;gap:3px;font-size:10px;color:rgba(255,255,255,.5);padding:0 5px;white-space:nowrap;cursor:default}
    .gs-ft-gap-input{width:34px;padding:2px 4px;font-size:10px;font-weight:700;font-family:var(--font-heading);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:4px;color:#fff;text-align:center;-moz-appearance:textfield}
    .gs-ft-gap-input::-webkit-inner-spin-button,.gs-ft-gap-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
    .gs-ft-gap-input:focus{outline:none;border-color:var(--color-primary);background:rgba(77,201,230,.15)}
    /* ── Build overflow banner (Phase 1 pre-build) ── */
    .gs-overflow-banner{position:absolute;top:54px;left:50%;transform:translateX(-50%);z-index:30;background:#fffbeb;border:1.5px solid rgba(245,158,11,.55);border-radius:10px;padding:14px 16px;max-width:460px;width:calc(100% - 32px);box-shadow:0 6px 28px rgba(0,0,0,.18);pointer-events:all;display:flex;flex-direction:column;gap:9px}
    .gs-overflow-banner[hidden]{display:none}
    .gs-overflow-banner__hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
    .gs-overflow-banner__ttl{font-size:12px;font-weight:700;color:#92400e;font-family:var(--font-heading);line-height:1.3}
    .gs-overflow-dismiss{background:none;border:none;font-size:17px;color:#d97706;cursor:pointer;padding:0;line-height:1;flex-shrink:0;margin-top:-1px}
    .gs-overflow-dismiss:hover{color:#92400e}
    .gs-overflow-banner__body{font-size:11px;color:#78350f;line-height:1.55;margin:0}
    .gs-overflow-banner__actions{display:flex;gap:6px;flex-wrap:wrap}
    .gs-overflow-btn{padding:5px 12px;font-size:11px;font-weight:700;font-family:var(--font-heading);border-radius:6px;cursor:pointer;border:1.5px solid;transition:all .15s;white-space:nowrap}
    .gs-overflow-btn--suggest{background:rgba(77,201,230,.12);color:var(--color-primary);border-color:rgba(77,201,230,.4)}
    .gs-overflow-btn--suggest:hover{background:var(--color-primary);color:#fff}
    .gs-overflow-btn--anyway{background:rgba(245,158,11,.1);color:#92400e;border-color:rgba(245,158,11,.4)}
    .gs-overflow-btn--anyway:hover{background:rgba(245,158,11,.2)}
    /* Phase 2 persistent post-build warning */
    .gs-warning--persist{align-items:flex-start}
    .gs-persist-dismiss{background:none;border:none;cursor:pointer;font-size:15px;color:#d97706;padding:0 0 0 4px;line-height:1;flex-shrink:0}
    .gs-persist-dismiss:hover{color:#92400e}
    /* Preview dialog */
    .gs-preview-dialog{border:none;border-radius:12px;padding:0;max-width:90vw;max-height:90vh;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5)}
    .gs-preview-dialog::backdrop{background:rgba(0,0,0,.7)}
    .gs-preview-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--color-border);background:var(--color-bg)}
    .gs-preview-dialog__title{font-family:var(--font-heading);font-size:13px;font-weight:700;color:var(--color-text)}
    .gs-preview-dialog__close{background:none;border:none;font-size:20px;color:var(--color-text-muted);cursor:pointer;padding:0 4px;line-height:1}
    .gs-preview-dialog__close:hover{color:var(--color-text)}
    .gs-preview-dialog__body{overflow:auto;padding:16px;background:#374151;display:flex;align-items:center;justify-content:center;max-height:calc(90vh - 110px)}
    .gs-preview-dialog__footer{padding:10px 16px;border-top:1px solid var(--color-border);background:var(--color-bg);display:flex;gap:8px;justify-content:flex-end}
    /* Crop dialog — reuses .gs-preview-dialog chrome; these are the crop-only bits. */
    /* touch-action:none is required, not cosmetic: without it a drag on a phone
       scrolls the page instead of drawing a selection. */
    .gs-crop-stage{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;line-height:0;max-width:100%}
    .gs-crop-img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
    /* The huge spread shadow dims everything OUTSIDE the selection, so the kept
       area reads as the subject rather than as one more box on the image. */
    .gs-crop-sel{position:absolute;border:1.5px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none}
    .gs-crop-sel[hidden]{display:none}
    .gs-crop-hint{margin-right:auto;align-self:center;font-size:12px;color:var(--color-text-muted)}
    .gs-crop-dialog .gs-preview-dialog__body{background:#374151}
    /* Cart pill */
    .ifgs-cart-pill{position:fixed;top:84px;right:18px;z-index:9990;display:flex;align-items:center;gap:10px;background:#0D1B2A;color:#fff;padding:10px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(13,27,42,.25),0 2px 6px rgba(13,27,42,.15);font-family:'Space Grotesk',sans-serif;font-size:13px;border:2px solid #4DC9E6;transition:transform .2s ease,box-shadow .2s ease}
    .ifgs-cart-pill:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(13,27,42,.3)}
    .ifgs-cart-pill .ifgs-cart-icon{font-size:16px;line-height:1}
    .ifgs-cart-pill .ifgs-cart-count{font-family:'Syne',sans-serif;font-weight:700;color:#4DC9E6;font-size:14px}
    .ifgs-cart-pill .ifgs-cart-total{font-family:'Syne',sans-serif;font-weight:600;color:#fff}
    .ifgs-cart-pill .ifgs-cart-sep{color:rgba(255,255,255,.35)}
    .ifgs-cart-pill .ifgs-cart-checkout{margin-left:6px;background:#4DC9E6;color:#0D1B2A;padding:5px 12px;border-radius:999px;text-decoration:none;font-family:'Syne',sans-serif;font-weight:700;font-size:11px;letter-spacing:.02em;transition:background .15s ease}
    .ifgs-cart-pill .ifgs-cart-checkout:hover{background:#7ad9eb}
    .ifgs-cart-pill__toggle{margin-left:4px;background:transparent;border:0;color:rgba(255,255,255,.7);cursor:pointer;padding:2px 6px;font-size:11px;border-radius:6px;transition:background .15s}
    .ifgs-cart-pill__toggle:hover{background:rgba(255,255,255,.1);color:#fff}
    .ifgs-cart-popover{position:fixed;top:140px;right:18px;z-index:9991;width:340px;max-width:calc(100vw - 36px);max-height:60vh;overflow-y:auto;background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(13,27,42,.22),0 4px 10px rgba(13,27,42,.1);border:1px solid #e5e7eb;font-family:'Space Grotesk',sans-serif;color:#0D1B2A;display:none}
    .ifgs-cart-popover.is-open{display:block}
    .ifgs-cart-popover__header{padding:12px 14px;border-bottom:1px solid #f0f0f0;font-family:'Syne',sans-serif;font-weight:700;font-size:13px;display:flex;justify-content:space-between;align-items:center}
    .ifgs-cart-popover__close{background:transparent;border:0;color:#888;cursor:pointer;font-size:18px;line-height:1;padding:0 4px}
    .ifgs-cart-popover__close:hover{color:#0D1B2A}
    .ifgs-cart-popover__list{padding:6px}
    .ifgs-cart-line{display:flex;gap:10px;padding:10px;border-radius:8px;align-items:center}
    .ifgs-cart-line:hover{background:#f8fafc}
    .ifgs-cart-line__thumb{width:48px;height:48px;border-radius:6px;object-fit:cover;border:1px solid #e5e7eb;background:#f5f5f5;flex-shrink:0}
    .ifgs-cart-line__info{flex:1;min-width:0}
    .ifgs-cart-line__name{font-weight:700;font-size:12px;line-height:1.3;color:#0D1B2A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ifgs-cart-line__meta{font-size:11px;color:#666;margin-top:2px}
    .ifgs-cart-line__remove{background:transparent;border:0;color:#ef4444;cursor:pointer;font-size:18px;line-height:1;padding:6px 8px;border-radius:6px;transition:background .15s}
    .ifgs-cart-line__remove:hover{background:#fee2e2}
    .ifgs-cart-line__remove:disabled{opacity:.4;cursor:wait}
    .ifgs-cart-popover__footer{padding:10px 14px;border-top:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;gap:10px;background:#f9fafb;border-radius:0 0 14px 14px}
    .ifgs-cart-popover__total{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;color:#0D1B2A}
    .ifgs-cart-popover__checkout{background:#4DC9E6;color:#0D1B2A;padding:7px 14px;border-radius:999px;text-decoration:none;font-family:'Syne',sans-serif;font-weight:700;font-size:11px;letter-spacing:.02em;transition:background .15s}
    .ifgs-cart-popover__checkout:hover{background:#7ad9eb}
    .ifgs-cart-popover__empty{padding:24px 14px;text-align:center;color:#888;font-size:12px}
    @media (max-width:640px){.ifgs-cart-popover{top:auto;bottom:calc(160px + 12px);right:10px;left:10px;width:auto;max-width:none;z-index:401}}
    /* On phones the global .mobile-cta-bar is fixed at the bottom (88px tall),
       so park the cart pill above it instead of overlapping. */
    @media (max-width:640px){.ifgs-cart-pill{top:auto;bottom:calc(88px + 12px);right:10px;left:10px;justify-content:center;font-size:12px;z-index:401}}
    /* Toast */
        /* z-index 10050, not 10000: #sidebar-left and #sidebar-right are 10001, so a
       CENTRED toast renders underneath both panels and only the strip over the
       canvas column stays visible - which reads as clipped text. Top-right never
       overlapped a sidebar, so 10000 was fine there and is not here. Native
       <dialog> uses the top layer and still wins, which is correct. */
    /* Centred, not top-right: these carry order REFUSALS - the sheet-overflow
       and overlap guards - and a message that decides whether an order can be
       placed should land where the customer is already looking. */
.ifgs-toast-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10050;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:min(420px,calc(100vw - 32px))}
    .ifgs-toast{pointer-events:auto;background:#fff;color:#0D1B2A;padding:12px 16px;border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.18);font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:500;border-left:4px solid #4DC9E6;text-align:center;opacity:0;transform:scale(.96);transition:opacity .25s ease,transform .25s ease}
    .ifgs-toast.is-visible{opacity:1;transform:scale(1)}
    .ifgs-toast--success{border-left-color:#10b981}
    .ifgs-toast--error{border-left-color:#dc2626}
    /* Sheet meta row (qty + notes) */
    .ifgs-sheet-meta{display:flex;gap:10px;margin-bottom:10px}
    .ifgs-sheet-meta .form-group{flex:1;margin:0}
    .ifgs-qty-input{width:70px}
    .ifgs-field-label{display:block;font-size:11px;font-weight:600;color:var(--color-text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}

    /* === PHASE A: CINEMATIC FOUNDATION === */
    .gs-sidebar__tab-indicator{position:absolute;left:0;width:3px;height:50px;background:#4DC9E6;pointer-events:none;border-radius:0 2px 2px 0;opacity:0;z-index:1}
    .gs-sidebar--right .gs-sidebar__tab-indicator{left:auto;right:0;border-radius:2px 0 0 2px}
    .gs-sidebar__tab-indicator.is-ready{opacity:1}
    #canvas-viewport{cursor:crosshair}
    body.has-if-cursor #canvas-viewport,body.has-if-cursor #canvas-viewport *{cursor:crosshair !important}
    body.has-if-cursor.gs-no-cursor .if-cursor{display:none !important}
    .gs-ripple-host{position:relative;overflow:hidden}
    .gs-ripple{position:absolute;border-radius:50%;background:rgba(77,201,230,.4);transform:scale(0);pointer-events:none;width:20px;height:20px}
    @media (prefers-reduced-motion: reduce){.gs-sidebar__tab-indicator{transition:none !important}}

    /* === PHASE B: WORKFLOW POLISH === */
    .gs-packing-overlay{position:absolute;inset:0;background:rgba(77,201,230,.08);pointer-events:none;z-index:50;opacity:0;display:flex;align-items:center;justify-content:center}
    .gs-packing-overlay__dots{display:flex;gap:8px}
    .gs-packing-overlay__dot{width:12px;height:12px;background:#4DC9E6;border-radius:50%;animation:gsPackingDot 1.2s infinite}
    .gs-packing-overlay__dot:nth-child(2){animation-delay:.15s}
    .gs-packing-overlay__dot:nth-child(3){animation-delay:.3s}
    @keyframes gsPackingDot{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1);opacity:1}}
    .gs-canvas-flash-ring{position:absolute;inset:-4px;border:3px solid #4DC9E6;border-radius:8px;pointer-events:none;z-index:60;opacity:0;box-shadow:0 0 24px rgba(77,201,230,.6)}
    .gs-design-savelib-btn{transition:color .2s,transform .2s}
    .gs-design-savelib-btn.is-saved{color:#4DC9E6}
    @media (prefers-reduced-motion: reduce){.gs-packing-overlay__dot{animation:none}}
    /* === PHASE C: CART + SUBMIT POLISH === */
    .gs-submit-loading{position:relative;pointer-events:none;opacity:.85}
    .gs-submit-loading > *:not(.gs-submit-spinner){opacity:0!important;visibility:hidden}
    .gs-submit-spinner{position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:gsSpinC .7s linear infinite;display:none}
    .gs-submit-loading .gs-submit-spinner{display:block;opacity:1!important;visibility:visible}
    @keyframes gsSpinC{to{transform:rotate(360deg)}}
    .gs-confetti-host{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
    .gs-confetti-piece{position:absolute;width:8px;height:12px;border-radius:1px;pointer-events:none;will-change:transform,opacity}
    @media (prefers-reduced-motion: reduce){
      .gs-submit-spinner{animation:none;border-top-color:rgba(255,255,255,.6)}
    }

    /* === Add-to-cart progress overlay (real upload %) === */
    .gs-prog{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(13,27,42,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
    .gs-prog[hidden]{display:none}
    .gs-prog__card{background:#fff;border-radius:16px;padding:26px 30px 24px;width:min(380px,90vw);text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.32)}
    .gs-prog__spin{width:34px;height:34px;margin:0 auto 14px;border:3px solid #e3eef3;border-top-color:var(--color-primary);border-radius:50%;animation:gsSpinC .8s linear infinite}
    .gs-prog__title{font-family:var(--font-heading);font-weight:700;font-size:15px;color:#0D1B2A;margin:0 0 14px}
    .gs-prog__bar{height:9px;background:#e9eef2;border-radius:99px;overflow:hidden;margin:0 0 9px}
    .gs-prog__fill{height:100%;width:0;background:linear-gradient(90deg,#4DC9E6,#0D9CB8);border-radius:99px;transition:width .25s ease}
    .gs-prog.is-indet .gs-prog__fill{width:42%!important;animation:gsIndet 1.15s ease-in-out infinite}
    @keyframes gsIndet{0%{margin-left:-42%}100%{margin-left:100%}}
    .gs-prog__sub{font-size:12px;color:#5b6b78;line-height:1.5;min-height:1.2em}
    @media (prefers-reduced-motion: reduce){.gs-prog__spin{animation:none}.gs-prog.is-indet .gs-prog__fill{animation:none;width:100%!important}}

    /* === PHASE D: ONBOARDING TOUR === */
    .gs-tour-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none}
    .gs-tour-backdrop{position:absolute;inset:0;background:rgba(13,27,42,.4);pointer-events:auto;opacity:0}
    .gs-tour-pulse{position:absolute;border:3px solid #4DC9E6;border-radius:8px;pointer-events:none;box-sizing:border-box;box-shadow:0 0 0 4px rgba(77,201,230,.2)}
    .gs-tour-pulse::after{content:'';position:absolute;inset:-4px;border:3px solid #4DC9E6;border-radius:8px;opacity:0}
    .gs-tour-tooltip{position:absolute;background:#fff;border-radius:12px;padding:24px 28px;width:320px;box-shadow:0 12px 32px rgba(13,27,42,.2);pointer-events:auto;font-family:'Space Grotesk',sans-serif;z-index:10000}
    .gs-tour-tooltip__step{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;color:#4DC9E6;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
    .gs-tour-tooltip__title{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;color:#0D1B2A;margin:0 0 8px;line-height:1.3}
    .gs-tour-tooltip__body{font-size:14px;color:#4b5563;margin:0 0 16px;line-height:1.5}
    .gs-tour-tooltip__actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .gs-tour-tooltip__skip{font-size:12px;color:#9ca3af;cursor:pointer;text-decoration:underline;background:none;border:none;padding:0;font-family:'Space Grotesk',sans-serif}
    .gs-tour-tooltip__skip:hover{color:#4b5563}
    .gs-tour-tooltip__nav{display:flex;gap:8px}
    .gs-tour-btn{font-family:'Syne',sans-serif;font-weight:600;font-size:13px;padding:8px 16px;border-radius:6px;border:none;cursor:pointer;transition:all .2s}
    .gs-tour-btn--ghost{background:transparent;color:#4b5563;border:1px solid #e5e7eb}
    .gs-tour-btn--ghost:hover{background:#f9fafb}
    .gs-tour-btn--primary{background:#4DC9E6;color:#0D1B2A}
    .gs-tour-btn--primary:hover{background:#3bb8d5;transform:translateY(-1px)}
    .gs-tour-tooltip__arrow{position:absolute;width:12px;height:12px;background:#fff;transform:rotate(45deg)}
    .gs-tour-tooltip[data-arrow="left"] .gs-tour-tooltip__arrow{left:-6px;top:24px}
    .gs-tour-tooltip[data-arrow="right"] .gs-tour-tooltip__arrow{right:-6px;top:24px}
    .gs-tour-tooltip[data-arrow="bottom"] .gs-tour-tooltip__arrow{bottom:-6px;left:24px}
    .gs-tour-tooltip[data-arrow="top"] .gs-tour-tooltip__arrow{top:-6px;left:24px}
    @media (max-width:768px){.gs-tour-overlay{display:none}}

    /* ── TOUCH TARGET MINIMUMS ───────────────────────────────────────────────
       Measured on the live builder: 36 interactive controls under 44px, the
       smallest 24px. The toolbar buttons, zoom controls, sheet-quantity steppers
       and checkout link are all things people press mid-order.

       Scoped to (pointer: coarse) deliberately, the same predicate the gesture
       layer now uses. With a mouse, 24px is a precise target and inflating every
       control would wreck a deliberately dense toolbar for no benefit; with a
       fingertip it is a mis-tap. The requirement is about the input device, not
       the screen — which is the lesson the width-gated gesture bug already
       taught once today.

       min-width/min-height rather than width/height so text buttons that are
       already wider keep their size, and only the small icon ones grow.

       NOT covered: the WordPress admin bar (.lh, 12 of the 36) is WP's own
       markup and only ever renders for logged-in admins, never for a customer. */
    @media (pointer: coarse){
      .gs-hdr-btn, .gs-ft-btn, .gs-zoom-btn, .gs-qty-btn,
      .gs-hdr-checkout, .gs-layer-btn, .ifgs-qty-input{
        min-width:44px; min-height:44px;
      }
      /* Icon-only buttons centre their glyph once they are bigger than it. */
      .gs-hdr-btn, .gs-ft-btn, .gs-zoom-btn, .gs-qty-btn{
        display:inline-flex; align-items:center; justify-content:center;
      }
    }

/* ── Draft conflict dialog ─────────────────────────────────────────────────────
   Shown when a draft was saved somewhere else while this tab was editing it.

   This replaced a native confirm() whose DEFAULT button — the one Enter presses —
   was "open the latest version (you will lose unsaved changes here)". The
   destructive option was the default, on the one artefact a customer cannot
   recreate. Both versions here are real work by the same person, so the option
   that destroys nothing is listed first, styled as the primary, and focused.
   → WAVE-4-INTERACTION-SPEC §7.1(2)

   z-index sits above the toast container (10050) because this is a decision the
   customer must make, not a notification they can ignore. */
.ifgs-conflict-overlay{
  position:fixed; inset:0; z-index:10060;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(21,19,16,.55);
}
  .ifgs-conflict{
    max-width:460px; width:100%;
    background:#efe9db; color:#151310;
    border:2.5px solid #151310; box-shadow:6px 6px 0 #151310;
    padding:22px 22px 18px;
    font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  }
  .ifgs-conflict h2{
    margin:0 0 10px; font-family:'Syne',system-ui,sans-serif;
    font-size:20px; line-height:1.2; font-weight:700; color:#151310;
  }
  .ifgs-conflict p{ margin:0 0 14px; font-size:14px; line-height:1.5; }
  .ifgs-conflict__actions{ display:flex; flex-direction:column; gap:8px; }
  .ifgs-conflict__btn{
    width:100%; padding:11px 14px; cursor:pointer;
    font:inherit; font-size:14px; font-weight:600; text-align:center;
    background:#efe9db; color:#151310;
    border:2.5px solid #151310; border-radius:0;
    transition:transform .06s ease, box-shadow .06s ease;
  }
  .ifgs-conflict__btn:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 #151310; }
  .ifgs-conflict__btn:active{ transform:translate(0,0); box-shadow:none; }
  /* The safe option is the visually loudest AND the focused one. */
  .ifgs-conflict__btn--safe{ background:#00a7e1; color:#151310; }
  .ifgs-conflict__btn--quiet{ border-color:#8a8578; color:#5c584f; font-weight:500; }
  .ifgs-conflict__btn:focus-visible{ outline:3px solid #ff5a1f; outline-offset:2px; }
  .ifgs-conflict__hint{ margin:12px 0 0; font-size:12.5px; color:#5c584f; }

@media (prefers-reduced-motion: reduce){
  .ifgs-conflict__btn{ transition:none; }
  .ifgs-conflict__btn:hover{ transform:none; }
}