/*
Theme Name:        Extensions Store
Theme URI:         https://example.com/
Description:       Лёгкая, быстрая тема для магазина расширений WordPress/Joomla. Полная поддержка Гутенберг, глобальная палитра, локальные шрифты, WebP на загрузке, совместимость с SEO/кеш-плагинами. Парная к плагину «Extensions Store».
Author:            Федор Васильев
Version:           0.3.192
Requires at least: 6.2
Tested up to:      6.6
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       exstore
Tags:              custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* =========================================================================
   SELF-HOSTED FONTS (optional)
   Drop font files into /assets/fonts/ and uncomment to go fully self-hosted.
   Until then the theme uses a fast system stack with zero external requests.
   ========================================================================= */
/*
@font-face{
	font-family:"Inter";
	src:url("assets/fonts/Inter-roman.var.woff2") format("woff2");
	font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"JetBrains Mono";
	src:url("assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
	font-weight:400 700; font-style:normal; font-display:swap;
}
*/

/* =========================================================================
   DESIGN TOKENS
   ========================================================================= */
:root{
	--ink:#0F172A;
	--ink-soft:#475569;
	--muted:#64748B;
	--surface:#FFFFFF;
	--bg:#F8FAFC;
	--line:#E6EAF0;
	--accent:#4F46E5;
	--accent-ink:#4338CA;
	--free:#10B981;
	--pro:#F59E0B;

	--radius:14px;
	--radius-sm:10px;
	--shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
	--shadow-hover:0 4px 10px rgba(15,23,42,.06), 0 18px 40px rgba(79,70,229,.10);

	--container:1140px;
	--gap:clamp(16px, 3vw, 28px);

	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, monospace;

	--step--1: clamp(.82rem, .80rem + .1vw, .88rem);
	--step-0:  clamp(1rem, .96rem + .2vw, 1.06rem);
	--step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.4rem);
	--step-2:  clamp(1.5rem, 1.35rem + .7vw, 1.9rem);
	--step-3:  clamp(2rem, 1.7rem + 1.5vw, 3rem);
	--step-4:  clamp(2.6rem, 2.1rem + 2.6vw, 4.2rem);

}

/* If self-hosting, switch these to "Inter" / "JetBrains Mono". */
.fonts-loaded :root{ --font-sans:"Inter", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }

/* =========================================================================
   BASE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{animation-duration:.001ms!important;transition-duration:.001ms!important;}}

body{
	margin:0;
	font-family:var(--font-sans);
	font-size:var(--step-0);
	line-height:1.65;
	color:var(--ink);
	background:var(--surface);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	overflow-x:clip;
}

h1,h2,h3,h4,h5,h6{line-height:1.15;letter-spacing:-.02em;font-weight:500;margin:0 0 .5em;color:var(--ink);}
h1,h2{font-weight:600;}
h1{font-size:clamp(1.56rem, 1.26rem + 1.56vw, 2.52rem);}
h2{font-size:var(--step-3);}
h3{font-size:var(--step-1);}
p{margin:0 0 1em;}
a{color:var(--accent-ink);text-underline-offset:2px;}
img{max-width:100%;height:auto;display:block;}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px;}

.exstore-container{width:min(var(--container), 100% - 2*clamp(16px,5vw,40px));margin-inline:auto;}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100;}
.skip-link:focus{left:0;}

/* Accessibility: one clear, consistent focus ring for keyboard users across the
   whole site (mouse clicks are unaffected — :focus-visible targets keyboard/AT only). */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
	outline:3px solid var(--accent,#4F46E5);outline-offset:2px;border-radius:4px;
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:var(--step--1);
	padding:12px 22px;border-radius:var(--radius-sm);border:0;cursor:pointer;text-decoration:none;line-height:1.2;
	transition:transform .06s ease, box-shadow .18s ease, background .18s ease, color .18s ease;}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--accent);color:#fff;}
.btn--primary:hover{background:var(--accent-ink);box-shadow:var(--shadow-hover);}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-ink);}
.btn--lg{padding:15px 30px;font-size:var(--step-0);}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;}
.site-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.02em;font-size:var(--step-1);}
.site-brand__mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#8b5cf6);display:grid;place-items:center;color:#fff;font-family:var(--font-mono);font-size:15px;font-weight:700;}
.site-brand img{width:auto;}

.main-nav{display:flex;align-items:center;gap:6px;}
.main-nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.main-nav-list li{list-style:none;margin:0;}
.main-nav-list ul{list-style:none;margin:0;padding:0;}
.main-nav a{color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:var(--step--1);padding:8px 12px;border-radius:8px;}
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--ink);background:var(--bg);}
.header-actions{display:flex;align-items:center;gap:10px;}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;border-radius:8px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:.2s;}

@media (max-width:1199px){
	.site-header__inner{position:relative;gap:8px;}
	.nav-toggle{display:block;order:3;flex:none;}
	.site-brand{order:1;margin-right:auto;min-width:0;font-size:16px;}
	.site-brand__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	.header-actions{order:2;gap:6px;}
	.main-nav{position:fixed;top:0;right:0;left:auto;width:min(86%,400px);max-width:100vw;height:100dvh;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-top:0;padding:0;box-shadow:-16px 0 40px rgba(15,23,42,.18);transform:translateX(100%);opacity:1;visibility:hidden;transition:transform .3s ease,visibility .3s;overflow:hidden;z-index:99995;will-change:transform;}
	.main-nav.is-open{transform:translateX(0);visibility:visible;}
	/* The header uses backdrop-filter, which would make it the containing block
	   for its position:fixed children — that pinned the drawer to the header box
	   instead of the viewport (page-wide horizontal scroll + the old top strip).
	   Disable the blur on mobile so the drawer is measured against the viewport. */
	.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.98);}
	/* Dimmed backdrop: lives inside the header, so it shares the drawer's
	   stacking context and always stays BELOW the menu. Tap to close. */
	.main-nav__backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);opacity:0;transition:opacity .3s ease;z-index:99990;}
	.main-nav__backdrop.is-shown{opacity:1;}
	.main-nav__backdrop[hidden]{display:none;}
	.main-nav__bar{display:flex;flex:none;align-items:center;justify-content:space-between;padding:14px 20px;min-height:64px;border-bottom:1px solid var(--line);background:var(--surface);box-shadow:0 4px 14px rgba(15,23,42,.05);}
	.main-nav__bartitle{font-weight:800;color:var(--ink);font-size:17px;letter-spacing:.01em;}
	.main-nav__close{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--accent);font-weight:600;font-size:15px;padding:6px 4px;cursor:pointer;}
	.main-nav__close:active{opacity:.7;}
	.main-nav__x{font-size:20px;line-height:1;}
	.main-nav-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;width:100%;}
	.main-nav-list>li:not(.menu-item--button){border-bottom:1px solid var(--line);}
	.main-nav-list>li>a{padding:20px clamp(16px,5vw,26px);}
	.main-nav .current-menu-item>a{background:#f6f8ff;color:var(--accent-ink);border-radius:0;}
	/* Button items become full-width rows, not floating pills */
	.main-nav .menu-item--button{width:100%;}
	.main-nav .menu-item--button>a{display:block;text-align:center;border-bottom:0;margin:10px clamp(16px,5vw,26px);}
}

/* =========================================================================
   BREADCRUMBS (Yoast SEO)
   ========================================================================= */
.breadcrumbs-bar{background:var(--bg);border-bottom:1px solid var(--line);}
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:13px 0;font-size:var(--step--1);color:var(--muted);line-height:1.4;}
.breadcrumbs a{color:var(--ink-soft);text-decoration:none;border-radius:4px;transition:color .15s ease;}
.breadcrumbs a:hover{color:var(--accent-ink);}
.breadcrumbs > span > span,.breadcrumbs > span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;}
.breadcrumbs .breadcrumb_last{color:var(--ink);font-weight:600;}
/* Home (first) link gets a subtle leading dot marker */
.breadcrumbs > span > span:first-child > a::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle;}

/* =========================================================================
   HERO  (signature: blueprint dotted grid + mono version chip)
   ========================================================================= */
.hero{position:relative;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--line);}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line) 1px, transparent 1px);background-size:22px 22px;mask-image:radial-gradient(ellipse 80% 70% at 50% 0%, #000 40%, transparent 75%);opacity:.7;}
.hero__inner{position:relative;padding:clamp(48px,8vw,104px) 0 clamp(40px,7vw,88px);max-width:760px;}
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;color:var(--accent-ink);background:#eef2ff;border:1px solid #e0e3ff;padding:6px 12px;border-radius:999px;margin-bottom:22px;font-weight:600;}
.hero h1{font-size:var(--step-4);margin-bottom:18px;}
.hero__lede{font-size:var(--step-1);color:var(--ink-soft);font-weight:400;max-width:620px;margin-bottom:30px;}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,56px);margin-top:clamp(36px,6vw,64px);}
.hero__stat{display:flex;flex-direction:column;}
.hero__stat b{font-size:var(--step-2);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.hero__stat span{font-size:var(--step--1);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}

/* =========================================================================
   SECTIONS
   ========================================================================= */
.section{padding:clamp(48px,7vw,88px) 0;}
.section--lists{padding-bottom:0;}
.section--tight-top{padding-top:0;}
.section--tint{background:var(--bg);border-block:1px solid var(--line);}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(24px,4vw,40px);flex-wrap:wrap;}
.section__head h2{margin:0;}
.section__head .link-more{font-weight:600;text-decoration:none;color:var(--accent-ink);white-space:nowrap;}
.eyebrow{font-family:var(--font-mono);font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin:0 0 8px;display:block;}

/* Value props */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap);}
.value{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}
.value__ico{width:42px;height:42px;border-radius:10px;background:#eef2ff;color:var(--accent-ink);display:grid;place-items:center;margin-bottom:14px;}
.value h3{margin-bottom:6px;}
.value p{margin:0;color:var(--ink-soft);font-size:var(--step--1);}

/* =========================================================================
   PRODUCT CARDS
   ========================================================================= */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--gap);}
.product-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease;}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:#d6dbe6;}
.product-card__media{aspect-ratio:5/4;background:var(--bg);position:relative;overflow:hidden;}
.product-card__media img{width:100%;height:100%;object-fit:cover;}
.product-card__badges{position:absolute;top:12px;right:12px;display:flex;gap:6px;}
.product-card__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.product-card__includes{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.02em;}
.product-card h3{margin:0;font-size:var(--step-1);}
.product-card h3 a{color:var(--ink);text-decoration:none;}
.product-card h3 a:hover{color:var(--accent-ink);}
.product-card__excerpt{color:var(--ink-soft);font-size:var(--step--1);margin:0;flex:1;}
.product-card__foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:nowrap;}
.product-card__foot .product-card__price{flex:1 1 auto;min-width:0;}
.product-card__foot > .ver-chip{flex:0 0 auto;white-space:nowrap;}
.product-card__price{font-weight:800;letter-spacing:-.01em;}
.product-card__price small{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:0;}
.ver-chip{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);padding:2px 6px;border-radius:6px;}

/* Badges */
.badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 9px;border-radius:999px;line-height:1;display:inline-flex;align-items:center;}
.badge--free{background:#dcfce7;color:#047857;}
.badge--pro{background:#fef3c7;color:#b45309;}
.badge--featured{background:var(--ink);color:#fff;}

/* Two-column lists (Latest / Popular) */
.list-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap);}
.list-card{border:1px solid var(--line);border-radius:var(--radius);padding:8px 4px;background:var(--surface);}
.list-card h3{padding:14px 20px 6px;margin:0;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-family:var(--font-mono);}
.list-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:11px 20px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);}
.list-row:hover{background:var(--bg);}
.list-row span{color:var(--muted);font-size:var(--step--1);font-variant-numeric:tabular-nums;}
.list-row>span:first-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.45;}
.list-row>span:last-child{flex:0 0 auto;white-space:nowrap;text-align:right;}

/* =========================================================================
   CTA BAND + NEWSLETTER
   ========================================================================= */
.cta-band{background:linear-gradient(135deg,#1e1b4b,#4338ca);color:#fff;border-radius:var(--radius);padding:clamp(32px,5vw,56px);text-align:center;}
.cta-band h2{color:#fff;}
.cta-band p{color:#c7d2fe;max-width:520px;margin-inline:auto;}
.cta-band .btn--primary{background:#fff;color:var(--accent-ink);}
.cta-band .btn--primary:hover{background:#eef2ff;}

/* =========================================================================
   CONTENT (single / page / blog) — Gutenberg friendly widths
   ========================================================================= */
.entry{padding:clamp(36px,6vw,72px) 0;}
.entry__header{max-width:var(--container);margin-inline:auto;margin-bottom:28px;}
.entry-content{max-width:760px;margin-inline:auto;padding-inline:clamp(16px,5vw,26px);}
.entry-content:has(.exst-account){max-width:1080px;}
.entry-content > *{margin-block:0 1.1em;}
.entry-content h2{margin-top:1.6em;}
/* Blog article H2 ~30% smaller than the global scale (was var(--step-3)). */
.single-post .entry-content h2{font-size:clamp(1.4rem, 1.19rem + 1.05vw, 2.1rem);}
/* Links inside articles stay underlined. WordPress only supplies this through a
   zero-specificity :where() global style, which any optimiser or plugin can
   override — so the theme states it explicitly, with enough specificity to win. */
.entry-content a[href],.exst-pd__rte a[href]{text-decoration:underline !important;text-underline-offset:2px;text-decoration-thickness:1px;}
.entry-content a[href]:hover,.exst-pd__rte a[href]:hover{text-decoration-thickness:2px;}
.entry-content a.wp-element-button,.entry-content a.wp-block-button__link,
.entry-content .wp-block-button a,.exst-pd__rte a.wp-element-button,
.exst-pd__rte .wp-block-button a{text-decoration:none !important;}
/* Our own buttons and pill/badge links (they have a background fill) must never
   get the content underline — only real inline text links do. Covers account,
   tariffs, product and modal buttons everywhere they may render inside
   .entry-content (the account/tariffs pages are shortcodes inside content). */
.entry-content a.exst-btn,.exst-pd__rte a.exst-btn,
.entry-content .exst-btn,.exst-pd__rte .exst-btn,
.entry-content a.exst-acc-logout,.entry-content a.exst-pd__rel-dl,
.entry-content .exst-acc-tabs__nav a,.entry-content .exst-account__cta a,
.entry-content .exst-plan__cta a,.entry-content .exst-buy__form a,
.entry-content a.exst-noline,.exst-pd__rte a.exst-noline,
.entry-content .exst-share a,.entry-content .exst-pd__cbtns a,
.entry-content [class*="exst-btn"],.exst-pd__rte [class*="exst-btn"]{text-decoration:none !important;}
/* Whole shop/account/tariffs UIs are application interfaces, not article text —
   no link in them should ever be underlined. Real text links only live in the
   article body / product RTE description, which keep the underline above. */
.entry-content .exst-account a,.entry-content .exst-account a[href],
.entry-content .exst-acc-tabs a,.entry-content .exst-acc-tabs a[href],
.entry-content .exst-acc-tab a,.entry-content .exst-acc-tab a[href],
.entry-content .exst-tariffs a,.entry-content .exst-tariffs a[href],
.entry-content .exst-catalog a,.entry-content .exst-catalog a[href],
.entry-content .exst-products a,.entry-content .exst-products a[href],
.entry-content .exst-modal a,.entry-content .exst-modal a[href],
.exst-modal a[href]{text-decoration:none !important;}
.entry-content a .exst-ext__i,.exst-pd__rte a .exst-ext__i{text-decoration:none;}
/* External-link icon (inline SVG injected by the theme, see inc/content-extras.php).
   Sized in em so it follows the text; inherits the link colour via currentColor. */
a.exst-ext .exst-ext__i{display:inline-block;width:.72em;height:.72em;margin-left:.32em;vertical-align:-.02em;}
.entry-content img,.entry-content .wp-block-image{border-radius:var(--radius);}
.alignwide{max-width:1080px;margin-inline:auto;}
.alignfull{max-width:none;}
.entry-content .wp-block-button__link{background:var(--accent);border-radius:var(--radius-sm);}

/* Classic editor: media placed together in one paragraph → tidy auto grid.
   2 → side by side, 3 → row of three, 4+ → wraps to the next row with spacing.
   Insert a photo on its own line (separate paragraph) to keep it full-width. */
.entry-content p:has(img + img),
.entry-content p:has(a:has(img) + a:has(img)),
.entry-content p:has(iframe + iframe),
.entry-content p:has(.exst-rutube + .exst-rutube){
	display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
	gap:14px;align-items:start;margin-block:1.2em;}
.entry-content p:has(img + img) img,
.entry-content p:has(a:has(img) + a:has(img)) img{width:100%;height:auto;display:block;margin:0;border-radius:var(--radius);object-fit:cover;}
.entry-content p:has(a:has(img) + a:has(img)) a{display:block;margin:0;}
.entry-content p:has(iframe + iframe) iframe,
.entry-content p:has(.exst-rutube + .exst-rutube) .exst-rutube{width:100%;margin:0;}

/* JS-built media grid (reliable in every browser) */
.entry-content .exst-autogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:14px;align-items:start;margin-block:1.2em;}
.entry-content .exst-autogrid > *{margin:0!important;max-width:100%;}
.entry-content .exst-autogrid img{width:100%;height:auto;display:block;border-radius:var(--radius);object-fit:cover;}
.entry-content .exst-autogrid figure,.entry-content .exst-autogrid .wp-caption{width:auto!important;}
.entry-content .exst-autogrid .exst-rutube,.entry-content .exst-autogrid iframe{width:100%;}

.product-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,48px);align-items:start;}
.product-hero__media img{border-radius:var(--radius);width:100%;}
@media (max-width:820px){.product-hero{grid-template-columns:1fr;}}

/* =========================================================================
   BLOG — share buttons + meta bar
   ========================================================================= */
.post-share{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin:0 0 24px;}
.post-share--bottom{margin:32px 0 0;}
.post-share__big{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;border:0;cursor:pointer;color:#fff;font-weight:700;font-size:15px;line-height:1.1;padding:12px 18px;border-radius:11px;transition:filter .15s ease;}
.post-share__big:hover{filter:brightness(1.05);}
.post-share__big--vk{background:#4680C2;}
.post-share__big--max{background:linear-gradient(135deg,#3B82F6,#8B5CF6);}
.post-share__vk,.post-share__mx{background:rgba(255,255,255,.25);border-radius:6px;padding:1px 6px;font-size:13px;font-weight:800;letter-spacing:.02em;}
.post-share__row{display:flex;gap:8px;flex:0 0 auto;align-items:stretch;}
/* Desktop order: VK, then the coloured row, then MAX at the very end. */
.post-share__big--vk{order:1;}
.post-share__row{order:2;}
.post-share__big--max{order:3;}
.post-share__txt{display:inline-flex;align-items:center;justify-content:center;min-width:54px;border:0;border-radius:11px;cursor:pointer;color:#fff;font-weight:700;font-size:15px;line-height:1.1;padding:12px 16px;transition:filter .15s ease;}
.post-share__txt:hover{filter:brightness(1.06);}
.post-share__txt--telegram{background:#29A9EB;}
.post-share__txt--ok{background:#EE8208;}
.post-share__txt--whatsapp{background:#25D366;}
.post-share__txt--viber{background:#7360F2;}

.post-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 24px;align-items:center;padding:18px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 28px;}
.post-meta__item{display:flex;align-items:center;gap:10px;}
.post-meta__item .ico{fill:var(--accent);color:var(--accent);flex-shrink:0;}
.post-meta__text{display:flex;flex-direction:column;line-height:1.25;}
.post-meta__label{font-size:12px;color:var(--muted);}
.post-meta__value{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}

/* Single post layout (+ optional sidebar on open articles) */
.single-head{width:min(820px, 100% - 2*clamp(16px,5vw,40px));margin-bottom:4px;}
.single-hero{width:min(820px, 100% - 2*clamp(16px,5vw,40px));margin-bottom:28px;}
.single-hero.is-wide{width:min(1180px, 100% - 2*clamp(16px,5vw,40px));}
.single-hero img{display:block;width:100%;}
.single-body{width:min(820px, 100% - 2*clamp(16px,5vw,40px));}
.single-body .entry-content{max-width:none;margin-inline:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,4vw,36px);}
.single-main{min-width:0;}

.single-body.has-sidebar{width:min(1180px, 100% - 2*clamp(16px,5vw,40px));display:grid;gap:44px;grid-template-columns:minmax(0,1fr) 320px;align-items:start;}
.single-body.has-sidebar.sidebar-left{grid-template-columns:320px minmax(0,1fr);}
.single-body.has-sidebar.sidebar-left .single-main{order:2;}
.single-body.has-sidebar.sidebar-left .single-aside{order:1;}
.single-aside{min-width:0;}
.single-aside.is-sticky{position:-webkit-sticky;position:sticky;top:88px;align-self:start;}
/* Mobile-only controls — never shown on desktop. */
.single-aside__tab,.single-aside__overlay,.single-aside__close{display:none !important;}
.single-aside .widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 20px;}
.single-aside .widget:last-child{margin-bottom:0;}
.single-aside .widget-title{font-size:15px;font-weight:800;margin:0 0 12px;color:var(--ink);}
.single-aside a{color:var(--accent);text-decoration:none;}
.single-aside a:hover{text-decoration:underline;}
.single-aside ul{list-style:none;margin:0;padding:0;}
.single-aside li{padding:7px 0;border-bottom:1px solid var(--line);}
.single-aside li:last-child{border-bottom:0;}

@media (max-width:920px){
	.single-body.has-sidebar,.single-body.has-sidebar.sidebar-left{display:block;width:min(820px, 100% - 2*clamp(16px,5vw,40px));}
	/* Sidebar becomes a slide-out drawer pulled by a tab fixed to the right edge. */
	.single-aside,.single-aside.is-sticky{display:block;position:fixed;top:0;right:0;height:100dvh;width:min(380px,86vw);max-width:86vw;margin:0;padding:56px 16px 28px;background:var(--surface);box-shadow:none;transform:translateX(100%);transition:transform .3s ease, box-shadow .3s ease;z-index:99991;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
	.single-aside.is-open{transform:translateX(0);box-shadow:-14px 0 44px rgba(15,23,42,.22);}
	.single-aside .widget{margin-bottom:16px;}
	.single-aside__close{display:flex !important;align-items:center;justify-content:center;position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;background:#eef1f5;border-radius:9px;font-size:24px;line-height:1;cursor:pointer;color:#334155;}
	.single-aside__tab{display:flex !important;align-items:center;justify-content:center;position:fixed;top:50%;right:0;transform:translateY(-50%);width:24px;height:72px;border:0;border-radius:10px 0 0 10px;background:var(--accent);color:#fff;box-shadow:-2px 0 8px rgba(79,70,229,.28);cursor:pointer;z-index:99990;}
	.single-aside__tabarrow{font-size:18px;line-height:1;transition:transform .3s ease;}
	.single-aside__tab.is-active{transform:translateY(-50%) translateX(110%);}
	.single-aside__overlay{display:block !important;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:99989;border:0;}
	.single-aside__overlay[hidden]{display:none !important;}
	body.exst-aside-open{overflow:hidden;}
	body.exst-aside-open .site-header{position:fixed;top:0;left:0;right:0;}
}

/* Card meta on archive */
.product-card__includes .card-dot{margin:0 6px;opacity:.5;}

/* Archive layout presets */
.blog-list .product-grid{grid-template-columns:1fr;}
.blog-list .product-card{flex-direction:row;}
.blog-list .product-card__media{width:34%;min-width:180px;aspect-ratio:auto;}
/* Big cards (Блог-3): exactly three per row, 16:9 media (fits 1920×1080 covers
   without cropping). Collapses to 2, then 1, on narrower screens. */
.blog-cards .product-grid{grid-template-columns:repeat(3,1fr);}
.blog-cards .product-card__media{aspect-ratio:16/9;}
@media (max-width:1000px){
	.blog-cards .product-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
	.blog-cards .product-grid{grid-template-columns:1fr;}
}
@media (max-width:680px){
	.blog-list .product-card{flex-direction:column;}
	.blog-list .product-card__media{width:100%;}
	/* Top line: VK and MAX share it 50/50; the coloured row wraps below. */
	.post-share{display:flex;flex-wrap:wrap;gap:8px;max-width:340px;margin-left:auto;margin-right:auto;}
	.post-share__big{display:inline-flex;padding:12px 10px;}
	.post-share__big--vk{order:1;flex:1 1 calc(50% - 4px);min-width:0;}
	.post-share__big--max{order:2;flex:1 1 calc(50% - 4px);min-width:0;}
	.post-share__row{order:3;flex:1 1 100%;margin-top:0;}
	.post-share__txt{flex:1;min-width:0;padding:11px 6px;}
	/* Meta: neat 2×2 grid instead of a ragged wrap. */
	.post-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;justify-content:initial;align-items:start;}
	.post-meta__item{align-items:flex-start;}
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--ink);color:#cbd5e1;padding:clamp(40px,6vw,64px) 0 28px;margin-top:auto;}
.site-footer a{color:#e2e8f0;text-decoration:none;}
.site-footer a:hover{color:#fff;text-decoration:underline;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;}
.footer-news input[type=email]{width:100%;max-width:none;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid #334155;background:#1e293b;color:#fff;margin:10px 0;}
.footer-news input::placeholder{color:#94a3b8;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #1e293b;margin-top:36px;padding-top:22px;font-size:var(--step--1);color:#94a3b8;}
.footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap;}
.footer-bottom nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.footer-bottom nav li{list-style:none;margin:0;}
.footer-bottom nav a{color:inherit;text-decoration:none;transition:color .15s ease;}
.footer-bottom nav a:hover,.footer-bottom nav a:focus{color:var(--accent);}
@media (max-width:720px){
	.footer-top{grid-template-columns:1fr;}
	.footer-bottom{flex-direction:column;align-items:flex-start;gap:16px;}
	.footer-bottom nav{width:100%;order:1;}
	.footer-copy{order:99;}
	.footer-bottom nav ul{flex-direction:column;align-items:flex-start;gap:14px;width:100%;}
	.footer-bottom nav a{display:block;padding:2px 0;}
}

/* layout helper to push footer down */
body{min-height:100vh;display:flex;flex-direction:column;}
.site-content{flex:1;}

/* Catalog card flags: Новинка (red corner) / Обновлено (blue) */
.product-card__media{position:relative;}
.card-flag{position:absolute;top:12px;left:12px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.02em;color:#fff;padding:4px 10px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.18);white-space:nowrap;max-width:calc(100% - 24px);pointer-events:none;line-height:1.2;}
.product-card__media{overflow:hidden;}
.card-flag--new{background:#e11d2a;}
.card-flag--upd{background:#2563eb;}

/* ============================ About page ============================ */
.about-page{color:#0f172a;}
.about-hero{position:relative;height:62vh;min-height:400px;display:flex;align-items:flex-end;overflow:hidden;background:#0f172a;}
.about-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;}
@media(max-width:820px){.about-hero{height:48vh;min-height:340px;}}
.about-hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,23,42,.15) 0%,rgba(15,23,42,.78) 100%);}
.about-hero__inner{position:relative;z-index:2;padding:60px 0 56px;color:#fff;}
.about-hero__eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:700;opacity:.85;margin:0 0 10px;}
.about-hero__title{font-size:clamp(23px,3.6vw,41px);line-height:1.05;margin:0 0 14px;color:#fff;}
.about-hero__lead{font-size:clamp(16px,2.4vw,21px);max-width:640px;opacity:.95;margin:0;line-height:1.5;}

.about-body{max-width:920px;margin:0 auto;padding:56px 20px 80px;}
.about-intro p{font-size:19px;line-height:1.7;color:#334155;margin:0 0 8px;}

.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:44px 0 8px;}
@media(max-width:680px){.about-stats{grid-template-columns:repeat(2,1fr);}}
.about-stat{background:#f6f8fb;border:1px solid #eef1f5;border-radius:16px;padding:22px 18px;text-align:center;}
.about-stat b{display:block;font-size:30px;color:var(--accent,#4f46e5);line-height:1;}
.about-stat span{display:block;margin-top:8px;font-size:13px;color:#64748b;}

.about-section{margin:56px 0;}
.about-section h2{font-size:28px;margin:0 0 22px;}
.about-lead{font-size:17px;line-height:1.7;color:#334155;}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:680px){.about-cards{grid-template-columns:1fr;}}
.about-card{background:#fff;border:1px solid #eef1f5;border-radius:18px;padding:22px 24px;box-shadow:0 6px 22px rgba(15,23,42,.05);}
.about-card h3{margin:0 0 8px;font-size:18px;}
.about-card p{margin:0;color:#475569;line-height:1.6;font-size:15px;}

.about-parallax{position:relative;margin:64px 0;border-radius:24px;overflow:hidden;background-image:var(--about-band);background-size:cover;background-position:center;background-attachment:fixed;}
@media(max-width:820px){.about-parallax{background-attachment:scroll;}}
.about-parallax__inner{background:rgba(15,23,42,.62);padding:64px 32px;text-align:center;}
.about-parallax blockquote{margin:0 auto;max-width:680px;color:#fff;font-size:clamp(19px,3vw,26px);line-height:1.5;font-weight:600;}

.about-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;}
@media(max-width:680px){.about-gallery{grid-template-columns:1fr 1fr;}}
.about-gallery__item{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:1;}
.about-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.about-gallery__item:hover img{transform:scale(1.06);}

.about-values{background:#f6f8fb;border:1px solid #eef1f5;border-radius:20px;padding:28px 30px;}
.about-values h2{margin-top:0;}
.about-values p{color:#475569;line-height:1.7;font-size:16px;margin:0;}

.about-links{display:flex;flex-wrap:wrap;gap:10px;}
.about-link{display:inline-block;padding:10px 18px;border-radius:999px;background:#eef2ff;color:#4338ca;font-weight:600;text-decoration:none;border:1px solid #e0e7ff;}
.about-link:hover{background:#4f46e5;color:#fff;}

.about-cta{text-align:center;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-radius:24px;padding:48px 28px;margin-top:64px;}
.about-cta h2{color:#fff;margin:0 0 12px;font-size:26px;}
.about-cta p{opacity:.95;max-width:520px;margin:0 auto 22px;line-height:1.6;}
.about-cta .btn--primary{background:#fff;color:#4f46e5;}
.about-cta .btn--primary:hover{background:#f1f5f9;}

/* Discount: card flag + struck price */
.card-flag--sale{background:#16a34a;left:auto;right:12px;top:44px;}
.product-card__price--sale s{color:#94a3b8;font-weight:500;font-size:.8em;margin-right:3px;}
.product-card__price--sale b{color:#16a34a;}

/* ===== Menu: button items + Extensions category dropdown ===== */
.main-nav .menu-item--button>a{background:var(--mi-color,var(--accent));color:#fff!important;border-radius:var(--radius-sm);padding:8px 16px;}
.main-nav .menu-item--button>a:hover{filter:brightness(.93);color:#fff!important;background:var(--mi-color,var(--accent));}

.main-nav .has-mega{position:relative;}
.exst-mega{position:absolute;top:100%;left:0;margin-top:6px;min-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-hover);padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60;}
.main-nav .has-mega:hover>.exst-mega,.main-nav .has-mega:focus-within>.exst-mega{opacity:1;visibility:visible;transform:none;}
.exst-mega__col{min-width:0;}
.exst-mega__head{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;margin:0 0 6px;text-decoration:none;}
.exst-mega__head:hover{color:var(--accent-ink);}
.exst-mega__col a:not(.exst-mega__head){display:block;padding:7px 9px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;}
.exst-mega__col a.exst-mega__sublink{padding-left:22px;font-size:13px;opacity:.85;}
.exst-mega__links{display:flex;flex-direction:column;}
.exst-mega__col a:not(.exst-mega__head):hover{background:var(--bg);color:var(--accent-ink);}
@media (max-width:1199px){
	.main-nav .has-mega{position:static;display:flex;flex-wrap:wrap;align-items:center;transition:background .2s ease;}
	.main-nav .has-mega>a{flex:1;min-width:0;padding:20px 8px 20px clamp(16px,5vw,26px);}
	.main-nav .has-mega.is-expanded{background:#f6f8ff;}
	/* Level-1 panel (Расширения) */
	.exst-mega{flex-basis:100%;width:100%;position:static;min-width:0;opacity:0;visibility:visible!important;transform:none!important;box-shadow:none;border:0;border-radius:0;margin:0;padding:0;grid-template-columns:1fr;gap:0;display:grid;max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1),opacity .25s ease;}
	.main-nav .has-mega.is-expanded>.exst-mega{max-height:4000px;opacity:1;}
	/* Level-2 accordion (WordPress / Joomla) */
	.exst-mega__col{padding:0;display:flex;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);}
	.exst-mega__head{flex:1;min-width:0;margin:0;padding:22px clamp(16px,5vw,26px);color:var(--accent);font-size:13px;}
	.exst-mega__links{flex-basis:100%;width:100%;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease;}
	.exst-mega__col.is-expanded .exst-mega__links{max-height:2000px;opacity:1;padding:0;margin:0 0 0 clamp(12px,3.5vw,19px);border-top:1px solid var(--line);}
	.exst-mega__col a:not(.exst-mega__head){display:flex;align-items:center;min-height:54px;padding:0 16px;border-radius:0;color:var(--ink-soft);font-weight:600;border-bottom:1px solid var(--line);}
	.exst-mega__col a:not(.exst-mega__head):last-child{border-bottom:0;}
	.exst-mega__col a.exst-mega__sublink{padding-left:34px;font-size:13px;opacity:.9;}
	.exst-mega__col a:not(.exst-mega__head):hover{color:var(--accent-ink);background:transparent;}
}

/* ===== Catalog: search + filters ===== */
.catalog-search{display:flex;align-items:center;gap:10px;position:relative;max-width:560px;margin:0 0 18px;}
.catalog-search__ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex;pointer-events:none;}
.catalog-search input[type=search]{flex:1;width:100%;padding:12px 14px 12px 42px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:15px;}
.catalog-search input[type=search]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}
.catalog-search .btn{flex:none;}
.catalog-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;}
.filter-chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;color:var(--ink-soft);text-decoration:none;transition:.14s;}
.filter-chip:hover{border-color:var(--accent);color:var(--accent-ink);}
.filter-chip.is-active{background:var(--accent);color:#fff;border-color:var(--accent);}
.catalog-empty{padding:36px;text-align:center;color:var(--ink-soft);background:var(--bg);border:1px dashed var(--line);border-radius:var(--radius);}

/* Breadcrumbs separator */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;}
.breadcrumbs a{color:var(--ink-soft);text-decoration:none;}
.breadcrumbs a:hover{color:var(--accent-ink);}
.breadcrumbs__sep{color:var(--muted);}
.breadcrumb_last{color:var(--ink);font-weight:600;}

/* Footer: balance columns so subscribe block is as wide as the header */
.footer-top{grid-template-columns:1fr 1.1fr;gap:48px;}
.footer-news{max-width:none;}
.footer-news form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.footer-news form input[type=email]{flex:1 1 260px;margin:10px 0 0;}
.footer-news form .btn{margin-top:10px;flex:0 0 auto;}
.footer-news__agree{flex:1 1 100%;}
@media (max-width:720px){.footer-top{grid-template-columns:1fr;gap:28px;}}

/* ===== Shrinking header + logo (main / small) ===== */
.site-header{transition:background .2s ease,box-shadow .2s ease,padding .2s ease;}
.site-header__inner{transition:min-height .2s ease;}
.site-header.is-shrunk{background:rgba(255,255,255,.92);box-shadow:0 6px 24px rgba(15,23,42,.08);}
.site-header.is-shrunk .site-header__inner{min-height:54px;}

.site-brand{display:inline-flex;align-items:center;gap:10px;margin-right:auto;} /* always left */
.site-brand__logo{display:block;width:auto;height:auto;object-fit:contain;object-position:left center;}
.site-brand .site-brand__logo--main{height:var(--logo-h,54px);width:auto;min-width:var(--logo-h,54px);max-width:320px;}
.site-brand .site-brand__logo--small{height:var(--logo-sm-h,34px);width:auto;min-width:var(--logo-sm-h,34px);max-width:240px;display:none;}

/* Desktop: shrink → swap main → small */
.site-header.is-shrunk .site-brand .site-brand__logo--main{display:none;}
.site-header.is-shrunk .site-brand .site-brand__logo--small{display:block;}

/* Mobile: always use the small logo */
@media (max-width:1199px){
	.site-brand .site-brand__logo--main{display:none;}
	.site-brand .site-brand__logo--small{display:block;}
}

/* ===== Lightbox ===== */
.exst-lb{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;background:rgba(8,12,22,.92);padding:40px;}
.exst-lb.is-open{display:flex;}
.exst-lb__fig{margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px;}
.exst-lb__img{max-width:92vw;max-height:82vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);object-fit:contain;background:#0b1020;}
.exst-lb__cap{color:#cbd5e1;font-size:14px;text-align:center;max-width:680px;}
.exst-lb__close{position:absolute;top:18px;right:22px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:background .15s;}
.exst-lb__close:hover{background:rgba(255,255,255,.24);}
.exst-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:34px;line-height:1;cursor:pointer;transition:background .15s;}
.exst-lb__nav:hover{background:rgba(255,255,255,.24);}
.exst-lb__prev{left:20px;}.exst-lb__next{right:20px;}
@media (max-width:680px){.exst-lb__nav{width:44px;height:44px;font-size:26px;}.exst-lb__prev{left:8px;}.exst-lb__next{right:8px;}.exst-lb{padding:16px;}}

/* ===== Hero floating logo spheres ===== */
.hero{position:relative;overflow:hidden;}
.hero__inner{position:relative;z-index:2;}
.hero-spheres{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.hero-sphere{position:absolute;border-radius:50%;overflow:hidden;will-change:transform;box-shadow:0 18px 50px rgba(67,56,202,.25),inset 0 -10px 24px rgba(0,0,0,.18),inset 0 8px 20px rgba(255,255,255,.20);}
.hero-sphere--wp{background:radial-gradient(circle at 32% 28%,#7c8cff,#4F46E5 72%);}
.hero-sphere--jm{background:radial-gradient(circle at 32% 28%,#ff8aa0,#e11d6a 72%);}
/* Depth layers: sharp front balls sit ABOVE the blurred, distant back ones. */
.hero-sphere.is-back{z-index:1;}
.hero-sphere.is-front{z-index:2;}
/* The logo is a strip 200% wide, tinted onto the ball and scrolled sideways by JS
   so it rolls off one edge and back in the other — a fake 3-D spin. */
/* A single logo, no tiling. JS slides it across the ball (translateX) and thins
   it at the rim (scaleX), so it rolls around the sphere like a painted-on mark
   and reappears the same way — one logo, always returning dead-centre. */
.hero-sphere__roll{position:absolute;inset:14%;background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));will-change:transform,opacity;}
@media (prefers-reduced-motion:reduce){.hero-sphere{animation:none!important;}}
@keyframes exstFloatA{0%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(22px,-26px) rotate(160deg);}100%{transform:translate(0,0) rotate(360deg);}}
@keyframes exstFloatB{0%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(-28px,20px) rotate(-140deg);}100%{transform:translate(0,0) rotate(-360deg);}}
@keyframes exstFloatC{0%{transform:translate(0,0);}25%{transform:translate(18px,14px);}55%{transform:translate(-16px,-22px);}100%{transform:translate(0,0);}}
@keyframes exstDart{0%,72%{transform:translate(0,0) rotate(0);}82%{transform:translate(60px,-40px) rotate(80deg);}100%{transform:translate(0,0) rotate(0);}}

/* ===== Catalog filter bar (search + type + price toggle + sort + Найти) ===== */
.catalog-lede{margin:10px 0 0;color:var(--ink-soft);font-size:18px;max-width:680px;line-height:1.5;}
.catalog-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;margin:22px 0 26px;box-shadow:0 6px 20px rgba(15,23,42,.04);}
.catalog-bar__search{position:relative;flex:1 1 240px;min-width:200px;}
.catalog-bar__ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex;pointer-events:none;}
.catalog-bar__search input{width:100%;padding:11px 14px 11px 42px;border:1px solid var(--line);border-radius:11px;background:var(--bg);font-size:15px;color:var(--ink);}
.catalog-bar__search input:focus{outline:none;border-color:var(--accent);background:#fff;}
.catalog-bar__select{padding:11px 34px 11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 14px center;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;}
.catalog-bar__toggle{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px;}
.catalog-bar__toggle label{position:relative;cursor:pointer;}
.catalog-bar__toggle input{position:absolute;opacity:0;inset:0;cursor:pointer;}
.catalog-bar__toggle span{display:block;padding:8px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-soft);white-space:nowrap;}
.catalog-bar__toggle label.is-active span,.catalog-bar__toggle input:checked + span{background:var(--accent);color:#fff;}
.catalog-bar__submit{flex:0 0 auto;}
@media (max-width:760px){
	.catalog-bar{gap:10px;}
	.catalog-bar__search{flex:1 1 100%;}
	.catalog-bar__select,.catalog-bar__toggle,.catalog-bar__submit{flex:1 1 auto;}
	.catalog-bar__toggle{justify-content:space-between;}
}

/* ===== Standard submenu (.sub-menu) dropdown — desktop hover + mobile accordion ===== */
/* Submenu styling tokens — change here once; every branch/level inherits.
   Each submenu row sets its OWN background (var below) so a parent's tint can
   never leak into nested parents/children at any depth. */
.main-nav{--submenu-row-bg:#fff;--submenu-nest-bg:#fafbff;--submenu-hover:#f1f5ff;--submenu-indent:14px;--mi-expanded-bg:#f6f8ff;}
.main-nav .menu-item-has-children{position:relative;}
.main-nav .sub-menu{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-hover);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60;}
.main-nav .menu-item-has-children:hover>.sub-menu,.main-nav .menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;}
.main-nav .sub-menu li{margin:0;}
.main-nav .sub-menu a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap;}
.main-nav .sub-menu a:hover{background:var(--bg);color:var(--accent-ink);}
/* Caret on parents */
.main-nav .menu-item-has-children>a::after,.main-nav .has-mega>a::after{content:"▾";margin-left:6px;font-size:11px;opacity:.7;}
/* Nested submenu (2nd level of nesting) flies out to the side on desktop */
.main-nav .sub-menu .sub-menu{top:-9px;left:100%;}
.main-nav .sub-menu .menu-item-has-children>a{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.main-nav .sub-menu .menu-item-has-children>a::after{content:"›";margin-left:0;font-size:15px;}

@media (max-width:1199px){
	/* Mobile: parent row = link + chevron toggle; submenu collapses (animated) */
	.main-nav .menu-item-has-children{position:static;display:flex;flex-wrap:wrap;align-items:center;transition:background .2s ease;}
	.main-nav .menu-item-has-children>a{flex:1;min-width:0;padding:20px 8px 20px clamp(16px,5vw,26px);}
	.main-nav .menu-item-has-children.is-expanded{background:var(--mi-expanded-bg,#f6f8ff);}
	.main-nav .sub-menu{flex-basis:100%;width:100%;position:static;opacity:0;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;min-width:0;padding:0;margin:0;max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1),opacity .25s ease;}
	.main-nav .menu-item-has-children.is-expanded>.sub-menu{max-height:2000px;opacity:1;padding:0;margin:0;border-top:1px solid var(--line);background:var(--submenu-nest-bg,#fafbff);}
	.main-nav .sub-menu a{display:flex;align-items:center;min-height:52px;padding:0 clamp(16px,5vw,26px) 0 calc(clamp(16px,5vw,26px) + var(--submenu-indent,14px));border-radius:0;color:var(--ink-soft);background:var(--submenu-row-bg,#fff);border-bottom:1px solid var(--line);}
	.main-nav .sub-menu .sub-menu a{padding-left:calc(clamp(16px,5vw,26px) + var(--submenu-indent,14px) + 16px);}
	.main-nav .sub-menu li:last-child>a{border-bottom:0;}
	.main-nav .sub-menu a:hover{color:var(--accent-ink);background:var(--submenu-hover,#f1f5ff);}
	.main-nav .menu-item-has-children>a::after,.main-nav .has-mega>a::after{display:none;}
}

/* ===== Mobile submenu chevron toggle ===== */
.submenu-toggle{display:none;}
@media (max-width:1199px){
	.submenu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;margin:14px 16px 14px 8px;background:#f1f5f9;border:0;border-radius:10px;color:var(--ink-soft);cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease;}
	.submenu-toggle:active{transform:scale(.94);}
	.submenu-toggle svg{transition:transform .25s cubic-bezier(.4,0,.2,1);}
	.main-nav .is-expanded>.submenu-toggle{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.32);}
	.main-nav .is-expanded>.submenu-toggle svg{transform:rotate(90deg);}
	/* Nested (2nd-level) parents sit in 52px rows — shrink their toggle to match */
	.main-nav .sub-menu .submenu-toggle{margin:9px 14px 9px 8px;width:30px;height:30px;}
}

/* Lock the page behind the full-height mobile menu */
html.nav-open,body.nav-open{overflow:hidden;}
/* No sideways scrolling can leak from the off-canvas drawer. */
@supports (overflow-x:clip){html,body{overflow-x:clip;}}
/* While the drawer is open the header (which contains both the drawer and its
   dim layer) must sit above the rest of the page, so the dim layer covers the
   content while the menu itself stays on top and clickable. */
body.nav-open .site-header{z-index:99996;}
/* While the mobile menu is open, pin the header to the viewport (overflow:hidden
   on the scroll container otherwise breaks position:sticky and the bar/menu fly off). */
body.nav-open .site-header{position:fixed;top:0;left:0;right:0;box-shadow:none;}
body.nav-open .site-header__inner,
body.nav-open .site-header.is-shrunk .site-header__inner{min-height:68px;}
body.nav-open .site-header .site-brand__logo--main{display:block;}
body.nav-open .site-header .site-brand__logo--small{display:none;}
/* Close bar inside the mobile menu (hidden on desktop). */
@media (min-width:1200px){.main-nav__bar{display:none;}}
/* Mobile menu sits above the sidebar tab; hide the tab while the menu is open. */
body.nav-open .single-aside__tab,body.nav-open .single-aside__overlay{display:none !important;}

/* Uniform height for every top-level menu row — with chevron or without.
   The CTA button item (.menu-item--button) keeps its own compact pill styling. */
@media (max-width:1199px){
	.main-nav-list>li:not(.menu-item--button)>a,
	.main-nav .menu-item-has-children>a,
	.main-nav .has-mega>a{box-sizing:border-box;min-height:62px;display:flex;align-items:center;}
}

/* Footer: 3 columns (left about · middle HTML · right subscribe), stretched */
.footer-top{grid-template-columns:1.2fr 1fr 1.2fr;gap:48px;align-items:start;}
.footer-news,.footer-news form{max-width:none;width:100%;}
.footer-news input[type=email]{max-width:100%;}
.footer-about p{max-width:none!important;}
.footer-mid{min-width:0;}
.footer-mid__code{color:#cbd5e1;font-size:.92rem;line-height:1.6;}
.footer-mid__code a{color:#e2e8f0;}
@media (max-width:980px){
	.footer-top{grid-template-columns:1fr 1fr;gap:36px;}
	.footer-mid{grid-column:1 / -1;order:3;}
}
@media (max-width:720px){
	.footer-top{grid-template-columns:1fr;gap:28px;}
	.footer-mid{grid-column:auto;order:0;}
	.footer-news,.footer-news form{max-width:none;}
}

/* Footer brand: icon + name (works on dark footer) */
.footer-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;}
.footer-brand__logo{height:42px;width:auto;display:block;}
.footer-brand__name{font-weight:800;font-size:20px;color:#fff;letter-spacing:-.02em;}

/* ---- Related posts carousel (end of article) ---- */
.exst-related{margin:48px 0 8px;}
.exst-related__title{font-size:var(--step-2);margin:0 0 18px;color:var(--ink);}
.exst-related__viewport{position:relative;}
.exst-related__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--rel-d,3) - 1)*16px)/var(--rel-d,3));gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
.exst-related__track::-webkit-scrollbar{display:none;}
.exst-related__card{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.exst-related__media{display:block;aspect-ratio:16/9;overflow:hidden;background:#eef1f5;}
.exst-related__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.exst-related__card:hover .exst-related__media img{transform:scale(1.04);}
.exst-related__ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,#eef1f5,#e2e8f0);}
.exst-related__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;}
.exst-related__cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);}
.exst-related__name{font-size:var(--step-0);margin:0;line-height:1.3;}
.exst-related__name a{color:var(--ink);text-decoration:none;}
.exst-related__name a:hover{color:var(--accent);}
.exst-related__arrow{position:absolute;top:42%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 6px 20px rgba(15,23,42,.12);display:flex;align-items:center;justify-content:center;z-index:3;transition:opacity .2s ease,color .2s ease,transform .1s ease;}
.exst-related__arrow--prev{left:10px;}
.exst-related__arrow--next{right:10px;}
.exst-related__arrow:hover{color:var(--accent);}
.exst-related__arrow:active{transform:translateY(-50%) scale(.94);}
.exst-related__arrow.is-off{opacity:.3;pointer-events:none;}
@media (max-width:760px){
	.exst-related__track{grid-auto-columns:calc((100% - (var(--rel-m,1) - 1)*14px)/var(--rel-m,1));gap:14px;}
	.exst-related__arrow{display:none;}
}

/* ---- Scroll to top (desktop only) ---- */
.exst-totop{position:fixed;right:28px;bottom:28px;width:46px;height:46px;border-radius:12px;border:0;background:var(--accent);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(79,70,229,.4);opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease;z-index:90;}
.exst-totop.is-show{opacity:1;transform:translateY(0);}
.exst-totop:hover{filter:brightness(1.07);}
@media (min-width:861px){.exst-totop{display:flex;}}

/* Subscribe result — centered dimmed overlay (visible regardless of scroll) */
.exst-subnote{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);padding:20px;animation:exst-subnote-in .2s ease;}
@keyframes exst-subnote-in{from{opacity:0}to{opacity:1}}
.exst-subnote__box{background:#fff;border-radius:16px;max-width:380px;width:100%;padding:30px 26px;text-align:center;box-shadow:0 24px 70px rgba(15,23,42,.4);}
.exst-subnote__icon{font-size:46px;line-height:1;margin-bottom:12px;}
.exst-subnote__text{margin:0 0 22px;font-size:16px;color:var(--ink,#0f172a);line-height:1.5;}
.exst-subnote__btn{border:0;background:var(--accent,#4f46e5);color:#fff;font-weight:600;font-size:15px;padding:11px 26px;border-radius:11px;cursor:pointer;}
.exst-subnote__btn:hover{filter:brightness(1.06);}

/* Blog archive "show more" button */
.blog-loadmore{display:flex;justify-content:center;}
.exstore-loadmore{appearance:none;border:1px solid var(--line,#e6e9ef);background:#fff;color:var(--ink,#0f172a);font-size:15px;font-weight:600;padding:13px 30px;border-radius:999px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease;box-shadow:0 2px 10px rgba(15,23,42,.05);}
.exstore-loadmore:hover{background:var(--accent,#4f46e5);border-color:var(--accent,#4f46e5);color:#fff;}
.exstore-loadmore:active{transform:translateY(1px);}
.exstore-loadmore:disabled{opacity:.6;cursor:default;}
@media (max-width:560px){.exstore-loadmore{width:100%;max-width:340px;}}

/* Sidebar widget: no outer frame (the widget area provides one), tighter spacing */
.exst-disc-widget .exst-disc__link{padding:9px 2px;}
.exst-disc-widget .exst-disc__item{border-bottom:1px solid var(--line,#eef1f5);}
.exst-disc-widget .exst-disc__text{font-size:13px;}
/* Recent discussions (widget / shortcode / under-rating block) */
.exst-disc-box{border:1px solid var(--line,#e6e9ef);border-radius:14px;padding:6px 4px;background:#fff;}
.exst-disc-box__title{margin:10px 14px 4px;font-size:16px;color:var(--ink,#0f172a);}
.exst-disc{list-style:none;margin:0;padding:0;}
.exst-disc__item{border-bottom:1px solid var(--line,#eef1f5);}
.exst-disc__item:last-child{border-bottom:0;}
.exst-disc__link{display:block;padding:11px 14px;text-decoration:none;color:inherit;transition:background .12s ease;}
.exst-disc__link:hover{background:#f7f9fc;}
.exst-disc__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:3px;}
.exst-disc__user{font-weight:700;font-size:13.5px;color:var(--accent,#4f46e5);}
.exst-disc__date{font-size:11px;color:var(--soft,#94a3b8);white-space:nowrap;}
.exst-disc__text{display:block;font-size:13.5px;color:#475569;line-height:1.45;}
.exst-disc__post{display:block;font-size:11.5px;color:var(--soft,#94a3b8);margin-top:3px;}
/* Framed "last discussion" under a product rating */
.exst-rating-disc{margin-top:16px;}
.exst-rating-disc__title{font-size:14px;font-weight:700;color:var(--ink,#0f172a);margin:0 0 8px;}
@media (max-width:560px){
  .exst-disc__link{padding:12px;}
  .exst-disc-box__title{margin:10px 12px 4px;}
}

/* Recent blog discussions — slow seamless "newspaper" ticker (homepage, optional) */
.exst-ticker{overflow-x:auto;overflow-y:hidden;position:relative;padding:4px 0 8px;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.exst-ticker::-webkit-scrollbar{display:none;height:0;}
.exst-ticker.is-grabbing{cursor:grabbing;}
.exst-ticker__track{display:flex;flex-wrap:nowrap;width:max-content;animation-name:exst-ticker-scroll;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform;}
.exst-ticker.exst-ticker--js .exst-ticker__track{animation:none !important;}
.exst-ticker:hover .exst-ticker__track{animation-play-state:paused;}
.exst-ticker__card{position:relative;flex:0 0 320px;width:320px;box-sizing:border-box;margin-right:16px;border:1px solid var(--line,#e6e9ef);border-radius:14px;padding:18px 20px;background:#fff;user-select:none;}
/* The whole card is the click target — hitting the little arrow link on a
   moving ticker was a game of darts. */
.exst-ticker__hit{position:absolute;inset:0;z-index:1;border-radius:14px;}
.exst-ticker__card:hover{border-color:var(--accent,#4f46e5);}
.exst-ticker__card a{-webkit-user-drag:none;}
.exst-ticker__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.exst-ticker__name{font-weight:800;color:var(--ink,#0f172a);font-size:14px;}
.exst-ticker__date{font-size:12px;color:var(--soft,#94a3b8);white-space:nowrap;}
.exst-ticker__text{color:#334155;font-size:14px;line-height:1.55;margin:6px 0 10px;}
.exst-ticker__prod{display:inline-block;font-size:13px;color:var(--accent,#4f46e5);text-decoration:none;font-weight:600;}
@keyframes exst-ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:560px){.exst-ticker__card{flex-basis:calc(100vw - 64px);width:calc(100vw - 64px);}}
@media (prefers-reduced-motion:reduce){.exst-ticker__track{animation:none;}}

/* 404 — full-height, on-brand */
.error-404{display:flex;align-items:center;justify-content:center;text-align:center;min-height:70vh;padding:64px 20px;}
.error-404__inner{max-width:600px;width:100%;}
.error-404__code{font-family:var(--font-sans);font-weight:900;line-height:.9;letter-spacing:-.04em;font-size:clamp(110px,26vw,230px);background:linear-gradient(135deg,var(--accent,#4f46e5),#8b5cf6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin:0 0 6px;}
.error-404__title{font-size:clamp(1.5rem,4vw,2.1rem);margin:0 0 12px;}
.error-404__text{color:var(--ink-soft,#64748b);font-size:16px;line-height:1.6;margin:0 auto 26px;max-width:460px;}
.error-404__btn{display:inline-block;}
@media (max-width:560px){.error-404{min-height:66vh;padding:48px 18px;}}
.exstore-comments__subscribe{margin:0 0 14px;font-size:14px;color:var(--muted);}
.exstore-comments__subscribe label{display:flex;align-items:flex-start;gap:8px;cursor:pointer;}
.exstore-ideas{margin-bottom:100px;}

/* ---------- Idea boxes (шкатулки) ---------- */
.exst-boxes{margin:0 0 40px;}
.exst-boxes__head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.exst-boxes__title{margin:0;font-size:1.25rem;}

/* Search over the archive only — never the rest of the site. */
.exst-ideasearch{position:relative;flex:1 1 260px;max-width:360px;}
.exst-ideasearch__input{width:100%;padding:9px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;}
.exst-ideasearch__input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.exst-ideasearch__drop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.12);max-height:340px;overflow-y:auto;}
.exst-ideasearch__item{display:block;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;}
.exst-ideasearch__item:last-child{border-bottom:0;}
.exst-ideasearch__item:hover,.exst-ideasearch__item:focus{background:#f8fafc;}
.exst-ideasearch__text{display:block;font-size:14px;line-height:1.4;}
.exst-ideasearch__meta{display:block;margin-top:3px;font-size:12px;color:var(--muted);}
.exst-ideasearch__empty{padding:12px 14px;font-size:14px;color:var(--muted);}

/* Carousel rail: swipe on a phone, arrows on a desktop.
   The arrows FLOAT OVER the ends of the track instead of sitting beside it, so
   the boxes get the full content width — the same width as a comment below. */
.exst-boxes__rail{position:relative;}
.exst-boxes__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px;-ms-overflow-style:none;scrollbar-width:none;}
.exst-boxes__track::-webkit-scrollbar{display:none;}
.exst-boxes__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:50%;font-size:20px;line-height:1;color:var(--ink);cursor:pointer;box-shadow:0 2px 10px rgba(15,23,42,.10);}
.exst-boxes__nav--prev{left:-6px;}
.exst-boxes__nav--next{right:-6px;}
.exst-boxes__nav:hover{border-color:var(--accent);color:var(--accent-ink);}
.exst-boxes__nav[disabled]{opacity:0;pointer-events:none;}

/* The box itself — square-ish card with the brand's purple frame. */
.exst-box{flex:0 0 calc(50% - 7px);box-sizing:border-box;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-height:120px;padding:16px 18px;border:2px solid var(--accent);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease;}
.exst-box:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(79,70,229,.16);}
.exst-box__platform{font-weight:800;font-size:15px;color:var(--accent-ink);}
.exst-box__period{font-size:14px;color:var(--muted);text-transform:capitalize;}
.exst-box__count{margin-top:auto;font-weight:700;font-size:20px;}

/* Year view: plain grid, no carousel needed. */
.exst-boxes__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:28px;}
.exst-boxes__grid .exst-box{flex:none;}

.exst-boxes__years{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;}
.exst-boxes__yearslabel{font-size:14px;color:var(--muted);}
.exst-boxes__year{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:14px;text-decoration:none;color:var(--ink);}
.exst-boxes__year:hover{border-color:var(--accent);color:var(--accent-ink);}

.exst-boxes__note{margin:0 0 24px;padding:12px 16px;background:#f8fafc;border-left:3px solid var(--accent);border-radius:8px;font-size:14px;color:var(--muted);}
.exst-boxes__back{margin-top:32px;}

/* Required platform radio on the idea form. */
.exst-ideabox__pick{margin:0 0 24px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;}
.exst-ideabox__pick legend{padding:0 6px;margin:0;font-weight:600;font-size:14px;}
.exst-ideabox__radio{display:inline-flex;align-items:center;gap:6px;margin:10px 18px 0 0;font-size:15px;cursor:pointer;}

@media (max-width:640px){
	.exst-box{flex:0 0 78%;}
	.exst-boxes__nav{display:none;}
	.exst-boxes__head{flex-direction:column;align-items:stretch;}
	.exst-ideasearch{max-width:none;}
}