/* Parfumerka — стили сайта. Цвета задаются темой (data-theme на <html>), меняется в админке. */
:root, [data-theme="burgundy"] {
  --bg: #2A0B14;        /* фон */
  --bg-2: #3A111D;      /* карточки, полосы */
  --bg-3: #1C060C;      /* подвал, верхняя полоса */
  --line: #552030;      /* тонкие линии */
  --line-2: #7E3D4D;    /* обводка кнопок */
  --text: #F3EEE6;
  --text-2: #E0CCC8;    /* вторичный текст */
  --text-3: #C4A3A8;    /* приглушённый */
  --accent: #C9A96E;    /* шампань-золото */
  --accent-2: #E2C99A;
  --on-accent: #2A0B14;
  --tile: #FBF8F4;      /* фон фото товара */
  --ph: #B58A6E;
  --radius: 0px;
  --btn-radius: 0px;
}
[data-theme="emerald"] {
  --bg: #0B2C21;
  --bg-2: #0F3A2C;
  --bg-3: #061A13;
  --line: #1F4A3A;
  --line-2: #4C7E6C;
  --text: #F3EEE6;
  --text-2: #DCE7E0;
  --text-3: #B5CBBF;
  --accent: #D9BE8C;
  --accent-2: #EBD7AE;
  --on-accent: #0B2C21;
  --tile: #FBF8F2;
  --ph: #B9A06F;
  --radius: 6px;
  --btn-radius: 26px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 'Manrope', system-ui, -apple-system, sans-serif; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 820px; }
.section { padding-top: 88px; padding-bottom: 88px; }
.band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.kicker { display: inline-block; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.h2 { margin: 0; font: 400 clamp(34px, 4.2vw, 52px)/1.1 'Cormorant Garamond', serif; }
.h3 { margin: 0 0 14px; font: 400 30px/1.2 'Cormorant Garamond', serif; }
.muted { color: var(--text-2); }
.link-arrow { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; min-height: 44px; }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; font: 600 14px/1 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--btn-radius); border: 1px solid transparent; cursor: pointer; text-align: center; }
.btn--gold { background: var(--accent); color: var(--on-accent); }
.btn--gold:hover { background: var(--accent-2); color: var(--on-accent); }
.btn--line { border-color: var(--line-2); color: var(--text); background: transparent; font-weight: 500; }
.btn--line:hover { border-color: var(--accent); color: var(--text); }
.btn--sm { min-height: 44px; padding: 0 18px; }

/* верхняя полоса и шапка */
.topbar { background: var(--bg-3); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.topbar__in { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.topbar__right { display: flex; gap: 20px; align-items: center; }
.topbar a { color: var(--text); }
.lang { display: flex; gap: 6px; align-items: center; }
.lang a { color: var(--text-3); padding: 4px 2px; }
.lang a.is-on { color: var(--text); font-weight: 600; }

.header { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; background: var(--bg); }
.header__in { display: flex; align-items: center; gap: 16px 36px; padding-top: 16px; padding-bottom: 16px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; flex: 0 0 auto; }
.logo img { height: 28px; width: auto; display: block; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.nav a { color: var(--text); padding: 8px 0; }
.nav a:hover, .nav a[aria-current] { color: var(--accent); }
.search { margin-left: auto; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 22px; padding-left: 16px; }
.search input { width: 200px; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.search input::placeholder { color: var(--text-3); }
.search button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 22px; align-items: center; justify-content: center; cursor: pointer; }

/* hero */
.hero { border-bottom: 1px solid var(--line); overflow: hidden; }
.hero__in { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 64px; padding-bottom: 88px; }
.hero__text { flex: 1 1 460px; min-width: 0; }
.hero__title { margin: 0; font: 400 clamp(52px, 7.5vw, 104px)/1 'Cormorant Garamond', serif; letter-spacing: -.01em; }
.hero__title em { color: var(--accent); }
.hero__lead { margin: 28px 0 0; max-width: 480px; font-size: 18px; color: var(--text-2); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero__art { flex: 1 1 420px; min-width: 0; position: relative; aspect-ratio: 5 / 4; max-width: 560px; margin: 0 auto; }
.hero__ring { position: absolute; inset: 6% 14%; border: 1px solid var(--line-2); border-radius: 50%; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.hero__bottle { position: absolute; background: var(--tile); border-radius: var(--radius); box-shadow: 0 30px 60px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; padding: 6%; }
.hero__bottle img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hero__bottle--0 { left: 30%; top: 4%; width: 40%; height: 74%; z-index: 2; }
.hero__bottle--1 { left: 0; top: 30%; width: 34%; height: 56%; }
.hero__bottle--2 { right: 0; top: 34%; width: 34%; height: 56%; }

/* плитки пола */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tile { min-height: 240px; padding: 32px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; color: var(--text); transition: border-color .2s; }
.tile:hover { border-color: var(--accent); color: var(--text); }
.tile__kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.tile__title { font: 400 44px/1.1 'Cormorant Garamond', serif; }
.tile__more { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
[data-theme="emerald"] .tile { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
[data-theme="emerald"] .tile__kicker, [data-theme="emerald"] .tile__more { color: #1E3D31; }
[data-theme="emerald"] .tile:hover { background: var(--accent-2); }

/* сетка товаров */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.card { display: flex; flex-direction: column; gap: 14px; color: var(--text); }
.card:hover { color: var(--text); }
.card__img { aspect-ratio: 1 / 1; background: var(--tile); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: 7%; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s ease; }
.card:hover .card__img img { transform: scale(1.04); }
.ph { width: 34%; fill: none; stroke: var(--ph); stroke-width: 1.2; }
.card__brand { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.card__name { font: 400 24px/1.2 'Cormorant Garamond', serif; margin-top: 4px; }
.card__meta { font-size: 14px; color: var(--text-3); margin-top: 4px; }
.card__price { margin-top: 6px; font-weight: 600; }

/* бренды */
.brand-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 36px; }
.brand-cloud a { font: 400 27px/1.3 'Cormorant Garamond', serif; color: var(--text); display: inline-flex; min-height: 44px; align-items: center; }
.brand-cloud a:hover { color: var(--accent); }
.brand-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.brand-list a { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.brand-list a:hover .brand-list__name { color: var(--accent); }
.brand-list__name { font: 400 26px/1.2 'Cormorant Garamond', serif; }
.brand-list__n { font-size: 13px; color: var(--text-3); }

/* бутики */
.boutiques__in { display: flex; flex-wrap: wrap; gap: 56px; padding-top: 104px; padding-bottom: 104px; }
.boutiques__text { flex: 1 1 360px; min-width: 0; }
.boutiques__text .muted { max-width: 440px; margin: 22px 0 0; }
.boutiques__list { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.boutique { padding: 32px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.boutique h3 { margin: 0; font: 400 32px/1.2 'Cormorant Garamond', serif; }
.boutique p { margin: 10px 0 12px; color: var(--text-2); }
.contact-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contact-btns .btn { flex: 1 1 140px; }

/* служебные блоки страниц */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; font-size: 13px; color: var(--text-3); }
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text); }
.page-head { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.page-head__main { flex: 1 1 480px; min-width: 0; }
.page-head__intro { flex: 1 1 340px; margin: 0; }
.page-title { margin: 0; font: 400 clamp(46px, 7vw, 96px)/1 'Cormorant Garamond', serif; overflow-wrap: anywhere; }

.catalog { padding-top: 28px; padding-bottom: 96px; }
.filters { margin-bottom: 36px; display: flex; flex-direction: column; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: var(--btn-radius); color: var(--text); font-size: 14px; }
.chip small { color: var(--text-3); font-size: 12px; }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip.is-on small { color: var(--on-accent); opacity: .7; }
.filters__row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.filters__count { margin-left: auto; font-size: 14px; }
.select select { appearance: none; min-height: 44px; padding: 0 40px 0 16px; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A96E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--text); border: 1px solid var(--line-2); border-radius: var(--btn-radius); font: inherit; font-size: 14px; max-width: 100%; }

.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; }
.pager__n, .pager__nav, .pager__gap { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--btn-radius); color: var(--text); font-size: 14px; }
.pager__gap { border-color: transparent; color: var(--text-3); }
.pager__n.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* карточка товара */
.product { display: flex; flex-wrap: wrap; gap: 56px; padding-top: 36px; padding-bottom: 96px; }
.product__gallery { flex: 1 1 480px; min-width: 0; }
.product__img { aspect-ratio: 1 / 1; background: var(--tile); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; padding: 8%; }
.product__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product__img .ph { width: 30%; }
.product__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.thumb { width: 80px; height: 80px; padding: 6px; background: var(--tile); border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
.thumb.is-on { border-color: var(--accent); }
.thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product__info { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.product__info > .kicker { margin-bottom: -20px; }
.product__title { margin: 0; font: 400 clamp(40px, 5vw, 64px)/1.05 'Cormorant Garamond', serif; overflow-wrap: anywhere; }
.product__title + .muted { margin-top: -16px; }
.product__price { font-size: 26px; font-weight: 600; }
.specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.specs div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.specs dd { margin: 4px 0 0; }
.specs dd a { color: var(--text); border-bottom: 1px solid var(--line-2); }
.ask { padding: 28px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.ask__title { margin: 0; font: 400 30px/1.2 'Cormorant Garamond', serif; }
.ask .muted { margin: 8px 0 0; font-size: 15px; }
.ask .contact-btns { margin-top: 20px; }
.pyramid__row { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.pyramid__row span { flex: 0 0 140px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.pyramid__row p { margin: 0; flex: 1 1 200px; color: var(--text-2); }
.prose { color: var(--text-2); }
.prose h1, .prose h2, .prose h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; color: var(--text); line-height: 1.2; }
.prose h2 { font-size: 34px; } .prose h3 { font-size: 26px; }
.prose a { border-bottom: 1px solid currentColor; }
.prose img { display: none; }
.seo-text { border-top: 1px solid var(--line); max-width: 860px; }
.search-big { flex: 1 1 400px; display: flex; gap: 10px; }
.search-big input { flex: 1; min-height: 52px; padding: 0 18px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); font: inherit; border-radius: var(--btn-radius); }
.notfound { text-align: center; padding-bottom: 32px; }

/* подвал */
.footer { background: var(--bg-3); border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }
.footer__in { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.footer__brand img { height: 22px; width: auto; display: block; opacity: .9; }
.footer__brand p { margin: 20px 0 0; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer a { color: var(--text-2); }
.footer a:hover { color: var(--accent); }
.footer strong { color: var(--text); font-weight: 500; }

/* адаптив */
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search input { width: 140px; }
  .nav { gap: 6px 20px; }
}
@media (max-width: 900px) {
  .header__in { flex-wrap: wrap; }
  .menu-btn { display: inline-flex; }
  .nav { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; padding: 8px 0; border-top: 1px solid var(--line); }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .search { order: 4; width: 100%; margin-left: 0; }
  .search input { flex: 1; width: auto; }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 150px; }
  .brand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .card__name { font-size: 20px; }
  .card__img { padding: 8%; }
  .hero__in { padding-top: 36px; padding-bottom: 56px; gap: 40px; }
  .brand-list { grid-template-columns: 1fr; }
  .footer__in { grid-template-columns: 1fr; }
  .topbar__info { display: none; }
  .topbar__in { justify-content: flex-end; }
  .filters__count { margin-left: 0; width: 100%; }
  .specs { grid-template-columns: 1fr 1fr; }
  .boutiques__in { padding-top: 64px; padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }