/*
 * Destaque lateral da Home — StylluS Serviços
 * Produto: imagem ocupa o card; nome, badge, setas e bolinhas ficam SOBRE a imagem.
 * Sem preço e sem botão. A imagem inteira é o link do produto.
 */

.hero.hero-image-only .hero-grid.st-hero-has-promo{
 --st-promo-size:clamp(300px,27vw,360px);
 grid-template-columns:minmax(0,1fr) var(--st-promo-size)!important;
 gap:26px!important;
}
.hero.hero-image-only .st-hero-has-promo .slider{
 height:var(--st-promo-size)!important;
 aspect-ratio:auto!important;
 align-self:stretch!important;
}
.hero.hero-image-only .st-hero-has-promo .slide img,
.hero.hero-image-only .st-hero-has-promo .slide video{object-fit:contain!important}
.hero.hero-image-only .st-hero-has-promo .slider-nav button{width:38px;height:54px}
.hero.hero-image-only .st-hero-has-promo .slider-nav button svg{width:38px;height:50px}
.hero.hero-image-only .st-hero-has-promo .slider-prev{left:10px}
.hero.hero-image-only .st-hero-has-promo .slider-next{right:10px}

.st-promo-carousel{
 position:relative;
 width:100%;
 height:var(--st-promo-size);
 min-height:0;
 aspect-ratio:1/1;
 align-self:stretch;
 box-sizing:border-box;
 overflow:hidden;
 border-radius:22px;
}
.st-promo-carousel.st-promo-with-products{
 min-height:0;
 border:1px solid #8d5a17;
 background:#0b1119;
 box-shadow:0 0 0 1px rgba(255,153,31,.08),0 12px 30px rgba(0,0,0,.28);
}
.st-promo-carousel .st-promo-slide{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 box-sizing:border-box;
}
.st-promo-carousel .st-promo-product{
 background:#0b1119;
 color:#f7f9fc;
}
.st-promo-has-controls .st-promo-slide{bottom:auto!important}
.st-promo-carousel .st-promo-slide picture img{object-fit:cover}

.st-home-product-body{
 display:block;
 width:100%;
 height:100%;
 padding:0;
 margin:0;
 box-sizing:border-box;
}
.st-home-product-photo{
 position:relative;
 display:block;
 overflow:hidden;
 width:100%;
 height:100%;
 min-height:0;
 border:0;
 border-radius:20px;
 background:#0a1018;
 box-sizing:border-box;
 text-decoration:none;
 cursor:pointer;
 color:#fff;
}
.st-home-product-photo::after{
 content:"";
 position:absolute;
 left:0;right:0;bottom:0;
 height:42%;
 z-index:1;
 pointer-events:none;
 background:linear-gradient(to top,rgba(4,8,13,.96) 0%,rgba(4,8,13,.74) 36%,rgba(4,8,13,.18) 72%,transparent 100%);
}
.st-home-product-photo:hover,
.st-home-product-photo:focus-visible{
 box-shadow:inset 0 0 0 2px rgba(255,153,31,.85),0 0 26px rgba(255,136,0,.2);
}
.st-home-product-photo:focus-visible{outline:2px solid #72baff;outline-offset:-3px}

.st-promo-slide.st-promo-product .st-home-product-photo img{
 position:absolute;
 inset:0;
 display:block;
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center;
 transform:none;
 filter:none;
}

.st-home-product-badge{
 position:absolute;
 top:13px;
 left:13px;
 z-index:4;
 padding:7px 12px;
 border-radius:999px;
 background:#f7b91d;
 color:#111820;
 border:1px solid rgba(0,0,0,.18);
 box-shadow:0 4px 12px rgba(0,0,0,.2);
 font-size:11px;
 font-weight:900;
 line-height:1;
 pointer-events:none;
}

.st-home-product-name{
 position:absolute;
 left:18px;
 right:18px;
 bottom:30px;
 z-index:3;
 display:-webkit-box;
 -webkit-box-orient:vertical;
 -webkit-line-clamp:3;
 overflow:hidden;
 overflow-wrap:anywhere;
 margin:0;
 padding:0;
 color:#fff;
 font-size:clamp(16px,1.28vw,21px);
 font-weight:950;
 line-height:1.05;
 letter-spacing:-.015em;
 text-transform:uppercase;
 text-shadow:0 2px 8px rgba(0,0,0,.9);
 pointer-events:none;
}
.st-home-product-no-photo{
 position:absolute;
 inset:0;
 display:grid;
 place-items:center;
 color:#8492a5;
 font-size:12px;
 text-align:center;
}

/* Setas ficam nas laterais, por cima da imagem, como no mockup aprovado. */
.st-promo-carousel .st-promo-nav{
 position:absolute;
 inset:0!important;
 z-index:6;
 height:100%!important;
 transform:none!important;
 pointer-events:none;
 display:block;
}
.st-promo-carousel .st-promo-nav button{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 width:38px;
 height:54px;
 min-width:38px;
 min-height:54px;
 border:0;
 border-radius:0;
 padding:0;
 background:transparent;
 color:#fff;
 box-shadow:none;
 backdrop-filter:none;
 pointer-events:auto;
 cursor:pointer;
 display:grid;
 place-items:center;
 filter:drop-shadow(0 3px 5px rgba(0,0,0,.78));
}
.st-promo-carousel .st-promo-nav button svg{width:38px;height:50px;overflow:visible}
.st-promo-carousel .st-promo-nav button svg path{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.st-promo-carousel .st-promo-prev{left:10px}
.st-promo-carousel .st-promo-next{right:10px}
.st-promo-carousel .st-promo-nav button:hover,
.st-promo-carousel .st-promo-nav button:focus-visible{background:transparent;color:#ffc400}
.st-promo-carousel .st-promo-nav button:focus-visible{outline:2px solid #72baff;outline-offset:2px}

/* Bolinhas também ficam sobre a imagem, centralizadas na base. */
.st-promo-carousel .st-promo-dots{
 position:absolute;
 z-index:6;
 left:50%!important;
 right:auto!important;
 bottom:9px!important;
 transform:translateX(-50%);
 width:auto;
 max-width:68%;
 display:flex;
 justify-content:center;
 align-items:center;
 gap:7px;
 padding:3px 7px;
 margin:0;
 overflow-x:auto;
 scrollbar-width:none;
 overscroll-behavior:contain;
 background:rgba(5,12,19,.34);
 border-radius:999px;
 backdrop-filter:blur(3px);
}
.st-promo-carousel .st-promo-dots::-webkit-scrollbar{display:none}
.st-promo-carousel .st-promo-dots button{
 flex:0 0 auto;
 width:9px;
 height:9px;
 min-width:9px;
 min-height:9px;
 padding:0;
 margin:0;
 border-radius:999px;
 border:1px solid rgba(255,255,255,.92);
 background:transparent;
 box-shadow:none;
}
.st-promo-carousel .st-promo-dots button.active{
 width:28px;
 background:#ffc400;
 border-color:#ffc400;
}

@media(max-width:900px){
 .hero.hero-image-only .hero-grid.st-hero-has-promo{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
 .hero.hero-image-only .st-hero-has-promo .slider{height:auto!important;aspect-ratio:1200/455!important}
 .st-promo-carousel{width:min(100%,420px);height:auto;aspect-ratio:1/1;justify-self:center}
}
@media(max-width:700px){
 .hero.hero-image-only .st-hero-has-promo .slider{aspect-ratio:2/3!important}
}
@media(max-width:560px){
 .st-home-product-name{left:14px;right:14px;bottom:28px;font-size:16px}
 .st-home-product-badge{top:10px;left:10px;padding:6px 10px}
 .st-promo-carousel .st-promo-nav button{width:34px;height:48px;min-width:34px;min-height:48px}
 .st-promo-carousel .st-promo-nav button svg{width:34px;height:46px}
 .st-promo-carousel .st-promo-prev{left:7px}
 .st-promo-carousel .st-promo-next{right:7px}
}