/* =========================================================================
   «Линза» — an optics boutique.

   Op-art after Vasarely: black and white concentric circles and stripes, a
   bento grid of soft cells, frames photographed in round «lenses», one
   signal orange. Geologica (thin against bold) for headlines, Inter for
   text. No shadows: depth comes from circle patterns in single cells.
   Loaded after the parent's theme, blocks and chrome styles and the
   modules' styles: it remaps the parent's tokens, then dresses the chrome,
   the shared blocks, its own blocks and the shop.

   1. Fonts   2. Design settings   3. Tokens   4. Base   5. Buttons & forms
   6. Header   7. Footer   8. Section heads   9. Own blocks
   10. Shared blocks   11. Shop   12. Variants   13. Motion
   ========================================================================= */

/* 1. Fonts — Geologica ships with the template (OFL, licence in assets/fonts); Inter is the parent's. */
@font-face { font-family: 'Linza Geologica'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/geologica-cyrillic-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Linza Geologica'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/geologica-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Linza Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/themes/default/assets/fonts/inter-cyrillic-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Linza Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/themes/default/assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 2. The owner's design settings (theme.json → design.controls). Core
   prints the chosen values as :root{--lz-…} after this file. */
:root {
    --lz-signal: #ff4a1c;
    --lz-black: #0e0e0e;
    --lz-white: #fafaf8;
    --lz-cell: 16px;
    --lz-font-display: 'Linza Geologica', 'Segoe UI', system-ui, Arial, sans-serif;
    --lz-font-body: 'Linza Inter', 'Segoe UI', system-ui, Arial, sans-serif;
}

/* 3. Tokens. */
html.linza {
    --lz-grey: #8c8c8c;
    --lz-grey-2: #ecece9;
    --lz-card: #ffffff;
    --lz-ink: var(--lz-black);
    --lz-ink-2: #3d3d3d;
    --lz-line: var(--lz-black);
    --lz-signal-2: color-mix(in srgb, var(--lz-signal) 82%, #000);
    --lz-signal-a: color-mix(in srgb, var(--lz-signal) 12%, transparent);
    --lz-r: var(--lz-cell);
    --lz-rb: 12px;
    --lz-ring: repeating-radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), var(--lz-black) 0 5px, var(--lz-white) 5px 10px);

    --paper: var(--lz-white);
    --c-bg: var(--lz-white);
    --c-surface: var(--lz-card);
    --c-surface-sunk: var(--lz-grey-2);
    --c-text: var(--lz-ink);
    --c-text-strong: var(--lz-ink);
    --c-text-muted: var(--lz-ink-2);
    --c-text-faint: var(--lz-grey);
    --c-border: rgb(14 14 14 / 0.16);
    --c-border-strong: var(--lz-black);
    --c-accent: var(--lz-signal);
    --c-accent-hover: var(--lz-signal-2);
    --c-accent-soft: var(--lz-signal-a);
    --c-accent-contrast: #fff;
    --c-link: var(--lz-ink);
    --c-link-hover: var(--lz-signal-2);
    --c-mark: var(--lz-signal);
    --c-mark-text: var(--lz-signal-2);
    --c-mark-soft: var(--lz-signal-a);
    --c-slab: var(--lz-black);
    --c-slab-text: #fafaf8;
    --c-slab-muted: #bdbdbd;
    --c-danger: #c0220a;
    --c-success: #1f6a4a;

    --font-ui: var(--lz-font-body);
    --font-display: var(--lz-font-display);
    --font-prose: var(--lz-font-body);
    --fw-heading: 700;
    --tr-tight: -0.035em;
    --tr-snug: -0.015em;
    --r-xs: 8px;
    --r-sm: var(--lz-rb);
    --r-md: var(--lz-r);
    --r-lg: var(--lz-r);
    --r-btn: var(--lz-rb);
    --card-radius: var(--lz-r);
    --card-bg: var(--lz-card);
    --card-border: 2px solid var(--lz-black);
    --w-container: 72rem;
    --w-wide: 84rem;
    --shadow-lift: none;
    color-scheme: light;
}

/* Section tones: soft = grey cell paper, dark = black, accent = signal. */
.linza .cms-tone-soft { --section-bg: var(--lz-grey-2); --c-bg: var(--lz-grey-2); --c-surface: var(--lz-card); }
.linza .cms-tone-dark,
.linza .cms-tone-primary,
.linza .cms-on-dark {
    --c-bg: var(--lz-black); --c-surface: #1b1b1b; --c-surface-sunk: #060606;
    --c-text: #ececec; --c-text-strong: #fff; --c-text-muted: #bdbdbd; --c-text-faint: #8c8c8c;
    --c-border: rgb(255 255 255 / 0.2); --c-border-strong: #fff;
    --c-link: #fff; --c-link-hover: var(--lz-signal);
    --c-accent: var(--lz-signal); --c-accent-hover: #ff6a40; --c-accent-contrast: #fff;
    --card-border: 2px solid #fff;
    color-scheme: dark;
}
.linza .cms-tone-dark, .linza .cms-tone-primary { --section-bg: var(--lz-black); }
.linza .cms-tone-accent {
    --section-bg: var(--lz-signal); --c-bg: var(--lz-signal); --c-surface: var(--lz-signal-2);
    --c-text: #fff; --c-text-strong: #fff; --c-text-muted: #ffe3da; --c-text-faint: #ffd0c2;
    --c-border: rgb(255 255 255 / 0.4); --c-border-strong: #fff;
    --c-link: #fff; --c-link-hover: #fff;
    --c-accent: #0e0e0e; --c-accent-hover: #000; --c-accent-contrast: #fff;
}
.linza .cms-on-light { --c-bg: var(--lz-white); --c-surface: var(--lz-card); }

/* 4. Base */
html.linza,
.linza body { background: var(--lz-white); color: var(--lz-ink); }
.linza body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.linza ::selection { background: var(--lz-signal); color: #fff; }
.linza :focus-visible { outline: 3px solid var(--lz-signal); outline-offset: 3px; border-radius: 6px; }

.linza h1, .linza h2, .linza h3,
.linza .cms-section__title { font-family: var(--font-display); font-weight: var(--fw-heading); letter-spacing: var(--tr-tight); line-height: 0.95; color: var(--c-text-strong); }
.lz-wrap { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* A reusable op-art fill: concentric rings with one signal dot. */
.lz-opart { position: relative; background: var(--lz-ring); overflow: hidden; }
.lz-opart::after { content: ''; position: absolute; left: var(--dx, 62%); top: var(--dy, 38%); width: clamp(2.2rem, 4vw, 3.6rem); aspect-ratio: 1; border-radius: 50%; background: var(--lz-signal); transform: translate(-50%, -50%); }
html.linza[data-lz-opart="off"] .lz-opart { background: var(--lz-grey-2); }

/* 5. Buttons and forms. */
.linza .cms-btn,
.lz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 52px; padding: 0.7rem 1.6rem;
    border-radius: var(--lz-rb); border: 2px solid transparent; font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
    text-decoration: none; box-shadow: none; cursor: pointer;
    transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.linza .cms-btn--primary,
.lz-btn--primary { background: var(--lz-signal); color: #fff; border-color: var(--lz-signal); }
.linza .cms-btn--primary:hover,
.lz-btn--primary:hover { background: var(--lz-black); border-color: var(--lz-black); color: #fff; transform: translateY(-2px); }
.linza .cms-tone-dark .cms-btn--primary:hover { background: #fff; border-color: #fff; color: var(--lz-black); }
.linza .cms-btn--ghost { background: transparent; border-color: var(--lz-black); color: var(--lz-black); }
.linza .cms-btn--ghost:hover { background: var(--lz-black); color: #fff; }
.linza .cms-tone-dark .cms-btn--ghost { border-color: #fff; color: #fff; }
.linza .cms-tone-dark .cms-btn--ghost:hover { background: #fff; color: var(--lz-black); }
.linza .cms-btn--link { padding-inline: 0.15rem; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--lz-signal); }
.lz-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--lz-signal); }
.lz-link:hover { color: var(--lz-signal); }

.linza .cms-form__label { font-size: var(--t-sm); font-weight: 600; color: var(--c-text-muted); }
.linza .cms-form__input,
.linza input[type="text"], .linza input[type="tel"], .linza input[type="email"], .linza input[type="number"], .linza select, .linza textarea {
    min-height: 52px; background: var(--lz-card); border: 2px solid var(--lz-black); border-radius: var(--lz-rb); color: var(--lz-ink);
}
.linza .cms-form__input:focus { border-color: var(--lz-signal); outline: none; box-shadow: none; }
.linza .cms-form__req { color: var(--lz-signal); }
.linza .cms-form__check input { accent-color: var(--lz-black); }
.linza .cms-form__success { border-radius: var(--lz-rb); background: var(--lz-grey-2); border: 0; border-left: 6px solid var(--lz-signal); color: var(--c-text-strong); }

/* 6. Header: a white bar, a quiet black strip above, a dot under the current page. */
.lz-hdr.site-header { position: relative; background: var(--lz-white); color: var(--lz-ink); border-bottom: 2px solid var(--lz-black); z-index: 40; }
.lz-hdr.site-header--sticky { position: sticky; top: 0; }
.lz-hdr .hdr-row__inner { max-width: var(--w-wide); }
.lz-hdr .hdr-row--top { background: var(--lz-black); color: #d6d6d6; font-size: 0.78rem; border-bottom: 0; }
.lz-hdr .hdr-row--top a { color: inherit; }
.lz-hdr .hdr-row--top .hdr-row__inner { min-height: 36px; }
.lz-hdr .hdr-row--main { background: transparent; border: 0; }
.lz-hdr .hdr-row--main .hdr-row__inner { min-height: 76px; }

.lz-hdr .hdr-logo { color: var(--lz-ink); gap: 0.6rem; text-decoration: none; }
.lz-hdr .hdr-logo__name,
.lz-drawer .hdr-logo__name,
.lz-ftr .lz-ftr__name { font-family: var(--lz-font-display); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.lz-logo .lz-mark, .lz-ftr__mark { width: 40px; height: auto; color: var(--lz-black); flex: none; }
.lz-hdr .hdr-logo__tagline { font-size: 0.72rem; color: var(--lz-grey); }

.lz-hdr .hdr-nav__link { position: relative; font-size: 0.95rem; font-weight: 500; padding-inline: 0.9rem; color: var(--lz-ink); border-radius: var(--lz-rb); }
.lz-hdr .hdr-nav__link:hover,
.lz-hdr .hdr-nav__item:hover > .hdr-nav__link { background: var(--lz-grey-2); color: var(--lz-ink); }
.lz-hdr .hdr-nav__link.is-active::after,
.lz-hdr .hdr-nav__link[aria-current="page"]::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--lz-signal); transform: translateX(-50%); }
.lz-hdr .hdr-sub { background: var(--lz-card); border: 2px solid var(--lz-black); border-radius: var(--lz-r); padding: 0.4rem; }
.lz-hdr .hdr-sub__link { color: var(--lz-ink); border-radius: 10px; }
.lz-hdr .hdr-sub__link:hover { background: var(--lz-grey-2); }
.lz-hdr .hdr-phone__number { font-family: var(--lz-font-display); font-weight: 700; font-size: 1.02rem; color: var(--lz-ink); letter-spacing: -0.02em; }
.lz-hdr .hdr-phone__caption { font-size: 0.7rem; color: var(--lz-grey); }
.lz-hdr .hdr-button, .lz-hdr .hdr-el--button .cms-btn { white-space: nowrap; min-height: 46px; padding: 0.5rem 1.25rem; font-size: 0.92rem; }
.lz-hdr .hdr-burger, .lz-hdr .hdr-icon-btn { color: var(--lz-ink); }
.lz-hdr .shop-hsearch-wrap, .lz-hdr .shop-hsearch { max-width: 15rem; }
.lz-hdr .shop-hsearch__input { border-radius: var(--lz-rb); border: 2px solid var(--lz-black); }

.lz-drawer.hdr-drawer { background: var(--lz-white); color: var(--lz-ink); border-radius: var(--lz-r) 0 0 var(--lz-r); }
.lz-drawer .hdr-dmenu__link { font-family: var(--lz-font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--lz-ink); }
.lz-drawer .hdr-drawer__phone { color: var(--lz-ink); }
.lz-drawer .hdr-drawer__line { color: var(--lz-ink-2); }

html.linza[data-lz-header="black"] .lz-hdr.site-header { background: var(--lz-black); color: #fff; }
html.linza[data-lz-header="black"] .lz-hdr .hdr-row--top { background: #1b1b1b; }
html.linza[data-lz-header="black"] .lz-hdr .hdr-logo,
html.linza[data-lz-header="black"] .lz-hdr .hdr-nav__link,
html.linza[data-lz-header="black"] .lz-hdr .hdr-phone__number,
html.linza[data-lz-header="black"] .lz-hdr .hdr-burger,
html.linza[data-lz-header="black"] .lz-hdr .hdr-icon-btn,
html.linza[data-lz-header="black"] .lz-logo .lz-mark { color: #fff; }
html.linza[data-lz-header="black"] .lz-hdr .hdr-nav__link:hover { background: #1b1b1b; color: #fff; }
html.linza[data-lz-header="black"] .lz-hdr .hdr-phone__caption { color: #9b9b9b; }

/* 7. Footer: black, with a ring pattern and a decorative chart. */
.lz-ftr.site-footer {
    position: relative; overflow: hidden; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 0;
    background: var(--lz-black); color: #bdbdbd; border-top: 0; border-radius: var(--lz-r) var(--lz-r) 0 0;
    --c-text: #ececec; --c-text-strong: #fff;
}
.lz-ftr::before { content: ''; position: absolute; right: -14rem; top: -14rem; width: 36rem; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #1f1f1f 0 6px, #0e0e0e 6px 12px); pointer-events: none; }
.lz-ftr::after { content: ''; position: absolute; right: 9rem; top: 4rem; width: 3rem; aspect-ratio: 1; border-radius: 50%; background: var(--lz-signal); pointer-events: none; }
html.linza[data-lz-opart="off"] .lz-ftr::before, html.linza[data-lz-opart="off"] .lz-ftr::after { display: none; }
.lz-ftr > * { position: relative; z-index: 1; }
.lz-ftr__band { border-bottom: 2px solid #232323; padding-block: var(--s-7); }
.lz-ftr__band-inner { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 860px) { .lz-ftr__band-inner { grid-template-columns: 1fr 1.2fr; } }
.lz-ftr__band-title { font-size: var(--t-2xl, 2rem); color: #fff; }
.lz-ftr__band-lead { color: #bdbdbd; margin: 0.5rem 0 0; }
.lz-ftr__main { display: grid; gap: var(--s-7); padding-block: var(--s-8) var(--s-7); }
@media (min-width: 960px) { .lz-ftr__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); } }
.lz-ftr__chart { display: grid; gap: 0.1em; margin-bottom: var(--s-6); font-family: var(--lz-font-display); font-weight: 700; line-height: 1; letter-spacing: 0.3em; color: rgb(255 255 255 / 0.16); }
.lz-ftr__chart span::before { content: var(--t); }
.lz-ftr__chart span:nth-child(1) { font-size: 4.2rem; --t: 'Ш Б'; }
.lz-ftr__chart span:nth-child(2) { font-size: 3.1rem; --t: 'М Н К'; }
.lz-ftr__chart span:nth-child(3) { font-size: 2.3rem; --t: 'Ы Б Н Ш'; }
.lz-ftr__chart span:nth-child(4) { font-size: 1.7rem; --t: 'К М Ы Н Б'; }
.lz-ftr__chart span:nth-child(5) { font-size: 1.25rem; --t: 'Н Ш Б К Ы М'; }
html.linza[data-lz-opart="off"] .lz-ftr__chart { display: none; }
.lz-ftr__brand { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; }
.lz-ftr__mark { color: #fff; }
.lz-ftr__name { font-size: 1.7rem; color: #fff; }
.lz-ftr__text { margin-top: var(--s-4); max-width: 28rem; line-height: 1.65; }
.lz-ftr__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-content: start; }
.lz-ftr__title { margin: 0 0 var(--s-4); font-family: var(--lz-font-display); font-size: 1.3rem; font-weight: 300; letter-spacing: -0.02em; color: #fff; line-height: 1.1; }
.lz-ftr__title--about { margin-top: var(--s-4); font-weight: 700; font-size: var(--t-lg); }
.lz-ftr__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lz-ftr__menu a { color: #ececec; text-decoration: none; }
.lz-ftr__menu a:hover { color: var(--lz-signal); }
.lz-ftr__contacts { font-style: normal; display: grid; gap: 0.5rem; }
.lz-ftr__phone a { font-family: var(--lz-font-display); font-size: 1.6rem; font-weight: 300; letter-spacing: -0.03em; color: #fff; text-decoration: none; }
.lz-ftr__phone span { display: block; font-size: var(--t-xs); color: #8c8c8c; }
.lz-ftr__line a { color: #ececec; }
.lz-ftr__line--muted { color: #8c8c8c; }
.lz-ftr__socials { margin-top: var(--s-5); }
.lz-ftr .site-socials__link { background: transparent; border: 2px solid #fff; color: #fff; border-radius: 50%; }
.lz-ftr .site-socials__link:hover { background: var(--lz-signal); border-color: var(--lz-signal); }
.lz-ftr__bottom { border-top: 2px solid #232323; padding-block: var(--s-5); font-size: var(--t-xs); color: #8c8c8c; }
.lz-ftr__bottom-inner { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; }
.lz-ftr__links { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.lz-ftr__links a { color: #bdbdbd; }
.lz-ftr__copy, .lz-ftr__company { margin: 0; }
.lz-ftr .site-footer__slot { margin-left: auto; }
.lz-ftr .cms-form__input { background: #fff; }
.lz-ftr .cms-form__label { color: #bdbdbd; }

/* 8. Section heads: huge headline, light/bold contrast. */
.linza .cms-section__title { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5rem); }
.linza h1.cms-section__title { font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); }
.linza .cms-section__subtitle { font-size: var(--t-md); color: var(--c-text-muted); max-width: 38rem; line-height: 1.55; }
.linza .cms-section__head { max-width: 56rem; margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
@media (min-width: 900px) { .linza .cms-section__head--left { max-width: none; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: end; } .linza .cms-section__head--left .cms-section__subtitle { margin: 0; } }
html.linza[data-lz-density="compact"] .cms-section { --section-pad: clamp(1.75rem, 1rem + 3vw, 3.5rem); }

/* 9. Own blocks ---------------------------------------------------------- */

/* Hero: a 4 × 2 bento that fills the first screen. */
.lz-hero { max-width: var(--w-wide); margin-inline: auto; padding: clamp(0.75rem, 2vw, 1.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); }
.lz-bento { display: grid; gap: clamp(0.6rem, 1.2vw, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lz-cell { position: relative; border-radius: var(--lz-r); border: 2px solid var(--lz-black); background: var(--lz-card); color: var(--lz-ink); overflow: hidden; text-decoration: none; min-width: 0; }
.lz-cell--title { grid-column: 1 / -1; background: var(--lz-black); color: #fff; padding: clamp(1.25rem, 3vw, 2.75rem); display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; min-height: 22rem; }
.lz-hero__eyebrow { margin: 0; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; color: #bdbdbd; display: flex; align-items: center; gap: 0.6rem; }
.lz-hero__eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--lz-signal); flex: none; }
.lz-hero .lz-hero__title { margin: 0; color: #fff; font-size: clamp(3.5rem, 12vw, 8.5rem); line-height: 0.88; letter-spacing: -0.05em; font-weight: 700; }
.lz-hero__title b { display: block; font: inherit; }
.lz-hero__title b:first-child { font-weight: 300; }
.lz-hero__text { margin: 0; max-width: 34rem; color: #d0d0d0; font-size: var(--t-md); line-height: 1.55; }
.lz-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.5rem; }
.lz-hero__actions .lz-link { color: #fff; }
.lz-cell--lens { grid-column: 1 / -1; display: grid; place-content: center; justify-items: center; padding: clamp(0.75rem, 2vw, 1.25rem); background: var(--lz-grey-2); }
.lz-lens { position: relative; display: block; width: min(100%, 26rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--lz-black); background: #e4e4e1; cursor: zoom-in; }
.lz-hero__img, .lz-lens > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.lz-hero__caption { margin: 0.6rem 0 0; font-size: 0.74rem; color: var(--lz-grey); text-align: center; }
.lz-cell.lz-cell--opart { min-height: 9rem; --cx: 30%; --cy: 70%; background: var(--lz-ring); }
.lz-cell--opart::after { content: ''; position: absolute; left: 66%; top: 34%; width: clamp(2.4rem, 5vw, 4rem); aspect-ratio: 1; border-radius: 50%; background: var(--lz-signal); transform: translate(-50%, -50%); }
html.linza[data-lz-opart="off"] .lz-cell.lz-cell--opart { background: var(--lz-grey-2); }
.lz-cell--check, .lz-cell--price { display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; padding: clamp(1rem, 2vw, 1.5rem); min-height: 9.5rem; transition: background-color 180ms var(--ease), color 180ms var(--ease); }
.lz-cell--check { background: var(--lz-signal); border-color: var(--lz-signal); color: #fff; }
.lz-cell--check:hover { background: var(--lz-black); border-color: var(--lz-black); }
.lz-cell--price:hover { background: var(--lz-black); color: #fff; }
.lz-cell__label { margin: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.lz-cell__big { margin: 0; font-family: var(--lz-font-display); font-weight: 300; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); line-height: 0.95; letter-spacing: -0.05em; }
.lz-cell__sub { margin: 0; font-size: 0.85rem; opacity: 0.88; }

@media (min-width: 900px) {
    .lz-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(15rem, 1fr)); min-height: min(42rem, calc(100vh - 11rem)); }
    .lz-cell--title { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 0; }
    .lz-cell--lens { grid-column: 3; grid-row: 1; }
    .lz-cell--opart { grid-column: 4; grid-row: 1; min-height: 0; }
    .lz-cell--check { grid-column: 3; grid-row: 2; min-height: 0; }
    .lz-cell--price { grid-column: 4; grid-row: 2; min-height: 0; }
}

/* The loupe: a clone of the picture, magnified inside a round clip that follows the pointer (linza.js). */
.lz-loupe-zoom { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; opacity: 0; transform: scale(1.6); transform-origin: var(--x, 50%) var(--y, 50%); clip-path: circle(50px at var(--x, 50%) var(--y, 50%)); transition: opacity 140ms var(--ease); z-index: 3; }
[data-lz-loupe-on]:hover .lz-loupe-zoom { opacity: 1; }
html.linza[data-lz-loupe="off"] .lz-loupe-zoom { display: none; }
@media (hover: none), (prefers-reduced-motion: reduce) { .lz-loupe-zoom { display: none; } .lz-lens { cursor: default; } }

/* Catalogue index: bento cells, the first one black. */
.lz-index__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.6rem, 1.2vw, 1rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .lz-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lz-index__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lz-index__row:first-child { grid-column: span 2; grid-row: span 2; } }
.lz-index__row { display: contents; }
.lz-index__link { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; min-height: 17rem; padding: clamp(1.1rem, 2vw, 1.6rem); border: 2px solid var(--lz-black); border-radius: var(--lz-r); background: var(--lz-card); color: var(--lz-ink); text-decoration: none; overflow: hidden; transition: background-color 180ms var(--ease), color 180ms var(--ease); }
.lz-index__row:first-child .lz-index__link { background: var(--lz-black); color: #fff; min-height: 22rem; }
.lz-index__no { position: absolute; left: 1.2rem; top: 1rem; font-size: 0.8rem; font-weight: 600; color: var(--lz-grey); }
.lz-index__name { position: relative; z-index: 2; font-family: var(--lz-font-display); font-size: clamp(1.45rem, 1rem + 1.1vw, 2.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.98; overflow-wrap: anywhere; hyphens: auto; }
.lz-index__row:first-child .lz-index__name { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.8rem); font-weight: 300; }
.lz-index__text { position: relative; z-index: 2; font-size: var(--t-sm); max-width: 20rem; opacity: 0.85; }
.lz-index__meta { position: relative; z-index: 2; font-family: var(--lz-font-display); font-weight: 300; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--lz-signal); }
.lz-index__pic { position: absolute; right: 1rem; top: 1rem; width: 46%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--lz-grey-2); border: 2px solid var(--lz-black); transition: transform 300ms var(--ease); }
.lz-index__row:first-child .lz-index__pic { width: 50%; right: 1.6rem; top: 1.6rem; border-color: #fff; }
.lz-index__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lz-index__link:hover { background: var(--lz-signal); border-color: var(--lz-signal); color: #fff; }
.lz-index__link:hover .lz-index__meta, .lz-index__link:hover .lz-index__no { color: #fff; }
.lz-index__link:hover .lz-index__pic { transform: scale(1.06) rotate(-4deg); }

/* The eye chart: a black cell of shrinking letters, the last row is the call to action; the key sits in white cells. */
.lz-rx { display: grid; gap: clamp(0.6rem, 1.2vw, 1rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .lz-rx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lz-rx { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lz-rx__chart { grid-column: span 2; grid-row: span 2; } }
.lz-rx__chart { background: var(--lz-black); color: #fff; border-radius: var(--lz-r); padding: clamp(1.25rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; gap: 0.2em; font-family: var(--lz-font-display); font-weight: 700; line-height: 1; letter-spacing: 0.3em; min-height: 22rem; border: 2px solid var(--lz-black); }
.lz-rx__row { white-space: nowrap; overflow: hidden; }
.lz-rx__row::before { content: var(--t); }
.lz-rx__row:nth-child(1) { font-size: clamp(3.2rem, 2rem + 4vw, 6rem); --t: 'Ш Б'; }
.lz-rx__row:nth-child(2) { font-size: clamp(2.4rem, 1.5rem + 3vw, 4.4rem); --t: 'М Н К'; }
.lz-rx__row:nth-child(3) { font-size: clamp(1.8rem, 1.2rem + 2vw, 3.2rem); --t: 'Ы Б Н Ш'; }
.lz-rx__row:nth-child(4) { font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); --t: 'К М Ы Н Б'; }
.lz-rx__cta { margin-top: 0.8rem; align-self: flex-start; letter-spacing: 0; font-family: var(--lz-font-body); font-size: 1rem; font-weight: 600; }
.lz-rx__cta::before { content: none; }
.lz-rx__note { margin: 0 0 0.6rem; font-family: var(--lz-font-body); font-weight: 400; font-size: 0.85rem; letter-spacing: 0; color: #bdbdbd; }
.lz-rx__cell { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.1rem, 2vw, 1.6rem); border: 2px solid var(--lz-black); border-radius: var(--lz-r); background: var(--lz-card); min-height: 10rem; }
.lz-rx__cell:nth-of-type(3n) { background: var(--lz-grey-2); }
.lz-rx__code { font-family: var(--lz-font-display); font-weight: 300; font-size: clamp(2rem, 1.4rem + 1.8vw, 3.2rem); letter-spacing: -0.05em; line-height: 0.95; }
.lz-rx__vals { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--lz-signal-2); }
.lz-rx__title { margin: 0; font-weight: 700; }
.lz-rx__text { margin: 0; color: var(--lz-ink-2); font-size: var(--t-sm); line-height: 1.5; }

/* Frame shapes: round silhouette masks used as filter chips. */
.lz-shapes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.5rem); }
@media (min-width: 720px) { .lz-shapes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lz-shapes__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lz-shapes__link { display: grid; justify-items: center; gap: 0.6rem; color: var(--lz-ink); text-decoration: none; text-align: center; }
.lz-shapes__svg { width: 100%; max-width: 11rem; aspect-ratio: 1; padding: 22% 14%; border-radius: 50%; background: var(--lz-card); border: 2px solid var(--lz-black); color: var(--lz-black); transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 300ms var(--ease); }
.lz-shapes__no { display: none; }
.lz-shapes__name { font-family: var(--lz-font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.lz-shapes__text { font-size: var(--t-sm); color: var(--lz-ink-2); line-height: 1.4; max-width: 12rem; }
.lz-shapes__link:hover .lz-shapes__svg { background: var(--lz-black); color: #fff; transform: scale(1.05); }
.lz-shapes__link:hover .lz-shapes__name { text-decoration: underline; text-decoration-color: var(--lz-signal); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* 10. Shared blocks ----------------------------------------------------- */
.linza .cms-calc, .linza .cms-booking { border: 2px solid var(--lz-black); border-radius: var(--lz-r); background: var(--lz-card); box-shadow: none; }
.linza .cms-calc__option, .linza .cms-calc__variant, .linza .cms-booking__choice { border-radius: var(--lz-rb); }
.linza .cms-calc__result-value { font-family: var(--lz-font-display); font-weight: 300; letter-spacing: -0.05em; color: var(--lz-ink); }
.linza .cms-prices__group { background: var(--lz-black); color: #fff; border-radius: var(--lz-r); padding: clamp(1.1rem, 2vw, 1.8rem); border: 2px solid var(--lz-black); }
.linza .cms-prices__title { font-family: var(--lz-font-display); font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); letter-spacing: -0.04em; color: #fff; margin: 0 0 1rem; }
.linza .cms-prices__group .cms-price__name { color: #fff; font-weight: 500; }
.linza .cms-prices__group .cms-price__desc { color: #9b9b9b; }
.linza .cms-prices__group .cms-price__dots { border-bottom: 2px dotted #444; }
.linza .cms-prices__group .cms-price__value { font-family: var(--lz-font-display); font-weight: 700; color: var(--lz-signal); letter-spacing: -0.02em; }
.linza .cms-stages__item { border-radius: var(--lz-r); }
.linza .cms-testimonial { position: relative; overflow: hidden; border: 2px solid var(--lz-black); border-radius: var(--lz-r); background: var(--lz-card); box-shadow: none; }
.linza .cms-testimonial::before { content: ''; position: absolute; inset: auto -30% -60% auto; width: 90%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, rgb(14 14 14 / 0.07) 0 5px, transparent 5px 10px); pointer-events: none; }
.linza .cms-testimonial > * { position: relative; }
.linza .cms-faq__item { border-color: var(--lz-black); border-width: 2px; border-radius: var(--lz-rb); }
.linza .cms-faq__q, .linza .cms-faq summary { font-weight: 600; }
.linza .cms-media-text__media, .linza .cms-media-text__img, .linza .cms-media-text img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.linza .cms-map, .linza .cms-map iframe { border-radius: var(--lz-r); }

/* 11. Shop ---------------------------------------------------------------- */
/* Product card: a white cell; the frame sits in a round mask on grey. Every few cards a black cell, and the first of each eight spans two columns. */
.linza .shop-grid { grid-auto-flow: dense; gap: clamp(0.6rem, 1.2vw, 1rem); }
.linza .shop-card { position: relative; background: var(--lz-card); border: 2px solid var(--lz-black); border-radius: var(--lz-r); overflow: hidden; height: 100%; min-width: 0; transition: transform 200ms var(--ease), border-color 200ms var(--ease); }
.linza .shop-card:hover { transform: translateY(-3px); border-color: var(--lz-signal); }
.linza .shop-card__media { overflow: hidden; margin: 0; padding: 1.1rem; border-radius: 0; background: var(--lz-grey-2) var(--lz-ring-faint, none); position: relative; display: grid; place-items: center; aspect-ratio: auto; }
.linza .shop-card__media > picture, .linza .shop-card__media > img.shop-card__img { display: block; width: min(100%, 15rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.linza .shop-card__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; mix-blend-mode: multiply; }
.linza .shop-card__media .shop-card__img--alt { border-radius: 50%; }
.linza .shop-card__body { padding: 0.9rem 1.1rem 1.1rem; }
.linza .shop-card__brand { margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 500; color: var(--lz-grey); }
.linza .shop-card__title { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.linza .shop-card__sku { font-size: 0.72rem; color: var(--lz-grey); }
.linza .shop-card__foot { margin-top: 0.7rem; }
.linza .shop-price, .linza .shop-price__now { font-family: var(--lz-font-display); font-weight: 700; letter-spacing: -0.03em; color: var(--lz-signal-2); }
.linza .shop-price__was, .linza .shop-price s { color: var(--lz-grey); font-weight: 400; }
.linza .shop-sticker, .linza .shop-badge { border-radius: 999px; font-size: 0.7rem; font-weight: 600; }
.linza .shop-sticker--sale, .linza .shop-sticker--hit { background: var(--lz-signal); color: #fff; }
.linza .shop-card__btn, .linza .shop-btn, .linza .shop-request__btn { border-radius: var(--lz-rb); }
.linza .shop-card__actions .cms-btn, .linza .shop-card__btn { min-width: 0; max-width: 100%; white-space: normal; text-align: center; font-size: 0.88rem; padding: 0.55rem 0.7rem; line-height: 1.2; min-height: 46px; }
.linza .shop-card__actions--request, .linza .shop-request--sm { width: 100%; min-width: 0; }
.linza .shop-pick__chip, .linza .shop-chip, .linza .shop-option { border-radius: var(--lz-rb); border-width: 2px; }
.linza .shop-pick__chip:has(input:checked), .linza .shop-option.is-active { border-color: var(--lz-signal); }
.linza .shop-swatch, .linza .shop-pick__swatch { border-radius: 50%; }
.linza .shop-stock { font-size: 0.74rem; }
@media (min-width: 1100px) {
    .linza .shop-grid--c4 .shop-grid__item:nth-child(8n+1) { grid-column: span 2; }
    .linza .shop-grid--c4 .shop-grid__item:nth-child(8n+1) .shop-card__media { background: var(--lz-ring); }
    .linza .shop-grid--c4 .shop-grid__item:nth-child(8n+1) .shop-card__media > picture, .linza .shop-grid--c4 .shop-grid__item:nth-child(8n+1) .shop-card__media > img.shop-card__img { width: min(100%, 19rem); border: 2px solid var(--lz-black); background: var(--lz-grey-2); }
}
.linza .shop-grid__item:nth-child(6n+4) .shop-card { background: var(--lz-black); color: #fff; --c-text: #ececec; --c-text-strong: #fff; }
.linza .shop-grid__item:nth-child(6n+4) .shop-card__title a, .linza .shop-grid__item:nth-child(6n+4) .shop-card__title { color: #fff; }
.linza .shop-grid__item:nth-child(6n+4) .shop-card__body { color: #ececec; }
.linza .shop-grid__item:nth-child(6n+4) .shop-price, .linza .shop-grid__item:nth-child(6n+4) .shop-price__now { color: var(--lz-signal); }
.linza .shop-grid__item:nth-child(6n+4) .shop-card__btn { background: #fff; color: var(--lz-black); border-color: #fff; }

/* 12. Variants (design settings) ------------------------------------------ */
html.linza[data-lz-buttons="black"] .cms-btn--primary,
html.linza[data-lz-buttons="black"] .lz-btn--primary { background: var(--lz-black); border-color: var(--lz-black); color: #fff; }
html.linza[data-lz-buttons="black"] .cms-btn--primary:hover,
html.linza[data-lz-buttons="black"] .lz-btn--primary:hover { background: var(--lz-signal); border-color: var(--lz-signal); }

/* Mobile */
@media (max-width: 720px) {
    .lz-cell--lens { padding: 0.75rem; }
    .lz-lens { width: min(100%, 20rem); }
    .lz-ftr::before { right: -20rem; }
    .lz-ftr__chart span:nth-child(1) { font-size: 3.2rem; }
    .lz-hdr .shop-hsearch-wrap { display: none; }
}
@media (max-width: 1360px) {
    .lz-hdr .shop-hsearch-wrap, .lz-hdr .shop-hsearch { max-width: 9rem; }
    .lz-hdr .hdr-phone__caption { display: none; }
    .lz-hdr .hdr-nav__link { padding-inline: 0.6rem; }
}
@media (max-width: 1240px) { .lz-hdr .shop-hsearch-wrap { display: none; } }

/* 13. Motion — the dots and rings turn slowly; hover scenes do the rest. */
@media (prefers-reduced-motion: no-preference) {
    .lz-index__pic, .shop-card, .lz-shapes__svg { will-change: transform; }
    .lz-cell--opart { animation: lz-spin 60s linear infinite; background-size: 140% 140%; }
    @keyframes lz-spin { to { background-position: 40% 60%; } }
}
@media (prefers-reduced-motion: reduce) {
    .linza .shop-card, .lz-index__link, .lz-index__pic, .lz-shapes__svg, .lz-cell--check, .lz-cell--price { transition: none; }
    .linza .shop-card:hover { transform: none; }
}

.lz-cell--price .lz-cell__big { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem); white-space: nowrap; }

/* The wide card: the photo keeps its own round grey mask above the rings. */
@media (min-width: 1100px) {
    .linza .shop-grid--c4 .shop-grid__item:nth-child(8n+1) .shop-card__media > img.shop-card__img,
    .linza .shop-grid--c4 .shop-grid__item:nth-child(8n+1) .shop-card__media > picture { width: min(100%, 19rem); height: auto; aspect-ratio: 1; mix-blend-mode: normal; border: 2px solid var(--lz-black); background: var(--lz-grey-2); }
    .linza .shop-grid--c4 .shop-grid__item:nth-child(8n+1) .shop-card__media > picture img { mix-blend-mode: normal; }
}