/* ==========================================================
   Cabeçalho de Natal - Vegas Cosmetics
   Aplica-se ao bloco .aa-header-bottom com a classe .natal-header
   (ver _Layout.cshtml). Para desligar: retirar a classe "natal-header".
   ========================================================== */

#aa-header .aa-header-bottom.natal-header {
    position: relative;
    overflow: hidden;
    background: #950035;
    /* As barras de cima (.aa-header-top) são position:fixed e tapam ~70px
       do topo deste bloco. Os valores abaixo são o fallback; o script em
       _NatalEnfeites.cshtml mede a altura real e ajusta. */
    padding: 155px 0 20px;
}

#aa-header .natal-header > .container {
    position: relative;
    z-index: 2;
}

/* Logótipo */
#aa-header .aa-header-bottom.natal-header .aa-header-bottom-area .aa-logo img {
    width: 166px;   /* 291x140 reduzido para 80px de altura */
    height: 80px;
}

/* Pesquisa */
#aa-header .aa-header-bottom.natal-header .aa-header-bottom-area .aa-search-box {
    width: 340px;
    max-width: 100%;
}

#aa-header .aa-header-bottom.natal-header .aa-header-bottom-area .aa-search-box input[type="text"] {
    border: 0;
    border-radius: 0;
}

#aa-header .aa-header-bottom.natal-header .aa-header-bottom-area .aa-search-box button {
    background: #000;
    color: #fff;
    width: 50px;
    height: 40px;
    top: 0;
}

/* Faixa "Bem-vindo(a) ..." entre o banner e o menu: mesma cor do banner */
#aa-header .natal-faixa {
    background: #950035;
}

#aa-header .natal-faixa .subsiteinfo {
    background: transparent;
    color: #fff;
}

/* ---------- Enfeites pendurados ---------- */
.natal-enfeites {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.natal-enfeite {
    position: absolute;
    top: 0;
    width: 40px;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: natal-balanco 3.2s ease-in-out infinite alternate;
    animation: natal-balanco 3.2s ease-in-out infinite alternate;
}

.natal-enfeite .fio {
    display: block;
    width: 2px;
    margin: 0 auto;
    background: #fff;
}

.natal-enfeite svg {
    display: block;
    width: 36px;
    height: 36px;
    margin: -2px auto 0;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

@-webkit-keyframes natal-balanco {
    from { -webkit-transform: rotate(-4deg); }
    to   { -webkit-transform: rotate(4deg); }
}
@keyframes natal-balanco {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .natal-enfeite { -webkit-animation: none; animation: none; }
}

/* ---------- Tablet / telemóvel ---------- */
@media (max-width: 991px) {
    .natal-enfeite:nth-child(n+11) { display: none; }
}

@media (max-width: 767px) {
    #aa-header .aa-header-bottom.natal-header {
        padding: 125px 0 15px;
    }
    #aa-header .aa-header-bottom.natal-header .aa-header-bottom-area .aa-logo { float: none; text-align: center; }
    #aa-header .aa-header-bottom.natal-header .aa-header-bottom-area .aa-logo img { width: 145px; height: 70px; margin: 0 auto; }
    #aa-header .aa-header-bottom.natal-header .aa-header-bottom-area .aa-search-box {
        float: none;
        width: 100%;
        transform: none;
        top: 0;
        margin-top: 10px;
    }
    .natal-enfeite:nth-child(n+7) { display: none; }
    .natal-enfeite .fio { max-height: 22px; }
    .natal-enfeite svg { width: 28px; height: 28px; }
    .natal-enfeite:nth-child(1) { left: 2% !important; }
    .natal-enfeite:nth-child(2) { left: 19% !important; }
    .natal-enfeite:nth-child(3) { left: 36% !important; }
    .natal-enfeite:nth-child(4) { left: 53% !important; }
    .natal-enfeite:nth-child(5) { left: 70% !important; }
    .natal-enfeite:nth-child(6) { left: 87% !important; }
}

/* ==========================================================
   Fundo do site: degradê creme -> dourado com estrelas a piscar
   A camada .natal-fundo é criada pelo script em _NatalEnfeites.cshtml
   ========================================================== */
html body {
    background: transparent;
}

.natal-fundo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: #f5e6be;
    background: linear-gradient(to bottom, #fefcfa 0%, #faf3e0 30%, #f3e1b0 65%, #e9cf8e 100%);
}

.natal-estrela {
    position: absolute;
    opacity: 0;
    -webkit-animation: natal-piscar 4s ease-in-out infinite;
    animation: natal-piscar 4s ease-in-out infinite;
}

.natal-estrela svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #d1a543;
    filter: drop-shadow(0 0 2px rgba(255, 236, 170, .9));
}

.natal-estrela.branca svg { fill: #fff; }

@-webkit-keyframes natal-piscar {
    0%, 100% { opacity: .15; -webkit-transform: scale(.5) rotate(0deg); }
    50%      { opacity: 1; -webkit-transform: scale(1) rotate(20deg); }
}
@keyframes natal-piscar {
    0%, 100% { opacity: .15; transform: scale(.5) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
    .natal-estrela { -webkit-animation: none; animation: none; opacity: .7; }
}

/* ==========================================================
   Texto: o preto habitual do tema passa a bordeaux.
   Lista gerada a partir das regras do tema (style.css e vegas.less)
   que usam preto/cinzento muito escuro; cabeçalho, menu e rodapé
   ficam de fora. O botão "Adicionar ao carrinho" usa o bordeaux do banner.
   ========================================================== */
html .search-results .note a,
html body,
html #divencomenda a,
html #divencomenda .btn_alterar:hover,
html a,
html .aa-add-to-cart-btn,
html .aa-product-nav li a,
html .aa-products-tab li a:hover,
html .aa-products-tab li a:focus,
html .aa-product-catg li .aa-product-title,
html .aa-product-catg li .aa-product-title a,
html .aa-latest-blog-single .aa-blog-info .aa-blog-title,
html .aa-latest-blog-single .aa-blog-info .aa-blog-title a,
html .aa-latest-blog-single .aa-blog-info .aa-read-mor-btn:hover,
html .aa-latest-blog-single .aa-blog-info .aa-read-mor-btn:focus,
html #aa-subscribe .aa-subscribe-area h3,
html #aa-subscribe .aa-subscribe-area p,
html #aa-subscribe .aa-subscribe-area .aa-subscribe-form input[type="email"],
html #aa-product-category .aa-sidebar .aa-sidebar-widget .aa-recently-views ul li .aa-cartbox-info h4,
html #aa-product-category .aa-sidebar .aa-sidebar-widget .aa-recently-views ul li .aa-cartbox-info h4 a,
html #aa-product-category .aa-product-catg-content .aa-product-catg-head .aa-product-catg-head-right a,
html #aa-product-details .aa-product-details-area .aa-product-details-bottom #description ul li,
html #aa-product-details .aa-product-details-area .aa-product-details-bottom .aa-review-form label,
html #cart-view .cart-view-area .cart-view-table table thead tr th,
html #cart-view .cart-view-area .cart-view-table table tbody tr td .remove,
html #cart-view .cart-view-area .cart-view-table table tbody tr td .remove:hover,
html #cart-view .cart-view-area .cart-view-table table tbody tr .aa-cart-view-bottom .aa-cart-coupon .aa-coupon-code,
html #cart-view .cart-view-area .cart-view-table .cart-view-total h4,
html #checkout .checkout-area .checkout-left .panel-group .aa-checkout-coupon .aa-coupon-code,
html #checkout .checkout-area .checkout-left .panel-group .aa-checkout-login .aa-lost-password,
html #checkout .checkout-area .checkout-left .panel-group .aa-checkout-login .aa-lost-password a,
html .aa-login-form .aa-lost-password,
html .aa-login-form .aa-lost-password a,
html #aa-blog-archive .aa-blog-archive-area .aa-blog-sidebar .aa-sidebar-widget .aa-recently-views ul li .aa-cartbox-info h4,
html #aa-blog-archive .aa-blog-archive-area .aa-blog-sidebar .aa-sidebar-widget .aa-recently-views ul li .aa-cartbox-info h4 a,
html .aa-blog-details h2,
html .aa-blog-details h2 a,
html .aa-blog-details .aa-blog-content-single .blog-single-tag a,
html .aa-blog-details #respond input[type="text"],
html .aa-blog-details #respond input[type="email"],
html .aa-blog-details #respond input[type="url"],
html .aa-blog-details #respond textarea,
html #aa-contact .aa-contact-area .aa-contact-top h2,
html #aa-contact .aa-contact-area .aa-contact-top p,
html #aa-error .aa-error-area span,
html #aa-error .aa-error-area p a,
html #cart-select .cart-select-area .cart-select-table .table thead tr th,
html .wizard .nav-tabs > li.active > a,
html .wizard .nav-tabs > li.active > a:hover,
html .wizard .nav-tabs > li.active > a:focus,
html span.round-tab i,
html span.round-tab:hover,
html .FObee-row-1 .FObee-row-content,
html .FObee-row-2 .FObee-row-content,
html .btn_registar:hover,
html .promotional .thumbnail:hover .block-title h2,
html div > .form-group .editor-field input:not([type="checkbox"]),
html section > .form-group .editor-field input:not([type="checkbox"]),
html div > .form-group .editor-field textarea,
html section > .form-group .editor-field textarea,
html div.required > .form-group .editor-label label,
html section.required > .form-group .editor-label label,
html .aa-product-view-content .aa-prod-view-bottom .aa-add-to-cart-btn,
html #catalogs-modal a:hover,
html #ModalForgotPassword,
html .wizard-container .nav-pills > li > a,
html .wizard-container .nav-pills.ct-azure > li > a,
html h4.accordion,
html .edit a,
html .cartAddprodPhone .items .cartSection p .quantity,
html .cartsumphone .items .cartSection p .quantity,
html .cartDir .items .cartSection p .quantity,
html .aa-product-catg-firtsOrd li figure .aa-add-card-btn-firtsOrd,
html .aa-product-catg-firtsOrd li figure .aa-product-title-firtsOrd,
html .aa-product-catg-firtsOrd li figure .aa-product-title-firtsOrd a,
html .aa-product-catg-firtsOrd li figure .preco-small-firtsOrd,
html .btns:hover,
html #finish:hover,
html btn_alterar:hover,
html #ValidadeMyAccount2:hover,
html #minhaconta .aa-badge a label:hover,
html .btn-vegas:hover {
    color: #4a0f24;
}

html .aa-product-catg li figure .aa-add-card-btn {
    color: #950035 !important;
}

@media (max-width: 480px) {
    html .promotional .thumbnail:hover .block-title h2 {
        color: #4a0f24;
    }
}

@media only screen and (min-width: 501px) and (max-width: 811px) {
    html .removeWrap .remove {
        color: #4a0f24;
    }
}