/* Shared mobile-first catalogue; existing brand typography and colours stay in styles.css. */
.catalog-shell { margin-top: 21px; --action-w:clamp(124px,34vw,156px); --action-h:52px; }
/* Folder tabs: equal widths across the strip. Each tab has one rounded corner on the right;
   its left edge fades out, so the tabs flow into one another without hard seams. The active one sits in front. */
.catalog-head { background:var(--bg); }
.catalog-tabs { display:flex; align-items:flex-end; padding:10px 0 0; background:var(--bg); border-bottom:1px solid var(--line); }
.catalog-tab { position:relative; z-index:var(--tab-z,1); display:flex; align-items:center; justify-content:center; flex:1 1 0; min-width:0; white-space:normal; height:40px; min-height:0; margin:0 0 0 -12px; padding:2px 6px 2px 16px; border:0; background:none; color:var(--muted); font-family:'Cormorant Garamond',serif; font-size:clamp(15px,4.2vw,19px); font-weight:400; line-height:1.08; letter-spacing:.01em; cursor:pointer; transition:min-height .25s var(--ease), padding .25s var(--ease), color .2s; }
.catalog-tab:first-child { margin-left:0; }
.catalog-tab::before, .section-tabs .section-tab::before { content:""; position:absolute; inset:0; z-index:-1; border:1px solid #E2DBD3; border-left:0; border-bottom:0; border-radius:0 13px 0 0; background:linear-gradient(#EDE8E2, color-mix(in srgb, #EDE8E2 30%, var(--bg))); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px); mask-image:linear-gradient(90deg,transparent 0,#000 26px); transition:background .2s; }
.catalog-tab:hover { color:var(--ink-soft); }
.catalog-tab:hover::before, .section-tabs .section-tab:hover::before { background:linear-gradient(#F2EEE9, color-mix(in srgb, #F2EEE9 30%, var(--bg))); }
.catalog-tab[aria-selected="true"] { z-index:10; height:46px; padding-top:4px; color:var(--ink); }
.catalog-tab[aria-selected="true"]::before, .section-tabs .section-tab[aria-current="page"]::before { bottom:-1px; border-color:#D6CDC3; background:linear-gradient(#FBFAF8,var(--bg) 60%); }
.catalog-tab-label { display:block; text-align:center; line-height:1.08; text-wrap:balance; overflow-wrap:normal; word-break:normal; hyphens:none; }
.catalog-tab:focus-visible { outline:none; }
.catalog-tab:focus-visible .catalog-tab-label { outline:1px solid var(--ink); outline-offset:5px; border-radius:2px; }

/* Second row under «Diffusers»: two volumes, underlined like the section links above. */
.catalog-sizes { display:flex; margin:0; padding-top:4px; background:var(--bg); }
.catalog-size { flex:1 1 0; min-width:0; min-height:46px; padding:12px 4px 10px; border:0; border-bottom:1px solid var(--line); background:none; color:var(--muted); font-family:inherit; font-size:12px; font-weight:500; letter-spacing:.12em; line-height:1.3; cursor:pointer; transition:color .2s, border-color .2s; }
.catalog-size:hover { color:var(--ink-soft); }
.catalog-size[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); }
.catalog-size:focus-visible { outline:1px solid var(--ink); outline-offset:-4px; }

.catalog-panel .product-list { margin-top:0; }
.catalog-price { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.5; font-weight:400; letter-spacing:0; }
.catalog-product-header { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:106px; padding:15px 0; }
/* Partner and gifts pages reserve room on the right for the counter; new rows lay out with flex instead. */
:is(#set,body) .catalog-shell .catalog-product .product-toggle { flex:1; min-width:0; padding:0; min-height:44px; }
:is(#set,body:not(.b2c)) .catalog-shell .product:not(.catalog-product) .product-toggle { padding-right:calc(var(--action-w) + 12px); }
.catalog-product .product-name { font-size:clamp(17px,4.6vw,23px); white-space:normal; }
.catalog-product .thumb-wrap { flex:none; }

/* Every action in a row has one size, in all languages: Buy, Notify me and the counters. */
.b2c .catalog-shell .product-header .buy-link,
.b2c .catalog-shell .panel-buy .buy-link { flex:0 0 var(--action-w); flex-direction:column; justify-content:center; align-items:center; gap:2px; width:var(--action-w); min-height:var(--action-h); margin-left:auto; padding:6px 8px; line-height:1.15; }
.b2c .catalog-shell .buy-link .price { gap:6px; }
.b2c .catalog-shell .buy-link .price-old { font-size:11px; }
.b2c .catalog-shell .buy-link .price-new { font-size:13px; }
.catalog-shell button.catalog-notify { position:static; transform:none; display:flex; justify-content:center; align-items:center; flex:0 0 var(--action-w); width:var(--action-w); max-width:none; min-width:0; min-height:var(--action-h); padding:8px 10px; border:1px solid #DDD6CE; border-radius:999px; background:linear-gradient(#EFEBE6,#E9E4DE); color:var(--muted); font-family:inherit; font-size:10px; font-weight:500; letter-spacing:.06em; line-height:1.45; text-align:center; white-space:normal; text-transform:uppercase; cursor:pointer; transition:color .2s, background .2s, border-color .2s; }
.catalog-shell button.catalog-notify:hover { border-color:#D2C9BF; background:linear-gradient(#F3F0EC,#ECE8E3); color:var(--ink-soft); }
.catalog-shell button.catalog-notify:focus-visible { outline:1px solid var(--ink); outline-offset:3px; }
.catalog-shell .stepper { width:var(--action-w); height:var(--action-h); }
.catalog-shell .stepper button { flex:0 0 32%; width:auto; }
.catalog-shell .stepper input { flex:1 1 auto; width:auto; }

.catalog-detail { padding:0 0 22px; }
.catalog-detail[hidden], .catalog-shell [hidden] { display:none!important; }
.catalog-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; background:var(--photo-bg); }
.catalog-gallery img { width:100%; height:auto; max-height:520px; object-fit:contain; aspect-ratio:1; background:#fff; }
.catalog-detail .catalog-notify { margin:18px 0 0 auto; }
.catalog-detail .product-notes { margin:20px 0 10px; }
.catalog-detail-meta { font-size:10px; color:var(--muted); margin-top:16px; letter-spacing:.04em; }
.photo-missing { display:grid; place-items:center; width:60px; height:60px; background:var(--photo-bg); color:var(--muted); font-family:'Cormorant Garamond',serif; font-size:23px; }
.catalog-photo-note { margin:0; padding:50px 20px; text-align:center; font-size:12px; color:var(--muted); }
.notify-close { width:44px; height:44px; }
.catalog-error { line-height:1.6; font-size:14px; }

/* Partner and gifts pages: a calm bar along the bottom edge — the request button and the note under it.
   Edge to edge with a hairline on top, like an app's action bar; contacts live in the menu. */
body.has-dock { padding-bottom:calc(120px + env(safe-area-inset-bottom)); }
.action-dock { position:fixed; z-index:20; left:0; right:0; bottom:0; padding:10px var(--page-gutter) calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:color-mix(in srgb, var(--bg) 95%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.action-dock-inner { max-width:640px; margin:0 auto; }
@media(min-width:768px) { .action-dock-inner { width:clamp(480px,46vw,640px); } }
.action-dock .dock-cta { width:100%; max-width:none; min-height:48px; margin:0; padding:10px 18px; white-space:normal; text-wrap:balance; line-height:1.4; }
.action-dock .dock-cta:not(.metal) { border:1px solid var(--ink); background:var(--bg); color:var(--ink); transition:background-color .3s, color .3s; }
.action-dock .dock-cta:not(.metal):hover { background:var(--ink); color:var(--bg); }
.dock-note { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.4; text-align:center; text-wrap:balance; }

/* Menu: three lines opposite the language switch, the same pill style. */
.menu-button { position:fixed; z-index:11; top:calc(12px + env(safe-area-inset-top)); left:calc(12px + env(safe-area-inset-left)); display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:50%; background:color-mix(in srgb, var(--bg) 88%, transparent); box-shadow:0 1px 6px rgba(30,28,26,.06); color:var(--ink); cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.menu-button::after { content:""; position:absolute; inset:-6px; }
.menu-icon { display:block; width:16px; height:12px; }
.menu-button { border-color:transparent; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; transition:border-color .2s, background-color .2s, box-shadow .2s; }
.menu-button:hover, .menu-button:active, .menu-button:focus-visible, .menu-button[aria-expanded="true"] { border-color:var(--line); background:color-mix(in srgb, var(--bg) 88%, transparent); box-shadow:0 1px 6px rgba(30,28,26,.06); }
.menu-button:focus-visible, .site-menu a:focus-visible, .site-menu button:focus-visible { outline:1px solid var(--ink); outline-offset:3px; }
@media(max-width:420px) { .menu-button { width:34px; height:34px; } }
.site-menu { position:fixed; inset:0 auto 0 0; width:min(360px, 88vw); max-width:none; height:100dvh; max-height:none; margin:0; padding:calc(14px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; border:0; border-right:1px solid var(--line); background:var(--bg); color:var(--ink); box-shadow:12px 0 40px rgba(30,28,26,.12); }
.site-menu[open] { animation:menu-in .32s var(--ease); }
.site-menu::backdrop { background:rgba(30,28,26,.22); }
@keyframes menu-in { from { transform:translateX(-24px); opacity:0; } to { transform:none; opacity:1; } }
.site-menu-top { display:flex; gap:12px; justify-content:space-between; align-items:center; padding-bottom:13px; border-bottom:1px solid var(--line); }
.site-menu-title { margin:0; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.site-menu-close { flex:none; width:44px; height:44px; margin:0; padding:0; border:0; background:none; color:var(--ink-soft); font-size:26px; font-weight:300; line-height:1; cursor:pointer; }
.site-menu-sections, .site-menu-parts { margin:0; padding:0; list-style:none; }
.site-menu-section { padding:16px 0 13px; border-bottom:1px solid var(--line); }
.site-menu-link { display:block; color:var(--ink); font-family:'Cormorant Garamond',serif; font-size:23px; line-height:1.2; text-decoration:none; }
.site-menu-section.is-current .site-menu-link::after { content:""; display:inline-block; width:5px; height:5px; margin-left:9px; border-radius:50%; background:var(--ink-soft); vertical-align:middle; }
.site-menu-parts { margin-top:6px; }
.site-menu-part { display:flex; align-items:center; min-height:34px; color:var(--ink-soft); font-size:13px; line-height:1.4; text-decoration:none; }
.site-menu-part::before { content:""; width:12px; height:1px; margin-right:10px; background:var(--line); }
.site-menu-link:hover, .site-menu-part:hover { color:var(--ink); }
.site-menu-toggle { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:16px; padding:18px 0 16px; border-bottom:1px solid var(--line); }
.site-menu-toggle-label { color:var(--ink); font-size:13px; line-height:1.45; cursor:pointer; }
.site-menu-toggle-note { grid-column:1 / -1; margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.switch { display:grid; place-items:center; width:50px; height:44px; padding:0; border:0; background:none; cursor:pointer; }
.switch-track { display:block; width:46px; height:28px; border:1px solid #D3CABF; border-radius:999px; background:linear-gradient(#EFEBE6,#E9E4DE); transition:background .25s, border-color .25s; }
.switch-thumb { display:block; width:22px; height:22px; margin:2px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(30,28,26,.22); transition:transform .25s var(--ease); }
.switch[aria-checked="true"] .switch-track { border-color:var(--ink); background:var(--ink); }
.switch[aria-checked="true"] .switch-thumb { transform:translateX(18px); }
.site-menu-heading { margin:18px 0 10px; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.site-menu-contacts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.site-menu-contacts .contact-chip { min-height:40px; }
/* Anchors from the menu land below the floating buttons. */
#how, #set, #terms, #catalog, #offer { scroll-margin-top:64px; }
body.menu-open { overflow:hidden; }

/* The quantity label sits right above the first counter. */
.catalog-shell + .offer-action { margin-top:21px; }
.catalog-panel > .qty-head { margin:13px 0 0; text-align:right; }
/* Narrow phones: a long subtitle («200 мл · диффузор») wraps instead of being cut off. */
.catalog-shell .product-subtitle { white-space:normal; overflow:visible; text-overflow:clip; }
/* Partner page: less air between the request button and the terms below it. */
#set { padding-bottom:21px; }

@media(min-width:768px) { .catalog-tabs { padding-top:12px; } .catalog-tab { height:42px; margin-left:-14px; padding:2px 8px 2px 22px; } .catalog-tab[aria-selected="true"] { height:48px; padding-top:4px; } .catalog-product-header { min-height:115px; } }
@media(max-width:439px) { .catalog-tab { font-size:clamp(14px,4vw,17px); } }
@media(max-width:359px) { .catalog-shell { --action-w:118px; } .catalog-product-header { gap:8px; } .catalog-shell button.catalog-notify { padding-inline:6px; font-size:9.5px; letter-spacing:.03em; } .b2c .catalog-shell .buy-link .price { gap:4px; } .b2c .catalog-shell .buy-link .price-old { font-size:10px; } .b2c .catalog-shell .buy-link .price-new { font-size:12px; } .catalog-tab { font-size:13.5px; padding-left:15px; padding-right:4px; } }
@media(prefers-reduced-motion:reduce) { .catalog-tab, .catalog-tab::before, .catalog-size, .switch-track, .switch-thumb { transition:none; } .site-menu[open] { animation:none; } }

/* Section tabs under the logo (nav.js) as the same folder tabs as the catalogue: equal widths,
   one rounded corner on the right, a fading left edge; the current section sits in front.
   Labels on two lines everywhere («Партнерская / программа»). */
.section-tabs { display:flex; align-items:flex-end; gap:0; margin:0; padding-top:4px; border-bottom:1px solid var(--line); }
.section-tabs .section-tab { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex:1 1 0; min-width:0; height:44px; min-height:0; margin:0 0 0 -12px; padding:2px 6px 2px 16px; color:var(--muted); opacity:1; font-family:"Cormorant Garamond",serif; font-size:clamp(13px,3.9vw,17px); font-weight:400; letter-spacing:.01em; line-height:1.05; text-transform:none; transition:color .2s, height .25s var(--ease); }
.section-tabs .section-tab:first-child { margin-left:0; z-index:3; }
.section-tabs .section-tab:nth-child(2) { z-index:2; }
.section-tabs .section-tab:hover { color:var(--ink-soft); opacity:1; }
.section-tabs .section-tab[aria-current="page"] { z-index:10; height:50px; padding-top:4px; color:var(--ink); }
.section-tabs .section-tab-label { display:inline-block; padding:0; border:0; text-align:left; }
.section-tabs .section-tab-label span { display:block; white-space:nowrap; }
.section-tabs .section-tab:focus-visible { outline:none; }
.section-tabs .section-tab:focus-visible .section-tab-label { outline:1px solid var(--ink); outline-offset:4px; }
@media(min-width:768px) { .section-tabs .section-tab { height:46px; margin-left:-14px; padding-left:22px; font-size:17px; } .section-tabs .section-tab[aria-current="page"] { height:52px; } }

/* One vertical rhythm under the tabs: the first text of each page sits midway between the line
   under the section tabs and the next line (21 px above and below). */
.site .promo-line { padding-top:21px; }
.hero-title, .intro-title { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hero { padding:21px 0 clamp(22px,6vw,36px); }
.hero .lead { margin-bottom:calc(21px + .22em); }
.intro { padding-top:21px; }
.intro .intro-lead { margin-top:0; }
.catalog-panel > .qty-head { margin:0 0 4px; }
/* Partner page: steps 1–2–3 and the rule after them at one spacing; a quarter less air around «Choose your set». */
.block-plain:has(.steps), #how { padding-bottom:0; }
#set { padding-top:26px; }
#set .block-title { margin-bottom:10px; }

/* Every row: a short scent line. On phones under «200 мл · диффузор»; from tablets on, its own column
   between the text and the button. Name sizes are one for all products. */
.catalog-shell .product-name { font-size:clamp(17px,4.6vw,23px); line-height:1.05; white-space:normal; }
.product-brief { display:block; margin-top:3px; color:var(--ink-soft); font-size:11.5px; line-height:1.35; letter-spacing:.01em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.product-brief[hidden] { display:none; }
@media(min-width:768px) {
  .catalog-shell .product-copy { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:18px; align-items:center; }
  .catalog-shell .product-copy > * { grid-column:1; }
  .catalog-shell .product-copy > .product-brief { grid-column:2; grid-row:1 / span 6; align-self:center; margin:0; font-size:12px; }
}
@media(hover:hover) { .catalog-product-header:hover .zoom-icon { transform:scale(1.12); } }
@media(max-width:359px) { .section-tabs .section-tab { padding-left:14px; padding-right:3px; font-size:13px; } }
/* In-stock rows on the retail page: the text column shrinks, so the buy button stays beside it on narrow phones. */
.b2c .catalog-shell .product-header .product-toggle { flex:1 1 0; min-width:0; }

/* Open card: the short scent line already stands in the row and the size in the subtitle, so neither repeats here. */
.catalog-shell .product-notes, .catalog-shell .catalog-detail-meta { display:none; }

/* 404: the logo, a short line and the three sections in each language. */
.not-found { padding:34px 0 55px; color:var(--ink-soft); line-height:1.6; }
.not-found h1 { margin:0 0 13px; color:var(--ink); font:400 clamp(27px,7.4vw,38px)/1.1 "Cormorant Garamond",serif; }
.not-found ul { margin:13px 0 21px; padding:0; list-style:none; border-top:1px solid var(--line); }
.not-found li { border-bottom:1px solid var(--line); }
.not-found li a { display:block; padding:13px 0; color:var(--ink); font:400 clamp(19px,5vw,23px)/1.2 "Cormorant Garamond",serif; text-decoration:none; }
.not-found p a { color:var(--ink); }

/* WEB-01. Samsung Internet (and other browsers with a forced dark mode) darken any site that has no dark theme of its
   own; color-scheme alone does not stop them. A dark-scheme rule that keeps the light palette marks the site as
   dark-aware, so the page stays exactly as designed, light, on every phone. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; --bg:#F6F4F1; --photo-bg:#E8E6E4; --ink:#1E1C1A; --ink-soft:#4A4540; --muted:#746D67; --ab-smoke:#B3ADA6; --line:#E7E2DC; background:#F6F4F1; color:#1E1C1A; }
  html, body { background-color:#F6F4F1; color:#1E1C1A; }
}

/* The one-character information icon keeps the original italic outline without loading a full font. */
.info-btn { font-family: "AB Info", serif; }