/* Try a Frame modal — reuses the same frame styles proven out on /try-a-frame/ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Poppins:wght@400;500;600&display=swap');

.bs-frame-trigger {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 1.5px solid #9b0357;
  background: #fff;
  color: #9b0357;
  cursor: pointer;
  margin-top: 0.6rem;
  margin-bottom: 20px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.bs-frame-trigger:hover { background: #9b0357; color: #fff; }

.bs-frame-overlay {
  position: fixed; inset: 0; background: rgba(9,8,49,0.55);
  z-index: 99999; display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
}
.bs-frame-overlay.open { opacity: 1; pointer-events: auto; }
.bs-frame-modal {
  background: #fff; border-radius: 12px; max-width: 640px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 1.75rem; position: relative;
  font-family: 'Poppins', sans-serif; color: #090831; text-align: center;
}
.bs-frame-close {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px;
  background: none; border: none; z-index: 2;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: #8b849b;
}
.bs-frame-close:hover { color: #9b0357; }
.bs-frame-modal h3 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.3rem; margin: 0 0 1rem; padding: 0 2.4rem; color: #9b0357; }
.bs-frame-styles { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bs-frame-styles-break { flex-basis: 100%; height: 0; }
.bs-frame-btn {
  font-family: 'Poppins', sans-serif; font-size: 0.82rem; padding: 0.45rem 0.9rem;
  border-radius: 999px; border: 1px solid #ddd; background: #fff; cursor: pointer; color: #090831;
}
.bs-frame-btn.active { background: #9b0357; border-color: #9b0357; color: #fff; }
.bs-frame-btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 480px) {
  .bs-frame-overlay { padding: 8px; }
  .bs-frame-modal { padding: 1.1rem 0.85rem; }
  .bs-frame-modal h3 { padding: 0 2rem; font-size: 1.15rem; }
  .bs-frame-styles { gap: 0.35rem; }
  .bs-frame-btn { font-size: 0.74rem; padding: 0.38rem 0.6rem; }
}

.bs-section-label {
  font-family: 'Poppins', sans-serif; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: #8b849b; margin: 0 0 0.5rem; text-align: center;
}

.bs-mat-swatches { display: flex; gap: 0.55rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bs-mat-swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid #e3d8e3; box-shadow: 0 1px 3px rgba(9,8,49,0.15);
}
.bs-mat-swatch.active { border-color: #9b0357; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9b0357; }
.bs-mat-color-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 480px) {
  .bs-mat-swatches { gap: 0.4rem; }
  .bs-mat-swatch { width: 27px; height: 27px; }
  .bs-mat-swatch.active { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #9b0357; }
}

.bs-frame-stage { display: inline-block; max-width: 100%; filter: drop-shadow(0 18px 24px rgba(9,8,49,0.2)) drop-shadow(0 3px 6px rgba(9,8,49,0.12)); }
.bs-frame-stage img { display: block; max-width: 100%; max-height: 42vh; width: auto; height: auto; }

/* floated: canvas */
.bs-fl-reveal { display: inline-block; }
.bs-fl-black .bs-fl-reveal { padding: 14px; background: #1b1b1f; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-fl-wood .bs-fl-reveal {
  padding: 20px;
  background: repeating-linear-gradient(90deg, rgba(104,80,46,0.06) 0, rgba(104,80,46,0.06) 1px, transparent 1px, transparent 3px, rgba(104,80,46,0.03) 3px, rgba(104,80,46,0.03) 4px, transparent 4px, transparent 9px), repeating-linear-gradient(90deg, rgba(255,247,225,0.07) 0, rgba(255,247,225,0.07) 1px, transparent 1px, transparent 6px), linear-gradient(100deg, #ddcba6, #e2d2ac);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.bs-fl-cherry .bs-fl-reveal {
  padding: 20px;
  background: repeating-linear-gradient(90deg, rgba(40,15,8,0.08) 0, rgba(40,15,8,0.08) 1px, transparent 1px, transparent 3px, rgba(40,15,8,0.04) 3px, rgba(40,15,8,0.04) 4px, transparent 4px, transparent 9px), repeating-linear-gradient(90deg, rgba(255,210,190,0.04) 0, rgba(255,210,190,0.04) 1px, transparent 1px, transparent 6px), linear-gradient(100deg, #874735, #8f4e3a);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.bs-fl-gold .bs-fl-reveal { padding: 16px; background: linear-gradient(135deg, #e9cf8a, #c9a24a 35%, #efe0ab 55%, #b4873a 80%, #e9cf8a); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-fl-silver .bs-fl-reveal { padding: 16px; background: linear-gradient(135deg, #e8e8ea, #c4c4c8 35%, #f2f2f4 55%, #a8a8ae 80%, #e8e8ea); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-fl-champagne .bs-fl-reveal { padding: 16px; background: linear-gradient(135deg, #f0e3c8, #d9c49c 35%, #f5ecd6 55%, #c7ad7e 80%, #f0e3c8); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-fl-white .bs-fl-reveal { padding: 16px; background: linear-gradient(135deg, #f8f6f1, #ffffff 35%, #ece9e2 55%, #ffffff 80%, #f5f3ee); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.bs-fl-gap { padding: 1px; background: linear-gradient(to bottom right, #211a14, #140f0b 60%, #0a0705);  }

/* standard frame: canvas board */
.bs-cb-black { padding: 14px; background: #1b1b1f; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-cb-wood {
  padding: 22px;
  background: repeating-linear-gradient(90deg, rgba(104,80,46,0.06) 0, rgba(104,80,46,0.06) 1px, transparent 1px, transparent 3px, rgba(104,80,46,0.03) 3px, rgba(104,80,46,0.03) 4px, transparent 4px, transparent 9px), repeating-linear-gradient(90deg, rgba(255,247,225,0.07) 0, rgba(255,247,225,0.07) 1px, transparent 1px, transparent 6px), linear-gradient(100deg, #ddcba6, #e2d2ac);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.bs-cb-cherry {
  padding: 22px;
  background: repeating-linear-gradient(90deg, rgba(40,15,8,0.08) 0, rgba(40,15,8,0.08) 1px, transparent 1px, transparent 3px, rgba(40,15,8,0.04) 3px, rgba(40,15,8,0.04) 4px, transparent 4px, transparent 9px), repeating-linear-gradient(90deg, rgba(255,210,190,0.04) 0, rgba(255,210,190,0.04) 1px, transparent 1px, transparent 6px), linear-gradient(100deg, #874735, #8f4e3a);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.bs-cb-gold { padding: 16px; background: linear-gradient(135deg, #e9cf8a, #c9a24a 35%, #efe0ab 55%, #b4873a 80%, #e9cf8a); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-cb-silver { padding: 16px; background: linear-gradient(135deg, #e8e8ea, #c4c4c8 35%, #f2f2f4 55%, #a8a8ae 80%, #e8e8ea); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-cb-champagne { padding: 16px; background: linear-gradient(135deg, #f0e3c8, #d9c49c 35%, #f5ecd6 55%, #c7ad7e 80%, #f0e3c8); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-cb-white { padding: 16px; background: linear-gradient(135deg, #f8f6f1, #ffffff 35%, #ece9e2 55%, #ffffff 80%, #f5f3ee); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }

/* paper frames: the molding (outer frame color) is one choice, the mat
   (color + thickness) is a separate, independent choice */
.bs-pp-frame { display: inline-block; }
.bs-pp-mat { padding: 28px; }
.bs-pp-black .bs-pp-frame { padding: 26px; background: #1b1b1f; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-pp-gold .bs-pp-frame { padding: 26px; background: linear-gradient(135deg, #e9cf8a, #c9a24a 35%, #efe0ab 55%, #b4873a 80%, #e9cf8a); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
/* Wood grain used to come from an SVG feTurbulence filter blended with
   background-blend-mode:multiply. html2canvas does not reliably support
   either, and on export it was painting this background over the mat
   instead of under it, which looked like the mat had vanished. A plain
   multi-stop gradient reads as wood grain and captures correctly. */
.bs-pp-wood .bs-pp-frame {
  padding: 26px;
  background: repeating-linear-gradient(90deg, rgba(104,80,46,0.06) 0, rgba(104,80,46,0.06) 1px, transparent 1px, transparent 3px, rgba(104,80,46,0.03) 3px, rgba(104,80,46,0.03) 4px, transparent 4px, transparent 9px), repeating-linear-gradient(90deg, rgba(255,247,225,0.07) 0, rgba(255,247,225,0.07) 1px, transparent 1px, transparent 6px), linear-gradient(100deg, #ddcba6, #e2d2ac);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.bs-pp-cherry .bs-pp-frame {
  padding: 26px;
  background: repeating-linear-gradient(90deg, rgba(40,15,8,0.08) 0, rgba(40,15,8,0.08) 1px, transparent 1px, transparent 3px, rgba(40,15,8,0.04) 3px, rgba(40,15,8,0.04) 4px, transparent 4px, transparent 9px), repeating-linear-gradient(90deg, rgba(255,210,190,0.04) 0, rgba(255,210,190,0.04) 1px, transparent 1px, transparent 6px), linear-gradient(100deg, #874735, #8f4e3a);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.bs-pp-silver .bs-pp-frame { padding: 26px; background: linear-gradient(135deg, #e8e8ea, #c4c4c8 35%, #f2f2f4 55%, #a8a8ae 80%, #e8e8ea); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-pp-champagne .bs-pp-frame { padding: 26px; background: linear-gradient(135deg, #f0e3c8, #d9c49c 35%, #f5ecd6 55%, #c7ad7e 80%, #f0e3c8); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.bs-pp-white .bs-pp-frame { padding: 26px; background: linear-gradient(135deg, #f8f6f1, #ffffff 35%, #ece9e2 55%, #ffffff 80%, #f5f3ee); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }

.bs-pp-mat.mat-white    { background: #fbfaf7;  }
.bs-pp-mat.mat-cream    { background: #f7f2e9;  }
.bs-pp-mat.mat-babyblue { background: #a9c9d4;  }
.bs-pp-mat.mat-babypink { background: #e6bcc1;  }
.bs-pp-mat.mat-navy     { background: #141c3a;  }
.bs-pp-mat.mat-nearblack { background: #1c1a18;  }
.bs-pp-mat.mat-wine      { background: #6e2f3d;  }
.bs-pp-mat.mat-darkgreen { background: #28463a;  }

.bs-pp-mat.mat-thin     { padding: 28px; }
.bs-pp-mat.mat-standard { padding: 42px; }
.bs-pp-mat.mat-wide     { padding: 58px; }
.bs-pp-mat.mat-none     { padding: 0; background: none !important; box-shadow: none !important; }

@media (max-width: 480px) {
  .bs-pp-mat.mat-thin     { padding: 16px; }
  .bs-pp-mat.mat-standard { padding: 26px; }
  .bs-pp-mat.mat-wide     { padding: 38px; }
}

/* second, inner mat: a thin reveal of a different color between the main
   mat and the window opening, off by default */
.bs-pp-mat2 { padding: 3px; }
.bs-pp-mat2.mat-white    { background: #fbfaf7; }
.bs-pp-mat2.mat-cream    { background: #f7f2e9; }
.bs-pp-mat2.mat-babyblue { background: #a9c9d4; }
.bs-pp-mat2.mat-babypink { background: #e6bcc1; }
.bs-pp-mat2.mat-navy     { background: #141c3a; }
.bs-pp-mat2.mat-nearblack { background: #1c1a18; }
.bs-pp-mat2.mat-wine      { background: #6e2f3d; }
.bs-pp-mat2.mat-darkgreen { background: #28463a; }

/* The window opening: a beveled cut through the mat board (the exposed white
   core, then a thin shadow line where the bevel angle catches light), an
   interior shadow suggesting the art sits recessed behind the mat, and the
   mat overlapping a sliver of the art's own edges the way a real cut mat
   actually covers the paper underneath it. Shared across every mat color. */
.bs-pp-window {
  position: relative;
  overflow: hidden;
  display: block;
}
.bs-pp-window img { display: block; transform: scale(1.035); transform-origin: center; }
/* A box-shadow on .bs-pp-window itself sits underneath the img in paint
   order, so an opaque image fully covering the box hides it completely.
   This overlay paints after the img instead, so the shadow is visible live.
   html2canvas drops inset box-shadows (and mangles layered gradients) on
   export, so the exported interior shadow is drawn separately, directly on
   the output canvas. */
.bs-pp-window-shadow {
  position: absolute; inset: 0; pointer-events: none;
  
}

/* No mat: the art sits directly against the frame rabbet, so it still gets a
   light interior shadow suggesting it's recessed, just without the bevel
   line a cut mat would show. */
.bs-pp-interior {
  position: relative;
  overflow: hidden;
  display: block;
}
.bs-pp-interior-shadow {
  position: absolute; inset: 0; pointer-events: none;
  
}

/* Frame molding thickness (Thin/Standard/Wide) is computed in JS from a base
   padding per style and applied as inline style, since with 7 colors across
   3 media types the per-combination CSS override approach stopped scaling.
   See BASE_PADDING in frame-modal.js. */
.bs-thickness { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.25rem; }
.bs-thickness-btn {
  font-family: 'Poppins', sans-serif; font-size: 0.78rem; padding: 0.35rem 0.8rem;
  border-radius: 999px; border: 1px solid #ddd; background: #fdfaf9; cursor: pointer; color: #5a5370;
}
.bs-thickness-btn.active { background: #241e8b; border-color: #241e8b; color: #fff; }

.bs-mat-toggle-row { display: flex; gap: 1.1rem; justify-content: center; align-items: center; margin-bottom: 1rem; font-family: 'Poppins', sans-serif; font-size: 0.85rem; color: #5a5370; }
.bs-mat-toggle-row label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.bs-caption { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.95rem; color: #9b0357; margin: 0.9rem 0 0; }
.bs-explainer { font-family: 'Poppins', sans-serif; font-size: 0.8rem; color: #8b849b; margin-top: 1rem; line-height: 1.5; }
.bs-explainer a { color: #9b0357; }

.bs-save-row { display: flex; gap: 20px; justify-content: center; margin-top: 1.1rem; }
.bs-save-btn {
  font-family: 'Poppins', sans-serif; font-size: 0.85rem; font-weight: 500;
  padding: 0.6rem 1.3rem; border-radius: 999px; border: 1.5px solid #090831;
  background: #fff; color: #090831; cursor: pointer; margin-top: 0;
}
.bs-save-btn:hover { background: #090831; color: #fff; }
.bs-save-btn:disabled { opacity: 0.6; cursor: wait; }
.bs-save-btn-secondary { border-color: #ddd; color: #5a5370; }
.bs-save-btn-secondary:hover { background: #5a5370; color: #fff; border-color: #5a5370; }

.bs-frame-shop { margin-top: 1.25rem; font-family: 'Poppins', sans-serif; font-size: 0.85rem; color: #5a5370; }
.bs-frame-shop a {
  display: inline-block; margin-top: 0.5rem; padding: 0.5rem 1.1rem; border-radius: 999px;
  background: #090831; color: #fff; text-decoration: none; font-size: 0.85rem;
}
.bs-frame-shop a:hover { background: #241e8b; }
.bs-frame-note { font-size: 0.75rem; color: #8b849b; margin-top: 1rem; }