/* ======= 9.19 PERFUME — базовые стили поверх Tailwind CDN ======= */
:root{
  --bg:      #0f0d0b;
  --bg-2:    #16130f;
  --gold:    #b8935a;
  --gold-2:  #d8b57e;
  --cream:   #f0ebe3;
  --muted:   rgba(240,235,227,.55);
  --border:  rgba(184,147,90,.22);
  --border-strong: rgba(184,147,90,.45);
}

html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--cream);
  font-family:'Jost',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,.font-serif{ font-family:'Cormorant Garamond',Georgia,serif; }

/* Тонкие золотые границы 0.5px */
.hairline      { border:0.5px solid var(--border); }
.hairline-b    { border-bottom:0.5px solid var(--border); }
.hairline-t    { border-top:0.5px solid var(--border); }
.hairline-strong{ border:0.5px solid var(--border-strong); }

.text-gold  { color:var(--gold); }
.bg-cream   { background:var(--cream); }
.tracking-luxe{ letter-spacing:.28em; }

/* ======= Кнопки ======= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.9rem; font-family:'Jost',sans-serif; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; font-size:.78rem;
  border:0.5px solid var(--gold); color:var(--gold);
  background:transparent; cursor:pointer;
  transition:all .35s ease; border-radius:2px;
}
.btn:hover{ background:var(--gold); color:var(--bg); box-shadow:0 6px 22px -6px rgba(184,147,90,.55); transform:translateY(-1px); }
.btn-solid{ background:var(--gold); color:var(--bg); }
.btn-solid:hover{ background:var(--gold-2); border-color:var(--gold-2); box-shadow:0 8px 26px -8px rgba(184,147,90,.65); transform:translateY(-1px); }
.cart-field{
  width:100%; padding:.6rem .75rem; font-family:'Jost',sans-serif; font-size:.82rem;
  background:var(--bg); border:.5px solid var(--border); border-radius:2px;
  color:var(--cream); outline:none; transition:border-color .2s;
}
.cart-field::placeholder{ color:var(--muted); }
.cart-field:focus{ border-color:var(--gold); }
.btn-ghost{ border-color:var(--border); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); background:transparent; }

/* ======= Карточка товара ======= */
.card{
  position:relative; background:var(--bg-2);
  border:0.5px solid var(--border);
  transition:transform .4s ease, border-color .4s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
.card-img{
  aspect-ratio:1/1; width:100%; object-fit:cover; background:var(--bg);
  display:block;
}
.badge{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:2px;
  background:var(--gold); color:var(--bg); font-weight:500;
}
.badge.new{ background:transparent; color:var(--gold); border:0.5px solid var(--gold); }
.badge.out{ background:rgba(0,0,0,.7); color:var(--muted); border:0.5px solid var(--border); }

/* ======= Чипсы фильтров ======= */
.chip{
  padding:.5rem 1.1rem; font-size:.78rem; letter-spacing:.08em;
  border:0.5px solid var(--border); color:var(--muted);
  background:transparent; cursor:pointer; border-radius:2px;
  transition:all .3s ease; white-space:nowrap;
}
.chip:hover{ color:var(--cream); border-color:var(--border-strong); }
.chip.active{ background:var(--gold); color:var(--bg); border-color:var(--gold); }

/* ======= Поля ввода ======= */
.input{
  background:var(--bg-2); border:0.5px solid var(--border);
  color:var(--cream); padding:.7rem 1rem; border-radius:2px;
  font-size:.9rem; width:100%; outline:none; transition:border-color .3s;
}
.input:focus{ border-color:var(--gold); }
.input::placeholder{ color:var(--muted); }
select.input{ appearance:none; cursor:pointer; }

/* ======= Модалка / выезжающая корзина ======= */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.overlay.open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%);
  background:var(--bg-2); border-left:0.5px solid var(--border); z-index:70;
  transform:translateX(100%); transition:transform .4s ease;
  display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0); }

.modal{
  position:fixed; inset:0; z-index:70; display:flex;
  align-items:center; justify-content:center; padding:1rem;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.modal.open{ opacity:1; pointer-events:auto; }
.modal-box{
  background:var(--bg-2); border:0.5px solid var(--border-strong);
  max-width:860px; width:100%; max-height:90vh; overflow:auto;
  transform:translateY(12px); transition:transform .35s ease; border-radius:2px;
}
.modal.open .modal-box{ transform:translateY(0); }

/* Анимация появления (скролл) */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ======= Премиальная анимация героя ======= */
@keyframes heroFadeUp{
  from{ opacity:0; transform:translateY(28px); filter:blur(3px); }
  to  { opacity:1; transform:translateY(0);    filter:blur(0); }
}
@keyframes heroTitle{
  from{ opacity:0; transform:translateY(22px) scaleY(.97); }
  to  { opacity:1; transform:translateY(0) scaleY(1); }
}
@keyframes heroTag{
  from{ opacity:0; letter-spacing:.5em; }
  to  { opacity:1; letter-spacing:.28em; }
}
@keyframes heroLine{
  from{ transform:scaleX(0); opacity:0; }
  to  { transform:scaleX(1); opacity:1; }
}
@keyframes goldShimmer{
  0%  { background-position:200% center; }
  100%{ background-position:-200% center; }
}
@keyframes heroStat{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:translateY(0); }
}

.hero-tag{
  animation:heroTag .9s cubic-bezier(.22,1,.36,1) .15s both;
}
.hero-title{
  animation:heroTitle 1.1s cubic-bezier(.22,1,.36,1) .45s both;
}
.blood-text{
  color:#ffffff;
  -webkit-text-fill-color:#ffffff;
  text-shadow:
    0 0 20px rgba(140,8,8,.95),
    0 0 45px rgba(100,0,0,.65),
    3px 4px 0 rgba(70,0,0,.85);
  display:inline-block;
  animation:bloodPulse 3.5s ease-in-out 1.8s infinite alternate;
}
@keyframes bloodPulse{
  from{ text-shadow:0 0 20px rgba(140,8,8,.95),0 0 45px rgba(100,0,0,.65),3px 4px 0 rgba(70,0,0,.85); }
  to  { text-shadow:0 0 32px rgba(170,8,8,1),0 0 65px rgba(120,0,0,.8),3px 4px 0 rgba(70,0,0,.85),0 0 80px rgba(150,0,0,.3); }
}
.hero-sub{
  animation:heroFadeUp .85s cubic-bezier(.22,1,.36,1) .95s both;
}
.hero-btns{
  animation:heroFadeUp .85s cubic-bezier(.22,1,.36,1) 1.25s both;
}
.hero-stat{
  animation:heroStat .7s cubic-bezier(.22,1,.36,1) both;
}
.hero-stat:nth-child(1){ animation-delay:1.5s; }
.hero-stat:nth-child(2){ animation-delay:1.65s; }
.hero-stat:nth-child(3){ animation-delay:1.8s; }
.hero-divider{
  display:block; height:0.5px; width:40px; margin:0 auto;
  background:var(--gold); transform-origin:center;
  animation:heroLine .6s cubic-bezier(.22,1,.36,1) .35s both;
}
@media (prefers-reduced-motion:reduce){
  .hero-tag,.hero-title,.hero-sub,.hero-btns,.hero-stat{ animation:none; opacity:1; }
}

/* Скролл-бар */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:20px; }

/* ======= Бегущая строка брендов ======= */
.brands-track{
  display:flex; gap:4rem; align-items:center;
  animation:marquee 28s linear infinite;
  width:max-content;
}
.brands-track span,.brands-track a{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:color .2s;
}
.brands-track a:hover{ color:var(--gold); }
.brands-track:hover{ animation-play-state:paused; }
@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){ .brands-track{ animation:none; } }

/* ======= AI-помощник ======= */
.ai-panel{
  border:0.5px solid var(--border-strong);
  border-radius:4px; overflow:hidden;
  background:linear-gradient(135deg,rgba(184,147,90,.06) 0%,rgba(15,13,11,0) 60%);
}
.ai-panel__header{
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1rem; border-bottom:0.5px solid var(--border);
}
.ai-panel__icon{ color:var(--gold); flex-shrink:0; }
.ai-panel__label{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.ai-panel__hint{ font-size:.78rem; color:var(--muted); margin-left:.2rem; }
.ai-panel__body{ padding:.9rem 1rem 1rem; }
.ai-panel__input-wrap{ position:relative; }
.ai-panel__input{ padding-right:2.5rem !important; }
.ai-panel__clear{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  font-size:1.3rem; line-height:1; color:var(--muted); background:none;
  border:none; cursor:pointer; padding:0; transition:color .2s; display:none;
}
.ai-panel__clear:hover{ color:var(--gold); }
.ai-panel__clear.visible{ display:block; }
.ai-panel__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; min-height:0; }
.ai-tag{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.3rem .7rem; border-radius:2px; font-size:.72rem;
  letter-spacing:.06em; border:0.5px solid var(--gold);
  color:var(--gold); background:rgba(184,147,90,.1);
  animation:tagIn .25s ease;
}
.ai-tag svg{ opacity:.7; }
@keyframes tagIn{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:scale(1); } }
.ai-panel__examples{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.ai-example{
  padding:.3rem .8rem; font-size:.74rem; border-radius:2px;
  border:0.5px solid var(--border); color:var(--muted);
  background:transparent; cursor:pointer; transition:all .25s; letter-spacing:.04em;
}
.ai-example:hover{ color:var(--cream); border-color:var(--border-strong); }
.ai-score-badge{
  position:absolute; bottom:.5rem; right:.5rem; z-index:3;
  font-size:.6rem; letter-spacing:.1em; padding:.2rem .45rem;
  border-radius:2px; background:rgba(184,147,90,.18);
  color:var(--gold); border:0.5px solid rgba(184,147,90,.3); pointer-events:none;
}

/* ======= Мега-меню каталога ======= */
.catalog-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1.1rem; font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:500;
  background:var(--gold); color:var(--bg); border:none;
  cursor:pointer; border-radius:2px; transition:background .25s;
  white-space:nowrap; flex-shrink:0;
}
.catalog-btn:hover{ background:var(--gold-2); }
.catalog-btn svg{ flex-shrink:0; transition:transform .25s; }
.catalog-btn.open svg.arrow{ transform:rotate(180deg); }

.mega-backdrop{
  position:fixed; inset:0; z-index:39;
  display:none;
}
.mega-backdrop.open{ display:block; }

.mega-menu{
  position:absolute; top:100%; left:0; right:0; z-index:40;
  background:var(--bg-2); border:0.5px solid var(--border);
  border-top:none; box-shadow:0 16px 48px rgba(0,0,0,.6);
  display:none; max-height:calc(100vh - 130px); overflow:hidden;
}
.mega-menu.open{ display:flex; }

.mega-left{
  width:260px; flex-shrink:0;
  border-right:0.5px solid var(--border);
  overflow-y:auto; padding:.5rem 0;
}
.mega-left-item{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1.1rem; cursor:pointer;
  transition:background .2s; position:relative;
  border-left:2px solid transparent;
}
.mega-left-item:hover,
.mega-left-item.active{
  background:rgba(184,147,90,.08);
  border-left-color:var(--gold);
}
.mega-left-item .cat-icon{
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
}
.mega-left-item .cat-label{ flex:1; }
.mega-left-item .cat-title{
  font-size:.82rem; font-weight:500; color:var(--cream);
}
.mega-left-item .cat-sub{
  font-size:.7rem; color:var(--muted); margin-top:.1rem;
}
.mega-left-item .cat-arrow{
  color:var(--muted); flex-shrink:0;
}
.mega-left-item.active .cat-arrow{ color:var(--gold); }

.mega-right{
  flex:1; overflow-y:auto; padding:1.2rem 1.5rem;
}
.mega-right-panel{ display:none; }
.mega-right-panel.active{ display:block; }

.mega-brands{
  columns:4; column-gap:1rem; list-style:none; margin:0; padding:0;
}
.mega-brands li{ break-inside:avoid; margin-bottom:.55rem; }
.mega-brands a{
  font-size:.82rem; color:var(--muted);
  transition:color .2s; text-decoration:none; white-space:nowrap;
}
.mega-brands a:hover{ color:var(--gold); }

.mega-section-title{
  font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.8rem; display:block;
}
.mega-more{
  display:inline-flex; align-items:center; gap:.3rem;
  margin-top:.9rem; font-size:.78rem; color:var(--gold);
  text-decoration:none; transition:opacity .2s;
}
.mega-more:hover{ opacity:.75; }

/* Поисковая строка в шапке */
.header-search{
  display:flex; align-items:center; flex:1;
  background:rgba(255,255,255,.05); border:0.5px solid var(--border);
  border-radius:2px; padding:0 .85rem; gap:.5rem; max-width:480px;
}
.header-search input{
  background:none; border:none; outline:none; flex:1;
  font-size:.82rem; color:var(--cream); padding:.55rem 0;
}
.header-search input::placeholder{ color:var(--muted); }
.header-search svg{ color:var(--muted); flex-shrink:0; }
.header-search input{ min-width:0; }

/* На телефонах верхняя строка поиска прячется — поиск доступен в мобильном меню */
@media (max-width:767px){
  #desktop-search{ display:none; }
  #header-row{ padding-left:.75rem; padding-right:.75rem; gap:.5rem; }
  #header-row .catalog-btn{ padding-left:.7rem; padding-right:.7rem; }
}

/* Планшетный диапазон — шапка компактнее, поиск уже, чтобы всё умещалось */
@media (min-width:768px) and (max-width:900px){
  #header-row{ gap:.6rem; }
  #desktop-search{ max-width:200px; }
}

/* Мега-меню «Каталог» на телефоне: категории сверху, бренды снизу в 2 колонки */
@media (max-width:767px){
  .mega-menu.open{ flex-direction:column; }
  .mega-menu{ max-height:calc(100vh - 120px); overflow-y:auto; }
  .mega-left{
    width:100%; flex-shrink:1;
    border-right:none; border-bottom:0.5px solid var(--border);
  }
  .mega-right{ padding:1.1rem 1.25rem; }
  .mega-brands{ columns:2; }
  .mega-brands a{ white-space:normal; }
}

/* ======= FAQ аккордеон ======= */
.faq-item{ transition:background .25s; }
.faq-item:hover{ background:rgba(184,147,90,.04); }
.faq-q:focus-visible{ outline:1px solid var(--gold); outline-offset:2px; }
.faq-icon{ transition:transform .3s ease; display:inline-block; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-a{ overflow:hidden; }

/* Убираем залипание hover на тач-устройствах (iOS) */
@media (hover:none){
  .card:hover{ transform:none; }
  .btn:hover{ background:transparent; color:var(--gold); }
  .btn-solid:hover{ background:var(--gold); color:var(--bg); }
}