/* Vinoteka · design LITE, live for all visitors since 2026-10-10 (copy of newdesign/stage1/tem_nd/lite.css). Same templates, layout, fonts, photos and texts; only colours, buttons, badges and hover effects are refined. */
:root{--l-gold:#c0a686;--l-bronze:#7d6748;--l-brown:#564530;--l-ink:#1b1512;--l-cream:#f8f3ea;--l-wine:#7a2434;--l-plum:#7d3558;--l-line:#e8dccb;--l-hover:#efe6d9;--l-track:#efe6d9}

/* 1. primary buttons: pink / purple -> dark brown, cream text */
html body .product__button,
html body .btn.btn-filter,
html body .button__add,
html body .cookies__button,
html body .checkout__button,
html body button.ms2_link,
html body .order__button{background-color:var(--l-brown)!important;color:var(--l-cream)!important;border-color:var(--l-brown)!important;transition:background-color .2s ease,border-color .2s ease}
html body .product__button:hover,html body .btn.btn-filter:hover,html body .button__add:hover,html body .cookies__button:hover,html body .checkout__button:hover{background-color:var(--l-ink)!important;border-color:var(--l-ink)!important}
html body .button__add--baground{background:var(--l-brown) url("/tem/img/cart__mobile.svg") no-repeat center!important}
html body .btn.btn-filter{background:var(--l-brown) url("/tem/img/filter__mobile.svg") no-repeat 15px!important;background-size:20px!important}
html body #mse2_filters .ui-slider-horizontal .ui-slider-handle{background:var(--l-brown)!important}
html body #mse2_filters .filter-list__li .mse2_number_slider{background:rgba(192,166,134,.25)!important}
/* secondary buttons: gold outline */
html body .btn__site.button--sub,html body .answer__button,html body .info__delever__button__close{background:transparent!important;border:1px solid var(--l-gold)!important;color:var(--l-cream)!important}
/* quiz answer sits on a light card: solid brown button like the primary buttons (was invisible cream on cream) */
html body .quiz__answer__contaner .answer__button{background:var(--l-brown)!important;border:0!important;color:var(--l-cream)!important}
html body .quiz__answer__contaner .answer__button:hover{background:var(--l-ink)!important}

/* 2. favourites: purple box -> gold outline, gold heart */
html body .product__button__favorite,
html body .product__button__favorite.msfavorites.voted{background:transparent!important;border:1px solid var(--l-gold)!important;transition:background-color .2s ease}
html body .product__button__favorite:hover{background:var(--l-hover)!important}
html body .product__button__favorite img,
html body .favorite__icon img{filter:brightness(0) saturate(100%) invert(72%) sepia(19%) saturate(468%) hue-rotate(353deg) brightness(91%)}
html body .product__button__favorite.voted,html body .product__button__favorite.active{background:var(--l-gold)!important}
html body .product__button__favorite.voted img,html body .product__button__favorite.active img{filter:brightness(0) invert(1)}

/* 3. taste scale (jQuery UI progressbar): fill drawn by lite.js, marker dark */
html body .structur__value .ui-progressbar{height:6px!important;background:var(--l-track)!important;border:0!important;border-radius:0!important}
html body .structur__value .ui-progressbar-value{background:var(--l-brown)!important;width:6px!important;height:6px!important;border-radius:0!important;margin-top:0!important}

/* 6. club / registration bar: plum, cream text */
html body .promo__popup{background:var(--l-plum)!important;color:var(--l-cream)!important}
html body .promo__1{background:#5e2742!important}
html body .promo__popup a,html body .promo__popup button{color:var(--l-cream)}
html body .cookies__block{background:var(--l-brown)!important;color:var(--l-cream)!important}
html body .phone__prompt{background:var(--l-brown)!important}
html body .phone__prompt:after{border-color:var(--l-brown) var(--l-brown) transparent transparent!important}

/* 5. wine quiz: already restyled live by banners v2 (image), nothing to override */
/* 7. sale badge: pink svg -> wine label */
html body .salec__icon img{display:none!important}
html body .salec__icon::after{content:"Sale";display:inline-block;background:var(--l-wine);color:var(--l-cream);font:600 10px/1 Montserrat,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:6px 8px}
html body.page__vn .salec__icon::after{content:"Ưu đãi"}

/* 8. calmer effects: 1px borders instead of big shadows and rounded corners */
html body .product{box-shadow:none!important;border-radius:0!important}
html body .product:hover{box-shadow:none!important}
html body .product__and__list .product,html body .box-shadow,html body .button__block__coperation,html body .block__popap,html body #ui-id-2.ui-widget-content,html body .sorting__container.active .catalog__sorting{box-shadow:none!important;border:1px solid var(--l-line)!important;border-radius:0!important}
html body .fancybox-content .box-shadow,html body .box-shadow.form--login{border:0!important}
html body .price__b2b__label{border-radius:0!important;background:var(--l-bronze)!important}

/* 9. small gold text on light backgrounds -> bronze (lite.js marks the elements) */
html body .l-bronze{color:var(--l-bronze)!important}

/* 10. visible keyboard focus */
html body a:focus-visible,html body button:focus-visible,html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible,html body [tabindex]:focus-visible{outline:2px solid var(--l-gold)!important;outline-offset:2px}

@media (prefers-reduced-motion:reduce){html body .product,html body .product__button{transition:none!important}}

/* Home: calmer vertical rhythm (56px desktop / 40px mobile between sections) and one heading style.
   Scoped to the home page only (.bg__index exists only there). */
html body:has(.bg__index) .text__info{padding-top:56px!important;padding-bottom:56px!important}
html body:has(.bg__index) .bannerTree{padding-top:56px!important}
html body:has(.bg__index) .filter_selection__block{margin-bottom:0!important}
html body:has(.bg__index) .products-index-title{margin-top:56px!important;margin-bottom:32px!important}
html body:has(.bg__index) .catalog__main .catalog__container{padding-bottom:56px!important}
html body:has(.bg__index) .banner__bottom{margin-bottom:56px!important}
html body:has(.bg__index) .block__content{padding-top:56px!important;padding-bottom:64px!important}
html body:has(.bg__index) .text__info__title,
html body:has(.bg__index) .h2-index,
html body:has(.bg__index) .filter_selection__text2{font-family:Title,sans-serif!important;font-size:48px!important;font-weight:500!important;line-height:1.08!important;color:#c0a686!important;margin-top:0!important}
html body:has(.bg__index) .text__info__title{margin-bottom:20px!important}
html body:has(.bg__index) .filter_selection__text2{margin:8px 0 12px!important}
@media (max-width:767px){
  html body:has(.bg__index) .text__info{padding-top:40px!important;padding-bottom:40px!important}
  html body:has(.bg__index) .products-index-title{margin-top:40px!important;margin-bottom:20px!important}
  html body:has(.bg__index) .catalog__main .catalog__container{padding-top:24px!important;padding-bottom:40px!important}
  html body:has(.bg__index) .banner__bottom{margin-bottom:40px!important}
  html body:has(.bg__index) .block__content{padding-top:40px!important;padding-bottom:48px!important}
  html body:has(.bg__index) .text__info__title,
  html body:has(.bg__index) .h2-index,
  html body:has(.bg__index) .filter_selection__text2{font-size:36px!important}
}