/* ==========================================================================
   HERO DA HOME — "Slides publicados" do shopex-theme (css/hero.css do tema, copiado para a home do plugin, 3.1.0).
   Cada slide recebe sua paleta em custom properties (--bg1 --bg2 --ink --soft --accent --btn --btn-ink --plate --halo),
   calculadas pelo tema a partir da cor primária; os tokens --s-*, --radius-lg, --f-display vêm do .imp-shell.
   ========================================================================== */

/* Bloco + carrossel (mesmo DOM/ids que js/home.js controla) */
.spx-hero-block.spx-hai{display:block;margin-bottom:var(--s-6,2rem)}
.spx-hai .spx-hero-carousel{position:relative;overflow:hidden;border-radius:var(--radius-lg,12px);height:460px;background:var(--c-text,#212529);isolation:isolate;--pad:clamp(20px,4.2vw,56px)}
@media(max-width:1024px){.spx-hai .spx-hero-carousel{height:380px}}
@media(max-width:768px){.spx-hai .spx-hero-carousel{height:330px}}
@media(max-width:640px){.spx-hai .spx-hero-carousel{height:auto;aspect-ratio:5/4;--pad:16px}}
.spx-hai .spx-hero-track{position:absolute;inset:0}

/* Slide */
.spx-hai-slide{position:absolute;inset:0;display:grid;grid-template-columns:52% 1fr;overflow:hidden;opacity:0;transition:opacity .7s ease;pointer-events:none;background:linear-gradient(112deg,var(--bg1) 0%,var(--bg2) 100%);color:var(--ink)}
.spx-hai-slide.is-active{opacity:1;pointer-events:auto}
.spx-hai-slide>*{min-width:0;min-height:0}
/* Geometria de fundo: faixa de luz diagonal + anel fino */
.spx-hai-slide::before{content:"";position:absolute;inset:-30% -10%;background:linear-gradient(112deg,transparent 46%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.07) 60%,transparent 60%);pointer-events:none}
.spx-hai--paper.spx-hai-slide::before{background:linear-gradient(112deg,transparent 46%,rgba(255,255,255,.5) 46%,rgba(255,255,255,.5) 60%,transparent 60%)}
.spx-hai-slide::after{content:"";position:absolute;right:32%;top:-46%;width:34%;aspect-ratio:1;border-radius:50%;border:1.5px solid currentColor;opacity:.14;pointer-events:none}
@media(prefers-reduced-motion:reduce){.spx-hai-slide{transition:none}}

/* Texto (esquerda) */
.spx-hai-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:5% 2% 10% var(--pad)}
.spx-hai-copy>*{flex-shrink:0}
.spx-hai-badge{display:inline-flex;align-items:center;gap:8px;font:var(--fw-700,700) .72rem/1 var(--f-sans,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.spx-hai-badge::before{content:"";width:22px;height:3px;border-radius:3px;background:currentColor}
.spx-hai--ink .spx-hai-badge{color:#fff}
.spx-hai-badge[hidden],.spx-hai-sub[hidden]{display:none}
.spx-hai-headline{margin:0;font:var(--fw-800,800) clamp(1.5rem,3vw,2.75rem)/1.06 var(--f-display,inherit);letter-spacing:-.025em;color:var(--ink);max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.spx-hai-sub{margin:0;font-size:clamp(.9rem,1.15vw,1.08rem);line-height:1.5;color:var(--soft);max-width:52ch;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Preço estilo vitrine: "de R$ X por" em cima, valor grande embaixo */
.spx-hai-meta{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:4px}
.spx-hai-price{display:flex;flex-direction:column;gap:2px;font-family:var(--f-display,inherit)}
.spx-hai-from{font:var(--fw-600,600) .74rem/1.2 var(--f-sans,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.spx-hai-price-was{font-weight:var(--fw-600,600);text-decoration:line-through;text-transform:none;letter-spacing:0;font-size:.9rem}
.spx-hai-price-now{font-size:clamp(1.5rem,2.7vw,2.5rem);font-weight:var(--fw-800,900);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.spx-hai-price .amount,.spx-hai-price bdi{font-size:inherit;font-weight:inherit;color:inherit}
.spx-hai-count{align-self:flex-end;padding:6px 11px;border-radius:999px;font:var(--fw-600,600) .74rem/1 var(--f-sans,inherit);color:var(--ink);background:rgba(0,0,0,.07);margin-bottom:4px}
.spx-hai--ink .spx-hai-count{background:rgba(255,255,255,.16)}

.spx-hai-cta{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:14px 26px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font:var(--fw-700,700) .95rem/1 var(--f-sans,inherit);text-decoration:none;box-shadow:0 12px 28px -12px rgba(0,0,0,.45);transition:transform .15s ease,box-shadow .15s ease}
.spx-hai-cta svg{width:18px;height:18px;transition:transform .15s ease}
@media(hover:hover){.spx-hai-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(0,0,0,.5);color:var(--btn-ink)}.spx-hai-cta:hover svg{transform:translateX(3px)}}
.spx-hai-cta:focus-visible,.spx-hai-tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Foto (direita) — destaque e oferta: disco grande que sangra pela borda,
   produto concêntrico dentro dele (o "palco") */
.spx-hai-media{position:relative;display:block}
.spx-hai-stage{position:absolute;right:-9%;top:50%;height:138%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 50% 42%,#fff 0%,var(--plate) 70%);box-shadow:0 40px 90px -30px var(--halo),inset 0 -20px 50px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center}
.spx-hai-stage::after{content:"";position:absolute;left:50%;bottom:19%;width:46%;height:6%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.18),transparent 70%);z-index:0}
.spx-hai-img{position:relative;z-index:1;width:auto;height:52%;max-width:60%;object-fit:contain;mix-blend-mode:multiply;transform:translateY(-4%);transition:transform .5s ease}
@media(hover:hover){.spx-hai-media:hover .spx-hai-img{transform:translateY(-7%) scale(1.03)}}

/* Fotos ambientadas (sem fundo branco): sem multiply, foto inteira em cartão */
.spx-hai--noblend .spx-hai-img,.spx-hai--noblend .spx-hai-tile img{mix-blend-mode:normal;border-radius:16px}
.spx-hai--noblend .spx-hai-img{box-shadow:0 24px 50px -20px rgba(0,0,0,.4)}

/* Oferta: selo de desconto grudado no produto */
.spx-hai-sticker{position:absolute;z-index:3;left:14%;top:22%;padding:12px 16px;border-radius:999px;background:var(--accent);color:var(--bg1);font:900 clamp(1rem,2vw,1.6rem)/1 var(--f-display,inherit);letter-spacing:-.02em;transform:rotate(-8deg);box-shadow:0 12px 26px -8px rgba(0,0,0,.4)}
.spx-hai--ink .spx-hai-sticker{color:var(--btn-ink)}

/* Coleção / marca: 1 cartão grande + 2 pequenos, estilo mosaico */
.spx-hai-cluster{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:12px;padding:7% 6% 7% 0}
.spx-hai-tile{position:relative;display:flex;align-items:center;justify-content:center;padding:8%;border-radius:20px;background:radial-gradient(circle at 50% 40%,#fff 0%,var(--plate) 80%);overflow:hidden;box-shadow:0 24px 50px -24px var(--halo),0 1px 0 rgba(255,255,255,.6) inset}
.spx-hai-tile.is-lead{grid-row:1/3}
.spx-hai-tile img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s ease}
@media(hover:hover){.spx-hai-tile:hover img{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.spx-hai-img,.spx-hai-tile img,.spx-hai-cta,.spx-hai-cta svg{transition:none}}

/* Controles na base: barras de progresso alinhadas ao texto, setas à direita */
.spx-hai .spx-hero-dots{position:absolute;left:var(--pad);bottom:24px;z-index:5;display:flex;gap:6px}
.spx-hai .spx-hero-dot{width:22px;height:5px;padding:0;border-radius:5px;border:0;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15);cursor:pointer;transition:all .3s}
.spx-hai .spx-hero-dot.is-active{width:44px;background:#fff}
.spx-hai .spx-hero-arrow{position:absolute;bottom:16px;z-index:5;width:40px;height:40px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#1d2327;box-shadow:0 4px 14px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,background .15s}
.spx-hai .spx-hero-arrow svg{width:18px;height:18px}
.spx-hai .spx-hero-prev{right:66px}
.spx-hai .spx-hero-next{right:18px}
@media(hover:hover){.spx-hai .spx-hero-arrow:hover{background:#fff;transform:scale(1.08)}}

/* Tablet */
@media(max-width:768px){
    .spx-hai-copy{gap:8px;padding-bottom:13%}
    .spx-hai-cta{padding:11px 20px;font-size:.85rem}
    .spx-hai-stage{height:130%;right:-14%}
}
/* Mobile: texto e foto lado a lado com respiro entre os dois; disco sangra à direita */
@media(max-width:640px){
    .spx-hai-slide{grid-template-columns:56% 1fr;column-gap:8px}
    .spx-hai-slide::after{display:none}
    .spx-hai-copy{padding:14px 12px 44px var(--pad);gap:7px} /* 12px + gap: o texto nunca encosta na coluna da foto */
    .spx-hai-badge{font-size:.62rem;letter-spacing:.1em}
    .spx-hai-badge::before{width:14px}
    .spx-hai-headline{font-size:1.2rem;-webkit-line-clamp:3}
    .spx-hai-sub{font-size:.76rem;line-height:1.4;-webkit-line-clamp:3}
    .spx-hai-price-now{font-size:1.3rem}
    .spx-hai-from{font-size:.62rem}
    .spx-hai-price-was{font-size:.72rem}
    .spx-hai-count{font-size:.62rem;padding:4px 8px}
    .spx-hai-cta{padding:10px 16px;font-size:.78rem;margin-top:4px}
    .spx-hai-stage{width:140%;height:auto;right:-46%;top:50%} /* disco não invade a coluna do texto */
    .spx-hai-img{height:auto;width:50%;max-width:none;max-height:56%}
    .spx-hai-sticker{left:20%;top:26%;padding:7px 10px;font-size:.85rem}
    .spx-hai-cluster{grid-template-columns:1fr;grid-template-rows:1fr;padding:10% 8% 14% 6px;gap:0}
    .spx-hai-tile:not(.is-lead){display:none}
    .spx-hai-tile.is-lead{grid-row:auto;border-radius:16px}
    .spx-hai .spx-hero-dots{bottom:14px;gap:5px}
    .spx-hai .spx-hero-dot{width:16px;height:4px}
    .spx-hai .spx-hero-dot.is-active{width:30px}
    /* Setas discretas: par pequeno e translúcido no canto inferior direito, fora do texto */
    .spx-hai .spx-hero-arrow{bottom:8px;width:28px;height:28px;background:rgba(255,255,255,.6);color:rgba(0,0,0,.75);box-shadow:none;backdrop-filter:blur(2px)}
    .spx-hai .spx-hero-arrow svg{width:14px;height:14px}
    .spx-hai .spx-hero-prev{right:44px}
    .spx-hai .spx-hero-next{right:10px}
}

/* Admin: prévias estáticas (uma moldura por slide, sem carrossel) */
.spx-hai-frame{position:relative;height:400px;border-radius:12px;overflow:hidden;margin-top:8px;isolation:isolate;--pad:clamp(20px,4.2vw,56px)}
.spx-hai-frame .spx-hai-slide{opacity:1;pointer-events:auto}
.spx-hai-frame .spx-hai-cta,.spx-hai-frame .spx-hai-media,.spx-hai-frame .spx-hai-tile{pointer-events:none}

/* --- Banner gerado pelo estúdio (GPT-Image-2.5) no lugar da foto recortada (4.27.0) --- */
.spx-hai-media--banner{position:relative;display:block;align-self:stretch;min-height:260px;border-radius:var(--radius-lg,12px);overflow:hidden;box-shadow:0 30px 60px -30px var(--halo)}
.spx-hai-banner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
@media(max-width:640px){.spx-hai-media--banner{min-height:200px;aspect-ratio:4/3}}
@media(hover:hover){.spx-hai-media--banner:hover .spx-hai-banner{transform:scale(1.03)}}
.spx-hai--noblend .spx-hai-banner,.spx-hai-banner{mix-blend-mode:normal}