/**
 * Studio2 header — replaces the standard site header + the old
 * .studio-menu-bar. Reuses styles.css's shared tokens (--ink, --muted,
 * --line, --primary, etc.) and its already-imported Fredoka/Nunito Sans
 * fonts; only adds the few tokens this component needs that aren't
 * already shared (additive to :root, doesn't touch any existing property).
 */
:root {
  --s2h-primary-wash: #f1edf9;
  --s2h-shadow-sm: 0 2px 8px rgba(24, 27, 32, 0.1);
  --s2h-shadow-md: 0 8px 24px rgba(24, 27, 32, 0.16);
  --s2h-shadow-lg: 0 18px 50px rgba(24, 27, 32, 0.24);
}

.studio2-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 8px;
  height: 52px;
  flex-shrink: 0;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-family: 'Nunito Sans', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.studio2-header .icon {
  width: 36px;
  height: 36px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.studio2-header .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.studio2-header .icon-btn:hover { background: var(--s2h-primary-wash); }
.studio2-header .icon-btn:disabled { opacity: 0.32; cursor: default; }
.studio2-header .icon-btn:disabled:hover { background: transparent; }

/* Undo/Redo buttons - restore original sizing */
#undoBtn, #redoBtn {
  width: 34px;
  height: 34px;
}
#undoBtn .icon, #redoBtn .icon {
  width: 20px;
  height: 20px;
}
.studio2-header button:focus-visible,
.studio2-header a:focus-visible,
.studio2-header [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- left group + its dropdowns ----------------------------------------- */
.s2h-left {
  position: relative; /* containing block for .s2h-menu below */
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.s2h-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ink);
  font-family: 'Fredoka', 'Nunito Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.s2h-back-link:hover {
  background: var(--s2h-primary-wash);
}

.s2h-back-link .icon {
  width: 16px;
  height: 16px;
}

.s2h-back-link {
  align-items: center;
  align-self: center;
  box-sizing: border-box;
  color: var(--ink);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  height: 34px;
  justify-content: center;
  line-height: 1;
  padding: 0 8px 0 5px;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

.s2h-back-link:hover {
  background: var(--s2h-primary-wash);
  border-radius: 8px;
}

.s2h-back-arrow {
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  box-sizing: border-box;
  display: block;
  flex: 0 0 8px;
  height: 8px;
  margin-left: 3px;
  margin-right: 2px;
  transform: rotate(45deg);
  width: 8px;
}

.s2h-back-link > span {
  display: block;
  line-height: 1;
}

/* Qualified with .studio2-header (matching .studio2-header .icon-btn's own
   specificity, and beating .s2h-product/.s2h-divider/.s2h-preview-btn's
   single-class rules) so these actually win the display property --
   .s2h-mobile-only alone (single class) loses that fight to
   .studio2-header .icon-btn regardless of which comes later in the file,
   the same specificity trap documented repeatedly elsewhere in this app's
   CSS. */
.studio2-header .s2h-mobile-only { display: none; }
@media (max-width: 600px) {
  .studio2-header .s2h-mobile-only { display: inline-flex; }
  .studio2-header .s2h-desktop-only { display: none; }
}

.s2h-product {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 0;
  font-family: 'Fredoka', 'Nunito Sans', sans-serif;
  color: var(--ink);
}
.s2h-product:hover { background: var(--s2h-primary-wash); }

.s2h-product-name {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.s2h-divider { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }

/* Shared by the project menu and the mobile hamburger menu -- same visual
   treatment, different trigger and different item sets. */
.s2h-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  width: 224px;
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--s2h-shadow-lg);
  padding: 6px;
  /* Clear the canvas rulers (z-index: 99999) on the mobile Studio. */
  z-index: 100001;
}
.s2h-menu[hidden] { display: none; }

.s2h-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}
.s2h-menu-item:hover { background: var(--s2h-primary-wash); color: var(--primary); }
.s2h-menu-item .icon { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.s2h-menu-item:hover .icon { color: var(--primary); }
.s2h-menu-item:disabled { opacity: 0.4; cursor: default; }
.s2h-menu-item:disabled:hover { background: transparent; color: var(--ink); }
.s2h-menu-item:disabled:hover .icon { color: var(--muted); }

.s2h-menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }

.s2h-menu-label {
  padding: 8px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- brand: true grid-centered ------------------------------------------ */
.s2h-brand {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  min-width: 0;
}
.s2h-brand-logo { height: 30px; width: auto; display: block; border-radius: 6px; }
@media (max-width: 900px) {
  .s2h-brand-logo { height: 24px; }
}

/* --- right group: save status + preview --------------------------------- */
.s2h-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 14px; }

/* Cloud with a small circular badge overlapping its lower-right edge,
   holding two crossfaded layers (check / spinner) rather than one icon
   drawn inside the cloud body -- reads more clearly at this size and
   matches a standard "sync status" glyph. The continuous spin lives on a
   separate inner element from the crossfade (opacity+scale) transform,
   since a CSS animation on a property fully overrides any transition
   targeting that same property on the same element. */
.s2h-save {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
}
.s2h-save:hover, .s2h-save:focus-visible { background: var(--s2h-primary-wash); }
.s2h-save:disabled { cursor: not-allowed; opacity: 0.55; }
.s2h-save:disabled:hover { background: transparent; }

.s2h-save-icon { position: relative; display: inline-flex; width: 30px; height: 30px; top: -5px;}
/* assets/icons/cloud.svg is a filled outline shape (not a stroked line
   like the header's other icons), and wider than tall (viewBox
   499.2632x324.8975) -- fills its 22x22 box via the SVG's default
   preserveAspectRatio (xMidYMid meet), centered with a little breathing
   room top/bottom rather than touching every edge. */
.s2h-save-icon .cloud-path { fill: var(--muted); stroke: none; }

/* Badge centered on the baseline (bottom center) of the cloud */
.s2h-save-badge {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-30%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(24, 27, 32, 0.5);
  transition: background 0.2s ease;
}
/* Unsaved state: red badge background */
.s2h-save:not(.is-saved):not(.is-saving) .s2h-save-badge {
  background: #ef4444;
}
/* Saved state: green badge background */
.s2h-save.is-saved .s2h-save-badge {
  background: #2f9e5c;
}
/* Saving state: blue badge background */
.s2h-save.is-saving .s2h-save-badge {
  background: #3b82f6;
}
.s2h-save:disabled:not(.is-saved):not(.is-saving) .s2h-save-badge {
  background: var(--muted);
}
.s2h-save:hover .s2h-save-badge, .s2h-save:focus-visible .s2h-save-badge {
  box-shadow: 0 0 0 2px var(--s2h-primary-wash), 0 0 0 3px rgba(24, 27, 32, 0.08);
}

.badge-check, .badge-spinner-wrap {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  transition: opacity 0.2s ease, transform 0.2s ease, stroke 0.2s ease;
}
.badge-check { stroke: var(--ink); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 1; transform: scale(1); }
/* Saved state: white checkmark on green background */
.s2h-save.is-saved .badge-check { stroke: #fff; }
/* Unsaved state: white checkmark on red background */
.s2h-save:not(.is-saved):not(.is-saving) .badge-check { stroke: #fff; }
.s2h-save.is-saving .badge-check { opacity: 0; transform: scale(0.4) rotate(45deg); }

.badge-spinner-wrap { opacity: 0; transform: scale(0.4); }
.s2h-save.is-saving .badge-spinner-wrap { opacity: 1; transform: scale(1); }

.badge-spinner { display: block; width: 100%; height: 100%; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; transform-origin: 50% 50%; }
.s2h-save.is-saving .badge-spinner { animation: s2hSpin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .s2h-save.is-saving .badge-spinner { animation: none; } }
@keyframes s2hSpin { to { transform: rotate(360deg); } }

.s2h-save-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #1c2027;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: var(--s2h-shadow-md);
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.s2h-save:hover .s2h-save-tooltip, .s2h-save:focus-visible .s2h-save-tooltip { opacity: 1; visibility: visible; }

.s2h-preview-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.s2h-preview-btn:hover { border-color: var(--primary); color: var(--primary); }

/* #addToCartBtn (real element, relocated here by header.js) was sized for
   a full-width sidebar CTA -- scale it down to fit the header's 52px
   height. Two-class selector to reliably beat .button.success's own
   padding/font-size (same specificity, and this loads after styles.css).
   Its old green ".success" color was scoped to ".panel-cta .button.success"
   in styles.css -- moving it out of .panel-cta silently dropped that
   background entirely, leaving just the browser's default grey button
   face. Recolored to the app's primary purple (matching ".button.primary"
   in styles.css) instead of restoring green, since this is now the
   header's one primary action, the same role/color "Add to Cart" plays
   throughout the rest of the site. */
.s2h-right .button.success {
  min-height: 0;
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
  background: var(--primary);
  color: #fff;
}
.s2h-right .button.success:hover:not(:disabled) {
  background: var(--primary-dark);
}

/* --- a minimal stub modal for Duplicate design / PDF proof / Preview --
   these three don't have real backends yet (confirmed before building);
   this is intentionally plain, not styled as a polished feature. */
.s2h-stub-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 27, 32, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: 20px;
}
.s2h-stub-overlay[hidden] { display: none; }
.s2h-stub-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--s2h-shadow-lg);
  width: min(360px, 100%);
  padding: 20px;
  font-family: 'Nunito Sans', sans-serif;
}
.s2h-stub-card h3 { font-family: 'Fredoka', sans-serif; margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.s2h-stub-card p { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.s2h-stub-card .button { width: 100%; }

/* --- rename modal --------------------------------------------------------- */
.s2h-rename-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 11px;
  font-size: 13.5px;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.s2h-rename-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.s2h-rename-actions { display: flex; justify-content: flex-end; gap: 8px; }