/* ============================================================
   CLOUVI STUDIOS — modal.css (Two-Column Editorial Edition)
   ============================================================ */

/* Bulletproof background scroll lock */
html.pm-lock, body.pm-lock {
  overflow: hidden !important;
  height: 100vh !important;
  width: 100% !important;
}

.pm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  justify-content: flex-end;
  align-items: stretch;
}

.pm.open { display: flex; }

.pm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2,2,2,0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

/* Two-column container on desktop */
.pm-container {
  position: relative;
  z-index: 1;
  background: #f5f4f0;
  width: 100%;
  max-width: 840px;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: 1fr;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -20px 0 60px rgba(0,0,0,0.4);
  overflow: hidden;
}

.pm.open .pm-container {
  transform: translateX(0);
}

/* Close button — pinned top-right of container, always above right pane */
/* ------------------------------------------------------------
   LEFT PANE: IMAGES
   ------------------------------------------------------------ */
.pm-left-pane {
  display: flex;
  flex-direction: column;
  background: #ece7de;
  border-right: 1px solid rgba(180,140,20,0.15);
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

.pm-img-main-wrap {
  width: 100%;
  padding: 24px 24px 16px;
  background: #ece7de;
}

.pm-main-img {
  width: 100%;
  height: auto;
  max-height: 68vh;
  object-fit: contain;
  display: block;
}

/* Stacked images — scrollable below main */
.pm-stacked {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  background: #ece7de;
  border-top: 1px solid rgba(180,140,20,0.12);
  flex-shrink: 0;
}

.pm-stacked-img {
  width: 68px;
  height: 68px;
  cursor: pointer;
  border: 1.5px solid transparent;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  background: #ddd8ce;
  opacity: 0.7;
}

.pm-stacked-img:hover,
.pm-stacked-img.pm-stacked-img-active { opacity: 1; }

.pm-stacked-img.pm-stacked-img-active {
  border-color: #B8960A;
}

.pm-stacked-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* ------------------------------------------------------------
   RIGHT PANE: DETAILS & STICKY FOOTER
   ------------------------------------------------------------ */
.pm-right-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  background: #f5f4f0;
  position: relative;
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(180,140,20,0.3) transparent;
}

.pm-right-pane::-webkit-scrollbar,
.pm-left-pane::-webkit-scrollbar {
  width: 4px;
}
.pm-right-pane::-webkit-scrollbar-thumb,
.pm-left-pane::-webkit-scrollbar-thumb {
  background: rgba(180,140,20,0.3);
  border-radius: 2px;
}

/* Scrollable details content */
.pm-details {
  padding: 36px 32px 24px;
  flex: 1;
}

/* Category + reference */
.pm-cat-ref {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: #B8960A;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Design name */
.pm-name {
  font-family: 'Cinzel', serif;
  font-size: 20.0px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #0a0a0a;
  text-transform: uppercase;
  margin-bottom: 8px;
  line-height: 1.2;
}

/* Gold divider */
.pm-gold-line {
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, #9A7200, #C8960C, #B8960A);
  box-shadow: 0 0 5px rgba(180,140,20,0.35);
  margin-bottom: 12px;
}

/* Tagline */
.pm-tagline {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: rgba(140,100,10,0.85);
  font-style: italic;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Description */
.pm-desc {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: rgba(10,10,10,0.65);
  line-height: 1.7;
  margin-bottom: 20px;
}


/* ------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------ */
.pm-section {
  margin-bottom: 16px;
}

.pm-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pm-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(10,10,10,0.45);
  text-transform: uppercase;
}

.pm-color-name {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #0a0a0a;
}

.pm-size-guide-btn {
  background: transparent;
  border: none;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #B8960A;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.pm-size-guide-btn:hover { color: #9A7200; }

/* Color dots */
.pm-colors {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pm-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  border: none;
}

.pm-dot:hover { transform: scale(1.12); }
.pm-dot.pm-dot-active { box-shadow: 0 0 0 2px #f5f4f0, 0 0 0 3.5px #B8960A; }
.pm-dot-b      { background: #0a0a0a; }
.pm-dot-w      { background: #f5f5f5; box-shadow: 0 0 0 1.5px rgba(10,10,10,0.28); }
.pm-dot-w.pm-dot-active { box-shadow: 0 0 0 1px rgba(10,10,10,0.2), 0 0 0 2px #f5f4f0, 0 0 0 3.5px #B8960A; }
.pm-dot-maroon { background: #5c1a1a; }
.pm-dot-burgundy { background: #6D1A2A; }

/* Size buttons */
.pm-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-size-btn {
  width: 44px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(10,10,10,0.18);
  color: #0a0a0a;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pm-size-btn:hover:not(.unavailable) {
  border-color: #B8960A;
  color: #B8960A;
}

.pm-size-btn.active {
  background: #0a0a0a;
  color: #f5f4f0;
  border-color: #0a0a0a;
}

.pm-size-btn.unavailable {
  opacity: 0.25;
  cursor: not-allowed;
  text-decoration: line-through;
}

@keyframes pmShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.pm-shake { animation: pmShake 0.4s ease; }

/* TYP Custom words — submit-time error state only (never live while typing), same gold
   used by .pm-words-input:focus, reusing .pm-shake above for the shake */
.pm-words-input.pm-typc-input-error { border-color: #B8960A; }

/* Size not selected — visible error message */
.pm-size-error {
  display: none;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #B8960A;
  margin-top: 8px;
  font-style: italic;
}
.pm-size-error.visible { display: block; }

.pm-placement-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

.pm-placement-text {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(10,10,10,0.6);
}

/* Your Words — optional custom back text (customBack products) */
.pm-words-host { position: relative; }

.pm-words-count {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #0a0a0a;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.pm-words-count.pm-words-blocked { color: #B8960A; }

.pm-words-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pm-words-main {
  flex: 1;
  min-width: 0;
}

.pm-words-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  color: #0a0a0a;
  background: transparent;
  border: 1px solid rgba(10,10,10,0.2);
  border-radius: 0;
  text-transform: none;
  outline: none;
  transition: border-color 0.2s ease;
}
.pm-words-input:focus { border-color: #B8960A; }
.pm-words-input::placeholder { color: rgba(10,10,10,0.3); }

.pm-words-help,
.pm-words-note {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  line-height: 1.5;
  color: rgba(10,10,10,0.5);
  margin-top: 8px;
}
.pm-words-note { margin-top: 4px; }

.pm-words-msg {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #B8960A;
  font-style: italic;
  margin-top: 6px;
}
.pm-words-msg:empty { display: none; }

/* Preview text — white, centred, upper back. Size/position set from js/modal.js */
.pm-words-overlay {
  position: absolute;
  display: none;
  pointer-events: none;
  overflow: hidden;
}

.pm-words-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 24.3%;
  text-align: center;
  white-space: nowrap;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  font-family: 'Playfair Display', 'Noto Serif SC', Georgia, serif;
  pointer-events: none;
}
.pm-words-line span { display: inline-block; }

/* Mobile-only mini preview box (same 4:5 ratio as the back image) */
.pm-words-mini {
  display: none;
  position: relative;
  flex: 0 0 104px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #ddd8ce center / cover no-repeat;
  border: 1px solid rgba(180,140,20,0.2);
}

/* ============================================================
   TYP CUSTOM — font selector + 3-line words overlay (typ-custom only)
   Entirely separate from the "Your Words" rules above — different product,
   different overlay math (fit-to-width, not a flat size factor), own DOM.
   The shared input/help/msg/counter classes above (.pm-words-input etc.)
   are pure visual utility classes and are reused as-is; nothing here reads
   or writes spe-burgundy's state.
   ============================================================ */

/* Font selector — same visual language as .pm-size-btn, auto-width so
   "CLASSIC" / "SCRIPT" don't clip the way a fixed 44px size box would */
.pm-fonts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pm-font-btn {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid rgba(10,10,10,0.18);
  color: #0a0a0a;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pm-font-btn:hover { border-color: #B8960A; color: #B8960A; }
.pm-font-btn.active {
  background: #0a0a0a;
  color: #f5f4f0;
  border-color: #0a0a0a;
}

/* Live overlay — no hardcoded top/color/font-family here (unlike .pm-words-stage);
   all four are set inline from js/modal.js per product.wordsOverlay + selected
   colour/font, since they differ per font and must invert for the ink colour. */
.pm-typc-overlay {
  position: absolute;
  display: none;
  pointer-events: none;
  overflow: hidden;
}

.pm-typc-stage {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  white-space: nowrap;
  text-transform: none;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.pm-typc-line span { display: inline-block; }

/* Mobile-only mini preview box — same pattern as .pm-words-mini, own class so the
   two features' JS never address the same element */
.pm-typc-mini {
  display: none;
  position: relative;
  flex: 0 0 104px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #ddd8ce center / cover no-repeat;
  border: 1px solid rgba(180,140,20,0.2);
}

/* Mobile-only "VIEW" affordance above the mini preview box — same wrapper/label used by
   BOTH spe-burgundy's .pm-words-mini and typ-custom's .pm-typc-mini, tapping either the
   label or the box itself opens the fullscreen lightbox with the live overlay. Hidden on
   desktop (mirrors .pm-words-mini/.pm-typc-mini's own default-hidden + mobile-only pattern),
   and hidden on mobile too until JS shows it (only once there are actual words to preview). */
.pm-mini-view-wrap { display: none; flex-direction: column; align-items: center; gap: 4px; }
.pm-mini-view-label {
  display: none;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(10,10,10,0.45);
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.pm-mini-view-label.visible { display: block; }

/* Off-screen, laid-out-but-invisible element used only to measure text width for the
   soft-tip size check — visibility:hidden (not display:none) so offsetWidth still works */
.pm-typc-measure {
  position: absolute;
  visibility: hidden;
  left: -9999px;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* Soft tips — muted, same visual weight as .pm-words-help, never alarming (unlike
   .pm-words-msg, which is reserved for submit-blocking states) */
.pm-typc-tips { margin-top: 4px; }
.pm-typc-tip {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  line-height: 1.5;
  color: rgba(10,10,10,0.45);
  margin: 4px 0 0;
}

/* Small "PREVIEW" chip — shown only while the live overlay is visible, muted/subtle,
   same chip language as the floating close button */
.pm-typc-preview-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: none;
  padding: 4px 9px;
  background: #f5f4f0;
  border: 1px solid rgba(10,10,10,0.15);
  color: rgba(10,10,10,0.5);
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
}

/* HOW IT WORKS reuses .pm-specs/.pm-specs-toggle/.pm-specs-body as-is (see Specs Accordion,
   below) — only the numbered-list content inside it needs its own rule, since the static
   TECHNICAL SPECS body only ever holds .pm-spec-row pairs, never an <ol> */
.pm-typc-how .pm-specs-body ol {
  margin: 0;
  padding-left: 18px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1.8;
  color: rgba(10,10,10,0.7);
}

/* FONT row inside YOUR WORDS — sits above the line inputs */
.pm-typc-font-row { margin-bottom: 8px; }

/* Specs Accordion */
.pm-specs {
  border-top: 1px solid rgba(180,140,20,0.15);
  padding-top: 14px;
  margin-bottom: 10px;
}

.pm-specs-toggle {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(10,10,10,0.5);
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 0 8px;
  transition: color 0.2s ease;
}

.pm-specs-toggle:hover { color: #0a0a0a; }

.pm-specs-icon {
  font-size: 14.0px;
  font-weight: 300;
  color: #B8960A;
}

.pm-specs-body { display: none; }
.pm-specs-body.open { display: block; }

.pm-spec-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(180,140,20,0.08);
}

.pm-spec-label {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(10,10,10,0.4);
  text-transform: uppercase;
}

.pm-spec-value {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #0a0a0a;
}


/* ------------------------------------------------------------
   STICKY FOOTER ACTIONS (Pinned inside right pane)
   ------------------------------------------------------------ */
.pm-footer {
  position: sticky;
  bottom: 0;
  background: #f5f4f0;
  padding: 16px 32px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(180,140,20,0.18);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.04);
  flex-shrink: 0;
  z-index: 10;
}

.pm-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pm-price {
  font-family: 'Cinzel', serif;
  font-size: 19.0px;
  font-weight: 400;
  color: #0a0a0a;
  letter-spacing: 2px;
}

.pm-qty {
  display: flex;
  align-items: center;
  border: 1px solid rgba(10,10,10,0.18);
}

.pm-qty-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: #0a0a0a;
  font-family: 'Space Mono', monospace;
  font-size: 13.0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.pm-qty-btn:hover { background: rgba(10,10,10,0.06); }

.pm-qty-num {
  width: 28px;
  text-align: center;
  font-family: 'Space Mono', monospace;
  font-size: 11.0px;
  color: #0a0a0a;
  border-left: 1px solid rgba(10,10,10,0.1);
  border-right: 1px solid rgba(10,10,10,0.1);
  line-height: 28px;
}

.pm-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.pm-btn-cart {
  width: 100%;
  padding: 13px;
  background: #0a0a0a;
  color: #f5f4f0;
  border: 1px solid #0a0a0a;
  font-family: 'Space Mono', monospace;
  font-size: 11.0px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.pm-btn-cart:hover {
  background: #B8960A;
  border-color: #B8960A;
  color: #ece7de;
}

.pm-btn-checkout {
  width: 100%;
  padding: 11px;
  background: transparent;
  color: #0a0a0a;
  border: 1px solid rgba(10,10,10,0.25);
  font-family: 'Space Mono', monospace;
  font-size: 11.0px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.pm-btn-checkout:hover {
  background: #B8960A;
  border-color: #B8960A;
  color: #ece7de;
}

.pm-note {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(10,10,10,0.35);
  font-style: italic;
  text-align: center;
  margin: 0;
}


/* ------------------------------------------------------------
   SIZE GUIDE — elegant centered card
   ------------------------------------------------------------ */
.pm-sg-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(2,2,2,0.5);
  z-index: 35;
  cursor: pointer;
}

.pm-sg-backdrop.open { display: block; }

.pm-size-guide-panel {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  width: min(480px, 88%);
  max-height: 80%;
  overflow-y: auto;
  background: #f5f4f0;
  border: 1px solid rgba(180,140,20,0.25);
  border-top: 2px solid rgba(180,140,20,0.8);
  padding: 48px 28px 32px;
  scrollbar-width: none;
  animation: pmIn 0.25s cubic-bezier(0.16,1,0.3,1) forwards;
}

.pm-size-guide-panel::-webkit-scrollbar { display: none; }
.pm-size-guide-panel.open { display: block; }

.pm-size-guide-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 14.0px;
  color: rgba(10,10,10,0.4);
  cursor: pointer;
  padding: 6px;
}
.pm-size-guide-close:hover { color: #0a0a0a; transition: color 0.2s ease; }

.pm-sg-note {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: rgba(10,10,10,0.5);
  line-height: 1.8;
  margin-bottom: 20px;
}

.pm-sg-cat {
  font-family: 'Cinzel', serif;
  font-size: 11.0px;
  letter-spacing: 3px;
  color: #0a0a0a;
  text-transform: uppercase;
  margin: 20px 0 10px;
}

.pm-sg-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}

.pm-sg-table th {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 2px;
  color: rgba(10,10,10,0.4);
  text-transform: uppercase;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(180,140,20,0.2);
  text-align: left;
}

.pm-sg-table td {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: normal;
  color: #0a0a0a;
  padding: 10px;
  border-bottom: 1px solid rgba(180,140,20,0.08);
}

.pm-sg-table tr:last-child td { border-bottom: none; }

.pm-sg-how {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: rgba(10,10,10,0.55);
  line-height: 1.9;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(180,140,20,0.15);
}


/* ------------------------------------------------------------
   MOBILE RESPONSIVENESS (< 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .pm.open {
    display: flex;
    flex-direction: column;
    height: 100svh;
    width: 100%;
  }

  .pm-container {
    max-width: 100vw;
    border-radius: 0;
    display: block;
    flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: auto;
    padding-bottom: 120px;
    transform: none !important;
    transition: none;
  }

  .pm-left-pane {
    display: block;
    width: 100%;
    border-right: none;
    border-bottom: none;
    height: auto;
    overflow: visible;
  }

  .pm-right-pane {
    display: block;
    width: 100%;
    height: auto;
    overflow-y: visible;
    padding-bottom: 0;
  }

  /* Colour section DOM position is handled in js/modal.js on open — no CSS order used */
  .pm-details {
    display: flex;
    flex-direction: column;
  }

  .pm-img-main-wrap {
    padding: 12px;
  }

  .pm-main-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
  }

  /* Your Words — mini preview beside the field; 16px input avoids iOS focus-zoom */
  .pm-words-mini  { display: block; }
  .pm-words-input { font-size: 16px; }

  /* TYP Custom — same mini-preview pattern, own class */
  .pm-typc-mini { display: block; }

  /* VIEW label wrapper — mobile-only for both products; visibility of the label itself is
     still gated by JS (.visible), only the wrapper's flex layout turns on here */
  .pm-mini-view-wrap { display: flex; }

  /* Price row DOM position is handled in js/modal.js on open/close */
  .pm-price-row {
    padding: 0 16px 12px;
  }

  .pm-price {
    font-size: 17px;
  }

  .pm-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #f5f4f0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(180,140,20,0.15);
    z-index: 99999;
  }

  .pm-size-guide-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 400px);
    max-height: 80svh;
    z-index: 99998;
    overflow-y: auto;
  }

  .pm-sg-backdrop {
    position: fixed;
    z-index: 99997;
  }
}