.sf-preview-stage {
  --preview-scale: 0.378;  
  --preview-frame-height: 1355px;  
  position: relative;
  height: 32rem;
  overflow: hidden;
}
.sf-preview-stage--wide {
  --preview-scale: 0.58;  
  --preview-frame-height: 885px;
}
.sf-preview-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1100px;
  height: var(--preview-frame-height);
  border: 0;
  transform: scale(var(--preview-scale));
  transform-origin: top left;
}






@media (max-width: 639px) {
  .sf-preview-stage--wide .sf-preview-frame {
    width: 100%;
    height: 100%;
    transform: none;
  }
}




@media (min-width: 1280px) {
  .sf-preview-stage--review {
    --preview-scale: 0.378;
    --preview-frame-height: 1355px;
  }
}



.sf-preview-stage--phone {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
}
.sf-preview-stage--phone .sf-preview-frame {
  position: relative;
  width: 390px;
  height: 1500px;
  transform: scale(0.62);
  border-radius: 1.25rem;
  box-shadow: 0 6px 24px -12px rgb(0 0 0 / 0.5);
}

 
 
@media (max-width: 1279px) {
  .sf-preview-dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    padding: 0 0.75rem 0.75rem;
    

    max-height: 3.25rem;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .sf-preview-dock--open { max-height: 75vh; }
  .sf-preview-dock .sf-preview-stage { height: 22rem; }

   
  .sf-preview-host { padding-bottom: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-preview-dock { transition: none; }
}

 





.sf-sample {
  --sample-primary: var(--storefront-preview-primary, #1a1a2e);
  --sample-text: var(--storefront-preview-text, #ffffff);
  --sample-bg: var(--storefront-preview-bg, #f8f8f8);
  --sample-accent: var(--storefront-preview-accent, var(--sample-primary));
  --sample-radius: var(--storefront-preview-radius, 0.6rem);
}
.sf-sample-band { background: var(--sample-primary); }
.sf-sample-page { background: var(--sample-bg); }
.sf-sample-ink { background: var(--sample-text); opacity: 0.9; }
.sf-sample-ink-soft { background: var(--sample-text); opacity: 0.6; }
.sf-sample-accent { background: var(--sample-accent); }
.sf-sample-card { border-radius: min(var(--sample-radius), 0.375rem); }







.sf-mock { display: block; width: 100%; height: 100%; }
.sf-mock .m-page  { fill: var(--sample-bg); }
.sf-mock .m-band  { fill: var(--sample-primary); }
.sf-mock .m-bandink { fill: var(--sample-text); }
.sf-mock .m-card  { fill: #ffffff; stroke: rgb(0 0 0 / 0.1); stroke-width: 0.5; }
.sf-mock .m-photo { fill: var(--sample-accent); opacity: 0.5; }
.sf-mock .m-ink   { fill: #262626; opacity: 0.8; }
.sf-mock .m-soft  { fill: #262626; opacity: 0.25; }
.sf-mock .m-rule  { stroke: #262626; stroke-opacity: 0.15; stroke-width: 0.6; }