/*
 * Tiara promo/header layer.
 * Perla-style model: fixed promo strip, fixed header below it, color switch after scroll.
 */

:root {
  --tiara-promo-height: 24px;
  --tiara-promo-visible-height: 24px;
  --tiara-promo-scroll-offset: 0px;
  --tiara-viewport-width: 100vw;
  --tiara-header-ink: #1e1e1e;
  --tiara-header-panel-opacity: 1;
  --tiara-header-panel-overlap: 1px;
  --tiara-header-hide-distance: 96px;
  --tiara-header-soft-transition: 360ms cubic-bezier(.22, .61, .36, 1);
  --tiara-drawer-opacity-transition: 180ms ease;
  --tiara-drawer-reveal-transition: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@supports (width: 100dvw) {
  :root {
    --tiara-viewport-width: 100dvw;
  }
}

@media (max-width: 840px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    html,
    body {
      overflow-x: clip;
    }
  }
}

body.common-home {
  --tiara-header-ink: #fff;
  --tiara-header-panel-opacity: 0;
}

body.common-home.tiara-header-is-scrolled {
  --tiara-header-ink: #1e1e1e;
  --tiara-header-panel-opacity: 1;
}

body.common-home .wrapper {
  padding-top: 0 !important;
}

header .container-cart {
  position: fixed !important;
  top: var(--header-space, 80px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 1200 !important;
  width: min(350px, 100vw) !important;
  max-width: 100vw !important;
  max-height: calc(100dvh - var(--header-space, 80px)) !important;
  overflow-y: auto !important;
  clip-path: inset(0 0 100% 0) !important;
  transform: none !important;
  transform-origin: top center !important;
  will-change: opacity, clip-path !important;
  pointer-events: none !important;
  transition:
    opacity var(--tiara-drawer-opacity-transition),
    clip-path var(--tiara-drawer-reveal-transition),
    visibility 0s linear 180ms !important;
}

header .container-cart.in {
  clip-path: inset(0 0 0 0) !important;
  transform: none !important;
  pointer-events: auto !important;
  transition:
    opacity var(--tiara-drawer-opacity-transition),
    clip-path var(--tiara-drawer-reveal-transition),
    visibility 0s linear 0s !important;
}

body.tiara-cart-open header .tiara-header-motion,
body.mobile:is(.tiara-menu-open, .tiara-cart-open, .tiara-search-open) header .tiara-header-motion,
body.mobile header.tiara-menu-open .tiara-header-motion {
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
  will-change: auto !important;
}

body.mobile header .container-cart {
  top: var(--header-space, calc(64px + var(--tiara-promo-visible-height, 24px))) !important;
  max-height: min(
    calc(100dvh - var(--header-space, calc(64px + var(--tiara-promo-visible-height, 24px)))),
    90dvh
  ) !important;
}

@media (max-width: 840px) {
  header .container-cart {
    top: var(--header-space, calc(64px + var(--tiara-promo-visible-height, 24px))) !important;
    max-height: min(
      calc(100dvh - var(--header-space, calc(64px + var(--tiara-promo-visible-height, 24px)))),
      90dvh
    ) !important;
  }
}

body.common-home #common-home,
body.common-home .main_video {
  margin-top: 0 !important;
}

@media (max-width: 840px) {
  body.mobile.common-home .main_video,
  body.mobile.common-home .main_video__inner {
    width: calc(var(--tiara-viewport-width, 100%) + 2px) !important;
    max-width: none !important;
    margin-right: -2px !important;
    overflow: hidden !important;
  }

  body.mobile.common-home .main_video__video,
  body.mobile.common-home .main_video__video-el,
  body.mobile.common-home .main_video__poster {
    width: calc(100% + 2px) !important;
    max-width: none !important;
    margin-right: -2px !important;
    object-fit: cover !important;
  }
}

header,
body header.fixed,
body header.header--hidden,
body header.fixed.header--hidden,
body.mobile header,
body.mobile header.fixed,
body.mobile header.header--hidden,
body.mobile header.fixed.header--hidden {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100 !important;
  width: var(--tiara-viewport-width, 100%) !important;
  max-width: var(--tiara-viewport-width, 100%) !important;
  display: flex !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
  align-items: stretch !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.tiara-header-motion {
  position: relative !important;
  display: flex !important;
  width: var(--tiara-viewport-width, 100%) !important;
  max-width: var(--tiara-viewport-width, 100%) !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
  align-items: stretch !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 720ms cubic-bezier(.22, .61, .36, 1) !important;
  will-change: transform !important;
}

header.tiara-header-away .tiara-header-motion,
body header.tiara-header-away .tiara-header-motion,
body.mobile header.tiara-header-away .tiara-header-motion {
  transform: translate3d(0, calc(var(--tiara-header-hide-distance) * -1), 0) !important;
}

.tiara-header-motion::before {
  content: "";
  position: absolute;
  top: calc(var(--tiara-promo-visible-height) - var(--tiara-header-panel-overlap));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: #fff;
  opacity: var(--tiara-header-panel-opacity);
  transition:
    opacity var(--tiara-header-soft-transition),
    top var(--tiara-header-soft-transition);
  pointer-events: none;
}

.tiara-header-motion > * {
  position: relative;
  z-index: 1;
}

body.common-home header a,
body.common-home header button,
body.common-home header .menu_wrapp,
body.common-home header #mobile-search,
body.common-home header #wishlist-total,
body.common-home header #cart,
body.common-home header #cart .head-ico,
body.common-home header .header__cart {
  transition: color 360ms ease !important;
}

body.common-home header {
  transition: color 360ms ease !important;
}

body.common-home header #logo img,
body.common-home header .logo img,
body.common-home header #mobile-search svg,
body.common-home header #cart svg,
body.common-home header #mobile-cart svg,
body.common-home header #wishlist-total svg,
body.common-home header .header__cart svg,
body.common-home header .wishlist svg {
  transition: filter 360ms ease !important;
}

body.common-home header #show_categories_btn .burger > span,
body.common-home header .catalog .burger > span,
body.common-home header #cart-total,
body.common-home header #wishlist-total.not__empty .whishlist-total {
  transition: background-color 360ms ease, color 360ms ease, filter 360ms ease !important;
}

.promo-bar {
  position: relative !important;
  width: var(--tiara-viewport-width, 100%) !important;
  max-width: var(--tiara-viewport-width, 100%) !important;
  box-sizing: border-box !important;
  height: var(--tiara-promo-visible-height) !important;
  min-height: var(--tiara-promo-visible-height) !important;
  flex: 0 0 var(--tiara-promo-visible-height) !important;
  overflow: hidden !important;
  background: #dedbd4 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition:
    height var(--tiara-header-soft-transition),
    min-height var(--tiara-header-soft-transition),
    flex-basis var(--tiara-header-soft-transition);
}

.promo-bar__viewport {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--tiara-promo-height) !important;
  overflow: hidden !important;
  transform: translateY(calc(var(--tiara-promo-scroll-offset) * -1)) !important;
  transition: transform var(--tiara-header-soft-transition);
}

.promo-bar__item {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--tiara-promo-height) !important;
  padding: 0 14px !important;
  color: #3c3834 !important;
  font-family: "Gotham Pro", sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: var(--tiara-promo-height) !important;
  letter-spacing: .08em !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-synthesis: none;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.promo-bar__item.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.promo-bar__item.is-exiting {
  transform: translateY(-100%);
  opacity: 0;
}

.promo-bar__item.is-entering {
  transform: translateY(0);
  opacity: 1;
}

header .header,
header .container,
header .container-header,
header .content-header,
header .menu_wrapp,
header button#show_categories_btn {
  background: transparent !important;
}

header .container {
  width: var(--tiara-viewport-width, 100%) !important;
  max-width: var(--tiara-viewport-width, 100%) !important;
  box-sizing: border-box !important;
}

body.common-home header,
body.common-home header a,
body.common-home header button,
body.common-home header .btn_name,
body.common-home header .head-title,
body.common-home header .head-3,
body.common-home header .head-3 a,
body.common-home header .account-wrap,
body.common-home header .account-wrap a,
body.common-home header .header__icon,
body.common-home header .header__icon span,
body.common-home header .menu_wrapp,
body.common-home header .menu_wrapp a,
body.common-home header .menu_wrapp button,
body.common-home header #mobile-search,
body.common-home header #wishlist-total,
body.common-home header #show_categories_btn,
body.common-home header #cart .head-ico {
  color: var(--tiara-header-ink) !important;
}

body.common-home header #logo img,
body.common-home header .logo img {
  filter: brightness(0) invert(1) !important;
}

body.common-home.tiara-header-is-scrolled header #logo img,
body.common-home.tiara-header-is-scrolled header .logo img {
  filter: none !important;
}

body.mobile.common-home.tiara-header-is-scrolled header.header--transparent #logo img,
body.mobile.common-home.tiara-header-is-scrolled header.header--transparent .logo img {
  filter: none !important;
}

body.common-home header #show_categories_btn .burger > span,
body.common-home header .catalog .burger > span {
  background: var(--tiara-header-ink) !important;
  filter: none !important;
}

body.mobile.common-home.tiara-header-is-scrolled header.header--transparent #show_categories_btn .burger > span,
body.mobile.common-home.tiara-header-is-scrolled header.header--transparent .catalog .burger > span {
  background: #1e1e1e !important;
  filter: none !important;
}

body.common-home header #cart-total,
body.common-home header #wishlist-total.not__empty .whishlist-total {
  background: #fff !important;
  color: #1e1e1e !important;
  filter: none !important;
}

body.common-home.tiara-header-is-scrolled header #cart-total,
body.common-home.tiara-header-is-scrolled header #wishlist-total.not__empty .whishlist-total {
  background: #1e1e1e !important;
  color: #fff !important;
}

body.common-home header .promo-bar,
body.common-home header .promo-bar a,
body.common-home header .promo-bar__item {
  color: #3c3834 !important;
}

@media (max-width: 767px) {
  .promo-bar__item {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Final state colors. Keep painting in CSS, not JS. */
body.common-home header.tiara-header-top,
body.common-home header.tiara-header-top a,
body.common-home header.tiara-header-top button,
body.common-home header.tiara-header-top .menu_wrapp,
body.common-home header.tiara-header-top .menu_wrapp a,
body.common-home header.tiara-header-top .menu_wrapp button,
body.common-home header.tiara-header-top #mobile-search,
body.common-home header.tiara-header-top #wishlist-total,
body.common-home header.tiara-header-top #cart,
body.common-home header.tiara-header-top #cart .head-ico,
body.common-home header.tiara-header-top .header__cart {
  color: #fff !important;
}

/* The cart drawer is a white panel inside the header — keep its content dark. */
body.common-home header.tiara-header-top .container-cart,
body.common-home header.tiara-header-top .container-cart a,
body.common-home header.tiara-header-top .container-cart button {
  color: #1e1e1e !important;
}

body.common-home header.tiara-header-top .container-cart a.btn-checkout,
body.common-home header.tiara-header-top .container-cart .mini-cart-empty__button {
  color: #fff !important;
}

body.common-home header.tiara-header-top #logo img,
body.common-home header.tiara-header-top .logo img {
  filter: brightness(0) invert(1) !important;
}

body.common-home header.tiara-header-top #mobile-search svg,
body.common-home header.tiara-header-top #cart svg,
body.common-home header.tiara-header-top #mobile-cart svg,
body.common-home header.tiara-header-top #wishlist-total svg,
body.common-home header.tiara-header-top .header__cart svg,
body.common-home header.tiara-header-top .wishlist svg {
  filter: brightness(0) invert(1) !important;
}

/* The cart drawer is a white panel — its SVGs keep their own colors. The invert above is for head icons only. */
body.common-home header.tiara-header-top .mini-cart .container-cart svg,
body.common-home header.tiara-header-top #mobile-cart .container-cart svg {
  filter: none !important;
}

body.common-home header.tiara-header-top #show_categories_btn .burger > span,
body.common-home header.tiara-header-top .catalog .burger > span {
  background: #fff !important;
}

body.common-home header.tiara-header-scrolled,
body.common-home header.tiara-header-scrolled a,
body.common-home header.tiara-header-scrolled button,
body.common-home header.tiara-header-scrolled .menu_wrapp,
body.common-home header.tiara-header-scrolled .menu_wrapp a,
body.common-home header.tiara-header-scrolled .menu_wrapp button,
body.common-home header.tiara-header-scrolled #mobile-search,
body.common-home header.tiara-header-scrolled #wishlist-total,
body.common-home header.tiara-header-scrolled #cart,
body.common-home header.tiara-header-scrolled #cart .head-ico,
body.common-home header.tiara-header-scrolled .header__cart,
body.mobile.common-home header.tiara-header-scrolled.header--transparent,
body.mobile.common-home header.tiara-header-scrolled.header--transparent a,
body.mobile.common-home header.tiara-header-scrolled.header--transparent button {
  color: #1e1e1e !important;
}

body.common-home header.tiara-header-scrolled #logo img,
body.common-home header.tiara-header-scrolled .logo img,
body.mobile.common-home header.tiara-header-scrolled.header--transparent #logo img,
body.mobile.common-home header.tiara-header-scrolled.header--transparent .logo img {
  filter: none !important;
}

body.common-home header.tiara-header-scrolled #mobile-search svg,
body.common-home header.tiara-header-scrolled #cart svg,
body.common-home header.tiara-header-scrolled #mobile-cart svg,
body.common-home header.tiara-header-scrolled #wishlist-total svg,
body.common-home header.tiara-header-scrolled .header__cart svg,
body.common-home header.tiara-header-scrolled .wishlist svg,
body.mobile.common-home header.tiara-header-scrolled.header--transparent #mobile-search svg,
body.mobile.common-home header.tiara-header-scrolled.header--transparent #cart svg,
body.mobile.common-home header.tiara-header-scrolled.header--transparent #mobile-cart svg,
body.mobile.common-home header.tiara-header-scrolled.header--transparent #wishlist-total svg,
body.mobile.common-home header.tiara-header-scrolled.header--transparent .header__cart svg,
body.mobile.common-home header.tiara-header-scrolled.header--transparent .wishlist svg {
  filter: none !important;
}

body.common-home header.tiara-header-scrolled #show_categories_btn .burger > span,
body.common-home header.tiara-header-scrolled .catalog .burger > span,
body.mobile.common-home header.tiara-header-scrolled.header--transparent #show_categories_btn .burger > span,
body.mobile.common-home header.tiara-header-scrolled.header--transparent .catalog .burger > span {
  background: #1e1e1e !important;
}

body.common-home header .promo-bar,
body.common-home header .promo-bar a,
body.common-home header .promo-bar__item,
body.common-home header.tiara-header-top .promo-bar,
body.common-home header.tiara-header-top .promo-bar a,
body.common-home header.tiara-header-top .promo-bar__item,
body.common-home header.tiara-header-scrolled .promo-bar,
body.common-home header.tiara-header-scrolled .promo-bar a,
body.common-home header.tiara-header-scrolled .promo-bar__item {
  color: #3c3834 !important;
}

body.mobile .sc-megamenu {
  clip-path: inset(0 0 100% 0) !important;
  transform: none !important;
  transform-origin: top center !important;
  will-change: opacity, clip-path !important;
  transition:
    opacity var(--tiara-drawer-opacity-transition),
    clip-path var(--tiara-drawer-reveal-transition),
    visibility 0s linear 180ms !important;
}

body.mobile .sc-megamenu.active {
  clip-path: inset(0 0 0 0) !important;
  transform: none !important;
  transition:
    opacity var(--tiara-drawer-opacity-transition),
    clip-path var(--tiara-drawer-reveal-transition),
    visibility 0s linear 0s !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) #overlay {
  top: var(--header-space, calc(64px + var(--tiara-promo-visible-height, 24px))) !important;
  z-index: 80 !important;
}

/* Mobile overlay header state. Keep this block as the single source of truth:
   drawers open under a white header, while every header control stays dark. */
body:is(.tiara-menu-open, .tiara-cart-open) {
  --tiara-header-ink: #1e1e1e;
  --tiara-header-panel-opacity: 1;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header:not(.sc-megamenu),
body.mobile header.tiara-menu-open:not(.sc-megamenu),
body.mobile:is(.tiara-menu-open, .tiara-cart-open) header.fixed:not(.sc-megamenu),
body.mobile:is(.tiara-menu-open, .tiara-cart-open) header.header--hidden:not(.sc-megamenu),
body.mobile:is(.tiara-menu-open, .tiara-cart-open) header.tiara-header-away:not(.sc-megamenu) {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  background: #fff !important;
  color: var(--tiara-header-ink) !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header .tiara-header-motion::before,
body.mobile header.tiara-menu-open .tiara-header-motion::before {
  top: 0 !important;
  background: #fff !important;
  opacity: 1 !important;
  transition:
    opacity var(--tiara-drawer-opacity-transition),
    top var(--tiara-drawer-reveal-transition) !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header :is(.header, .container, .container-header, .content-header, .menu_wrapp),
body.mobile header.tiara-menu-open :is(.header, .container, .container-header, .content-header, .menu_wrapp) {
  background: #fff !important;
  color: var(--tiara-header-ink) !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header,
body.mobile:is(.tiara-menu-open, .tiara-cart-open) header a,
body.mobile:is(.tiara-menu-open, .tiara-cart-open) header button,
body.mobile header.tiara-menu-open,
body.mobile header.tiara-menu-open a,
body.mobile header.tiara-menu-open button {
  color: var(--tiara-header-ink) !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header :is(.tiara-header-motion, .container-header, .catalog, #mobile-search, #wishlist-total, #mobile-cart, .header__cart),
body.mobile header.tiara-menu-open :is(.tiara-header-motion, .container-header, .catalog, #mobile-search, #wishlist-total, #mobile-cart, .header__cart) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header #logo,
body.mobile header.tiara-menu-open #logo {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header :is(#logo img, .logo img, #mobile-search svg, #wishlist-total svg, #cart svg, #mobile-cart svg, .header__cart svg, .wishlist svg),
body.mobile header.tiara-menu-open :is(#logo img, .logo img, #mobile-search svg, #wishlist-total svg, #cart svg, #mobile-cart svg, .header__cart svg, .wishlist svg) {
  filter: none !important;
  opacity: 1 !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header :is(#show_categories_btn, #mobile-search, #wishlist-total, #cart, #cart .head-ico, #cart-total, .whishlist-total, .header__cart),
body.mobile header.tiara-menu-open :is(#show_categories_btn, #mobile-search, #wishlist-total, #cart, #cart .head-ico, #cart-total, .whishlist-total, .header__cart) {
  color: var(--tiara-header-ink) !important;
}

body.mobile.tiara-cart-open header .container-cart :is(.btn-checkout, .mini-cart-empty__button),
body.mobile.tiara-menu-open header .container-cart :is(.btn-checkout, .mini-cart-empty__button) {
  color: #fff !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header :is(#cart-total, #wishlist-total.not__empty .whishlist-total),
body.mobile header.tiara-menu-open :is(#cart-total, #wishlist-total.not__empty .whishlist-total) {
  background: #1e1e1e !important;
  color: #fff !important;
  filter: none !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header :is(#mobile-search, #wishlist-total, #cart, #mobile-cart, .header__cart, .wishlist) svg [stroke],
body.mobile header.tiara-menu-open :is(#mobile-search, #wishlist-total, #cart, #mobile-cart, .header__cart, .wishlist) svg [stroke] {
  stroke: var(--tiara-header-ink) !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header :is(#mobile-search, #wishlist-total, #cart, #mobile-cart, .header__cart, .wishlist) svg [fill]:not([fill="none"]),
body.mobile header.tiara-menu-open :is(#mobile-search, #wishlist-total, #cart, #mobile-cart, .header__cart, .wishlist) svg [fill]:not([fill="none"]) {
  fill: var(--tiara-header-ink) !important;
}

body.mobile:is(.tiara-menu-open, .tiara-cart-open) header :is(#show_categories_btn, .catalog) .burger > span,
body.mobile header.tiara-menu-open :is(#show_categories_btn, .catalog) .burger > span {
  background: var(--tiara-header-ink) !important;
}
