/* ============================================================================ Свобода — v4. Тема MogutaCMS на основе дизайн-хэндоффа «Void», перекрашенная в официальный брендбук АО «Свобода». Белый доминирующий фон, единственный акцент — navy #000E4B, поддерживающий голубой #D7E4E8 (плашки/выводы), тёмные полосы — navy (выворотка). Шрифт Inter. Подключается в template.php (Google Fonts). Design tokens: docs/design-system.md ========================================================================== */ :root{ /* semantic palette */ --background:#ffffff; --foreground:#1E1E1E; --card:#ffffff; --card-foreground:#1E1E1E; --popover:#ffffff; --popover-foreground:#1E1E1E; --primary:#000E4B; --primary-foreground:#ffffff; --primary-hover:#102a8c; --secondary:#E7ECEE; --secondary-foreground:#000E4B; --muted:#F3F6F7; --muted-foreground:#5D5D5D; --accent:#D7E4E8; --accent-foreground:#000E4B; --destructive:#c0392b; --destructive-foreground:#ffffff; --border:#E7ECEE; --input:#d7dde0; --ring:#000E4B; --chart-1:#000E4B; --chart-2:#102a8c; --chart-3:#AEBFC4; --chart-4:#D7E4E8; --chart-5:#5D5D5D; --sidebar:#ffffff; --sidebar-foreground:#000E4B; --sidebar-primary:#000E4B; --sidebar-primary-foreground:#ffffff; --sidebar-accent:#EEF3F5; --sidebar-accent-foreground:#000E4B; --sidebar-border:#DBE3E7; --sidebar-ring:#000E4B; --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-serif:Georgia,serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; --letter-spacing:-0.01em; --radius:0.75rem; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:22px; --radius-pill:40px; --spacing:0.25rem; --shadow-sm:0 2px 8px rgba(0,14,75,.06); --shadow-md:0 12px 28px rgba(0,14,75,.08); --shadow-lg:0 24px 60px rgba(0,14,75,.12); --shadow-card:0 18px 40px rgba(0,14,75,.10); --transition-fast:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease; --transition-base:transform .2s ease,box-shadow .2s ease,border-color .2s ease; --max:1240px; --nav-top-h:52px; --nav-main-h:0px; --nav-height:calc(var(--nav-top-h) + var(--nav-main-h)); --nav-mobile-bar-h:0px; /* legacy aliases (движок / плагины / старые правила) */ --paper:var(--background); --ink:var(--foreground); --body:var(--muted-foreground); --mute:#8a8a8a; --line:var(--border); --line-2:var(--input); --navy:var(--primary); --navy-deep:var(--primary-hover); --blue-soft:var(--accent); --blue-tint:rgba(0,14,75,.08); --font:var(--font-sans); --brand-color:var(--primary); --main-color:var(--primary); --secondary-color:var(--primary-hover); } *{box-sizing:border-box;margin:0;padding:0;} [hidden]{display:none !important;} html{scroll-behavior:smooth;} body{font-family:var(--font-sans);background:var(--background);color:var(--foreground);font-size:16px;line-height:1.5;letter-spacing:var(--letter-spacing);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} img{display:block;max-width:100%;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} a{color:inherit;text-decoration:none;} svg{fill:currentColor;} h1,h2,h3,h4{font-weight:300;letter-spacing:-.02em;line-height:1.05;color:var(--foreground);} /* ----- helpers ----------------------------------------------------------- */ .max,.wrap{max-width:var(--max);margin:0 auto;padding:0 30px;} .flex-center{display:flex;align-items:center;} .flex-inline{display:flex;align-items:center;} .flex{display:flex;} .mobile-show{display:none;} .tablet-show{display:none;} .kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);} .h2-like{font-size:clamp(28px,4vw,44px);font-weight:300;letter-spacing:-.025em;line-height:1;margin:0 0 28px;} .h2-like a{color:inherit;} /* ----- buttons ----------------------------------------------------------- */ .pill,.button,.e-button,.show-more,.read-more{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;letter-spacing:.03em;padding:14px 26px;transition:var(--transition-fast);text-align:center;} .pill-plum,.button,.product-buy,.addToCart{background:var(--primary);color:var(--primary-foreground);} .pill-plum:hover,.button:hover,.product-buy:hover,.addToCart:hover{background:var(--primary-hover);color:var(--primary-foreground);transform:translateY(-2px);box-shadow:var(--shadow-sm);} .pill-ghost,.e-button,.show-more,.product-info,.button-secondary{background:transparent;color:var(--foreground);border:1px solid var(--input);} .pill-ghost:hover,.e-button:hover,.show-more:hover,.product-info:hover{border-color:var(--foreground);color:var(--foreground);transform:translateY(-2px);} .pill-ghost[aria-pressed="true"]{background:var(--foreground);border-color:var(--foreground);color:var(--primary-foreground);} .pill.full,.pill-block{width:100%;} .pill:focus-visible,.button:focus-visible,.addToCart:focus-visible,.filter-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px;} /* ============================================================================ NAV — корпоративный 2-уровневый хедер ========================================================================== */ header.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--background) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:var(--transition-base);} header.nav.is-scrolled{box-shadow:var(--shadow-md);} /* При скролле верхний ряд с CTA/утилитами остаётся */ .nav-top{border-bottom:1px solid var(--border);background:var(--background);max-height:56px;opacity:1;overflow:visible;transition:max-height .22s, opacity .18s;} .nav-main{display:none;} .nav-in{max-width:var(--max);margin:0 auto;padding:0 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;} .nav-in--top{height:var(--nav-top-h);font-size:15px;} .nav-in--main{height:var(--nav-main-h);} .nav-top-start{display:flex;align-items:center;gap:28px;min-width:0;flex:1;} .nav-logo{display:flex;align-items:center;flex-shrink:0;} .nav-logo svg,.nav-logo img{height:52px;width:auto;display:block;color:var(--foreground);} .nav-logo--top img{height:34px;} .nav-logo--main{display:none;} .nav-logo--main img{height:44px;} .nav-corp-menu,.nav-shop-menu{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;} .nav-shop-menu{display:none;} .nav-corp-menu a,.nav-shop-menu a,.nav-corp-menu .nav-dd-trigger,.nav-shop-menu .nav-dd-trigger{font-size:15px;font-weight:500;letter-spacing:.01em;color:var(--muted-foreground);background:none;white-space:nowrap;} .nav-shop-menu a,.nav-shop-menu .nav-dd-trigger{font-size:15px;} .nav-corp-menu a:hover,.nav-shop-menu a:hover,.nav-dd-trigger:hover,.nav-corp-menu a.is-active,.nav-shop-menu a.is-active,.nav-dd.is-active>.nav-dd-trigger{color:var(--foreground);} .nav-top-meta{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;} .nav-phone{font-size:15px;font-weight:600;color:var(--primary);white-space:nowrap;} .nav-phone:hover{color:var(--primary-hover);} .nav-cta-top{padding:9px 18px;font-size:13px;} .nav-utils{display:flex;align-items:center;gap:2px;} .nav-utils--top .icn{width:34px;height:34px;} .nav-utils--top .icn i{font-size:15px;} .nav-utils--main{display:none;} .nav-right{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0;} .nav .icn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;position:relative;color:var(--primary);background:none;border:1px solid transparent;transition:border-color .15s, background .15s, color .15s, transform .15s;} .nav .icn:hover{border-color:var(--primary);background:var(--accent);color:var(--primary-hover);transform:translateY(-1px);} .nav .icn svg{width:21px;height:21px;} .nav .icn i{font-size:19px;line-height:1;} .nav .cart-n,.nav .countsht{position:absolute;top:3px;right:3px;background:var(--primary);color:var(--primary-foreground);font-size:10px;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 4px;font-weight:600;line-height:1;} .nav .cart-n[data-empty="1"],.nav .countsht[data-empty="1"]{display:none;} .nav-burger{display:none;width:26px;height:26px;flex-direction:column;justify-content:center;gap:5px;flex-shrink:0;} .nav-burger span{display:block;height:2px;background:var(--foreground);border-radius:2px;transition:.2s;} /* dropdown / mega */ .nav-dd{position:relative;display:inline-flex;align-items:center;} .nav-dd-trigger{display:inline-flex;align-items:center;gap:4px;} .nav-dd-chevron{width:12px;height:12px;opacity:.55;transition:transform .15s;} .nav-dd-panel{position:absolute;top:100%;left:0;right:auto;transform:none;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:12px;min-width:220px;display:grid;gap:2px;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;z-index:50;} .nav-dd-panel--mega{left:0;right:auto;transform:none;min-width:min(680px, calc(100vw - 40px));padding:18px;} .nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel,.nav-dd.is-open .nav-dd-panel{opacity:1;visibility:visible;transform:none;} .nav-dd:hover .nav-dd-chevron,.nav-dd:focus-within .nav-dd-chevron,.nav-dd.is-open .nav-dd-chevron{transform:rotate(180deg);} .nav-dd-panel a{display:block;padding:9px 14px;border-radius:var(--radius-md);font-size:14px;color:var(--muted-foreground);} .nav-dd-panel a:hover{background:var(--accent);color:var(--primary);} .nav-mega-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px 12px;border-bottom:1px solid var(--border);margin-bottom:10px;} .nav-mega-title{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);} .nav-mega-all{font-size:13px;font-weight:600;color:var(--primary);} .nav-mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;} .nav-mega-grid a{font-size:13px;} .nav-mega-col{display:grid;gap:2px;align-content:start;} .nav-mega-col-title{display:block;padding:0 14px 8px;margin-bottom:4px;border-bottom:1px solid var(--border);border-radius:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);} .nav-mega-col-title:hover{background:transparent;color:var(--primary);} .nav-dd--sections .nav-dd-panel--mega{min-width:min(720px, calc(100vw - 40px));} .nav-dd--sections .nav-mega-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;} /* ============================================================================ HERO ========================================================================== */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);} .hero-in{max-width:var(--max);margin:0 auto;padding:64px 30px 72px;display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;position:relative;z-index:2;} .hero-copy{max-width:520px;} .hero-copy .kicker{display:block;margin-bottom:22px;} .hero-h1{font-size:clamp(46px,7vw,86px);font-weight:300;line-height:.9;letter-spacing:-.035em;margin-bottom:24px;} .hero-h1 em{font-style:normal;color:var(--primary);} .hero-sub{font-size:18px;font-weight:400;line-height:1.5;color:var(--muted-foreground);max-width:40ch;margin-bottom:32px;} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .hero-stat{display:flex;gap:30px;margin-top:40px;flex-wrap:wrap;} .hero-stat .n{font-size:30px;font-weight:300;letter-spacing:-.02em;} .hero-stat .l{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-top:2px;} .hero-stage{position:relative;width:100%;max-width:560px;margin-left:auto;aspect-ratio:1/1;display:grid;place-items:center;} #particles{position:absolute;inset:-10%;width:120%;height:120%;z-index:1;} .hero-aura{position:absolute;width:62%;height:62%;border-radius:50%;background:radial-gradient(circle, var(--accent) 0%, rgba(215,228,232,.5) 45%, transparent 70%);z-index:0;filter:blur(2px);} .hero-ring{position:absolute;border-radius:50%;border:1px dashed var(--input);z-index:1;} .hero-ring.r1{width:74%;height:74%;animation:vd-spin 48s linear infinite;} .hero-ring.r2{width:96%;height:96%;border-color:var(--border);animation:vd-spin 80s linear infinite reverse;} @keyframes vd-spin{to{transform:rotate(360deg);}} .hero-prod{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:62%;height:62%;display:grid;place-items:center;} .hero-prod a{display:grid;place-items:center;width:100%;height:100%;} .hero-prod img{max-width:100%;max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 24px 48px rgba(0,14,75,.18));animation:vd-bob 6s ease-in-out infinite;transition:opacity .4s;} @keyframes vd-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} .hero-chip{position:absolute;z-index:4;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-pill);padding:8px 14px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:7px;box-shadow:var(--shadow-sm);white-space:nowrap;} .hero-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--primary);} .hero-chip.c1{top:12%;left:2%;} .hero-chip.c2{bottom:16%;right:0;} @media(prefers-reduced-motion:reduce){.hero-prod img,.hero-ring,.marquee-track{animation:none;}} /* ============================================================================ MARQUEE ========================================================================== */ .marquee{border-bottom:1px solid var(--border);overflow:hidden;background:var(--primary);} .marquee-track{display:flex;gap:48px;white-space:nowrap;padding:14px 0;animation:vd-scroll 28s linear infinite;width:max-content;} .marquee-track span{font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--background);display:inline-flex;align-items:center;gap:48px;} .marquee-track span::after{content:"\2733";color:var(--primary);} @keyframes vd-scroll{to{transform:translateX(-50%);}} /* ============================================================================ SECTIONS ========================================================================== */ .sec{padding:72px 0;border-bottom:1px solid var(--border);} .sec.no-border{border-bottom:none;} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;} .sec-head .kicker{margin-bottom:12px;display:block;} .sec-head h2{font-size:clamp(28px,4vw,44px);font-weight:300;line-height:1.0;letter-spacing:-.025em;} .sec-head .more{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--muted-foreground);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;} .sec-head .more:hover{color:var(--primary);} /* ============================================================================ PRODUCT GRID + CARD (используется на главной, в каталоге, в каруселях) ========================================================================== */ .vd-grid,.by-4,.products-wrapper{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .vd-grid.g5{grid-template-columns:repeat(5,1fr);} /* Каталожная карточка — стиль VOIS: центр, метка, pill CTA, hover с фоном */ .card{background:transparent;border:0;border-radius:24px;padding:8px 6px 16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;position:relative;overflow:hidden;isolation:isolate;} .card:hover{transform:none;box-shadow:none;} /* .product-wrapper (недавно просмотренные и пр.) сохраняет классический вид карточки-коробки */ .product-wrapper{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:18px;display:flex;flex-direction:column;position:relative;transition:var(--transition-base);} .product-wrapper:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--input);} /* lifestyle-фон при наведении (поворот + появление) */ .card-hover-bg{position:absolute;inset:0;z-index:0;border-radius:24px;background-size:cover;background-position:center;opacity:0;transform:rotate(7deg) scale(1.14);transition:opacity .42s ease,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none;} .card:hover .card-hover-bg{opacity:1;transform:rotate(0deg) scale(1);} .card-hover-bg::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,14,75,.08) 0%,rgba(0,14,75,.35) 100%);opacity:0;transition:opacity .35s ease;} .card:hover .card-hover-bg::after{opacity:1;} .card-media{aspect-ratio:1/1;width:100%;display:grid;place-items:center;overflow:visible;position:relative;z-index:1;margin:0 0 10px;background:none;border-radius:0;} .card-media .card-img-link{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;} .card-media img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease;} .card:hover .card-media img{transform:rotate(-16deg) scale(.65);opacity:0;} .card.card--no-hover-img:hover .card-media img{transform:scale(1.04);opacity:1;} .product-wrapper:hover .card-media img{transform:scale(1.05);} /* стикеры на странице товара (карточка их больше не использует) */ .stickers .new,.stickers .hit,.stickers .sale{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--primary);color:var(--primary-foreground);padding:4px 9px;border-radius:var(--radius-pill);line-height:1.2;display:inline-block;} .stickers .sale{background:var(--accent);color:var(--primary);} .stickers .hit{background:var(--foreground);color:var(--primary-foreground);} /* избранное — маленькое сердечко в правом верхнем углу */ .card>.like,.card>.unlike, .card .like,.card .unlike{position:absolute!important;top:10px!important;right:10px!important;left:auto!important;bottom:auto!important;z-index:5;width:36px!important;height:36px!important;max-width:36px;max-height:36px;margin:0!important;padding:0!important;border-radius:50%;background:transparent;border:0;display:grid;place-items:center;color:#9aa0a8;opacity:1;transition:color .2s,transform .15s;cursor:pointer;flex:none;align-self:auto;} .card .like[style*="display:none"], .card .unlike[style*="display:none"], .card .like[hidden], .card .unlike[hidden]{display:none!important;} .card .like:hover,.card .unlike:hover{color:var(--primary);transform:scale(1.08);} .card .like svg,.card .unlike svg{width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important;display:block;} .card .like svg{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linejoin:round;} .card .unlike{color:var(--primary);} .card .unlike svg{fill:currentColor;stroke:none;} .card:hover .like,.card:hover .unlike{color:#fff;} .card:hover .unlike svg{fill:#fff;} .card-body{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:0;transition:opacity .28s ease;pointer-events:auto;} .card:hover .card-body{opacity:0;pointer-events:none;} /* метка «Новинка» / «Бестселлер» — серый текст как у VOIS */ .card-tag{font-size:13px;font-weight:400;line-height:1.25;color:#9aa0a8;margin:0 0 6px;min-height:1.25em;} /* название по центру — максимум 2 строки */ .card-name{font-size:15px;font-weight:500;line-height:1.35;color:var(--foreground);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 0 4px;max-width:100%;} .card-name:hover{color:var(--primary);} .card-vol{font-size:12px;font-weight:400;line-height:1.2;color:#9aa0a8;margin:0 0 14px;} /* кнопка-пилюля «Купить от …» */ .card-buy{position:relative;z-index:3;margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:13px 26px;border-radius:999px;background:var(--primary);color:var(--primary-foreground);font-size:13px;font-weight:500;line-height:1;letter-spacing:.01em;transition:background .15s,box-shadow .2s;white-space:nowrap;} .card-buy:hover{background:var(--primary-hover);color:var(--primary-foreground);} .card:hover .card-buy{box-shadow:0 10px 28px rgba(0,14,75,.32);} @media (prefers-reduced-motion:reduce){ .card-hover-bg,.card-media img,.card-body{transition:opacity .2s ease!important;transform:none!important;} .card:hover .card-hover-bg{transform:none;} .card:hover .card-media img{transform:none;opacity:0;} } /* цена на странице товара */ .product-price{font-size:16px;font-weight:600;color:var(--foreground);} .product-old-price,.old-price{font-size:13px;font-weight:400;color:var(--mute);margin-right:6px;} /* кнопка «+» / в корзину в карточке */ .card .property-form,.product-wrapper .property-form{margin:0;} .card-add,.card .addToCart,.product-wrapper .addToCart{width:36px;height:36px;min-width:36px;padding:0;border-radius:50%;background:var(--accent);color:var(--primary);display:grid;place-items:center;transition:.15s;flex-shrink:0;font-size:0;} .card-add:hover,.card .addToCart:hover,.product-wrapper .addToCart:hover{background:var(--primary);color:var(--primary-foreground);transform:none;} .card-add svg,.card .addToCart svg{width:18px;height:18px;} .card .addToCart::before{content:"+";font-size:22px;font-weight:400;line-height:1;} .card .product-info{font-size:12px;padding:9px 16px;white-space:nowrap;} .card .button-message{font-size:11px;line-height:1.2;padding:9px 12px;white-space:normal;text-align:center;max-width:148px;} .card .buy-container,.product-wrapper .buy-container{margin:0;flex-shrink:0;} .card .buttons-block,.product-wrapper .buttons-block{display:flex;align-items:center;gap:8px;} /* в карточке прячем счётчик количества и поля вариантов ради чистоты Void-карточки */ .card .js-amount-wrap,.product-wrapper .js-amount-wrap{display:none !important;} .card .fast-view,.product-wrapper .fast-view{display:none;} .card .special,.product-wrapper .special{display:none;} /* карточка в свайпере (related на странице товара) */ .by-4-slider{position:relative;padding-bottom:4px;} .by-4-slider .swiper-container{overflow:hidden;} .by-4-slider .swiper-wrapper{align-items:stretch;} .by-4-slider .swiper-slide{height:auto !important;display:flex;align-self:stretch;box-sizing:border-box;} .by-4-slider .card,.by-4-slider .product-wrapper{height:100%;width:100%;flex:1 1 auto;min-height:100%;} .by-4-slider .card-media{flex-shrink:0;} .by-4-slider .swiper-button-prev,.by-4-slider .swiper-button-next{position:absolute;top:38%;width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:grid;place-items:center;z-index:5;cursor:pointer;color:var(--foreground);} .by-4-slider .swiper-button-prev:hover,.by-4-slider .swiper-button-next:hover{border-color:var(--foreground);color:var(--primary);} .by-4-slider .swiper-button-prev{left:-8px;} .by-4-slider .swiper-button-next{right:-8px;} .by-4-slider .swiper-button-prev svg{transform:rotate(180deg);} .by-4-slider .swiper-button-prev svg,.by-4-slider .swiper-button-next svg{width:16px;height:16px;} /* ============================================================================ BENTO COLLECTIONS ========================================================================== */ .bento{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:18px;} .btile{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--border);background:var(--card);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;min-height:200px;transition:transform .2s, box-shadow .2s;} .btile:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);} .btile.lg{grid-row:span 2;background:linear-gradient(160deg,var(--accent),#fff);} .btile .bimg{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:46%;max-height:80%;object-fit:contain;} .btile.lg .bimg{width:52%;right:4%;} .btile .bk{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);margin-bottom:8px;position:relative;} .btile h3{font-size:22px;font-weight:300;letter-spacing:-.02em;line-height:1.0;position:relative;max-width:9ch;} .btile.lg h3{font-size:32px;} /* ============================================================================ FEATURE BAND (dark «о фабрике») ========================================================================== */ .feature{position:relative;padding:96px 0;text-align:center;border-bottom:1px solid var(--border);overflow:hidden;background:var(--primary);color:var(--primary-foreground);} #particles2{position:absolute;inset:0;z-index:0;} .feature-in{position:relative;z-index:2;max-width:660px;margin:0 auto;padding:0 30px;} .feature .kicker{color:var(--accent);} .feature h2{font-size:clamp(32px,5vw,58px);font-weight:300;line-height:.95;letter-spacing:-.035em;margin:14px 0 20px;color:var(--primary-foreground);} .feature p{font-size:18px;color:rgba(255,255,255,.8);line-height:1.5;max-width:48ch;margin:0 auto 28px;} .feature .pill-ghost{color:var(--primary-foreground);border-color:rgba(255,255,255,.28);} .feature .pill-ghost:hover{border-color:var(--primary-foreground);background:rgba(255,255,255,.06);color:var(--primary-foreground);} /* ============================================================================ FILTERS / CATALOG PAGE ========================================================================== */ .filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;} .top-img{display:block;margin-bottom:28px;border-radius:24px;overflow:hidden;} .top-img img{width:100%;height:auto;object-fit:cover;} .top-text,.bottom-description{color:var(--muted-foreground);line-height:1.6;margin-bottom:28px;} .bottom-description{margin-top:48px;font-size:14px;} .catalog h1,.static h1,.product-details-block h1{font-weight:300;letter-spacing:-.02em;} .bread-crumbs{display:flex;flex-wrap:wrap;color:var(--mute);font-size:12px;letter-spacing:.03em;text-transform:uppercase;margin:24px 0 28px;list-style:none;gap:2px;} .bread-crumbs a{color:var(--mute);} .bread-crumbs a:hover{color:var(--primary);} .bread-crumbs__item.separator{color:var(--input);} .products-wrapper.catalog{margin-top:8px;} /* плитки подкатегорий над каталогом (component catalog/categories) */ .cats .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin:0 0 34px;} .cats .grid a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:13px;font-weight:500;text-align:center;color:var(--foreground);transition:.18s;} .cats .grid a:hover{border-color:var(--input);transform:translateY(-3px);box-shadow:var(--shadow-md);} .cats .grid .img{width:46px;height:46px;display:grid;place-items:center;} .cats .grid .img img{max-width:100%;max-height:100%;} .show-filter{display:none;} /* pager / pagination */ .pager{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:44px;} /* пустой результат фильтра — прячем пагинацию (для браузеров без :has — дублируется в void.js) */ .mg-filter-empty{grid-column:1/-1;color:var(--muted-foreground);font-size:15px;padding:24px 0;} .catalog-main:has(.mg-filter-empty) .pager,.products-wrapper:has(.mg-filter-empty) ~ .pager{display:none;} .pager.vd-hidden{display:none;} .pagination,.pagination ul{display:flex;gap:8px;list-style:none;align-items:center;flex-wrap:wrap;justify-content:center;} .pagination a,.pagination span,.pagination li a,.pagination li span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 14px;border-radius:14px;border:1px solid var(--border);background:var(--card);font-size:14px;font-weight:500;line-height:1;color:var(--foreground);transition:var(--transition-fast);} .pagination a:hover,.pagination li a:hover{border-color:var(--primary);color:var(--primary);background:var(--muted);transform:translateY(-1px);box-shadow:var(--shadow-sm);} .pagination .active,.pagination .current,.pagination li.active a,.pagination li.active span,.pagination li.current a{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-sm);cursor:default;} .show-more.button{background:var(--primary);color:var(--primary-foreground);} /* ============================================================================ FOOTER ========================================================================== */ footer.vd-footer{padding:0 0 0;background:var(--background);border-top:1px solid var(--border);} .foot-cta{background:var(--primary);color:var(--primary-foreground);padding:32px 0;} .foot-cta-in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;} .foot-cta-title{font-size:clamp(18px,2.5vw,24px);font-weight:500;letter-spacing:-.02em;margin-bottom:8px;} .foot-cta-copy p{font-size:14px;opacity:.82;max-width:48ch;line-height:1.55;margin:0;} .foot-cta .foot-subscribe{min-width:min(360px,100%);flex:0 1 360px;} .foot-cta .foot-subscribe .title{color:rgba(255,255,255,.75);} .foot-cta .foot-subscribe input[type=text],.foot-cta .foot-subscribe input[type=email]{background:rgba(255,255,255,.95);border-color:transparent;} .foot-cta .foot-subscribe input[type=button],.foot-cta .foot-subscribe .button{background:#fff;color:var(--primary);} .foot-cta .foot-subscribe input[type=button]:hover,.foot-cta .foot-subscribe .button:hover{background:var(--accent);} .vd-footer>.wrap{padding-top:48px;} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin:0 0 36px;align-items:start;} .foot-logo svg,.foot-logo img{height:40px;width:auto;margin-bottom:16px;color:var(--foreground);display:block;} .foot-brand p{font-size:14px;color:var(--muted-foreground);line-height:1.6;max-width:36ch;margin:0;} .foot-contacts{display:grid;gap:8px;margin-top:18px;font-size:14px;} .foot-contacts a{color:var(--primary);font-weight:500;} .foot-contacts a:hover{color:var(--primary-hover);} .foot-contacts span{color:var(--muted-foreground);line-height:1.5;} .foot-brand .foot-social{display:flex;align-items:center;gap:10px;margin-top:20px;} .foot-social__link{width:40px;height:40px;border-radius:50%;border:1px solid var(--input);display:inline-flex;align-items:center;justify-content:center;color:var(--primary);background:var(--card);text-decoration:none;transition:border-color .15s, background .15s, color .15s, transform .15s;flex-shrink:0;} .foot-social__link i{font-size:17px;line-height:1;display:block;width:1em;height:1em;text-align:center;} .foot-social__link svg{width:17px;height:17px;display:block;color:inherit;fill:currentColor;} .foot-social__link:hover{border-color:var(--primary);background:var(--accent);color:var(--primary-hover);transform:translateY(-1px);} .foot-col{padding-top:56px;} .foot-col h4{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin:0 0 16px;line-height:1.3;} .foot-col a{display:block;font-size:14px;color:var(--muted-foreground);margin-bottom:11px;line-height:1.45;} .foot-col a:hover{color:var(--primary);} .foot-subscribe{margin-top:0;} .foot-subscribe .title{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;} .foot-subscribe form{display:flex;flex-direction:column;gap:9px;} .foot-subscribe input[type=text],.foot-subscribe input[type=email]{width:100%;padding:12px 16px;border:1px solid var(--input);border-radius:var(--radius-pill);background:var(--card);font-family:inherit;font-size:13px;} .foot-subscribe input[type=button],.foot-subscribe .button{display:block;width:100%;padding:13px 16px;border:none;border-radius:var(--radius-pill);background:var(--primary);color:var(--primary-foreground);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0;text-align:center;cursor:pointer;transition:background .15s;-webkit-appearance:none;appearance:none;} .foot-subscribe input[type=button]:hover,.foot-subscribe .button:hover{background:var(--primary-hover);} .foot-subscribe .p4-subscribe input.button{height:44px!important;line-height:44px!important;padding:0 16px!important;text-align:center!important;vertical-align:middle;} .foot-subscribe .message{font-size:12px;color:var(--mute);} .foot-subscribe .message:empty{display:none;} .foot-subscribe form>*{box-sizing:border-box;} .foot-trust{display:flex;align-items:center;justify-content:flex-start;padding:20px 0;border-top:1px solid var(--border);} .foot-marketplaces{display:flex;align-items:center;gap:20px;flex-wrap:wrap;} .foot-marketplaces a{font-size:13px;font-weight:600;color:var(--primary);letter-spacing:.02em;} .foot-marketplaces a:hover{color:var(--primary-hover);} .foot-bottom{border-top:none;padding:22px 0 28px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--mute);} .foot-bottom a{color:var(--mute);} .foot-bottom a:hover{color:var(--primary);} .foot-legal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px 20px;} .foot-bottom .belka svg{height:18px;width:auto;} /* ============================================================================ REVEAL ========================================================================== */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;} .reveal.in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}} /* ============================================================================ QUICK-VIEW MODAL (Void) ========================================================================== */ .vd-modal-back{position:fixed;inset:0;background:rgba(22,21,27,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:60;display:none;align-items:center;justify-content:center;padding:24px;} .vd-modal-back.open{display:flex;} .vd-modal{background:var(--card);border-radius:var(--radius-xl);max-width:900px;width:100%;max-height:88vh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow-lg);} .vd-modal-media{display:grid;place-items:center;padding:48px;background:radial-gradient(circle at 50% 42%, var(--accent), #ffffff 70%);} .vd-modal-media img{max-height:380px;width:auto;object-fit:contain;} .vd-modal-body{padding:48px 44px;display:flex;flex-direction:column;position:relative;} .vd-modal-close{position:absolute;top:20px;right:22px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--foreground);} .vd-modal-close:hover{border-color:var(--foreground);} .vd-modal-cat{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:14px;} .vd-modal-title{font-size:32px;font-weight:300;line-height:1.0;letter-spacing:-.025em;margin-bottom:12px;} .vd-modal-vol{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-bottom:22px;} .vd-modal-desc{font-size:15px;color:var(--muted-foreground);line-height:1.6;margin-bottom:30px;} .vd-modal-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--border);padding-top:24px;} .vd-modal-price{font-size:26px;font-weight:600;} .vd-modal-price s{font-size:16px;font-weight:400;color:var(--mute);margin-right:8px;} .vd-modal-foot .pill{padding:14px 28px;} /* ============================================================================ PRODUCT PAGE ========================================================================== */ .product-details-block{padding-top:8px;} .product-status.js-product-page{padding-top:8px;} /* внешний флекс: галерея | информация (только прямой потомок, чтобы не задеть .left-part.flex) */ .product-details-block .product-status>.flex{display:flex;gap:48px;align-items:flex-start;flex-wrap:wrap;margin-top:8px;} .product-details-block .right-part{flex:1 1 420px;min-width:300px;} .product-details-block h1{font-size:clamp(28px,4vw,40px);margin-bottom:18px;} /* галерея товара: вертикальные превью | основное изображение */ .product-details-block .left-part{flex:1 1 460px;min-width:300px;display:flex;gap:14px;align-items:flex-start;} .product-thumbs-slider{width:88px;flex-shrink:0;position:relative;display:flex;flex-direction:column;align-items:center;} .product-thumbs-slider .swiper-container{width:88px;max-height:520px;overflow:hidden;} .product-thumbs-slider .swiper-slide{width:88px !important;height:88px !important;border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;background:var(--accent);display:flex !important;align-items:center;justify-content:center;box-sizing:border-box;padding:6px;} .product-thumbs-slider .swiper-slide-thumb-active{border-color:var(--primary);border-width:2px;} .product-thumbs-slider .swiper-slide img{width:auto;height:auto;max-width:100%;max-height:76px;object-fit:contain;} /* стрелки превью без иконки (#icon-thumbs-arrow отсутствует) — убираем пустые кружки */ .product-thumbs-slider .new-swiper-button-prev,.product-thumbs-slider .new-swiper-button-next{display:none;} .product-details-block .product-slider{flex:1;min-width:0;position:relative;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 40%, var(--accent), #ffffff 70%);aspect-ratio:1/1;max-height:520px;height:auto;} /* защита от увеличенного фона (если zoom.js закэширован) */ .product-details-block .product-slider .js-zoom-img{background-image:none !important;} .product-details-block .product-slider .swiper-wrapper{height:100%;} .product-details-block .product-slider .swiper-slide{display:flex !important;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box;padding:24px;flex-shrink:0;} .product-details-block .product-slider .swiper-slide img.img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;} .product-details-block .product-slider .swiper-button-prev,.product-details-block .product-slider .swiper-button-next{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;color:var(--foreground);} .product-details-block .product-slider .swiper-button-prev{left:14px;} .product-details-block .product-slider .swiper-button-next{right:14px;} .product-details-block .product-slider .swiper-button-prev:hover,.product-details-block .product-slider .swiper-button-next:hover{border-color:var(--foreground);color:var(--primary);} .product-details-block .product-slider .swiper-button-prev svg{transform:rotate(180deg);} .product-details-block .product-slider .swiper-button-prev svg,.product-details-block .product-slider .swiper-button-next svg{width:15px;height:15px;} .product-details-block .product-slider .swiper-pagination{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:5;} .product-details-block .product-slider .swiper-pagination-bullet{width:7px;height:7px;border-radius:50%;background:var(--input);opacity:1;} .product-details-block .product-slider .swiper-pagination-bullet-active{background:var(--primary);} .product-details-block .icon-zoom{position:absolute;right:14px;bottom:14px;z-index:5;display:inline-flex;align-items:center;gap:2px;padding:6px 10px;border-radius:var(--radius-pill);background:var(--card);border:1px solid var(--border);font-size:12px;color:var(--foreground);} .product-details-block .icon-zoom svg{width:14px;height:14px;} .product-details-block .left-part .special{display:none;} .prop-string{list-style:none;margin:0 0 22px;border-top:1px solid var(--border);} .prop-item{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;} .prop-name{color:var(--mute);min-width:120px;} .prop-separator{flex:1;border-bottom:1px dotted var(--input);transform:translateY(-3px);} .prop-spec{color:var(--foreground);font-weight:500;text-align:right;} .product-details-block .stickers{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;} .available{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-pill);display:inline-block;} .stock-in{background:var(--blue-tint);color:var(--primary);} .stock-out{background:rgba(154,152,162,.16);color:var(--mute);} .product-status-list{display:flex;align-items:baseline;gap:14px;margin:22px 0;} .product-status-list .price{font-size:34px;font-weight:600;letter-spacing:-.02em;} .product-status-list .old-price{font-size:18px;} .product-details-block .js-product-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 24px;} .product-details-block .buttons-block{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .product-details-block .addToCart,.product-details-block .product-buy{font-size:0;width:auto;padding:15px 30px;border-radius:var(--radius-pill);} .product-details-block .addToCart::before{content:"В корзину";font-size:14px;font-weight:600;letter-spacing:.03em;} .goToCart{display:inline-flex;align-items:center;padding:15px 26px;border-radius:var(--radius-pill);border:1px solid var(--input);font-size:14px;font-weight:600;color:var(--foreground);} .goToCart:hover{border-color:var(--foreground);} .product-details-block .like,.product-details-block .unlike{width:48px;height:48px;border-radius:50%;border:1px solid var(--input);display:grid;place-items:center;cursor:pointer;} .product-details-block .like svg,.product-details-block .unlike svg{width:20px;height:20px;} .product-details-block .unlike svg{fill:var(--primary);color:var(--primary);} .market{display:flex;gap:12px;margin:8px 0 0;} .market a{padding:12px 22px;border-radius:var(--radius-pill);border:1px solid var(--input);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;} .market a:hover{border-color:var(--foreground);} .market .ozon:hover{color:#005bff;border-color:#005bff;} .market .wb:hover{color:#cb11ab;border-color:#cb11ab;} .related{margin-top:64px;margin-bottom:0;padding-bottom:80px;} .related + footer.vd-footer,.related ~ footer.vd-footer{margin-top:0;} .vd-footer .foot-cta{margin-top:0;} /* вкладки карточки товара — на всю ширину под блоком покупки */ .product-details-block .product-tabs-section{width:100%;margin-top:36px;padding-top:28px;border-top:1px solid var(--border);} .product-details-block .product-tabs-section .tab-links{display:flex;gap:6px;flex-wrap:wrap;padding:6px;background:var(--muted);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:28px;} .product-details-block .product-tabs-section .tab-link{cursor:pointer;padding:12px 20px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);border-radius:var(--radius-md);border-bottom:none;margin-bottom:0;transition:var(--transition-fast);white-space:nowrap;} .product-details-block .product-tabs-section .tab-link:hover{color:var(--foreground);background:color-mix(in srgb,var(--card) 70%,transparent);} .product-details-block .product-tabs-section .tab-link.active{color:var(--primary);background:var(--card);box-shadow:var(--shadow-sm);} .product-details-block .product-tabs-section .tab .content, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"]{position:relative;color:var(--muted-foreground);line-height:1.75;font-size:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,var(--card)) 0%,var(--card) 140px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:clamp(24px,4vw,44px);box-shadow:var(--shadow-sm);} .product-details-block .product-tabs-section .tab .content::before, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"]::before{content:"";position:absolute;top:0;left:clamp(24px,4vw,44px);right:clamp(24px,4vw,44px);height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 35%,var(--accent)));} .product-details-block .product-tabs-section .tab[data-tab^="userfield-"]{white-space:pre-line;} .product-details-block .product-tabs-section .tab .content>*:first-child, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"]>*:first-child{margin-top:0;} .product-details-block .product-tabs-section .tab .content>*:last-child, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"]>*:last-child{margin-bottom:0;} .product-details-block .product-tabs-section .tab .content p, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] p{margin:0 0 1.15em;} .product-details-block .product-tabs-section .tab .content p, .product-details-block .product-tabs-section .tab .content li, .product-details-block .product-tabs-section .tab .content span, .product-details-block .product-tabs-section .tab .content font, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] p, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] li, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] span, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] font{color:inherit;font-family:inherit !important;background:transparent !important;} .product-details-block .product-tabs-section .tab .content p:first-of-type, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] p:first-of-type{font-size:17px;line-height:1.65;color:var(--foreground);} .product-details-block .product-tabs-section .tab .content p:last-child, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] p:last-child{margin-bottom:0;} .product-details-block .product-tabs-section .tab .content strong, .product-details-block .product-tabs-section .tab .content b, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] strong, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] b{font-weight:600;color:var(--foreground);} .product-details-block .product-tabs-section .tab .content a, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] a{color:var(--primary);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .15s ease;} .product-details-block .product-tabs-section .tab .content a:hover, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] a:hover{color:var(--primary-hover);} .product-details-block .product-tabs-section .tab .content h2, .product-details-block .product-tabs-section .tab .content h3, .product-details-block .product-tabs-section .tab .content h4, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] h2, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] h3, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] h4{color:var(--foreground);font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:1.5em 0 .65em;} .product-details-block .product-tabs-section .tab .content h2, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] h2{font-size:clamp(22px,2.5vw,28px);} .product-details-block .product-tabs-section .tab .content h3, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] h3{font-size:clamp(19px,2vw,23px);} .product-details-block .product-tabs-section .tab .content h4, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] h4{font-size:18px;} .product-details-block .product-tabs-section .tab .content ul, .product-details-block .product-tabs-section .tab .content ol, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ul, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ol{list-style:none;margin:1.35em 0;padding:20px 24px 18px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent) 40%,transparent);} .product-details-block .product-tabs-section .tab .content ul>li, .product-details-block .product-tabs-section .tab .content ol>li, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ul>li, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ol>li{position:relative;padding-left:28px;margin:0 0 .65em;} .product-details-block .product-tabs-section .tab .content ul>li:last-child, .product-details-block .product-tabs-section .tab .content ol>li:last-child, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ul>li:last-child, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ol>li:last-child{margin-bottom:0;} .product-details-block .product-tabs-section .tab .content ul>li::before, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ul>li::before{content:"";position:absolute;left:4px;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--primary);} .product-details-block .product-tabs-section .tab .content ol, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ol{counter-reset:product-li;} .product-details-block .product-tabs-section .tab .content ol>li, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ol>li{counter-increment:product-li;} .product-details-block .product-tabs-section .tab .content ol>li::before, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ol>li::before{content:counter(product-li);position:absolute;left:0;top:.08em;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--primary);font-size:11px;font-weight:700;display:grid;place-items:center;} .product-details-block .product-tabs-section .tab .content blockquote, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] blockquote{margin:1.35em 0;padding:16px 20px;border-left:3px solid var(--primary);background:color-mix(in srgb,var(--accent) 45%,var(--card));border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--foreground);} .product-details-block .product-tabs-section .tab .content img, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:1.25em 0;} .product-details-block .product-tabs-section .tab .content table, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] table{width:100%;border-collapse:collapse;margin:1.25em 0;font-size:14px;} .product-details-block .product-tabs-section .tab .content th, .product-details-block .product-tabs-section .tab .content td, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] th, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] td{padding:10px 14px;border:1px solid var(--border);text-align:left;} .product-details-block .product-tabs-section .tab .content th, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] th{background:var(--muted);color:var(--foreground);font-weight:600;} .product-details-block .product-tabs-section .tab[data-tab="comments"]{padding:clamp(20px,3vw,32px);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);} @media(max-width:640px){ .product-details-block .product-tabs-section .tab-links{gap:4px;padding:4px;border-radius:var(--radius-md);} .product-details-block .product-tabs-section .tab-link{padding:10px 14px;font-size:11px;letter-spacing:.04em;} .product-details-block .product-tabs-section .tab .content, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"]{padding:20px;border-radius:var(--radius-lg);} .product-details-block .product-tabs-section .tab .content::before, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"]::before{left:20px;right:20px;} .product-details-block .product-tabs-section .tab .content p:first-of-type, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] p:first-of-type{font-size:16px;} .product-details-block .product-tabs-section .tab .content ul, .product-details-block .product-tabs-section .tab .content ol, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ul, .product-details-block .product-tabs-section .tab[data-tab^="userfield-"] ol{padding:16px 18px 14px;} } /* amount stepper (страница товара / корзина) */ .js-amount-wrap,.cart_form{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--input);border-radius:var(--radius-pill);padding:6px 14px;} .js-amount-wrap button,.cart_form button{width:34px;height:34px;display:grid;place-items:center;color:var(--foreground);} .js-amount-wrap button:hover,.cart_form button:hover{color:var(--primary);} .js-amount-wrap button svg,.cart_form button svg{width:14px;height:14px;} .amount_input{width:34px;text-align:center;border:none;background:none;font-family:inherit;font-size:15px;font-weight:600;padding:0;} /* tabs (общие + личный кабинет) */ .tab:not(.active){display:none;} .tabs-nav,.tabs-titles{display:flex;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-top:36px;} .tabs-nav a,.tabs-titles a,.tabs-titles span{padding:12px 0;font-size:14px;font-weight:500;color:var(--mute);border-bottom:2px solid transparent;cursor:pointer;} .tabs-nav a.active,.tabs-titles .active{color:var(--foreground);border-bottom-color:var(--primary);} .tab-links{display:flex;gap:28px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:24px;} .tab-links .tab-link{cursor:pointer;padding:10px 0;font-size:14px;font-weight:500;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px;} .tab-links .tab-link.active,.tab-links .tab-link:hover{color:var(--foreground);} .tab-links .tab-link.active{border-bottom-color:var(--primary);} .tab-content,.tabs-content{padding:24px 0;color:var(--muted-foreground);line-height:1.7;} /* ============================================================================ STATIC PAGES / CART / ORDER / PERSONAL / FORMS ========================================================================== */ .static{padding-top:8px;} .static .flex{display:flex;gap:48px;align-items:flex-start;flex-wrap:wrap;} .static .left-part{flex:0 0 240px;} .static .right-part.content{flex:1 1 480px;min-width:300px;line-height:1.7;color:var(--muted-foreground);} .static .content h1,.static .content h2,.static .content h3{color:var(--foreground);margin:1.2em 0 .5em;} .page-menu{list-style:none;} .page-menu li a{display:block;padding:10px 16px;border-radius:12px;font-size:14px;color:var(--muted-foreground);} .page-menu li a:hover,.page-menu li.active>a{background:var(--accent);color:var(--primary);} .content a{color:var(--primary);} .content a:hover{text-decoration:underline;} /* блоки на главной */ .home-about{max-width:760px;margin:0 auto;text-align:center;color:var(--muted-foreground);line-height:1.7;padding:8px 0 0;} .home-about a.button{margin-top:24px;} /* новости на главной */ .news-block{padding:72px 0;border-top:1px solid var(--border);} .mg-main-news-list.by-4{grid-template-columns:repeat(4,1fr);} .news-block .item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;transition:.2s;} .news-block .item:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--input);} .news-block .item .img{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(180deg,#ffffff,#eef1f2);padding:10px;} .news-block .item .img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;} .news-block .item .text{padding:20px;display:flex;flex-direction:column;gap:10px;} .news-block .item h3{font-size:16px;font-weight:500;line-height:1.3;letter-spacing:0;} .news-block .item .date{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;} .news-block .item .read-more{font-size:13px;font-weight:600;color:var(--primary);align-self:flex-start;padding:0;background:none;} .news-block>.button{display:flex;width:max-content;margin:36px auto 0;} .news-block .h2-like{text-align:center;} /* список новостей на странице блога (/blog/novosti) */ .mg-main-news-block{padding:0 0 40px;} .mg-main-news-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;margin-top:8px;} .mg-main-news-list article{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;} .mg-main-news-list article:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--input);} .mg-main-news-list article .img{display:block;aspect-ratio:650/942;background-size:cover;background-repeat:no-repeat;background-position:center top;background-color:#eef1f2;} .mg-main-news-list article .text{padding:16px 18px;display:flex;flex-direction:column;gap:9px;flex:1;} .mg-main-news-list article h3{font-size:15px;font-weight:500;line-height:1.3;letter-spacing:0;margin:0;} .mg-main-news-list article h3 a{color:var(--foreground);} .mg-main-news-list article h3 a:hover{color:var(--primary);} .mg-main-news-list article .date{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;} .mg-main-news-block .pagination,.mg-main-news-block .pager{margin-top:36px;} /* экскурсии (/blog/ekskursii) — карточки в общем стиле блога */ .corp-content .mg-main-news-list--excursions article{position:relative;} .corp-content .mg-main-news-list--excursions article .text.flex{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:16px 18px 0; } .corp-content .mg-main-news-list--excursions article .text.flex h3{ flex:1; min-width:0; margin:0; padding-bottom:14px; } .corp-content .mg-main-news-list--excursions article .age{ display:flex; align-items:center; gap:10px; margin: auto -18px 0; padding:11px 18px 12px; border-top:1px solid var(--border); background:var(--muted); color:var(--foreground); transition:background .2s,border-color .2s,color .2s; } .corp-content .mg-main-news-list--excursions article:hover .age{ background:var(--primary); border-top-color:var(--primary); color:var(--primary-foreground); } .corp-content .mg-main-news-list--excursions article .age-icon{ flex-shrink:0; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--primary); font-size:14px; line-height:1; transition:background .2s,color .2s; } .corp-content .mg-main-news-list--excursions article:hover .age-icon{ background:rgba(255,255,255,.16); color:var(--primary-foreground); } .corp-content .mg-main-news-list--excursions article .age-copy{ display:flex; flex-direction:column; gap:2px; min-width:0; } .corp-content .mg-main-news-list--excursions article .age-label{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-foreground); line-height:1.2; } .corp-content .mg-main-news-list--excursions article:hover .age-label{color:rgba(255,255,255,.78);} .corp-content .mg-main-news-list--excursions article .age-value{ font-size:15px; font-weight:700; line-height:1.15; letter-spacing:-.01em; } .corp-content .mg-category-desc{margin-bottom:1.4em;color:var(--muted-foreground);} .excursion-modals{display:contents;} /* экскурсии — боковая панель (как соглашение о ПДн), portal в body через JS */ body.lock{overflow:hidden;} .modal.modal-excursion.modal-excursion--panel{ position:fixed!important; top:0!important; left:auto!important; right:-640px; bottom:0; transform:none!important; width:min(640px,100vw)!important; max-width:min(640px,100vw)!important; height:100vh!important; max-height:100vh!important; margin:0; border-radius:0; padding:0; background:#fff; color:var(--foreground); opacity:1!important; visibility:hidden; pointer-events:none; overflow:hidden; box-shadow:-8px 0 32px rgba(22,21,27,.12); transition:right .3s ease,visibility .2s; z-index:90; } .modal.modal-excursion.modal-excursion--panel.show{ right:0!important; transform:none!important; visibility:visible; pointer-events:auto; } .modal.modal-excursion.modal-excursion--panel .inner{ position:relative; padding:clamp(28px,4vw,40px) clamp(24px,5vw,48px); height:100%; box-sizing:border-box; color:var(--foreground); display:flex; flex-direction:column; } .modal.modal-excursion.modal-excursion--panel .h2-like{ margin:0 0 4px; padding:0 44px 16px 0; font-size:clamp(22px,2.8vw,28px); font-weight:600; line-height:1.2; letter-spacing:-0.02em; color:var(--foreground); flex-shrink:0; border-bottom:1px solid var(--border); } .modal.modal-excursion.modal-excursion--panel .h2-like::after{ content:""; display:block; width:48px; height:2px; margin-top:14px; background:var(--primary); border-radius:1px; } .modal.modal-excursion.modal-excursion--panel .close{ position:absolute; top:20px; right:20px; width:34px; height:34px; border:1px solid var(--border); border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--foreground); } .modal.modal-excursion.modal-excursion--panel .close:hover{border-color:var(--foreground);} .modal.modal-excursion.modal-excursion--panel .close svg{width:16px;height:16px;display:block;} .modal.modal-excursion.modal-excursion--panel .content.overflow-y, .modal.modal-excursion.modal-excursion--panel .excursion-prose{ flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; margin-top:16px; padding-right:6px; -webkit-overflow-scrolling:touch; font-size:15px; line-height:1.65; color:var(--foreground); } .modal.modal-excursion.modal-excursion--panel .excursion-prose .excursion-body{ display:flex; flex-direction:column; gap:0; } .modal.modal-excursion.modal-excursion--panel .excursion-prose .excursion-lead{ display:block; margin:0 0 18px; padding:14px 16px 14px 18px; border-left:3px solid var(--primary); border-radius:0 var(--radius-md) var(--radius-md) 0; background:var(--accent); font-size:15px; font-style:italic; font-weight:500; line-height:1.55; color:var(--foreground); } .modal.modal-excursion.modal-excursion--panel .excursion-prose p{ margin:0 0 14px; overflow-wrap:anywhere; word-break:break-word; color:var(--foreground); } .modal.modal-excursion.modal-excursion--panel .excursion-prose p:last-child{margin-bottom:0;} .modal.modal-excursion.modal-excursion--panel .excursion-prose h2, .modal.modal-excursion.modal-excursion--panel .excursion-prose .excursion-form-title{ margin:28px 0 16px; padding:0 0 12px; border-bottom:1px solid rgba(22,21,27,.1); font-size:17px; font-weight:600; line-height:1.3; letter-spacing:-0.01em; color:var(--foreground); } .modal.modal-excursion.modal-excursion--panel .excursion-prose h2:first-child, .modal.modal-excursion.modal-excursion--panel .excursion-prose .excursion-form-title:first-child{margin-top:0;} .modal.modal-excursion.modal-excursion--panel .excursion-prose h3{ margin:22px 0 10px; font-size:15px; font-weight:600; line-height:1.35; letter-spacing:-0.01em; color:var(--foreground); } .modal.modal-excursion.modal-excursion--panel .excursion-prose h4{ margin:18px 0 8px; font-size:14px; font-weight:600; line-height:1.4; color:var(--muted-foreground); } .modal.modal-excursion.modal-excursion--panel .excursion-prose h5{ margin:14px 0 8px; font-size:13px; font-weight:600; line-height:1.45; letter-spacing:.02em; text-transform:uppercase; color:var(--mute); } .modal.modal-excursion.modal-excursion--panel .excursion-prose h5.excursion-meta{ margin:0; padding:11px 14px; border-left:3px solid var(--primary); border-radius:0 var(--radius-md) var(--radius-md) 0; background:var(--accent); font-size:13px; font-weight:600; line-height:1.45; letter-spacing:0; text-transform:none; color:var(--foreground); } .modal.modal-excursion.modal-excursion--panel .excursion-prose .excursion-meta-group{ display:grid; gap:8px; margin:18px 0 0; } .modal.modal-excursion.modal-excursion--panel .excursion-prose h6{ margin:12px 0 6px; font-size:12px; font-weight:600; line-height:1.4; color:var(--mute); } .modal.modal-excursion.modal-excursion--panel .excursion-prose ul, .modal.modal-excursion.modal-excursion--panel .excursion-prose ol{ margin:0 0 16px; padding-left:1.25em; } .modal.modal-excursion.modal-excursion--panel .excursion-prose li{ margin:0 0 8px; overflow-wrap:anywhere; word-break:break-word; } .modal.modal-excursion.modal-excursion--panel .excursion-prose li:last-child{margin-bottom:0;} .modal.modal-excursion.modal-excursion--panel .excursion-prose strong, .modal.modal-excursion.modal-excursion--panel .excursion-prose b{font-weight:700;color:var(--foreground);} .modal.modal-excursion.modal-excursion--panel .excursion-prose a{ color:var(--primary); font-weight:500; text-decoration:underline; text-underline-offset:3px; } .modal.modal-excursion.modal-excursion--panel .excursion-prose a:hover{color:var(--primary-hover);} .modal.modal-excursion.modal-excursion--panel .excursion-prose blockquote{ margin:16px 0; padding:12px 16px; border-left:3px solid var(--border); border-radius:0 var(--radius-md) var(--radius-md) 0; background:var(--muted); font-size:14px; color:var(--muted-foreground); } .modal.modal-excursion.modal-excursion--panel .excursion-prose p, .modal.modal-excursion.modal-excursion--panel .excursion-prose li{ overflow-wrap:anywhere; word-break:break-word; } .modal.modal-excursion.modal-excursion--panel .excursion-prose img{ max-width:100%; height:auto; margin:8px 0 16px; border-radius:var(--radius-md); } .modal.modal-excursion.modal-excursion--panel .excursion-prose::-webkit-scrollbar{width:6px;} .modal.modal-excursion.modal-excursion--panel .excursion-prose::-webkit-scrollbar-thumb{ background:rgba(22,21,27,.18); border-radius:999px; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer{ margin-top:4px!important; padding:clamp(18px,2.5vw,22px)!important; border:1px solid var(--border)!important; border-radius:var(--radius-lg)!important; background:linear-gradient(180deg,var(--muted) 0%,#fff 120px)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); font-family:var(--font-sans)!important; text-align:initial; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer form{ display:flex; flex-direction:column; gap:0; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .text-error-form{ margin:0 0 14px; padding:11px 14px; border:1px solid rgba(192,57,43,.25); border-radius:var(--radius-sm); background:rgba(192,57,43,.08); color:var(--destructive); font-size:14px; line-height:1.45; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .text-error-form:empty, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .text-error-form[style*="display:none"], .modal.modal-excursion.modal-excursion--panel .mg-form-designer .text-error-form[style*="display: none"]{ display:none!important; margin:0; padding:0; border:0; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:14px; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid li + li{ margin-top:0; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid li.width-100, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid .mg-field.width-100{ grid-column:1 / -1; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .mg-field{ position:relative; display:flex; flex-direction:column; gap:7px; margin:0; padding:0; list-style:none; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .mg-field:has(> input[type="hidden"]){ display:none; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .mg-field .placeholder{ position:static!important; top:auto!important; left:auto!important; order:-1; opacity:1!important; margin:0; font-size:13px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--foreground); transition:none; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .mg-field:hover .placeholder, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .mg-field input:focus + .placeholder, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .mg-field select:focus + .placeholder, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .mg-field textarea:focus + .placeholder{ opacity:1!important; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .placeholder .red-star{ color:var(--destructive); font-weight:700; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="text"], .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="email"], .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="tel"], .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="number"], .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="password"], .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="date"], .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="file"], .modal.modal-excursion.modal-excursion--panel .mg-form-designer textarea, .modal.modal-excursion.modal-excursion--panel .mg-form-designer select{ width:100%!important; max-width:100%; box-sizing:border-box; font-family:var(--font-sans)!important; font-size:15px!important; line-height:1.4; color:var(--foreground)!important; background:#fff!important; border:1.5px solid var(--input)!important; border-radius:12px!important; padding:11px 14px!important; min-height:46px!important; height:auto!important; margin:0!important; box-shadow:0 1px 2px rgba(0,14,75,.04); transition:border-color .18s,box-shadow .18s,background .18s; appearance:none; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer select{ padding-right:40px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000E4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer textarea{ min-height:108px; resize:vertical; padding-top:12px; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer input::placeholder, .modal.modal-excursion.modal-excursion--panel .mg-form-designer textarea::placeholder{ color:var(--mute); opacity:1; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="text"]:hover, .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="email"]:hover, .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="tel"]:hover, .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="number"]:hover, .modal.modal-excursion.modal-excursion--panel .mg-form-designer textarea:hover, .modal.modal-excursion.modal-excursion--panel .mg-form-designer select:hover{ border-color:var(--border); background:#fff; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="text"]:focus, .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="email"]:focus, .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="tel"]:focus, .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="number"]:focus, .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="date"]:focus, .modal.modal-excursion.modal-excursion--panel .mg-form-designer textarea:focus, .modal.modal-excursion.modal-excursion--panel .mg-form-designer select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,14,75,.12); background:#fff; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer input.error-input, .modal.modal-excursion.modal-excursion--panel .mg-form-designer textarea.error-input, .modal.modal-excursion.modal-excursion--panel .mg-form-designer select.error-input{ border-color:var(--destructive)!important; box-shadow:0 0 0 3px rgba(192,57,43,.12)!important; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer label{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.45; color:var(--foreground); cursor:pointer; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer input[type="checkbox"]{ width:18px!important; height:18px!important; min-height:18px; margin-top:2px; accent-color:var(--primary); flex-shrink:0; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .checkCapcha{ display:flex; flex-direction:column; gap:10px; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .checkCapcha img{ width:140px!important; height:36px!important; border-radius:8px; border:1px solid var(--border); } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-designer-submit{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border); } .modal.modal-excursion.modal-excursion--panel .mg-form-designer button[type="submit"], .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-plugin-submit{ display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:13px 24px; border:0; border-radius:999px; background:var(--primary); color:var(--primary-foreground); font-family:var(--font-sans); font-size:15px; font-weight:600; letter-spacing:.01em; cursor:pointer; box-shadow:0 8px 20px rgba(0,14,75,.18); transition:transform .18s,box-shadow .18s,background .18s; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer button[type="submit"]:hover, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-plugin-submit:hover{ background:var(--primary-hover); transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,14,75,.22); } .modal.modal-excursion.modal-excursion--panel .mg-form-designer button[type="submit"]:active, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-plugin-submit:active{ transform:translateY(0); } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list li::before, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid li::before{ display:none!important; content:none!important; } @media(min-width:520px){ .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; } .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid > .mg-field:first-child, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid > .mg-field.width-100, .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid > .mg-field:has(textarea), .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid > .mg-field:has(select), .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid > .mg-field:has(.checkCapcha), .modal.modal-excursion.modal-excursion--panel .mg-form-designer .form-list.grid > .mg-field:has(input[type="checkbox"]){ grid-column:1 / -1; } } @media(max-width:760px){ .modal.modal-excursion.modal-excursion--panel{ width:100%!important; max-width:100%!important; right:-100%; } .modal.modal-excursion.modal-excursion--panel .inner{padding:28px 20px;} } /* ============================================================================ ПАГИНАЦИЯ — единый стиль для всего сайта. Блог отдаёт
  • ; каталог —
  • ; некоторые списки — . Все варианты приводим к одному виду. ========================================================================== */ .mg-pager,.mg-pager>ul{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;list-style:none;padding:0;margin:0;} .mg-pager .allPages{width:100%;text-align:center;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-bottom:16px;} .mg-pager .allPages span{color:var(--foreground);font-weight:600;} .mg-pager li{list-style:none;} .mg-pager li a,.mg-pager li span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 14px;border-radius:14px;border:1px solid var(--border);background:var(--card);font-size:14px;font-weight:500;line-height:1;color:var(--foreground);text-decoration:none;transition:var(--transition-fast);} .mg-pager li a:hover{border-color:var(--primary);color:var(--primary);background:var(--muted);transform:translateY(-1px);box-shadow:var(--shadow-sm);} .mg-pager li.current a,.mg-pager li a.active{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-sm);cursor:default;} .mg-pager li.current a:hover,.mg-pager li a.active:hover{transform:none;color:var(--primary-foreground);background:var(--primary);} /* стрелки «вперёд» и «в конец» — приглушённый акцент */ .mg-pager li a.navButton{font-weight:600;color:var(--mute);} .mg-pager li a.navButton:hover{color:var(--primary);border-color:var(--primary);} /* split-block баннер на главной */ .split-block{display:block;margin:0 auto;border-radius:24px;overflow:hidden;} .split-block img{width:100%;height:auto;} /* формы (вход/регистрация/обратная связь/оформление) */ .mg-field,.form-group,.field-row{margin-bottom:16px;} input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],textarea,select{width:100%;padding:13px 16px;border:1px solid var(--input);border-radius:var(--radius-md);background:var(--card);font-family:inherit;font-size:15px;color:var(--foreground);transition:border-color .15s,box-shadow .15s;} input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:1px;border-color:var(--ring);box-shadow:0 0 0 3px rgba(0,14,75,.08);} input:focus,textarea:focus,select:focus{border-color:var(--ring);} /* видимый фокус на всех интерактивных элементах (WCAG 2.4.7) */ a:focus-visible,button:focus-visible,[tabindex]:focus-visible,.icn:focus-visible,.nav-burger:focus-visible,.pill:focus-visible,.show-filter:focus-visible,.vd-modal-close:focus-visible,.card-add:focus-visible,.addToCart:focus-visible,.filter-btn:focus-visible,.sub-cats a:focus-visible,.pagination a:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px;} .feature a:focus-visible,.feature button:focus-visible,.marquee a:focus-visible{outline-color:var(--primary-foreground);} textarea{border-radius:var(--radius-lg);min-height:120px;} label{font-size:13px;color:var(--muted-foreground);display:block;margin-bottom:6px;} /* корзина / оформление — карточные блоки */ .cart-table,.order-table,.personal-content,.order-content{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;} .js-order-block,.order-step,.delivery-block,.payment-block{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;margin-bottom:18px;} /* мелкая корзина (overlay панель из движка) — оставляем функциональной, лёгкая стилизация */ .small-cart-table{width:100%;border-collapse:collapse;} .small-cart-table td{padding:12px 8px;border-bottom:1px solid var(--border);vertical-align:middle;} .small-cart-img img{width:54px;height:54px;object-fit:contain;background:var(--accent);border-radius:12px;padding:5px;} /* модальные окна движка (cart/auth/excursions) */ .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);z-index:80;background:var(--card);border-radius:var(--radius-xl);max-width:520px;width:calc(100% - 40px);max-height:88vh;overflow:auto;padding:32px;opacity:0;visibility:hidden;transition:.2s;box-shadow:var(--shadow-lg);} .modal.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);} .modal .close{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;} .modal .close:hover{border-color:var(--foreground);} .overlay{position:fixed;inset:0;background:rgba(22,21,27,.45);backdrop-filter:blur(3px);z-index:85;opacity:0;visibility:hidden;transition:.2s;pointer-events:none;} .overlay.show{opacity:1;visibility:visible;pointer-events:auto;} /* соглашение на обработку ПДн — панель справа (дублируется в nav-corp.css для обхода minify-cache) */ .modal.modal-agreement.modal-agreement--panel{top:0!important;left:auto!important;right:-640px;bottom:0;transform:none!important;width:min(640px,100vw)!important;max-width:min(640px,100vw)!important;height:100vh!important;max-height:100vh!important;margin:0;border-radius:0;padding:0;background:#fff;color:var(--foreground);opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;box-shadow:-8px 0 32px rgba(22,21,27,.12);transition:right .3s ease,opacity .2s,visibility .2s;z-index:85;} .modal.modal-agreement.modal-agreement--panel.show{right:0!important;transform:none!important;opacity:1;visibility:visible;pointer-events:auto;} .modal.modal-agreement.modal-agreement--panel .inner{padding:clamp(28px,4vw,40px) clamp(24px,5vw,56px);height:100%;box-sizing:border-box;color:var(--foreground);} .modal.modal-agreement.modal-agreement--panel .h2-like{margin:0 0 8px;padding-right:40px;font-size:clamp(20px,2.5vw,26px);font-weight:600;line-height:1.25;color:var(--foreground);} .modal.modal-agreement.modal-agreement--panel .close svg{width:16px;height:16px;display:block;} .modal.modal-agreement.modal-agreement--panel .content.overflow-y{color:var(--foreground);font-size:14px;line-height:1.65;} .modal.modal-agreement.modal-agreement--panel .content.overflow-y h2,.modal.modal-agreement.modal-agreement--panel .content.overflow-y h3,.modal.modal-agreement.modal-agreement--panel .content.overflow-y p,.modal.modal-agreement.modal-agreement--panel .content.overflow-y li,.modal.modal-agreement.modal-agreement--panel .content.overflow-y span{color:var(--foreground);} .p4-subscribe-agreement .agreement__checkbox{width:24px;height:24px;min-width:24px;min-height:24px;} /* поиск (выезжающая панель под навигацией) */ .nav-search{border-top:1px solid var(--border);background:var(--card);} .nav-search-in{max-width:var(--max);margin:0 auto;padding:16px 30px;} .search-block{position:relative;max-width:680px;margin:0 auto;} .search-block form{display:flex;align-items:center;gap:10px;border:1px solid var(--input);border-radius:var(--radius-pill);padding:5px 5px 5px 18px;background:var(--card);} .search-block form>svg{width:20px;height:20px;color:var(--mute);flex-shrink:0;} .search-block input[type=search]{flex:1;min-width:0;border:none;background:none;padding:10px 4px;font-size:15px;outline:none;} .search-block button[type=submit]{flex-shrink:0;background:var(--primary);color:var(--primary-foreground);border:none;border-radius:var(--radius-pill);padding:11px 22px;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background .15s;} .search-block button[type=submit]:hover{background:var(--primary-hover);} .wraper-fast-result{position:relative;} .fastResult{position:absolute;top:10px;left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:10;overflow:hidden;} .fastResult:empty{display:none;} .fastResult a{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);color:var(--foreground);font-size:14px;} .fastResult a:hover{background:var(--accent);} .fastResult img{width:44px;height:44px;object-fit:contain;background:var(--accent);border-radius:10px;padding:4px;} /* ============================================================================ CATALOG LAYOUT (sidebar + grid) + FILTER ========================================================================== */ .catalog-head{padding-top:8px;margin-bottom:24px;} .catalog-head h1{font-size:clamp(28px,4vw,42px);} .catalog-layout{display:flex;flex-direction:column;gap:16px;padding-bottom:48px;} .catalog-cats{margin:0 0 2px;} .catalog-cats .sub-cats{margin:0;} .catalog-main .products-wrapper{grid-template-columns:repeat(4,1fr);gap:38px 26px;} /* крупные карточки в каталоге: товар заполняет высоту без пустот сверху/снизу */ .catalog-main .card-media{margin-bottom:16px;padding:6px 0;} .catalog-main .card-media img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;} .catalog-main .card-name{font-size:17px;margin-bottom:6px;} .catalog-main .card-vol{font-size:14px;margin-bottom:16px;} .catalog-main .card-tag{font-size:14px;margin-bottom:10px;} .catalog-main .card-buy{font-size:14px;padding:14px 28px;} .catalog-main .card .like,.catalog-main .card .unlike{width:38px;height:38px;} .catalog-main .card .like svg,.catalog-main .card .unlike svg{width:21px;height:21px;} /* подкатегории-чипы */ .sub-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;} .sub-cats a{display:inline-flex;padding:9px 16px;border-radius:var(--radius-pill);border:1px solid var(--input);font-size:13px;font-weight:500;color:var(--foreground);transition:.15s;background:var(--card);} .sub-cats a:hover{border-color:var(--foreground);color:var(--primary);} .sub-cats.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .sub-cats.grid a{flex-direction:column;align-items:flex-start;gap:8px;padding:14px;} .sub-cats.grid .img{width:100%;aspect-ratio:3/2;background-size:cover;background-position:center;border-radius:12px;background-color:var(--accent);} .catalog-main .sub-cats.grid{grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:0;} .catalog-main .sub-cats.grid a{align-items:stretch;text-align:left;padding:0;border-radius:16px;overflow:hidden;} .catalog-main .sub-cats.grid .img{width:100%;aspect-ratio:8/3;background-size:cover;background-position:center;border-radius:0;background-color:var(--accent);} .catalog-main .sub-cats.grid h2.title{font-size:24px;font-weight:700;line-height:1.2;color:var(--primary);margin:14px 16px 0;} .catalog-main .sub-cats.grid .desc{font-size:14px;font-weight:400;line-height:1.5;color:var(--muted-foreground);margin:6px 16px 16px;} @media(max-width:640px){.catalog-main .sub-cats.grid{grid-template-columns:1fr;}} /* фильтр — единый горизонтальный бар (раскладка ниже, в секции ЛИПКИЙ ФИЛЬТР) */ .filter-form{margin:0;} .filter-preview,.loader-search{display:none !important;} .mg-filter{margin:0;padding:0;border:none;} .mg-filter-body{margin:0;} .filter-form .remove{display:none !important;} /* базовый заголовок группы (для контекстов вне каталога, напр. избранное) */ .mg-filter-title{display:block;font-size:14px;font-weight:600;color:var(--foreground);margin-bottom:10px;} .mg-filter-title:empty{display:none;} /* списки опций (без внутренних скроллов — длинный список просто удлиняет сайдбар) */ .mg-filter-list{list-style:none;margin:0;padding:0;} /* интервал между опциями: движок отдаёт либо один
  • со множеством
  • по одному