/* Configurable homepage hero; legacy hero stays as the zero-banner fallback. */
.page-home .home-marketplace-hero.home-marketplace-hero--banners{display:block;padding:0;position:relative;isolation:isolate;overflow:hidden;min-height:0;background:#fff}
.page-home .home-hero-slide{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:22px;align-items:center;padding:30px clamp(24px,3vw,40px);min-height:215px;box-sizing:border-box}
.page-home .home-hero-slide[hidden]{display:none!important}
.page-home .home-hero-slide[data-theme=violet]{background:#f4efff}
.page-home .home-hero-slide[data-theme=dark]{background:#1c1530;color:#fff}
.page-home .home-hero-slide__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--hero-bg-opacity,1);z-index:0;pointer-events:none}
.page-home .home-hero-slide__copy{z-index:1;min-width:0}
.page-home .home-hero-slide__eyebrow{font-size:11px;font-weight:800;letter-spacing:.065em;text-transform:uppercase;color:#4f407a;margin:0 0 8px}
.page-home .home-hero-slide[data-theme=dark] .home-hero-slide__eyebrow{color:#cbb6ff}
.page-home .home-hero-slide h1,.page-home .home-hero-slide h2{color:#0f172a;font-size:clamp(30px,3.1vw,46px);line-height:1.07;letter-spacing:-.036em;margin:0;max-width:640px;text-wrap:balance}
.page-home .home-hero-slide[data-theme=dark] h1,.page-home .home-hero-slide[data-theme=dark] h2{color:#fff}
.page-home .home-hero-slide__description{font-size:14px;line-height:1.55;color:#64748b;margin:12px 0 0;max-width:600px}
.page-home .home-hero-slide[data-theme=dark] .home-hero-slide__description{color:#d2c9e5}
.page-home .home-hero-slide__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.page-home .home-hero-slide__cta{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:12px;padding:0 18px;text-decoration:none;font-size:13px;font-weight:750;box-sizing:border-box}
.page-home .home-hero-slide__cta--primary{color:#fff;background:#7c3aed}
.page-home .home-hero-slide__cta--primary:hover{background:#6d28d9;color:#fff}
.page-home .home-hero-slide__cta--secondary{background:rgba(255,255,255,.7);border:1px solid #e1deeb;color:#34294b}
.page-home .home-hero-slide__cta--secondary:hover{border-color:#a78bfa;color:#34294b}
.page-home .home-hero-slide__visual{z-index:1;min-width:0;display:flex;align-items:center;justify-content:center;height:230px}
.page-home .home-hero-slide__visual img{display:block;width:100%;height:100%;object-fit:contain}
.page-home .home-hero-slide__nav{position:absolute;z-index:3;right:22px;bottom:13px;display:flex;align-items:center;gap:6px;border-radius:99px;background:rgba(255,255,255,.85);padding:4px;border:1px solid rgba(142,135,164,.15)}
.page-home .home-hero-slide__nav button{display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;border-radius:50%;cursor:pointer;color:#526078}
.page-home .home-hero-slide__nav button:hover{background:#ede8fb}
.page-home .home-hero-slide__position{font-size:11px;min-width:35px;text-align:center;color:#64748b;font-weight:700}
@media(max-width:900px){.page-home .home-hero-slide{grid-template-columns:minmax(0,1fr) minmax(220px,.7fr)}}
@media(max-width:650px){.page-home .home-hero-slide{grid-template-columns:1fr;padding:22px 18px 30px;gap:8px}.page-home .home-hero-slide h1,.page-home .home-hero-slide h2{font-size:clamp(27px,8vw,35px)}.page-home .home-hero-slide__visual{height:160px}.page-home .home-hero-slide__actions{margin-top:14px}.page-home .home-hero-slide__nav{bottom:8px;right:12px}.page-home .home-hero-slide__cta{min-height:39px}}

/* CTA layout is fully data-driven. Defaults preserve the existing inline flow. */
.page-home .home-hero-slide__copy{position:static;z-index:2}
.page-home .home-hero-slide__cta{
  width:min(var(--cta-width,174px),100%);height:var(--cta-height,44px);min-height:0;
  font-size:var(--cta-font,14px);border-radius:var(--cta-radius,12px);
  text-align:center;line-height:1.15;white-space:normal;overflow-wrap:anywhere;padding:4px 10px;
}
.page-home .home-hero-slide__cta[data-placement="free"]{
  position:absolute;z-index:5;margin:0;
  left:clamp(0px,var(--cta-x,5%),calc(100% - min(var(--cta-width,174px),100%)));
  top:clamp(0px,var(--cta-y,72%),calc(100% - var(--cta-height,44px)));
  width:min(var(--cta-width,174px),100%);
  height:var(--cta-height,44px);
}
@media(max-width:650px){
 .page-home .home-hero-slide__cta{width:min(var(--cta-mobile-width,174px),100%);height:var(--cta-mobile-height,44px)}
 .page-home .home-hero-slide__cta[data-placement="free"]{
  left:clamp(0px,var(--cta-mobile-x,5%),calc(100% - min(var(--cta-mobile-width,174px),100%)));
  top:clamp(0px,var(--cta-mobile-y,80%),calc(100% - var(--cta-mobile-height,44px)));
  width:min(var(--cta-mobile-width,174px),100%);height:var(--cta-mobile-height,44px);
 }
}
/* Force the mobile layout within the admin canvas without resizing the browser. */
.page-home .home-hero-slide[data-preview-device="mobile"]{
  grid-template-columns:1fr; padding:22px 18px 30px; gap:8px; min-height:520px;align-content:start;
}
.page-home .home-hero-slide[data-preview-device="mobile"] h1{font-size:32px}
.page-home .home-hero-slide[data-preview-device="mobile"] .home-hero-slide__visual{height:160px}
.page-home .home-hero-slide[data-preview-device="mobile"] .home-hero-slide__cta{
  width:min(var(--cta-mobile-width,174px),100%);height:var(--cta-mobile-height,44px);
}
.page-home .home-hero-slide[data-preview-device="mobile"] .home-hero-slide__cta[data-placement="free"]{
  left:clamp(0px,var(--cta-mobile-x,5%),calc(100% - min(var(--cta-mobile-width,174px),100%)));
  top:clamp(0px,var(--cta-mobile-y,80%),calc(100% - var(--cta-mobile-height,44px)));
  width:min(var(--cta-mobile-width,174px),100%);height:var(--cta-mobile-height,44px);
}

/* Height is part of the hero composition and must match the editor canvas. */
.page-home .home-hero-slide{min-height:var(--hero-height,320px)}
@media(max-width:650px){
  .page-home .home-hero-slide{min-height:var(--hero-mobile-height,460px)}
}
.page-home .home-hero-slide[data-preview-device="mobile"]{min-height:var(--hero-mobile-height,460px)}

/* A finished poster can carry its own typography. Keep the heading in the
   accessibility tree while removing visible copy, without hiding CTAs. */
.page-home .home-hero-slide[data-show-copy="false"] .home-hero-slide__eyebrow,
.page-home .home-hero-slide[data-show-copy="false"] h1,
.page-home .home-hero-slide[data-show-copy="false"] h2,
.page-home .home-hero-slide[data-show-copy="false"] .home-hero-slide__description{
 position:absolute!important;width:1px!important;height:1px!important;
 overflow:hidden!important;clip-path:inset(50%)!important;
 white-space:nowrap!important;margin:-1px!important;padding:0!important;
}

/* Image-first posters: the public canvas keeps the EXACT aspect ratio of the
   editor's 1200px/390px reference artboard, at any browser width. */
.page-home .home-marketplace-hero--banners .home-hero-slide[data-show-copy="false"]{
  aspect-ratio:1200 / var(--hero-height-n,480);
  min-height:0;
  height:auto;
}
@media(max-width:650px){
  .page-home .home-marketplace-hero--banners .home-hero-slide[data-show-copy="false"]{
    aspect-ratio:390 / var(--hero-mobile-height-n,520);
    min-height:0;
  }
}
/* Coordinates and sizes are expressed relative to the reference canvas,
   not fixed pixels. This avoids moving overlaid buttons when the banner
   scales from the admin preview to the public homepage. */
.page-home .home-marketplace-hero--banners .home-hero-slide__cta[data-placement="free"]{
  width:var(--cta-wp,14.5%);
  max-width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:var(--cta-ratio,174 / 44);
  left:clamp(0px,var(--cta-x,5%),calc(100% - var(--cta-wp,14.5%)));
  top:var(--cta-y,72%);
  background:var(--cta-bg,#7C3AED);
  color:var(--cta-text,#FFFFFF);
  border-radius:var(--cta-radius,12px);
  opacity:var(--cta-opacity,1);
  border-color:transparent;
}
.page-home .home-marketplace-hero--banners .home-hero-slide__cta[data-placement="free"]:hover{
  background:var(--cta-bg,#7C3AED);
  color:var(--cta-text,#FFFFFF);
  filter:brightness(.95);
}
.page-home .home-marketplace-hero--banners .home-hero-slide__cta--secondary[data-placement="free"]{
  border:1px solid rgba(124,58,237,.14);
}
@media(max-width:650px){
  .page-home .home-marketplace-hero--banners .home-hero-slide__cta[data-placement="free"]{
    width:var(--cta-mobile-wp,44.6%);
    aspect-ratio:var(--cta-mobile-ratio,174 / 44);
    left:clamp(0px,var(--cta-mobile-x,5%),calc(100% - var(--cta-mobile-wp,44.6%)));
    top:var(--cta-mobile-y,80%);
  }
}

/*
 * Desktop storefront banner: Wildberries/Ozon-style 300px fixed viewport.
 * Use the SAME height in the 1300px reference preview. Content stays on
 * its own percentage-based overlay coordinate plane.
 *
 * Image assets with a different ratio are cropped by object-fit: cover;
 * never stretch the artwork or move CTA elements into a flow layout.
 */
@media (min-width:651px){
  .page-home .home-marketplace-hero--banners .home-hero-slide[data-compact-desktop="true"]:not([data-preview-device="mobile"]){
    height:300px!important;
    min-height:0!important;
    max-height:300px!important;
    aspect-ratio:auto!important;
  }
}