/**
 * Picture Frame Template Generator — page template styles.
 *
 * Scoped under .mwp-frame-page / #mwp-frame. Consumes theme tokens.
 * Single-piece frame builder: frame shape + draggable hole shape.
 */

/* ── Page shell ─────────────────────────────────────────────────────── */
.mwp-frame-page{
  --mwp-font-label: 'VolumeTCSans-RusticSolid', sans-serif;
  --mwp-texture: url('../images/clay-texture.jpg');
  background: var(--color-cream);
  overflow-x: clip;
}
body:not(.home) .mwp-frame-page{ padding-top: 0; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.mwp-frame-hero{
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--color-charcoal);
  padding-top: calc(var(--space-2xl) + 72px);
  padding-bottom: calc(var(--space-2xl) + 90px);
}
.mwp-frame-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mwp-texture) center / cover;
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.mwp-frame-hero > .container{ position: relative; z-index: 2; }
.mwp-frame-hero .section-label{
  display: block;
  font-size: clamp(1rem, 3.4vw, 1.5rem);
  line-height: 1.25;
  color: var(--color-terracotta-light);
  margin-bottom: var(--space-xs);
}
.mwp-frame-hero .page-title{
  font-family: var(--font-display);
  font-size: var(--hero-title);
  font-weight: 400;
  line-height: 1;
  color: var(--color-warm-white);
  margin-bottom: var(--space-sm);
  overflow-wrap: break-word;
}
.mwp-frame-hero .page-title em{ font-style: italic; color: var(--color-terracotta-light); }
.mwp-frame-hero p{
  max-width: 560px;
  margin: 0 auto;
  font-size: clamp(0.875rem, 0.7rem + 0.44vw, 1.05rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-light-gray);
}

/* ── Card overlaps up into the dark band ────────────────────────────── */
.mwp-frame-wrap{
  position: relative;
  z-index: 3;
  margin-top: -90px;
  padding-bottom: var(--space-2xl);
}
.mwp-frame-wrap .container{ max-width: 1160px; }

#mwp-frame{
  color: var(--color-charcoal);
  font-family: var(--font-body);
  line-height: 1.6;
}
#mwp-frame *{ box-sizing: border-box; }

#mwp-frame .mwp-frame-card{
  background: var(--color-warm-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow:
    0 2px 4px rgba(46,42,38,.06),
    0 18px 40px -10px rgba(46,42,38,.22),
    0 48px 80px -32px rgba(46,42,38,.28);
}

#mwp-frame .mwp-frame-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
/* Keep the live preview pinned in view while the maker scrolls the controls /
   tabs alongside it. The grid item itself sticks; align-items:start above lets it
   settle its own height so sticky has room to travel. */
#mwp-frame .mwp-frame-col{
  /* A grid item's automatic minimum size is its min-content width, and this
     column is not itself a scroll container — so a zoomed (oversized) preview
     would push the 1fr track wider and give the whole PAGE a horizontal
     scrollbar. Pinning the minimum to 0 lets the track keep its share and makes
     the preview box scroll internally, which is the point of zooming. */
  min-width: 0;
  position: sticky;
  /* Clear the fixed site header (72px) plus breathing room so the pinned preview
     sits below it instead of tucking under the header. */
  top: calc(72px + 1.5rem);
  align-self: start;
}
@media (max-width: 860px){
  #mwp-frame .mwp-frame-grid{ grid-template-columns: 1fr; gap: 0; }
  /* On mobile the two columns interleave into one flow (display:contents), so the
     preview can't be sticky — reset it back to normal flow. */
  #mwp-frame .mwp-frame-col{ position: static; display: contents; }
  #mwp-frame .mwp-frame-field{ order: 1; }
  #mwp-frame .mwp-frame-previewlbl--shape{ order: 3; }
  #mwp-frame #mwp-frame-shape-preview{ order: 4; }
  #mwp-frame .mwp-frame-zoom{ order: 4; }
  #mwp-frame .mwp-zoom-hint{ order: 4; }
  #mwp-frame .mwp-frame-legend{ order: 4; }
  /* Same order as the legend it follows — equal orders keep DOM order, so the
     toggles stay put instead of floating to the top of the mobile flow. */
  #mwp-frame .mwp-frame-viewopts{ order: 4; }
  #mwp-frame .mwp-frame-hole-meta{ order: 5; }
  #mwp-frame .mwp-frame-actions{ order: 6; }
  #mwp-frame .mwp-frame-callout{ order: 7; }
}

/* ── Fields ─────────────────────────────────────────────────────────── */
#mwp-frame label{
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin: 0 0 .4rem;
}
#mwp-frame .mwp-frame-hint{
  font-weight: 400;
  font-size: .78rem;
  color: var(--color-warm-gray);
}
/* "No room for another opening" notice above the opening panel. Only ever shown
   when Add opening is refused, so it needs to read as an explanation rather than
   an error — hence the warm sand tint rather than a red alert. */
#mwp-frame .mwp-holes-note{
  margin: .1rem 0 .5rem;
  padding: .45rem .6rem;
  border-radius: 6px;
  background: #f4ece1;
  color: #7a5c3e;
  font-size: .78rem;
  line-height: 1.35;
}
#mwp-frame .mwp-holes-note[hidden]{ display: none; }
#mwp-frame .mwp-frame-val{
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-clay);
  vertical-align: -2px;
}
#mwp-frame .mwp-frame-field{ margin-bottom: var(--space-md); }
/* Aspect-ratio lock — a toggleable padlock icon button, matching the wall-plate
   (altar) tutorial tool's lock. Closed padlock when locked (filled terracotta),
   open padlock when unlocked. */
#mwp-frame .mwp-frame-lockrow{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
#mwp-frame .mwp-frame-lock-btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  color: var(--color-warm-gray);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
#mwp-frame .mwp-frame-lock-btn:hover{
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}
#mwp-frame .mwp-frame-lock-btn.is-locked{
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: #fff;
}
/* Show the closed padlock when locked, the open one when unlocked. */
#mwp-frame .mwp-frame-lock-btn .mwp-frame-lock-open{ display: none; }
#mwp-frame .mwp-frame-lock-btn .mwp-frame-lock-closed{ display: block; }
#mwp-frame .mwp-frame-lock-btn:not(.is-locked) .mwp-frame-lock-open{ display: block; }
#mwp-frame .mwp-frame-lock-btn:not(.is-locked) .mwp-frame-lock-closed{ display: none; }
#mwp-frame .mwp-frame-lock-text{
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-clay);
  user-select: none;
}
/* Quarter-turn frame rotation — sits under the shape button. Matches the lock
   row's button sizing so the two control clusters line up. */
#mwp-frame .mwp-frame-rotrow{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
#mwp-frame .mwp-frame-rot-btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  color: var(--color-warm-gray);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
#mwp-frame .mwp-frame-rot-btn:hover{
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}
#mwp-frame .mwp-frame-rot-btn:active{
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: #fff;
}
#mwp-frame .mwp-frame-rot-text{
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-clay);
  user-select: none;
}
#mwp-frame input[type=range]{
  width: 100%;
  accent-color: var(--color-terracotta);
  margin-top: .5rem;
}
/* Slider + photo-edge tick marker */
#mwp-frame .mwp-frame-slider{ position: relative; }
#mwp-frame .mwp-frame-slider input[type=range]{ display: block; }
#mwp-frame .mwp-frame-tick{
  position: absolute;
  top: .65rem;
  left: 0;
  width: 1px;
  height: .55rem;
  background: var(--color-warm-gray);
  border-radius: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .4;
}
#mwp-frame select{
  width: 100%;
  padding: .5rem;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--color-charcoal);
  background: var(--color-warm-white);
  margin-top: .5rem;
  cursor: pointer;
}
#mwp-frame select:focus{
  outline: none;
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 2px rgba(196,112,75,.1);
}

/* ── Orientation toggle ─────────────────────────────────────────────── */
#mwp-frame .mwp-frame-orient-label{
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin: 0 0 .4rem;
}
/* Numbered step badge — marks the top-level flow: 1 Frame shape, 2 Frame size,
   3 Photo openings. Purely a wayfinding cue for the control column. */
#mwp-frame .mwp-frame-stepnum{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  margin-right: .4em;
  border-radius: 50%;
  background: var(--color-terracotta);
  color: #fff;
  font-size: .8em;
  font-weight: 700;
  line-height: 1;
}
#mwp-frame .mwp-frame-step .mwp-frame-orient-label{
  font-size: .95rem;
  letter-spacing: .01em;
}
#mwp-frame .mwp-orient-toggle{
  display: flex;
  gap: .5rem;
}
#mwp-frame .mwp-orient-btn{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .7rem .5rem;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  background: var(--color-warm-white);
  color: var(--color-warm-gray);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
#mwp-frame .mwp-orient-btn svg{ display: block; }
#mwp-frame .mwp-orient-btn:hover{
  border-color: var(--color-terracotta);
  color: var(--color-clay);
}
#mwp-frame .mwp-orient-btn:focus-visible{
  outline: none;
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 2px rgba(196,112,75,.1);
}
#mwp-frame .mwp-orient-btn.is-sel{
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
  background: rgba(196,112,75,.06);
}
/* Per-opening orientation toggle sits inside the warm-white folder panel, so give
   its buttons a cream resting fill to separate them from the panel, and a clear
   terracotta-tinted selected state. Slightly more compact than the global one. */
#mwp-frame .mwp-hole-orient-toggle{ gap: .5rem; margin-top: .4rem; }
#mwp-frame .mwp-hole-orient-btn{
  padding: .5rem .5rem;
  background: var(--color-cream);
}
#mwp-frame .mwp-hole-orient-btn svg{ width: 28px; height: 28px; }
#mwp-frame .mwp-hole-orient-btn:hover{ background: var(--color-warm-white); }
#mwp-frame .mwp-hole-orient-btn.is-sel{
  background: rgba(196,112,75,.08);
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

/* ── Custom dims row ─────────────────────────────────────────────────── */
#mwp-frame .mwp-frame-sublabel{
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: var(--color-warm-gray);
  margin: 0 0 .2rem;
}
#mwp-frame .mwp-frame-custom-row{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
}
#mwp-frame .mwp-frame-custom-input{ flex: 1; }
#mwp-frame .mwp-frame-custom-input input[type=number]{
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  color: var(--color-charcoal);
  background: var(--color-warm-white);
}
#mwp-frame .mwp-frame-custom-input input[type=number]:focus{
  outline: none;
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 2px rgba(196,112,75,.1);
}
#mwp-frame .mwp-frame-custom-x{
  font-size: 1rem;
  color: var(--color-warm-gray);
  flex: 0 0 auto;
  padding-top: 1.2rem; /* align with inputs */
}

/* ── Preview panel ───────────────────────────────────────────────────── */
#mwp-frame label.mwp-frame-previewlbl{ margin-top: var(--space-md); margin-bottom: .625rem; }
#mwp-frame .mwp-frame-col > .mwp-frame-previewlbl:first-child{ margin-top: 0; }
#mwp-frame .mwp-frame-preview{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  min-height: 300px;
  cursor: move;
  user-select: none;
  touch-action: none;
}
#mwp-frame .mwp-frame-preview--shape{ min-height: 300px; }
#mwp-frame .mwp-frame-preview svg{ max-width: 100%; height: auto; display: block; }
#mwp-frame .mwp-frame-preview--shape svg{ max-height: 320px; }

/* Zoomed: the box becomes a scrollable viewport and the SVG is free to exceed
   it. The caps above have to go, otherwise they'd shrink the SVG straight back
   down and the zoom would do nothing. JS sets the explicit pixel size. */
#mwp-frame .mwp-frame-preview.is-zoomed{
  overflow: auto;
  align-items: flex-start;
  justify-content: flex-start;
  /* Never let the oversized SVG stretch the box itself — it must stay put and
     scroll its content, or zooming would just widen the layout. */
  min-width: 0;
  max-width: 100%;
  max-height: 340px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
#mwp-frame .mwp-frame-preview.is-zoomed svg,
#mwp-frame .mwp-frame-preview--shape.is-zoomed svg{
  max-width: none;
  max-height: none;
  /* The preview box is a flex container, so the SVG is a flex item and would be
     shrunk back down to fit — silently undoing the zoom on the horizontal axis.
     Refuse to shrink and let the box scroll instead. */
  flex: none;
  margin: auto;   /* stay centred while the frame is still smaller than the box */
}

/* ── Hole position meta row ──────────────────────────────────────────── */
#mwp-frame .mwp-frame-hole-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .5rem;
  flex-wrap: wrap;
}
#mwp-frame .mwp-hole-reset-btn{
  padding: .25rem .7rem;
  font-size: .78rem;
  font-family: var(--mwp-font-label);
  color: var(--color-warm-gray);
  background: none;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
#mwp-frame .mwp-hole-reset-btn:hover{
  color: var(--color-clay);
  border-color: var(--color-clay);
}

/* ── Photo-opening tabs + add/remove ─────────────────────────────────────── */
/* Folder-tab styling: tabs sit on a shared baseline, the active tab lifts and
   merges into the panel below it (no bottom border, matching background) so it
   reads like a manila file folder. The whole control is wrapped in a bordered
   panel so the "active tab connects to its contents" metaphor holds. */
#mwp-frame .mwp-holes-field{
  padding-bottom: 0;
}
/* The folder: a tab strip whose active tab fuses into the panel body below.
   Tuned to the theme — warm-white body, soft 16px radii, hairline sand borders
   and a layered shadow so it reads like the site's cards rather than a boxy
   browser tab strip. */
#mwp-frame .mwp-holes-folder{
  margin-top: .6rem;
}
/* Tab row: the opening tabs on the left, the Add-opening text button on the
   right, sharing the baseline so the button aligns with the tabs. */
#mwp-frame .mwp-holes-tabrow{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  position: relative;
  z-index: 3;
}
#mwp-frame .mwp-holes-tabs{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .35rem;
  position: relative;
  /* Must sit above the panel (z-index 2) so the active tab's seam cover can
     paint over the panel's top border. */
  z-index: 3;
}
#mwp-frame .mwp-hole-tab{
  position: relative;
  margin-bottom: -2px;                 /* overlap the body's top border to fuse */
  padding: .5rem 1.15rem .55rem;
  font-size: .82rem;
  font-family: var(--mwp-font-label);
  letter-spacing: .01em;
  color: var(--color-warm-gray);
  background: var(--color-cream);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
#mwp-frame .mwp-hole-tab:hover{
  color: var(--color-clay);
  background: var(--color-warm-white);
}
#mwp-frame .mwp-hole-tab:focus-visible{
  outline: none;
  color: var(--color-clay);
  box-shadow: 0 0 0 2px rgba(196,112,75,.18);
}
#mwp-frame .mwp-hole-tab.is-active{
  color: var(--color-charcoal);
  font-weight: 600;
  background: var(--color-warm-white);
  border-color: var(--color-sand);
  /* Open the active tab straight into the panel with no seam. */
  border-bottom: none;
  z-index: 3;
  box-shadow: 0 -3px 10px -6px rgba(46,42,38,.18);
}
/* Warm-white slab that overlaps the panel's top border directly beneath the
   active tab, erasing the seam line while the panel keeps its top border under
   every other tab. Sits above the panel (z-index 3 > panel's 2). */
#mwp-frame .mwp-hole-tab.is-active::after{
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 6px;
  background: var(--color-warm-white);
}
/* Folder body — the panel the active tab connects to. */
#mwp-frame .mwp-holes-panel{
  position: relative;
  z-index: 2;
  padding: 1.1rem 1.25rem .75rem;
  background: var(--color-warm-white);
  border: 1px solid var(--color-sand);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  box-shadow:
    0 1px 2px rgba(46,42,38,.04),
    0 12px 28px -18px rgba(46,42,38,.22);
}
#mwp-frame .mwp-holes-panel > .mwp-frame-field:last-child{
  padding-bottom: 0;
  margin-bottom: 0;
}
/* Add opening — a quiet text button with a + icon, sitting on the tab row to the
   right of the tabs. Reads as an inline action, not a filled CTA, so it doesn't
   compete with the tabs beside it. */
#mwp-frame .mwp-hole-add-btn{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: 2px;                  /* line the text up with the tab labels */
  padding: .4rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--mwp-font-label);
  color: var(--color-terracotta);
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, opacity .2s ease;
}
#mwp-frame .mwp-hole-add-btn .mwp-hole-add-icon{
  flex: none;
}
#mwp-frame .mwp-hole-add-btn:hover:not(:disabled){
  color: var(--color-clay);
  background: var(--color-cream);
}
#mwp-frame .mwp-hole-add-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(196,112,75,.22);
}
#mwp-frame .mwp-hole-add-btn:disabled{
  opacity: .4;
  cursor: default;
}

/* Remove opening — now lives at the bottom of the tab panel, as a quiet outline
   button that only acts on the opening currently being edited. */
#mwp-frame .mwp-holes-panel-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--color-sand);
}
#mwp-frame .mwp-hole-remove-btn{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem 1.05rem;
  font-size: .8rem;
  font-weight: 500;
  font-family: var(--mwp-font-label);
  color: var(--color-warm-gray);
  background: none;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
#mwp-frame .mwp-hole-remove-btn:hover:not(:disabled){
  color: var(--color-clay);
  border-color: var(--color-clay);
}
#mwp-frame .mwp-hole-remove-btn:disabled{
  opacity: .4;
  cursor: default;
}

/* ── Photo placeholder note ──────────────────────────────────────────────── */
#mwp-frame .mwp-photo-note{
  margin-top: .6rem;
}

/* ── Preview legend ──────────────────────────────────────────────────────── */
#mwp-frame .mwp-frame-legend{
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
}
#mwp-frame .mwp-frame-legend__item{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: #6B635B;
}
#mwp-frame .mwp-frame-legend__swatch{
  flex: none;
}

/* ── Preview photo upload ────────────────────────────────────────────────────
   The real <input type="file"> is visually hidden (not display:none, so it stays
   focusable and keyboard-reachable); its <label> is the visible button. */
#mwp-frame .mwp-photo-upload__row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
#mwp-frame .mwp-photo-upload__input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#mwp-frame .mwp-photo-upload__btn{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .45rem .8rem;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-charcoal);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#mwp-frame .mwp-photo-upload__btn:hover,
#mwp-frame .mwp-photo-upload__input:focus-visible + .mwp-photo-upload__btn{
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}
#mwp-frame .mwp-photo-upload__clear{
  padding: .45rem .7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: none;
  font-size: .8rem;
  color: var(--color-warm-gray);
  cursor: pointer;
  text-decoration: underline;
}
#mwp-frame .mwp-photo-upload__clear:hover{ color: #C0392B; }
#mwp-frame .mwp-photo-upload__clear[hidden]{ display: none; }
#mwp-frame .mwp-photo-upload__name{
  margin: .35rem 0 0;
  overflow-wrap: anywhere;
}
#mwp-frame .mwp-photo-upload__name:empty{ display: none; }

/* ── Preview options ─────────────────────────────────────────────────────────
   Checkboxes that hide the on-screen guides. The classes land on the preview
   box (which outlives each re-render), so the guides stay in the SVG and are
   just switched off visually — nothing about the template geometry changes. */
#mwp-frame .mwp-frame-viewopts{
  margin: .55rem 0 0;
  padding: .5rem .7rem .6rem;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
}
#mwp-frame .mwp-frame-viewopts__title{
  padding: 0 .3rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
}
#mwp-frame .mwp-frame-viewopt{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: #6B635B;
  cursor: pointer;
  user-select: none;
}
#mwp-frame .mwp-frame-viewopt input{
  flex: none;
  margin: 0;
  accent-color: var(--color-terracotta);
  cursor: pointer;
}
#mwp-frame .mwp-frame-preview.is-hide-grid .mwp-fp-grid,
#mwp-frame .mwp-frame-preview.is-hide-photobox .mwp-fp-footprint{
  display: none;
}

/* ── Preview zoom ────────────────────────────────────────────────────────── */
#mwp-frame .mwp-frame-zoom{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
#mwp-frame .mwp-frame-zoom #mwp-zoom{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  accent-color: var(--color-terracotta);
  cursor: pointer;
}
#mwp-frame .mwp-zoom-btn{
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--color-warm-gray);
  background: none;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
#mwp-frame .mwp-zoom-btn:hover{
  color: var(--color-terracotta);
  border-color: var(--color-terracotta);
}
#mwp-frame .mwp-zoom-val{
  flex: none;
  min-width: 3.25rem;      /* reserve room for "100%"–"400%" so nothing shifts */
  text-align: right;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-warm-gray);
}
#mwp-frame .mwp-zoom-reset{
  flex: none;
  padding: .25rem .7rem;
  font-size: .78rem;
  font-family: var(--mwp-font-label);
  color: var(--color-warm-gray);
  background: none;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
#mwp-frame .mwp-zoom-reset:hover{
  color: var(--color-terracotta);
  border-color: var(--color-terracotta);
}
#mwp-frame .mwp-zoom-hint{ margin-top: .35rem; }

/* ── Hole-too-big warning ────────────────────────────────────────────────── */
#mwp-frame .mwp-hole-warning{
  margin-top: .5rem;
  color: #C0392B;
  font-weight: 500;
}

/* ── Print button ────────────────────────────────────────────────────── */
#mwp-frame .mwp-frame-actions{ margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: .6rem; }
#mwp-frame .mwp-frame-print{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex: 1 1 220px;
  padding: .8rem 1.8rem;
  background: var(--color-terracotta);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--mwp-font-label);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all .3s ease;
}
#mwp-frame .mwp-frame-print:hover{
  background: var(--color-terracotta-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(196,112,75,.15);
}
#mwp-frame .mwp-frame-download{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex: 1 1 180px;
  padding: .8rem 1.4rem;
  background: #fff;
  color: var(--color-terracotta);
  border: 1.5px solid var(--color-terracotta);
  border-radius: var(--radius-lg);
  font-family: var(--mwp-font-label);
  font-size: 1.05rem;
  cursor: pointer;
  transition: all .3s ease;
}
#mwp-frame .mwp-frame-download:hover{ background: var(--color-cream); border-color: var(--color-clay); color: var(--color-clay); }

/* ── Callout ─────────────────────────────────────────────────────────── */
#mwp-frame .mwp-frame-callout{
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: var(--color-sage-light);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  font-size: .82rem;
  line-height: 1.6;
  color: #414A38;
}
#mwp-frame .mwp-frame-callout__icon{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-sage);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
}
#mwp-frame .mwp-frame-callout strong{ color: var(--color-charcoal); }

/* ── Shape trigger buttons (frame + hole) ────────────────────────────── */
#mwp-frame .mwp-frame-shapebtn{
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  text-align: left;
  padding: .7rem .9rem;
  background: var(--color-warm-white);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
#mwp-frame .mwp-frame-shapebtn:hover{
  border-color: var(--color-terracotta);
  box-shadow: 0 2px 8px -4px rgba(196,112,75,.3);
}
#mwp-frame .mwp-frame-shapebtn:focus-visible{
  outline: none;
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 2px rgba(196,112,75,.1);
}
#mwp-frame .mwp-frame-shapebtn-icon{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  color: var(--color-clay);
}
#mwp-frame .mwp-frame-shapebtn-icon svg{ display: block; width: 44px; height: 44px; }
#mwp-frame .mwp-frame-shapebtn-meta{
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
#mwp-frame .mwp-frame-shapebtn-name{
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--color-charcoal);
}
#mwp-frame .mwp-frame-shapebtn-cta{
  font-size: .78rem;
  color: var(--color-terracotta);
}

/* ── Shape gallery modals (frame + hole) ─────────────────────────────── */
body.mwp-frame-modalopen{ overflow: hidden; }
.mwp-frame-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.mwp-frame-modal[hidden]{ display: none; }
.mwp-frame-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(46,42,38,.55);
  backdrop-filter: blur(2px);
}
.mwp-frame-modal__panel{
  position: relative;
  width: min(680px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-warm-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 24px 60px -12px rgba(46,42,38,.4);
}
.mwp-frame-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .25rem;
}
.mwp-frame-modal__head h2{
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-charcoal);
  margin: 0;
}
.mwp-frame-modal__close{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-warm-gray);
  background: none;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.mwp-frame-modal__close:hover{
  color: var(--color-clay);
  border-color: var(--color-clay);
}
.mwp-frame-modal__sub{
  font-size: .85rem;
  line-height: 1.5;
  color: var(--color-warm-gray);
  margin: 0 0 var(--space-sm);
}

/* ── Shape pickers (frame + hole) — render inside the modals ─────────── */
/* Both pickers are categorised galleries: a header + a thumbnail grid per
   group. The container is a plain block; the grid lives on .mwp-frame-galgrid. */
#mwp-frame .mwp-frame-shape-picker,
#mwp-frame .mwp-hole-shape-picker{ margin-top: .625rem; }
#mwp-frame .mwp-frame-galgroup{
  font-family: var(--mwp-font-label);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  margin: var(--space-md) 0 .5rem;
}
#mwp-frame .mwp-frame-galgroup:first-child{ margin-top: .25rem; }
#mwp-frame .mwp-frame-galgrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-sm);
}
#mwp-frame .mwp-frame-shape-btn,
#mwp-frame .mwp-hole-shape-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: var(--space-sm);
  background: var(--color-cream);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--mwp-font-label);
  font-size: .82rem;
  color: var(--color-charcoal);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
#mwp-frame .mwp-frame-shape-btn:hover,
#mwp-frame .mwp-hole-shape-btn:hover{ transform: translateY(-1px); }
#mwp-frame .mwp-frame-shape-btn.is-sel,
#mwp-frame .mwp-hole-shape-btn.is-sel{
  border-color: var(--color-terracotta);
  box-shadow: 0 2px 10px -4px rgba(196,112,75,.4);
  color: var(--color-clay);
  font-weight: 600;
}
#mwp-frame .shape-thumb{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--color-warm-gray);
}
#mwp-frame .mwp-frame-shape-btn.is-sel .shape-thumb,
#mwp-frame .mwp-hole-shape-btn.is-sel .shape-thumb{ color: var(--color-terracotta); }
#mwp-frame .shape-thumb svg{ display: block; }
.shape-name{
  display: block;
  text-align: center;
  word-wrap: break-word;
}

/* ── Footer link ─────────────────────────────────────────────────────── */
#mwp-frame .mwp-frame-foot{
  text-align: center;
  font-size: .82rem;
  color: var(--color-warm-gray);
  margin-top: var(--space-lg);
}
#mwp-frame .mwp-frame-foot a{
  color: var(--color-clay);
  font-weight: 600;
  text-decoration: none;
}
#mwp-frame .mwp-frame-foot a:hover{ text-decoration: underline; }

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 640px){
  .mwp-frame-hero{
    padding-top: calc(var(--space-xl) + 72px);
    padding-bottom: calc(var(--space-xl) + 80px);
  }
  .mwp-frame-wrap{
    margin-top: -80px;
    padding-bottom: var(--space-xl);
  }
  #mwp-frame .mwp-frame-card{
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }
  #mwp-frame .mwp-frame-galgrid{
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}