/* =========================================================
   HX HEADER / MEGA / MOBILE MENU / SEARCH
   ONE TEMPLATE + LIGHT MODE VIA ROOT CLASS
   root on light first-screen pages:
   hx-header hx-header--dark
   ========================================================= */

/* =========================
   LIGHT PAGE MODE
   ========================= */
/* light pages */
.hx-header.hx-header--dark{
  --hx-idle-link: rgba(18,17,16,.84) !important;
  --hx-idle-logo: rgba(18,17,16,.78) !important;
  --hx-idle-icon: rgba(18,17,16,.88) !important;
  --hx-idle-underline: rgba(18,17,16,.74) !important;
}

/* =========================
   BASE RESET
   ========================= */
.hx-header,
.hx-header > div,
.hx-header .e-con,
.hx-header .e-child,
.hx-header .elementor-element,
.hx-header .elementor-widget,
.hx-header .elementor-widget-container,
.hx-header__inner,
.hx-header__left,
.hx-header__center,
.hx-header__right,
.hx-header-nav,
.hx-header-right-group{
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* =========================
   HEADER TOKENS + BASE
   ========================= */
.hx-header{
  --hx-ivory: #f4f1ea;
  --hx-ink: #121110;
  --hx-muted: rgba(18,17,16,.58);
  --hx-muted-soft: rgba(18,17,16,.44);
  --hx-line: rgba(18,17,16,.10);

  --hx-light-link: rgba(247,244,238,.94);
  --hx-light-logo: rgba(247,244,238,.78);
  --hx-light-icon: #ffffff;
  --hx-light-underline: rgba(247,244,238,.92);

  --hx-dark-link: #121110;
  --hx-dark-logo: rgba(18,17,16,.72);
  --hx-dark-icon: #121110;
  --hx-dark-underline: #121110;

  --hx-idle-link: var(--hx-light-link);
  --hx-idle-logo: var(--hx-light-logo);
  --hx-idle-icon: var(--hx-light-icon);
  --hx-idle-underline: var(--hx-light-underline);

  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 200 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  transition:
    transform .36s cubic-bezier(.25, 1, .5, 1),
    background-color .24s ease,
    color .24s ease !important;
}

.hx-header::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--hx-ivory) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .24s ease !important;
  z-index: 0 !important;
}

.hx-header__inner{
  position: relative !important;
  z-index: 2 !important;
  min-height: 88px !important;
  padding: 0 56px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  column-gap: 76px !important;
  border-bottom: 0 !important;
  transition:
  padding .24s ease,
  column-gap .24s ease,
  min-height .24s ease !important;
}

.hx-header__left,
.hx-header__center,
.hx-header__right{
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.hx-header__left{ justify-content: flex-start !important; }
.hx-header__center{ justify-content: center !important; }
.hx-header__right{ justify-content: flex-end !important; }

/* =========================
   LOGO
   ========================= */
.hx-logo,
.hx-logo .elementor-heading-title,
.hx-header__center .elementor-heading-title{
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.hx-logo .elementor-heading-title,
.hx-logo .elementor-heading-title a,
.hx-header__center .elementor-heading-title,
.hx-header__center .elementor-heading-title a{
  font-family: "Prata", serif !important;
  font-size: 24px !important;
  letter-spacing: .24em !important;
  text-transform: uppercase !important;
  color: var(--hx-idle-logo) !important;
  text-decoration: none !important;
  transition: color .24s ease, opacity .24s ease !important;
}

.hx-logo .elementor-heading-title a:hover,
.hx-header__center .elementor-heading-title a:hover{
  opacity: .7 !important;
}

/* =========================
   DESKTOP NAV
   ========================= */
.hx-header__inner a,
.hx-header__inner .elementor-item,
.hx-header__inner .e-n-menu-title,
.hx-header-link{
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transition: color .24s ease, opacity .24s ease !important;
}

.hx-header__left a,
.hx-header__right a,
.hx-header-nav a,
.hx-header__inner .elementor-nav-menu a,
.hx-header__inner .elementor-nav-menu .elementor-item,
.hx-header-link{
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--hx-idle-link) !important;
  opacity: 1 !important;
  transition: color .24s ease, opacity .24s ease !important;
  border: 0 !important;
}

.hx-header__inner .elementor-nav-menu{
  gap: 26px !important;
}

.hx-header-nav,
.hx-header-right-group{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.hx-header-nav{
  flex-direction: row !important;
  gap: 26px !important;
  white-space: nowrap !important;
}

.hx-header-right-group{
  gap: 22px !important;
}

.hx-header-link{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 88px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  color: var(--hx-idle-link) !important;
}

.hx-header-link,
.hx-mega-trigger,
.hx-header-icons a,
.hx-header__icons a,
.hx-mobile-menu__direct,
.hx-mobile-menu__toggle{
  cursor: pointer !important;
}

.hx-header-link:hover{
  opacity: .72 !important;
}

.hx-header-link::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 20px !important;
  height: 1px !important;
  background: var(--hx-idle-underline) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .22s ease, background-color .22s ease !important;
}

.hx-header-link:hover::after,
.hx-header-link.is-open::after,
.hx-mega-trigger.is-open::after{
  transform: scaleX(1) !important;
}

/* =========================
   DESKTOP ICONS
   ========================= */
.hx-header-icons,
.hx-header__icons{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
}

.hx-header-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  color: var(--hx-idle-icon) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color .24s ease, opacity .24s ease !important;
}

.hx-header-icon:hover{
  opacity: .72 !important;
}

.hx-header-icon svg{
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.45 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
}

.hx-header-icon svg path,
.hx-header-icon svg circle{
  stroke: currentColor !important;
}

/* =========================
   BURGER
   ========================= */
.hx-burger{
  display: none !important;
  position: relative !important;
  width: 24px !important;
  height: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  color: var(--hx-idle-icon) !important;
  transition: color .24s ease !important;
}

.hx-burger span{
  position: absolute !important;
  left: 0 !important;
  width: 24px !important;
  height: 1px !important;
  background: currentColor !important;
  transition: background-color .24s ease !important;
}

.hx-burger span:first-child{ top: 4px !important; }
.hx-burger span:last-child{ top: 12px !important; }

/* =========================
   MEGA MENU
   ========================= */
.hx-mega{
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;

  width: 100vw !important;
  max-width: 100vw !important;

  transform: translateX(-50%) !important;

  z-index: 190 !important;
  pointer-events: none !important;
}

.hx-header.is-mega-open .hx-mega{
  pointer-events: auto !important;
}

.hx-mega-panel{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  max-width: none !important;

  background: var(--hx-ivory) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform: translateY(8px) !important;

  transition:
    opacity .24s ease,
    transform .24s ease,
    visibility .24s ease !important;
}

.hx-mega-panel.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.hx-mega-inner{
  display: grid !important;
  grid-template-columns: minmax(180px,260px) minmax(220px,320px) minmax(280px,420px) !important;
  gap: 56px !important;
  align-items: start !important;

  width: 100% !important;
  min-height: 500px !important;

  padding: 34px 56px 48px !important;

  background: var(--hx-ivory) !important;

  border-top: 1px solid rgba(18,17,16,.08) !important;
  border-bottom: 1px solid rgba(18,17,16,.08) !important;

  box-shadow: none !important;
}

.hx-mega-inner--two{
  grid-template-columns: minmax(220px,320px) minmax(320px,440px) !important;
  justify-content: start !important;
}

.hx-mega-col{
  min-width: 0 !important;
}

.hx-header .hx-mega .hx-mega-kicker{
  margin: 0 0 18px !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  letter-spacing: .19em !important;
  text-transform: uppercase !important;
  color: rgba(18,17,16,.44) !important;
}

.hx-header .hx-mega .hx-mega-title{
  display: inline-block !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  text-decoration: none !important;
  font-family: "Prata", serif !important;
  font-size: clamp(20px, 1.25vw, 22px) !important;
  line-height: 1.14 !important;
  letter-spacing: -.018em !important;
  text-transform: none !important;
  color: #121110 !important;
  opacity: 1 !important;
  transition: opacity .22s ease !important;
}

.hx-header .hx-mega .hx-mega-title:hover{
  opacity: .68 !important;
}

/* Samples contains the longest labels, so its navigation titles
   are kept one step quieter than the Materials panel. */
.hx-header .hx-mega-panel[data-panel="samples"] .hx-mega-title{
  max-width: 270px !important;
  font-size: clamp(19px, 1.15vw, 21px) !important;
}

.hx-header .hx-mega .hx-mega-sub + .hx-mega-title{
  margin-top: 17px !important;
}

.hx-header .hx-mega .hx-mega-sub{
  max-width: 30ch !important;
  margin: 0 !important;
  font-family: "Inter", sans-serif !important;
  font-size: clamp(12.5px, .78vw, 14px) !important;
  line-height: 1.54 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  color: rgba(18,17,16,.62) !important;
  opacity: 1 !important;
}

.hx-header .hx-mega .hx-mega-feature{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 420px !important;
}

.hx-header .hx-mega .hx-mega-feature img{
  display: block !important;
  width: 100% !important;
  max-width: 420px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  margin: 0 0 18px !important;
  border-radius: 0 !important;
}

.hx-header .hx-mega .hx-mega-feature-title{
  max-width: 32ch !important;
  margin: 0 0 11px !important;
  font-family: "Prata", serif !important;
  font-size: clamp(18px, 1.1vw, 20px) !important;
  line-height: 1.20 !important;
  letter-spacing: -.018em !important;
  color: #121110 !important;
  opacity: 1 !important;
}

.hx-header .hx-mega .hx-mega-feature-link{
  display: inline-block !important;
  text-decoration: none !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  color: rgba(18,17,16,.72) !important;
  opacity: 1 !important;
  transition: opacity .22s ease !important;
}

.hx-header .hx-mega .hx-mega-feature-link:hover{
  opacity: .62 !important;
}

body.is-header-ui{
  overflow-x: clip;
}

/* =========================
   MOBILE MENU OVERLAY
   ========================= */
.hx-mobile-menu{
  position: fixed !important;
  inset: 0 !important;
  z-index: 160 !important;
  background: var(--hx-ivory) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity .24s ease, visibility .24s ease, transform .24s ease !important;
}

.hx-header.is-mobile-menu-open .hx-mobile-menu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.hx-mobile-menu__top{
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 72px !important;
  padding: 18px 20px 14px !important;
  background: var(--hx-ivory) !important;
  border-bottom: 1px solid rgba(18,17,16,.08) !important;
}

.hx-mobile-menu__close{
  flex: 0 0 60px !important;
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.hx-mobile-menu__close span{
  position: absolute !important;
  top: 11px !important;
  left: 2px !important;
  width: 20px !important;
  height: 1px !important;
  background: #121110 !important;
}

.hx-mobile-menu__close span:first-child{
  transform: rotate(45deg) !important;
}

.hx-mobile-menu__close span:last-child{
  transform: rotate(-45deg) !important;
}

.hx-mobile-menu__brand{
  flex: 1 1 auto !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-family: "Prata", serif !important;
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: rgba(18,17,16,.9) !important;
}

.hx-mobile-menu__top-icons{
  flex: 0 0 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.hx-mobile-menu__top-icons .hx-header-icon{
  width: 18px !important;
  height: 18px !important;
  color: #121110 !important;
}

.hx-mobile-menu__top-icons .hx-header-icon svg,
.hx-mobile-menu__top-icons .hx-header-icon svg path,
.hx-mobile-menu__top-icons .hx-header-icon svg circle{
  stroke: #121110 !important;
}

.hx-mobile-menu__inner{
  height: calc(100dvh - 72px) !important;
  overflow-y: auto !important;
  padding: 12px 20px 24px !important;
  background: var(--hx-ivory) !important;
}

body.is-mobile-menu-open{
  overflow: hidden !important;
}

.hx-mobile-menu__section{
  border-top: 1px solid rgba(18,17,16,.10) !important;
}

.hx-mobile-menu__section:first-child{
  border-top: 0 !important;
}

.hx-mobile-menu__direct,
.hx-mobile-menu__toggle{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-align: left !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: #121110 !important;
}

.hx-mobile-menu__toggle::after{
  content: "+" !important;
  font-family: "Inter", sans-serif !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: rgba(18,17,16,.62) !important;
}

.hx-mobile-menu__section.is-open .hx-mobile-menu__toggle::after{
  content: "−" !important;
}

.hx-mobile-menu__panel{
  display: none !important;
  padding: 0 0 24px !important;
}

.hx-mobile-menu__section.is-open .hx-mobile-menu__panel{
  display: block !important;
}

.hx-mobile-menu__item + .hx-mobile-menu__item{
  margin-top: 20px !important;
}

.hx-mobile-menu__title{
  display: block !important;
  text-decoration: none !important;
  margin: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: #121110 !important;
}

.hx-mobile-menu__sub{
  margin: 4px 0 0 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(18,17,16,.5) !important;
}

.hx-mobile-menu__kicker,
.hx-mobile-menu__bottom{
  display: none !important;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1366px){
  .hx-header__inner{
    padding: 0 40px !important;
    column-gap: 52px !important;
  }

  .hx-header-nav{
    gap: 20px !important;
  }

  .hx-header-right-group{
    gap: 18px !important;
  }

  .hx-mega-inner{
    grid-template-columns: minmax(170px,220px) minmax(200px,280px) minmax(260px,360px) !important;
    gap: 40px !important;

    min-height: 470px !important;

    padding: 30px 40px 42px !important;
  }

  .hx-mega-inner--two{
    grid-template-columns: minmax(220px,280px) minmax(280px,380px) !important;
  }
}

@media (max-width: 1180px){
  .hx-header__inner{
    padding: 0 28px !important;
    column-gap: 32px !important;
  }

  .hx-header-nav{
    gap: 16px !important;
  }

  .hx-header-right-group{
    gap: 14px !important;
  }

  .hx-logo,
  .hx-logo .elementor-heading-title,
  .hx-header__center .elementor-heading-title{
    font-size: 20px !important;
    letter-spacing: .18em !important;
  }
}


/* =========================
   MEGA MENU — 1025–1280 PX
   Right column remains compact and does not drop below navigation.
   ========================= */
@media (min-width: 1025px) and (max-width: 1280px){
  .hx-mega-inner{
    grid-template-columns:
      minmax(170px, .82fr)
      minmax(190px, .92fr)
      minmax(260px, 1.08fr) !important;

    gap: clamp(22px, 2.4vw, 32px) !important;

    min-height: 450px !important;

    padding: 26px 28px 38px !important;
  }

  .hx-mega-inner--two{
    grid-template-columns:
      minmax(200px, .9fr)
      minmax(280px, 1.1fr) !important;
  }

  .hx-header .hx-mega .hx-mega-feature{
    grid-column: auto !important;
    width: 100% !important;
    max-width: 340px !important;
  }

  .hx-header .hx-mega .hx-mega-feature img{
    width: 100% !important;
    max-width: 340px !important;
    aspect-ratio: 4 / 3 !important;
    margin-bottom: 14px !important;
  }

  .hx-header .hx-mega .hx-mega-feature-title{
    max-width: 30ch !important;
    margin-bottom: 9px !important;
    font-size: clamp(17px, 1.45vw, 19px) !important;
    line-height: 1.18 !important;
  }
}

/* =========================
   MEGA MENU — LOW DESKTOP HEIGHT
   Covers common 1366 × 768 and similar laptop viewports.
   ========================= */
@media (min-width: 1025px) and (max-height: 800px){
  .hx-mega-panel{
    max-height: calc(100svh - 88px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;
    scrollbar-gutter: auto !important;

    background: var(--hx-ivory) !important;
  }

  .hx-mega-inner{
    min-height: 0 !important;

    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }

  .hx-header .hx-mega .hx-mega-kicker{
    margin-bottom: 14px !important;
  }

  .hx-header .hx-mega .hx-mega-sub + .hx-mega-title{
    margin-top: 14px !important;
  }

  .hx-header .hx-mega .hx-mega-feature img{
    max-height: 230px !important;
    object-fit: cover !important;
    margin-bottom: 12px !important;
  }

  .hx-header .hx-mega .hx-mega-feature-title{
    margin-bottom: 8px !important;
  }
}

@media (max-width: 1024px){
  .hx-header__inner{
    min-height: 72px !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: 24px 1fr auto !important;
    align-items: center !important;
    column-gap: 16px !important;
  }

  .hx-header__left{ justify-content: flex-start !important; }
  .hx-header__center{ justify-content: center !important; }
  .hx-header__right{ justify-content: flex-end !important; }

  .hx-header-nav--left,
  .hx-header-nav--right,
  .hx-mega{
    display: none !important;
  }

  .hx-burger{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hx-logo,
  .hx-logo .elementor-heading-title,
  .hx-header__center .elementor-heading-title{
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
  }

  .hx-header-right-group{
    gap: 14px !important;
  }

  .hx-header-icons,
  .hx-header__icons{
    gap: 12px !important;
  }

  .hx-header-icon{
    width: 18px !important;
    height: 18px !important;
  }

  .hx-header-icon svg{
    width: 17px !important;
    height: 17px !important;
  }
}

@media (min-width: 1025px){
  .hx-mobile-menu{
    display: none !important;
  }
}

/* =========================================================
   SMART STICKY HEADER
   ========================================================= */

/* is-scrolled больше НЕ прячет хедер */
.hx-header.is-scrolled {
  transform: translate3d(0, 0, 0) !important;
  background: transparent !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.045) !important;
}

/* Скрытие только отдельным классом */
.hx-header.is-hidden {
  transform: translate3d(0, -100%, 0) !important;
}

/* При скролле вверх показываем */
.hx-header.is-scrolling-up {
  transform: translate3d(0, 0, 0) !important;

  --hx-idle-link: var(--hx-dark-link) !important;
  --hx-idle-logo: var(--hx-dark-logo) !important;
  --hx-idle-icon: var(--hx-dark-icon) !important;
  --hx-idle-underline: var(--hx-dark-underline) !important;
}

/* Когда открыты интерфейсы — хедер всегда видим */
.hx-header.is-mega-open,
.hx-header.is-mobile-menu-open,
.hx-header.is-search-open {
  transform: translate3d(0, 0, 0) !important;
}

/* =========================================================
   HX SEARCH OVERLAY — CLEAN FINAL
   ========================================================= */
.hx-search-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 260 !important;
  background: rgba(244,241,234,.92) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .24s ease, visibility .24s ease !important;
  overscroll-behavior: none !important;
}

.hx-header.is-search-open .hx-search-overlay{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.hx-search-overlay__inner{
  width: 100vw !important;
  max-width: none !important;
  height: 92dvh !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #f4f1ea !important;
  box-shadow: none !important;
  overscroll-behavior: contain !important;
}

.hx-search-overlay__top{
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: 24px 1fr 24px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(18,17,16,.08) !important;
  background: #f4f1ea !important;
  flex: 0 0 auto !important;
}

.hx-search-overlay__top-spacer{
  grid-column: 1 !important;
  width: 24px !important;
  height: 24px !important;
}

.hx-search-overlay__brand{
  grid-column: 2 !important;
  justify-self: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-family: "Prata", serif !important;
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(18,17,16,.82) !important;
}

.hx-search-overlay__close{
  grid-column: 3 !important;
  justify-self: end !important;
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.hx-search-overlay__close span{
  position: absolute !important;
  top: 11px !important;
  left: 2px !important;
  width: 20px !important;
  height: 1px !important;
  background: #121110 !important;
}

.hx-search-overlay__close span:first-child{
  transform: rotate(45deg) !important;
}

.hx-search-overlay__close span:last-child{
  transform: rotate(-45deg) !important;
}

.hx-search-overlay__body{
  width: 100% !important;
  max-width: 1520px !important;
  margin: 0 auto !important;
  padding: 30px 40px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.hx-search-overlay__kicker{
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto 14px !important;
  display: block !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  color: rgba(18,17,16,.38) !important;
}

.hx-search-form{
  position: relative !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.hx-search-results-slot{
  position: relative !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  margin-top: 24px !important;
  padding-top: 2px !important;
  padding-right: 8px !important;
}

.hx-search-field{
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(18,17,16,.14) !important;
  background: transparent !important;
  padding: 0 0 14px !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: "Prata", serif !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: .98 !important;
  letter-spacing: 0 !important;
  color: #121110 !important;
}

.hx-search-field::placeholder{
  font-size: .56em !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  color: rgba(18,17,16,.28) !important;
}

#hx-search-results .relevanssi-live-search-results{
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  max-height: none !important;
  overflow: visible !important;
}

#hx-search-results .relevanssi-live-search-result-status{
  margin: 0 0 22px !important;
}

#hx-search-results .relevanssi-live-search-result-status p{
  margin: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  color: rgba(18,17,16,.38) !important;
}

.hx-search-results-layout{
  display: grid !important;
  grid-template-columns: 240px minmax(0,1fr) !important;
  gap: 96px !important;
  align-items: start !important;
}

.hx-search-group{
  min-width: 0 !important;
}

.hx-search-group__head{
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 18px !important;
}

.hx-search-group__title{
  margin: 0 !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  color: rgba(18,17,16,.40) !important;
}

.hx-search-group__all{
  text-decoration: none !important;
  font-family: "Inter", sans-serif !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  letter-spacing: .08em !important;
  color: rgba(18,17,16,.46) !important;
  border-bottom: 1px solid rgba(18,17,16,.14) !important;
  transition: color .24s ease, border-color .24s ease !important;
}

.hx-search-group__all:hover{
  color: rgba(18,17,16,.62) !important;
  border-bottom-color: rgba(18,17,16,.24) !important;
}

.hx-search-group--articles{
  min-width: 0 !important;
}

.hx-search-article-list{
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  max-width: 240px !important;
}

.hx-search-article-item{
  margin: 0 !important;
}

.hx-search-article-item__icon{
  display: none !important;
}

.hx-search-article-item__link{
  display: block !important;
  text-decoration: none !important;
  color: #121110 !important;
  opacity: 1 !important;
}

.hx-search-article-item__text{
  display: block !important;
}

.hx-search-article-item__title{
  display: block !important;
  max-width: 22ch !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: .005em !important;
  color: rgba(18,17,16,.82) !important;
  transition: color .24s ease !important;
}

.hx-search-article-item__excerpt{
  display: none !important;
}

.hx-search-article-item__link:hover .hx-search-article-item__title{
  color: rgba(18,17,16,.58) !important;
}

.hx-search-group--products{
  min-width: 0 !important;
}

.hx-search-product-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(150px,210px)) !important;
  gap: 22px !important;
  justify-content: start !important;
  align-items: start !important;
  max-width: 1120px !important;
}

.hx-search-product-card{
  margin: 0 !important;
}

.hx-search-product-card__link{
  display: block !important;
  text-decoration: none !important;
  color: #121110 !important;
}

.hx-search-product-card__media{
  aspect-ratio: 4 / 5 !important;
  background: #e9e4db !important;
  overflow: hidden !important;
}

.hx-search-product-card__media img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1) !important;
  transition: transform .45s ease, opacity .35s ease !important;
}

.hx-search-product-card__title{
  margin-top: 10px !important;
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  color: rgba(18,17,16,.88) !important;
  transition: color .24s ease !important;
}

.hx-search-product-card__link:hover .hx-search-product-card__media img{
  transform: scale(1.01) !important;
  opacity: .97 !important;
}

.hx-search-product-card__link:hover .hx-search-product-card__title{
  color: rgba(18,17,16,.66) !important;
}

#hx-search-results .relevanssi-live-search-no-results{
  margin: 18px 0 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(18,17,16,.10) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: rgba(18,17,16,.62) !important;
}

#hx-search-results .relevanssi-live-search-didyoumean{
  margin: 10px 0 0 !important;
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: rgba(18,17,16,.62) !important;
}

#hx-search-results .relevanssi-live-search-didyoumean a{
  color: #121110 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(18,17,16,.25) !important;
}

html.is-search-open,
body.is-search-open{
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
}

@media (max-width: 1200px){
  .hx-search-results-layout{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .hx-search-group--products{
    order: 1 !important;
  }

  .hx-search-group--articles{
    order: 2 !important;
  }

  .hx-search-article-list{
    max-width: none !important;
  }

  .hx-search-article-item__title{
    max-width: 34ch !important;
  }

  .hx-search-product-grid{
    grid-template-columns: repeat(2, minmax(170px,1fr)) !important;
    max-width: none !important;
    gap: 18px !important;
  }

  .hx-search-group__all{
    font-size: 10px !important;
    letter-spacing: .07em !important;
  }
}

@media (max-width: 767px){
  .hx-search-overlay__inner{
    width: 100vw !important;
    height: 92dvh !important;
    margin: 0 !important;
  }

  .hx-search-overlay__brand{
    font-size: 22px !important;
  }

  .hx-search-overlay__body{
    padding: 24px 20px 28px !important;
  }

  .hx-search-overlay__kicker,
  .hx-search-form{
    max-width: none !important;
  }

  .hx-search-field{
    font-size: 28px !important;
    padding-bottom: 14px !important;
  }

  .hx-search-field::placeholder{
    font-size: .58em !important;
  }

  .hx-search-results-layout{
    gap: 34px !important;
  }

  .hx-search-article-item__title{
    font-size: 13px !important;
    max-width: none !important;
  }

  .hx-search-product-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .hx-search-product-card__title{
    font-size: 12px !important;
  }

}

/* =========================================
   HX HEADER BADGES — FULL SWITCH + LIGHTER SIZE
   ========================================= */

.hx-header-favorites__count,
.hx-header-cart__count{
  transition:
    background-color .22s ease,
    color .22s ease,
    opacity .2s ease,
    transform .2s ease !important;
}

/* -----------------------------------------
   1. DARK / PHOTO HERO — idle
   badge светлый, чуть меньше и легче
   ----------------------------------------- */
.hx-header:not(.hx-header--dark) .hx-header-favorites__count,
.hx-header:not(.hx-header--dark) .hx-header-cart__count{
  background: #f4f1ea !important;
  color: #121110 !important;

  min-width: 14px !important;
  height: 14px !important;
  padding: 0 3px !important;
  font-size: 8px !important;
  line-height: 1 !important;

  top: -5px !important;
  right: -7px !important;
}

/* -----------------------------------------
   2. DARK / PHOTO HERO — hover / mega / mobile / sticky
   badge становится тёмным
   ----------------------------------------- */
.hx-header:not(.hx-header--dark):hover .hx-header-favorites__count,
.hx-header:not(.hx-header--dark):hover .hx-header-cart__count,
.hx-header:not(.hx-header--dark).is-mega-open .hx-header-favorites__count,
.hx-header:not(.hx-header--dark).is-mega-open .hx-header-cart__count,
.hx-header:not(.hx-header--dark).is-mobile-menu-open .hx-header-favorites__count,
.hx-header:not(.hx-header--dark).is-mobile-menu-open .hx-header-cart__count,
.hx-header:not(.hx-header--dark).is-scrolling-up .hx-header-favorites__count,
.hx-header:not(.hx-header--dark).is-scrolling-up .hx-header-cart__count{
  background: #121110 !important;
  color: #f4f1ea !important;
}

/* -----------------------------------------
   3. LIGHT HERO — always dark
   стандартный размер
   ----------------------------------------- */
.hx-header.hx-header--dark .hx-header-favorites__count,
.hx-header.hx-header--dark .hx-header-cart__count{
  background: #121110 !important;
  color: #f4f1ea !important;

  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  font-size: 9px !important;
  line-height: 1 !important;

  top: -6px !important;
  right: -8px !important;
}

/* =========================================================
   HX FAVORITES DRAWER — FULL HEIGHT LIKE CART
   Вставить в CSS хедера / глобальный CSS
   ========================================================= */

.hx-favorites-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;

  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  overflow: hidden !important;
}

.hx-favorites-drawer.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.hx-favorites-drawer__backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  width: 100% !important;
  height: 100% !important;

  background: rgba(18, 17, 16, 0.42) !important;
  cursor: default !important;
}

.hx-favorites-drawer__panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2 !important;

  width: min(520px, 100vw) !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;

  display: flex !important;
  flex-direction: column !important;

  background: #F4F1EA !important;
  overflow: hidden !important;

  transform: translateX(100%) !important;
  transition: transform 0.42s cubic-bezier(.25, 1, .5, 1) !important;
  will-change: transform !important;
}

.hx-favorites-drawer.is-open .hx-favorites-drawer__panel {
  transform: translateX(0) !important;
}

.hx-favorites-drawer__top {
  flex: 0 0 auto !important;
}

.hx-favorites-drawer__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.hx-favorites-drawer__bottom {
  flex: 0 0 auto !important;
}

html.hx-favorites-drawer-open,
body.hx-favorites-drawer-open {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
}

/* Mobile */
@media (max-width: 767px) {
  .hx-favorites-drawer__panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* Mobile landscape */
@media (max-width: 980px) and (max-height: 560px) and (orientation: landscape) {
  .hx-favorites-drawer__panel {
    width: min(620px, 100vw) !important;
    height: 100dvh !important;
  }

  .hx-favorites-drawer__top {
    padding: 14px 22px 12px !important;
  }

  .hx-favorites-drawer__title {
    font-size: 32px !important;
    line-height: 1 !important;
  }

  .hx-favorites-drawer__body {
    padding: 14px 22px 12px !important;
  }

  .hx-favorites-drawer__bottom {
    padding: 12px 22px 14px !important;
  }
}

/* =========================================================
   HX HEADER — INITIAL TRANSPARENT + HOVER PANEL FIX
   ========================================================= */

/* До инициализации JS — прозрачный хедер, чтобы не было flash */
.hx-header:not(.is-ready):not(:hover):not(.is-mega-open):not(.is-mobile-menu-open):not(.is-search-open)::before {
  opacity: 0 !important;
}

/* На самом верху в покое — прозрачный */
.hx-header.is-at-top:not(:hover):not(.is-mega-open):not(.is-mobile-menu-open):not(.is-search-open)::before {
  opacity: 0 !important;
}

/* На самом верху убираем тень */
.hx-header.is-at-top {
  box-shadow: none !important;
}

/* При наведении — светлая плашка появляется даже на самом верху */
.hx-header:hover::before,
.hx-header.is-at-top:hover::before,
.hx-header.is-mega-open::before,
.hx-header.is-mobile-menu-open::before,
.hx-header.is-search-open::before {
  opacity: 1 !important;
}

/* При наведении переводим ссылки/логотип/иконки в тёмный режим */
.hx-header:hover,
.hx-header.is-at-top:hover,
.hx-header.is-mega-open,
.hx-header.is-mobile-menu-open,
.hx-header.is-search-open {
  --hx-idle-link: var(--hx-dark-link) !important;
  --hx-idle-logo: var(--hx-dark-logo) !important;
  --hx-idle-icon: var(--hx-dark-icon) !important;
  --hx-idle-underline: var(--hx-dark-underline) !important;
}

/* Sticky-фон после скролла */
.hx-header.is-scrolled::before,
.hx-header.is-scrolling-up::before {
  opacity: 1 !important;
}

/* Но если вернулись в самый верх и не навели мышь — снова прозрачный */
.hx-header.is-at-top.is-scrolled:not(:hover):not(.is-mega-open):not(.is-mobile-menu-open):not(.is-search-open)::before,
.hx-header.is-at-top.is-scrolling-up:not(:hover):not(.is-mega-open):not(.is-mobile-menu-open):not(.is-search-open)::before {
  opacity: 0 !important;
}

/* На самом верху при hover не должно быть тени */
.hx-header.is-at-top:hover {
  box-shadow: none !important;
}

body.hx-cart-drawer-open { overflow: hidden !important; }

.hx-cart-drawer,
.hx-cart-drawer * {
box-sizing: border-box !important;
}

.hx-cart-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  font-family: Inter, Arial, sans-serif !important;
}

.hx-cart-drawer.is-open { pointer-events: auto !important; visibility: visible !important; }

.hx-cart-drawer__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(14, 13, 12, .36) !important;
  opacity: 0 !important;
  transition: opacity .24s ease !important;
}

.hx-cart-drawer.is-open .hx-cart-drawer__backdrop { opacity: 1 !important; }

.hx-cart-drawer__panel {
  overscroll-behavior: contain !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: min(560px, 100vw) !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #f3efe7 !important;
  color: #111 !important;
  transform: translateX(100%) !important;
  transition: transform .30s cubic-bezier(.25,1,.5,1) !important;
  box-shadow: -34px 0 90px rgba(13, 12, 11, .20) !important;
  border-left: 1px solid rgba(17, 16, 15, .10) !important;
}

.hx-cart-drawer.is-open .hx-cart-drawer__panel {
transform: translateX(0) !important;
}

.hx-cart-drawer__top {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 22px !important;
  padding: 24px 34px 16px !important;
  border-bottom: 1px solid rgba(17, 16, 15, .08) !important;
  background: #f3efe7 !important;
}

.hx-cart-drawer__kicker {
  margin: 0 0 8px !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: .36em !important;
  text-transform: uppercase !important;
  color: rgba(17, 16, 15, .42) !important;
}

.hx-cart-drawer__title {
  margin: 0 !important;
  max-width: 8.2em !important;
  letter-spacing: -.012em !important;
  font-family: Prata, Georgia, serif !important;
  font-size: clamp(31px, 2.85vw, 42px) !important;
  line-height: .98 !important;
  font-weight: 400 !important;
  color: #111 !important;
}

.hx-cart-drawer__count {
  margin-top: 8px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: rgba(17, 16, 15, .48) !important;
}

.hx-cart-drawer__close {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.hx-cart-drawer__close span {
  position: absolute !important;
  left: 4px !important;
  top: 18px !important;
  width: 30px !important;
  height: 1px !important;
  background: #111 !important;
}

.hx-cart-drawer__close span:first-child { transform: rotate(45deg) !important; }
.hx-cart-drawer__close span:last-child { transform: rotate(-45deg) !important; }

.hx-cart-drawer__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 25px 34px 18px !important;
  background: #f3efe7 !important;
}

.hx-cart-drawer__body::-webkit-scrollbar { width: 8px !important; }
.hx-cart-drawer__body::-webkit-scrollbar-track { background: transparent !important; }
.hx-cart-drawer__body::-webkit-scrollbar-thumb { background: rgba(17, 16, 15, .18) !important; }

.hx-cart-drawer__message {
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(155, 40, 40, .38) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #8f1f1f !important;
}

.hx-cart-drawer__loading,
.hx-cart-drawer__empty p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: rgba(17, 16, 15, .48) !important;
}

.hx-cart-drawer__list { display: flex !important; flex-direction: column !important; }

.hx-cart-drawer__item {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 13px 0 17px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(17, 16, 15, .085) !important;
  background: transparent !important;
  transition: opacity .18s ease !important;
}

.hx-cart-drawer__item:last-child { margin-bottom: 0 !important; }
.hx-cart-drawer__item.is-loading,
.hx-cart-drawer__item.is-removing { opacity: .45 !important; pointer-events: none !important; }

.hx-cart-drawer__thumb {
  display: block !important;
  width: 50px !important;
  height: 64px !important;
  overflow: hidden !important;
  background: #ded8cd !important;
  border: 1px solid rgba(17, 16, 15, .075) !important;
}

.hx-cart-drawer__thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.hx-cart-drawer__meta { min-width: 0 !important; padding-top: 1px !important; }

.hx-cart-drawer__name {
  display: block !important;
  margin: 0 0 7px !important;
  text-decoration: none !important;
  font-family: Prata, Georgia, serif !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  color: #111 !important;
}


.hx-cart-drawer__submeta {
  margin: 0 0 9px !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(17, 16, 15, .40) !important;
}

.hx-cart-drawer__meta-row,
.hx-cart-drawer__line-total { display: none !important; }

.hx-cart-drawer__controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.hx-cart-drawer__qty {
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  border: 1px solid rgba(17, 16, 15, .34) !important;
}

.hx-cart-drawer__qty-btn {
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  background: transparent !important;
  color: #111 !important;
  cursor: pointer !important;
  font-size: 12px !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.hx-cart-drawer__qty-value {
  min-width: 26px !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #111 !important;
}

.hx-cart-drawer__remove {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(17, 16, 15, .46) !important;
}

.hx-cart-drawer__bottom {
  flex: 0 0 auto !important;
  padding: 18px 34px 30px !important;
  border-top: 0 !important;
  background: #f3efe7 !important;
}

.hx-cart-drawer__totals {
  margin: 0 0 22px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.hx-cart-drawer__totals-row--grand {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 26px !important;
  padding: 18px 0 0 !important;
}

.hx-cart-drawer__totals-row--grand::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 1px !important;
  background: rgba(17, 16, 15, .095) !important;
}

.hx-cart-drawer__totals-label {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 9px !important;
  letter-spacing: .34em !important;
  text-transform: uppercase !important;
  color: rgba(17, 16, 15, .40) !important;
  padding-bottom: 4px !important;
}

.hx-cart-drawer__totals-value {
  font-family: Prata, Georgia, serif !important;
  font-size: 32px !important;
  line-height: .95 !important;
  color: #111 !important;
  background: #f3efe7 !important;
  padding-left: 20px !important;
  position: relative !important;
  z-index: 1 !important;
  white-space: nowrap !important;
}

.hx-cart-drawer__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
  margin: 0 !important;
  padding-top: 2px !important;
}

.hx-cart-drawer__link {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: .30em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: #111 !important;
}

.hx-cart-drawer__link--secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-right: auto !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(17, 16, 15, .20) !important;
  text-align: left !important;
}

.hx-cart-drawer__link--primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 220px !important;
  padding: 18px 24px !important;
  border: 1px solid #111 !important;
  text-align: center !important;
  transition: background .18s ease, color .18s ease !important;
}

.hx-cart-drawer__link--primary:hover {
  background: #111 !important;
  color: #f3efe7 !important;
}

.hx-cart-drawer__link--secondary:hover {
  border-bottom-color: rgba(17, 16, 15, .46) !important;
}

@media (max-width: 767px) {
  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__panel {
    width: 100vw !important;
    max-width: 100vw !important;
    overscroll-behavior: contain !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__top {
    padding: 24px 30px 20px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__close {
    margin-top: 10px !important;
    margin-right: 0 !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__title {
    max-width: 7.8em !important;
    font-size: 33px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__body {
    padding: 24px 30px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__bottom {
    padding: 22px 30px 28px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__item {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 15px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__thumb {
    width: 48px !important;
    height: 60px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__name {
    font-size: 16px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__totals-row--grand {
    gap: 18px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__totals-value {
    padding-left: 14px !important;
    font-size: 29px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__remove {
    justify-self: end !important;
    margin-right: 4px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__qty {
    height: 24px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__qty-btn {
    width: 24px !important;
    height: 24px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__qty-value {
    min-width: 26px !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__link--secondary {
    width: max-content !important;
  }

  body .hx-cart-drawer[data-hx-cart-drawer] .hx-cart-drawer__link--primary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   HEADER — OPTICAL CENTER ON NARROW PHONES
   Centers the logo between the burger and the icon group.
   ========================================================= */

@media (max-width: 360px) {

  .hx-header__inner {
    display: grid !important;

    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto !important;

    column-gap: 10px !important;

    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  /* Burger group */

  .hx-header__left {
    position: relative !important;

    grid-column: 1 !important;

    width: auto !important;
    min-width: 0 !important;

    justify-self: start !important;
    align-self: center !important;

    z-index: 2 !important;
  }

  /* Logo: centered inside the actual free space */

  .hx-header__center {
    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    grid-column: 2 !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    justify-self: center !important;
    align-self: center !important;

    transform: none !important;

    z-index: 1 !important;
  }

  /* Icons group */

  .hx-header__right {
    position: relative !important;

    grid-column: 3 !important;

    width: auto !important;
    min-width: 0 !important;

    justify-self: end !important;
    align-self: center !important;

    z-index: 2 !important;
  }

  .hx-header-right-group,
  .hx-header-icons,
  .hx-header__icons {
    width: auto !important;

    display: flex !important;
    align-items: center !important;

    gap: 7px !important;
  }

  /* Logo typography */

  .hx-logo,
  .hx-logo .elementor-heading-title,
  .hx-logo .elementor-heading-title a,
  .hx-header__center .elementor-heading-title,
  .hx-header__center .elementor-heading-title a {
    max-width: 100% !important;

    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: 0.10em !important;

    white-space: nowrap !important;
  }

  /* Keep icons visually compact */

  .hx-header-icon,
  .hx-header-icon svg {
    width: 15px !important;
    height: 15px !important;
  }
}