/* Side designer — layout tokens (product column; popups use premium --w2i-* tokens) */
div.w2i-sidedsgnr-container,
#web2ink.w2i-sidedsgnr {
  --w2i-sd-primary: #03a7f2;
  --w2i-sd-primary-hover: #03a7f2;
  --w2i-sd-primary-soft: #eff6ff;
  --w2i-sd-border: #ededed;
  --w2i-sd-text: #0f172a;
  --w2i-sd-muted: #64748b;
  --w2i-sd-radius: 8px;
  --w2i-sd-shadow: 0 16px 48px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Premium theme tokens on portaled popups (outside #web2inkdesigner scope) */
html body .w2i-sidedsgnr-floating,
html body > #w2i-sidepanel-textwizard:not(.w2i-hidden),
html body > #w2i-sidepanel-clipartwizard:not(.w2i-hidden),
html body > #w2i-sidepanel-uploadwizard:not(.w2i-hidden),
html body > #w2i-controls:not(.w2i-hidden),
html body > #w2i-floating-controls:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel > .w2i-sidepanel-view:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel > #w2i-controls:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel > #w2i-floating-controls:not(.w2i-hidden) {
  --w2i-primary: #03a7f2;
  --w2i-primary-50: #eff6ff;
  --w2i-primary-100: #dbeafe;
  --w2i-primary-600: #03a7f2;
  --w2i-light-bg: #f7f7f7;
  --w2i-light-border: #ededed96;
  --w2i-surface: #ffffff;
  --w2i-surface-2: #f8fafc;
  --w2i-border: #ededed;
  --w2i-border-2: #e2e2e282;
  --w2i-border-strong: #d1d5db;
  --w2i-bg: #ededed;
  --w2i-text: #0f172a;
  --w2i-text-muted: #64748b;
  --w2i-text-subtle: #94a3b8;
  --w2i-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  --w2i-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --w2i-radius-sm: 8px;
  --w2i-radius-xs: 10px;
  --w2i-panel-w: 390px;
  --w2i-topbar-h: 60px;
  --w2i-space-xs: 8px;
  --w2i-space-sm: 12px;
  --w2i-space-md: 16px;
  --w2i-transition: 0.15s ease;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--w2i-text);
}

div.w2i-sidedsgnr-container {display:flex;box-sizing:border-box;align-items:flex-start;gap:24px;width:100%;max-width:100%;margin:0 auto;}
div.w2i-sidedsgnr-container * {box-sizing:border-box;}
div.w2i-sidedsgnr-container > div {width:50%;padding:10px;min-width:0;}

div.w2i-sidedsgnr-designer {
  position:relative;
  min-height:75vh;
  padding-left:0;
  overflow:visible;
}
div.w2i-sidedsgnr-designer > #web2ink {
  position:relative;
  width:100%;
  min-height:75vh;
  display:flex;
  flex-direction:column;
}
div.w2i-sidedsgnr-designer #web2inkdesigner {
  width:100%;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
div.w2i-sidedsgnr-designer #web2inkdesigner > main {
  flex:1 1 auto;
  min-height:0;
  display:flex !important;
  justify-content:center !important;
  align-items:stretch !important;
}

/* Side designer: hide left nav only; wizards live in .w2i-sidepanel (fullscreen when open) */
html body #web2ink.w2i-sidedsgnr #w2i-product-info,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > footer,
html body #web2ink.w2i-sidedsgnr div.w2i-side-sider,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > nav,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel > .w2i-quickstart {
  display:none !important;
}
/* Topbar — vertical tool stack, top-right over canvas (premium pills relocated by theme JS) */
html body #web2ink.w2i-sidedsgnr #web2inkdesigner {
  padding-top:0 !important;
  min-height:75vh !important;
  height:auto !important;
  overflow:visible !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar.w2i-hidden {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:6px !important;
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  left:auto !important;
  bottom:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  max-height:calc(100% - 24px) !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  z-index:30 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) > div.w2i-topbar-brand {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) > div.w2i-topbar-pills,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) > div.w2i-topbar-actions {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:6px !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) > div.w2i-topbar-pills > ul,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) > div.w2i-topbar-pills > ul.w2i-sides {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:6px !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) > div.w2i-topbar-actions > button.w2i-topbar-iconbtn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  flex-shrink:0 !important;
  border-radius:6px !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill > span.w2i-label {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-switch {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-colorpicker {
  overflow:visible !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-colorpicker span.w2i-color-dot {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  border:1px solid rgba(15, 23, 42, 0.12) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-colorpicker span.w2i-color-dot .w2i-swatch,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-colorpicker span.w2i-color-dot > span,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-colorpicker > span > span.w2i-color,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-colorpicker > span > span.w2i-swatch {
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  border-radius:6px !important;
  box-sizing:border-box !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner div.w2i-popup.w2i-colorpicker {
  position:fixed !important;
  right:auto !important;
  z-index:100010 !important;
  max-width:min(300px, calc(100vw - 24px)) !important;
  box-sizing:border-box !important;
  padding:6px !important;
  transition:none !important;
  animation:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner div.w2i-popup.w2i-colorpicker > span.fa,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner div.w2i-popup.w2i-colorpicker > span.w2i-fa {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner div.w2i-popup.w2i-colorpicker > div {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  padding:8px !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  background:#fff !important;
  border:1px solid var(--w2i-border, #ededed) !important;
  border-radius:var(--w2i-radius-xs, 6px) !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner div.w2i-popup.w2i-colorpicker span.w2i-swatch {
  display:inline-block !important;
  width:28px !important;
  height:28px !important;
  margin:0 !important;
  flex-shrink:0 !important;
  border:2px solid transparent !important;
  border-radius:6px !important;
  box-sizing:border-box !important;
  transition:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner div.w2i-popup.w2i-colorpicker span.w2i-swatch.w2i-selected {
  border-color:var(--w2i-primary, #03a7f2) !important;
  box-shadow:0 0 0 2px rgba(30, 57, 210, 0.2) !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) ul.w2i-sides > li.w2i-topbar-pill:not(:has(.w2i-sidedsgnr-side-mark)),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) ul.w2i-sides > li.w2i-hidden {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) ul.w2i-sides > li.w2i-topbar-pill .w2i-sidedsgnr-side-mark {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
  color:inherit !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) ul.w2i-sides > li.w2i-topbar-pill .w2i-sidedsgnr-side-mark > img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  border-radius:4px !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) ul.w2i-sides > li.w2i-topbar-pill.w2i-selected {
  border-color:var(--w2i-primary, #03a7f2) !important;
  background:var(--w2i-primary-50, #eff6ff) !important;
  color:var(--w2i-primary, #03a7f2) !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > footer ul.w2i-sides {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill svg,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill > span.fa {
  margin:0 !important;
  flex-shrink:0 !important;
}
/* Zoom: + on top, − below — icon only, labels via title on hover */
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill.w2i-zoom-steps {
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:auto !important;
  min-height:0 !important;
  padding:4px !important;
  gap:4px !important;
  cursor:default !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill.w2i-zoom-steps > span.w2i-label {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill.w2i-zoom-steps .w2i-zoom-step {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  height:30px !important;
  min-height:30px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--w2i-text-muted, #64748b) !important;
  cursor:pointer !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill.w2i-zoom-steps .w2i-zoom-step[data-zoom="in"] {
  order:1 !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill.w2i-zoom-steps .w2i-zoom-step[data-zoom="out"] {
  order:2 !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill.w2i-zoom-steps .w2i-zoom-step:hover {
  background:rgba(15, 23, 42, 0.06) !important;
  color:var(--w2i-primary, #03a7f2) !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-browse,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > header.w2i-topbar:not(.w2i-hidden) li.w2i-topbar-pill.w2i-size {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr div.w2i-sidedsgnr-side-switcher {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside {
  display:block !important;
  flex:0 0 0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  background:transparent !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  z-index:99980 !important;
  background:transparent !important;
  pointer-events:none !important;
  overflow:visible !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel > .w2i-sidepanel-view.w2i-hidden {
  display:none !important;
}
/* Visible wizard inside zero-width aside — show as floating until JS portals it */
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel > #w2i-sidepanel-textwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel > #w2i-sidepanel-clipartwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel > #w2i-sidepanel-uploadwizard:not(.w2i-hidden) {
  display:flex !important;
  flex-direction:column !important;
  position:fixed !important;
  width:min(calc(var(--w2i-panel-w) - 24px), calc(100vw - 32px)) !important;
  max-height:min(560px, calc(100vh - 48px)) !important;
  min-height:220px !important;
  z-index:1000002 !important;
  pointer-events:auto !important;
  background:var(--w2i-light-bg) !important;
  border-radius:var(--w2i-radius-sm) !important;
  border:1px solid var(--w2i-border-2) !important;
  box-shadow:var(--w2i-shadow-lg) !important;
  overflow:hidden !important;
  top:50% !important;
  right:16px !important;
  left:auto !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel > #w2i-controls:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > aside > main.w2i-sidepanel > #w2i-floating-controls:not(.w2i-hidden) {
  display:flex !important;
  flex-direction:column !important;
  position:fixed !important;
  width:min(calc(var(--w2i-panel-w) - 24px), calc(100vw - 32px)) !important;
  max-height:min(620px, calc(100vh - 48px)) !important;
  min-height:220px !important;
  z-index:1000002 !important;
  pointer-events:auto !important;
  background:#fff !important;
  border-radius:var(--w2i-radius-sm) !important;
  border:1px solid var(--w2i-border-2) !important;
  box-shadow:var(--w2i-shadow-lg) !important;
  overflow:hidden !important;
  top:50% !important;
  right:16px !important;
  left:auto !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}

/* Floating draggable panels — premium sidebar look, right-middle popup position */
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > .w2i-sidedsgnr-floating:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-sidepanel-textwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-sidepanel-clipartwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-sidepanel-uploadwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-controls:not(.w2i-hidden) {
  display:flex !important;
  flex-direction:column !important;
  position:fixed !important;
  width:min(calc(var(--w2i-panel-w) - 24px), calc(100vw - 32px)) !important;
  max-height:min(560px, calc(100vh - 48px)) !important;
  min-height:220px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  z-index:1000002 !important;
  pointer-events:auto !important;
  border-radius:var(--w2i-radius-sm) !important;
  border:1px solid var(--w2i-border-2) !important;
  box-shadow:var(--w2i-shadow-lg) !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  top:50% !important;
  right:16px !important;
  left:auto !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  animation:none !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating#w2i-sidepanel-textwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating#w2i-sidepanel-clipartwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating#w2i-sidepanel-uploadwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-sidepanel-textwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-sidepanel-clipartwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-sidepanel-uploadwizard:not(.w2i-hidden) {
  background:var(--w2i-light-bg) !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating#w2i-controls:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-controls:not(.w2i-hidden) {
  background:#fff !important;
  max-height:min(620px, calc(100vh - 48px)) !important;
}
/* Draggable toolbar — premium theme supplies colors; only add drag affordance */
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) .w2i-sidepanel-toolbar,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) .w2i-controls-toolbar,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > header {
  cursor:move;
  user-select:none;
  touch-action:none;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) .w2i-sidepanel-toolbar button,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) .w2i-controls-toolbar button {
  cursor:pointer;
}
/* Open popup shells must show toolbar + inner even if designer left w2i-hidden on children */
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-toolbar.w2i-hidden,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-controls-toolbar.w2i-hidden,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-controls-body.w2i-hidden,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-textwizard-inner.w2i-hidden,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-clipartwizard-inner.w2i-hidden,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-uploadwizard-inner.w2i-hidden,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-clipart-global-search.w2i-hidden,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > .w2i-sidepanel-view:not(.w2i-hidden) > .w2i-sidepanel-toolbar.w2i-hidden,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > .w2i-sidepanel-view:not(.w2i-hidden) > .w2i-sidepanel-textwizard-inner.w2i-hidden,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > .w2i-sidepanel-view:not(.w2i-hidden) > .w2i-sidepanel-clipartwizard-inner.w2i-hidden,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > .w2i-sidepanel-view:not(.w2i-hidden) > .w2i-sidepanel-uploadwizard-inner.w2i-hidden,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-controls:not(.w2i-hidden) > .w2i-controls-toolbar.w2i-hidden,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-controls:not(.w2i-hidden) > .w2i-controls-body.w2i-hidden {
  display:flex !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-toolbar.w2i-hidden,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-controls-toolbar.w2i-hidden,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > .w2i-sidepanel-view:not(.w2i-hidden) > .w2i-sidepanel-toolbar.w2i-hidden,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-controls:not(.w2i-hidden) > .w2i-controls-toolbar.w2i-hidden {
  display:grid !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-textwizard-inner,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-clipartwizard-inner,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-uploadwizard-inner,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > div[id^="w2i-sidepanel-"]:not(.w2i-hidden) > .w2i-sidepanel-textwizard-inner,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > div[id^="w2i-sidepanel-"]:not(.w2i-hidden) > .w2i-sidepanel-clipartwizard-inner,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > div[id^="w2i-sidepanel-"]:not(.w2i-hidden) > .w2i-sidepanel-uploadwizard-inner {
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:0;
  display:flex;
  flex-direction:column;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-textwizard-inner > div[id$="wizard"],
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-clipartwizard-inner > div[id$="wizard"],
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) > .w2i-sidepanel-uploadwizard-inner > div[id$="wizard"],
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > div[id^="w2i-sidepanel-"]:not(.w2i-hidden) > .w2i-sidepanel-textwizard-inner > div[id$="wizard"],
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > div[id^="w2i-sidepanel-"]:not(.w2i-hidden) > .w2i-sidepanel-clipartwizard-inner > div[id$="wizard"],
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > div[id^="w2i-sidepanel-"]:not(.w2i-hidden) > .w2i-sidepanel-uploadwizard-inner > div[id$="wizard"] {
  width:100%;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating#w2i-controls:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating#w2i-floating-controls:not(.w2i-hidden) {
  display:flex !important;
  flex-direction:column !important;
}
/* Legacy floating layer controls duplicate #w2i-controls — always hide it in the side designer */
html body.w2i-sidedsgnr-has-controls #web2ink.w2i-sidedsgnr #w2i-floating-controls,
html body.w2i-sidedsgnr-has-controls #web2ink.w2i-sidedsgnr #web2inkdesigner .w2i-sidedsgnr-portal-root > #w2i-floating-controls {
  display:none !important;
}
/* Hide duplicate wizard h3 when sidepanel toolbar is present */
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) #w2i-clipartwizard > div > h3,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) #w2i-textwizard > div > h3,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating:not(.w2i-hidden) #w2i-uploadwizard > div > h3 {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > canvas,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > section {
  width:100% !important;
  max-width:100% !important;
  flex:1 1 auto !important;
  margin:0 !important;
}

html body #web2ink.w2i-sidedsgnr #web2inkdesigner > main > canvas,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root {
  pointer-events:auto !important;
}


/* Portal layer — keeps popups inside #web2inkdesigner so premium theme CSS applies */
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root {
  position:fixed !important;
  inset:0 !important;
  z-index:1000001 !important;
  pointer-events:none !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > * {
  pointer-events:auto !important;
}
/* Override premium absolute right-dock positioning — right edge, vertically centered */
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > .w2i-sidedsgnr-floating,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-sidepanel-textwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-sidepanel-clipartwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-sidepanel-uploadwizard:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root > #w2i-controls:not(.w2i-hidden) {
  position:fixed !important;
  top:50% !important;
  right:16px !important;
  left:auto !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  animation:none !important;
}

/* Bottom tool bar — theme's mobile tray is a duplicate of our
   div.w2i-small-footer (which also has Clear design); hide the tray. */
html body #web2ink.w2i-sidedsgnr #web2inkdesigner .w2i-smallfooter {
  display:none !important;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner .w2i-smallfooter nav ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:0;
  padding:10px 8px;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner .w2i-smallfooter nav ul > li {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:76px;
  margin:0;
  padding:8px 10px;
  cursor:pointer;
  vertical-align:middle;
  background:var(--w2i-sd-primary);
  color:#fff;
  border-radius:8px;
  transition:background .15s ease, transform .08s ease;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner .w2i-smallfooter nav ul > li:hover {
  background:var(--w2i-sd-primary-hover);
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner .w2i-smallfooter nav ul > li:active {
  transform:scale(0.98);
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner .w2i-smallfooter nav ul > li.w2i-disabled {
  opacity:.45;
  pointer-events:none;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner .w2i-smallfooter nav ul > li > span {
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1.2;
  text-align:center;
  color:#fff;
  font-weight:600;
}
html body #web2ink.w2i-sidedsgnr #web2inkdesigner .w2i-smallfooter nav ul > li > img,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner .w2i-smallfooter nav ul > li svg {
  filter:brightness(0) invert(1);
  max-height:22px;
  width:auto;
}

html body #web2ink.w2i-sidedsgnr div.w2i-small-footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex:0 0 auto;
  order:30;
  padding:10px 8px;
  border-top:1px solid var(--w2i-border-2);
  background:#fff;
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer nav {
  flex:0 1 auto;
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer nav ul {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:0;
  text-align:center;
  margin:0;
  padding:0;
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer li {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:76px;
  margin:0;
  padding:12px 6px;
  vertical-align:middle;
  cursor:pointer;
  background:var(--w2i-light-bg, #f7f7f7);
  color:var(--w2i-text, #0f172a);
  border:2px solid var(--w2i-light-border, #ededed96) !important;
  border-radius:var(--w2i-radius-sm, 8px);
  transition:background-color .15s ease, color .15s ease, transform .08s ease;
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer li > span {
  color:inherit;
  font-size:11.5px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:0.01em;
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer li:hover {
  /* background:var(--w2i-primary-50, #eff6ff);
  color:var(--w2i-primary, #03a7f2);
  border-color:var(--w2i-light-border, #ededed96); */

  background: var(--w2i-primary-50) !important;
  color: var(--w2i-primary) !important;
  border-color: var(--w2i-primary) !important;
  
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer li:active {
  transform:scale(0.96);
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer li.w2i-disabled {
  opacity:0.55;
  cursor:not-allowed;
  color:var(--w2i-text-subtle, #94a3b8);
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer li > img {
  filter:none;
  max-height:22px;
  opacity:0.8;
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer li:hover > img {
  opacity:1;
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer li > svg {
  width:auto;
  height:22px;
  max-height:22px;
  color:inherit;
  fill:currentColor;
  margin-bottom:0;
  opacity:0.8;
}
html body #web2ink.w2i-sidedsgnr div.w2i-small-footer li:hover > svg {
  opacity:1;
}

html body #web2ink.w2i-sidedsgnr .w2i-step1 p button{
  width: 100% !important;
}

/* Side switcher */
div.w2i-sidedsgnr-side-switcher {
  position:relative;
  flex:0 0 auto;
  order:15;
  z-index:20;
}
div.w2i-sidedsgnr-side-switcher.is-hidden {display:none;}
button.w2i-sidedsgnr-side-toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:8px 12px;
  border:0;
  border-radius:8px;
  background:var(--w2i-sd-primary);
  color:#fff;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  line-height:1.2;
}
button.w2i-sidedsgnr-side-toggle .w2i-sidedsgnr-side-label {
  flex:0 0 auto;
  color:rgba(255,255,255,.85);
  font-weight:500;
}
button.w2i-sidedsgnr-side-toggle .w2i-sidedsgnr-side-current {
  flex:1 1 auto;
  text-align:left;
  font-weight:600;
  color:#fff;
}
button.w2i-sidedsgnr-side-toggle:hover {background:var(--w2i-sd-primary-hover);}
button.w2i-sidedsgnr-side-toggle .w2i-sidedsgnr-side-caret {
  margin-left:10px;
  font-size:12px;
  opacity:.9;
  transition:transform .2s ease;
  color:#fff;
}
div.w2i-sidedsgnr-side-switcher.is-open button.w2i-sidedsgnr-side-toggle .w2i-sidedsgnr-side-caret {transform:rotate(180deg);}
div.w2i-sidedsgnr-side-menu {
  display:none;
  position:absolute;
  left:auto;
  right:0;
  min-width:220px;
  bottom:calc(100% + 6px);
  max-height:min(360px, 55vh);
  overflow:auto;
  border:1px solid var(--w2i-sd-border);
  border-radius:var(--w2i-sd-radius);
  background:#fff;
  box-shadow:var(--w2i-sd-shadow);
  z-index:30;
}
div.w2i-sidedsgnr-side-switcher.is-open div.w2i-sidedsgnr-side-menu {display:block;}
button.w2i-sidedsgnr-side-option {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:0;
  border-bottom:1px solid #f2f4f7;
  background:#fff;
  color:var(--w2i-sd-text);
  text-align:left;
  cursor:pointer;
  font-size:13px;
}
button.w2i-sidedsgnr-side-option:last-child {border-bottom:0;}
button.w2i-sidedsgnr-side-option:hover {background:#f9fafb;}
button.w2i-sidedsgnr-side-option.is-selected {
  background:var(--w2i-sd-primary-soft);
  color:var(--w2i-sd-primary-hover);
  font-weight:600;
}
button.w2i-sidedsgnr-side-option img {
  width:42px;
  height:42px;
  object-fit:contain;
  flex:0 0 42px;
  border:1px solid #eaecf0;
  border-radius:6px;
  background:#fff;
}

/* Mix styles popup keeps its native (normal design tool) inner design, but is
   promoted from filling the embedded designer shell to the full browser
   viewport — like the standalone "design now" page. Only the outer container is
   resized (overriding the inline absolute/shell sizing the designer applies via
   w2iLayoutFullPagePopups()); the inner .modal-window layout is untouched. */
html body #web2ink.w2i-sidedsgnr #w2i-mixstyles:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #mixstyles:not(.w2i-hidden) {
  position:fixed !important;
  inset:0 !important;
  top:0 !important;
  left:0 !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  z-index:100000 !important;
}

/* Premium wizard layout inside portaled popups (mirrors design-now aside sidepanel rules) */
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-step1,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-step2,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-step1,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-step2 {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0 10px 10px;
  width:100%;
  box-sizing:border-box;
  flex:1;
  min-height:0;
  overflow-y:auto;
  align-items:stretch;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-leftsidepanel,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-leftsidepanel {
  display:flex;
  flex-direction:column;
  gap:var(--w2i-space-md);
  border:0;
  margin-top:0;
  padding-top:0;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-leftsidepanel > div:first-of-type,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-leftsidepanel > div:first-of-type {
  width:100%;
  max-width:100%;
  margin-right:0;
  flex:1 1 auto;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-clipartwizard .w2i-categories,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-clipartwizard .w2i-categories {
  border-radius:var(--w2i-radius-xs);
  border:1px solid var(--w2i-border);
  max-height:min(52vh, 100%);
  overflow-y:auto;
  padding:var(--w2i-space-sm);
  min-height:0;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-clipartwizard .w2i-categories ul,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-clipartwizard .w2i-categories ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 10px;
  align-items:stretch;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-clipartwizard .w2i-categories ul ul,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-clipartwizard .w2i-categories ul ul {
  margin:0;
  padding-left:0;
  border-left:none;
  display:grid;
  grid-template-columns:1fr;
  gap:0.2rem 0;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-clipartwizard button.w2i-cat-btn,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-clipartwizard button.w2i-cat-btn,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-controls .w2i-font-cat-ul .w2i-cat-btn,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-controls .w2i-font-cat-ul .w2i-cat-btn {
  display:block;
  width:100% !important;
  min-height:auto !important;
  text-align:center;
  font-size:0.8125rem;
  font-weight:500;
  padding:0.45rem 0.65rem !important;
  margin:0;
  border-radius:var(--w2i-radius-xs);
  border:1px solid transparent;
  background:var(--w2i-bg) !important;
  color:var(--w2i-text) !important;
  cursor:pointer;
  box-shadow:var(--w2i-shadow-sm);
  line-height:1.35;
  text-transform:capitalize;
  letter-spacing:0.01em;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-clipartwizard .w2i-categories li:has(> button.w2i-cat-btn:not(.w2i-hidden)) > button.w2i-cat-btn,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-clipartwizard .w2i-categories li:has(> button.w2i-cat-btn:not(.w2i-hidden)) > button.w2i-cat-btn {
  font-size:1rem;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-clipartwizard .w2i-categories ul ul > li:has(> button.w2i-cat-btn:not(.w2i-hidden)) > button.w2i-cat-btn,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-clipartwizard .w2i-categories ul ul > li:has(> button.w2i-cat-btn:not(.w2i-hidden)) > button.w2i-cat-btn {
  background:transparent !important;
  color:var(--w2i-text) !important;
  font-size:0.875rem;
  border:none;
  box-shadow:none;
  padding:0.4rem 0.5rem !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-clipartwizard button.w2i-cat-btn:hover,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-clipartwizard button.w2i-cat-btn:hover,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-controls .w2i-font-cat-ul .w2i-cat-btn:hover,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-controls .w2i-font-cat-ul .w2i-cat-btn:hover {
  border-color:rgba(0, 155, 210, 0.35);
  color:var(--w2i-primary) !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-clipartwizard .w2i-categories li.w2i-selected:has(> button.w2i-cat-btn:not(.w2i-hidden)) > button.w2i-cat-btn,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-clipartwizard .w2i-categories li.w2i-selected:has(> button.w2i-cat-btn:not(.w2i-hidden)) > button.w2i-cat-btn {
  background:rgba(0, 155, 210, 0.18) !important;
  border-color:rgba(0, 155, 210, 0.35);
  color:var(--w2i-text) !important;
}
/* Popup toolbars — premium back/close (not product-column blue buttons) */
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-sidepanel-toolbar .w2i-back,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-sidepanel-toolbar .w2i-sidepanel-toolbar-close,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-controls-toolbar .w2i-controls-toolbar-back,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-controls-toolbar .w2i-controls-toolbar-close,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-sidepanel-toolbar .w2i-back,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-sidepanel-toolbar .w2i-sidepanel-toolbar-close,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-controls-toolbar .w2i-controls-toolbar-back,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-controls-toolbar .w2i-controls-toolbar-close {
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  border-radius:var(--w2i-radius-xs) !important;
  background:transparent !important;
  color:#2a3142 !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:0.9375rem !important;
  line-height:1 !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-sidepanel-toolbar .w2i-back:hover,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-sidepanel-toolbar .w2i-sidepanel-toolbar-close:hover,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-controls-toolbar .w2i-controls-toolbar-back:hover,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-controls-toolbar .w2i-controls-toolbar-close:hover,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-sidepanel-toolbar .w2i-back:hover,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-sidepanel-toolbar .w2i-sidepanel-toolbar-close:hover,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-controls-toolbar .w2i-controls-toolbar-back:hover,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-controls-toolbar .w2i-controls-toolbar-close:hover {
  background:rgba(15, 23, 42, 0.06) !important;
  color:var(--w2i-text) !important;
  border-color:transparent !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-sidepanel-toolbar .w2i-back i,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-controls-toolbar .w2i-controls-toolbar-back i,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-sidepanel-toolbar .w2i-back i,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-controls-toolbar .w2i-controls-toolbar-back i {
  font-size:0.95rem !important;
  line-height:1 !important;
  color:inherit !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-sidepanel-toolbar .w2i-sidepanel-toolbar-close span.fa,
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating .w2i-controls-toolbar .w2i-controls-toolbar-close span.fa,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-sidepanel-toolbar .w2i-sidepanel-toolbar-close span.fa,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root .w2i-controls-toolbar .w2i-controls-toolbar-close span.fa {
  margin:0 !important;
  color:var(--w2i-text-muted) !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-controls .w2i-font-categories.w2i-categories,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-controls .w2i-font-categories.w2i-categories {
  border-radius:var(--w2i-radius-xs);
  border:1px solid var(--w2i-border);
  max-height:min(52vh, 420px);
  overflow-y:auto;
  padding:var(--w2i-space-sm);
  background:#fff;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-controls .w2i-font-cat-ul,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-controls .w2i-font-cat-ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 10px;
  align-items:stretch;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-controls .w2i-font-list,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-controls .w2i-font-list {
  max-height:min(58vh, 480px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  padding:var(--w2i-space-xs) 0;
}
html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-clipartwizard div.w2i-cliparts,
html body #web2ink.w2i-sidedsgnr #web2inkdesigner > div.w2i-sidedsgnr-portal-root #w2i-clipartwizard div.w2i-cliparts {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
  gap:10px;
  min-height:120px;
}

/* Legacy fullscreen layer controls — disabled in side designer (use floating modal above) */
html body #web2ink.w2i-sidedsgnr #controls:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr #floating-controls:not(.w2i-hidden),
html body #web2ink.w2i-sidedsgnr aside.w2i-panel-tools.w2i-selected {
  position:static !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  z-index:auto !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:visible !important;
  box-shadow:none !important;
}

/* Product column buttons only — do not style designer popup buttons inside #web2inkdesigner */
div.w2i-sidedsgnr-product button,
div.w2i-sidedsgnr-product .w2i-button,
div.w2i-sidedsgnr-product input[type="button"],
div.w2i-sidedsgnr-product input[type="submit"],
div.w2i-sidedsgnr-add-text-line button,
.w2i-sidedsgnr-btn,
button.w2i-sidedsgnr-add-to-cart {
  background:#0383C8 !important;
  border:1px solid #0383C8 !important;
  color:#fff !important;
  font-weight:600 !important;
  padding:10px 16px !important;
  line-height:1.25 !important;
  cursor:pointer;
  transition:background .15s ease;
  max-width:100% !important;
}
div.w2i-sidedsgnr-product button:hover,
div.w2i-sidedsgnr-product .w2i-button:hover,
div.w2i-sidedsgnr-add-text-line button:hover,
.w2i-sidedsgnr-btn:hover,
button.w2i-sidedsgnr-add-to-cart:hover {
  background:#0570aa;
  border-color:#0570aa;
  color:#fff;
}
@media (min-width: 992px) {
  div.w2i-sidedsgnr-designer {position:sticky;top:24px;}
}

@media (max-width: 991px) {
  div.w2i-sidedsgnr-container {flex-direction:column;}
  div.w2i-sidedsgnr-container > div {width:100%;}
  div.w2i-sidedsgnr-designer {min-height:60vh;padding-left:0;}
}

/* Right product column */
section.w2i-sidedsgnr-section {padding:16px 0;border-bottom:1px solid #f2f4f7;}
section.w2i-sidedsgnr-section > header {margin-bottom:12px;display:flex;align-items:center;gap:10px;}
section.w2i-sidedsgnr-section > header > span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--w2i-sd-primary);
  color:#fff;
  font-size:14px;
  font-weight:700;
  margin-right:0;
}
section.w2i-sidedsgnr-section > header > b {font-size:16px;color:var(--w2i-sd-text);}
section.w2i-sidedsgnr-section > main {display:block;width:100%;padding-left:0;}

div.w2i-sidedsgnr-color-swatches {font-size:0;padding:4px 0;}
.w2i-sidedsgnr-swatch {
  display:inline-block;
  width:30px;
  height:30px;
  margin:3px;
  border:2px solid #ddd;
  border-radius:8px;
  cursor:pointer;
  position:relative;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.w2i-sidedsgnr-swatch > span {display:block;width:50%;height:100%;left:0;top:0;position:absolute;border-radius:6px 0 0 6px;}
.w2i-sidedsgnr-swatch.w2i-sidedsgnr-selected {border-color:var(--w2i-sd-primary);box-shadow:0 0 0 2px rgba(25,90,221,.25);}

div.w2i-sidedsgnr-sides {display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:10px;}
div.w2i-sidedsgnr-sides > div {
  margin:0;
  padding:12px 10px;
  border:2px solid var(--w2i-sd-border);
  border-radius:var(--w2i-sd-radius);
  text-align:center;
  cursor:pointer;
  background:#fff;
  transition:border-color .15s ease, background .15s ease, transform .08s ease;
}
div.w2i-sidedsgnr-sides > div:active {transform:scale(0.98);}
div.w2i-sidedsgnr-sides > div > img {display:block;margin:0 auto 8px auto;max-height:56px;width:auto;}
div.w2i-sidedsgnr-sides > div > span {display:block;font-size:13px;}

div.w2i-sidedsgnr-processes {display:flex;flex-direction:column;gap:8px;}
div.w2i-sidedsgnr-processes > div {
  margin:0;
  padding:10px 12px;
  border:1px solid var(--w2i-sd-border);
  border-radius:8px;
  background:#fff;
}
div.w2i-sidedsgnr-processes label {margin-left:8px;cursor:pointer;font-weight:500;}
.w2i-sidedsgnr-processes .process-button{max-width:100%;}

div.w2i-sidedsgnr-addons > div + div {margin-top:10px;}
div.w2i-sidedsgnr-addons > div label {display:block;margin-bottom:6px;font-weight:600;color:var(--w2i-sd-text);}
div.w2i-sidedsgnr-addons > div select {
  display:block;
  width:100%;
  padding:10px 12px;
  border:1px solid var(--w2i-sd-border);
  border-radius:8px;
  background:#fff;
}

div.w2i-sidedsgnr-qty {display:flex;flex-wrap: wrap;}
div.w2i-sidedsgnr-qty > div {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  border:1px solid var(--w2i-sd-border);
  border-radius:8px;
  background:#fff;
  max-width:100% !important;
}
div.w2i-sidedsgnr-qty > div > span {
  display:inline-block;
  min-width:72px;
  vertical-align:middle;
  margin-right:0;
  text-align:left;
  color:var(--w2i-sd-text);
}
div.w2i-sidedsgnr-qty > div > input,
div.w2i-sidedsgnr-qty > div > select {
  width:80px;
  vertical-align:middle;
  padding:8px 10px;
  border:1px solid var(--w2i-sd-border);
  border-radius:8px;
}
div.w2i-sidedsgnr-add-text-line {
  display:flex;
  border: none;
  outline: 1px solid #DEEBF7;
  border-radius: 3px;
}
div.w2i-sidedsgnr-add-text-line input[type="text"] {
  flex:1 1 auto;
  padding:10px 12px;
  border:1px solid var(--w2i-sd-border);
  min-width:0;
}
div.w2i-sidedsgnr-add-text-line button {flex:0 0 auto;white-space:nowrap;}

p.w2i-sidedsgnr-total-qty {text-transform:uppercase;margin-top:16px;margin-bottom:0;font-weight:700;color:var(--w2i-sd-text);}

section.w2i-sidedsgnr-section[data-section="summary"] {
  border-top:2px solid var(--w2i-sd-primary);
  border-bottom:0;
  background:var(--w2i-sd-primary-soft);
  border-radius:var(--w2i-sd-radius);
  padding:16px;
}
section.w2i-sidedsgnr-section[data-section="summary"] main > div {margin:6px 0;font-size:15px;}
section.w2i-sidedsgnr-section[data-section="add-to-cart"] main {padding-top:8px;}
section.w2i-sidedsgnr-section[data-section="add-to-cart"] .w2i-center {text-align:center;}
button.w2i-sidedsgnr-add-to-cart {width:100%;max-width:320px;font-size:16px;padding:14px 20px !important;}

.w2i-sidedsgnr-info {color:var(--w2i-sd-muted);margin:5px 0;font-size:13px;}

body.w2i-sidedsgnr-modal-open {overflow:hidden;}

html body #web2ink.w2i-sidedsgnr .w2i-leftsidepanel .w2i-categories ul li.w2i-clipart-cat-item,
html body #web2ink.w2i-sidedsgnr .w2i-leftsidepanel .w2i-categories ul li.w2i-clipart-cat-item ul li
{border: none !important;border-left: 0px !important;}
html body #web2ink.w2i-sidedsgnr .w2i-leftsidepanel .w2i-categories ul li.w2i-clipart-cat-item:hover,
html body #web2ink.w2i-sidedsgnr .w2i-leftsidepanel .w2i-categories ul li.w2i-clipart-cat-item .w2i-cat-btn:hover{
  background: transparent !important;
  border:none !important;
}
html body #web2ink.w2i-sidedsgnr .w2i-leftsidepanel .w2i-categories ul li.w2i-clipart-cat-item ul li:hover{background: var(--w2i-bg) !important;}

html body #web2ink.w2i-sidedsgnr .w2i-categories li:has(> button.w2i-cat-btn:not(.w2i-hidden))>button.w2i-cat-btn:hover{
  background: var(--w2i-bg) !important;
  color: var(--w2i-primary) !important;
    transition: .4s all ease;
}

html body #web2ink.w2i-sidedsgnr ul.w2i-clipart-global-search-suggest li{
  border: none !important;
}

html body #web2ink.w2i-sidedsgnr .w2i-sidedsgnr-floating #w2i-clipartwizard div.w2i-cliparts{margin-top: 10px !important;}