/* Acabamento visual da vitrine. Arquivo isolado: os estilos originais não mudam.
   Para desfazer, basta remover este arquivo e o storefront-polish.js do HTML. */

/* Toque e foco */
.storefront {-webkit-tap-highlight-color:transparent}
.storefront :focus-visible {outline:2px solid #b83265;outline-offset:3px;border-radius:6px}

/* Cabeçalho: ganha sombra suave quando a página rola, para separar do conteúdo. */
.storefront .site-header {transition:box-shadow .25s ease,background-color .25s ease}
html.eb-scrolled .storefront .site-header {background:#fddce3f2;box-shadow:0 6px 22px #9b345a1f;-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)}

/* Destaque do topo: o texto sobe e a foto se revela de baixo para cima, como o arco do logo. */
.storefront .banner-slide:not([hidden]) .hero-copy > * {animation:eb-rise .6s cubic-bezier(.2,.7,.2,1) both}
.storefront .banner-slide:not([hidden]) .hero-copy > :nth-child(2) {animation-delay:.08s}
.storefront .banner-slide:not([hidden]) .hero-copy > :nth-child(3) {animation-delay:.16s}
.storefront .banner-slide:not([hidden]) .hero-visual {animation:eb-arch .9s .05s cubic-bezier(.2,.7,.2,1) both}
.storefront .banner-slide:not([hidden]) .hero-visual img {animation:eb-settle 1.6s cubic-bezier(.2,.7,.2,1) both}
.storefront .banner-dots button.active span {background:#b83265}

/* Categorias: resposta ao toque. */
.storefront .category-tile:active .category-photo {transform:scale(.95);transition-duration:.08s}

/* Cartões de produto */
.storefront .product-picture {position:relative;background:linear-gradient(100deg,#fbedf2 30%,#fff6f9 50%,#fbedf2 70%) 0 0/300% 100%}
html.eb-js .storefront .product-picture:not(.is-loaded) {animation:eb-shimmer 1.4s linear infinite}
html.eb-js .storefront .product-picture img {opacity:0;transition:opacity .4s ease,transform .35s}
html.eb-js .storefront .product-picture.is-loaded img {opacity:1}
.storefront .product-card .product-name {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;line-height:1.4;padding:4px 0 0;margin-bottom:7px;height:calc(4.2em + 4px);box-sizing:border-box;flex:0 0 auto}
.storefront .product-card .price {font-weight:700;letter-spacing:-.01em}
.storefront .product-card .price del {font-weight:400}
.storefront .sale-badge {box-shadow:0 2px 6px #b8326533;letter-spacing:.01em}
@media (hover:hover){
  .storefront .product-card {transition:transform .25s ease}
  .storefront .product-card:hover .product-picture {box-shadow:0 10px 24px #9b345a1a}
}
.storefront .product-picture {transition:box-shadow .25s ease}
.storefront .product-card:active .product-picture {transform:scale(.985);transition:transform .08s ease}

/* Botão "+" e contador da sacola: mostram que o produto entrou. */
.storefront .add-button {transition:transform .15s ease}
.storefront .add-button:active {transform:scale(.88)}
.storefront .add-button.eb-added {animation:eb-pop .45s cubic-bezier(.3,1.6,.5,1)}
.storefront .add-button.eb-added::before {background:#b83265;border-color:#b83265}
.storefront .add-button.eb-added svg {color:#fff}
.storefront .bag-trigger b.eb-bump {animation:eb-bump .5s cubic-bezier(.3,1.6,.5,1)}

/* Aviso na parte de baixo: entra deslizando. */
#toast:not([hidden]) {animation:eb-toast .32s cubic-bezier(.2,.8,.2,1) both;border-radius:14px;box-shadow:0 12px 32px #40202a29}

/* Janelas (sacola, produto, menu): fundo escurece com suavidade. */
.storefront dialog::backdrop {background:#2e1a2359;animation:eb-fade .25s ease both}

/* No celular, a sacola sobe da parte de baixo da tela. */
@media (max-width:640px){
  .storefront .bag-dialog[open] {width:100%;max-width:100%!important;margin:auto 0 0;border-radius:20px 20px 0 0;max-height:88dvh;animation:eb-sheet .32s cubic-bezier(.2,.8,.2,1) both;padding-bottom:env(safe-area-inset-bottom)}
}

@keyframes eb-rise {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes eb-arch {from{clip-path:inset(100% 0 0 0 round 110px 110px 0 0)}to{clip-path:inset(0 0 0 0 round 110px 110px 0 0)}}
@keyframes eb-settle {from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes eb-shimmer {to{background-position:-150% 0}}
@keyframes eb-pop {0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes eb-bump {0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes eb-toast {from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes eb-fade {from{opacity:0}to{opacity:1}}
@keyframes eb-sheet {from{transform:translateY(100%)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  html.eb-js .storefront .product-picture img {opacity:1}
  .storefront *,.storefront *::before,.storefront *::after,#toast,.storefront dialog::backdrop {animation:none!important}
}