/* Start:/local/templates/xcore_front/css/tokens.xfmin-1-31519.css?17928465007776*/
@font-face {
font-family: 'XCore Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/xcore_front/css/../fonts/xcore-mono-Regular.woff2?v=20260622) format('woff2');
}
@font-face {
font-family: 'XCore Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/xcore_front/css/../fonts/xcore-mono-Medium.woff2?v=20260622) format('woff2');
}
@font-face {
font-family: 'XCore Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/xcore_front/css/../fonts/xcore-mono-SemiBold.woff2?v=20260622) format('woff2');
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(/local/templates/xcore_front/css/../fonts/onest/onest-cyrillic-ext.woff2?v=20261021) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(/local/templates/xcore_front/css/../fonts/onest/onest-cyrillic.woff2?v=20261021) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(/local/templates/xcore_front/css/../fonts/onest/onest-math.woff2?v=20261021) format('woff2');
unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(/local/templates/xcore_front/css/../fonts/onest/onest-symbols.woff2?v=20261021) format('woff2');
unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(/local/templates/xcore_front/css/../fonts/onest/onest-vietnamese.woff2?v=20261021) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(/local/templates/xcore_front/css/../fonts/onest/onest-latin-ext.woff2?v=20261021) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(/local/templates/xcore_front/css/../fonts/onest/onest-latin.woff2?v=20261021) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--accent-h: 268;
--radius: 14px;
--density: 1;
--xf-motion: 1;
--font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-mono: 'XCore Mono', ui-monospace, Menlo, monospace;
--container: 1440px;
--container-pad: 40px;
--xf-stick-top: calc(var(--xf-header-h, 154px) + 16px);
}
@media (max-width: 767px) {
:root { --container-pad: 16px; }
}
@media (prefers-reduced-motion: reduce) {
:root { --xf-motion: 0; }
}
html,
html[data-theme="light"] {
--bg: oklch(0.985 0.003 285);
--bg-2: oklch(0.965 0.005 285);
--surface: oklch(1 0 0);
--surface-2: oklch(0.965 0.005 285);
--surface-3: oklch(0.93 0.008 285);
--line: oklch(0.86 0.01 285);
--line-soft: oklch(0.91 0.008 285 / 0.9);
--text: oklch(0.17 0.015 285);
--text-2: oklch(0.38 0.012 285);
--text-3: oklch(0.535 0.01 285);
--accent: oklch(0.55 0.23 var(--accent-h));
--accent-2: oklch(0.50 0.25 var(--accent-h));
--accent-3: oklch(0.45 0.25 var(--accent-h));
--accent-dim: oklch(0.55 0.23 var(--accent-h) / 0.10);
--accent-dim-hover: oklch(0.55 0.23 var(--accent-h) / 0.18);
--accent-line: oklch(0.55 0.23 var(--accent-h) / 0.30);
--link-line: oklch(0.68 0.22 var(--accent-h) / 0.3);
--success: oklch(0.52 0.17 155);
--warning: oklch(0.54 0.12 65);
--danger: oklch(0.58 0.22 25);
--danger-ink: oklch(0.52 0.20 25);
--success-ink: oklch(0.49 0.12 155);
--header-bg: oklch(1 0 0 / 0.82);
--shadow-card: 0 16px 40px -12px oklch(0.3 0.05 285 / 0.14);
}
html[data-theme="dark"] {
--bg: oklch(0.135 0.008 292);
--bg-2: oklch(0.115 0.006 292);
--surface: oklch(0.172 0.009 292);
--surface-2: oklch(0.200 0.010 292);
--surface-3: oklch(0.245 0.011 292);
--line: oklch(1 0 0 / 0.12);
--line-soft: oklch(1 0 0 / 0.075);
--text: oklch(0.975 0.003 292);
--text-2: oklch(0.80 0.008 292);
--text-3: oklch(0.68 0.008 292);
--accent: oklch(0.565 0.245 296);
--accent-2: oklch(0.80 0.11 300);
--accent-3: oklch(0.515 0.25 296);
--accent-dim: oklch(0.565 0.245 296 / 0.16);
--accent-dim-hover: color-mix(in srgb, var(--accent) 28%, transparent);
--accent-line: oklch(0.66 0.20 300 / 0.5);
--link-line: var(--accent-line);
--success: oklch(0.76 0.16 155);
--warning: oklch(0.80 0.15 70);
--danger: oklch(0.72 0.20 25);
--danger-ink: var(--danger);
--success-ink: var(--success);
--nx-core: oklch(0.93 0.065 338);
--nx-glow: 0 0 10px oklch(0.66 0.27 336 / 0.5), 0 0 30px oklch(0.60 0.27 332 / 0.3);
--nx-edge: inset 0 1px 0 oklch(1 0 0 / 0.07);
--nx-key: inset 0 1px 0 oklch(1 0 0 / 0.22);
--nx-lightbox:
radial-gradient(130% 100% at 50% 40%, oklch(1 0 0 / 0) 50%, oklch(0.84 0.025 292 / 0.5) 100%),
oklch(0.945 0.008 292);
--header-bg: oklch(0.135 0.008 292 / 0.92);
--shadow-card: 0 18px 44px -18px oklch(0 0 0 / 0.7);
}
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
/* End */
/* Start:/local/templates/xcore_front/css/base.xfmin-1-18012.css?17928464815638*/
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: light; overflow-x: clip; }
html[data-theme="dark"] { color-scheme: dark; caret-color: var(--accent-2); }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--text);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
overflow-x: clip;
padding-bottom: var(--xf-focus-room, 0px);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
.mono { font-family: var(--font-mono); }
.xf-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-2);
}
html[data-theme="dark"] body { background: transparent; }
html[data-theme="dark"] body::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1400px;
z-index: -1;
pointer-events: none;
background: radial-gradient(42% 34% at 50% -4%, oklch(0.40 0.06 292 / 0.35), transparent 100%);
}
html[data-theme="dark"]:has(.xf-pitch) body::before { background: none; }
html[data-theme="dark"] body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
@media (hover: hover) {
*::-webkit-scrollbar-thumb:hover { background: var(--line); }
}
#xf-toast-stack {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
pointer-events: none;
max-width: calc(100vw - 32px);
}
.xf-toast {
margin-top: 10px;
padding: 12px 18px;
border-radius: 12px;
background: var(--surface);
color: var(--text);
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-card);
font-size: 14px;
font-weight: 500;
opacity: 0;
transform: translateY(calc(12px * var(--xf-motion, 1)));
transition: opacity .25s, transform .25s, max-height .28s ease, margin-top .28s ease, padding-top .28s ease, padding-bottom .28s ease;
pointer-events: none;
max-width: 360px;
}
.xf-toast.is-shown { opacity: 1; transform: translateY(0); }
.xf-toast.is-leaving {
opacity: 0;
transform: translateY(calc(12px * var(--xf-motion, 1)));
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
min-height: 0;
overflow: hidden;
pointer-events: none;
}
.xf-toast--error {
background: oklch(0.32 0.08 25);
color: #fff;
border-color: transparent;
}
.xf-toast--action {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 8px 10px 18px;
pointer-events: auto;
}
.xf-toast__msg {
flex: 1;
min-width: 0;
}
.xf-toast__action {
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--accent-2);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
min-height: 36px;
transition: background .15s, color .15s, opacity .18s;
}
@media (hover: hover) {
.xf-toast__action:hover { background: var(--accent-dim); }
}
.xf-toast__action:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.xf-toast__action--primary {
background: var(--accent);
color: #fff;
}
.xf-toast--two {
flex-wrap: wrap;
row-gap: 4px;
}
.xf-toast--two .xf-toast__msg { flex-basis: 100%; }
.xf-toast--two .xf-toast__action--primary { margin-left: auto; }
@media (max-width: 767px) {
.xf-toast__action { min-height: 44px; }
}
@media (hover: hover) {
.xf-toast__action--primary:hover { background: var(--accent-2); color: #fff; }
html[data-theme="dark"] .xf-toast__action--primary:hover { background: var(--accent-3); }
}
body.xf-bottombar-up #xf-toast-stack {
bottom: calc(var(--xf-bottombar-h, 84px) + 12px);
}
body.xf-cookie-up #xf-toast-stack {
bottom: calc(var(--xf-cookie-h, 72px) + 16px);
}
body.xf-cookie-up.xf-bottombar-stacked #xf-toast-stack {
bottom: calc(var(--xf-cookie-h, 120px) + var(--xf-bottombar-h, 84px) + 12px);
}
@media (max-width: 600px) {
#xf-toast-stack {
right: 12px;
left: 12px;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.xf-toast { max-width: none; }
body.xf-cookie-up #xf-toast-stack {
bottom: calc(var(--xf-cookie-h, 120px) + 16px);
}
}
@media (max-width: 767px) {
body.xf-bottombar-up.xf-bottombar-ahead:has(.xf-pdp) #xf-toast-stack {
top: var(--xf-header-h, 118px);
bottom: auto;
flex-direction: column;
}
body.xf-bottombar-ahead:has(.xf-pdp) .xf-toast { transform: translateY(calc(-12px * var(--xf-motion, 1))); }
body.xf-bottombar-ahead:has(.xf-pdp) .xf-toast.is-shown { transform: translateY(0); }
body.xf-bottombar-ahead:has(.xf-pdp) .xf-toast.is-leaving { transform: translateY(calc(-12px * var(--xf-motion, 1))); }
}
.xf-lazyfade { opacity: 0; }
.xf-lazyfade.is-loaded { opacity: 1; animation: xf-lazyfade-in .25s ease-out; }
@keyframes xf-lazyfade-in { from { opacity: 0; } to { opacity: 1; } }
/* End */
/* Start:/local/templates/xcore_front/css/layout.xfmin-1-756.css?1792831401541*/
.wrapper1 {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
}
#panel { position: relative; z-index: 1000; }
#content {
flex: 1;
display: flex;
flex-direction: column;
}
.wrapper_inner {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
}
.middle { padding: 32px 0; }
.middle.has-left {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: start;
}
.middle.has-right {
display: grid;
grid-template-columns: 1fr 280px;
gap: 32px;
align-items: start;
}
/* End */
/* Start:/local/templates/xcore_front/css/ui.xfmin-1-19963.css?17928314017825*/
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.xf-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
background: var(--accent);
color: #fff;
padding: 12px 20px;
border-radius: 0 0 10px 0;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: none;
}
.xf-skip:focus,
.xf-skip:focus-visible {
left: 0;
outline: 2px solid var(--accent);
outline-offset: -4px;
}
.xf-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2px;
font-family: var(--font-sans);
background: var(--surface-2);
color: var(--text-2);
border: 1px solid var(--line-soft);
white-space: nowrap;
}
.xf-pill--mono {
font-family: var(--font-mono);
text-transform: uppercase;
}
.xf-pill--accent {
background: var(--accent-dim);
color: var(--accent-2);
border-color: var(--accent-line);
}
.xf-pill--success {
background: oklch(0.76 0.16 155 / 0.14);
color: var(--success-ink);
border-color: oklch(0.76 0.16 155 / 0.35);
}
.xf-pill--danger {
background: oklch(0.72 0.2 25 / 0.14);
color: var(--danger-ink);
border-color: oklch(0.72 0.2 25 / 0.35);
}
html[data-theme="dark"] .xf-pill--success { color: oklch(0.84 0.14 155); }
html[data-theme="dark"] .xf-pill--danger { color: oklch(0.82 0.14 25); }
.xf-pill--ghost {
background: transparent;
color: var(--text-3);
}
.xf-price {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums lining-nums;
}
.xf-price__val {
display: inline-block;
font-size: clamp(16px, 9cqi, 24px);
font-weight: 600;
color: var(--text);
letter-spacing: -0.5px;
line-height: 1;
white-space: nowrap;
}
.xf-price__cur {
color: var(--text-3);
font-size: 0.65em;
font-weight: 500;
margin-left: 4px;
}
.xf-price__was-line {
display: flex;
align-items: baseline;
margin-top: 3px;
}
.xf-price__was {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums lining-nums;
font-size: 11px;
font-weight: 500;
color: var(--text-2);
line-height: 1.1;
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: currentColor;
}
.xf-price__val--request {
font-size: 18px;
font-weight: 500;
color: var(--text-3);
letter-spacing: -0.2px;
}
.xf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
border-radius: 10px;
border: 1px solid transparent;
background: var(--accent);
background-origin: border-box;
background-clip: border-box;
-webkit-appearance: none;
appearance: none;
color: #fff;
box-shadow: 0 6px 20px -8px var(--accent), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
white-space: nowrap;
cursor: pointer;
}
@media (hover: hover) {
.xf-btn:hover { transform: translateY(calc(-1px * var(--xf-motion, 1))); }
}
.xf-btn--sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; gap: 6px; }
.xf-btn--lg { padding: 14px 22px; font-size: 15px; border-radius: 12px; gap: 10px; }
.xf-btn--ghost {
background: var(--surface-2);
color: var(--text);
border-color: var(--line-soft);
box-shadow: none;
}
.xf-btn--outline {
background: transparent;
color: var(--text);
border-color: var(--line);
box-shadow: none;
}
.xf-btn--subtle {
background: var(--surface);
color: var(--text-2);
box-shadow: none;
}
.xf-btn--link {
background: transparent;
color: var(--accent-2);
box-shadow: none;
padding: 0;
}
.xf-btn--icon {
padding: 0;
width: 36px;
height: 36px;
}
.xf-btn--icon.xf-btn--sm { width: 30px; height: 30px; }
html[data-theme="dark"] .xf-btn { box-shadow: none; }
html[data-theme="dark"] .xf-btn:where(:not(.xf-btn--ghost, .xf-btn--outline, .xf-btn--subtle, .xf-btn--link)) {
box-shadow: var(--nx-key);
}
@media (hover: hover) {
html[data-theme="dark"] .xf-btn:where(:not(.xf-btn--ghost, .xf-btn--outline, .xf-btn--subtle, .xf-btn--link)):hover {
background: var(--accent-3);
}
}
html[data-theme="dark"] .xf-btn--ghost,
html[data-theme="dark"] .xf-btn--outline {
background: transparent;
border-color: var(--line);
}
.xf-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.xf-section-head__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-2);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.xf-section-head__eyebrow::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--accent-2);
}
.xf-section-head__title {
margin: 0;
font-size: 38px;
font-weight: 600;
letter-spacing: -1.2px;
line-height: 1.05;
}
.xf-section-head__link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-2);
padding-bottom: 8px;
transition: color .15s;
}
@media (hover: hover) {
.xf-section-head__link:hover { color: var(--text); }
}
html[data-theme="dark"] .xf-section-head__eyebrow { display: none; }
.xf-floating-bot {
position: fixed;
right: 24px;
bottom: 24px;
display: inline-flex;
align-items: center;
gap: 10px;
height: 56px;
padding: 0 16px;
border-radius: 28px;
background: var(--accent);
color: #fff;
text-decoration: none;
box-shadow: 0 8px 24px -8px var(--accent), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
z-index: 100;
transition: transform .2s, box-shadow .2s, bottom .3s ease, opacity .2s ease, visibility .2s;
animation: xf-bot-in .45s ease;
}
.xf-floating-bot__icon { display: inline-flex; flex: 0 0 auto; transform: translateY(1.5px); }
.xf-floating-bot__text {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.15;
min-width: 0;
}
.xf-floating-bot__title { font-size: 14px; font-weight: 600; white-space: nowrap; }
.xf-floating-bot__sub {
font-size: 11px;
white-space: nowrap;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height .2s ease, opacity .2s ease;
}
.xf-floating-bot:focus-visible .xf-floating-bot__sub { max-height: 1.2em; opacity: .85; }
@media (hover: hover) {
.xf-floating-bot:hover {
transform: translateY(calc(-2px * var(--xf-motion, 1)));
box-shadow: 0 12px 28px -8px var(--accent), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
}
.xf-floating-bot:hover .xf-floating-bot__sub { max-height: 1.2em; opacity: .85; }
}
.xf-floating-bot:active { transform: translateY(0) scale(calc(1 - 0.03 * var(--xf-motion, 1))); }
html[data-theme="dark"] .xf-floating-bot { box-shadow: 0 10px 28px -12px oklch(0 0 0 / 0.8); }
body.xf-cookie-up .xf-floating-bot { bottom: calc(var(--xf-cookie-h, 72px) + 24px); }
@keyframes xf-bot-in {
from { opacity: 0; transform: translateY(10px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.xf-floating-bot { animation: none; transition: none; }
.xf-floating-bot:hover { transform: none; }
.xf-floating-bot__sub { transition: none; }
}
@media (max-width: 640px) {
.xf-floating-bot {
width: 52px;
height: 52px;
padding: 0;
gap: 0;
border-radius: 50%;
justify-content: center;
right: 16px;
bottom: 16px;
}
.xf-floating-bot__text { display: none; }
body.xf-cookie-up .xf-floating-bot { bottom: calc(var(--xf-cookie-h, 120px) + 16px); }
body.xf-bottombar-up .xf-floating-bot {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px) scale(0.94);
}
}
body.page-configurator .xf-floating-bot { display: none; }
.xf-admin-pencil {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border: 1px dashed var(--accent-line);
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
color: var(--accent-2);
text-decoration: none;
white-space: nowrap;
transition: background-color .15s ease;
}
.xf-admin-pencil:hover { background: var(--accent-dim); }
/* End */
/* Start:/local/templates/xcore_front/css/header.xfmin-1-58560.css?179284134523762*/
.xf-header {
position: sticky;
top: 0;
z-index: 50;
}
.xf-header::before {
content: '';
position: absolute;
inset: 0 0 -1px;
z-index: -1;
background: var(--header-bg);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid var(--line-soft);
transform: translateZ(0);
}
#content { scroll-margin-top: calc(var(--xf-header-h, 154px) + 8px); }
@media (max-width: 767px) {
#content { scroll-margin-top: calc(var(--xf-header-h, 118px) + 8px); }
}
.xf-header__top { border-bottom: 1px solid var(--line-soft); }
.xf-header__row {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
align-items: center;
}
.xf-header__row--top {
height: 38px;
justify-content: space-between;
font-size: 12.5px;
color: var(--text-3);
}
.xf-header__row--top .xf-delivery,
.xf-header__row--top .xf-phone {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-2);
}
.xf-header__row--top .xf-phone {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
}
.xf-phone-wrap { position: relative; }
.xf-header__row--top button.xf-phone {
background: none;
border: 0;
padding: 0;
cursor: pointer;
font-size: inherit;
}
.xf-header__row--top button.xf-phone:hover { color: var(--text); }
.xf-phone__chevron {
display: inline-flex;
color: var(--text-3);
transition: transform 0.15s ease-out;
}
.xf-phone-wrap.is-open .xf-phone__chevron { transform: rotate(180deg); }
.xf-phone-pop {
position: absolute;
top: calc(100% + 10px);
right: -8px;
z-index: 60;
min-width: 358px;
padding: 6px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 12px;
box-shadow: var(--shadow-card);
}
.xf-phone-pop__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 9px 12px;
border-radius: 8px;
text-decoration: none;
}
.xf-phone-pop__row:hover { background: var(--surface-2); }
.xf-phone-pop__num {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-size: 13.5px;
font-weight: 500;
color: var(--text);
}
.xf-phone-pop__num--tg {
display: inline-flex;
align-items: center;
gap: 7px;
}
.xf-phone-pop__note {
font-size: 12px;
color: var(--text-3);
white-space: nowrap;
}
.xf-phone-pop__meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding: 9px 12px 7px;
border-top: 1px solid var(--line-soft);
font-size: 12px;
color: var(--text-2);
}
.xf-phone-pop__meta svg { flex: 0 0 auto; color: var(--text-3); }
.xf-phone-pop__all {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px 8px;
font-size: 12.5px;
color: var(--accent-2);
text-decoration: none;
}
.xf-phone-pop__all:hover { color: var(--accent-3); }
html[data-theme="dark"] .xf-phone-pop__all:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
.xf-phone__chevron { transition: none; }
}
.xf-header__top-right {
display: inline-flex;
align-items: center;
gap: 16px;
}
.xf-header__top-right .xf-divider {
width: 1px;
height: 14px;
background: var(--line);
}
.xf-header__row--main {
height: 72px;
gap: 28px;
}
.xf-logo {
display: inline-flex;
align-items: center;
gap: 4px;
line-height: 1;
color: var(--text);
flex: 0 0 auto;
}
.xf-logo > svg {
margin-right: -9px;
}
.xf-logo__dash {
width: 10px;
height: 4px;
border-radius: 2px;
background: currentColor;
flex: 0 0 auto;
}
.xf-logo__text {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.6px;
font-family: var(--font-sans);
transform: translateY(-1px);
}
.xf-configurator-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 14px 9px 7px;
border-radius: 12px;
background: transparent;
border: 1px solid var(--accent-line);
color: var(--text);
font-size: 13px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transition: background .18s, border-color .18s, transform .18s;
flex: 0 0 auto;
}
@media (hover: hover) {
.xf-configurator-pill:hover {
background: var(--accent-dim);
border-color: var(--accent);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
}
.xf-configurator-pill.is-active {
background: var(--accent-dim);
border-color: var(--accent);
}
html[data-theme="dark"] .xf-configurator-pill {
border: 1px solid var(--line);
background: transparent;
}
html[data-theme="dark"] .xf-configurator-pill.is-active {
background: var(--accent-dim);
border-color: var(--accent);
}
.xf-configurator-pill__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--accent-dim);
color: var(--accent);
flex: 0 0 auto;
}
.xf-configurator-pill__label {
display: inline-block;
}
.xf-search {
flex: 1;
position: relative;
max-width: 560px;
}
.xf-search__icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-3);
pointer-events: none;
display: inline-flex;
}
.xf-search input {
width: 100%;
height: 46px;
padding: 0 14px 0 40px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 12px;
font-size: 13.5px;
color: var(--text);
transition: border-color .15s;
text-overflow: ellipsis;
}
.xf-search input::placeholder { color: var(--text-3); }
.xf-search input:focus { border-color: var(--accent-line); }
html[data-theme="dark"] .xf-search input {
background: oklch(1 0 0 / 0.04);
border-color: var(--line);
}
html[data-theme="dark"] .xf-search input:focus { border-color: var(--accent-2); }
.xf-header__actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
.xf-iconbtn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 10px;
color: var(--text-2);
transition: all .15s;
}
@media (hover: hover) {
.xf-iconbtn:hover {
background: var(--surface-2);
color: var(--text);
}
}
.xf-iconbtn__count {
position: absolute;
top: 4px;
right: 4px;
background: var(--accent);
color: #fff;
font-size: 9.5px;
font-weight: 600;
font-family: var(--font-mono);
min-width: 16px;
height: 16px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
}
.xf-iconbtn[data-xf-wish-icon] .xf-iconbtn__count { background: #e11d48; }
.xf-account-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 5px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
color: var(--text);
font-size: 13px;
transition: background .15s, border-color .15s;
max-width: 180px;
}
@media (hover: hover) {
.xf-account-pill:hover {
background: var(--accent-dim);
border-color: var(--accent-line);
}
}
.xf-account-pill__avatar {
flex: 0 0 26px;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-weight: 600;
font-size: 12px;
letter-spacing: -0.3px;
}
.xf-account-pill__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 130px;
line-height: 1;
}
.xf-header__actions .xf-divider {
width: 1px;
height: 28px;
background: var(--line);
margin: 0 6px;
}
.xf-cart-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 14px 11px 12px;
border-radius: 10px;
background: var(--accent);
color: #fff;
font-size: 13px;
font-weight: 500;
box-shadow: 0 6px 18px -8px var(--accent);
transition: transform .15s, box-shadow .15s;
}
@media (hover: hover) {
.xf-cart-btn:hover { transform: translateY(calc(-1px * var(--xf-motion, 1))); }
}
html[data-theme="dark"] .xf-cart-btn { box-shadow: var(--nx-key); }
.xf-cart-btn__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: #fff;
color: var(--accent-3);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
font-family: var(--font-mono);
line-height: 1;
}
.xf-header__nav { border-top: 1px solid var(--line-soft); }
.xf-header__row--nav {
height: 42px;
gap: 2px;
padding-inline: calc(var(--container-pad) - 12px);
}
.xf-catalog-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 10px;
color: var(--text-2);
font-size: 13px;
font-weight: 500;
margin-right: 4px;
transition: color .15s, background .15s;
white-space: nowrap;
}
@media (hover: hover) {
.xf-catalog-btn:hover { background: var(--surface); color: var(--text); }
}
.xf-nav-item {
display: inline-flex;
align-items: center;
padding: 4px 10px;
color: var(--text-3);
font-size: 11.5px;
letter-spacing: 0.1px;
transition: color .15s;
white-space: nowrap;
}
@media (hover: hover) {
.xf-nav-item:hover { color: var(--accent-2); }
}
.xf-catalog-btn.is-open {
color: var(--accent-2);
}
.xf-mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-2);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
box-shadow: var(--shadow-card);
z-index: 45;
max-height: min(560px, 70vh);
overflow: hidden;
}
.xf-mega__inner {
max-width: var(--container);
margin: 0 auto;
padding: 18px var(--container-pad) 22px;
}
.xf-mega__layout {
display: grid;
grid-template-columns: 272px 1fr;
gap: 28px;
min-height: 380px;
}
.xf-mega__nav {
list-style: none;
margin: 0;
padding: 0;
border-right: 1px solid var(--line-soft);
padding-right: 12px;
max-height: 500px;
overflow-y: auto;
}
.xf-mega__nav-item {
border-radius: 10px;
transition: background .12s;
}
.xf-mega__nav-item.is-active {
background: var(--surface);
}
@media (hover: hover) {
.xf-mega__nav-item:hover {
background: var(--surface);
}
}
.xf-mega__nav-item.is-active .xf-mega__nav-name { color: var(--text); font-weight: 500; }
.xf-mega__nav-item.is-active .xf-mega__nav-arrow { color: var(--accent-2); opacity: 1; }
.xf-mega__nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
color: var(--text-2);
font-size: 13.5px;
line-height: 1.3;
}
@media (hover: hover) {
.xf-mega__nav-link:hover { color: var(--text); }
}
.xf-mega__nav-icon {
flex: 0 0 22px;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-3);
}
.xf-mega__nav-item.is-active .xf-mega__nav-icon { color: var(--accent-2); }
@media (hover: hover) {
.xf-mega__nav-item:hover .xf-mega__nav-icon { color: var(--accent-2); }
}
.xf-mega__nav-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.xf-mega__nav-arrow {
flex: 0 0 auto;
display: inline-flex;
color: var(--text-3);
opacity: 0;
transition: opacity .12s, color .12s;
}
@media (hover: hover) {
.xf-mega__nav-item:hover .xf-mega__nav-arrow { opacity: .7; }
}
.xf-mega__panes {
position: relative;
min-width: 0;
padding: 4px 4px 4px 8px;
}
.xf-mega__pane { display: none; }
.xf-mega__pane.is-active { display: block; }
.xf-mega__pane-head {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
color: var(--text);
transition: color .15s;
}
@media (hover: hover) {
.xf-mega__pane-head:hover { color: var(--accent-2); }
}
.xf-mega__pane-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.3px;
}
.xf-mega__pane-all {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-family: var(--font-mono, inherit);
}
.xf-mega__pane-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 24px;
}
.xf-mega__pane-list a {
display: block;
padding: 6px 0;
font-size: 13.5px;
color: var(--text-2);
line-height: 1.35;
transition: color .12s;
}
@media (hover: hover) {
.xf-mega__pane-list a:hover { color: var(--accent-2); }
}
@media (max-width: 1100px) {
.xf-mega__layout { grid-template-columns: 240px 1fr; gap: 20px; }
.xf-mega__pane-list { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
.xf-mega { display: none; }
}
@media (min-width: 768px) and (max-width: 860px) {
.xf-header__row--nav {
overflow-x: auto;
scrollbar-width: none;
scroll-padding-inline: calc(var(--container-pad) - 12px);
mask-image: linear-gradient(to right, #000 calc(100% - (var(--container-pad) - 12px)), transparent 100%);
}
.xf-header__row--nav::-webkit-scrollbar { width: 0; height: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.xf-header__row--main {
height: auto;
flex-wrap: wrap;
padding-top: 10px;
padding-bottom: 10px;
row-gap: 10px;
}
.xf-search {
order: 10;
flex: 1 0 100%;
max-width: 100%;
}
}
.xf-theme-toggle {
position: relative;
display: inline-flex;
align-items: stretch;
width: 56px;
height: 32px;
padding: 0;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 999px;
cursor: pointer;
transition: background .2s, border-color .2s;
flex: 0 0 auto;
}
@media (hover: hover) {
.xf-theme-toggle:hover { border-color: var(--accent-line); }
}
.xf-theme-toggle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
color: var(--text-3);
pointer-events: none;
transition: opacity .2s;
}
.xf-theme-toggle__icon--moon { opacity: 0.45; }
.xf-theme-toggle__icon--sun { opacity: 0; }
html[data-theme="dark"] .xf-theme-toggle__icon--moon { opacity: 0; }
html[data-theme="dark"] .xf-theme-toggle__icon--sun { opacity: 0.45; }
@media (hover: hover) {
.xf-theme-toggle:hover .xf-theme-toggle__icon { opacity: 0.7; }
}
.xf-theme-toggle__knob {
position: absolute;
top: 3px;
left: 29px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--accent);
color: #fff;
box-shadow: 0 2px 6px -1px oklch(0 0 0 / 0.3);
display: inline-flex;
align-items: center;
justify-content: center;
transition: left .22s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
}
html[data-theme="dark"] .xf-theme-toggle__knob { left: 3px; }
.xf-theme-toggle__knob-ico {
position: absolute;
display: inline-flex;
transition: opacity .2s;
}
.xf-theme-toggle__knob-ico--sun { opacity: 1; }
.xf-theme-toggle__knob-ico--moon { opacity: 0; }
html[data-theme="dark"] .xf-theme-toggle__knob-ico--sun { opacity: 0; }
html[data-theme="dark"] .xf-theme-toggle__knob-ico--moon { opacity: 1; }
.xf-burger-btn {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
padding: 0;
margin-right: 2px;
background: transparent;
border: 0;
border-radius: 10px;
color: var(--text);
cursor: pointer;
transition: background .15s;
flex: 0 0 auto;
}
@media (hover: hover) {
.xf-burger-btn:hover { background: var(--surface-2); }
}
.xf-drawer { display: none; }
.xf-mcall { display: none; }
@media (max-width: 767px) {
.xf-header__top,
.xf-header__nav,
.xf-mega { display: none !important; }
.xf-mcall {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--line-soft);
}
.xf-mcall__promise {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
font-size: 12.5px;
line-height: 1.25;
color: var(--text-2);
}
.xf-mcall__promise svg { flex: 0 0 auto; color: var(--text-3); }
.xf-mcall__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 44px;
padding: 0 13px;
border: 1px solid var(--accent-line);
border-radius: 10px;
background: var(--surface-2);
color: var(--text);
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.2px;
white-space: nowrap;
transition: transform .15s, border-color .15s;
}
.xf-mcall__btn-icon { display: inline-flex; color: var(--accent); }
.xf-mcall__btn:active {
transform: translateY(calc(1px * var(--xf-motion, 1)));
border-color: var(--accent);
}
@media (min-width: 440px) {
.xf-mcall {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 14px;
}
.xf-mcall__btn { flex: 0 0 auto; }
.xf-mcall--solo .xf-mcall__btn { flex: 1 1 auto; }
}
@media (min-width: 360px) and (max-width: 439px) {
.xf-mcall:has(~ main .xf-pdp) {
flex-direction: row;
align-items: center;
gap: 12px;
padding: 8px 14px;
}
.xf-mcall:has(~ main .xf-pdp) .xf-mcall__promise {
flex: 0 0 auto;
max-width: calc(20px + 8.4em);
}
.xf-mcall:has(~ main .xf-pdp) .xf-mcall__btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
.xf-mcall__btn { transition: none; }
}
.xf-header__row--main {
height: auto;
min-height: 56px;
padding: 10px 14px;
gap: 8px;
flex-wrap: wrap;
row-gap: 10px;
}
.xf-burger-btn { display: inline-flex; }
.xf-logo {
gap: 3px;
margin-right: auto;
}
.xf-logo > svg { width: 28px; height: 22px; margin-right: -7px; }
.xf-logo__dash { width: 8px; height: 3px; }
.xf-logo__text {
font-size: 22px;
letter-spacing: -0.4px;
transform: translateY(0);
}
.xf-configurator-pill { display: none; }
.xf-header__actions .xf-account-pill,
.xf-header__actions > .xf-iconbtn[href$="auth/"],
.xf-header__actions > .xf-iconbtn[href$="personal/"] { display: none; }
.xf-header__actions .xf-divider { display: none; }
.xf-header__actions { gap: 2px; margin-left: 0; }
@media (min-width: 360px) {
.xf-header__actions > .xf-iconbtn { width: 44px; height: 44px; padding: 0; }
}
.xf-cart-btn {
position: relative;
padding: 9px 11px;
gap: 6px;
font-size: 12px;
}
.xf-cart-btn::after {
content: '';
position: absolute;
inset: -4px -4px -4px 0;
}
.xf-cart-btn > span:not(.xf-cart-btn__count) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.xf-cart-btn__count {
min-width: 18px;
height: 18px;
font-size: 10.5px;
padding: 0 5px;
}
.xf-search {
order: 10;
flex: 1 0 100%;
max-width: 100%;
}
.xf-search input {
font-size: 16px;
padding: 0 14px 0 40px;
height: 44px;
box-sizing: border-box;
}
@supports (height: 100svh) {
.xf-header,
.xf-mcall { --xf-low: clamp(0px, calc(100svh - 620px), 60px); }
.xf-header__row--main {
padding-top: calc(4px + var(--xf-low) / 10);
padding-bottom: calc(4px + var(--xf-low) / 10);
row-gap: calc(6px + var(--xf-low) / 15);
}
.xf-search input { height: calc(40px + var(--xf-low) / 15); }
.xf-mcall {
padding-top: calc(4px + var(--xf-low) / 10);
padding-bottom: calc(4px + var(--xf-low) / 10);
}
.xf-mcall__btn { min-height: calc(40px + var(--xf-low) / 15); }
@media (min-width: 440px) {
.xf-mcall {
padding-top: calc(4px + var(--xf-low) / 15);
padding-bottom: calc(4px + var(--xf-low) / 15);
}
}
@media (min-width: 360px) and (max-width: 439px) {
.xf-mcall:has(~ main .xf-pdp) {
padding-top: calc(4px + var(--xf-low) / 15);
padding-bottom: calc(4px + var(--xf-low) / 15);
}
}
}
@media (max-width: 359px) {
.xf-mcall:has(~ main .xf-pdp) .xf-mcall__promise { display: none; }
}
.xf-drawer {
display: block;
position: fixed;
inset: 0;
z-index: 100;
pointer-events: none;
}
.xf-drawer[hidden] { display: block; }
.xf-drawer__overlay {
position: absolute;
inset: 0;
background: oklch(0 0 0 / 0.5);
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
.xf-drawer__panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 85vw;
max-width: 360px;
background: var(--bg);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
transform: translateX(-105%);
transition: transform .28s cubic-bezier(.4, 0, .2, 1);
pointer-events: auto;
will-change: transform;
}
.xf-drawer.is-open { pointer-events: auto; }
.xf-drawer.is-open .xf-drawer__overlay { opacity: 1; pointer-events: auto; }
.xf-drawer.is-open .xf-drawer__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
.xf-drawer__panel { transition: none; }
}
.xf-drawer__top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--line-soft);
flex: 0 0 auto;
}
.xf-drawer__logo {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--text);
line-height: 1;
}
.xf-drawer__logo > svg { margin-right: -7px; }
.xf-drawer__logo-dash {
width: 8px;
height: 3px;
border-radius: 2px;
background: currentColor;
flex: 0 0 auto;
}
.xf-drawer__logo-text {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.4px;
}
.xf-drawer__close {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: var(--surface-2);
border: 0;
border-radius: 10px;
color: var(--text-2);
cursor: pointer;
transition: background .15s, color .15s;
}
@media (hover: hover) {
.xf-drawer__close:hover { background: var(--surface-3); color: var(--text); }
}
.xf-drawer__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 16px 14px 24px;
display: flex;
flex-direction: column;
gap: 18px;
}
body.xf-cookie-up .xf-drawer__body { padding-bottom: calc(24px + var(--xf-cookie-h, 120px)); }
.xf-drawer__cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 12px;
background: var(--accent-dim);
border: 1px solid var(--accent-line);
color: var(--text);
font-size: 14px;
font-weight: 500;
}
.xf-drawer__cta.is-active {
background: oklch(0.55 0.23 var(--accent-h) / 0.22);
}
html[data-theme="dark"] .xf-drawer__cta.is-active {
background: var(--accent-dim);
}
.xf-drawer__cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--accent);
color: #fff;
box-shadow: 0 0 14px -3px oklch(0.68 0.22 var(--accent-h) / 0.60);
flex: 0 0 auto;
}
html[data-theme="dark"] .xf-drawer__cta-icon { box-shadow: none; }
.xf-drawer__group {
display: flex;
flex-direction: column;
gap: 2px;
}
.xf-drawer__group-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-3);
font-family: var(--font-mono);
padding: 0 4px 8px;
}
.xf-drawer__nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.xf-drawer__nav-item,
.xf-drawer__row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px;
border-radius: 10px;
color: var(--text);
font-size: 14px;
transition: background .12s, color .12s;
}
.xf-drawer__nav-item { color: var(--text-2); }
@media (hover: hover) {
.xf-drawer__nav-item:hover,
.xf-drawer__row:hover { background: var(--surface); color: var(--text); }
}
.xf-drawer__nav-icon,
.xf-drawer__row-icon {
flex: 0 0 22px;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-3);
}
.xf-drawer__nav-label,
.xf-drawer__row-label { flex: 1 1 auto; }
.xf-drawer__nav-arrow {
flex: 0 0 auto;
color: var(--text-3);
}
.xf-drawer__nav-item--all {
border-top: 1px solid var(--line-soft);
margin-top: 4px;
padding-top: 14px;
}
.xf-drawer__nav-item--all .xf-drawer__nav-icon { color: var(--accent-2); }
.xf-drawer__nav-item--all .xf-drawer__nav-label {
font-weight: 500;
color: var(--text);
}
.xf-drawer__row-icon--brand {
background: var(--accent);
color: #fff;
border-radius: 7px;
box-shadow: 0 0 10px -2px oklch(0.68 0.22 var(--accent-h) / 0.55);
}
html[data-theme="dark"] .xf-drawer__row-icon--brand { box-shadow: none; }
.xf-drawer__row-label--mono {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-weight: 500;
letter-spacing: -0.2px;
}
.xf-drawer__row-count {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
background: var(--accent);
color: #fff;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
font-family: var(--font-mono);
}
.xf-drawer__row-count--wish { background: #e11d48; }
.xf-drawer__row-sub {
display: block;
margin-top: 1px;
color: var(--text-3);
font-size: 12.5px;
}
.xf-drawer__theme {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 12px 0;
border-top: 1px solid var(--line-soft);
margin-top: 6px;
}
.xf-drawer__theme-label {
font-size: 14px;
color: var(--text-2);
}
}
html[data-theme="dark"] .xf-mcall__btn,
html[data-theme="dark"] .xf-drawer__cta {
border: 1px solid var(--line);
background: transparent;
}
body.xf-drawer-open { overflow: hidden; }
body.xf-drawer-open .xf-chat { display: none; }
/* End */
/* Start:/local/templates/xcore_front/css/footer.xfmin-1-8348.css?17928347763505*/
.xf-footer {
margin-top: 32px;
border-top: 1px solid var(--line-soft);
background: var(--bg-2);
}
.xf-footer__inner {
max-width: var(--container);
margin: 0 auto;
padding: 56px var(--container-pad) calc(32px + var(--xf-footer-clear, 0px));
}
body.xf-bottombar-up .xf-footer__inner { --xf-footer-clear: var(--xf-bottombar-h, 84px); }
body.xf-has-picks .xf-footer__inner { --xf-footer-clear: var(--xfc-sticky-h, 0px); }
.xf-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1.4fr;
gap: 40px;
}
@media (max-width: 1100px) {
.xf-footer__grid {
grid-template-columns: 1fr 1fr 1fr;
}
.xf-footer__about,
.xf-footer__col--connect { grid-column: span 3; }
}
@media (max-width: 640px) {
.xf-footer__grid { grid-template-columns: 1fr 1fr; }
.xf-footer__about,
.xf-footer__col--connect { grid-column: span 2; }
}
.xf-footer__about .xf-logo {
gap: 4px;
}
.xf-footer__about .xf-logo > svg {
margin-right: -8px;
}
.xf-footer__about .xf-logo__dash {
width: 8px;
height: 3.5px;
}
.xf-footer__about .xf-logo__text {
font-size: 27px;
transform: translateY(-1px);
}
.xf-footer__about p {
color: var(--text-2);
font-size: 13.5px;
line-height: 1.6;
margin: 16px 0 20px;
max-width: 320px;
}
.xf-footer__col-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-2);
font-family: var(--font-mono);
margin-bottom: 16px;
}
.xf-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.xf-footer__col a {
font-size: 13.5px;
color: var(--text-2);
transition: color .15s;
}
@media (hover: hover) {
.xf-footer__col a:hover { color: var(--text); }
}
.xf-footer__bottom {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--line-soft);
display: flex;
flex-direction: column;
gap: 14px;
font-size: 12px;
color: var(--text-2);
}
.xf-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
line-height: 1.5;
}
.xf-footer__bottom-links {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
}
.xf-footer__bottom a {
color: var(--text-2);
transition: color .15s;
}
@media (hover: hover) {
.xf-footer__bottom a:hover { color: var(--text); }
}
.xf-footer__credit {
margin-left: auto;
display: inline-flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
}
.xf-footer__credit-name {
transition: color .15s;
}
.xf-footer__credit-arrow {
display: inline-block;
transition: transform .15s;
}
@media (hover: hover) {
.xf-footer__credit:hover .xf-footer__credit-name { color: var(--accent); }
html[data-theme="dark"] .xf-footer__credit:hover .xf-footer__credit-name { color: var(--accent-2); }
.xf-footer__credit:hover .xf-footer__credit-arrow {
transform: translate(calc(1px * var(--xf-motion, 1)), calc(-1px * var(--xf-motion, 1)));
}
}
@media (min-width: 641px) and (max-width: 1559px) {
.xf-footer__credit { margin-right: 52px; }
}
@media (max-width: 640px) {
.xf-footer__credit { margin-left: 0; }
}
.xf-footer__cookie-settings {
appearance: none;
border: 0;
background: none;
padding: 0;
font: inherit;
color: var(--text-2);
cursor: pointer;
transition: color .15s;
}
@media (hover: hover) {
.xf-footer__cookie-settings:hover { color: var(--text); }
}
.xf-footer__col .xf-footer__contacts {
margin: 14px 0 0;
gap: 8px;
}
.xf-footer__contacts a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-2);
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
transition: color .15s;
}
@media (hover: hover) {
.xf-footer__contacts a:hover { color: var(--text); }
}
/* End */
/* Start:/local/templates/xcore_front/css/home.xfmin-1-184514.css?179283777061454*/
.xf-home__section { padding: 48px 0 24px; }
.xf-home__section--hero { padding: 28px 0 20px; }
.xf-home__section--trust { padding: 24px 0; }
.xf-home__section--day { padding: 24px 0; }
.xf-home__section--products{ padding: 48px 0 24px; }
.xf-home__section--promo { padding: 72px 0 32px; }
.xf-home__section--presets { padding: 0 0 32px; }
.xf-home__section--brands { padding: 80px 0 16px; }
.xf-pitch {
padding: 34px 0 26px;
border-bottom: 1px solid var(--line-soft);
}
.xf-pitch__band {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(258px, 340px);
grid-template-areas:
"title note"
"facts note"
"cta note";
grid-template-rows: auto auto 1fr;
column-gap: 56px;
align-items: start;
}
.xf-pitch__title {
grid-area: title;
margin: 0;
max-width: 25ch;
font-size: 52px;
line-height: 1.02;
font-weight: 700;
letter-spacing: -0.035em;
color: var(--text);
text-wrap: balance;
}
.xf-pitch__title-soft {
display: block;
color: var(--text-2);
}
.xf-pitch__facts {
grid-area: facts;
margin: 18px 0 0;
}
.xf-pitch__fact {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
line-height: 1.4;
font-weight: 500;
color: var(--text);
}
.xf-pitch__fact svg {
flex: 0 0 auto;
color: var(--text-3);
}
.xf-pitch__note {
grid-area: note;
position: relative;
align-self: stretch;
padding: 21px 0 2px 32px;
}
.xf-pitch__note::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 1px;
background: var(--line-soft);
}
.xf-pitch__note-p {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--text-2);
text-wrap: pretty;
}
.xf-pitch__note-p + .xf-pitch__note-p {
margin-top: 14px;
}
.xf-pitch__link {
color: var(--text);
text-decoration: underline;
text-decoration-color: var(--line);
text-underline-offset: 3px;
white-space: nowrap;
transition: color .15s, text-decoration-color .15s;
}
@media (hover: hover) {
.xf-pitch__link:hover {
color: var(--accent-2);
text-decoration-color: currentColor;
}
}
.xf-pitch__num {
font-family: var(--font-mono);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
word-spacing: -0.22em;
color: var(--text);
}
.xf-pitch__cta {
grid-area: cta;
justify-self: start;
margin-top: 26px;
}
@media (max-width: 1023px) {
.xf-pitch { padding: 30px 0 24px; }
.xf-pitch__band {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"title"
"facts"
"note"
"cta";
grid-template-rows: auto auto auto auto;
}
.xf-pitch__note {
max-width: 62ch;
padding: 20px 0 0;
}
.xf-pitch__note::before {
left: 0;
right: 0;
top: 0;
bottom: auto;
width: auto;
height: 1px;
}
.xf-pitch__cta { margin-top: 22px; }
}
@media (max-width: 767px) {
.xf-pitch { padding: 24px 0 22px; }
.xf-pitch__title { max-width: none; font-size: clamp(34px, 11vw, 40px); }
.xf-pitch__title .xf-pitch__title-soft {
margin-top: 8px;
font-size: 28px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.03em;
}
.xf-pitch__facts { margin-top: 16px; }
.xf-pitch__note { padding-top: 18px; }
.xf-pitch__note-p + .xf-pitch__note-p { margin-top: 12px; }
.xf-pitch__cta {
justify-self: stretch;
width: 100%;
padding: 13px 16px;
}
}
html[data-theme="dark"] .xf-pitch {
position: relative;
isolation: isolate;
border-bottom: 0;
padding-top: 56px;
padding-bottom: 64px;
}
html[data-theme="dark"] .xf-pitch__facts,
html[data-theme="dark"] .xf-pitch__note { display: none; }
html[data-theme="dark"] .xf-pitch__band {
grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
grid-template-areas:
"title art"
"pills art"
"cta art";
grid-template-rows: auto auto 1fr;
column-gap: 56px;
align-items: start;
}
html[data-theme="dark"] .xf-pitch__title { font-weight: 600; letter-spacing: -0.03em; }
html[data-theme="dark"] .xf-pitch__title-soft {
color: var(--nx-core);
text-shadow: var(--nx-glow);
}
html[data-theme="dark"] .xf-neon-art {
display: block;
position: relative;
grid-area: art;
align-self: center;
}
html[data-theme="dark"] .xf-neon-art::before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
width: 420%;
aspect-ratio: 1.5;
transform: translate(-50%, -50%);
pointer-events: none;
background: radial-gradient(closest-side, oklch(0.52 0.23 325 / 0.5), oklch(0.43 0.21 315 / 0.25) 30%, oklch(0.32 0.14 302 / 0.12) 60%, transparent 100%);
}
html[data-theme="dark"] .xf-pitch {
--nx-glow-off: 0 0 10px transparent, 0 0 30px transparent;
--nx-cta-dark:
inset 0 1px 0 oklch(1 0 0 / 0.28),
inset 0 -1px 0 oklch(0 0 0 / 0.18),
0 1px 0 oklch(0 0 0 / 0.4),
0 16px 36px -14px oklch(0.56 0.25 300 / 0);
}
html[data-theme="dark"] .xf-nx {
position: relative;
display: block;
}
html[data-theme="dark"] .xf-nx__layer {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
html[data-theme="dark"] .xf-nx__layer--aura { position: relative; height: auto; }
html[data-theme="dark"] .xf-nx__layer--flare { opacity: 0; }
html[data-theme="dark"] .xf-nx__sparks {
position: absolute;
inset: 0;
pointer-events: none;
}
html[data-theme="dark"] :is(.xf-nx__core, .xf-nx__flash) {
position: absolute;
left: 50%;
top: 50%;
width: 15%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: radial-gradient(closest-side, oklch(0.99 0.02 338 / 0.95), oklch(0.80 0.17 338 / 0.42) 42%, oklch(0.62 0.25 332 / 0.12) 72%, transparent);
opacity: 0;
}
html[data-theme="dark"] :is(.xf-nx__spark, .xf-nx__hit) {
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
opacity: 0;
will-change: transform, opacity;
}
html[data-theme="dark"] .xf-nx__spark {
background: radial-gradient(closest-side, oklch(1 0 0), oklch(0.92 0.08 338 / 0.9) 18%, oklch(0.74 0.22 336 / 0.4) 44%, oklch(0.62 0.26 332 / 0.12) 70%, transparent);
}
html[data-theme="dark"] .xf-nx__hit {
background: radial-gradient(closest-side, oklch(0.98 0.03 338 / 0.9), oklch(0.74 0.22 336 / 0.35) 45%, transparent);
}
html[data-theme="dark"] .xf-pitch.is-flare .xf-nx__layer--flare {
animation: xf-nx-flare 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes xf-nx-flare {
0%, 30% { opacity: 0; }
42% { opacity: 0.55; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
html[data-theme="dark"][data-xf-nx] :is(.xf-nx__layer--aura, .xf-nx__layer--glow) { opacity: 0; }
html[data-theme="dark"][data-xf-nx] .xf-nx__layer--board { opacity: 0.22; }
html[data-theme="dark"][data-xf-nx] .xf-nx__layer--tube { opacity: 0.24; }
html[data-theme="dark"][data-xf-nx] .xf-neon-art::before { opacity: 0; }
html[data-theme="dark"][data-xf-nx] :is(.xf-pitch__title-soft, .xf-neon-pill b) {
color: var(--text-2);
text-shadow: var(--nx-glow-off);
}
html[data-theme="dark"][data-xf-nx] .xf-btn.xf-pitch__cta { box-shadow: var(--nx-cta-dark); }
html[data-theme="dark"][data-xf-nx="off"] :is(.xf-nx__layer--aura, .xf-nx__layer--glow, .xf-nx__layer--board, .xf-nx__layer--tube),
html[data-theme="dark"][data-xf-nx="off"] .xf-neon-art::before {
animation: xf-nx-failsafe 600ms 3.5s both;
}
html[data-theme="dark"][data-xf-nx="off"] :is(.xf-pitch__title-soft, .xf-neon-pill b) { animation: xf-nx-failsafe-text 600ms 3.5s both; }
html[data-theme="dark"][data-xf-nx="off"] .xf-btn.xf-pitch__cta { animation: xf-nx-cta-on 600ms 3.5s both; }
html[data-theme="dark"] .xf-pitch.is-igniting .xf-nx__layer--board { animation: xf-nx-board-on 1800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html[data-theme="dark"] .xf-pitch.is-igniting .xf-nx__layer--tube { animation: xf-nx-tube-on 1800ms ease-out both; }
html[data-theme="dark"] .xf-pitch.is-igniting .xf-nx__layer--glow { animation: xf-nx-glow-on 1800ms ease-out both; }
html[data-theme="dark"] .xf-pitch.is-igniting .xf-nx__layer--aura { animation: xf-nx-aura-on 1800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
html[data-theme="dark"] .xf-pitch.is-igniting .xf-neon-art::before { animation: xf-nx-room-on 1800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
html[data-theme="dark"] .xf-pitch.is-igniting .xf-pitch__title-soft { animation: xf-nx-text-catch 520ms 930ms both; }
html[data-theme="dark"] .xf-pitch.is-igniting .xf-neon-pill b { animation: xf-nx-text-on 520ms 1130ms both; }
html[data-theme="dark"] .xf-pitch.is-igniting .xf-neon-pill:nth-child(2) b { animation-delay: 1210ms; }
html[data-theme="dark"] .xf-pitch.is-igniting .xf-neon-pill:nth-child(3) b { animation-delay: 1290ms; }
html[data-theme="dark"] .xf-pitch.is-igniting .xf-btn.xf-pitch__cta { animation: xf-nx-cta-on 700ms 1250ms cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes xf-nx-failsafe { to { opacity: 1; } }
@keyframes xf-nx-failsafe-text { to { color: var(--nx-core); text-shadow: var(--nx-glow); } }
@keyframes xf-nx-board-on {
0%, 7% { opacity: 0.22; }
10% { opacity: 0.5; }
44%, 100% { opacity: 1; }
}
@keyframes xf-nx-tube-on {
0%, 40% { opacity: 0.24; }
41.2% { opacity: 1; }
43.2% { opacity: 0.28; }
45.5% { opacity: 0.92; }
48% { opacity: 0.45; }
52%, 100% { opacity: 1; }
}
@keyframes xf-nx-glow-on {
0%, 40.4% { opacity: 0; }
41.8% { opacity: 0.85; }
43.8% { opacity: 0.08; }
46.2% { opacity: 0.75; }
48.6% { opacity: 0.25; }
56%, 100% { opacity: 1; }
}
@keyframes xf-nx-aura-on {
0%, 41% { opacity: 0; }
78%, 100% { opacity: 1; }
}
@keyframes xf-nx-room-on {
0%, 42% { opacity: 0; }
88%, 100% { opacity: 1; }
}
@keyframes xf-nx-text-catch {
0% { color: var(--text-2); text-shadow: var(--nx-glow-off); }
14% { color: var(--nx-core); text-shadow: var(--nx-glow); }
30% { color: var(--text-2); text-shadow: var(--nx-glow-off); }
52%, 100% { color: var(--nx-core); text-shadow: var(--nx-glow); }
}
@keyframes xf-nx-text-on {
0% { color: var(--text-2); text-shadow: var(--nx-glow-off); }
100% { color: var(--nx-core); text-shadow: var(--nx-glow); }
}
@keyframes xf-nx-cta-on { from { box-shadow: var(--nx-cta-dark); } }
html[data-theme="dark"] .xf-neon-pills {
display: grid;
grid-area: pills;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 36px 0 0;
padding: 0;
list-style: none;
max-width: 660px;
}
html[data-theme="dark"] .xf-neon-pill {
position: relative;
display: flex;
align-items: flex-start;
padding: 16px 18px 17px;
border: 1px solid oklch(1 0 0 / 0.10);
border-radius: 14px;
background: oklch(0.19 0.010 292 / 0.72);
box-shadow: var(--nx-edge), 0 14px 30px -18px oklch(0 0 0 / 0.9);
color: var(--text-2);
font-size: 14.5px;
line-height: 1.4;
text-wrap: pretty;
transition: border-color .18s, background-color .18s;
}
html[data-theme="dark"] .xf-neon-pill > :is(span, a) { display: block; }
html[data-theme="dark"] .xf-neon-pill b {
display: block;
margin-bottom: 4px;
color: var(--nx-core);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
white-space: nowrap;
text-shadow: var(--nx-glow);
}
html[data-theme="dark"] .xf-neon-pill__label { display: block; }
html[data-theme="dark"] .xf-neon-pill a { color: inherit; text-decoration: none; }
html[data-theme="dark"] .xf-neon-pill a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
html[data-theme="dark"] .xf-neon-pill a .xf-neon-pill__label {
text-decoration: underline;
text-decoration-color: oklch(1 0 0 / 0.4);
text-underline-offset: 3px;
}
@media (hover: hover) {
html[data-theme="dark"] .xf-neon-pill:has(a):hover {
background: oklch(0.22 0.012 292 / 0.8);
border-color: oklch(1 0 0 / 0.18);
}
}
html[data-theme="dark"] .xf-btn.xf-pitch__cta {
grid-area: cta;
margin-top: 32px;
min-height: 52px;
padding: 14px 30px;
font-size: 15px;
font-weight: 600;
box-shadow:
inset 0 1px 0 oklch(1 0 0 / 0.28),
inset 0 -1px 0 oklch(0 0 0 / 0.18),
0 1px 0 oklch(0 0 0 / 0.4),
0 16px 36px -14px oklch(0.56 0.25 300 / 0.85);
}
@media (min-width: 1024px) and (max-width: 1279px) {
html[data-theme="dark"] .xf-pitch__band {
grid-template-columns: minmax(0, 1fr) minmax(240px, 36%);
column-gap: 40px;
}
html[data-theme="dark"] .xf-neon-pill { padding: 14px 14px 15px; }
html[data-theme="dark"] .xf-neon-pill b { font-size: 24px; }
}
@media (max-width: 1023px) {
html[data-theme="dark"] .xf-pitch__band {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "art" "title" "pills" "cta";
grid-template-rows: none;
}
html[data-theme="dark"] .xf-neon-art {
width: min(48%, 340px);
margin: 0 0 20px -2%;
}
}
@media (max-width: 767px) {
html[data-theme="dark"] .xf-pitch { padding-top: 20px; padding-bottom: 32px; }
html[data-theme="dark"] .xf-pitch__band { text-align: center; justify-items: center; }
html[data-theme="dark"] .xf-pitch__title { text-wrap: balance; }
html[data-theme="dark"] .xf-neon-art { width: 34%; margin: 0 auto 14px; }
html[data-theme="dark"] .xf-neon-art::before { width: 520%; }
html[data-theme="dark"] .xf-neon-pills {
width: 100%;
gap: 0;
margin-top: 20px;
border: 1px solid oklch(1 0 0 / 0.10);
border-radius: 14px;
background: oklch(0.19 0.010 292 / 0.72);
box-shadow: var(--nx-edge);
overflow: hidden;
}
html[data-theme="dark"] .xf-neon-pill {
justify-content: center;
padding: 12px 6px 13px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
font-size: 12px;
line-height: 1.3;
}
html[data-theme="dark"] .xf-neon-pill + .xf-neon-pill { border-left: 1px solid oklch(1 0 0 / 0.08); }
html[data-theme="dark"] .xf-neon-pill b { font-size: 20px; margin-bottom: 3px; }
html[data-theme="dark"] .xf-btn.xf-pitch__cta { width: 100%; margin-top: 18px; }
}
@media (max-width: 359px) {
html[data-theme="dark"] .xf-neon-pill b { font-size: 17px; }
}
.xf-hero {
position: relative;
border-radius: 22px;
overflow: hidden;
border: 1px solid var(--line-soft);
aspect-ratio: 1920 / 450;
max-height: 450px;
background: var(--surface-2);
}
.xf-hero__stripes {
position: absolute;
inset: 0;
opacity: 0.05;
color: var(--text-3);
pointer-events: none;
}
.xf-hero__text {
position: relative;
padding: 36px 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
.xf-hero__eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 2.5px;
color: var(--accent-2);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 10px;
}
.xf-hero__eyebrow::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-2);
box-shadow: 0 0 12px var(--accent);
flex: 0 0 auto;
}
.xf-hero__title {
margin: 0;
font-size: 52px;
line-height: 1;
font-weight: 700;
letter-spacing: -1.8px;
color: var(--text);
}
.xf-hero__subtitle {
margin: 14px 0 22px;
font-size: 17px;
color: var(--text-2);
max-width: 460px;
line-height: 1.4;
}
.xf-hero__ctas {
display: flex;
gap: 12px;
align-items: center;
}
.xf-hero__dots {
position: absolute;
bottom: 28px;
left: 44px;
display: flex;
align-items: center;
gap: 8px;
z-index: 3;
}
.xf-hero__dot {
width: 18px;
height: 24px;
display: flex;
align-items: center;
background: none;
border: 0;
padding: 0;
cursor: pointer;
transition: width .3s;
}
.xf-hero__dot::after {
content: "";
display: block;
width: 100%;
height: 6px;
border-radius: 3px;
background: var(--line);
transition: background .3s;
}
.xf-hero__dot.is-active {
width: 34px;
}
.xf-hero__dot.is-active::after {
background: var(--accent);
}
.xf-hero__media {
position: relative;
margin: 24px 28px 24px 0;
border-radius: 14px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.xf-hero__image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.xf-hero__placeholder {
width: 100%;
height: 100%;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-3);
opacity: 0.5;
}
.xf-hero__placeholder svg {
width: 72px;
height: 72px;
}
.xf-hero__media-label {
position: absolute;
left: 20px;
bottom: 20px;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-3);
z-index: 2;
}
.xf-hero__chips {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
z-index: 2;
}
.xf-hero__slide {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1.1fr 1fr;
opacity: 0;
pointer-events: none;
transition: opacity .5s ease;
}
.xf-hero__slide.is-active {
opacity: 1;
pointer-events: auto;
}
.xf-hero--banners .xf-hero__stripes { display: none; }
.xf-hero__slide--banner {
display: block;
grid-template-columns: none;
color: inherit;
text-decoration: none;
background: var(--surface-3);
}
.xf-hero--banners .xf-hero__nav {
background: rgba(15, 17, 25, 0.55);
border-color: rgba(255, 255, 255, 0.18);
color: #fff;
}
@media (hover: hover) {
.xf-hero--banners .xf-hero__nav:hover {
background: rgba(15, 17, 25, 0.78);
border-color: rgba(255, 255, 255, 0.32);
}
}
html[data-theme="dark"] .xf-hero--banners .xf-hero__nav {
background: rgba(15, 17, 25, 0.55);
}
@media (hover: hover) {
html[data-theme="dark"] .xf-hero--banners .xf-hero__nav:hover {
background: rgba(15, 17, 25, 0.78);
}
}
.xf-hero--banners .xf-hero__dots {
left: 50%;
transform: translateX(-50%);
padding: 6px 12px;
border-radius: 999px;
background: rgba(15, 17, 25, 0.55);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.xf-hero--banners .xf-hero__dot::after {
background: rgba(255, 255, 255, 0.8);
}
.xf-hero--banners .xf-hero__dot.is-active::after {
background: #fff;
}
.xf-hero__picture {
display: block;
width: 100%;
height: 100%;
}
.xf-hero__slide--banner .xf-hero__image {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center;
}
.xf-hero__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.08);
border: 1px solid var(--line-soft);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background .2s, border-color .2s, transform .2s;
}
html[data-theme="dark"] .xf-hero__nav { background: rgba(255, 255, 255, 0.06); }
@media (hover: hover) {
.xf-hero__nav:hover {
background: rgba(0, 0, 0, 0.14);
border-color: var(--accent);
}
}
@media (hover: hover) {
html[data-theme="dark"] .xf-hero__nav:hover { background: rgba(255, 255, 255, 0.14); }
}
.xf-hero__nav:active {
transform: translateY(-50%) scale(calc(1 - 0.06 * var(--xf-motion, 1)));
}
.xf-hero__nav--prev { left: 20px; }
.xf-hero__nav--next { right: 20px; }
.xf-trustbar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.xf-trustbar__item {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 22px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 14px;
}
.xf-trustbar__icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: var(--accent-dim);
color: var(--accent-2);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--accent-line);
flex: 0 0 auto;
}
.xf-trustbar__title {
font-size: 14px;
font-weight: 500;
color: var(--text);
}
.xf-trustbar__text {
font-size: 12.5px;
color: var(--text-3);
margin-top: 2px;
}
.xf-subhub__group-title {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
margin: 48px 0 20px;
padding-top: 20px;
border-top: 1px solid var(--line-soft);
}
.xf-subhub__group-title:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: none;
}
@media (max-width: 767px) {
.xf-subhub__group-title {
font-size: 15px;
margin: 26px 0 12px;
}
.xf-subhub__group-title:first-of-type {
margin-top: 0;
}
}
.xf-catgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.xf-catgrid--16 {
grid-auto-rows: 1fr;
}
.xf-cat-tile {
position: relative;
display: block;
height: 140px;
padding: 18px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 16px;
overflow: hidden;
transition: border-color .2s, transform .2s, box-shadow .2s;
color: var(--text);
}
@media (hover: hover) {
.xf-cat-tile:hover {
border-color: var(--accent-line);
transform: translateY(calc(-2px * var(--xf-motion, 1)));
box-shadow: var(--shadow-card);
}
.xf-cat-tile:hover .xf-cat-tile__cover-img { --crop-scale: 1.11; }
html[data-theme="dark"] .xf-cat-tile:hover {
box-shadow: 0 8px 20px -12px oklch(0.05 0.03 280 / 0.35);
}
}
.xf-cat-tile--lg { height: 180px; padding: 22px; }
.xf-cat-tile--xl {
height: 100%;
min-height: 432px;
padding: 30px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
row-gap: 20px;
}
.xf-cat-tile:has(.xf-cat-tile__art) { min-height: 200px; height: auto; padding: 16px; }
.xf-cat-tile__art {
height: 88px;
border-radius: 12px;
overflow: hidden;
margin-bottom: 12px;
}
.xf-cat-tile__art--cover {
position: relative;
height: 152px;
background: #fff;
padding: 2px;
box-sizing: border-box;
}
.xf-cat-tile__art--static {
position: relative;
height: 152px;
background: transparent;
padding: 12px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.xf-cat-tile__static-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: transform .25s ease;
}
.xf-cat-tile__picture { display: contents; }
@media (hover: hover) {
.xf-cat-tile:hover .xf-cat-tile__static-img { transform: scale(calc(1 + 0.04 * var(--xf-motion, 1))); }
}
.xf-cat-tile__art--cover::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 28%;
height: 11%;
background: radial-gradient(
ellipse 100% 100% at 100% 100%,
#fff 0%,
rgba(255, 255, 255, 0.85) 30%,
rgba(255, 255, 255, 0) 80%
);
pointer-events: none;
}
.xf-cat-tile__cover-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
--crop-scale: 1.07;
transform: scale(var(--crop-scale));
transform-origin: top center;
transition: transform .25s ease;
}
.xf-cat-tile--text {
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.xf-cat-tile__icon {
position: absolute;
right: 16px;
bottom: 16px;
width: 54px;
height: 54px;
border-radius: 14px;
background: var(--surface-3);
border: 1px solid var(--line-soft);
color: var(--text-2);
display: flex;
align-items: center;
justify-content: center;
transition: background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s;
z-index: 2;
}
.xf-cat-tile--lg .xf-cat-tile__icon { width: 64px; height: 64px; }
.xf-cat-tile--xl .xf-cat-tile__icon {
right: 44px;
bottom: 44px;
width: 108px;
height: 108px;
border-radius: 20px;
}
.xf-cat-tile__icon svg { width: 28px; height: 28px; }
.xf-cat-tile--lg .xf-cat-tile__icon svg { width: 34px; height: 34px; }
.xf-cat-tile--xl .xf-cat-tile__icon svg { width: 56px; height: 56px; }
.xf-cat-tile__icon-img {
max-width: 70%;
max-height: 70%;
object-fit: contain;
}
.xf-cat-tile--xl .xf-cat-tile__art {
grid-row: 2;
justify-self: end;
align-self: stretch;
width: min(280px, 100%);
height: 100%;
max-height: 280px;
min-height: 140px;
border-radius: 18px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: transform .25s;
pointer-events: none;
}
.xf-cat-tile__art-img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
.xf-cat-tile__art-icon {
color: var(--text-3);
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
}
.xf-cat-tile__art-icon svg {
width: 96px;
height: 96px;
}
@media (hover: hover) {
.xf-cat-tile--xl:hover .xf-cat-tile__art { transform: translateY(calc(-2px * var(--xf-motion, 1))); }
}
@media (hover: hover) {
.xf-cat-tile:hover .xf-cat-tile__icon {
background: var(--accent);
border-color: transparent;
color: #fff;
transform: translateY(calc(-2px * var(--xf-motion, 1)));
box-shadow: 0 12px 28px -10px oklch(0.5 0.22 268 / 0.45);
}
}
.xf-cat-tile__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 4px;
}
.xf-cat-tile--xl .xf-cat-tile__body { gap: 12px; grid-row: 1; align-self: start; }
.xf-cat-tile__name {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.3px;
margin-top: 0;
max-width: 70%;
}
.xf-cat-tile:has(.xf-cat-tile__art--cover) .xf-cat-tile__name {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
min-height: calc(1.35em * 2);
max-width: 100%;
}
.xf-cat-tile:has(.xf-cat-tile__art--cover) .xf-cat-tile__arrow,
.xf-cat-tile:has(.xf-cat-tile__art--static) .xf-cat-tile__arrow,
.xf-cat-tile--text .xf-cat-tile__arrow {
display: none;
}
.xf-cat-tile__count {
margin-top: 4px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text-3);
letter-spacing: 0;
}
.xf-cat-tile--lg .xf-cat-tile__name { font-size: 18px; }
.xf-cat-tile--xl .xf-cat-tile__name {
font-size: 28px;
margin-top: 12px;
max-width: none;
}
.xf-cat-tile--xl .xf-cat-tile__desc { max-width: none; }
.xf-cat-tile__desc {
margin-top: 8px;
font-size: 14px;
color: var(--text-2);
max-width: 55%;
line-height: 1.5;
}
.xf-cat-tile__arrow {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-3);
color: var(--text-2);
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, color .2s;
z-index: 3;
}
.xf-cat-tile--xl .xf-cat-tile__arrow { top: 28px; right: 28px; }
@media (hover: hover) {
.xf-cat-tile:hover .xf-cat-tile__arrow {
background: var(--accent);
color: #fff;
}
}
.xf-catrail {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
padding: 20px 0 4px;
}
.xf-catrail__item {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 10px;
color: var(--text);
text-decoration: none;
transition: border-color .18s, color .18s, transform .18s;
}
html[data-theme="dark"] .xf-catrail__item { box-shadow: var(--nx-edge); }
.xf-catrail__icon {
flex: 0 0 20px;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-3);
transition: color .18s;
}
.xf-catrail__icon svg { width: 20px; height: 20px; }
.xf-catrail__icon-img { width: 20px; height: 20px; object-fit: contain; }
.xf-catrail__name {
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.25;
}
.xf-catrail__count {
flex: 0 0 auto;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-3);
white-space: nowrap;
}
.xf-catrail__num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .xf-catrail__count { color: var(--text-2); }
@media (hover: hover) {
.xf-catrail__item:hover {
border-color: var(--accent-line);
color: var(--accent-2);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
.xf-catrail__item:hover .xf-catrail__icon { color: var(--accent-2); }
}
@media (max-width: 1279px) {
.xf-catrail__item {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
column-gap: 10px;
row-gap: 2px;
align-items: center;
}
.xf-catrail__icon { flex: none; grid-row: 1 / span 2; align-self: center; }
.xf-catrail__name { grid-column: 2; }
.xf-catrail__count { grid-column: 2; }
}
@media (max-width: 1023px) {
.xf-catrail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.xf-catrail {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 16px 0 4px;
}
.xf-catrail__item {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
column-gap: 8px;
row-gap: 2px;
align-items: center;
padding: 10px;
}
.xf-catrail__icon { flex: none; width: 18px; height: 18px; grid-row: 1 / span 2; align-self: center; }
.xf-catrail__icon svg { width: 18px; height: 18px; }
.xf-catrail__icon-img { width: 18px; height: 18px; }
.xf-catrail__name { grid-column: 2; font-size: 13px; }
.xf-catrail__count { grid-column: 2; font-size: 11px; }
}
@media (max-width: 359px) {
.xf-catrail { grid-template-columns: minmax(0, 1fr); }
.xf-catrail__item { display: flex; }
}
.xf-art {
position: relative;
width: 100%;
height: 100%;
border-radius: inherit;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-3);
}
.xf-art__icon {
position: relative;
z-index: 1;
color: var(--text-3);
opacity: 0.85;
}
html[data-theme="dark"] .xf-art__icon {
color: var(--text-2);
opacity: 0.95;
}
.xf-art__icon svg {
display: block;
width: 64px;
height: 64px;
}
.xf-art--xl .xf-art__icon svg { width: 130px; height: 130px; }
.xf-art__label {
position: absolute;
bottom: 8px;
left: 8px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.5px;
color: var(--text-3);
padding: 2px 6px;
background: var(--surface);
border-radius: 4px;
border: 1px solid var(--line-soft);
z-index: 2;
}
.xf-art__img {
position: relative;
z-index: 1;
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
.xf-art--photo {
background: var(--surface);
}
html[data-theme="dark"] .xf-art--photo {
background: #fff;
isolation: isolate;
}
.xf-art--photo::before,
.xf-art--photo::after {
display: none;
}
html[data-theme="dark"] .xf-art--photo::after {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
mix-blend-mode: multiply;
background: var(--nx-lightbox);
}
.xf-product-card__image {
container-type: inline-size;
}
.xf-product-card .xf-art--photo {
align-items: flex-end;
}
.xf-product-card .xf-art--photo .xf-art__photo-wrap {
position: relative;
display: inline-flex;
flex: 0 0 auto;
overflow: hidden;
min-width: 140px;
justify-content: center;
}
.xf-product-card .xf-art--photo .xf-art__img {
display: block;
width: auto;
height: auto;
max-width: 80cqi;
max-height: 80cqi;
}
.xf-day {
display: flex;
gap: 44px;
align-items: center;
background: var(--surface);
border: 1px solid var(--line-soft);
border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
background: color-mix(in srgb, var(--accent) 4%, var(--surface));
border-radius: 22px;
padding: 28px;
}
.xf-day__media {
flex: 0 0 46%;
max-width: 600px;
aspect-ratio: 16 / 11;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-3);
border-radius: 16px;
overflow: hidden;
}
.xf-day__media--empty { min-height: 200px; }
.xf-day__media:not(.xf-day__media--empty) {
background: #fff;
container-type: size;
}
.xf-day__photo-wrap {
position: relative;
display: inline-flex;
flex: 0 0 auto;
justify-content: center;
max-width: 100%;
min-width: 140px;
overflow: hidden;
}
.xf-day__photo {
max-width: 88cqi;
max-height: 88cqb;
width: auto;
height: auto;
object-fit: contain;
}
.xf-day__info {
flex: 1 1 auto;
min-width: 0;
max-width: 640px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.xf-day__head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.xf-day__eyebrow {
margin: 0;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-2);
}
.xf-day__eyebrow::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--accent-2);
}
.xf-day__name {
font-size: 26px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.4px;
color: var(--text);
text-decoration: none;
transition: color .15s;
}
@media (hover: hover) {
.xf-day__name:hover { color: var(--accent-2); }
}
.xf-day-price {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums lining-nums;
}
.xf-day-price__val {
font-size: 34px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.5px;
color: var(--text);
white-space: nowrap;
}
.xf-day-price__cur {
color: var(--text-3);
font-size: 0.55em;
font-weight: 500;
margin-left: 5px;
}
.xf-day-price__was-line {
display: flex;
align-items: baseline;
margin-top: 5px;
}
.xf-day-price__was {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums lining-nums;
font-size: 14px;
font-weight: 500;
color: var(--text-2);
line-height: 1.1;
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: currentColor;
}
.xf-day-price__val--request {
font-size: 20px;
font-weight: 500;
color: var(--text-3);
letter-spacing: -0.2px;
}
.xf-day__timer {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 16px;
border: 1px solid var(--line-soft);
border-radius: 12px;
background: var(--surface-2);
}
.xf-day__timer-label {
font-size: 13px;
color: var(--text-2);
}
.xf-day__countdown {
display: flex;
align-items: center;
gap: inherit;
}
.xf-day__tag {
display: inline-flex;
align-items: center;
padding: 4px 11px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--accent-line);
color: var(--accent-2);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.1px;
white-space: nowrap;
}
.xf-day__clock {
display: inline-flex;
align-items: baseline;
gap: 10px;
}
.xf-day__unit {
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.xf-day__num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums lining-nums;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.3px;
color: var(--text);
}
.xf-day__sep {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--text-3);
}
.xf-day__unit[hidden] { display: none; }
.xf-day__actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 2px;
}
.xf-day__cart { gap: 8px; }
.xf-day__cart-icon,
.xf-day__cart-label { display: inline-flex; align-items: center; }
.xf-day__cart:not(.is-added) .xf-day__cart-icon--check,
.xf-day__cart:not(.is-added) .xf-day__cart-label--added,
.xf-day__cart.is-added .xf-day__cart-icon--bag,
.xf-day__cart.is-added .xf-day__cart-label--idle { display: none; }
.xf-day__cart.is-added {
background: var(--surface-3);
color: var(--text);
border-color: var(--line);
box-shadow: none;
}
@media (hover: hover) {
.xf-day__cart.is-added:hover {
background: var(--surface-3);
color: var(--accent-2);
border-color: var(--accent-line);
box-shadow: none;
}
}
@media (max-width: 767px) {
.xf-day {
flex-direction: column;
align-items: stretch;
gap: 20px;
padding: 18px;
}
.xf-day__media {
flex-basis: auto;
max-width: none;
width: 100%;
aspect-ratio: 16 / 10;
}
.xf-day-price__val { font-size: 26px; }
.xf-day__actions { flex-wrap: nowrap; }
.xf-day__cart { flex: 1 1 0; }
}
.xf-day--duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
}
.xf-day__item {
min-width: 0;
padding-right: 28px;
}
.xf-day__item + .xf-day__item {
padding-right: 0;
padding-left: 28px;
border-left: 1px solid var(--line-soft);
}
@media (min-width: 768px) {
.xf-day--duo { grid-template-rows: repeat(7, auto); }
.xf-day--duo .xf-day__item {
grid-row: 1 / -1;
display: grid;
grid-template-rows: subgrid;
row-gap: 0;
justify-items: start;
}
.xf-day--duo .xf-day__info { display: contents; }
.xf-day--duo .xf-day__media { grid-column: 1 / 2; justify-self: stretch; }
.xf-day--duo .xf-day__timer { grid-column: 1 / -1; grid-row: 1; margin-bottom: 14px; justify-self: stretch; }
.xf-day--duo .xf-day__name { grid-column: -2 / -1; grid-row: 3; }
.xf-day--duo .xf-product-card__stock { grid-column: -2 / -1; grid-row: 4; margin-top: 14px; }
.xf-day--duo .xf-day-price { grid-column: -2 / -1; grid-row: 5; margin-top: 14px; }
.xf-day--duo .xf-day__actions { grid-column: -2 / -1; grid-row: 6; margin-top: 16px; }
.xf-day--duo .xf-day__admin { grid-column: -2 / -1; grid-row: 7; margin-top: 14px; }
}
@supports not (grid-template-rows: subgrid) {
@media (min-width: 768px) {
.xf-day--duo { grid-template-rows: none; }
.xf-day--duo .xf-day__item { grid-row: auto; display: flex; flex-direction: column; }
.xf-day--duo .xf-day__info {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1 auto;
min-width: 0;
}
.xf-day--duo .xf-day__actions { margin-top: auto; padding-top: 16px; }
}
@media (min-width: 1200px) {
.xf-day--duo .xf-day__item { flex-direction: row; align-items: stretch; gap: 22px; }
.xf-day--duo .xf-day__media { flex: 0 0 42%; min-width: 220px; align-self: center; }
}
}
.xf-day--duo .xf-day__media--empty { min-height: 0; }
.xf-day--duo .xf-day__photo {
max-width: 94cqi;
max-height: 94cqb;
}
.xf-day--duo .xf-day__info {
max-width: none;
gap: 0;
}
.xf-day--duo .xf-day__admin { display: flex; }
.xf-day--duo .xf-day__admin { order: 1; }
.xf-day--duo .xf-day__name {
font-size: 20px;
line-height: 1.25;
letter-spacing: -0.3px;
text-wrap: balance;
}
.xf-day--duo .xf-day-price__val { font-size: 30px; }
.xf-day--duo .xf-day-price__was { font-size: 15px; }
.xf-day--duo .xf-day__timer {
background: var(--accent-dim);
background: color-mix(in srgb, var(--accent) 7%, var(--surface));
border: 1px solid transparent;
border-radius: 12px;
padding: 9px 14px;
gap: 10px;
}
.xf-day--duo .xf-day__tag { font-size: 14px; }
.xf-day--duo .xf-day__timer-label { font-size: 15px; }
.xf-day--duo .xf-day__countdown { margin-left: auto; }
.xf-day--duo .xf-day__sep { font-size: 14px; }
.xf-day--duo .xf-day__num { font-size: 24px; color: var(--success-ink); }
.xf-day--duo .xf-day__cart:not(.is-added) {
background: var(--success);
box-shadow: 0 6px 20px -8px var(--success), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
}
@media (min-width: 768px) {
.xf-day--duo .xf-day__item + .xf-day__item {
border-left-width: 1.5px;
border-left-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
}
@media (min-width: 1200px) {
.xf-day--duo { grid-template-rows: auto auto auto auto auto 1fr auto; }
.xf-day--duo .xf-day__actions { align-self: end; }
.xf-day--duo .xf-day__item {
grid-template-columns: minmax(240px, min(46%, 340px)) minmax(0, 1fr);
column-gap: 22px;
}
.xf-day--duo .xf-day__media {
grid-row: 3 / 7;
align-self: start;
min-height: 100%;
aspect-ratio: 1 / 1;
}
.xf-day--duo[data-xf-day-count="1"] { grid-template-columns: 1fr; }
.xf-day--duo[data-xf-day-count="1"] .xf-day__item {
grid-template-rows: none;
display: flex;
flex-direction: row;
align-items: center;
gap: 44px;
padding-left: 0;
padding-right: 0;
border-left: 0;
}
.xf-day--duo[data-xf-day-count="1"] .xf-day__info {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
max-width: 640px;
}
.xf-day--duo[data-xf-day-count="1"] .xf-day__media {
flex: 0 0 46%;
max-width: 600px;
align-self: center;
min-height: 0;
}
.xf-day--duo[data-xf-day-count="1"] .xf-day__name { font-size: 26px; letter-spacing: -0.4px; }
.xf-day--duo[data-xf-day-count="1"] .xf-day-price__val { font-size: 34px; }
.xf-day--duo[data-xf-day-count="1"] .xf-day__timer { padding: 10px 16px; gap: 12px; }
.xf-day--duo[data-xf-day-count="1"] .xf-day__num { font-size: 20px; }
}
@media (max-width: 1279px) {
.xf-day__timer--claim {
display: grid;
grid-template-columns: 1fr auto;
}
.xf-day__timer--claim .xf-day__tag {
grid-column: 1 / -1;
justify-self: start;
}
.xf-day__timer--claim .xf-day__countdown { grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.xf-day--duo .xf-day__item {
grid-template-columns: minmax(0, 1fr);
padding-right: 24px;
}
.xf-day--duo .xf-day__item + .xf-day__item { padding-right: 0; padding-left: 24px; }
.xf-day--duo .xf-day__media {
grid-row: 2 / 3;
width: 100%;
min-width: 0;
aspect-ratio: 16 / 10;
}
.xf-day--duo .xf-day__media { margin-bottom: 18px; }
.xf-day--duo[data-xf-day-count="1"] { grid-template-columns: 1fr; }
.xf-day--duo[data-xf-day-count="1"] .xf-day__item {
grid-template-rows: none;
display: flex;
flex-direction: row;
align-items: center;
gap: 28px;
padding: 0;
border-left: 0;
}
.xf-day--duo[data-xf-day-count="1"] .xf-day__info {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.xf-day--duo[data-xf-day-count="1"] .xf-day__media {
flex: 0 0 40%;
width: auto;
max-width: 420px;
aspect-ratio: 16 / 11;
align-self: center;
}
.xf-day--duo[data-xf-day-count="1"] .xf-day__media { margin-bottom: 0; }
}
@media (min-width: 768px) and (max-width: 899px) {
.xf-day--duo .xf-day__num { font-size: 20px; }
}
@media (max-width: 767px) {
.xf-day--duo {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 18px 0;
}
.xf-day--duo .xf-day__item {
grid-row: auto;
grid-template-rows: none;
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
column-gap: 14px;
row-gap: 0;
align-items: start;
padding-right: 0;
}
.xf-day--duo .xf-day__item + .xf-day__item {
padding-left: 0;
padding-top: 18px;
border-left: 0;
border-top: 1px solid var(--line-soft);
border-top: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.xf-day--duo .xf-day__info { display: contents; }
.xf-day--duo .xf-day__media {
grid-column: 1;
grid-row: 2 / span 3;
margin-bottom: 0;
width: 112px;
min-width: 0;
aspect-ratio: 1;
align-self: start;
}
.xf-day--duo .xf-day__timer { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px; padding: 10px 12px; }
.xf-day--duo .xf-day__num { font-size: 20px; }
.xf-day--duo .xf-day__name { grid-column: 2; grid-row: 2; font-size: 16px; line-height: 1.3; }
.xf-day--duo .xf-product-card__stock { grid-column: 2; grid-row: 3; margin-top: 8px; }
.xf-day--duo .xf-day-price { grid-column: 2; grid-row: 4; margin-top: 8px; }
.xf-day--duo .xf-day-price__val { font-size: 22px; }
.xf-day--duo .xf-day__actions { grid-column: 1 / -1; grid-row: 5; margin-top: 14px; }
.xf-day--duo .xf-day__admin { grid-column: 1 / -1; grid-row: 6; margin-top: 10px; }
.xf-day--duo .xf-product-card__guarantee { display: none; }
.xf-day--duo[data-xf-day-count="1"] .xf-day__item {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
padding-top: 0;
}
.xf-day--duo[data-xf-day-count="1"] .xf-day__info {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
gap: 16px;
}
.xf-day--duo[data-xf-day-count="1"] .xf-day__media {
width: 100%;
aspect-ratio: 16 / 10;
align-self: stretch;
margin-bottom: 0;
}
.xf-day--duo[data-xf-day-count="1"] .xf-day__timer { margin-bottom: 0; }
.xf-day--duo[data-xf-day-count="1"] .xf-product-card__stock,
.xf-day--duo[data-xf-day-count="1"] .xf-day-price,
.xf-day--duo[data-xf-day-count="1"] .xf-day__actions,
.xf-day--duo[data-xf-day-count="1"] .xf-day__admin { margin-top: 0; }
.xf-day--duo[data-xf-day-count="1"] .xf-day__name { font-size: 26px; line-height: 1.2; letter-spacing: -0.4px; }
.xf-day--duo[data-xf-day-count="1"] .xf-day-price__val { font-size: 26px; }
.xf-day--duo[data-xf-day-count="1"] .xf-product-card__guarantee { display: block; }
}
html[data-theme="dark"] .xf-day {
border: 1px solid oklch(1 0 0 / 0.10);
background: var(--surface);
box-shadow: var(--nx-edge);
}
html[data-theme="dark"] .xf-day--duo .xf-day__item + .xf-day__item { border-color: var(--line-soft); }
html[data-theme="dark"] .xf-day__tag {
border-color: transparent;
background: var(--accent);
color: #fff;
}
html[data-theme="dark"] .xf-day__timer {
background: transparent;
border-color: var(--line);
}
html[data-theme="dark"] .xf-day--duo .xf-day__num { color: var(--nx-core); text-shadow: var(--nx-glow); }
html[data-theme="dark"] .xf-day--duo .xf-day__cart:not(.is-added) {
background: var(--accent);
color: #fff;
box-shadow: var(--nx-key);
}
.xf-products__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 28px;
gap: 20px;
flex-wrap: wrap;
}
.xf-products__freshness {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-3);
letter-spacing: 0.3px;
}
.xf-products__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.xf-product-card {
position: relative;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 16px;
overflow: hidden;
transition: border-color .2s, transform .2s, box-shadow .2s;
color: var(--text);
display: flex;
flex-direction: column;
container-type: inline-size;
}
@media (hover: hover) {
.xf-product-card:hover {
border-color: var(--accent-line);
transform: translateY(calc(-2px * var(--xf-motion, 1)));
box-shadow: var(--shadow-card);
}
}
html[data-theme="dark"] .xf-product-card { box-shadow: var(--nx-edge); }
@media (hover: hover) {
html[data-theme="dark"] .xf-product-card:hover {
box-shadow: var(--nx-edge), 0 18px 40px -22px oklch(0.56 0.25 300 / 0.8);
}
}
html[data-theme="dark"] .xf-product-card__image {
margin: 8px 8px 0;
border-radius: 10px;
}
.xf-product-card__link {
position: absolute;
inset: 0;
z-index: 1;
text-decoration: none;
cursor: pointer;
}
.xf-product-card__link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
border-radius: 16px;
}
.xf-product-card .xf-art,
.xf-product-card__stickers {
pointer-events: none;
}
.xf-product-card__image {
position: relative;
aspect-ratio: 1;
overflow: hidden;
}
.xf-product-card__stickers {
position: absolute;
top: 12px;
left: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
z-index: 2;
pointer-events: none;
}
.xf-product-card__sticker {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--surface-2);
color: var(--text-2);
border: 1px solid var(--line);
padding: 4px 9px;
border-radius: 999px;
line-height: 1;
}
.xf-product-card__sticker--hit {
background: var(--accent);
color: #fff;
border-color: transparent;
}
.xf-product-card__sticker--sale {
background: oklch(0.70 0.18 32);
color: #fff;
border-color: transparent;
}
.xf-product-card__guarantee {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
box-sizing: border-box;
min-width: 128px;
padding: 6px 12px;
text-align: center;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.005em;
color: oklch(0.96 0.005 285);
background: oklch(0.30 0.04 268);
border-radius: 8px 0 0 0;
line-height: 1.2;
white-space: nowrap;
}
.xf-product-card__like-icons {
position: absolute;
top: 12px;
right: 12px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 2;
}
.xf-product-card__like-btn {
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--surface);
color: var(--text-2);
border: 1px solid var(--line-soft);
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, color .2s, border-color .2s, transform .12s, opacity .2s;
cursor: pointer;
padding: 0;
font: inherit;
opacity: 0.75;
}
@media (hover: hover) {
.xf-product-card:hover .xf-product-card__like-btn { opacity: 1; }
}
@media (hover: hover) {
.xf-product-card__like-btn:hover {
background: var(--accent);
color: #fff;
border-color: transparent;
transform: scale(calc(1 + 0.05 * var(--xf-motion, 1)));
}
}
.xf-product-card__like-btn:active { transform: scale(calc(1 - 0.08 * var(--xf-motion, 1))); }
.xf-product-card__like-btn.is-busy { opacity: .5; pointer-events: none; }
.xf-product-card__like-btn.is-active {
background: var(--accent);
color: #fff;
border-color: transparent;
opacity: 1;
}
.xf-product-card__like-btn--wish.is-active {
background: #e11d48;
}
@media (hover: hover) {
.xf-product-card__like-btn--wish:hover {
background: #e11d48;
}
}
.xf-product-card__like-btn--wish.is-active svg { fill: currentColor; }
:where(html[data-theme="dark"]) .xf-product-card__like-btn {
background: oklch(1 0 0 / 0.5);
border-color: oklch(0.2 0.02 292 / 0.10);
color: oklch(0.30 0.02 292);
}
.xf-product-card__body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
flex: 1;
}
.xf-product-card__stock-row {
margin-bottom: 10px;
}
.xf-product-card__stock {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
}
.xf-product-card__stock-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
flex: 0 0 auto;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.xf-product-card__stock--in { color: var(--success-ink); }
.xf-product-card__stock--none { color: var(--warning); }
.xf-product-card__stock--preorder { color: var(--text-3); }
.xf-product-card__article {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-3);
letter-spacing: 0;
margin-top: 2px;
}
.xf-product-card__title {
position: relative;
z-index: 2;
font-size: 13.5px;
font-weight: 500;
line-height: 1.4;
color: var(--text);
min-height: calc(1.4em * 3);
max-height: calc(1.4em * 3);
margin-bottom: 14px;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.xf-product-card__spec {
font-size: 11.5px;
font-weight: 500;
line-height: 1.35;
letter-spacing: 0.005em;
color: var(--text-2);
min-height: 1.35em;
max-height: 1.35em;
margin: -6px 0 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.xf-secpage__grid .xf-product-card__spec--off { display: none; }
.xf-product-card__foot {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
flex: 1;
}
.xf-product-card__price-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.xf-product-card__installment {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-2);
letter-spacing: -0.01em;
white-space: nowrap;
}
.xf-product-card__installment-sum,
.xf-product-card__installment-term { white-space: nowrap; }
.xf-product-card__cart-btn {
position: relative;
z-index: 2;
width: 100%;
height: 36px;
margin-top: auto;
border-radius: 10px;
background: var(--surface-2);
color: var(--text-2);
border: 1px solid var(--line-soft);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background .2s, color .2s, border-color .2s, transform .12s;
flex: 0 0 auto;
cursor: pointer;
padding: 0;
font: inherit;
}
.xf-product-card__cart-label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.xf-product-card__cart-icon { display: inline-flex; align-items: center; }
.xf-product-card__cart-btn:not(.is-added) .xf-product-card__cart-label--added,
.xf-product-card__cart-btn:not(.is-added) .xf-product-card__cart-icon--check,
.xf-product-card__cart-btn.is-added .xf-product-card__cart-label--idle,
.xf-product-card__cart-btn.is-added .xf-product-card__cart-icon--bag {
display: none;
}
@media (hover: hover) {
.xf-product-card:hover .xf-product-card__cart-btn {
background: var(--accent);
color: #fff;
border-color: transparent;
}
}
@media (hover: hover) {
.xf-product-card__cart-btn:hover { transform: translateY(calc(-1px * var(--xf-motion, 1))); }
}
.xf-product-card__cart-btn:active { transform: translateY(0); }
.xf-product-card__cart-btn.is-busy { opacity: .6; pointer-events: none; }
.xf-product-card__cart-btn.is-added {
background: var(--surface-3);
color: var(--text);
border-color: var(--line);
}
@media (hover: hover) {
.xf-product-card:hover .xf-product-card__cart-btn.is-added {
background: var(--surface-3);
color: var(--accent-2);
border-color: var(--accent-line);
}
}
html[data-theme="dark"] .xf-product-card__cart-btn {
border: 1px solid oklch(1 0 0 / 0.32);
background: transparent;
color: var(--text);
}
@media (hover: hover) {
html[data-theme="dark"] .xf-product-card:hover .xf-product-card__cart-btn {
border-color: transparent;
background: var(--accent);
color: #fff;
}
html[data-theme="dark"] .xf-product-card:hover .xf-product-card__cart-btn.is-added {
border-color: var(--accent-line);
background: transparent;
color: var(--accent-2);
}
}
.xf-secpage__sort-submit {
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
padding: 7px 14px;
background: var(--accent);
color: #fff;
border: 0;
border-radius: 8px;
cursor: pointer;
margin-left: 8px;
}
.xf-secpage__sort-submit:hover { background: var(--accent-2); }
.xf-promo {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.xf-promo__card {
position: relative;
padding: 40px 44px;
min-height: 280px;
background: var(--surface-2);
border: 1px solid var(--accent-line);
border-radius: 18px;
overflow: hidden;
transition: border-color .2s, background .2s;
color: var(--text);
display: block;
}
@media (hover: hover) {
.xf-promo__card:hover { border-color: var(--accent); }
}
.xf-promo__art-wrap {
position: absolute;
top: 16px;
left: 52%;
right: clamp(20px, 7%, 120px);
height: calc(100% + 56px);
transition: transform .3s;
}
@media (hover: hover) {
.xf-promo__card:hover .xf-promo__art-wrap { transform: translateY(calc(-6px * var(--xf-motion, 1))); }
}
.xf-promo__pc {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: right top;
}
.xf-promo__pc--dark { display: none; }
.xf-promo__body {
position: relative;
max-width: 440px;
}
.xf-promo__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2px;
color: var(--accent-2);
margin-bottom: 12px;
text-transform: uppercase;
}
.xf-promo__title {
margin: 0 0 14px;
font-size: 36px;
font-weight: 600;
letter-spacing: -1.2px;
line-height: 1.05;
}
.xf-promo__text {
margin: 0 0 28px;
font-size: 15px;
color: var(--text-2);
line-height: 1.5;
max-width: 380px;
}
@media (min-width: 768px) and (max-width: 1023px) {
.xf-promo__body { max-width: 50%; }
.xf-promo__title { text-wrap: balance; }
.xf-promo__art-wrap { left: 56%; }
}
html[data-theme="dark"] .xf-promo__card {
border: 1px solid oklch(1 0 0 / 0.10);
background:
linear-gradient(100deg, oklch(0.135 0.008 292 / 0.96) 32%, oklch(0.135 0.008 292 / 0.3) 100%),
url(/local/templates/xcore_front/css/../images/neon/promo-pcb-1.svg) center / cover no-repeat,
var(--surface);
box-shadow: var(--nx-edge);
}
html[data-theme="dark"] .xf-promo__eyebrow { display: none; }
html[data-theme="dark"] .xf-promo__pc--light { display: none; }
html[data-theme="dark"] .xf-promo__pc--dark {
display: block;
filter: drop-shadow(0 0 28px oklch(0.62 0.24 305 / 0.45));
}
@media (max-width: 767px) {
html[data-theme="dark"] .xf-promo__card {
background:
linear-gradient(100deg, oklch(0.135 0.008 292 / 0.94) 40%, oklch(0.135 0.008 292 / 0.5) 100%),
url(/local/templates/xcore_front/css/../images/neon/promo-pcb-1.svg) center / cover no-repeat,
var(--surface);
}
}
.xf-brands {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.xf-brand {
aspect-ratio: 2.4;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 14px;
color: var(--xf-brand-ink, var(--text-3));
transition: color .2s, border-color .2s, transform .2s, background .2s;
padding: 12px 20px;
text-decoration: none;
}
html[data-theme="dark"] .xf-brand {
color: var(--xf-brand-ink-dark, var(--xf-brand-ink, var(--text-3)));
background: var(--surface);
border-color: var(--line-soft);
box-shadow: var(--nx-edge);
}
.xf-brand__logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.xf-brand__logo svg {
display: block;
width: 100%;
height: 100%;
max-width: 80%;
max-height: 100%;
object-fit: contain;
}
@media (hover: hover) {
.xf-brand:hover {
border-color: var(--accent-line);
background: var(--surface-2);
transform: translateY(calc(-2px * var(--xf-motion, 1)));
}
}
.xf-brands--marquee {
display: block;
position: relative;
overflow-x: clip;
}
.xf-brands--marquee::before,
.xf-brands--marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 88px;
z-index: 2;
pointer-events: none;
}
.xf-brands--marquee::before {
left: 0;
background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.xf-brands--marquee::after {
right: 0;
background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}
.xf-brands__track {
display: flex;
gap: 12px;
width: max-content;
animation: xf-brand-marquee 70s linear infinite;
will-change: transform;
}
@media (hover: hover) {
.xf-brands--marquee:hover .xf-brands__track,
.xf-brands--marquee:focus-within .xf-brands__track {
animation-play-state: paused;
}
}
.xf-brands--offscreen .xf-brands__track { animation-play-state: paused; }
.xf-brands--marquee .xf-brand {
flex: 0 0 200px;
}
@keyframes xf-brand-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.xf-brands__track { animation: none; }
.xf-brands--marquee { overflow-x: auto; overflow-y: visible; }
}
.xf-brands--marquee:focus-within {
overflow-x: auto;
overflow-y: visible;
}
.xf-brands--marquee:focus-within .xf-brands__track {
animation: none;
}
@media (max-width: 1024px) {
.xf-brands { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
.xf-brands { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xf-brand { padding: 10px 14px; }
.xf-brand__logo svg { max-height: 100%; }
}
@media (max-width: 767px) {
.xf-home__section { padding: 32px 0 16px; }
.xf-home__section--hero { padding: 16px 0 16px; }
.xf-home__section--trust { padding: 16px 0; }
.xf-home__section--presets { padding: 8px 0 16px; }
.xf-hero {
min-height: 440px;
max-height: none;
aspect-ratio: auto;
border-radius: 18px;
}
.xf-hero--banners {
min-height: 0;
aspect-ratio: 736 / 506;
}
.xf-hero__slide {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.xf-hero__text { padding: 28px 24px 20px; }
.xf-hero__eyebrow { margin-bottom: 12px; font-size: 11px; letter-spacing: 2px; }
.xf-hero__title { font-size: 40px; letter-spacing: -1.5px; min-height: 0; }
.xf-hero__subtitle { margin: 14px 0 20px; font-size: 15px; }
.xf-hero__ctas .xf-btn:first-child { flex: 1; justify-content: center; }
.xf-hero__ctas .xf-btn--ghost { display: none; }
.xf-hero__art { margin: 0 24px 52px; border-radius: 14px; min-height: 160px; }
.xf-hero__dots { bottom: 14px; }
.xf-hero__nav { display: none; }
.xf-hero__chips { top: 12px; right: 12px; }
.xf-catgrid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
gap: 10px;
}
.xf-catgrid__featured {
grid-column: 1 / -1;
grid-row: auto;
}
.xf-catgrid--16 {
grid-template-rows: none;
}
.xf-cat-tile { height: 120px; padding: 14px; border-radius: 14px; }
.xf-cat-tile__name { font-size: 14px; margin-top: 6px; max-width: 100%; }
.xf-cat-tile__icon { width: 44px; height: 44px; right: 12px; bottom: 12px; border-radius: 11px; }
.xf-cat-tile__icon svg { width: 22px; height: 22px; }
.xf-cat-tile__arrow { top: 12px; right: 12px; width: 28px; height: 28px; }
.xf-cat-tile__arrow svg { width: 12px; height: 12px; }
.xf-cat-tile--xl {
height: auto;
min-height: 260px;
padding: 22px;
grid-template-rows: auto 120px;
row-gap: 14px;
}
.xf-cat-tile--xl .xf-cat-tile__name { font-size: 22px; margin-top: 8px; }
.xf-cat-tile--xl .xf-cat-tile__desc { font-size: 13px; max-width: none; margin-top: 6px; }
.xf-cat-tile--xl .xf-cat-tile__art {
grid-row: 2;
width: 100%;
max-height: 120px;
min-height: 100px;
justify-self: stretch;
}
.xf-cat-tile--xl .xf-cat-tile__arrow { top: 20px; right: 20px; }
.xf-trustbar { grid-template-columns: 1fr 1fr; gap: 10px; }
.xf-trustbar__item { padding: 14px 14px; gap: 12px; border-radius: 12px; }
.xf-trustbar__icon { width: 36px; height: 36px; border-radius: 9px; }
.xf-trustbar__title { font-size: 13px; }
.xf-trustbar__text { font-size: 11.5px; }
.xf-promo { grid-template-columns: 1fr; gap: 10px; }
.xf-promo__card { padding: 28px 22px; min-height: 220px; border-radius: 16px; }
.xf-promo__title { font-size: 26px; margin-bottom: 10px; letter-spacing: -0.8px; }
.xf-promo__text { font-size: 14px; margin-bottom: 20px; max-width: none; }
.xf-promo__card {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "eyebrow eyebrow" "title title" "text art" "cta cta";
column-gap: 12px;
}
.xf-promo__body { display: contents; }
.xf-promo__eyebrow { grid-area: eyebrow; }
.xf-promo__title { grid-area: title; text-wrap: balance; }
.xf-promo__text { grid-area: text; align-self: center; }
.xf-promo__card .xf-btn { grid-area: cta; justify-self: start; }
.xf-promo__art-wrap { position: static; grid-area: art; height: 150px; margin-bottom: 20px; }
.xf-promo__pc { width: auto; }
.xf-brands { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xf-brand { padding: 10px 14px; border-radius: 12px; }
.xf-brand__logo svg { max-width: 80%; max-height: 100%; }
.xf-brands--marquee::before,
.xf-brands--marquee::after { width: 32px; }
.xf-brands--marquee .xf-brand { flex: 0 0 160px; }
.xf-brands__track { animation-duration: 50s; }
.xf-products__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.xf-section-head__title, .xf-products__head .xf-section-head__title {
font-size: 22px;
letter-spacing: -0.6px;
}
.xf-section-head__eyebrow { font-size: 10.5px; letter-spacing: 2px; }
.xf-products__head { margin-bottom: 18px; gap: 12px; }
.xf-product-card { border-radius: 14px; }
.xf-product-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.xf-product-card__stickers { top: 10px; left: 10px; gap: 5px; }
.xf-product-card__sticker { font-size: 9.5px; padding: 3px 7px; }
.xf-product-card .xf-product-card__guarantee { min-width: 88px; font-size: 9px; padding: 3px 6px; letter-spacing: 0; border-radius: 6px 0 0 0; }
.xf-product-card .xf-art--photo .xf-art__photo-wrap { min-width: 122px; }
.xf-product-card__like-icons { top: 10px; right: 10px; gap: 6px; }
.xf-product-card__like-btn { width: 44px; height: 44px; border-radius: 12px; opacity: 1; }
.xf-product-card__like-btn svg { width: 18px; height: 18px; }
.xf-product-card__stock { font-size: 11px; }
.xf-product-card__title {
font-size: 14px;
line-height: 1.35;
min-height: calc(1.35em * 5);
max-height: calc(1.35em * 5);
margin-bottom: 12px;
-webkit-line-clamp: 5;
line-clamp: 5;
}
.xf-product-card__spec { margin: -2px 0 8px; }
.xf-product-card .xf-price__val { font-size: 20px; letter-spacing: -0.4px; }
.xf-product-card__installment { font-size: 10.5px; white-space: normal; }
.xf-product-card__installment-sep { display: none; }
.xf-product-card__installment-term { display: block; }
.xf-product-card__article { font-size: 10px; }
.xf-product-card__cart-btn { height: 42px; }
.xf-product-card__cart-btn svg { width: 18px; height: 18px; }
.xf-product-card__cart-label { font-size: 13.5px; }
}
/* End */
/* Start:/local/templates/xcore_front/css/catalog.xfmin-1-16595.css?17928314016449*/
.xf-catpage__head {
padding: 32px 0 16px;
}
.xf-crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
font-size: 13px;
color: var(--text-3);
margin-bottom: 18px;
}
.xf-crumbs a { color: var(--text-3); transition: color .15s; }
@media (hover: hover) {
.xf-crumbs a:hover { color: var(--text-2); }
}
.xf-crumbs > span:last-child { color: var(--text-2); }
.xf-catpage__title-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.xf-catpage__title {
margin: 0;
font-size: 44px;
font-weight: 600;
letter-spacing: -1.5px;
line-height: 1.05;
}
.xf-catpage__meta {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-3);
font-size: 13.5px;
}
.xf-catpage__meta .xf-mono { font-family: var(--font-mono); color: var(--text-2); }
.xf-catpage__lead {
margin: 16px 0 0;
font-size: 15px;
color: var(--text-2);
line-height: 1.5;
max-width: 640px;
}
.xf-brand-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0 0;
}
.xf-brand-chip {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-2);
text-decoration: none;
transition: border-color .2s, background .2s, transform .15s, color .2s;
white-space: nowrap;
}
.xf-brand-chip.is-current {
border-color: var(--accent-line);
color: var(--text);
font-weight: 600;
cursor: default;
}
@media (hover: hover) {
.xf-brand-chip:not(.is-current):hover {
border-color: var(--accent-line);
background: var(--accent-dim);
color: var(--accent-2);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
}
.xf-facet-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 16px 0 0;
}
.xf-facet-chip {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: var(--accent-dim);
border: 1px solid var(--accent-line);
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
color: var(--accent-2);
text-decoration: none;
transition: border-color .2s, background .2s, transform .15s, color .2s;
white-space: nowrap;
}
@media (hover: hover) {
.xf-facet-chip:hover {
border-color: var(--accent);
background: var(--accent-dim);
color: var(--accent-3);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
html[data-theme="dark"] .xf-facet-chip:hover {
background: var(--accent-dim-hover);
color: var(--accent-2);
}
}
.xf-catpage__seo {
max-width: 760px;
font-size: 14px;
line-height: 1.65;
color: var(--text-2);
}
.xf-catpage__seo h1,
.xf-catpage__seo h2,
.xf-catpage__seo h3,
.xf-catpage__seo h4 {
margin: 0 0 10px;
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.xf-catpage__seo p { margin: 0 0 10px; }
.xf-catpage__seo ul,
.xf-catpage__seo ol { margin: 0 0 10px; padding-left: 20px; }
.xf-catpage__lead a,
.xf-catpage__seo a {
color: var(--accent-2);
text-decoration: underline;
text-decoration-color: var(--link-line);
text-underline-offset: 3px;
transition: color .15s, text-decoration-color .15s;
}
@media (hover: hover) {
.xf-catpage__lead a:hover,
.xf-catpage__seo a:hover {
color: var(--text);
text-decoration-color: var(--accent-2);
}
}
.xf-catgrid--16 {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}
@media (max-width: 767px) {
.xf-catgrid--16 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.xf-cat-tile:has(.xf-cat-tile__art) {
height: auto;
min-height: 200px;
padding: 14px;
}
.xf-cat-tile:has(.xf-cat-tile__art) .xf-cat-tile__art {
height: 72px;
margin-bottom: 10px;
}
.xf-cat-tile:has(.xf-cat-tile__art) .xf-cat-tile__art--cover {
height: 110px;
}
.xf-cat-tile:has(.xf-cat-tile__art) .xf-cat-tile__art--static {
height: 130px;
}
.xf-cat-tile:has(.xf-cat-tile__art--cover) .xf-cat-tile__name,
.xf-cat-tile:has(.xf-cat-tile__art--static) .xf-cat-tile__name {
-webkit-line-clamp: 2;
line-clamp: 2;
}
.xf-brand-chips,
.xf-facet-chips { gap: 10px; }
.xf-brand-chip,
.xf-facet-chip {
padding: 11px 16px;
min-height: 44px;
}
.xf-brand-chips,
.xf-facet-chips {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-inline: calc(var(--container-pad) * -1);
padding: 4px var(--container-pad);
scroll-padding-inline: var(--container-pad);
}
.xf-brand-chips::-webkit-scrollbar,
.xf-facet-chips::-webkit-scrollbar { display: none; }
.xf-brand-chip,
.xf-facet-chip { flex: 0 0 auto; }
[data-xf-chip-rail] { --xf-rail-fade: 32px; }
[data-xf-chip-rail].is-fade-right {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--xf-rail-fade)), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - var(--xf-rail-fade)), transparent);
}
[data-xf-chip-rail].is-fade-left {
-webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--xf-rail-fade)), transparent);
mask-image: linear-gradient(to left, #000 calc(100% - var(--xf-rail-fade)), transparent);
}
[data-xf-chip-rail].is-fade-left.is-fade-right {
-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--xf-rail-fade), #000 calc(100% - var(--xf-rail-fade)), transparent);
mask-image: linear-gradient(to right, transparent, #000 var(--xf-rail-fade), #000 calc(100% - var(--xf-rail-fade)), transparent);
}
.xf-brand-chip__pre {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.xf-cat-tile:not(:has(.xf-cat-tile__art)) {
height: auto;
min-height: 160px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.xf-cat-tile:not(:has(.xf-cat-tile__art)) .xf-cat-tile__icon {
position: static;
width: 100%;
height: 72px;
border-radius: 12px;
}
.xf-cat-tile:not(:has(.xf-cat-tile__art)) .xf-cat-tile__icon svg {
width: 36px;
height: 36px;
}
.xf-cat-tile:not(:has(.xf-cat-tile__art)) .xf-cat-tile__icon-img {
max-width: 50%;
max-height: 60%;
}
.xf-cat-tile:not(:has(.xf-cat-tile__art)) .xf-cat-tile__body {
flex: 1;
margin-top: 0;
}
.xf-cat-tile__name {
max-width: 100%;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
font-size: 13.5px;
}
.xf-cat-tile .xf-pill { white-space: nowrap; }
.xf-cat-tile__desc--compact {
font-size: 12px;
margin-top: 3px;
}
}
.xf-cat-tile__desc--compact {
margin-top: 4px;
font-size: 12.5px;
color: var(--text-3);
max-width: 100%;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* End */
/* Start:/local/templates/xcore_front/css/catsection.xfmin-1-56122.css?179284648519937*/
.xf-secpage {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: flex-start;
}
.xf-filters {
position: sticky;
top: calc(110px + var(--xf-header-h, 154px) - 154px);
max-height: calc(100vh - 130px - (var(--xf-header-h, 154px) - 154px));
display: flex;
flex-direction: column;
gap: 0;
}
.xf-filters__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
flex: 0 0 auto;
}
.xf-filters__body {
flex: 1 1 auto;
overflow-y: auto;
padding-right: 10px;
margin-right: -10px;
padding-left: 4px;
margin-left: -4px;
min-height: 0;
}
.xf-filters__actions {
flex: 0 0 auto;
display: flex;
gap: 10px;
padding-top: 14px;
margin-top: 4px;
border-top: 1px solid var(--line-soft);
background: var(--bg);
position: relative;
}
.xf-filters__actions::before {
content: "";
position: absolute;
top: -20px;
left: 0;
right: 10px;
height: 20px;
pointer-events: none;
background: linear-gradient(to top, var(--bg), rgba(255,255,255,0));
}
@media (min-width: 768px) {
.xf-secpage__filters { align-self: stretch; }
.xf-filters__actions {
position: sticky;
bottom: 0;
z-index: 2;
}
body.xf-cookie-up .xf-filters__actions { bottom: var(--xf-cookie-h, 72px); }
.xf-filters[data-xf-stick-shift] {
top: var(--xf-stick-top);
max-height: calc(100vh - var(--xf-stick-top) - 20px);
}
}
.xf-filters__title {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.xf-filters__reset {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-3);
transition: color .15s;
}
@media (hover: hover) {
.xf-filters__reset:hover { color: var(--text-2); }
}
.xf-filter-group {
border-top: 1px solid var(--line-soft);
padding: 14px 0;
}
.xf-filter-group:first-of-type { border-top: 0; padding-top: 14px; }
.xf-filter-group > summary {
list-style: none;
cursor: pointer;
font-size: 13.5px;
font-weight: 500;
color: var(--text);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 2px 0;
user-select: none;
}
.xf-filter-group > summary::-webkit-details-marker { display: none; }
.xf-filter-group > summary::after {
content: "";
width: 14px;
height: 14px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transform: rotate(-90deg);
transition: transform .18s ease;
flex: 0 0 14px;
}
.xf-filter-group[open] > summary::after { transform: rotate(0); }
.xf-filter-group[open] > summary { margin-bottom: 12px; }
.xf-filter-group > .xf-filter-group__title {
font-size: 13.5px;
font-weight: 500;
color: var(--text);
margin-bottom: 12px;
}
.xf-filter-group__options {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 268px;
overflow-y: auto;
padding: 4px;
margin: -4px 0 -4px -4px;
}
.xf-filter-group__more {
margin-top: 4px;
padding-top: 4px;
}
.xf-filter-group__more > summary {
list-style: none;
cursor: pointer;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-3);
padding: 6px 0;
}
.xf-filter-group__more > summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
.xf-filter-group__more > summary:hover { color: var(--text-2); }
}
.xf-filter-group__more[open] > summary { color: var(--text-2); }
.xf-filter-group__more .xf-check + .xf-check { margin-top: 10px; }
.xf-check--toggle {
padding: 10px 0 6px;
}
.xf-price-range {
display: flex;
gap: 8px;
}
.xf-price-range__input {
flex: 1;
position: relative;
padding: 8px 10px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 8px;
transition: border-color .15s;
}
.xf-price-range__input:focus-within { border-color: var(--accent-line); }
.xf-price-range__input > span {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1px;
color: var(--text-2);
margin-bottom: 2px;
}
.xf-price-range__input input {
width: 100%;
background: transparent;
border: 0;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text);
padding: 0;
}
.xf-price-range__input input::-webkit-outer-spin-button,
.xf-price-range__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.xf-price-range__input input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.xf-check {
position: relative;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 13px;
color: var(--text-2);
user-select: none;
}
.xf-check input { position: absolute; opacity: 0; pointer-events: none; }
.xf-check__box {
flex: 0 0 auto;
width: 16px;
height: 16px;
border-radius: 4px;
border: 1.5px solid var(--line);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: border-color .15s, background .15s;
}
.xf-check__box::after {
content: "";
width: 9px;
height: 9px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity: 0;
transition: opacity .12s;
}
.xf-check input:focus-visible + .xf-check__box {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.xf-check input:checked + .xf-check__box {
border-color: var(--accent);
background: var(--accent);
}
.xf-check input:checked + .xf-check__box::after { opacity: 1; }
html[data-theme="dark"] .xf-check__box { border-color: oklch(1 0 0 / 0.45); }
.xf-check input:checked ~ .xf-check__label { color: var(--text); }
.xf-check__label { flex: 1; }
.xf-check__count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-3);
}
.xf-filters__apply {
flex: 1;
margin-top: 0;
}
.xf-secpage__filters .xf-filter-group > summary { min-width: 0; }
.xf-secpage__filters .xf-tip {
white-space: normal;
min-width: 0;
}
.xf-secpage__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.xf-secpage__result {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--text-2);
}
.xf-secpage__tools {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.xf-secpage__sort-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-3);
}
.xf-select {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 8px;
padding: 8px 34px 8px 12px;
font-family: var(--font-sans);
font-size: 12.5px;
color: var(--text);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px;
transition: border-color .15s;
}
@media (hover: hover) {
.xf-select:hover { border-color: var(--line); }
}
.xf-select:focus { border-color: var(--accent-line); }
.xf-secpage__compare-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 10px;
background: var(--accent-dim);
color: var(--accent-2);
border: 1px solid var(--accent-line);
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
@media (hover: hover) {
.xf-secpage__compare-pill:hover {
background: var(--accent-dim-hover);
color: var(--accent-3);
border-color: var(--accent);
}
html[data-theme="dark"] .xf-secpage__compare-pill:hover {
color: var(--accent-2);
}
}
.xf-secpage__compare-count {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: -0.02em;
}
.xf-secpage__compare-label {
color: var(--text-2);
}
.xf-secpage__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.xf-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 12px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 999px;
font-size: 12.5px;
color: var(--text-2);
transition: border-color .15s, color .15s, background .15s;
}
@media (hover: hover) {
.xf-chip:hover {
border-color: var(--accent-line);
color: var(--text);
background: var(--surface-2);
}
}
.xf-chip__x {
display: inline-flex;
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--text-3);
}
@media (hover: hover) {
.xf-chip:hover .xf-chip__x { color: var(--text-2); }
}
.xf-secpage__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (min-width: 768px) and (max-width: 1100px) {
.xf-secpage__grid { grid-template-columns: repeat(2, 1fr); }
}
.xf-secpage__empty {
padding: 40px 24px;
text-align: center;
background: var(--surface);
border: 1px dashed var(--line-soft);
border-radius: 14px;
color: var(--text-2);
font-size: 14px;
}
.xf-secpage__empty a {
color: var(--accent-2);
margin-left: 4px;
text-decoration: underline;
text-decoration-color: var(--link-line);
text-underline-offset: 3px;
transition: color .15s, text-decoration-color .15s;
}
@media (hover: hover) {
.xf-secpage__empty a:hover { color: var(--text); text-decoration-color: var(--accent-2); }
}
.xf-pagination {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--line-soft);
gap: 16px;
flex-wrap: wrap;
}
.xf-pagination__meta {
font-size: 12.5px;
color: var(--text-3);
}
.xf-pagination__pages {
display: flex;
gap: 4px;
align-items: center;
}
.xf-pagination__page {
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--line-soft);
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-2);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, border-color .15s;
}
@media (hover: hover) {
.xf-pagination__page:hover { border-color: var(--line); color: var(--text); }
}
.xf-pagination__page.is-active {
background: var(--accent);
color: #fff;
border-color: transparent;
}
.xf-pagination__gap {
color: var(--text-3);
font-family: var(--font-mono);
padding: 0 4px;
}
.xf-filter-fab,
.xf-filter-sheet__overlay,
.xf-filter-sheet__head { display: none; }
@media (max-width: 767px) {
.xf-secpage {
grid-template-columns: 1fr;
gap: 12px;
padding-bottom: 24px;
}
.xf-secpage__content { scroll-margin-top: calc(var(--xf-header-h, 118px) + 8px); }
.xf-secpage__filters {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 85vh;
max-height: 85vh;
z-index: 80;
background: var(--bg);
border-radius: 20px 20px 0 0;
box-shadow: 0 -18px 40px -12px rgba(0, 0, 0, 0.3);
transform: translateY(100%);
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
display: flex;
flex-direction: column;
overflow: hidden;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.xf-filter-open .xf-secpage__filters { transform: translateY(0); }
body.xf-cookie-up .xf-secpage__filters {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--xf-cookie-h, 120px));
}
@media (prefers-reduced-motion: reduce) {
.xf-secpage__filters { transition: none; }
}
.xf-filter-sheet__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--line-soft);
flex: 0 0 auto;
}
.xf-filter-sheet__title {
font-size: 16px;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 10px;
}
.xf-filter-sheet__close {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
color: var(--text-2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.xf-filters {
position: static;
max-height: none;
height: 100%;
flex: 1 1 auto;
padding: 14px 18px 16px;
min-height: 0;
}
.xf-filters__head { display: none; }
.xf-filters__body {
overflow-y: auto;
padding-right: 6px;
margin-right: -6px;
}
.xf-filters__actions {
padding-top: 12px;
margin-top: 10px;
background: var(--bg);
}
.xf-filters__actions::before {
top: -16px;
height: 16px;
right: 0;
}
.xf-filter-sheet__overlay {
display: block;
position: fixed;
inset: 0;
z-index: 79;
background: oklch(0 0 0 / 0.5);
opacity: 0;
pointer-events: none;
transition: opacity .28s ease;
}
body.xf-filter-open .xf-filter-sheet__overlay {
opacity: 1;
pointer-events: auto;
}
body.xf-filter-open { overflow: hidden; }
html:has(> body.xf-filter-open) { overflow: hidden; }
body.xf-filter-open .xf-secpage__filters,
body.xf-filter-open .xf-filters__body,
body.xf-filter-open .xf-filter-group__options,
body.xf-filter-open .xf-filter-more__body { overscroll-behavior: contain; }
.xf-filter-fab {
display: flex;
width: max-content;
margin: 20px auto 0;
position: sticky;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
z-index: 70;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: var(--accent);
color: #fff;
border: 0;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.02em;
box-shadow: 0 14px 30px -10px oklch(0.45 0.22 270 / 0.55);
cursor: pointer;
transition: transform .15s, box-shadow .15s;
}
.xf-filter-fab:active { transform: scale(calc(1 - 0.03 * var(--xf-motion, 1))); }
.xf-filter-fab[data-xf-filter-float] {
position: fixed;
left: 50%;
margin: 0;
transform: translateX(-50%);
}
.xf-filter-fab[data-xf-filter-float]:active { transform: translateX(-50%) scale(calc(1 - 0.03 * var(--xf-motion, 1))); }
body.xf-cookie-up .xf-filter-fab { bottom: calc(var(--xf-cookie-h, 120px) + 16px); }
.xf-filter-fab svg { width: 16px; height: 16px; }
.xf-filter-fab__badge {
font-family: var(--font-mono);
font-size: 11.5px;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: oklch(0 0 0 / 0.22);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0;
}
.xf-filter-fab__badge:empty { display: none; }
.xf-secpage__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.xf-catpage__head { margin-bottom: 4px; }
.xf-catpage__title { font-size: 26px; letter-spacing: -0.8px; }
.xf-catpage__title-row { flex-wrap: wrap; gap: 8px; }
.xf-crumbs { font-size: 12px; display: block; line-height: 1.6; }
.xf-crumbs > a, .xf-crumbs > span { display: inline; }
.xf-crumbs > *:nth-child(even) { display: none; }
.xf-crumbs > *:nth-child(odd):not(:first-child)::before {
content: "/";
margin-right: 6px;
color: var(--text-3);
}
.xf-secpage__toolbar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.xf-secpage__tools { justify-content: space-between; gap: 10px; }
.xf-select { flex: 1; padding: 9px 34px 9px 12px; font-size: 16px; }
.xf-secpage__sort-label { flex: 0 0 auto; }
.xf-secpage__chips { gap: 6px; margin-bottom: 10px; }
.xf-chip { padding: 5px 8px 5px 10px; font-size: 12px; }
.xf-pagination {
flex-direction: column;
align-items: stretch;
margin-top: 22px;
padding-top: 18px;
gap: 10px;
}
.xf-pagination__meta { text-align: center; font-size: 11.5px; }
.xf-pagination__pages { justify-content: center; flex-wrap: wrap; }
.xf-pagination__page { min-width: 44px; height: 44px; padding: 0 10px; font-size: 13.5px; }
.xf-check { min-height: 44px; }
}
html[data-theme="dark"] .xf-filter-fab {
box-shadow: var(--nx-key), 0 14px 30px -12px oklch(0.50 0.24 296 / 0.6);
}
.xf-filter-more {
border-top: 1px solid var(--line-soft);
margin-top: 4px;
}
.xf-filter-more__summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 0;
font-size: 13.5px;
font-weight: 500;
color: var(--text-2);
transition: color .15s;
}
.xf-filter-more__summary::-webkit-details-marker { display: none; }
.xf-filter-more__summary::after {
content: "";
flex: 0 0 auto;
width: 16px;
height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transform: rotate(-90deg);
transition: transform .18s;
}
.xf-filter-more[open] > .xf-filter-more__summary::after { transform: rotate(0); }
.xf-filter-more[open] > .xf-filter-more__summary { color: var(--text); }
@media (hover: hover) {
.xf-filter-more__summary:hover { color: var(--text); }
}
.xf-filter-more__body > .xf-filter-group:first-of-type { border-top: 0; }
.xf-facet-search {
margin: 0 0 10px;
}
.xf-facet-search__input {
width: 100%;
padding: 8px 10px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 8px;
font-family: var(--font-sans);
font-size: 12.5px;
color: var(--text);
transition: border-color .15s;
-webkit-appearance: none;
appearance: none;
}
.xf-facet-search__input::placeholder { color: var(--text-3); }
.xf-facet-search__input:focus { border-color: var(--accent-line); }
.xf-facet-search__input::-webkit-search-cancel-button { cursor: pointer; }
.xf-facet-search__none {
margin: 2px 0 0;
font-size: 12.5px;
color: var(--text-3);
}
.xf-check--empty {
cursor: not-allowed;
color: var(--text-3);
}
.xf-check--empty .xf-check__box { opacity: .45; }
.xf-check--empty .xf-check__label { text-decoration: line-through; text-decoration-thickness: 1px; }
.xf-filters--live .xf-filters__apply {
background: var(--surface-2);
color: var(--text-2);
border: 1px solid var(--line-soft);
}
.xf-filters--live .xf-filters__apply.is-dirty {
background: var(--accent);
color: #fff;
border-color: transparent;
}
@media (hover: hover) {
.xf-filters--live .xf-filters__apply:hover { color: var(--text); }
.xf-filters--live .xf-filters__apply.is-dirty:hover { color: #fff; }
}
@media (min-width: 768px) {
.xf-filters__body {
padding-bottom: calc(64px + var(--xf-cookie-h, 0px));
scroll-padding-bottom: calc(64px + var(--xf-cookie-h, 0px));
}
.xf-filters__actions {
border-top: 0;
background: transparent;
}
.xf-filters__actions::before {
top: -44px;
height: 44px;
}
.xf-filters__apply {
box-shadow: 0 0 0 5px var(--bg);
}
}
.xf-pagination__step {
display: inline-flex;
align-items: center;
gap: 4px;
height: 36px;
padding: 0 12px;
border-radius: 9px;
border: 1px solid var(--line-soft);
font-size: 13px;
color: var(--text-2);
transition: color .15s, border-color .15s;
}
.xf-pagination__step svg { flex: 0 0 auto; }
@media (hover: hover) {
.xf-pagination__step:not(.is-disabled):hover { color: var(--text); border-color: var(--line); }
}
.xf-pagination__step.is-disabled {
opacity: .4;
pointer-events: none;
}
@media (max-width: 767px) {
.xf-filter-group { padding: 2px 0; }
.xf-filter-group > summary {
min-height: 44px;
display: flex;
align-items: center;
}
.xf-filter-group[open] > summary { margin-bottom: 6px; }
.xf-filter-more__summary { min-height: 48px; }
.xf-filter-group__more > summary { min-height: 44px; display: flex; align-items: center; }
.xf-facet-search__input { padding: 11px 12px; font-size: 16px; }
.xf-price-range__input input { font-size: 16px; }
.xf-pagination__step { height: 44px; padding: 0 14px; }
.xf-filter-fab { min-height: 44px; }
.xf-filters__apply { min-height: 44px; }
.xf-chip { min-height: 44px; }
.xf-filter-sheet__reset {
margin-left: auto;
margin-right: 12px;
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-3);
}
body.xf-filter-open .xf-chat { display: none; }
}
/* End */
/* Start:/local/templates/xcore_front/css/product.xfmin-1-115454.css?179283813844520*/
.xf-product {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 48px;
align-items: flex-start;
margin-bottom: 56px;
}
.xf-product-gallery {
display: flex;
flex-direction: column;
gap: 14px;
position: sticky;
top: calc(var(--xf-header-h, 154px) + 26px);
}
.xf-product-gallery__main {
aspect-ratio: auto;
width: 100%;
max-width: 560px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 18px;
overflow: hidden;
position: relative;
container-type: inline-size;
}
.xf-product-gallery__main:not(:has(.xf-art--photo)) { aspect-ratio: 1; }
.xf-product-gallery__main .xf-art {
width: 100%;
height: 100%;
}
.xf-product-gallery__main .xf-art--photo {
aspect-ratio: auto;
min-height: 380px;
padding: 30px 20px;
box-sizing: border-box;
display: grid;
place-items: center;
}
.xf-product-gallery__main .xf-art--photo .xf-art__photo-wrap {
position: relative;
display: inline-flex;
flex: 0 0 auto;
overflow: hidden;
}
.xf-product-gallery__main .xf-art--photo .xf-art__img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 360px;
}
@media (min-width: 768px) {
.xf-pdp .xf-product-gallery__main .xf-art--photo .xf-art__img[style*="--xf-nw"] {
width: min(calc(var(--xf-nw) * 1px), calc(360px * var(--xf-nw) / var(--xf-nh)), calc(100cqi - 40px));
aspect-ratio: var(--xf-nw) / var(--xf-nh);
object-fit: contain;
}
}
.xf-product-gallery picture { display: contents; }
.xf-product-gallery__guarantee {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
box-sizing: border-box;
min-width: 148px;
padding: 7px 14px;
text-align: center;
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.005em;
color: oklch(0.96 0.005 285);
background: oklch(0.30 0.04 268);
border-radius: 10px 0 0 0;
line-height: 1.2;
white-space: nowrap;
}
.xf-pdp .xf-product-gallery__zoom {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid var(--line-soft);
border-radius: 10px;
background: var(--surface);
color: var(--text-2);
cursor: zoom-in;
transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.xf-pdp .xf-product-gallery__zoom:hover {
background: var(--surface-2);
color: var(--text);
border-color: var(--line);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
.xf-pdp .xf-product-gallery__zoom:active { transform: translateY(0); }
.xf-product-gallery__thumb-wrap { display: contents; }
.xf-product-gallery__guarantee--thumb { display: none; }
.xf-product-gallery__thumbs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.xf-product-gallery__thumb {
width: 74px;
height: 74px;
padding: 6px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: border-color .15s, transform .15s;
}
@media (hover: hover) {
.xf-product-gallery__thumb:hover { border-color: var(--line); transform: translateY(calc(-1px * var(--xf-motion, 1))); }
}
.xf-product-gallery__thumb.is-active { border-color: var(--accent-line); }
.xf-product-gallery__thumb img {
width: 100%; height: 100%; object-fit: contain;
}
html[data-theme="dark"] .xf-product-gallery__thumb {
position: relative;
background: #fff;
isolation: isolate;
}
html[data-theme="dark"] .xf-product-gallery__thumb::after {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
mix-blend-mode: multiply;
background: var(--nx-lightbox);
}
.xf-product-info__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-3);
display: inline-flex;
align-items: center;
gap: 2px;
}
.xf-product-info__article { color: var(--accent-2); }
.xf-product-info__title {
margin: 10px 0 18px;
font-size: 32px;
font-weight: 600;
letter-spacing: -0.8px;
line-height: 1.15;
color: var(--text);
}
.xf-product-info__meta {
display: flex;
gap: 18px;
align-items: center;
flex-wrap: wrap;
font-size: 13.5px;
color: var(--text-3);
margin-bottom: 28px;
}
.xf-product-info__stock::before {
content: "●";
margin-right: 6px;
font-size: 9px;
vertical-align: middle;
}
.xf-product-info__stock.is-in { color: var(--success-ink); }
.xf-product-info__stock.is-out { color: var(--text-3); }
.xf-product-info__stock.is-out::before { content: "○"; }
.xf-pdp .xf-product-info__stock { font-size: 14px; font-weight: 600; }
.xf-pdp .xf-product-info__ready {
color: var(--text-2);
font-size: 14px;
}
.xf-pdp .xf-product-info__ready::before {
content: "·";
margin-right: 8px;
color: var(--line);
}
.xf-product-info__price-row {
padding: 22px 0 26px;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
margin-bottom: 24px;
}
.xf-product-info__price {
font-family: var(--font-mono);
font-size: 36px;
font-weight: 600;
letter-spacing: -1px;
color: var(--text);
line-height: 1;
display: inline;
}
.xf-product-info__price-cur {
font-size: 18px;
color: var(--text-3);
margin-left: 6px;
font-weight: 500;
}
.xf-product-info__price-old {
display: block;
margin: 5px 0 0;
font-family: var(--font-sans);
font-variant-numeric: tabular-nums lining-nums;
font-size: 16px;
font-weight: 500;
color: var(--text-2);
line-height: 1.1;
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: currentColor;
}
.xf-product-info__installment {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 14px;
margin: -8px 0 24px;
}
.xf-product-info__installment-price {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
color: var(--text-2);
letter-spacing: -.2px;
line-height: 1.3;
}
.xf-product-info__installment-toggle {
background: transparent;
border: none;
padding: 0;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--accent-2);
cursor: pointer;
transition: opacity .15s;
}
@media (hover: hover) {
.xf-product-info__installment-toggle:hover { opacity: .7; }
}
.xf-pdp .xf-product-info__installment-toggle {
display: inline-flex;
align-items: center;
min-height: 44px;
margin: -13px 0;
}
.xf-product-info__installment-src .installment__link { display: none; }
.xf-product-info__variants {
margin: -8px 0 24px;
}
.xf-product-info__variants-label {
display: block;
margin-bottom: 9px;
font-size: 13px;
font-weight: 500;
color: var(--text-3);
}
.xf-product-info__variants-row {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.xf-product-info__variants-row > li { display: flex; }
.xf-product-info__variant {
display: inline-flex;
align-items: baseline;
gap: 3px;
padding: 7px 13px;
border: 1px solid var(--line-soft);
border-radius: 999px;
background: var(--surface);
color: var(--text-2);
font-family: var(--font-mono);
font-size: 13.5px;
font-weight: 500;
letter-spacing: -.2px;
text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
white-space: nowrap;
}
.xf-product-info__variant-unit {
font-size: 11px;
font-weight: 500;
color: var(--text-3);
}
@media (hover: hover) {
.xf-product-info__variant:hover {
border-color: var(--accent-line);
color: var(--text);
}
}
.xf-product-info__variant.is-active {
background: var(--accent-dim);
border-color: var(--accent-line);
color: var(--accent-2);
cursor: default;
}
.xf-product-info__variant.is-active .xf-product-info__variant-unit {
color: var(--accent-2);
opacity: .9;
}
.xf-product-info__variants--color .xf-product-info__variant {
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0;
gap: 7px;
align-items: center;
padding: 6px 13px 6px 8px;
}
.xf-product-info__variant-swatch {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.xf-product-info__variant-swatch-dot {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--surface-3);
box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.14);
}
.xf-product-info__variant-swatch--combo .xf-product-info__variant-swatch-dot:first-child {
border-radius: 999px 0 0 999px;
}
.xf-product-info__variant-swatch--combo .xf-product-info__variant-swatch-dot:last-child {
border-radius: 0 999px 999px 0;
margin-left: -1px;
}
.xf-product-info__variant-swatch-dot--clear {
background: linear-gradient(135deg, #e9eef2 0%, #cdd6dd 50%, #e9eef2 100%);
}
@media (hover: hover) {
.xf-product-info__variants--color .xf-product-info__variant:hover {
border-color: var(--accent-line);
color: var(--text);
}
}
.xf-product-info__variants--color .xf-product-info__variant.is-active .xf-product-info__variant-swatch-dot {
box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.18), 0 0 0 1.5px var(--surface);
}
html[data-theme="dark"] .xf-product-info__variant-swatch-dot {
box-shadow: inset 0 0 0 1px oklch(1 1 1 / 0.22);
}
html[data-theme="dark"] .xf-product-info__variants--color .xf-product-info__variant.is-active .xf-product-info__variant-swatch-dot {
box-shadow: inset 0 0 0 1px oklch(1 1 1 / 0.28), 0 0 0 1.5px var(--surface);
}
@media (max-width: 767px) {
.xf-product-info__variant { min-height: 44px; align-items: center; }
}
.xf-product-info__variant--oos { opacity: .42; cursor: default; }
.xf-product-info__preorder-note {
display: flex;
gap: 10px;
align-items: center;
padding: 12px 14px;
margin: 0 0 14px;
background: oklch(0.96 0.018 75);
border: 1px solid oklch(0.88 0.04 75);
border-radius: 12px;
color: oklch(0.32 0.06 65);
font-size: 13.5px;
line-height: 1.4;
}
.xf-product-info__preorder-note svg { flex-shrink: 0; color: oklch(0.50 0.10 60); }
.xf-product-info__preorder-note strong { font-weight: 600; }
.xf-product-info__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 24px;
align-items: stretch;
}
.xf-btn-contact {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 150px;
padding: 0 22px;
background: transparent;
border: 1.5px solid var(--line);
border-radius: 14px;
color: var(--text);
font-family: var(--font-sans);
font-weight: 500;
font-size: 14.5px;
text-decoration: none;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
white-space: nowrap;
box-sizing: border-box;
}
.xf-btn-contact svg { flex-shrink: 0; }
@media (hover: hover) {
.xf-btn-contact:hover { border-color: var(--accent-line); color: var(--accent); background: var(--surface); }
html[data-theme="dark"] .xf-btn-contact:hover { color: var(--accent-2); }
}
.xf-btn-buy {
flex: 1;
min-width: 200px;
padding: 14px 22px;
background: var(--accent);
color: #fff;
border: 1px solid transparent;
border-radius: 12px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 6px 20px -8px var(--accent);
transition: transform .15s, box-shadow .15s;
}
@media (hover: hover) {
.xf-btn-buy:hover { transform: translateY(calc(-1px * var(--xf-motion, 1))); box-shadow: 0 10px 28px -8px var(--accent); }
}
.xf-btn-buy.is-busy { opacity: .7; pointer-events: none; }
.xf-btn-buy__icon, .xf-btn-buy__label { display: inline-flex; align-items: center; }
.xf-btn-buy:not(.is-added) .xf-btn-buy__icon--check,
.xf-btn-buy:not(.is-added) .xf-btn-buy__label--added { display: none; }
.xf-btn-buy.is-added .xf-btn-buy__icon--bag,
.xf-btn-buy.is-added .xf-btn-buy__label--idle { display: none; }
.xf-btn-buy.is-added {
background: var(--surface-3);
color: var(--text);
border-color: var(--line);
box-shadow: none;
}
@media (hover: hover) {
.xf-btn-buy.is-added:hover {
box-shadow: none;
color: var(--accent-2);
border-color: var(--accent-line);
}
}
.xf-btn-buy[data-xf-preorder="1"] {
background: var(--accent-dim);
color: var(--accent-2);
box-shadow: none;
border: 1px solid var(--accent-line);
}
@media (hover: hover) {
.xf-btn-buy[data-xf-preorder="1"]:hover {
background: var(--accent-dim-hover);
box-shadow: none;
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
}
.xf-btn-buy[data-xf-preorder="1"].is-added {
background: var(--surface-3);
color: var(--text);
border-color: var(--line);
}
@media (hover: hover) {
.xf-btn-buy[data-xf-preorder="1"].is-added:hover {
background: var(--surface-3);
color: var(--accent-2);
border-color: var(--accent-line);
}
}
html[data-theme="dark"] .xf-btn-buy { box-shadow: none; }
html[data-theme="dark"] .xf-btn-buy.is-added { border-color: oklch(0.66 0.20 300 / 0.85); }
.xf-btn-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--line-soft);
color: var(--text-2);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
@media (hover: hover) {
.xf-btn-icon:hover { color: var(--text); border-color: var(--line); background: var(--surface-2); }
}
.xf-btn-icon.is-busy { opacity: .5; pointer-events: none; }
.xf-btn-icon.is-active {
background: var(--accent);
color: #fff;
border-color: transparent;
}
.xf-btn-icon[data-xf-wish].is-active { background: #e11d48; }
.xf-btn-icon[data-xf-wish].is-active svg { fill: currentColor; }
.xf-product-info__benefits {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.xf-product-info__benefit {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px 14px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 10px;
font-size: 12.5px;
color: var(--text-2);
line-height: 1.45;
}
.xf-product-info__benefit svg { color: var(--accent-2); flex: 0 0 auto; margin-top: 1px; }
.xf-product-info__benefit a { text-decoration: underline; text-underline-offset: 2px; }
.xf-pdp .xf-product-info__benefits--solo { grid-template-columns: 1fr; }
.xf-pdp .xf-key {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--line-soft);
}
.xf-pdp .xf-key__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 10px;
}
.xf-pdp .xf-key__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-3);
}
.xf-pdp .xf-key__all {
font-size: 12.5px;
color: var(--text-2);
text-decoration: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
min-height: 44px;
margin: -14px 0;
}
.xf-pdp .xf-key__all:hover { color: var(--accent-2); text-decoration: underline; }
.xf-pdp .xf-key__list {
margin: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 0;
}
.xf-pdp .xf-key__name,
.xf-pdp .xf-key__val {
margin: 0;
padding: 7px 0;
font-size: 13px;
line-height: 1.4;
border-top: 1px solid var(--line-soft);
}
.xf-pdp .xf-key__list > .xf-key__name:first-child,
.xf-pdp .xf-key__list > .xf-key__name:first-child + .xf-key__val {
border-top: 0;
}
.xf-pdp .xf-key__name { color: var(--text-3); padding-right: 26px; }
.xf-pdp .xf-key__val {
color: var(--text);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.xf-product-section {
margin-bottom: 56px;
}
.xf-product-tabs {
margin-bottom: 56px;
}
.xf-pdp .xf-product-tabs { scroll-margin-top: calc(var(--xf-header-h, 154px) + 18px); }
.xf-product-tabs__nav {
display: none;
gap: 4px;
border-bottom: 1px solid var(--line-soft);
margin-bottom: 28px;
overflow-x: auto;
scrollbar-width: none;
}
.xf-product-tabs__nav::-webkit-scrollbar { display: none; }
.xf-product-tabs--js .xf-product-tabs__nav { display: flex; }
.xf-product-tabs__tab {
position: relative;
flex: 0 0 auto;
background: transparent;
border: 0;
padding: 14px 20px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
color: var(--text-2);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color .15s;
}
@media (hover: hover) {
.xf-product-tabs__tab:hover { color: var(--text); }
}
.xf-product-tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 8px; }
.xf-product-tabs__tab.is-active { color: var(--text); }
.xf-product-tabs__tab.is-active::after {
content: "";
position: absolute;
left: 16px; right: 16px; bottom: -1px;
height: 2px;
background: var(--accent);
border-radius: 2px 2px 0 0;
}
.xf-product-tabs__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 0 8px;
height: 20px;
background: color-mix(in srgb, var(--accent-2) 12%, transparent);
color: var(--accent-2);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
border-radius: 999px;
}
.xf-product-tabs__panel { display: block; }
.xf-product-tabs--js .xf-product-tabs__panel { display: none; }
.xf-product-tabs--js .xf-product-tabs__panel.is-active { display: block; }
.xf-product-video {
display: grid;
gap: 20px;
max-width: 760px;
}
.xf-product-video__facade,
.xf-product-video__frame {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
border-radius: var(--radius);
background: var(--surface-3);
}
.xf-product-video__facade {
position: relative;
overflow: hidden;
cursor: pointer;
}
.xf-product-video__poster {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.xf-product-video__facade::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, oklch(0.18 0.02 285 / 0.4));
opacity: 0;
transition: opacity .2s;
}
.xf-product-video__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
pointer-events: none;
transition: transform .2s;
}
.xf-product-video__play-bg { fill: oklch(0.2 0.02 285 / 0.72); transition: fill .2s; }
.xf-product-video__play-tri { fill: #fff; }
.xf-product-video__facade:focus-visible .xf-product-video__play-bg { fill: var(--accent); }
@media (hover: hover) {
.xf-product-video__facade:hover::after { opacity: 1; }
.xf-product-video__facade:hover .xf-product-video__play { transform: translate(-50%, -50%) scale(calc(1 + 0.06 * var(--xf-motion, 1))); }
.xf-product-video__facade:hover .xf-product-video__play-bg { fill: var(--accent); }
}
.xf-product-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
}
.xf-product-section__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent-2);
margin-bottom: 8px;
}
.xf-product-section__eyebrow::before {
content: "";
display: inline-block;
width: 22px;
height: 1px;
background: var(--accent-2);
vertical-align: middle;
margin-right: 8px;
}
.xf-product-section__title {
margin: 0;
font-size: 28px;
font-weight: 600;
letter-spacing: -0.7px;
line-height: 1.15;
color: var(--text);
}
.xf-specs {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 14px;
overflow: hidden;
}
.xf-specs__row {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 24px;
padding: 14px 22px;
border-top: 1px solid var(--line-soft);
align-items: baseline;
}
.xf-specs__row:first-child { border-top: 0; }
.xf-specs__row:nth-child(odd) { background: var(--bg-2); }
html[data-theme="dark"] .xf-specs__row:nth-child(odd) { background: oklch(1 0 0 / 0.028); }
@media (min-width: 901px) {
.xf-specs__row {
grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
column-gap: 32px;
}
}
.xf-specs__name {
font-size: 13.5px;
color: var(--text-2);
}
.xf-specs__value {
font-size: 13.5px;
color: var(--text);
overflow-wrap: anywhere;
}
.xf-specs__section {
padding: 18px 22px 8px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--text-2);
border-top: 1px solid var(--line-soft);
}
.xf-specs__section:first-child { border-top: 0; }
.xf-specs__section + .xf-specs__row { border-top: 0; }
.xf-specs__row--note { grid-template-columns: minmax(0, 1fr); }
.xf-specs__note {
font-size: 13.5px;
color: var(--text);
overflow-wrap: anywhere;
}
.xf-specs-legal {
margin-top: 12px;
}
.xf-pdp .xf-key-aux { margin-top: 12px; }
.xf-specs-legal__summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-radius: 12px;
border: 1px solid var(--line-soft);
background: var(--bg-2);
color: var(--text-2);
font-size: 13px;
font-weight: 500;
user-select: none;
transition: background .15s;
}
.xf-specs-legal__summary::-webkit-details-marker { display: none; }
.xf-specs-legal__summary::marker { content: ''; }
.xf-specs-legal__summary:hover { background: var(--surface-2); }
.xf-specs-legal__icon {
position: relative;
width: 14px;
height: 14px;
flex-shrink: 0;
}
.xf-specs-legal__icon::before,
.xf-specs-legal__icon::after {
content: '';
position: absolute;
background: var(--text-3);
transition: opacity .15s;
}
.xf-specs-legal__icon::before {
top: 50%;
left: 0;
width: 100%;
height: 1.5px;
margin-top: -0.75px;
}
.xf-specs-legal__icon::after {
top: 0;
left: 50%;
width: 1.5px;
height: 100%;
margin-left: -0.75px;
}
.xf-specs-legal[open] .xf-specs-legal__icon::after { opacity: 0; }
.xf-specs-legal__label { flex: 1; }
.xf-specs-legal__count {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1px;
color: var(--text-2);
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 999px;
padding: 2px 8px;
}
.xf-specs-legal__rows {
margin-top: 10px;
}
.xf-specs__configurator-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 16px;
padding: 10px 18px;
background: var(--surface);
color: var(--text-2);
border: 1px solid var(--line);
border-radius: 12px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.xf-specs__configurator-cta svg {
color: var(--accent-2);
}
.xf-specs__configurator-cta:hover {
background: var(--bg-2);
color: var(--text);
border-color: var(--line);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
.xf-tip {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.xf-tip__btn {
position: relative;
width: 16px;
height: 16px;
border: 1px solid var(--line-soft);
background: var(--surface-2);
color: var(--text-3);
border-radius: 999px;
cursor: help;
padding: 0;
font-size: 10px;
font-weight: 600;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color .15s, border-color .15s, background .15s;
}
.xf-tip__btn:hover,
.xf-tip__btn:focus-visible {
color: var(--accent-2);
border-color: var(--accent-line);
background: var(--accent-dim);
}
.xf-tip__btn::after {
content: '';
position: absolute;
inset: -6px;
}
.xf-tip__bubble {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(calc(4px * var(--xf-motion, 1)));
width: 260px;
padding: 10px 14px;
background: var(--text);
color: var(--surface);
border-radius: 10px;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
text-align: left;
white-space: normal;
pointer-events: none;
opacity: 0;
transition: opacity .15s, transform .15s;
z-index: 20;
}
.xf-tip__bubble::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--text);
}
.xf-tip:hover .xf-tip__bubble,
.xf-tip:focus-within .xf-tip__bubble,
summary:focus-visible:not([data-xf-tip-off]) .xf-tip__bubble {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.xf-tip__bubble--flipped::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: var(--text);
}
.xf-product-desc {
font-size: 15px;
line-height: 1.7;
color: var(--text-2);
max-width: 820px;
}
.xf-product-desc p { margin: 0 0 14px; }
.xf-product-desc ul, .xf-product-desc ol { margin: 0 0 14px; padding-left: 22px; }
.xf-product-desc li { margin-bottom: 6px; }
.xf-product-desc h3, .xf-product-desc h4 {
font-size: 17px;
font-weight: 600;
color: var(--text);
margin: 22px 0 10px;
}
.xf-product-desc strong, .xf-product-desc b { color: var(--text); font-weight: 600; }
.xf-product-desc a,
.xf-reviews__body a {
color: var(--accent-2);
text-decoration: underline;
text-decoration-color: var(--link-line);
text-underline-offset: 3px;
transition: color .15s, text-decoration-color .15s;
}
@media (hover: hover) {
.xf-product-desc a:hover,
.xf-reviews__body a:hover {
color: var(--text);
text-decoration-color: var(--accent-2);
}
}
.xf-reviews__count {
display: inline-block;
margin-left: 10px;
padding: 2px 10px;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: var(--accent-2);
background: color-mix(in oklch, var(--accent-2) 12%, transparent);
border-radius: 999px;
vertical-align: 4px;
}
.xf-reviews__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
max-width: 820px;
}
.xf-reviews__item {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 14px;
padding: 18px 22px;
}
.xf-reviews__meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.xf-reviews__author {
font-size: 14px;
font-weight: 600;
color: var(--text);
overflow-wrap: anywhere;
}
.xf-reviews__date {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-3);
white-space: nowrap;
}
.xf-reviews__body {
font-size: 14.5px;
line-height: 1.6;
color: var(--text-2);
overflow-wrap: anywhere;
}
.xf-reviews__body p { margin: 0 0 10px; }
.xf-reviews__body p:last-child { margin-bottom: 0; }
.xf-reviews__body img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 6px 0;
}
.xf-reviews__empty {
max-width: 820px;
padding: 18px 22px;
background: var(--bg-2);
border: 1px dashed var(--line-soft);
border-radius: 14px;
font-size: 14px;
color: var(--text-3);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.xf-reviews__empty-msg {
margin: 0;
color: var(--text-3);
}
.xf-reviews__form {
max-width: 820px;
margin-top: 18px;
padding: 20px 22px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 14px;
display: grid;
gap: 14px;
}
.xf-reviews__form-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.xf-reviews__field {
display: grid;
gap: 6px;
}
.xf-reviews__label {
font-size: 13px;
font-weight: 500;
color: var(--text-2);
}
.xf-reviews__input {
width: 100%;
box-sizing: border-box;
padding: 10px 14px;
font-family: inherit;
font-size: 14.5px;
color: var(--text);
background: var(--bg-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
transition: border-color .15s, background .15s;
}
.xf-reviews__input::placeholder { color: var(--text-3); }
@media (max-width: 767px) {
.xf-reviews__input { font-size: 16px; }
}
.xf-reviews__input:focus {
border-color: var(--accent-2);
background: var(--surface);
}
.xf-reviews__textarea {
resize: vertical;
min-height: 96px;
line-height: 1.55;
}
.xf-reviews__form-foot {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.xf-reviews__submit {
appearance: none;
-webkit-appearance: none;
border: 0;
cursor: pointer;
padding: 11px 22px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--accent);
border-radius: 12px;
transition: background .15s, transform .15s, opacity .15s;
}
@media (hover: hover) {
.xf-reviews__submit:hover {
background: var(--accent-2);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
html[data-theme="dark"] .xf-reviews__submit:hover { background: var(--accent-3); }
}
.xf-reviews__submit:disabled {
opacity: .55;
cursor: default;
transform: none;
}
.xf-reviews__hint {
margin: 0;
font-size: 12.5px;
color: var(--text-3);
}
.xf-reviews__form.is-busy { opacity: .75; }
.xf-reviews__form.is-sent .xf-reviews__form-title,
.xf-reviews__form.is-sent .xf-reviews__field,
.xf-reviews__form.is-sent .xf-reviews__form-foot,
.xf-reviews__form.is-sent .xf-reviews__hp { display: none; }
.xf-reviews__note {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--text-2);
padding: 10px 14px;
border-radius: 12px;
background: var(--bg-2);
border: 1px solid var(--line-soft);
}
.xf-reviews__note.is-error {
color: var(--danger-ink);
border-color: color-mix(in oklch, var(--danger) 35%, var(--line-soft));
}
.xf-reviews__note.is-success {
color: var(--accent-2);
background: var(--accent-dim);
border-color: var(--accent-line);
}
.xf-reviews__hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.xf-reviews__item--pending {
border-style: dashed;
border-color: color-mix(in oklch, var(--danger) 30%, var(--line-soft));
background: var(--bg-2);
}
.xf-reviews__pending-badge {
flex: none;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .02em;
color: var(--text-3);
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 999px;
padding: 2px 9px;
white-space: nowrap;
}
.xf-reviews__mod {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line-soft);
}
.xf-reviews__mod-btn {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 8px 14px;
border-radius: 10px;
border: 1px solid var(--line-soft);
background: var(--surface);
color: var(--text-2);
transition: background .15s, border-color .15s, color .15s;
}
@media (hover: hover) {
.xf-reviews__mod-btn:hover { border-color: var(--line); color: var(--text); }
}
.xf-reviews__mod-btn--approve {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
@media (hover: hover) {
.xf-reviews__mod-btn--approve:hover { border-color: var(--accent-2); background: var(--accent-2); color: #fff; }
html[data-theme="dark"] .xf-reviews__mod-btn--approve:hover { border-color: var(--accent-3); background: var(--accent-3); }
}
.xf-reviews__mod-btn--del { color: var(--danger-ink); }
@media (hover: hover) {
.xf-reviews__mod-btn--del:hover {
border-color: color-mix(in oklch, var(--danger) 45%, var(--line-soft));
color: var(--danger-ink);
}
}
.xf-reviews__mod-btn--approve { display: none; }
.xf-reviews__item--pending .xf-reviews__mod-btn--approve { display: inline-flex; }
.xf-reviews__item--pending .xf-reviews__mod-btn--hide { display: none; }
.xf-reviews__item.is-busy { opacity: .6; pointer-events: none; }
.xf-similar__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.xf-product-gallery__dots { display: none; }
.xf-product-gallery__dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--line);
transition: background .2s, width .2s;
}
.xf-product-gallery__dot.is-active {
background: var(--accent);
width: 18px;
}
.xf-buy-sticky { display: none; }
@media (max-width: 900px) {
.xf-product { grid-template-columns: 1fr; gap: 24px; }
.xf-product-gallery { position: static; }
.xf-product-info__benefits { grid-template-columns: 1fr; }
.xf-specs__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
.xf-similar__grid { grid-template-columns: repeat(2, 1fr); }
.xf-product-info__title { font-size: 24px; }
.xf-product-info__price { font-size: 28px; }
}
@media (max-width: 767px) {
.xf-product { gap: 20px; }
.xf-product-gallery { position: relative; top: auto; }
.xf-product-gallery__guarantee { min-width: 130px; font-size: 10.5px; padding: 6px 11px; letter-spacing: 0; }
.xf-product-info__title { font-size: 22px; line-height: 1.2; margin: 8px 0 14px; }
.xf-product-info__meta { font-size: 12.5px; gap: 14px; margin-bottom: 20px; }
.xf-product-info__price-row { padding: 18px 0 20px; margin-bottom: 18px; }
.xf-product-info__price { font-size: 26px; }
.xf-product-info__price-cur { font-size: 14px; }
.xf-product-info__price-old { font-size: 15px; margin-top: 4px; }
.xf-product-info__actions { gap: 8px; margin-bottom: 20px; }
.xf-btn-buy { min-width: 0; flex: 1 1 100%; height: 52px; padding: 0 18px; }
.xf-btn-icon { width: 44px; height: 44px; }
.xf-product-gallery__thumbs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 0;
margin: 0 calc(var(--container-pad) * -1);
padding: 0;
scrollbar-width: none;
}
.xf-product-gallery__thumbs::-webkit-scrollbar { display: none; }
.xf-product-gallery__thumb {
flex: 0 0 100%;
width: 100%;
height: auto;
aspect-ratio: 1;
padding: 0;
border: 0;
border-radius: 0;
background: var(--surface);
scroll-snap-align: center;
scroll-snap-stop: always;
container-type: inline-size;
display: flex;
align-items: center;
justify-content: center;
}
.xf-product-gallery__thumb.is-active { border-color: transparent; }
.xf-product-gallery__thumb-wrap {
display: inline-flex;
position: relative;
flex: 0 0 auto;
justify-content: center;
min-width: 130px;
overflow: hidden;
}
.xf-product-gallery__thumb img {
width: auto;
height: auto;
max-width: calc(100cqi - 48px);
max-height: calc(100cqi - 48px);
}
.xf-product-gallery__guarantee--thumb { display: block; }
.xf-product-gallery:has(.xf-product-gallery__thumbs) .xf-product-gallery__main {
display: none;
}
.xf-product-gallery__dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 14px;
}
.xf-specs { border-radius: 12px; }
.xf-specs__row { padding: 10px 14px; font-size: 13px; }
.xf-specs__section { padding: 14px 14px 6px; font-size: 10.5px; }
.xf-product-tabs--js .xf-product-tabs__nav {
mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
padding: 0 4px;
margin-bottom: 20px;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.xf-product-tabs__tab { padding: 12px 14px; font-size: 14px; }
.xf-product-tabs__count { font-size: 10.5px; min-width: 20px; height: 18px; padding: 0 7px; }
.xf-product-section__title { font-size: 22px; letter-spacing: -0.5px; }
.xf-product-section__eyebrow { font-size: 10.5px; }
.xf-similar__grid {
grid-template-columns: none;
grid-template-rows: auto;
grid-auto-flow: column;
grid-auto-columns: calc((100vw - 52px) / 2.25);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
gap: 10px;
scrollbar-width: none;
margin: 0 calc(var(--container-pad) * -1);
padding: 4px 16px;
}
.xf-similar__grid::-webkit-scrollbar { display: none; }
.xf-similar__grid > * { scroll-snap-align: start; min-width: 0; }
.xf-buy-sticky {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
background: color-mix(in oklch, var(--bg) 92%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--line-soft);
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
opacity: 0;
pointer-events: none;
}
.xf-buy-sticky.is-initialized {
transition: transform .22s ease-out, opacity .18s ease-out;
}
.xf-buy-sticky.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.xf-buy-sticky__inner {
display: flex;
align-items: center;
gap: 10px;
}
.xf-buy-sticky__price {
flex: 0 0 auto;
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.3px;
line-height: 1;
display: flex;
align-items: baseline;
gap: 4px;
}
.xf-buy-sticky__price-cur {
font-size: 11px;
color: var(--text-3);
font-weight: 500;
}
.xf-buy-sticky__price-val--empty {
font-size: 13px;
font-family: var(--font-sans);
color: var(--text-3);
font-weight: 500;
}
.xf-buy-sticky__btn {
flex: 1 1 auto;
min-width: 0;
height: 48px;
padding: 0 14px;
font-size: 14px;
}
.xf-buy-sticky__wish {
flex: 0 0 auto;
width: 48px;
height: 48px;
}
.xf-home__section:last-of-type { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.middle:has(> .xf-pdp) { padding-top: 0; }
.xf-catpage__head.xf-pdp { padding-top: 10px; padding-bottom: 8px; margin-bottom: 0; }
.xf-home__section.xf-pdp { padding-top: 12px; }
.xf-pdp .xf-product { gap: 14px; }
.xf-pdp .xf-product-gallery__main .xf-art--photo { min-height: 256px; padding: 16px 14px; }
.xf-pdp .xf-product-gallery__main .xf-art--photo .xf-art__img { max-height: 236px; }
.xf-pdp .xf-product-gallery__zoom { width: 44px; height: 44px; top: 8px; right: 8px; }
.xf-pdp .xf-product-info__title { margin: 6px 0 10px; }
.xf-pdp .xf-product-info__meta { margin-bottom: 10px; }
.xf-pdp .xf-product-info__price-row { padding: 14px 0 16px; margin-bottom: 14px; }
.xf-pdp .xf-product-tabs { scroll-margin-top: 132px; }
.xf-pdp .xf-key { margin-top: 16px; padding-top: 14px; }
.xf-pdp .xf-key__name { padding-right: 16px; }
.xf-pdp .xf-product-info__ready { flex: 0 0 100%; margin-top: 2px; }
.xf-pdp .xf-product-info__ready::before { content: none; }
.xf-pdp .xf-crumbs > span:last-child { display: none; }
}
@media (max-width: 767px) {
.xf-pdp { --xf-pdp-photo-h: clamp(160px, 44vw, 300px); }
@supports (height: 100svh) {
.xf-pdp {
--xf-pdp-photo-h: clamp(72px, max(min(calc(100svh - 562px), clamp(160px, 44vw, 300px)), min(calc(100svh - 498px), calc((712px - 100svh) * 100 + 150px))), 300px);
}
}
.xf-catpage__head.xf-pdp { padding-top: 0; padding-bottom: 0; }
.xf-pdp .xf-crumbs {
margin: 0 calc(var(--container-pad) * -1);
padding: 8px var(--container-pad) 7px;
white-space: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
direction: rtl;
text-align: left;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--container-pad), #000 calc(100% - var(--container-pad)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 var(--container-pad), #000 calc(100% - var(--container-pad)), transparent 100%);
}
.xf-pdp .xf-crumbs > * { direction: ltr; unicode-bidi: embed; }
.xf-pdp .xf-crumbs::-webkit-scrollbar { display: none; }
.xf-pdp .xf-crumbs > a { padding: 8px 0 7px; }
@supports (height: 100svh) {
.xf-catpage__head.xf-pdp { --xf-low: clamp(0px, calc(100svh - 620px), 60px); }
.xf-pdp .xf-crumbs {
padding-top: calc(4px + var(--xf-low) / 15);
padding-bottom: calc(3px + var(--xf-low) / 15);
}
.xf-pdp .xf-crumbs > a {
padding-top: calc(4px + var(--xf-low) / 15);
padding-bottom: calc(3px + var(--xf-low) / 15);
}
}
.xf-home__section.xf-pdp { padding-top: 0; }
.xf-pdp .xf-product { gap: 8px; }
.xf-pdp .xf-product-gallery { gap: 8px; }
.xf-pdp .xf-product-gallery__thumb { aspect-ratio: auto; height: var(--xf-pdp-photo-h); }
.xf-pdp .xf-product-gallery__thumb img { max-height: calc(var(--xf-pdp-photo-h) - 20px); }
.xf-pdp .xf-product-gallery__dots { margin-top: 0; }
.xf-pdp .xf-product-gallery__main .xf-art--photo { min-height: var(--xf-pdp-photo-h); padding: 10px 14px; }
.xf-pdp .xf-product-gallery__main .xf-art--photo .xf-art__img { max-height: calc(var(--xf-pdp-photo-h) - 20px); }
.xf-pdp .xf-product-gallery__main .xf-art--photo .xf-art__img[style*="--xf-nw"] {
width: min(calc(var(--xf-nw) * 1px), calc((var(--xf-pdp-photo-h) - 20px) * var(--xf-nw) / var(--xf-nh)), calc(100cqi - 28px));
aspect-ratio: var(--xf-nw) / var(--xf-nh);
object-fit: contain;
}
.xf-pdp .xf-product-gallery__thumb img[style*="--xf-nw"] {
width: min(calc(var(--xf-nw) * 1px), calc((var(--xf-pdp-photo-h) - 20px) * var(--xf-nw) / var(--xf-nh)), calc(100cqi - 48px));
aspect-ratio: var(--xf-nw) / var(--xf-nh);
object-fit: contain;
}
.xf-pdp .xf-product-gallery__main .xf-art--photo .xf-art__photo-wrap { min-width: 130px; justify-content: center; }
.xf-pdp .xf-product-gallery__main:not(:has(.xf-art--photo)) { aspect-ratio: auto; height: var(--xf-pdp-photo-h); }
.xf-pdp .xf-product-info { display: flex; flex-direction: column; reading-flow: flex-visual; }
.xf-pdp .xf-product-info__meta { display: contents; }
.xf-pdp .xf-product-info__eyebrow { order: 1; }
.xf-pdp .xf-product-info__title { order: 2; margin: 5px 0 7px; text-wrap: balance; }
.xf-pdp .xf-product-info__price-row { order: 3; padding: 0; margin: 0; border: 0; }
.xf-pdp .xf-product-info__stock { order: 4; margin-top: 5px; }
.xf-pdp .xf-product-info__preorder-note { order: 5; margin: 12px 0 0; }
.xf-pdp .xf-product-info__actions { order: 6; margin: 10px 0 0; }
.xf-pdp .xf-product-info__actions .xf-btn-buy { height: 48px; }
.xf-pdp .xf-product-info__variants { order: 8; margin: 16px 0 0; }
.xf-pdp .xf-product-info__ready { order: 7; flex: 0 0 auto; margin-top: 14px; }
.xf-pdp .xf-product-info__installment { order: 9; margin: 12px 0 0; }
.xf-pdp .xf-product-info__benefits { order: 10; margin-top: 18px; }
.xf-pdp .xf-key { order: 11; }
.xf-pdp .xf-product-info .xf-admin-pencil { order: 12; align-self: flex-start; margin-top: 12px; }
.xf-pdp .xf-key__list { grid-template-columns: fit-content(52%) minmax(0, 1fr); }
}
@media (max-width: 767px) {
body.xf-cookie-up .xf-buy-sticky { padding-bottom: 10px; }
body.xf-cookie-up .xf-buy-sticky.is-visible { bottom: var(--xf-cookie-h, 0px); }
}
@media (max-width: 767px) {
.xf-buy-sticky__price {
display: grid;
grid-template-columns: auto auto;
justify-content: start;
align-items: baseline;
column-gap: 4px;
row-gap: 4px;
}
.xf-buy-sticky__stock {
grid-column: 1 / -1;
font: 500 11.5px/1.2 var(--font-sans);
letter-spacing: 0;
color: var(--text-3);
}
.xf-buy-sticky__stock.is-in { color: var(--success-ink); }
.xf-buy-sticky::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 12px;
background: linear-gradient(to top, color-mix(in oklch, var(--bg) 92%, transparent), transparent);
pointer-events: none;
}
}
@media (max-width: 359px) {
.xf-buy-sticky__inner { gap: 8px; }
.xf-buy-sticky__btn { padding: 0 8px; gap: 6px; white-space: nowrap; }
.xf-buy-sticky__btn[data-xf-preorder="1"] .xf-btn-buy__icon { display: none; }
}
@media (max-width: 767px) {
.xf-pdp.xf-pdp--tight .xf-product-info__eyebrow { order: 7; margin-top: 14px; }
.xf-pdp .xf-product-gallery .xf-product-gallery__guarantee {
font-size: clamp(10px, calc(var(--xf-pdp-photo-h) / 12), 10.5px);
padding: clamp(3px, calc(var(--xf-pdp-photo-h) / 21), 6px) clamp(6px, calc(var(--xf-pdp-photo-h) / 11.5), 11px);
min-width: clamp(84px, calc(var(--xf-pdp-photo-h) * 1.04), 130px);
}
}
.xf-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 56px 24px;
background: oklch(0.12 0.015 285);
}
.xf-lightbox.is-open { display: flex; }
.xf-lightbox__img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
touch-action: pinch-zoom;
user-select: none;
-webkit-user-drag: none;
}
.xf-lightbox__btn {
position: absolute;
z-index: 2;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--line-soft);
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
box-shadow: 0 0 0 1px oklch(0 0 0 / 0.18), 0 6px 16px oklch(0 0 0 / 0.35);
transition: background .15s, transform .15s;
}
.xf-lightbox__btn:hover { background: var(--surface-2); }
html[data-theme="dark"] .xf-lightbox__btn {
background: oklch(1 0 0 / 0.14);
border-color: oklch(1 0 0 / 0.36);
color: oklch(1 0 0);
}
@media (hover: hover) {
html[data-theme="dark"] .xf-lightbox__btn:hover { background: oklch(1 0 0 / 0.24); }
}
.xf-lightbox__close { top: 20px; right: 20px; }
.xf-lightbox__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.xf-lightbox__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.xf-lightbox__counter {
position: absolute;
z-index: 2;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 4px 12px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--line-soft);
color: var(--text-2);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.5px;
}
html[data-theme="dark"] .xf-lightbox__counter {
background: oklch(1 0 0 / 0.14);
border-color: oklch(1 0 0 / 0.36);
color: oklch(1 0 0);
}
.xf-lightbox .xf-lightbox__guarantee {
z-index: 1;
right: var(--xf-lb-plate-r, 0px);
bottom: var(--xf-lb-plate-b, 0px);
font-size: max(11.5px, calc(16px * var(--xf-lb-plate-s, 0)));
min-width: 12.9em;
padding: .61em 1.22em;
border-radius: .87em 0 0 0;
}
.xf-product-gallery__main .xf-art--photo,
.xf-product-gallery__main .xf-art__img { cursor: zoom-in; }
@media (max-width: 767px) {
.xf-product-gallery__thumb { cursor: zoom-in; }
.xf-lightbox { padding: 56px 8px 64px; }
.xf-lightbox__btn { width: 40px; height: 40px; }
.xf-lightbox__close { top: 8px; right: 8px; }
.xf-lightbox__nav--prev { left: 4px; }
.xf-lightbox__nav--next { right: 4px; }
.xf-lightbox .xf-lightbox__guarantee { font-size: max(10.5px, calc(16px * var(--xf-lb-plate-s, 0))); }
}
@media (prefers-reduced-motion: reduce) {
.xf-lightbox__btn { transition: none; }
.xf-product-video__facade::after,
.xf-product-video__play,
.xf-product-video__play-bg { transition: none; }
.xf-product-video__facade:hover .xf-product-video__play { transform: translate(-50%, -50%); }
.xf-buy-sticky.is-initialized { transition: none; }
}
/* End */
/* Start:/local/templates/xcore_front/css/installment.xfmin-1-13386.css?17928314017607*/
.installment .installment__popup {
background: oklch(0.08 0.02 285 / 0.72);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 16px;
}
.installment .installment__content {
width: 100%;
max-width: 720px;
max-height: min(90vh, 860px);
margin: 0;
padding: 24px;
background: var(--surface);
color: var(--text);
border: 1px solid var(--line-soft);
border-radius: 18px;
box-shadow: var(--shadow-card);
overflow-x: hidden;
overflow-y: auto;
}
.installment .installment__loader {
background: color-mix(in oklch, var(--surface) 80%, transparent);
}
.installment .installment__loader_active:after {
border-color: var(--accent);
border-bottom-color: transparent;
}
.installment .installment__top {
margin-bottom: 20px;
gap: 16px;
}
.installment .installment__title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.3px;
line-height: 1.2;
color: var(--text);
}
.installment .installment__close {
flex: none;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
transition: background .15s, border-color .15s;
}
.installment .installment__close:before,
.installment .installment__close:after {
left: 50%;
top: 50%;
width: 15px;
height: 1.5px;
margin: -0.75px 0 0 -7.5px;
background: var(--text-2);
}
@media (hover: hover) {
.installment .installment__close:hover {
background: var(--surface-3);
border-color: var(--accent-line);
}
.installment .installment__close:hover:before,
.installment .installment__close:hover:after {
background: var(--text);
}
}
.installment .installment__middle {
align-items: center;
gap: 16px;
padding-bottom: 16px;
margin-bottom: 14px;
border-bottom: 1px solid var(--line-soft);
}
.installment .installment__picture {
margin: 0 !important;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
}
.installment .installment__product { min-width: 0; }
.installment .installment__name {
margin: 0 0 4px;
font-family: var(--font-sans);
font-weight: 600;
color: var(--text);
text-decoration: none;
overflow-wrap: anywhere;
}
@media (hover: hover) {
.installment .installment__name:hover { color: var(--accent-2); }
}
.installment .installment__from {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.2px;
font-variant-numeric: tabular-nums;
color: var(--text-2);
}
.installment .installment__from .installment__link_bold { font-weight: 600; }
.installment .installment__heading .installment__column {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-3);
}
.installment .installment__table { margin: 12px 0 0; padding: 0; }
.installment .installment__heading { padding: 0 15px; }
.installment .installment__item {
align-items: center;
padding: 12px 14px;
margin: 0 0 10px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 12px;
transition: background .15s, border-color .15s;
}
@media (hover: hover) {
.installment .installment__item:hover {
background: var(--accent-dim);
border-color: var(--accent-line);
}
}
.installment .installment__table .installment__item .installment__column:first-child span {
color: var(--text);
font-weight: 500;
text-decoration: none;
}
.installment .installment__column img { border-radius: 6px; }
.installment .installment__calc {
font-family: var(--font-mono);
color: var(--text);
letter-spacing: -0.2px;
font-variant-numeric: tabular-nums;
}
.installment .installment__calc span,
.installment .installment__column:first-child + .installment__column span {
font-family: var(--font-mono);
font-weight: 600;
}
.installment .installment__total {
margin-top: 2px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: -0.1px;
font-variant-numeric: tabular-nums;
color: var(--text-2);
}
@media (max-width: 768px) {
.installment .installment__table .installment__column:first-child img {
display: block;
margin: 0 0 6px !important;
}
}
.installment .installment__quote {
padding: 14px 0 20px;
font-size: 12px;
line-height: 1.6;
color: var(--text-3);
border-top: 1px solid var(--line-soft);
}
.installment .installment__form { padding: 4px 0 8px; }
.installment .installment__form form {
width: 100%;
align-items: stretch;
gap: 14px;
}
.installment .installment__form fieldset {
display: flex;
flex-direction: column;
gap: 6px;
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.installment .installment__form fieldset + fieldset { margin-top: 0; }
.installment .installment__form label {
width: auto;
margin: 0;
text-align: left;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
color: var(--text-2);
}
.installment .installment__form input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font-family: var(--font-sans);
font-size: 14px;
-webkit-appearance: none;
appearance: none;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.installment .installment__form input[type="text"]::placeholder { color: var(--text-3); }
.installment .installment__form input[type="text"]:focus-visible {
border-color: var(--accent);
background: var(--surface-3);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}
.installment .installment__form button[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 6px;
height: auto !important;
padding: 13px 22px !important;
line-height: 1.2 !important;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: #fff;
background: var(--accent);
background-origin: border-box;
border: 1px solid transparent;
border-radius: 10px;
-webkit-appearance: none;
appearance: none;
box-shadow: 0 6px 20px -8px var(--accent), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
cursor: pointer;
transition: transform .15s, box-shadow .15s, background .15s;
}
html[data-theme="dark"] .installment .installment__form button[type="submit"] { box-shadow: var(--nx-key); }
@media (hover: hover) {
.installment .installment__form button[type="submit"]:hover {
background: var(--accent-2);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
html[data-theme="dark"] .installment .installment__form button[type="submit"]:hover { background: var(--accent-3); }
}
@media (prefers-reduced-motion: reduce) {
.installment .installment__form button[type="submit"] { transition: background .15s; }
.installment .installment__form button[type="submit"]:hover { transform: none; }
}
@media (max-width: 767px) {
.installment .installment__title { font-size: 19px; }
.installment .installment__form input[type="text"] {
font-size: 16px;
padding: 11px 13px;
}
}
.installment .installment__back {
margin-top: 16px;
padding: 8px 10px 8px 18px;
border-bottom: 0;
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-2);
}
.installment .installment__back:before {
border-left: 1.5px solid var(--text-2);
border-bottom: 1.5px solid var(--text-2);
}
.installment .installment__back:after { background: var(--text-2); }
@media (hover: hover) {
.installment .installment__back:hover { color: var(--accent-2); }
.installment .installment__back:hover:before {
border-left-color: var(--accent-2);
border-bottom-color: var(--accent-2);
}
.installment .installment__back:hover:after { background: var(--accent-2); }
}
.installment .installment__success {
padding: 24px 10px 32px;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
text-align: center;
color: var(--success-ink);
}
/* End */
/* Start:/local/templates/xcore_front/css/cart.xfmin-1-19061.css?179284132111018*/
.xf-cart__title {
margin: 18px 0 0;
font-size: 38px;
font-weight: 600;
letter-spacing: -1.2px;
line-height: 1.05;
display: inline-flex;
align-items: baseline;
gap: 14px;
}
.xf-cart__title-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 10px;
background: var(--accent-dim);
color: var(--accent-2);
border: 1px solid var(--accent-line);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
position: relative;
top: -6px;
}
.xf-cart {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 28px;
align-items: start;
}
.xf-cart__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.xf-cart-item {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 140px 130px 36px;
gap: 18px;
align-items: center;
padding: 16px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
}
.xf-cart-item__img {
display: flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
background: var(--surface-2);
border-radius: 10px;
overflow: hidden;
color: var(--text-3);
}
.xf-cart-item__img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
html[data-theme="dark"] .xf-cart-item__img:has(img) {
position: relative;
background: #fff;
isolation: isolate;
}
html[data-theme="dark"] .xf-cart-item__img:has(img)::after {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
mix-blend-mode: multiply;
background: var(--nx-lightbox);
}
.xf-cart-item__main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.xf-cart-item__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-3);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
row-gap: 2px;
}
.xf-cart-item__article {
color: var(--text-3);
white-space: nowrap;
}
.xf-cart-item__name {
font-size: 15px;
font-weight: 500;
color: var(--text);
text-decoration: none;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (hover: hover) {
.xf-cart-item__name:hover { color: var(--accent-2); }
}
.xf-cart-item__price {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-2);
display: inline-flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
row-gap: 2px;
}
.xf-cart-item__price-cur {
color: var(--text-3);
font-size: 0.85em;
white-space: nowrap;
}
.xf-cart-item__price-each {
font-family: var(--font-sans);
color: var(--text-3);
font-size: 12px;
margin-left: 4px;
white-space: nowrap;
}
.xf-cart-item__qty form {
display: inline-flex;
align-items: center;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 10px;
overflow: hidden;
}
.xf-cart-item__qty-btn {
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: var(--text);
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: background .15s, color .15s;
}
@media (hover: hover) {
.xf-cart-item__qty-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--accent-2); }
}
.xf-cart-item__qty-btn:disabled { color: var(--text-3); cursor: not-allowed; }
.xf-cart-item__qty-val {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
color: var(--text);
width: 36px;
text-align: center;
}
.xf-cart-item__sum {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 600;
color: var(--text);
text-align: right;
display: inline-flex;
align-items: baseline;
justify-content: flex-end;
gap: 6px;
}
.xf-cart-item__sum-cur { color: var(--text-3); font-size: 0.7em; font-weight: 500; }
.xf-cart-item__remove button {
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: var(--text-3);
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s;
}
@media (hover: hover) {
.xf-cart-item__remove button:hover { background: oklch(0.72 0.2 25 / 0.14); color: var(--danger); }
}
.xf-cart-item--dead .xf-cart-item__img,
.xf-cart-item--dead .xf-cart-item__eyebrow,
.xf-cart-item--dead .xf-cart-item__name,
.xf-cart-item--dead .xf-cart-item__price,
.xf-cart-item--dead .xf-cart-item__qty,
.xf-cart-item--dead .xf-cart-item__sum { opacity: 0.55; }
.xf-cart-item__stock {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
color: var(--warning);
}
.xf-cart-item__stock-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
flex: 0 0 auto;
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.xf-cart-item.is-removing {
opacity: 0.4;
pointer-events: none;
position: relative;
transition: opacity .2s;
}
.xf-cart-item.is-removing::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 8px,
color-mix(in oklch, var(--text) 6%, transparent) 8px,
color-mix(in oklch, var(--text) 6%, transparent) 14px
);
border-radius: inherit;
pointer-events: none;
}
.xf-cart__clear-row {
margin-top: 4px;
text-align: right;
}
.xf-cart__clear {
background: transparent;
border: 0;
color: var(--text-3);
font-family: var(--font-sans);
font-size: 13px;
cursor: pointer;
padding: 8px 4px;
transition: color .15s;
}
@media (hover: hover) {
.xf-cart__clear:hover { color: var(--danger-ink); }
}
.xf-cart__summary {
position: sticky;
top: calc(20px + var(--xf-header-h, 154px) - 154px);
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
}
.xf-cart__summary-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-2);
margin-bottom: 6px;
}
.xf-cart__summary-line {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 14px;
color: var(--text-2);
}
.xf-cart__summary-line span:last-child {
font-family: var(--font-mono);
color: var(--text);
}
.xf-cart__summary-line--soft span:last-child {
font-family: var(--font-sans);
color: var(--text-3);
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
}
.xf-cart__summary-divider {
height: 1px;
background: var(--line-soft);
margin: 6px 0;
}
.xf-cart__summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
}
.xf-cart__summary-total > span:first-child {
font-size: 14px;
font-weight: 500;
color: var(--text-2);
font-family: var(--font-sans);
letter-spacing: 0;
}
.xf-cart__summary-total-val {
font-family: var(--font-mono);
font-size: 24px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.4px;
}
.xf-cart__summary-total-cur { font-size: 0.6em; color: var(--text-3); margin-left: 4px; }
.xf-cart__order { width: 100%; margin-top: 4px; }
:root .xf-btn.xf-cart__order[aria-disabled="true"],
:root .xf-btn.xf-cart-sticky__btn[aria-disabled="true"] {
background: var(--surface-2);
color: var(--text-3);
border-color: var(--line-soft);
box-shadow: none;
transform: none;
cursor: not-allowed;
}
.xf-cart__summary-note {
margin-top: 10px;
font-size: 12px;
line-height: 1.45;
color: var(--text-3);
}
.xf-cart__summary-trust {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--line-soft);
}
.xf-cart__summary-trust-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
line-height: 1.4;
color: var(--text-3);
}
.xf-cart__summary-trust-row svg {
flex: 0 0 14px;
color: var(--text-3);
}
.xf-cart__summary-trust-row a,
.xf-cart__summary-note a { text-decoration: underline; text-underline-offset: 2px; }
.xf-cart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 56px 20px;
text-align: center;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
}
.xf-cart-empty__icon {
color: var(--text-3);
margin-bottom: 18px;
opacity: 0.6;
}
.xf-cart-empty__title {
margin: 0 0 8px;
font-size: 24px;
font-weight: 600;
}
.xf-cart-empty__text {
margin: 0 0 22px;
color: var(--text-2);
font-size: 14px;
}
.xf-cart-sticky { display: none; }
@media (max-width: 767px) {
.xf-cart {
grid-template-columns: 1fr;
gap: 14px;
padding-bottom: 84px;
}
.xf-cart-item {
grid-template-columns: 72px minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 10px 14px;
padding: 14px;
position: relative;
}
.xf-cart-item__img {
grid-row: 1;
grid-column: 1;
width: 72px;
height: 72px;
}
.xf-cart-item__main {
grid-row: 1;
grid-column: 2;
padding-right: 36px;
}
.xf-cart-item__qty {
grid-row: 2;
grid-column: 1 / -1;
justify-self: start;
}
.xf-cart-item__sum {
grid-row: 2;
grid-column: 1 / -1;
justify-self: end;
align-self: center;
font-size: 17px;
}
.xf-cart-item__remove {
position: absolute;
top: 6px;
right: 6px;
}
.xf-cart-item__qty-btn { width: 44px; height: 44px; font-size: 20px; }
.xf-cart-item__qty-val { width: 40px; }
.xf-cart-item__remove button { width: 44px; height: 44px; }
.xf-cart__summary {
position: static;
top: auto;
}
.xf-cart-sticky {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
background: color-mix(in oklch, var(--surface) 94%, transparent);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-top: 1px solid var(--line-soft);
box-shadow: 0 -8px 24px -14px oklch(0.1 0.02 270 / 0.25);
transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
opacity: 0;
pointer-events: none;
}
.xf-cart-sticky.is-initialized {
transition: transform .22s ease-out, opacity .18s ease-out;
}
.xf-cart-sticky.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.xf-cart-sticky__total {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.xf-cart-sticky__label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
color: var(--text-3);
}
.xf-cart-sticky__val {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 600;
color: var(--text);
line-height: 1.1;
white-space: nowrap;
}
.xf-cart-sticky__val-cur {
font-size: 0.7em;
color: var(--text-3);
margin-left: 3px;
font-weight: 500;
}
.xf-cart-sticky__btn {
flex: 0 0 auto;
min-height: 44px;
padding: 0 16px;
white-space: nowrap;
}
@media (max-width: 359px) {
.xf-cart-sticky__btn-tail { display: none; }
}
body.xf-cookie-up .xf-cart-sticky { padding-bottom: 12px; }
body.xf-cookie-up .xf-cart-sticky.is-visible { bottom: var(--xf-cookie-h, 0px); }
html:has(.xf-cart-sticky.is-visible) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
html:has(> body.xf-cookie-up .xf-cart-sticky.is-visible) { scroll-padding-bottom: 240px; }
@media (prefers-reduced-motion: reduce) {
.xf-cart-sticky.is-initialized { transition: none; }
}
}
/* End */
/* Start:/local/templates/xcore_front/css/auth.xfmin-1-13156.css?17928314018894*/
.xf-auth {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
gap: 40px;
align-items: start;
}
.xf-auth--single {
grid-template-columns: minmax(0, 540px);
justify-content: center;
}
.xf-auth__side {
padding: 24px 8px;
}
.xf-auth__side-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-2);
margin-bottom: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.xf-auth__side-eyebrow::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--accent-2);
}
.xf-auth__side-title {
margin: 0 0 24px;
font-size: 30px;
font-weight: 600;
letter-spacing: -1.2px;
line-height: 1.15;
max-width: 22ch;
}
.xf-auth__side-list,
.xf-auth__side-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.xf-auth__side-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: var(--text-2);
line-height: 1.45;
}
.xf-auth__side-list li svg {
color: var(--accent-2);
margin-top: 2px;
flex-shrink: 0;
}
.xf-auth__side-steps {
gap: 14px;
}
.xf-auth__side-steps li {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 14px;
color: var(--text-2);
line-height: 1.45;
}
.xf-auth__step-num {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent-dim);
color: var(--accent-2);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
}
.xf-auth__card {
padding: 30px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
}
.xf-auth__eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-2);
margin-bottom: 8px;
}
.xf-auth__title {
margin: 0 0 8px;
font-size: 28px;
font-weight: 600;
letter-spacing: -1px;
}
.xf-auth__sub {
margin: 0 0 20px;
color: var(--text-2);
font-size: 14px;
line-height: 1.5;
}
.xf-auth__tabs {
display: inline-flex;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: 4px;
margin-bottom: 22px;
width: 100%;
}
.xf-auth__tab {
flex: 1;
text-align: center;
padding: 9px 14px;
font-size: 14px;
font-weight: 500;
color: var(--text-2);
border-radius: 8px;
text-decoration: none;
transition: background .15s, color .15s;
}
@media (hover: hover) {
.xf-auth__tab:hover { color: var(--text); }
}
.xf-auth__tab.is-active {
background: var(--surface-3);
color: var(--text);
}
.xf-auth__notice {
padding: 12px 14px;
border-radius: 10px;
font-size: 13px;
line-height: 1.45;
margin-bottom: 16px;
}
.xf-auth__notice--ok {
background: color-mix(in oklch, var(--success) 12%, transparent);
color: var(--success-ink);
border: 1px solid color-mix(in oklch, var(--success) 35%, transparent);
}
.xf-auth__notice--err {
background: color-mix(in oklch, var(--danger) 12%, transparent);
color: var(--danger-ink);
border: 1px solid color-mix(in oklch, var(--danger) 35%, transparent);
}
.xf-auth__notice a {
color: inherit;
font-weight: 600;
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (hover: hover) { .xf-auth__notice a:hover { text-decoration: none; } }
.xf-auth__form {
display: flex;
flex-direction: column;
gap: 14px;
}
.xf-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.xf-field__label {
font-size: 12.5px;
font-weight: 500;
color: var(--text-2);
font-family: var(--font-sans);
text-transform: none;
letter-spacing: 0;
}
.xf-field__input {
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font-family: var(--font-sans);
font-size: 14px;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.xf-field__input:focus-visible {
border-color: var(--accent);
background: var(--surface-3);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}
.xf-field__hint {
display: block;
margin-top: 2px;
font-size: 12px;
line-height: 1.4;
color: var(--text-2);
}
.xf-field--invalid .xf-field__input {
border-color: var(--danger);
background: color-mix(in oklch, var(--danger) 6%, var(--surface-2));
}
.xf-field--invalid .xf-field__input:focus-visible {
border-color: var(--danger);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 25%, transparent);
}
.xf-field__error {
display: block;
margin-top: 4px;
font-size: 12px;
line-height: 1.4;
color: var(--danger-ink);
}
.xf-field__error:empty {
display: none;
}
.xf-btn.is-loading {
cursor: wait;
opacity: 0.7;
pointer-events: none;
}
.xf-auth__captcha-row {
display: flex;
align-items: center;
gap: 8px;
}
.xf-auth__captcha-img {
display: block;
width: 180px;
height: 40px;
border: 1px solid var(--line-soft);
border-radius: 10px;
background: var(--surface-2);
}
.xf-auth__captcha-reload {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--line-soft);
border-radius: 10px;
background: var(--surface);
color: var(--text-3);
cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
@media (hover: hover) {
.xf-auth__captcha-reload:hover {
color: var(--accent);
border-color: var(--accent-line);
}
}
.xf-auth__captcha-reload svg { display: block; }
.xf-auth__captcha-reload.loading {
pointer-events: none;
opacity: 0.6;
}
.xf-auth__details {
margin: -2px 0 0;
}
.xf-auth__details-summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 0;
font-size: 13px;
color: var(--text-2);
user-select: none;
}
.xf-auth__details-summary::-webkit-details-marker { display: none; }
.xf-auth__details-summary::before {
content: "+";
display: inline-flex;
width: 18px;
height: 18px;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
color: var(--accent-2);
background: var(--accent-dim);
border-radius: 5px;
transition: transform .15s, background .15s;
}
.xf-auth__details[open] .xf-auth__details-summary::before {
transform: rotate(45deg);
}
.xf-auth__details-summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.xf-auth__details[open] .xf-auth__row-fields {
margin-top: 10px;
}
@media (max-width: 767px) {
.xf-field__input { font-size: 16px; padding: 10px 12px; }
.xf-auth {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
padding-bottom: 160px;
}
.xf-auth__card { order: 1; padding: 18px 16px; }
.xf-auth__side { order: 2; padding: 8px 0 0; }
.xf-auth[data-mode="login"] .xf-auth__side { display: none; }
.xf-auth__side-title {
font-size: 22px;
letter-spacing: -0.6px;
margin-bottom: 14px;
}
.xf-auth__side-list { gap: 8px; }
.xf-auth__side-list li { font-size: 13px; }
.xf-auth__title { font-size: 22px; letter-spacing: -0.6px; }
.xf-auth__form { gap: 8px; }
.xf-auth__tabs { margin-bottom: 12px; padding: 3px; }
.xf-auth__details-summary { padding: 6px 0; font-size: 12.5px; }
.xf-auth__notice { margin-bottom: 12px; }
.xf-auth__tab { padding: 13px 14px; }
.xf-auth__submit { scroll-margin-bottom: 180px; }
}
.xf-auth__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: -2px;
}
.xf-auth__row-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 520px) {
.xf-auth__row-fields { grid-template-columns: 1fr; }
}
.xf-checkbox {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-2);
cursor: pointer;
min-height: 32px;
padding: 6px 0;
margin: -6px 0;
}
.xf-checkbox input {
accent-color: var(--accent);
width: 16px;
height: 16px;
}
.xf-checkbox input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 3px;
}
.xf-auth__link {
color: var(--accent-2);
font-size: 13px;
text-decoration: none;
padding: 8px 0;
margin: -8px 0;
}
@media (hover: hover) {
.xf-auth__link:hover { text-decoration: underline; }
}
html[data-theme="dark"] .xf-auth__link {
text-decoration: underline;
text-decoration-color: oklch(1 0 0 / 0.4);
text-underline-offset: 3px;
}
.xf-auth__link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
.xf-auth__submit { width: 100%; margin-top: 6px; }
.xf-auth__small {
margin: 14px 0 0;
font-size: 12px;
color: var(--text-3);
line-height: 1.5;
}
.xf-auth__small a {
color: var(--accent-2);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: color-mix(in oklch, var(--accent-2) 45%, transparent);
}
.xf-auth__small a:hover,
.xf-auth__small a:focus-visible {
text-decoration-color: var(--accent-2);
}
.xf-auth__small a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 3px;
}
.xf-auth__actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
}
/* End */
/* Start:/local/templates/xcore_front/css/order.xfmin-1-16649.css?17928464909146*/
.xf-order {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 28px;
align-items: start;
}
.xf-order__main {
display: flex;
flex-direction: column;
gap: 16px;
}
.xf-order__block {
padding: 24px 26px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
}
.xf-order__block-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-2);
margin-bottom: 6px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.xf-order__block-eyebrow::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--accent-2);
}
.xf-order__block-title {
margin: 0 0 18px;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.4px;
line-height: 1.2;
}
.xf-order__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.xf-field--wide { grid-column: 1 / -1; }
.xf-field__req {
color: var(--accent-2);
font-family: var(--font-mono);
margin-left: 2px;
}
.xf-field__input--area {
resize: vertical;
min-height: 88px;
line-height: 1.45;
font-family: var(--font-sans);
}
.xf-order__profiles {
margin-bottom: 16px;
}
.xf-order__profiles[hidden] { display: none; }
.xf-order__profiles > .xf-field__label {
display: block;
margin-bottom: 5px;
}
.xf-order__profiles-control {
position: relative;
}
.xf-order__profiles-control::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 16px;
height: 16px;
transform: translateY(-50%);
pointer-events: none;
background-color: var(--text-3);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.xf-order__profiles-select {
appearance: none;
-webkit-appearance: none;
width: 100%;
padding: 12px 40px 12px 14px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 10px;
color: var(--text);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.2;
cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.xf-order__profiles-select:focus-visible {
border-color: var(--accent);
background: var(--surface-3);
box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}
.xf-order__choices {
display: grid;
gap: 10px;
}
.xf-order__choices:has(.xf-choice__desc) {
grid-template-columns: 1fr;
}
.xf-order__choices:not(:has(.xf-choice__desc)) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
.xf-order__choices:not(:has(.xf-choice__desc)) { grid-template-columns: 1fr; }
}
.xf-choice {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease;
}
@media (hover: hover) {
.xf-choice:hover { background: var(--surface-3); }
}
.xf-choice[hidden],
.xf-field[hidden] { display: none; }
.xf-choice--locked { cursor: not-allowed; }
.xf-choice--locked .xf-choice__dot { opacity: .4; }
.xf-choice--locked .xf-choice__name { color: var(--text-3); }
@media (hover: hover) {
.xf-choice--locked:hover { background: var(--surface-2); }
}
.xf-choice__lock {
margin-top: 2px;
font-size: 12px;
font-weight: 500;
color: var(--text-2);
line-height: 1.4;
}
.xf-choice input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.xf-choice__dot {
margin-top: 3px;
width: 16px;
height: 16px;
border-radius: 999px;
border: 1.5px solid var(--line-soft);
background: var(--surface);
flex-shrink: 0;
transition: border-color .2s ease, box-shadow .2s ease;
position: relative;
}
.xf-choice__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1;
}
.xf-choice__name {
font-size: 14px;
font-weight: 500;
color: var(--text);
line-height: 1.35;
}
.xf-choice__desc {
font-size: 12px;
color: var(--text-2);
line-height: 1.5;
}
.xf-choice:has(input:checked) {
background: var(--accent-dim);
border-color: var(--accent-line);
}
.xf-choice:has(input:checked) .xf-choice__dot {
border-color: var(--accent-2);
box-shadow: inset 0 0 0 4px var(--accent-2);
}
.xf-choice:has(input:checked) .xf-choice__name { color: var(--text); }
.xf-choice input:focus-visible + .xf-choice__dot {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
html[data-theme="dark"] .xf-choice__dot { border-color: oklch(1 0 0 / 0.45); }
.xf-order__summary {
position: sticky;
top: calc(20px + var(--xf-header-h, 154px) - 154px);
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
max-height: calc(100vh - 40px - (var(--xf-header-h, 154px) - 154px));
overflow-y: auto;
}
@media (min-width: 768px) {
.xf-order__summary[data-xf-stick-shift] {
top: var(--xf-stick-top);
max-height: calc(100vh - var(--xf-stick-top) - 20px);
}
body.xf-cookie-up .xf-order__summary[data-xf-stick-shift] {
max-height: calc(100vh - var(--xf-stick-top) - 20px - var(--xf-cookie-h, 72px));
}
.xf-order__summary[data-xf-stick-shift] .xf-order__summary-list { flex-shrink: 0; }
}
.xf-order__summary-list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 2px 0 4px;
max-height: 320px;
overflow-y: auto;
}
.xf-order__summary-item {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 10px;
padding: 8px 0;
align-items: center;
}
.xf-order__summary-item + .xf-order__summary-item {
border-top: 1px solid var(--line-soft);
padding-top: 10px;
}
.xf-order__summary-img {
width: 44px;
height: 44px;
background: var(--surface-2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: var(--text-3);
}
.xf-order__summary-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.xf-order__summary-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xf-order__summary-name {
font-size: 12.5px;
line-height: 1.3;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-decoration: none;
transition: color 0.15s ease;
}
a.xf-order__summary-name:hover {
color: var(--accent-2);
}
.xf-order__summary-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
font-family: var(--font-mono);
font-size: 11.5px;
}
.xf-order__summary-qty { color: var(--text-3); }
.xf-order__summary-sum { color: var(--text); font-weight: 500; }
.xf-order__summary-cur { color: var(--text-3); font-size: 0.85em; margin-left: 2px; }
.xf-order__submit {
width: 100%;
margin-top: 6px;
}
.xf-order-success {
max-width: 620px;
margin: 0 auto;
padding: 36px 28px 40px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
text-align: center;
}
.xf-order-success__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin-bottom: 18px;
background: var(--accent-dim);
color: var(--accent-2);
border: 1px solid var(--accent-line);
border-radius: 999px;
}
.xf-order-success__title {
margin: 0 0 10px;
font-size: 28px;
font-weight: 600;
letter-spacing: -0.6px;
line-height: 1.2;
}
.xf-order-success__sub {
margin: 0 auto 24px;
max-width: 44ch;
color: var(--text-2);
line-height: 1.5;
}
.xf-order-success__card {
text-align: left;
padding: 18px 20px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 22px;
}
.xf-order-success__line {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13.5px;
color: var(--text-2);
}
.xf-order-success__val {
font-family: var(--font-mono);
color: var(--text);
font-weight: 500;
text-align: right;
max-width: 62%;
overflow-wrap: anywhere;
}
.xf-order-success__divider {
height: 1px;
background: var(--line-soft);
margin: 4px 0;
}
.xf-order-success__total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 2px;
}
.xf-order-success__total > span:first-child {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-2);
}
.xf-order-success__total-val {
font-family: var(--font-mono);
font-size: 24px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.4px;
}
.xf-order-success__total-cur { font-size: 0.6em; color: var(--text-3); margin-left: 4px; }
.xf-order-success__actions {
display: inline-flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 767px) {
.xf-order { grid-template-columns: 1fr; }
.xf-order__summary {
position: static;
max-height: none;
}
.xf-order__grid { grid-template-columns: 1fr; }
.xf-order__block { padding: 18px 16px; }
.xf-order__choices:not(:has(.xf-choice__desc)) {
grid-template-columns: 1fr;
}
.xf-choice { padding: 16px; }
}
/* End */
/* Start:/local/templates/xcore_front/css/account.xfmin-1-28285.css?179284130818212*/
.xf-account {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.xf-account--solo {
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
.xf-account--compare {
grid-template-columns: minmax(0, 1fr);
}
.xf-account--compare > .xf-account__side {
display: none;
}
}
.xf-account__side {
position: sticky;
top: calc(16px + var(--xf-header-h, 154px) - 154px);
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px 18px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
}
.xf-account__who {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line-soft);
}
.xf-account__avatar {
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: #fff;
font-weight: 600;
font-size: 16px;
letter-spacing: -0.5px;
}
.xf-account__avatar--guest {
background: var(--surface-2);
color: var(--text-3);
border: 1px solid var(--line-soft);
}
.xf-account__who--guest .xf-account__email {
color: var(--accent-2);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
}
@media (hover: hover) {
.xf-account__who--guest .xf-account__email:hover { color: var(--text); }
}
.xf-account__who-meta {
min-width: 0;
flex: 1;
}
.xf-account__name {
font-size: 14px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.xf-account__email {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-size: 11px;
color: var(--text-3);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.xf-account__nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.xf-account__nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
font-size: 14px;
color: var(--text-2);
transition: background .15s, color .15s;
}
@media (hover: hover) {
.xf-account__nav-link:hover {
background: var(--surface-2);
color: var(--text);
}
}
.xf-account__nav-link.is-active {
background: var(--accent-dim);
color: var(--accent-2);
}
.xf-account__nav-link svg { flex: 0 0 auto; }
.xf-account__logout {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--line-soft);
}
.xf-account__logout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: transparent;
color: var(--text-3);
font-family: var(--font-sans);
font-size: 14px;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
@media (hover: hover) {
.xf-account__logout-btn:hover {
background: oklch(0.72 0.20 25 / 0.08);
color: var(--danger-ink);
border-color: oklch(0.72 0.2 25 / 0.35);
}
html[data-theme="dark"] .xf-account__logout-btn:hover { color: oklch(0.82 0.14 25); }
}
.xf-account__content {
display: flex;
flex-direction: column;
gap: 28px;
min-width: 0;
}
.xf-account__hero {
padding: 28px;
background: var(--surface-2);
border: 1px solid var(--accent-line);
border-radius: var(--radius);
}
.xf-account__hero-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent-2);
}
.xf-account__hero-eyebrow::before {
content: "";
display: inline-block;
width: 24px;
height: 1px;
background: var(--accent-2);
vertical-align: middle;
margin-right: 10px;
}
.xf-account__hero-title {
margin: 12px 0 8px;
font-size: 32px;
font-weight: 600;
letter-spacing: -1px;
line-height: 1.1;
}
.xf-account__hero-sub {
margin: 0;
color: var(--text-2);
font-size: 14px;
}
.xf-account__actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.xf-account__action {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 20px;
gap: 14px;
align-items: center;
padding: 18px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
color: var(--text);
transition: border-color .15s, transform .15s, background .15s;
}
@media (hover: hover) {
.xf-account__action:hover {
border-color: var(--accent-line);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
.xf-account__action:hover .xf-account__action-arrow { color: var(--accent-2); }
}
.xf-account__action-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-dim);
color: var(--accent-2);
}
.xf-account__action-body { min-width: 0; }
.xf-account__action-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.2px;
margin-bottom: 4px;
}
.xf-account__action-sub {
font-size: 13px;
color: var(--text-2);
line-height: 1.4;
}
.xf-account__action-arrow {
color: var(--text-3);
display: inline-flex;
align-items: center;
justify-content: flex-end;
transition: color .15s;
}
.xf-account__section {
padding: 24px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
}
.xf-account__section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.xf-account__section-title {
margin: 0;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.5px;
}
.xf-account__section-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-2);
transition: color .15s;
}
@media (hover: hover) {
.xf-account__section-link:hover { color: var(--text); }
}
.xf-account__section-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-3);
}
.xf-account__product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.xf-account__orders {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.xf-account__orders--list {
grid-template-columns: 1fr;
}
.xf-account__order {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
transition: border-color .15s, transform .15s;
}
@media (hover: hover) {
.xf-account__order:hover {
border-color: var(--accent-line);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
}
.xf-account__order--row {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.xf-account__order-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.xf-account__order-num {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.5px;
color: var(--text-2);
}
.xf-account__order-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
color: var(--text-3);
font-size: 12px;
}
.xf-account__order-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.xf-account__order-price {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.2px;
}
.xf-account__order-cur {
font-size: 11px;
color: var(--text-3);
margin-left: 3px;
}
.xf-account-empty {
text-align: center;
padding: 40px 20px;
}
.xf-account-empty__icon {
display: inline-flex;
width: 76px;
height: 76px;
border-radius: 50%;
background: var(--surface-2);
align-items: center;
justify-content: center;
color: var(--text-3);
margin-bottom: 16px;
}
.xf-account-empty__title {
margin: 0 0 6px;
font-size: 20px;
font-weight: 600;
}
.xf-account-empty__text {
margin: 0 0 20px;
color: var(--text-2);
font-size: 14px;
}
.xf-account__pager {
display: flex;
align-items: center;
gap: 4px;
justify-content: center;
margin-top: 20px;
}
.xf-account__pager-link {
min-width: 36px;
height: 36px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line-soft);
border-radius: 8px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-2);
transition: border-color .15s, color .15s, background .15s;
}
@media (hover: hover) {
.xf-account__pager-link:hover {
border-color: var(--accent-line);
color: var(--text);
}
}
.xf-account__pager-link.is-active {
background: var(--accent-dim);
border-color: var(--accent-line);
color: var(--accent-2);
}
.xf-account__pager-gap {
min-width: 28px;
height: 36px;
display: inline-flex;
align-items: flex-end;
justify-content: center;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-3);
padding-bottom: 4px;
user-select: none;
}
.xf-account__detail-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.xf-account__detail-date {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-3);
margin-top: 6px;
}
.xf-account__detail-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.xf-account__detail-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
align-items: start;
}
.xf-account__detail-items {
display: flex;
flex-direction: column;
}
.xf-account__item {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--line-soft);
}
.xf-account__item:last-child { border-bottom: 0; }
.xf-account__item-img {
width: 80px;
height: 80px;
border-radius: 10px;
background: var(--surface-2);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-3);
}
.xf-account__item-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.xf-account__item-body { min-width: 0; }
.xf-account__item-name {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--text);
margin-bottom: 4px;
transition: color .15s;
}
@media (hover: hover) {
a.xf-account__item-name:hover { color: var(--accent-2); }
}
.xf-account__item-meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-3);
}
.xf-account__item-x {
color: var(--text-3);
margin: 0 6px;
}
.xf-account__item-sum {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.xf-account__item-cur {
font-size: 11px;
color: var(--text-3);
margin-left: 3px;
}
.xf-account__detail-side {
display: flex;
flex-direction: column;
gap: 14px;
}
.xf-account__detail-card {
padding: 18px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
}
.xf-account__detail-card-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 10px;
}
.xf-account__detail-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--line-soft);
font-size: 14px;
color: var(--text-2);
}
.xf-account__detail-total-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.5px;
}
.xf-account__detail-total-cur {
font-size: 12px;
color: var(--text-3);
margin-left: 3px;
}
.xf-account__detail-line {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 6px 0;
font-size: 13px;
}
.xf-account__detail-line-label {
color: var(--text-3);
flex-shrink: 0;
}
.xf-account__detail-line-val {
color: var(--text);
text-align: right;
word-break: break-word;
}
.xf-account__detail-back { align-self: flex-start; }
.xf-account__form-helper {
margin: 0 0 16px;
max-width: 560px;
font-size: 13px;
line-height: 1.5;
color: var(--text-2);
}
.xf-account__form {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 560px;
}
.xf-account__form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.xf-account__form-actions {
margin-top: 8px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.xf-account__addr-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.xf-account__addr-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
}
.xf-account__addr-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.xf-account__addr-card-title {
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
font-size: 15px;
font-weight: 600;
letter-spacing: -0.2px;
line-height: 1.3;
color: var(--text);
}
.xf-account__addr-card-title svg { flex: 0 0 auto; color: var(--text-3); margin-top: 2px; }
.xf-account__addr-card-title span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere;
}
.xf-account__addr-card-actions {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.xf-account__addr-del { margin: 0; }
.xf-account__addr-act {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 8px;
border: 0;
border-radius: 8px;
background: transparent;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-2);
cursor: pointer;
transition: background .15s, color .15s;
}
.xf-account__addr-act svg { flex: 0 0 auto; }
@media (hover: hover) {
.xf-account__addr-act:hover { background: var(--surface); color: var(--text); }
.xf-account__addr-act--del:hover {
background: oklch(0.72 0.20 25 / 0.08);
color: var(--danger-ink);
}
html[data-theme="dark"] .xf-account__addr-act--del:hover { color: oklch(0.82 0.14 25); }
}
.xf-account__addr-fields {
margin: 0;
padding-top: 12px;
border-top: 1px solid var(--line-soft);
display: flex;
flex-direction: column;
gap: 8px;
}
.xf-account__addr-row {
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
gap: 12px;
align-items: baseline;
}
.xf-account__addr-key {
margin: 0;
font-size: 12px;
color: var(--text-3);
}
.xf-account__addr-val {
margin: 0;
font-size: 13px;
color: var(--text);
word-break: break-word;
}
.xf-account__logout-mobile { display: none; }
@media (max-width: 767px) {
.xf-home__section--account { padding: 8px 0 24px; }
.xf-account {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.xf-account__side {
position: static;
padding: 0;
gap: 0;
background: transparent;
border: 0;
border-radius: 0;
}
.xf-account__who,
.xf-account__logout { display: none; }
.xf-account__nav {
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 2px 4px;
}
.xf-account__nav.is-fade-left.is-fade-right {
mask-image: linear-gradient(90deg,
transparent 0, #000 14px,
#000 calc(100% - 14px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg,
transparent 0, #000 14px,
#000 calc(100% - 14px), transparent 100%);
}
.xf-account__nav.is-fade-left:not(.is-fade-right) {
mask-image: linear-gradient(90deg, transparent 0, #000 14px);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px);
}
.xf-account__nav.is-fade-right:not(.is-fade-left) {
mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent 100%);
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent 100%);
}
.xf-account__nav::-webkit-scrollbar { display: none; }
.xf-account__nav-link {
flex: 0 0 auto;
padding: 11px 14px;
border-radius: 999px;
border: 1px solid var(--line-soft);
background: var(--surface);
font-size: 13px;
white-space: nowrap;
min-height: 44px;
}
.xf-account__nav-link.is-active {
background: var(--accent-dim);
border-color: var(--accent-line);
}
.xf-account__logout-mobile {
display: block;
margin-top: 8px;
}
.xf-account__logout-mobile .xf-account__logout-btn {
width: 100%;
min-height: 44px;
padding: 12px;
}
.xf-account__content { gap: 16px; }
.xf-account__hero { padding: 20px 18px; }
.xf-account__hero-title {
font-size: 24px;
letter-spacing: -0.5px;
margin: 8px 0 6px;
}
.xf-account__hero-sub { font-size: 13px; }
.xf-account__actions { grid-template-columns: 1fr; gap: 10px; }
.xf-account__action { padding: 14px 16px; gap: 12px; }
.xf-account__action-icon { width: 40px; height: 40px; border-radius: 10px; }
.xf-account__section { padding: 18px 16px; }
.xf-account__section-head { margin-bottom: 14px; }
.xf-account__section-title { font-size: 20px; }
.xf-account__orders { grid-template-columns: 1fr; gap: 10px; }
.xf-account__order {
padding: 14px;
border-radius: 14px;
}
.xf-account__order--row {
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
gap: 10px;
}
.xf-account__order--row .xf-account__order-head { row-gap: 6px; }
.xf-account__detail-grid { grid-template-columns: 1fr; gap: 18px; }
.xf-account__detail-head { gap: 10px; margin-bottom: 16px; }
.xf-account__detail-head .xf-account__section-title { font-size: 22px; }
.xf-account__item {
grid-template-columns: 72px 1fr auto;
grid-template-rows: auto auto;
align-items: center;
row-gap: 6px;
column-gap: 12px;
padding: 14px 0;
}
.xf-account__item-img {
width: 72px;
height: 72px;
grid-row: 1 / span 2;
grid-column: 1;
align-self: center;
}
.xf-account__item-body {
grid-row: 1;
grid-column: 2 / span 2;
align-self: end;
}
.xf-account__item-name { font-size: 13px; margin-bottom: 0; }
.xf-account__item-meta {
grid-row: 2;
grid-column: 2;
font-size: 12px;
align-self: baseline;
}
.xf-account__item-sum {
grid-row: 2;
grid-column: 3;
justify-self: end;
align-self: baseline;
font-size: 14px;
}
.xf-account__detail-back {
align-self: stretch;
justify-content: center;
width: 100%;
}
.xf-account__form-row { grid-template-columns: 1fr; }
.xf-account__form { max-width: 100%; }
.xf-account__form-actions .xf-btn { width: 100%; }
.xf-account__addr-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.xf-account__addr-card-head {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.xf-account__addr-card-actions { justify-content: flex-end; }
.xf-account__addr-act { padding: 8px 10px; min-height: 44px; }
.xf-account__addr-row { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.xf-account__product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.xf-account-empty { padding: 28px 12px; }
.xf-account-empty__icon { width: 64px; height: 64px; }
.xf-account-empty__title { font-size: 18px; }
.xf-account__pager-link { min-width: 44px; height: 44px; }
}
/* End */
/* Start:/local/templates/xcore_front/css/search.xfmin-1-21372.css?179284649510732*/
.xf-search { position: relative; }
.xf-search__dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--bg-2);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid var(--line-soft);
border-radius: 14px;
box-shadow: var(--shadow-card);
max-height: min(560px, calc(100vh - var(--xf-header-h, 154px) - 8px));
overflow-y: auto;
z-index: 60;
padding: 6px;
}
body.xf-cookie-up .xf-search__dropdown {
max-height: min(560px, calc(100vh - var(--xf-header-h, 154px) - var(--xf-cookie-h, 72px) - 8px));
}
@supports (height: 100svh) {
.xf-search__dropdown { max-height: min(560px, calc(100svh - var(--xf-header-h, 154px) - 8px)); }
body.xf-cookie-up .xf-search__dropdown {
max-height: min(560px, calc(100svh - var(--xf-header-h, 154px) - var(--xf-cookie-h, 72px) - 8px));
}
}
.xf-sugg__group + .xf-sugg__group {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid var(--line-soft);
}
.xf-sugg__label {
font-family: var(--font-mono);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--text-3);
padding: 8px 10px 6px;
}
.xf-sugg__item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: 10px;
color: var(--text);
text-decoration: none;
transition: background .12s;
}
.xf-sugg__item.is-hover {
background: var(--surface);
}
@media (hover: hover) {
.xf-sugg__item:hover {
background: var(--surface);
}
}
.xf-sugg__img {
flex: 0 0 48px;
width: 48px;
height: 48px;
border-radius: 8px;
background: var(--surface-2);
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
}
.xf-sugg__img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.xf-sugg__img-fallback {
width: 22px;
height: 22px;
border-radius: 4px;
background: var(--surface-3);
}
.xf-sugg__body {
flex: 1;
min-width: 0;
}
.xf-sugg__name {
font-size: 13.5px;
line-height: 1.35;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.xf-sugg__meta {
margin-top: 2px;
font-size: 11.5px;
color: var(--text-3);
display: flex;
align-items: center;
gap: 2px;
}
.xf-sugg__brand {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-2);
}
.xf-sugg__art {
font-family: var(--font-mono);
color: var(--text-3);
}
.xf-sugg__price {
flex: 0 0 auto;
margin-left: auto;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.2px;
white-space: nowrap;
padding-left: 8px;
}
.xf-sugg__item--section {
gap: 10px;
padding: 7px 10px;
color: var(--text-2);
font-size: 13px;
}
.xf-sugg__dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--accent-2);
flex: 0 0 auto;
}
.xf-sugg__empty {
padding: 20px 14px;
text-align: center;
color: var(--text-3);
font-size: 13px;
}
.xf-sugg__all {
display: flex;
align-items: center;
justify-content: center;
margin-top: 4px;
padding: 10px;
border-top: 1px solid var(--line-soft);
color: var(--accent-2);
font-size: 13px;
font-weight: 500;
position: sticky;
bottom: -6px;
background: var(--bg-2);
}
.xf-sugg__all.is-hover {
color: var(--text);
background: var(--surface);
}
@media (hover: hover) {
.xf-sugg__all:hover {
color: var(--text);
background: var(--surface);
}
}
.xf-search-page {
padding: 32px 0 80px;
}
.xf-search-page__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.xf-search-page__title {
font-size: 32px;
font-weight: 600;
letter-spacing: -0.8px;
line-height: 1.1;
margin: 0;
color: var(--text);
}
.xf-search-page__meta {
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--text-3);
}
.xf-search-page__fix,
.xf-search-page__no-exact {
flex-basis: 100%;
margin: -12px 0 0;
font-size: 14px;
line-height: 1.45;
color: var(--text-2);
}
.xf-search-page__form {
display: flex;
gap: 8px;
margin-bottom: 28px;
max-width: 640px;
}
.xf-search-page__form input {
flex: 1;
padding: 12px 16px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 12px;
font-size: 14px;
color: var(--text);
transition: border-color .15s;
font-family: inherit;
}
.xf-search-page__form input:focus { border-color: var(--accent-line); }
.xf-search-page__form button {
padding: 12px 22px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: transform .15s, box-shadow .15s;
}
html[data-theme="dark"] .xf-search-page__form button { box-shadow: var(--nx-key); }
@media (hover: hover) {
.xf-search-page__form button:hover {
transform: translateY(calc(-1px * var(--xf-motion, 1)));
box-shadow: 0 6px 18px -8px var(--accent);
}
}
.xf-search-page__hint,
.xf-search-page__empty {
padding: 48px 16px;
text-align: center;
color: var(--text-3);
font-size: 14px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 14px;
}
.xf-search-page__empty-msg {
margin: 0 auto 24px;
max-width: 60ch;
font-size: 15px;
line-height: 1.5;
color: var(--text-2);
}
.xf-search-page__hint {
margin-left: auto;
margin-right: auto;
max-width: 70ch;
}
.xf-search-page__empty-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.xf-search-page__empty-actions { flex-direction: column; align-items: stretch; }
.xf-search-page__empty-actions .xf-btn { width: 100%; }
}
.xf-search-page__controls {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px 16px;
margin: 0 0 16px;
}
.xf-search-page__sort {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
flex-wrap: wrap;
}
.xf-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px solid var(--line-soft);
border-radius: 999px;
background: var(--surface);
color: var(--text-2);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
white-space: nowrap;
}
.xf-chip__dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--text-3);
flex: 0 0 auto;
transition: background .15s;
}
@media (hover: hover) {
.xf-chip:hover {
border-color: var(--accent-line);
color: var(--text);
}
}
.xf-chip.is-active {
background: var(--accent-dim);
border-color: var(--accent-line);
color: var(--accent-2);
}
.xf-chip.is-active .xf-chip__dot {
background: var(--success, oklch(0.52 0.17 155));
}
.xf-sort-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 8px 5px 12px;
border: 1px solid var(--accent-line);
border-radius: 999px;
background: var(--accent-dim);
color: var(--accent-2);
font-size: 12.5px;
font-weight: 500;
text-decoration: none;
transition: background .15s, border-color .15s;
white-space: nowrap;
}
.xf-sort-pill__label { letter-spacing: 0; }
.xf-sort-pill__x {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 14%, transparent);
font-size: 14px;
line-height: 1;
}
@media (hover: hover) {
.xf-sort-pill:hover {
background: color-mix(in srgb, var(--accent) 14%, var(--surface));
border-color: var(--accent);
}
.xf-sort-pill:hover .xf-sort-pill__x {
background: color-mix(in srgb, var(--accent) 22%, transparent);
}
}
.xf-search-page__sections {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 20px;
}
.xf-search-page__sections--in-empty {
justify-content: center;
margin: 0 auto 24px;
max-width: 600px;
}
.xf-search-page__sections-label {
font-family: var(--font-mono);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--text-3);
margin-right: 4px;
}
.xf-search-page__sect {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: var(--accent-dim);
border: 1px solid var(--accent-line);
border-radius: 999px;
color: var(--accent-2);
font-size: 13px;
line-height: 1;
text-decoration: none;
transition: background .15s, transform .15s;
}
@media (hover: hover) {
.xf-search-page__sect:hover {
background: var(--accent);
color: #fff;
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
}
.xf-search-page__sect-count {
font-family: var(--font-mono);
font-size: 11px;
color: inherit;
}
.xf-search-page__sect.is-active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.xf-search-page__sect--brand {
background: var(--surface);
border-color: var(--line-soft);
color: var(--text-2);
}
@media (hover: hover) {
.xf-search-page__sect--brand:hover {
background: var(--surface-2);
border-color: var(--accent-line);
color: var(--text);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
}
.xf-search-page__sect--brand .xf-search-page__sect-count {
color: var(--text-3);
}
.xf-search-page__sections--popular .xf-search-page__sect--brand {
padding: 8px 14px;
font-size: 13px;
}
.xf-search-page__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.xf-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 32px;
flex-wrap: wrap;
}
.xf-pager__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 10px;
color: var(--text-2);
font-size: 13px;
font-family: var(--font-mono);
transition: all .15s;
}
@media (hover: hover) {
.xf-pager__link:hover {
background: var(--surface-2);
color: var(--text);
}
}
.xf-pager__link.is-active {
background: var(--accent-dim);
color: var(--accent-2);
border-color: var(--accent-line);
}
.xf-pager__arrow {
color: var(--text-3);
font-size: 16px;
line-height: 1;
}
.xf-pager__ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 36px;
color: var(--text-3);
font-size: 14px;
user-select: none;
}
@media (max-width: 767px) {
.xf-pager__link { min-width: 44px; height: 44px; font-size: 13.5px; }
.xf-pager__ellipsis { height: 44px; min-width: 18px; }
.xf-search-page__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
.xf-search-page { padding: 20px 0 60px; }
.xf-search-page__head {
align-items: flex-start;
gap: 6px;
margin-bottom: 16px;
}
.xf-search-page__title {
font-size: 24px;
letter-spacing: -0.4px;
line-height: 1.15;
}
.xf-search-page__meta { font-size: 11px; }
.xf-search-page__fix,
.xf-search-page__no-exact { margin-top: 0; font-size: 13px; }
.xf-search-page__controls {
justify-content: flex-start;
}
.xf-search-page__sort { width: 100%; }
.xf-chip { width: 100%; justify-content: center; }
}
/* End */
/* Start:/local/templates/xcore_front/css/modal.xfmin-1-85504.css?179283140149011*/
body.modal-open {
overflow: hidden;
}
#modalProducts.modal {
background: oklch(0.08 0.02 285 / 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
#modalProducts .modal-dialog {
max-width: 1280px;
margin: 32px auto;
}
#modalProducts.fade .modal-dialog {
transition:
transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.22s ease-out;
transform: scale(0.96) translateY(-10px);
opacity: 0;
}
#modalProducts.fade.in .modal-dialog,
#modalProducts.fade.show .modal-dialog {
transform: scale(1) translateY(0);
opacity: 1;
}
#modalProducts .modal-content {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 18px;
box-shadow:
0 40px 120px -20px oklch(0 0 0 / 0.6),
0 0 0 1px oklch(1 0 0 / 0.02);
overflow: hidden;
color: var(--text);
}
#modalProducts .modal-header {
background: transparent;
border-bottom: 1px solid var(--line-soft);
padding: 20px 28px;
display: flex;
align-items: center;
gap: 16px;
}
#modalProducts .modal-title {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.3px;
color: var(--text);
margin: 0;
flex: 1;
}
#modalProducts .close {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
color: var(--text-2);
opacity: 1;
font-size: 24px;
line-height: 1;
text-shadow: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, border-color .15s;
padding: 0;
margin: 0;
float: none;
}
#modalProducts .close:focus {
background: var(--surface-3);
color: var(--text);
border-color: var(--accent-line);
}
@media (hover: hover) {
#modalProducts .close:hover {
background: var(--surface-3);
color: var(--text);
border-color: var(--accent-line);
}
}
#modalProducts .close span {
display: inline-block;
line-height: 1;
}
#modalProducts .modal-body {
background: transparent;
color: var(--text);
padding: 22px 28px 28px;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
#modalProducts .modal-body::-webkit-scrollbar {
width: 8px;
}
#modalProducts .modal-body::-webkit-scrollbar-track {
background: transparent;
}
#modalProducts .modal-body::-webkit-scrollbar-thumb {
background: var(--surface-3);
border-radius: 4px;
}
@media (hover: hover) {
#modalProducts .modal-body::-webkit-scrollbar-thumb:hover {
background: var(--line);
}
}
#modalProducts .modal-body > .row { margin: 0; }
#modalProducts .modal-body > .row > .col-md-3 {
padding: 0 22px 0 0;
position: sticky;
top: 0;
align-self: flex-start;
max-height: calc(100vh - 180px);
overflow-y: auto;
overflow-x: hidden;
}
#modalProducts .modal-body > .row > .col-md-9 {
padding-left: 22px;
min-width: 0;
}
#modalProducts .modal-body > .row {
display: flex;
flex-wrap: wrap;
}
#modalProducts .modal-body > .row > .col-md-3::-webkit-scrollbar { width: 6px; }
#modalProducts .modal-body > .row > .col-md-3::-webkit-scrollbar-track { background: transparent; }
#modalProducts .modal-body > .row > .col-md-3::-webkit-scrollbar-thumb {
background: var(--surface-3);
border-radius: 3px;
}
#modalProducts #sortPanel.navbar.sticky-top,
#modalProducts #sortPanel.navbar {
position: static !important;
top: auto !important;
z-index: auto !important;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: 10px 14px;
margin: 0 0 14px 0;
min-height: auto;
border-width: 1px;
}
#modalProducts #sortPanel .container-fluid { padding: 0; }
#modalProducts #sortPanel > .container-fluid > .row {
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 14px;
}
#modalProducts #sortPanel .view-type { display: none !important; }
#modalProducts #sortPanel .sort {
padding: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
flex: 1;
min-width: 0;
width: auto !important;
max-width: 100%;
margin: 0;
}
#modalProducts #sortPanel .sort .navbar-text {
margin: 0;
padding: 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-3);
line-height: 1;
}
#modalProducts #sortPanel .sort #sort.nav {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
float: none;
flex: 1 1 0;
min-width: 0;
max-width: 460px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 10px;
overflow: hidden;
isolation: isolate;
}
#modalProducts #sortPanel .sort #sort.nav > li {
margin: 0;
padding: 0;
float: none;
list-style: none;
display: flex;
flex: 1 1 0;
min-width: 0;
box-sizing: border-box;
}
#modalProducts #sortPanel .sort #sort.nav > li + li {
border-left: 1px solid var(--line-soft);
}
#modalProducts #sortPanel .sort #sort.nav > li > a {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
flex: 1;
min-width: 0;
padding: 8px 10px;
border: 0;
border-radius: 0;
font-size: 12.5px;
line-height: 1.1;
color: var(--text-2);
background: transparent;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background .15s, color .15s;
cursor: pointer;
}
@media (hover: hover) {
#modalProducts #sortPanel .sort #sort.nav > li > a:hover {
background: var(--surface-3);
color: var(--text);
text-decoration: none;
}
}
#modalProducts #sortPanel .sort #sort.nav > li.active > a {
background: var(--accent-dim);
color: var(--accent-2);
font-weight: 600;
}
@media (hover: hover) {
#modalProducts #sortPanel .sort #sort.nav > li.active > a:hover {
background: var(--accent-dim);
color: var(--accent-2);
filter: none;
}
}
#modalProducts #sortPanel .sort #sort.nav > li > a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
border-radius: 6px;
}
#modalProducts #sortPanel .sort #sort.nav > li > a > span {
display: inline !important;
overflow: hidden;
text-overflow: ellipsis;
}
#modalProducts #sortPanel .sort #sort.nav > li > a > i.fa:not(.fa-level-up):not(.fa-level-down) {
display: none;
}
#modalProducts #sortPanel .sort #sort.nav > li > a > i.fa-level-up::before {
content: "↑";
font-family: inherit;
}
#modalProducts #sortPanel .sort #sort.nav > li > a > i.fa-level-down::before {
content: "↓";
font-family: inherit;
}
#modalProducts #sortPanel .sort #sort.nav > li > a > i.fa-level-up,
#modalProducts #sortPanel .sort #sort.nav > li > a > i.fa-level-down {
font-size: 12px;
font-style: normal;
line-height: 1;
color: var(--accent-2);
margin-left: 1px;
position: relative;
}
#modalProducts #sortPanel .sort #sort.nav > li.active > a:not(:has(> i.fa-level-up)):not(:has(> i.fa-level-down))::after {
content: "↑";
font-family: inherit;
font-size: 12px;
line-height: 1;
color: var(--accent-2);
margin-left: 1px;
}
#modalProducts #sortPanel .sort #sort.nav > li.active > a > i.fa-level-up::after { content: "↓"; }
#modalProducts #sortPanel .sort #sort.nav > li.active > a > i.fa-level-down::after { content: "↑"; }
#modalProducts #sortPanel .sort #sort.nav > li.active > a > i.fa-level-up::after,
#modalProducts #sortPanel .sort #sort.nav > li.active > a > i.fa-level-down::after {
font-family: inherit;
position: absolute;
left: 100%;
top: 0;
padding-left: 2px;
opacity: .35;
transition: opacity .15s;
}
@media (hover: hover) {
#modalProducts #sortPanel .sort #sort.nav > li.active > a:hover > i.fa-level-up::after,
#modalProducts #sortPanel .sort #sort.nav > li.active > a:hover > i.fa-level-down::after {
opacity: .55;
}
}
@media (prefers-reduced-motion: reduce) {
#modalProducts #sortPanel .sort #sort.nav > li.active > a > i.fa-level-up::after,
#modalProducts #sortPanel .sort #sort.nav > li.active > a > i.fa-level-down::after {
transition: none;
}
}
@media (max-width: 640px) {
#modalProducts #sortPanel .sort #sort.nav {
flex-wrap: wrap;
max-width: none;
width: 100%;
}
#modalProducts #sortPanel .sort #sort.nav > li {
flex: 1 1 50%;
}
#modalProducts #sortPanel .sort #sort.nav > li + li { border-left: 0; }
#modalProducts #sortPanel .sort #sort.nav > li:nth-child(2n) {
border-left: 1px solid var(--line-soft);
}
#modalProducts #sortPanel .sort #sort.nav > li:nth-child(n+3) {
border-top: 1px solid var(--line-soft);
}
}
#modalProducts .form-group,
#modalProducts .input-group,
#modalProducts .input-group-addon {
background: transparent;
}
#modalProducts .form-group {
margin-bottom: 20px !important;
margin-top: 0 !important;
}
#modalProducts .webprostor-configurator-catalog-section {
margin-top: 12px !important;
padding-top: 0 !important;
}
#modalProducts .xf-pc-grid {
margin-top: 0 !important;
}
#modalProducts .form-group > .input-group {
display: block;
width: 100%;
}
#modalProducts .form-group > .input-group > .input-group-addon {
display: none !important;
}
#modalProducts #quick_search,
#modalProducts input[type="search"],
#modalProducts .form-group input[type="text"] {
display: block;
float: none;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 10px;
color: var(--text);
padding: 10px 14px;
font-size: 13.5px;
width: 100%;
transition: border-color .15s, background .15s;
}
#modalProducts #quick_search:focus,
#modalProducts input[type="search"]:focus,
#modalProducts .form-group input[type="text"]:focus {
background: var(--surface);
border-color: var(--accent);
box-shadow: 0 0 0 3px oklch(0.68 0.22 var(--accent-h) / 0.15);
}
#modalProducts input::placeholder { color: var(--text-3); }
#modalProducts .xf-pc-grid {
display: grid;
width: 100%;
gap: 14px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#modalProducts .xf-pc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#modalProducts .xf-pc-grid--1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 991px) {
#modalProducts .xf-pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
#modalProducts .xf-pc-grid { grid-template-columns: 1fr; }
}
#modalProducts .webprostor-configurator-catalog-section > .row {
margin: 0;
}
#modalProducts .xf-pc-card {
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--text);
transition: border-color .15s, transform .15s, box-shadow .15s;
min-width: 0;
}
@media (hover: hover) {
#modalProducts .xf-pc-card:hover {
border-color: var(--accent);
box-shadow:
0 0 0 1px var(--accent),
0 0 24px -10px oklch(0.68 0.22 var(--accent-h) / 0.20),
0 12px 28px -16px oklch(0 0 0 / 0.35);
}
}
#modalProducts .xf-pc-card--selected {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 0 32px -12px oklch(0.68 0.22 var(--accent-h) / 0.35);
}
#modalProducts .xf-pc-card--muted {
opacity: 0.55;
}
#modalProducts .xf-pc-card__thumb {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 10;
background: var(--surface);
border-bottom: 1px solid var(--line-soft);
text-decoration: none;
color: var(--text-3);
}
#modalProducts a.xf-pc-card__thumb { cursor: pointer; }
#modalProducts .xf-pc-card__thumb-img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
#modalProducts .xf-pc-card__thumb-ph {
color: var(--text-3);
opacity: 0.5;
}
#modalProducts .xf-pc-card__thumb-ph svg { display: block; }
#modalProducts .xf-pc-card__quick {
position: absolute;
inset: 0;
z-index: 2;
background: transparent;
}
#modalProducts .xf-pc-card__body {
padding: 14px 16px 12px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
min-width: 0;
}
#modalProducts .xf-pc-card__title-link {
color: var(--text);
text-decoration: none;
}
@media (hover: hover) {
#modalProducts .xf-pc-card__title-link:hover .xf-pc-card__title {
color: var(--accent-2);
}
}
#modalProducts .xf-pc-card__title {
margin: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.1px;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#modalProducts .xf-pc-card__text {
font-size: 12.5px;
color: var(--text-2);
line-height: 1.45;
}
#modalProducts .xf-pc-card__specs {
margin: 0;
padding: 10px 0 0 0;
border-top: 1px dashed var(--line-soft);
display: flex;
flex-direction: column;
gap: 5px;
font-size: 12px;
color: var(--text-2);
}
#modalProducts .xf-pc-card__spec {
display: flex;
gap: 6px;
align-items: baseline;
min-width: 0;
}
#modalProducts .xf-pc-card__spec-key {
margin: 0;
color: var(--text-3);
flex: 0 0 auto;
}
#modalProducts .xf-pc-card__spec-key::after { content: ":"; }
#modalProducts .xf-pc-card__spec-val {
margin: 0;
color: var(--text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
#modalProducts .xf-pc-card__foot {
padding: 12px 16px 14px;
border-top: 1px solid var(--line-soft);
display: flex;
flex-direction: column;
gap: 10px;
background: var(--surface);
}
#modalProducts .xf-pc-card__status.badge {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 8px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.1px;
background: transparent;
color: var(--text-3);
border: 1px solid var(--line-soft);
text-transform: none;
}
#modalProducts .xf-pc-card__status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: none;
}
#modalProducts .xf-pc-card__status--ok {
color: oklch(0.82 0.2 152);
border-color: oklch(0.55 0.2 152 / 0.55);
background: oklch(0.36 0.14 152 / 0.22);
}
#modalProducts .xf-pc-card__status--ok .xf-pc-card__status-dot {
background: oklch(0.82 0.2 152);
box-shadow: 0 0 0 3px oklch(0.82 0.2 152 / 0.2);
}
#modalProducts .xf-pc-card__status--off {
color: oklch(0.8 0.15 75);
border-color: oklch(0.5 0.12 75 / 0.5);
background: oklch(0.32 0.08 75 / 0.18);
}
#modalProducts .xf-pc-card__status--off .xf-pc-card__status-dot {
background: oklch(0.8 0.15 75);
}
#modalProducts .xf-pc-card__status .fa { display: none; }
#modalProducts .xf-pc-card__price.price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
font-family: var(--font-mono);
color: var(--text);
}
#modalProducts .xf-pc-card__price-value.catalog-price {
font-size: 18px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.2px;
}
#modalProducts .xf-pc-card__price-old {
font-size: 12.5px;
color: var(--text-3);
text-decoration: line-through;
}
#modalProducts .xf-pc-card__cta.btn,
#modalProducts .xf-pc-card__cta.btn-success,
#modalProducts .xf-pc-card__cta.btn-primary,
#modalProducts .xf-pc-card__cta.btn-info {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
border-radius: 10px;
text-decoration: none;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .15s;
background-color: transparent !important;
background-image: none !important;
color: var(--accent-2) !important;
border: 1px solid var(--accent) !important;
width: 100%;
position: relative;
box-shadow: none !important;
text-shadow: none;
}
#modalProducts .xf-pc-card__cta.btn:focus,
#modalProducts .xf-pc-card__cta.btn:focus-visible,
#modalProducts .xf-pc-card__cta.btn:active,
#modalProducts .xf-pc-card__cta.btn.active,
#modalProducts .xf-pc-card__cta.btn:active:focus,
#modalProducts .xf-pc-card__cta.btn.focus,
#modalProducts .xf-pc-card__cta.btn-success:focus,
#modalProducts .xf-pc-card__cta.btn-success:active,
#modalProducts .xf-pc-card__cta.btn-success.active,
#modalProducts .xf-pc-card__cta.btn-success:active:focus,
#modalProducts .xf-pc-card__cta.btn-primary:focus,
#modalProducts .xf-pc-card__cta.btn-primary:active,
#modalProducts .xf-pc-card__cta.btn-primary.active,
#modalProducts .xf-pc-card__cta.btn-primary:active:focus {
color: var(--accent-2) !important;
background-color: var(--accent-dim) !important;
background-image: none !important;
filter: none;
text-decoration: none;
border: 1px solid var(--accent) !important;
box-shadow: none !important;
}
@media (hover: hover) {
#modalProducts .xf-pc-card__cta.btn:hover,
#modalProducts .xf-pc-card__cta.btn-success:hover,
#modalProducts .xf-pc-card__cta.btn-primary:hover {
color: var(--accent-2) !important;
background-color: var(--accent-dim) !important;
background-image: none !important;
filter: none;
text-decoration: none;
border: 1px solid var(--accent) !important;
box-shadow: none !important;
}
}
#modalProducts .xf-pc-card__form .xf-pc-card__cta {
margin-top: 12px;
}
#modalProducts .xf-pc-card__cta.btn-block {
display: inline-flex;
width: 100%;
}
#modalProducts .xf-pc-card__cta-icon {
font-family: var(--font-mono);
font-weight: 400;
font-size: 15px;
line-height: 1;
}
#modalProducts .xf-pc-card__cta-label {
font-family: inherit;
}
#modalProducts .xf-pc-card__cta--selected.btn,
#modalProducts .xf-pc-card__cta--selected.btn:focus,
#modalProducts .xf-pc-card__cta--selected.btn:active {
background-image: none !important;
background-color: var(--accent-dim) !important;
color: var(--accent-2) !important;
border: 1px solid var(--accent-line) !important;
cursor: default;
pointer-events: none;
filter: none !important;
box-shadow: none !important;
}
@media (hover: hover) {
#modalProducts .xf-pc-card__cta--selected.btn:hover {
background-image: none !important;
background-color: var(--accent-dim) !important;
color: var(--accent-2) !important;
border: 1px solid var(--accent-line) !important;
cursor: default;
pointer-events: none;
filter: none !important;
box-shadow: none !important;
}
}
#modalProducts .xf-pc-card__cta--remove.btn,
#modalProducts .xf-pc-card__cta--remove.btn:focus,
#modalProducts .xf-pc-card__cta--remove.btn:active,
#modalProducts .xf-pc-card__cta--remove.btn.active {
background-image: none !important;
background-color: oklch(0.32 0.1 25 / 0.25) !important;
border: 1px solid oklch(0.45 0.14 25 / 0.4) !important;
color: oklch(0.82 0.14 25) !important;
font-size: 12px;
padding: 8px 14px;
filter: none !important;
box-shadow: none !important;
}
@media (hover: hover) {
#modalProducts .xf-pc-card__cta--remove.btn:hover {
background-image: none !important;
background-color: oklch(0.32 0.1 25 / 0.25) !important;
border: 1px solid oklch(0.45 0.14 25 / 0.4) !important;
color: oklch(0.82 0.14 25) !important;
font-size: 12px;
padding: 8px 14px;
filter: none !important;
box-shadow: none !important;
}
}
@media (hover: hover) {
#modalProducts .xf-pc-card__cta--remove.btn:hover {
background-color: oklch(0.38 0.12 25 / 0.35) !important;
color: oklch(0.88 0.12 25) !important;
}
}
#modalProducts .xf-pc-card__qty {
display: grid;
grid-template-columns: 32px 1fr 32px;
gap: 2px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 10px;
overflow: hidden;
}
#modalProducts .xf-pc-card__qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-2);
text-decoration: none;
font-size: 14px;
background: transparent;
transition: background .12s;
user-select: none;
}
@media (hover: hover) {
#modalProducts .xf-pc-card__qty-btn:hover {
background: var(--surface-3);
color: var(--text);
text-decoration: none;
}
}
#modalProducts .xf-pc-card__qty-input {
background: transparent;
border: 0;
color: var(--text);
text-align: center;
font-family: var(--font-mono);
font-size: 13px;
min-width: 0;
padding: 6px 0;
}
#modalProducts .xf-pc-card__qty-total {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-3);
text-align: right;
}
#modalProducts .xf-pc-card__qty-total span { display: inline !important; }
#modalProducts .xf-pc-card__compare {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-3);
cursor: pointer;
margin: 0;
font-weight: 400;
}
#modalProducts .xf-pc-card__compare input[type="checkbox"] {
accent-color: var(--accent);
cursor: pointer;
}
#modalProducts .xf-pc-empty {
padding: 40px 24px;
text-align: center;
color: var(--text-3);
background: var(--surface-2);
border: 1px dashed var(--line-soft);
border-radius: 14px;
}
#modalProducts .xf-pc-empty__msg {
margin: 0 0 16px;
color: var(--text-2);
font-size: 14px;
line-height: 1.5;
}
#modalProducts .xf-pc-empty__cta {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
cursor: pointer;
transition: background .15s, color .15s;
}
@media (hover: hover) {
#modalProducts .xf-pc-empty__cta:hover {
background: var(--accent);
color: #fff;
}
}
#modalProducts .xf-pc-pager {
margin: 0;
color: var(--text-3);
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
padding: 8px 0;
}
#modalProducts .xf-pc-pager--bottom {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--line-soft);
}
#modalProducts .xf-pc-pager .navigation-title,
#modalProducts .xf-pc-pager .modern-page-navigation-title {
display: none;
}
#modalProducts .webprostor-configurator-pagination .bx-pagination,
#modalProducts .webprostor-configurator-pagination .bx-pagination-container {
margin: 0;
padding: 0;
}
#modalProducts .webprostor-configurator-pagination ul,
#modalProducts .xf-pc-pager ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
#modalProducts .webprostor-configurator-pagination li,
#modalProducts .xf-pc-pager li {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
}
#modalProducts .webprostor-configurator-pagination li > a,
#modalProducts .webprostor-configurator-pagination li > span,
#modalProducts .xf-pc-pager li > a,
#modalProducts .xf-pc-pager li > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
border-radius: 8px;
color: var(--text-2);
background: var(--surface-2);
border: 1px solid var(--line-soft);
text-decoration: none;
font-family: var(--font-mono);
font-size: 12.5px;
margin: 0;
transition: background .15s, color .15s, border-color .15s;
}
#modalProducts .webprostor-configurator-pagination li > a > span,
#modalProducts .webprostor-configurator-pagination li > a > b,
#modalProducts .xf-pc-pager li > a > span,
#modalProducts .xf-pc-pager li > a > b {
display: contents;
background: transparent;
border: 0;
padding: 0;
min-width: 0;
height: auto;
font: inherit;
color: inherit;
}
@media (hover: hover) {
#modalProducts .webprostor-configurator-pagination li > a:hover,
#modalProducts .xf-pc-pager li > a:hover {
background: var(--surface-3);
color: var(--text);
border-color: var(--accent-line);
text-decoration: none;
}
}
#modalProducts .webprostor-configurator-pagination li.bx-active > span,
#modalProducts .webprostor-configurator-pagination li.bx-active > a,
#modalProducts .xf-pc-pager li.bx-active > span,
#modalProducts .xf-pc-pager li.bx-active > a,
#modalProducts .webprostor-configurator-pagination .current,
#modalProducts .xf-pc-pager .current,
#modalProducts .xf-pc-pager .modern-page-current {
background: var(--accent-dim);
color: var(--accent-2);
border-color: var(--accent-line);
font-weight: 600;
}
#modalProducts .form-control {
background: var(--surface-2);
border: 1px solid var(--line-soft);
color: var(--text);
border-radius: 10px;
}
#modalProducts .form-control:focus {
background: var(--surface);
border-color: var(--accent);
box-shadow: 0 0 0 3px oklch(0.68 0.22 var(--accent-h) / 0.15);
}
#modalProducts label {
color: var(--text-2);
font-weight: 500;
}
#modalProducts a {
color: var(--accent-2);
}
#modalProducts #productFilterRight { color: var(--text); }
#modalProducts .xfsf,
#modalProducts .xfsf__section {
background: transparent;
color: var(--text);
}
#modalProducts .xfsf__form { margin: 0; }
#modalProducts .xfsf__list { margin: 0; padding: 0; }
#modalProducts .xfsf__box {
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
margin-bottom: 10px;
padding: 0;
float: none !important;
width: 100% !important;
}
#modalProducts .xfsf__box.list-group-item { margin-bottom: 10px; border: 1px solid var(--line-soft); }
html[data-theme="dark"] #modalProducts .xfsf__box,
html[data-theme="dark"] #modalProducts .xfsf__box.list-group-item {
background: var(--surface-3);
border-color: var(--line);
}
#modalProducts .xfsf__title {
padding: 12px 14px;
color: var(--text);
font-weight: 600;
font-size: 13px;
margin: 0;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
line-height: 1.3;
}
@media (hover: hover) {
#modalProducts .xfsf__title:hover { color: var(--text); }
}
#modalProducts .xfsf__title-name {
flex: 1;
min-width: 0;
}
#modalProducts .xfsf__chev {
flex: none;
color: var(--text-3);
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
transition: transform .2s;
font-family: inherit !important;
}
#modalProducts .xfsf__chev::before,
#modalProducts .xfsf__chev::after {
display: none !important;
content: none !important;
}
.xfsf__box:not(.bx-active) .xfsf__body { display: none; }
#modalProducts .xfsf__body {
padding: 0 14px 12px;
}
#modalProducts .xfsf__content {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
}
#modalProducts .xfsf__range {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-auto-rows: auto;
align-items: center;
gap: 8px;
margin: 0;
float: none;
}
#modalProducts .xfsf__range-cell {
padding: 0 !important;
margin: 0;
width: auto !important;
max-width: none !important;
float: none !important;
}
#modalProducts .xfsf__range-dash {
color: var(--text-3);
font-family: var(--font-mono);
font-size: 13px;
line-height: 1;
user-select: none;
}
#modalProducts .xfsf__input {
background: var(--surface);
border: 1px solid var(--line-soft);
color: var(--text);
border-radius: 8px;
padding: 8px 10px;
font-size: 12.5px;
font-family: var(--font-mono);
width: 100%;
box-sizing: border-box;
height: auto;
line-height: 1.3;
transition: border-color .15s, background .15s;
}
#modalProducts .xfsf__input:focus {
border-color: var(--accent);
background: var(--surface);
box-shadow: 0 0 0 3px oklch(0.68 0.22 var(--accent-h) / 0.15);
}
#modalProducts .xfsf__slider-wrap {
grid-column: 1 / -1;
padding: 8px 4px 2px;
width: auto !important;
max-width: none !important;
float: none !important;
}
#modalProducts .xfsf__slider.ui-slider {
position: relative;
height: 4px;
background: var(--surface-3);
border: 0;
border-radius: 999px;
margin: 0;
}
#modalProducts .xfsf__slider.ui-slider .ui-slider-range {
background: var(--accent);
height: 100%;
border-radius: 999px;
position: absolute;
top: 0;
}
#modalProducts .xfsf__slider.ui-slider .ui-slider-handle {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--text);
border: 2px solid var(--accent);
box-shadow: 0 2px 6px oklch(0 0 0 / 0.35);
top: -6px;
margin-left: -8px;
cursor: grab;
}
#modalProducts .xfsf__slider.ui-slider .ui-slider-handle.ui-state-focus,
#modalProducts .xfsf__slider.ui-slider .ui-slider-handle.ui-state-active {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 0 4px oklch(0.68 0.22 var(--accent-h) / 0.25);
cursor: grabbing;
}
@media (hover: hover) {
#modalProducts .xfsf__slider.ui-slider .ui-slider-handle:hover {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 0 4px oklch(0.68 0.22 var(--accent-h) / 0.25);
cursor: grabbing;
}
}
#modalProducts .xfsf__options {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0;
}
#modalProducts .xfsf__option {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
color: var(--text-2);
cursor: pointer;
font-weight: 400;
font-size: 12.5px;
line-height: 1.4;
margin: 0;
border: 0;
}
@media (hover: hover) {
#modalProducts .xfsf__option:hover { color: var(--text); }
}
#modalProducts .xfsf__option--disabled {
opacity: 0.45;
cursor: not-allowed;
}
#modalProducts .xfsf__option-input {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
padding: 0 !important;
background: transparent !important;
}
#modalProducts .xfsf__option-text {
flex: 1;
min-width: 0;
color: inherit;
overflow-wrap: anywhere;
word-break: break-word;
}
#modalProducts .xfsf__option-count {
margin-left: auto;
color: var(--text-3);
font-family: var(--font-mono);
font-size: 11.5px;
flex: none;
}
#modalProducts .xfsf__option input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
min-width: 16px;
border: 1.5px solid var(--line);
border-radius: 50%;
background: var(--surface);
cursor: pointer;
position: relative;
margin: 0 0 0 0;
transition: border-color .15s;
box-sizing: border-box;
flex: none;
}
#modalProducts .xfsf__option input[type="radio"]:checked {
border-color: var(--accent);
}
#modalProducts .xfsf__option input[type="radio"]:checked::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--accent);
}
#modalProducts .xfsf__dropdown { width: 100%; }
#modalProducts .xfsf__dropdown-block {
position: relative;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 8px;
padding: 8px 34px 8px 12px;
cursor: pointer;
font-size: 12.5px;
color: var(--text-2);
transition: border-color .15s;
}
@media (hover: hover) {
#modalProducts .xfsf__dropdown-block:hover { border-color: var(--accent-line); }
}
#modalProducts .xfsf__dropdown-arrow {
position: absolute;
right: 12px;
top: 50%;
width: 8px;
height: 8px;
border-right: 1.5px solid var(--text-3);
border-bottom: 1.5px solid var(--text-3);
transform: translateY(-70%) rotate(45deg);
background: transparent;
}
#modalProducts .xfsf__dropdown-popup {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 10;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 8px;
margin-top: 4px;
max-height: 260px;
overflow-y: auto;
box-shadow: 0 12px 32px -12px oklch(0 0 0 / 0.5);
}
#modalProducts .xfsf__dropdown-list { list-style: none; margin: 0; padding: 6px 0; }
#modalProducts .xfsf__dropdown-list li { margin: 0; }
#modalProducts .xfsf__dropdown-item {
display: block;
padding: 7px 12px;
color: var(--text-2);
font-size: 12.5px;
cursor: pointer;
border: 0;
margin: 0;
}
@media (hover: hover) {
#modalProducts .xfsf__dropdown-item:hover { background: var(--surface-3); color: var(--text); }
}
#modalProducts .xfsf__dropdown-item--selected { background: var(--accent-dim); color: var(--accent-2); }
#modalProducts .xfsf__dropdown-item--disabled { opacity: 0.45; cursor: not-allowed; }
#modalProducts .xfsf__actions {
margin-top: 12px;
padding: 0;
}
#modalProducts .xfsf__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0;
}
#modalProducts .xfsf__btn.btn {
padding: 10px 16px;
border-radius: 10px;
font-size: 12.5px;
font-weight: 500;
border: 0;
cursor: pointer;
transition: background-color .15s, filter .15s, box-shadow .15s;
line-height: 1.2;
background-image: none;
}
#modalProducts .xfsf__btn--apply.btn {
background: var(--accent) !important;
background-color: var(--accent) !important;
color: #fff !important;
flex: 1;
}
#modalProducts .xfsf__btn--apply.btn:focus {
filter: brightness(1.08);
color: #fff !important;
box-shadow: 0 6px 24px -10px oklch(0.68 0.22 var(--accent-h) / 0.6);
}
@media (hover: hover) {
#modalProducts .xfsf__btn--apply.btn:hover {
filter: brightness(1.08);
color: #fff !important;
box-shadow: 0 6px 24px -10px oklch(0.68 0.22 var(--accent-h) / 0.6);
}
}
#modalProducts .xfsf__btn--reset.btn {
background: var(--surface) !important;
border: 1px solid var(--line-soft) !important;
color: var(--text-2) !important;
}
#modalProducts .xfsf__btn--reset.btn:focus {
background: var(--surface-3) !important;
color: var(--text) !important;
border-color: var(--accent-line) !important;
}
@media (hover: hover) {
#modalProducts .xfsf__btn--reset.btn:hover {
background: var(--surface-3) !important;
color: var(--text) !important;
border-color: var(--accent-line) !important;
}
}
@media (min-width: 992px) {
#modalProducts .xfsf__actions {
position: sticky;
bottom: 0;
z-index: 2;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--line-soft);
background: var(--surface);
}
#modalProducts .xfsf__list {
padding-bottom: 52px;
}
body.xf-cookie-up #modalProducts .modal-body > .row > .col-md-3 {
max-height: calc(100vh - 180px - var(--xf-cookie-h, 96px));
}
}
#modalProducts .xfsf__popup,
#modalProducts #modef.bx-filter-popup-result {
display: none !important;
}
#modalProducts .bx-filter-container-modef { display: none !important; }
#modalProducts input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
border: 1.5px solid var(--line);
border-radius: 4px;
background: var(--surface);
cursor: pointer;
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 6px 0 0;
flex: none;
transition: border-color .15s, background .15s;
box-sizing: border-box;
padding: 0;
}
@media (hover: hover) {
#modalProducts input[type="checkbox"]:hover {
border-color: var(--accent-line);
}
}
#modalProducts input[type="checkbox"]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
#modalProducts input[type="checkbox"]:checked {
background-color: var(--accent);
border-color: var(--accent);
}
#modalProducts input[type="checkbox"]:checked::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
}
#modalProducts .bx_filter_param_label,
#modalProducts .bx-filter-param-label,
#modalProducts .bx_filter_input_container label,
#modalProducts .bx-filter-input-container label {
display: flex;
align-items: center;
gap: 4px;
color: var(--text-2);
font-size: 12.5px;
font-weight: 400;
padding: 4px 0;
cursor: pointer;
line-height: 1.4;
margin: 0;
}
@media (hover: hover) {
#modalProducts .bx_filter_param_label:hover,
#modalProducts .bx-filter-param-label:hover,
#modalProducts .bx_filter_input_container label:hover,
#modalProducts .bx-filter-input-container label:hover {
color: var(--text);
}
}
#modalProducts .bx_filter_param_text,
#modalProducts .bx-filter-param-text {
color: var(--text-3);
font-family: var(--font-mono);
font-size: 11.5px;
margin-left: auto;
}
#modalProducts .bx_filter_input_container input[type="text"],
#modalProducts .bx-filter-input-container input[type="text"],
#modalProducts .bx_filter_input_container input[type="number"],
#modalProducts .bx-filter-input-container input[type="number"] {
background: var(--surface);
border: 1px solid var(--line-soft);
color: var(--text);
border-radius: 8px;
padding: 7px 10px;
font-size: 12.5px;
font-family: var(--font-mono);
width: 100%;
}
#modalProducts .bx_filter_parameters_box_container_block,
#modalProducts .bx-filter-parameters-box-container-block {
display: flex;
gap: 8px;
align-items: center;
}
@media (max-width: 640px) {
#modalProducts.modal {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#modalProducts .modal-dialog {
max-width: none;
width: 100%;
margin: 0;
min-height: 100vh;
min-height: 100dvh;
}
#modalProducts.fade .modal-dialog,
#modalProducts.fade.in .modal-dialog,
#modalProducts.fade.show .modal-dialog {
transform: none !important;
transition: none !important;
}
#modalProducts .modal-content {
border-radius: 0;
border-left: 0;
border-right: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
box-shadow: none;
}
#modalProducts .modal-header {
position: sticky;
top: 0;
z-index: 5;
background: var(--surface);
padding: 14px 16px;
}
#modalProducts .modal-title {
font-size: 18px;
}
#modalProducts .modal-body {
padding: 14px 16px 24px;
flex: 1;
max-height: none;
}
}
@media (max-width: 991px) {
#modalProducts .col-xs-12.col-md-3 {
position: relative;
width: 100%;
margin: 0 0 16px;
padding: 0;
}
#modalProducts .col-xs-12.col-md-9 {
width: 100%;
margin: 0;
}
#productFilterRight {
display: flex !important;
flex-direction: column;
position: fixed;
top: 0;
right: 0;
z-index: 1060;
height: 100vh;
height: 100dvh;
width: 80%;
max-width: 360px;
background: var(--surface);
border-left: 1px solid var(--line-soft);
box-shadow: -10px 0 30px -10px oklch(0 0 0 / 0.4);
transform: translateX(100%);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
padding: 0;
}
body.xf-filter-drawer-open #productFilterRight {
transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
#productFilterRight { transition: none; }
}
.xf-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 1055;
background: oklch(0 0 0 / 0.5);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s, visibility 0.2s;
}
body.xf-filter-drawer-open .xf-drawer-backdrop {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#modalProducts #collapseFilter,
#modalProducts #collapseFilter:hover,
#modalProducts #collapseFilter:focus,
#modalProducts #collapseFilter:active {
background: var(--accent);
background-image: none;
color: #fff;
border: none;
border-radius: 10px;
padding: 10px 18px;
text-transform: none;
font-family: var(--font-sans, system-ui);
font-weight: 500;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: none;
text-shadow: none;
}
#modalProducts #collapseFilter:hover { opacity: 0.92; }
#modalProducts .hidden-md.hidden-lg .text-center { margin: 0 0 12px; text-align: left; }
#modalProducts .hidden-md.hidden-lg .text-center hr { display: none; }
}
@media (max-width: 991px) {
#modalProducts .modal-body > .row {
position: relative;
}
#modalProducts .modal-body > .row > .col-xs-12.col-md-3 {
position: absolute;
top: 0;
right: 0;
width: auto;
margin: 0;
padding: 0;
z-index: auto;
min-height: 0;
max-height: none;
overflow: visible;
}
#modalProducts .col-xs-12.col-md-3 .hidden-md.hidden-lg {
margin: 0;
}
#modalProducts .col-xs-12.col-md-3 .hidden-md.hidden-lg .text-center {
text-align: right;
margin: 0;
padding: 0;
}
#modalProducts .col-xs-12.col-md-3 .hidden-md.hidden-lg .text-center hr {
display: none;
}
#modalProducts .modal-body > .row > .col-xs-12.col-md-9 {
display: flex;
flex-direction: column;
width: 100%;
padding-left: 0;
position: static;
}
#modalProducts .col-xs-12.col-md-9 > .form-group {
order: 1;
margin-bottom: 12px;
padding-right: 50px;
}
#modalProducts .col-xs-12.col-md-9 > #sortPanel {
order: 2;
margin-bottom: 14px;
}
#modalProducts .col-xs-12.col-md-9 > .webprostor-configurator-catalog-section,
#modalProducts .col-xs-12.col-md-9 > .xf-pc-empty {
order: 3;
}
#modalProducts #collapseFilter,
#modalProducts #collapseFilter:hover,
#modalProducts #collapseFilter:focus,
#modalProducts #collapseFilter:active {
width: 40px;
height: 40px;
min-width: 40px;
padding: 0;
background: var(--accent-dim);
background-image: none;
color: var(--accent-2);
border: 1px solid var(--accent-line);
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
box-shadow: none;
text-shadow: none;
font-size: 0;
line-height: 1;
}
#modalProducts #collapseFilter > span {
display: none;
}
#modalProducts #collapseFilter > i.fa-filter {
font-size: 16px;
margin: 0;
color: inherit;
}
}
@media (max-width: 640px) {
#modalProducts .xf-pc-card {
display: grid;
grid-template-columns: 96px 1fr;
grid-template-areas:
"thumb body"
"thumb foot";
grid-template-rows: auto auto;
position: relative;
}
#modalProducts .xf-pc-card__thumb {
grid-area: thumb;
aspect-ratio: 1;
width: 96px;
border-bottom: 0;
border-right: 1px solid var(--line-soft);
align-self: stretch;
}
#modalProducts .xf-pc-card__body {
grid-area: body;
padding: 10px 14px 6px;
gap: 6px;
min-width: 0;
}
#modalProducts .xf-pc-card__foot {
grid-area: foot;
padding: 6px 14px 10px;
background: transparent;
border-top: 1px dashed var(--line-soft);
gap: 8px;
}
#modalProducts .xf-pc-card__title {
font-size: 13.5px;
-webkit-line-clamp: 2;
}
#modalProducts .xf-pc-card__specs {
border-top: 0;
padding-top: 4px;
gap: 3px;
font-size: 11.5px;
}
#modalProducts .xf-pc-card__spec:nth-of-type(n+4) {
display: none;
}
#modalProducts .xf-pc-card__cta.btn-add {
display: none !important;
}
#modalProducts .xf-pc-card__form .xf-pc-card__cta.btn-add {
display: inline-flex !important;
}
#modalProducts .xf-pc-card__cta--selected,
#modalProducts .xf-pc-card__cta--remove {
padding: 6px 12px;
font-size: 12.5px;
width: auto;
align-self: flex-start;
}
#modalProducts .xf-pc-card__title-link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
#modalProducts .xf-pc-card__status,
#modalProducts .xf-pc-card__cta--selected,
#modalProducts .xf-pc-card__cta--remove,
#modalProducts .xf-pc-card__compare {
position: relative;
z-index: 2;
}
#modalProducts .xf-pc-card__quick {
z-index: 3;
}
}
.xfsf__box {
border-bottom: 1px solid var(--line-soft);
padding: 12px 0;
}
.xfsf__box:last-child { border-bottom: 0; }
.xfsf__title {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
padding: 4px 0;
-webkit-tap-highlight-color: transparent;
}
.xfsf__title-name {
font-family: var(--font-sans, Onest, system-ui, sans-serif);
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.2px;
}
.xfsf__chev {
display: inline-flex;
color: var(--text-2);
transition: transform 0.2s ease;
flex-shrink: 0;
margin-left: 8px;
}
.xfsf__box.bx-active .xfsf__chev {
transform: rotate(180deg);
}
.xfsf__body {
padding-top: 10px;
}
.xfsf__range {
display: flex;
align-items: center;
gap: 8px;
}
.xfsf__range-cell { flex: 1; }
.xfsf__range-input { display: block; }
.xfsf__range-dash {
color: var(--text-3);
font-family: var(--font-sans, Onest, system-ui, sans-serif);
flex-shrink: 0;
}
.xfsf__input {
display: block;
width: 100%;
padding: 9px 11px;
font-family: var(--font-mono, "XCore Mono", ui-monospace, Menlo, monospace);
font-size: 14px;
font-weight: 500;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
transition: border-color 0.15s, box-shadow 0.15s;
-webkit-appearance: none;
appearance: none;
}
.xfsf__input::placeholder {
color: var(--text-3);
opacity: 1;
}
.xfsf__input:focus,
.xfsf__input:focus-visible {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.xfsf__options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
}
.xfsf__option {
display: flex;
align-items: flex-start;
cursor: pointer;
user-select: none;
padding: 6px 0;
-webkit-tap-highlight-color: transparent;
}
.xfsf__option-input {
display: inline-flex;
align-items: flex-start;
gap: 8px;
flex: 1;
min-width: 0;
}
.xfsf__option-input input[type="checkbox"],
.xfsf__option-input input[type="radio"] {
-webkit-appearance: none;
appearance: none;
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 1px 0 0;
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: 4px;
cursor: pointer;
position: relative;
transition: border-color 0.15s, background 0.15s;
}
.xfsf__option-input input[type="radio"] {
border-radius: 50%;
}
.xfsf__option-input input[type="checkbox"]:checked,
.xfsf__option-input input[type="radio"]:checked {
border-color: var(--accent);
background: var(--accent);
}
#productFilterRight input[type="checkbox"]:checked::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px 12px;
background-position: center;
background-repeat: no-repeat;
border: 0;
transform: none;
width: auto;
height: auto;
}
#productFilterRight input[type="radio"]:checked::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
transform: translate(-50%, -50%);
}
.xfsf__option-input input:focus-visible {
box-shadow: 0 0 0 3px var(--accent-dim);
}
.xfsf__option-text {
font-family: var(--font-sans, Onest, system-ui, sans-serif);
font-size: 14px;
color: var(--text);
line-height: 1.4;
word-break: break-word;
}
.xfsf__option-count {
font-family: var(--font-mono, "XCore Mono", ui-monospace, Menlo, monospace);
font-size: 11px;
color: var(--text-3);
margin-left: 4px;
white-space: nowrap;
}
.xfsf__option--disabled,
.xfsf__option-input.disabled {
opacity: 0.45;
cursor: not-allowed;
}
.xfsf__dropdown { position: relative; }
.xfsf__dropdown-block {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
font-family: var(--font-sans, Onest, system-ui, sans-serif);
font-size: 14px;
color: var(--text);
}
.xfsf__dropdown-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xfsf__dropdown-arrow {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid var(--text-2);
margin-left: 8px;
flex-shrink: 0;
}
.xfsf__dropdown-popup {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 240px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
margin-top: 4px;
z-index: 10;
box-shadow: 0 6px 18px -8px oklch(0 0 0 / 0.18);
}
.xfsf__dropdown-list { list-style: none; margin: 0; padding: 4px 0; }
.xfsf__dropdown-item {
display: block;
padding: 8px 12px;
font-family: var(--font-sans, Onest, system-ui, sans-serif);
font-size: 14px;
color: var(--text);
cursor: pointer;
}
.xfsf__dropdown-item:hover { background: var(--surface-2); }
.xfsf__dropdown-item--selected {
background: var(--accent-dim);
color: var(--accent-2);
font-weight: 500;
}
.xfsf__dropdown-item--disabled {
opacity: 0.45;
cursor: not-allowed;
}
.xfsf__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 18px;
font-family: var(--font-sans, Onest, system-ui, sans-serif);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.1px;
border-radius: 10px;
cursor: pointer;
transition: background 0.15s, opacity 0.15s, border-color 0.15s;
border: 1px solid transparent;
text-transform: none;
text-shadow: none;
box-shadow: none;
}
.xfsf__btn--apply {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.xfsf__btn--apply:hover,
.xfsf__btn--apply:focus { opacity: 0.92; }
.xfsf__btn--apply[data-xf-empty="1"] {
opacity: 0.55;
cursor: not-allowed;
}
.xfsf__btn--apply[data-xf-empty="1"]:hover,
.xfsf__btn--apply[data-xf-empty="1"]:focus { opacity: 0.55; }
.xfsf__btn--apply:disabled {
animation: xf-apply-pulse 0.6s ease-in-out infinite alternate;
cursor: progress;
}
@keyframes xf-apply-pulse {
from { opacity: 0.7; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.xfsf__btn--apply:disabled {
animation: none;
opacity: 0.85;
}
}
.xfsf__btn--reset {
background: var(--surface);
color: var(--text);
border-color: var(--line);
}
.xfsf__btn--reset:hover,
.xfsf__btn--reset:focus {
background: var(--surface-2);
border-color: var(--text-3);
}
.xfsf__drawer-header { display: none; }
@media (max-width: 991px) {
#productFilterRight .xfsf {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
#productFilterRight .xfsf__section {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
#productFilterRight .xfsf__form {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
#productFilterRight .xfsf__list {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 0;
padding: 8px 16px 16px;
margin: 0;
}
#productFilterRight .xfsf__drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
padding: 14px 12px 14px 16px;
border-bottom: 1px solid var(--line-soft);
background: var(--surface);
}
#productFilterRight .xfsf__drawer-title {
font-family: var(--font-sans, Onest, system-ui, sans-serif);
font-size: 17px;
font-weight: 600;
color: var(--text);
margin: 0;
letter-spacing: -0.3px;
}
#productFilterRight .xfsf__drawer-close {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--text-2);
border-radius: 10px;
cursor: pointer;
padding: 0;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, color 0.15s;
}
#productFilterRight .xfsf__drawer-close:hover,
#productFilterRight .xfsf__drawer-close:focus-visible {
background: var(--surface-2);
color: var(--text);
}
#productFilterRight .xfsf__actions {
flex-shrink: 0;
background: var(--surface);
border-top: 1px solid var(--line-soft);
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
margin: 0;
}
#productFilterRight .xfsf__buttons {
display: flex;
gap: 8px;
width: 100%;
}
#productFilterRight .xfsf__btn--reset {
flex: 0 0 auto;
min-width: 100px;
}
#productFilterRight .xfsf__btn--apply {
flex: 1;
}
#productFilterRight .xfsf__popup {
display: none !important;
}
#productFilterRight .xfsf__options {
grid-template-columns: 1fr;
}
#productFilterRight .xfsf__box[data-xfsf-shortrows] .xfsf__options {
grid-template-columns: 1fr 1fr;
}
}
/* End */
/* Start:/local/templates/xcore_front/css/content.xfmin-1-51936.css?179284133826139*/
.xf-help-hero {
max-width: 960px;
margin: 48px auto 32px;
padding: 0 24px;
}
.xf-help-hero--narrow {
max-width: 720px;
}
.xf-help-intro {
margin: -12px 0 0;
font-size: 20px;
line-height: 1.5;
color: var(--text-2);
text-wrap: pretty;
}
.xf-help-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-3);
margin: 0 0 12px;
}
.xf-help-title {
font-family: var(--font-sans);
font-size: 40px;
font-weight: 600;
letter-spacing: -0.8px;
line-height: 1.15;
color: var(--text);
margin: 0 0 28px;
}
.xf-pill-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.xf-pill-tab {
display: inline-flex;
align-items: center;
padding: 8px 18px;
border: 1px solid var(--line-soft);
border-radius: 999px;
background: var(--surface-2);
color: var(--text-2);
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
}
@media (hover: hover) {
.xf-pill-tab:hover {
background: oklch(from var(--surface-2) calc(l + 0.03) c h);
border-color: var(--accent-line);
color: var(--text);
}
}
.xf-pill-tab--active {
background: var(--accent);
background-origin: border-box;
background-clip: border-box;
border-color: transparent;
color: #fff;
}
@media (hover: hover) {
.xf-pill-tab--active:hover {
background: var(--accent);
background-origin: border-box;
background-clip: border-box;
border-color: transparent;
color: #fff;
}
}
.xf-help-body {
max-width: 720px;
margin: 0 auto 80px;
padding: 0 24px;
color: var(--text-2);
font-size: 15px;
line-height: 1.7;
}
.xf-help-body p,
.xf-help-body div {
margin: 0 0 14px;
}
.xf-help-body p:empty,
.xf-help-body div:empty,
.xf-help-body p > br:only-child {
margin: 0;
}
.xf-help-body ul,
.xf-help-body ol {
margin: 0 0 18px;
padding-left: 24px;
}
.xf-help-body li {
margin: 0 0 6px;
padding-left: 2px;
}
.xf-help-body li::marker {
color: var(--accent-2);
}
.xf-help-body b,
.xf-help-body strong {
color: var(--text);
font-weight: 600;
}
.xf-help-body a,
.xf-review-card__body a,
.xf-vacancy-card__preview a {
color: var(--accent-2);
text-decoration: underline;
text-decoration-color: var(--link-line);
text-underline-offset: 3px;
transition: color .15s, text-decoration-color .15s;
}
@media (hover: hover) {
.xf-help-body a:hover,
.xf-review-card__body a:hover,
.xf-vacancy-card__preview a:hover {
color: var(--text);
text-decoration-color: var(--accent-2);
}
}
.xf-help-body .xf-req-list a[href^="tel:"],
.xf-help-body .xf-req-list a[href^="mailto:"] {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-size: 14px;
letter-spacing: -0.1px;
}
.xf-help-body [style*="font-family"] {
font-family: var(--font-sans) !important;
}
.xf-help-body br + br + br {
display: none;
}
.xf-help-hub {
max-width: 960px;
margin: 0 auto 80px;
padding: 0 24px;
}
.xf-help-hub__cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 0 0 48px;
}
@media (max-width: 1023px) {
.xf-help-hub__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.xf-help-hub__cards { grid-template-columns: 1fr; }
.xf-help-hero { margin-top: 28px; }
.xf-help-title { font-size: 30px; }
.xf-help-intro { font-size: 17px; }
}
.xf-help-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px 24px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 16px;
color: var(--text);
text-decoration: none;
transition: border-color .15s, background .15s, transform .15s;
}
@media (hover: hover) {
.xf-help-card:hover {
border-color: var(--accent-line);
background: oklch(from var(--surface-2) calc(l + 0.02) c h);
transform: translateY(calc(-2px * var(--xf-motion, 1)));
color: var(--text);
}
}
.xf-help-card__icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
border-radius: 10px;
color: #fff;
flex-shrink: 0;
}
.xf-help-card__title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.2px;
margin: 8px 0 0;
}
.xf-help-card__desc {
font-size: 13.5px;
line-height: 1.5;
color: var(--text-3);
margin: 0;
}
.xf-help-card__arrow {
margin-top: auto;
padding-top: 12px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--accent-2);
}
.xf-help-cta {
width: calc(100% - 48px);
max-width: 912px;
margin: 24px auto 80px;
padding: 32px 28px;
background: var(--surface-2);
border: 1px solid var(--accent-line);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.xf-help-cta--narrow { max-width: 672px; }
.xf-help-cta__text {
flex: 1 1 300px;
}
.xf-help-cta__title {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
margin: 0 0 6px;
}
.xf-help-cta__desc {
font-size: 13.5px;
line-height: 1.5;
color: var(--text-3);
margin: 0;
}
.xf-help-cta__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: var(--accent);
border: 0;
border-radius: 10px;
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: transform .15s, box-shadow .15s;
flex-shrink: 0;
}
html[data-theme="dark"] .xf-help-cta__btn { box-shadow: var(--nx-key); }
@media (hover: hover) {
.xf-help-cta__btn:hover {
color: #fff;
transform: translateY(calc(-1px * var(--xf-motion, 1)));
box-shadow: 0 8px 24px -8px oklch(0.55 0.2 var(--accent-h) / 0.5);
}
}
@media (max-width: 560px) {
.xf-help-cta {
flex-direction: column;
align-items: flex-start;
padding: 24px 20px;
}
.xf-help-cta__text {
flex: 0 0 auto;
}
.xf-help-cta__btn {
width: 100%;
justify-content: center;
}
}
.xf-about-values {
max-width: 960px;
margin: 0 auto 72px;
padding: 0 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.xf-about-value {
padding: 28px 24px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.xf-about-value__num {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
border-radius: 10px;
color: #fff;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
}
.xf-about-value__title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
margin: 6px 0 0;
}
.xf-about-value__desc {
font-size: 13.5px;
line-height: 1.55;
color: var(--text-3);
margin: 0;
}
.xf-about-block {
max-width: 960px;
margin: 0 auto 48px;
padding: 0 24px;
}
.xf-about-block__title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.3px;
color: var(--text);
margin: 0 0 20px;
}
.xf-req-list {
margin: 0;
padding: 0;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 14px;
overflow: hidden;
}
.xf-req-row {
display: grid;
grid-template-columns: 220px 1fr;
gap: 20px;
padding: 14px 20px;
border-bottom: 1px solid var(--line-soft);
}
.xf-req-row:last-child { border-bottom: 0; }
.xf-req-row dt {
font-size: 13px;
font-weight: 500;
color: var(--text-3);
margin: 0;
}
.xf-req-row dd {
font-family: var(--font-mono);
font-size: 13.5px;
color: var(--text);
margin: 0;
letter-spacing: -0.1px;
}
.xf-req-row dd a[href^="tel:"],
.xf-req-row dd a[href^="mailto:"] {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
}
.xf-req-row dd.xf-word,
.xf-contacts-hours dd.xf-word { font-family: var(--font-sans); }
.xf-about-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.xf-about-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
color: var(--text);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: border-color .15s, background .15s, transform .15s;
}
@media (hover: hover) {
.xf-about-link:hover {
border-color: var(--accent-line);
background: oklch(from var(--surface-2) calc(l + 0.02) c h);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
color: var(--text);
}
}
.xf-about-link__arrow {
font-family: var(--font-mono);
color: var(--accent-2);
font-size: 13px;
}
@media (max-width: 768px) {
.xf-about-values { grid-template-columns: 1fr; }
.xf-about-links { grid-template-columns: 1fr; }
.xf-req-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
}
.xf-help-body h2 {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.3px;
color: var(--text);
margin: 40px 0 16px;
}
.xf-help-body h2:first-child { margin-top: 0; }
.xf-help-body > .xf-help-lede + h2 { margin-top: 16px; }
.xf-help-body > .xf-contacts-grid,
.xf-help-body > .xf-help-disclosure {
max-width: none;
padding: 0;
}
.xf-help-body h3 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
margin: 24px 0 12px;
}
.xf-help-body h3:first-child { margin-top: 0; }
.xf-contacts-grid {
max-width: 960px;
margin: 0 auto 32px;
padding: 0 24px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.xf-contacts-card {
padding: 24px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.xf-contacts-card__icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
border-radius: 10px;
color: #fff;
}
.xf-contacts-card__title {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
margin: 6px 0 2px;
}
.xf-contacts-card__main {
font-size: 15px;
line-height: 1.5;
color: var(--text);
margin: 0;
}
.xf-contacts-hours {
margin: 4px 0 0;
padding: 0;
display: grid;
gap: 4px;
font-size: 13px;
}
.xf-contacts-hours > div {
display: grid;
grid-template-columns: 64px 1fr;
gap: 12px;
}
.xf-contacts-hours dt {
color: var(--text-3);
margin: 0;
}
.xf-contacts-hours dd {
font-family: var(--font-mono);
color: var(--text);
margin: 0;
}
.xf-contacts-list {
margin: 4px 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.xf-contacts-list li {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.xf-contacts-list a {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-size: 14.5px;
color: var(--text);
text-decoration: none;
letter-spacing: -0.1px;
transition: color .15s;
}
@media (hover: hover) {
.xf-contacts-list a:hover { color: var(--accent-2); }
}
.xf-contacts-list span {
font-size: 12px;
color: var(--text-3);
}
.xf-contacts-map {
max-width: 960px;
margin: 0 auto 48px;
padding: 0 24px;
}
.xf-contacts-map iframe {
display: block;
width: 100%;
height: 420px;
border: 1px solid var(--line-soft);
border-radius: 16px;
background: var(--surface-2);
}
.xf-contacts-map [hidden] { display: none; }
.xf-contacts-map__gate {
min-height: 420px;
padding: 32px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 16px;
}
.xf-contacts-map__icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface-3);
border-radius: 10px;
color: var(--text-2);
}
.xf-contacts-map__addr {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
margin: 6px 0 0;
text-wrap: balance;
}
.xf-contacts-map__note {
max-width: 44ch;
font-size: 13px;
line-height: 1.5;
color: var(--text-3);
margin: 0;
text-wrap: balance;
}
.xf-contacts-map__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 24px;
margin-top: 12px;
}
.xf-contacts-map__link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 500;
color: var(--accent-2);
text-decoration: none;
}
@media (hover: hover) {
.xf-contacts-map__link:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 768px) {
.xf-contacts-grid { grid-template-columns: 1fr; }
.xf-contacts-map iframe { height: 320px; }
.xf-contacts-map__gate { min-height: 320px; padding: 24px 20px; }
}
.xf-help-body > .xf-help-lede {
padding: 16px 18px;
background: var(--surface-2);
border: 1px solid var(--accent-line);
border-radius: 12px;
margin: 0 0 32px;
font-size: 14.5px;
line-height: 1.55;
}
.xf-help-disclosure {
max-width: 960px;
margin: 0 auto 48px;
padding: 0 24px;
}
.xf-help-disclosure > summary {
list-style: none;
cursor: pointer;
padding: 18px 20px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
font-size: 14px;
font-weight: 500;
color: var(--text);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
transition: border-color .15s, background .15s;
}
.xf-help-disclosure > summary::-webkit-details-marker { display: none; }
.xf-help-disclosure > summary::after {
content: "+";
font-size: 20px;
font-weight: 300;
line-height: 1;
color: var(--accent-2);
transition: transform .2s;
}
.xf-help-disclosure[open] > summary::after {
content: "−";
}
@media (hover: hover) {
.xf-help-disclosure > summary:hover {
border-color: var(--accent-line);
background: oklch(from var(--surface-2) calc(l + 0.02) c h);
}
}
.xf-help-disclosure__body {
padding: 20px 4px 4px;
font-size: 13.5px;
line-height: 1.65;
color: var(--text-2);
}
.xf-help-disclosure__body p {
margin: 0 0 14px;
}
.xf-help-disclosure__body strong {
color: var(--text);
font-weight: 600;
}
.xf-help-disclosure__body ol {
margin: 0 0 14px 18px;
padding: 0;
}
.xf-help-disclosure__body li {
margin-bottom: 6px;
}
.xf-help-disclosure__body li::marker {
color: var(--text-3);
}
.xf-help-body .xf-contacts-card {
background: var(--surface-3);
}
.xf-help-body .xf-contacts-card__icon {
background: var(--accent-dim);
color: var(--accent-2);
}
.xf-staff-grid {
max-width: 960px;
margin: 0 auto 80px;
padding: 0 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.xf-staff-grid { grid-template-columns: 1fr; }
}
.xf-staff-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 24px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 16px;
}
.xf-staff-card__avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 4px;
background: var(--surface-3);
}
.xf-staff-card__avatar--placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent-dim);
color: var(--accent-2);
font-family: var(--font-sans);
font-size: 28px;
font-weight: 600;
text-transform: uppercase;
}
.xf-staff-card__name {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
margin: 4px 0 0;
}
.xf-staff-card__role {
font-size: 13.5px;
color: var(--text-3);
margin: 0;
}
.xf-staff-card__contacts {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.xf-staff-card__contacts a {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-size: 13px;
color: var(--text-2);
text-decoration: none;
letter-spacing: -0.1px;
transition: color .15s;
}
@media (hover: hover) {
.xf-staff-card__contacts a:hover { color: var(--accent-2); }
}
.xf-back-link {
max-width: 960px;
margin: 0 auto 48px;
padding: 0 24px;
font-family: var(--font-mono);
font-size: 13px;
}
.xf-back-link a {
color: var(--accent-2);
text-decoration: none;
}
@media (hover: hover) {
.xf-back-link a:hover { color: var(--text); text-decoration: underline; }
}
.xf-help-hero .xf-help-subtitle {
font-size: 15px;
color: var(--text-3);
margin: 8px 0 0;
}
.xf-license-grid {
max-width: 960px;
margin: 0 auto 64px;
padding: 0 24px;
}
.xf-license-section {
margin-bottom: 40px;
}
.xf-license-section:last-child { margin-bottom: 0; }
.xf-license-section__title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.3px;
color: var(--text);
margin: 0 0 20px;
}
.xf-license-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.xf-license-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
margin: 0;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 14px;
color: var(--text);
}
.xf-license-card__thumb {
width: 100%;
height: 240px;
object-fit: contain;
background: var(--surface-3);
border-radius: 8px;
display: block;
}
.xf-license-card__title {
font-family: var(--font-sans);
font-size: 13.5px;
line-height: 1.4;
font-weight: 500;
color: var(--text);
margin: 0;
}
.xf-license-detail {
max-width: 720px;
margin: 0 auto 48px;
padding: 0 24px;
text-align: center;
}
.xf-license-detail__img {
max-width: 100%;
height: auto;
border-radius: 14px;
border: 1px solid var(--line-soft);
background: var(--surface-2);
}
.xf-vacancy-list {
max-width: 720px;
margin: 0 auto 80px;
padding: 0 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.xf-vacancy-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 14px;
}
.xf-vacancy-card__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.xf-vacancy-card__title {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
margin: 0;
}
.xf-vacancy-card__pay {
font-family: var(--font-mono);
font-size: 13px;
color: var(--accent-2);
background: var(--accent-dim);
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.xf-vacancy-card__preview {
font-size: 14px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
}
.xf-vacancy-card__preview p { margin: 0 0 8px; }
.xf-vacancy-card__preview p:last-child { margin: 0; }
.xf-empty-cta {
max-width: 720px;
margin: 0 auto 80px;
padding: 36px 28px;
text-align: center;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 16px;
}
.xf-empty-cta__title {
font-family: var(--font-sans);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
margin: 0 0 8px;
}
.xf-empty-cta__desc {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-3);
margin: 0 0 20px;
}
.xf-empty-cta__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
background: var(--accent);
color: #fff;
text-decoration: none;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
transition: transform .15s, box-shadow .15s;
}
html[data-theme="dark"] .xf-empty-cta__btn { box-shadow: var(--nx-key); }
@media (hover: hover) {
.xf-empty-cta__btn:hover {
color: #fff;
transform: translateY(calc(-1px * var(--xf-motion, 1)));
box-shadow: 0 8px 24px -8px oklch(0.55 0.2 var(--accent-h) / 0.5);
}
}
.xf-review-list {
max-width: 720px;
margin: 0 auto 64px;
padding: 0 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.xf-review-card {
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
padding: 20px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 14px;
}
.xf-review-card__avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
background: var(--surface-3);
}
.xf-review-card__author {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0;
}
.xf-review-card__meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-3);
margin: 2px 0 8px;
}
.xf-review-card__body {
font-size: 14px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
}
.xf-review-card__body p:first-child { margin-top: 0; }
.xf-review-card__body p:last-child { margin-bottom: 0; }
.xf-review-add {
max-width: 720px;
margin: 24px auto 64px;
padding: 0 24px;
text-align: center;
font-size: 14px;
color: var(--text-3);
}
.xf-review-add a {
margin-left: 4px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--accent-2);
text-decoration: none;
}
@media (hover: hover) {
.xf-review-add a:hover { color: var(--text); text-decoration: underline; }
}
.xf-review-hero__domain { white-space: nowrap; }
.xf-review-layout {
max-width: 960px;
margin: 0 auto 48px;
padding: 0 24px;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 32px;
align-items: start;
}
.xf-review-layout__title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.3px;
color: var(--text);
margin: 0 0 16px;
}
.xf-review-sources__list {
list-style: none;
margin: 0;
padding: 0;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 16px;
}
.xf-review-src {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 20px 22px 14px;
border-bottom: 1px solid var(--line-soft);
}
.xf-review-src:last-child { border-bottom: 0; }
.xf-review-src__name {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
margin: 0;
}
.xf-review-src__facts {
align-self: stretch;
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
margin: 6px 0 2px;
}
.xf-review-src__fact {
flex: 1 1 120px;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
gap: 6px;
}
.xf-review-src__fact dt {
font-size: 12.5px;
line-height: 1.35;
color: var(--text-2);
}
.xf-review-src__value {
margin: 0;
font-family: var(--font-mono);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.3px;
line-height: 1;
color: var(--text);
}
.xf-review-src__value--rating { letter-spacing: -0.08em; }
.xf-review-src__desc {
font-size: 14px;
line-height: 1.5;
color: var(--text-2);
margin: 0;
}
.xf-review-src__stamp {
font-size: 12px;
color: var(--text-3);
margin: 0;
}
.xf-review-src__stamp time { font-family: var(--font-mono); font-size: 11.5px; }
.xf-review-src__link {
display: inline-flex;
align-items: center;
gap: 4px;
padding-block: 6px;
font-size: 14px;
font-weight: 500;
color: var(--accent-2);
text-decoration: none;
}
@media (hover: hover) {
.xf-review-src__link:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.xf-review-ya [hidden] { display: none; }
.xf-review-ya > iframe {
display: block;
width: 100%;
height: 800px;
border: 1px solid var(--line-soft);
border-radius: 16px;
background: var(--surface);
}
.xf-review-ya__gate {
padding: 36px 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 16px;
}
.xf-review-ya[data-xf-embed-auto] > .xf-review-ya__gate { min-height: 800px; }
.xf-review-ya__icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface-3);
border-radius: 10px;
color: var(--text-2);
}
.xf-review-ya__lead {
max-width: 380px;
font-size: 16px;
font-weight: 500;
line-height: 1.45;
color: var(--text);
margin: 6px 0 0;
text-wrap: balance;
}
.xf-review-ya__note {
max-width: 360px;
font-size: 13px;
line-height: 1.5;
color: var(--text-3);
margin: 0;
text-wrap: balance;
}
.xf-review-ya__actions {
display: flex;
justify-content: center;
max-width: 100%;
margin-top: 12px;
}
.xf-review-ya__actions .xf-btn {
max-width: 100%;
white-space: normal;
text-align: center;
}
.xf-review-ya__foot { margin: 8px 0 0; }
.xf-review-cta .xf-help-cta__desc { max-width: 560px; }
.xf-review-cta .xf-help-cta__desc a {
color: var(--accent-2);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 900px) {
.xf-review-layout {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.xf-review-ya > iframe { height: 720px; }
.xf-review-ya[data-xf-embed-auto] > .xf-review-ya__gate { min-height: 720px; }
.xf-review-ya__gate { padding: 28px 20px; }
}
@media (max-width: 340px) {
.xf-review-ya > iframe {
width: calc(100% + 2 * var(--container-pad));
margin-inline: calc(var(--container-pad) * -1);
border-radius: 0;
border-inline: 0;
}
}
.xf-faq .xf-faq-group { margin: 0 0 40px; }
.xf-faq .xf-faq-group:last-child { margin-bottom: 0; }
.xf-faq .xf-faq-group__desc { margin: -4px 0 16px; color: var(--text-3); font-size: 14px; }
.xf-faq .xf-faq-group__desc > :last-child { margin-bottom: 0; }
.xf-faq .xf-faq-list {
margin: 0;
border-top: 1px solid var(--line);
}
.xf-faq .xf-faq-item {
margin: 0;
border-bottom: 1px solid var(--line);
scroll-margin-top: calc(var(--xf-header-h, 154px) + 8px);
}
.xf-faq-item__q {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
font-size: 16px;
font-weight: 600;
line-height: 1.45;
letter-spacing: -0.1px;
color: var(--text);
transition: color .15s;
}
.xf-faq-item__q::-webkit-details-marker { display: none; }
.xf-faq-item__icon {
flex: 0 0 16px;
margin-top: 3.6px;
fill: none;
stroke: var(--text-3);
stroke-width: 1.6;
stroke-linecap: round;
transition: stroke .15s;
}
.xf-faq-item__icon-v { transition: opacity .15s; }
.xf-faq-item[open] > .xf-faq-item__q .xf-faq-item__icon-v { opacity: 0; }
.xf-faq-item[open] > .xf-faq-item__q .xf-faq-item__icon { stroke: var(--accent-2); }
@media (hover: hover) {
.xf-faq-item__q:hover .xf-faq-item__icon { stroke: var(--accent-2); }
}
.xf-faq .xf-faq-item__a {
margin: -6px 0 0;
padding: 0 32px 20px 0;
}
.xf-faq .xf-faq-item__a > :last-child { margin-bottom: 0; }
.xf-faq .xf-faq-item__action { margin: 16px 0 0; }
.xf-faq .xf-faq-item__action .xf-btn {
color: var(--text);
text-decoration: none;
transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
max-width: 100%;
white-space: normal;
text-align: left;
}
@media (max-width: 767px) {
.xf-faq .xf-faq-item { scroll-margin-top: calc(var(--xf-header-h, 118px) + 8px); }
.xf-faq-item__q { padding: 16px 0; }
.xf-faq .xf-faq-item__a { padding-right: 0; }
}
@media (max-width: 767px) {
.xf-help-hero,
.xf-help-body,
.xf-help-hub,
.xf-help-disclosure,
.xf-about-values,
.xf-about-block,
.xf-contacts-grid,
.xf-contacts-map,
.xf-staff-grid,
.xf-back-link,
.xf-license-grid,
.xf-license-detail,
.xf-vacancy-list,
.xf-review-list,
.xf-review-add,
.xf-review-layout { padding-inline: 0; }
.xf-help-cta { width: auto; }
}
/* End */
/* Start:/local/templates/xcore_front/css/form.xfmin-1-13662.css?17928314017937*/
.xf-form-intro {
margin: 0 0 24px;
color: var(--text-2);
font-size: 15px;
line-height: 1.7;
}
.xf-form-intro b,
.xf-form-intro strong {
color: var(--text);
font-weight: 600;
}
.xf-contact-strip {
display: flex;
flex-wrap: wrap;
gap: 16px 28px;
align-items: baseline;
margin: 0 0 32px;
padding: 16px 20px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
}
.xf-contact-strip__item {
display: inline-flex;
align-items: baseline;
gap: 8px;
color: var(--text);
text-decoration: none;
transition: color .15s;
}
@media (hover: hover) {
.xf-contact-strip__item:hover {
color: var(--accent-2);
}
}
.xf-contact-strip__label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-3);
}
.xf-contact-strip__value {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
font-size: 13.5px;
letter-spacing: -0.2px;
}
.xf-contact-strip__hours {
margin-left: auto;
font-size: 12.5px;
color: var(--text-3);
}
.xf-form-wrap .maxwidth-theme {
max-width: none;
padding: 0;
}
.xf-form-wrap .form.inline {
display: block;
}
.xf-form-wrap .form_body,
.xf-form-wrap .form_footer {
display: block;
}
.xf-form-wrap .row {
display: block;
margin: 0;
}
.xf-form-wrap .col-md-7,
.xf-form-wrap .col-md-5 {
width: 100%;
padding: 0;
float: none;
}
.xf-form-wrap .clearboth {
display: none;
}
.xf-form-wrap .form_head {
display: none;
}
.xf-form-wrap .form-control {
display: block;
margin: 0 0 16px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
height: auto;
}
.xf-form-wrap .form-control label {
display: block;
margin: 0 0 6px;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.1px;
color: var(--text-2);
}
.xf-form-wrap .form-control label .star,
.xf-form-wrap .form-control label .required-star {
color: var(--accent-2);
margin-left: 2px;
}
.xf-form-wrap input[type="text"],
.xf-form-wrap input[type="tel"],
.xf-form-wrap input[type="email"],
.xf-form-wrap textarea {
display: block;
width: 100%;
padding: 11px 14px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 10px;
color: var(--text);
font-family: var(--font-sans);
font-size: 14.5px;
line-height: 1.5;
box-shadow: none;
transition: border-color .15s, background .15s;
}
.xf-form-wrap textarea {
min-height: 120px;
resize: vertical;
}
@media (max-width: 767px) {
.xf-form-wrap input[type="text"],
.xf-form-wrap input[type="tel"],
.xf-form-wrap input[type="email"],
.xf-form-wrap textarea { font-size: 16px; }
}
.xf-form-wrap input[type="text"]:focus,
.xf-form-wrap input[type="tel"]:focus,
.xf-form-wrap input[type="email"]:focus,
.xf-form-wrap textarea:focus {
border-color: var(--accent-line);
background: oklch(from var(--surface) calc(l + 0.02) c h);
}
.xf-form-wrap input::placeholder,
.xf-form-wrap textarea::placeholder {
color: var(--text-3);
}
.xf-form-wrap .captcha-row {
display: grid;
grid-template-columns: max-content;
justify-content: start;
gap: 8px;
margin: 6px 0 18px;
}
.xf-form-wrap .captcha-row > label {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--text-2);
}
.xf-form-wrap .captcha_image {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
}
.xf-form-wrap .captcha_image img {
display: block;
height: 40px;
border-radius: 10px;
border: 1px solid var(--line-soft);
background: #fff;
}
.xf-form-wrap .captcha_reload {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--line-soft);
border-radius: 10px;
background: var(--surface);
color: var(--text-3);
cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
.xf-form-wrap .captcha_reload:hover {
color: var(--accent);
border-color: var(--accent-line);
}
.xf-form-wrap .captcha_reload svg {
display: block;
}
.xf-form-wrap .captcha_reload.loading {
pointer-events: none;
color: var(--text-3);
}
.xf-form-wrap .captcha_reload.loading svg {
animation: xf-captcha-spin .6s linear infinite;
}
@keyframes xf-captcha-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.xf-form-wrap .captcha_reload.loading svg { animation: none; }
}
.xf-form-wrap input.captcha {
display: block;
width: 100%;
height: 40px;
padding-top: 8px;
padding-bottom: 8px;
}
.xf-form-wrap .licence_block {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 8px 0 20px;
padding: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-3);
}
.xf-form-wrap .licence_block input[type="checkbox"] {
margin: 3px 0 0;
flex-shrink: 0;
width: 16px;
height: 16px;
accent-color: var(--accent-2);
cursor: pointer;
}
.xf-form-wrap .licence_block label {
flex: 1;
margin: 0;
cursor: pointer;
color: var(--text-3);
font-size: 12.5px;
font-weight: 400;
}
.xf-form-wrap .licence_block label a {
color: var(--accent-2);
text-decoration: underline;
text-decoration-color: var(--link-line);
text-underline-offset: 2px;
}
@media (hover: hover) {
.xf-form-wrap .licence_block label a:hover {
text-decoration-color: var(--accent-2);
}
}
.xf-form-wrap .form_footer > .form-control {
margin: 10px 0 16px;
font-size: 12.5px;
color: var(--text-3);
}
.xf-form-wrap input[type="submit"],
.xf-form-wrap button[type="reset"] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
border: 0;
border-radius: 10px;
cursor: pointer;
transition: transform .15s, box-shadow .15s, border-color .15s, color .15s;
box-shadow: none;
}
.xf-form-wrap input[type="submit"] {
background: var(--accent);
background-origin: border-box;
background-clip: border-box;
color: #fff;
}
html[data-theme="dark"] .xf-form-wrap input[type="submit"] { box-shadow: var(--nx-key); }
@media (hover: hover) {
.xf-form-wrap input[type="submit"]:hover {
transform: translateY(calc(-1px * var(--xf-motion, 1)));
box-shadow: 0 8px 24px -8px oklch(0.55 0.2 var(--accent-h) / 0.5);
color: #fff;
}
}
.xf-form-wrap button[type="reset"] {
background: transparent;
border: 1px solid var(--line-soft);
color: var(--text-2);
margin-left: 8px;
}
@media (hover: hover) {
.xf-form-wrap button[type="reset"]:hover {
border-color: var(--accent-line);
color: var(--text);
background: transparent;
}
}
.xf-form-wrap .form_result {
margin: 0 0 20px;
padding: 14px 16px;
border-radius: 10px;
font-size: 14px;
line-height: 1.5;
}
.xf-form-wrap .form_result.error {
background: color-mix(in oklch, var(--danger) 12%, transparent);
border: 1px solid color-mix(in oklch, var(--danger) 35%, transparent);
color: var(--danger-ink);
}
.xf-form-wrap .form_result.success {
background: color-mix(in oklch, var(--success) 12%, transparent);
border: 1px solid color-mix(in oklch, var(--success) 35%, transparent);
color: var(--success-ink);
}
html[data-theme="dark"] .xf-form-wrap .form_result.error {
background: oklch(0.28 0.12 25 / 0.25);
border-color: oklch(0.55 0.2 25 / 0.4);
color: oklch(0.88 0.1 25);
}
html[data-theme="dark"] .xf-form-wrap .form_result.success {
background: oklch(0.28 0.1 155 / 0.22);
border-color: oklch(0.55 0.15 155 / 0.4);
color: oklch(0.88 0.08 155);
}
.xf-form-wrap label.error {
display: block;
margin: 4px 0 0;
font-size: 12px;
font-weight: 400;
color: var(--danger-ink);
}
@media (max-width: 560px) {
.xf-contact-strip__hours { margin-left: 0; width: 100%; }
}
.xf-form-bot-cta {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 32px;
padding: 14px 16px;
background: var(--accent-dim);
border: 1px solid var(--accent-line);
border-radius: 12px;
font-size: 14px;
line-height: 1.55;
color: var(--text-2);
}
.xf-form-bot-cta__icon { flex: 0 0 auto; color: var(--accent-2); margin-top: 2px; }
.xf-form-bot-cta a {
color: var(--accent-2);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--link-line);
text-underline-offset: 3px;
}
.xf-form-bot-cta a:hover { text-decoration-color: var(--accent-2); }
/* End */
/* Start:/local/templates/xcore_front/css/blog.xfmin-1-20109.css?179284131211131*/
.xf-blog-hero {
margin: 28px 0 24px;
}
.xf-blog-hero__eyebrow {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
margin: 0 0 10px;
}
.xf-blog-hero__title {
font-family: var(--font-sans);
font-size: clamp(30px, 4.4vw, 52px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 12px;
}
.xf-blog-hero__lede {
font-family: var(--font-sans);
font-size: 16.5px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
max-width: 640px;
}
.xf-blog-pills {
margin: 20px 0 32px;
}
.xf-blog-pill__count {
font-family: var(--font-mono);
font-size: 11px;
margin-left: 7px;
opacity: 0.7;
}
.xf-pill-tab--active .xf-blog-pill__count {
opacity: 0.85;
}
.xf-blog-featured {
margin: 0 0 36px;
display: block;
text-decoration: none;
color: inherit;
}
.xf-blog-featured__inner {
display: grid;
grid-template-columns: 1.15fr 1fr;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: calc(var(--radius) + 4px);
overflow: hidden;
transition: border-color .2s;
}
@media (max-width: 820px) {
.xf-blog-featured__inner { grid-template-columns: 1fr; }
}
@media (hover: hover) {
.xf-blog-featured:hover .xf-blog-featured__inner {
border-color: var(--accent-line);
}
.xf-blog-featured:hover .xf-blog-featured__cta {
color: var(--accent-2);
}
}
.xf-blog-featured__image {
aspect-ratio: 16 / 10;
background-color: var(--surface-3);
background-size: cover;
background-position: center;
position: relative;
}
.xf-blog-featured__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 50%, oklch(0 0 0 / 0.04) 100%);
pointer-events: none;
}
.xf-blog-featured__image--empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-3);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.xf-blog-featured__body {
padding: clamp(22px, 3.4vw, 38px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
.xf-blog-featured__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-3);
}
.xf-blog-featured__date { letter-spacing: 0.02em; }
.xf-blog-featured__tag {
background: var(--surface-3);
border-radius: 99px;
padding: 3px 10px;
color: var(--text-2);
font-family: var(--font-sans);
font-size: 11.5px;
}
.xf-blog-featured__title {
font-family: var(--font-sans);
font-size: clamp(22px, 2.8vw, 30px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--text);
margin: 0;
}
.xf-blog-featured__lede {
font-family: var(--font-sans);
font-size: 14.5px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.xf-blog-featured__cta {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-top: 4px;
transition: color .15s;
}
.xf-blog-grid {
margin: 0 0 48px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 1024px) { .xf-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .xf-blog-grid { grid-template-columns: 1fr; gap: 18px; } }
.xf-blog-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color .2s;
}
@media (hover: hover) {
.xf-blog-card:hover { border-color: var(--accent-line); }
.xf-blog-card:hover .xf-blog-card__title { color: var(--accent-2); }
}
.xf-blog-card__image {
aspect-ratio: 16 / 10;
background-color: var(--surface-3);
background-size: cover;
background-position: center;
}
.xf-blog-card__image--empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-3);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.xf-blog-card__body {
padding: 18px 20px 22px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.xf-blog-card__meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-3);
letter-spacing: 0.02em;
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.xf-blog-card__tag {
background: var(--surface-3);
border-radius: 99px;
padding: 2px 9px;
color: var(--text-2);
font-family: var(--font-sans);
font-size: 11px;
}
.xf-blog-card__title {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--text);
margin: 0;
transition: color .15s;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.xf-blog-card__lede {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--text-2);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.xf-blog-pagination {
margin: 0 0 72px;
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.xf-blog-pagination a,
.xf-blog-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--line-soft);
border-radius: 999px;
background: var(--surface);
color: var(--text-2);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: border-color .15s, color .15s, background .15s;
}
.xf-blog-pagination a:hover {
border-color: var(--accent-line);
color: var(--text);
}
.xf-blog-pagination__current {
background: var(--accent);
color: #fff;
border-color: transparent;
}
.xf-blog-pagination__gap {
border: 0 !important;
background: transparent !important;
color: var(--text-3) !important;
}
.xf-blog-empty {
max-width: 720px;
margin: 40px auto 80px;
padding: 60px 32px;
text-align: center;
border: 1px dashed var(--line-soft);
border-radius: var(--radius);
color: var(--text-3);
font-family: var(--font-sans);
font-size: 15px;
}
.xf-blog-article {
max-width: 712px;
margin: 0 auto 40px;
padding: 16px 0 0;
}
.xf-blog-article .xf-blog-article__crumbs { margin: 0 0 22px; }
.xf-blog-article__meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 0 0 14px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-3);
}
.xf-blog-article__date { letter-spacing: 0.02em; }
.xf-blog-article__tag {
background: var(--surface-3);
border-radius: 99px;
padding: 3px 10px;
color: var(--text-2);
font-family: var(--font-sans);
font-size: 11.5px;
}
.xf-blog-article__title {
font-family: var(--font-sans);
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 26px;
}
.xf-blog-article__hero {
margin: 0 0 28px;
border-radius: var(--radius);
overflow: hidden;
background: var(--surface-3);
aspect-ratio: 16 / 9;
}
.xf-blog-article__hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.xf-blog-article__body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.7;
color: var(--text-2);
}
.xf-blog-article__body p,
.xf-blog-article__body > div { margin: 0 0 14px; }
.xf-blog-article__body p:empty,
.xf-blog-article__body div:empty,
.xf-blog-article__body p > br:only-child { margin: 0; }
.xf-blog-article__body ul,
.xf-blog-article__body ol {
margin: 0 0 18px;
padding-left: 24px;
}
.xf-blog-article__body li { margin: 0 0 6px; padding-left: 2px; }
.xf-blog-article__body li::marker { color: var(--accent-2); }
.xf-blog-article__body h2 {
font-family: var(--font-sans);
font-size: 24px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text);
margin: 36px 0 14px;
}
.xf-blog-article__body h3 {
font-family: var(--font-sans);
font-size: 19px;
font-weight: 600;
line-height: 1.3;
color: var(--text);
margin: 28px 0 10px;
}
.xf-blog-article__body img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 18px 0;
display: block;
}
.xf-blog-article__body a {
color: var(--accent-2);
text-decoration: underline;
text-decoration-color: var(--link-line);
text-underline-offset: 3px;
transition: color .15s, text-decoration-color .15s;
}
.xf-blog-article__body a:hover {
color: var(--accent);
text-decoration-color: var(--accent);
}
html[data-theme="dark"] .xf-blog-article__body a:hover {
color: var(--text);
text-decoration-color: var(--accent-2);
}
.xf-blog-article__body b,
.xf-blog-article__body strong { color: var(--text); font-weight: 600; }
.xf-blog-article__body blockquote {
border-left: 3px solid var(--accent-line);
margin: 18px 0;
padding: 6px 0 6px 18px;
color: var(--text-2);
font-style: italic;
}
.xf-blog-article__body table {
display: block;
max-width: 100%;
overflow-x: auto;
margin: 18px 0;
border-collapse: collapse;
}
.xf-blog-article__body table td,
.xf-blog-article__body table th {
padding: 6px 10px;
border: 1px solid var(--line-soft);
vertical-align: top;
text-align: left;
font-family: var(--font-sans);
font-size: 14px;
}
.xf-blog-article__body table th { font-weight: 600; color: var(--text); }
.xf-blog-article__body img {
background: var(--surface-3);
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-3);
text-align: center;
min-height: 24px;
}
.xf-blog-goods {
margin: 56px 0 60px;
}
.xf-blog-goods__title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 18px;
}
.xf-blog-goods__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 1024px) { .xf-blog-goods__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .xf-blog-goods__grid { grid-template-columns: repeat(2, 1fr); } }
.xf-blog-goods__card {
display: flex;
flex-direction: column;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: 14px;
text-decoration: none;
color: inherit;
transition: border-color .15s;
}
.xf-blog-goods__card:hover { border-color: var(--accent-line); }
.xf-blog-goods__card-image {
aspect-ratio: 1;
background-color: var(--surface);
border-radius: 8px;
margin: 0 0 10px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.xf-blog-goods__card-name {
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.35;
color: var(--text);
margin: 0 0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(13px * 1.35 * 2);
}
.xf-blog-goods__card-price {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-top: auto;
}
.xf-blog-goods__card-price--empty {
color: var(--text-3);
font-weight: 500;
}
.xf-blog-related {
margin: 0 0 72px;
}
.xf-blog-related__title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
margin: 0 0 20px;
}
.xf-blog-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 820px) { .xf-blog-related__grid { grid-template-columns: 1fr; } }
/* End */
/* Start:/local/templates/xcore_front/css/news.xfmin-1-2079.css?17928314011031*/
.xf-news-partner-badge {
display: inline-flex;
align-items: center;
gap: 2px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent-2);
background: oklch(0.68 0.22 var(--accent-h) / 0.08);
border: 1px solid oklch(0.68 0.22 var(--accent-h) / 0.18);
border-radius: 99px;
padding: 2px 9px;
white-space: nowrap;
}
html[data-theme="dark"] .xf-news-partner-badge {
background: var(--accent-dim);
border-color: var(--accent-line);
}
.xf-news-period-pill {
display: inline-flex;
align-items: baseline;
gap: 10px;
margin: 0 0 26px;
padding: 8px 16px;
border: 1px solid var(--line-soft);
border-radius: 99px;
background: var(--surface-2);
}
.xf-news-period-pill__label {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.xf-news-period-pill__value {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--text);
}
/* End */
/* Start:/local/templates/xcore_front/css/brands.xfmin-1-12120.css?17928413158565*/
.xf-brand-page-hero {
max-width: 720px;
margin: 0 auto;
padding: 64px 24px 32px;
text-align: center;
}
.xf-brand-page-hero__eyebrow {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent-2);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 14px;
}
.xf-brand-page-hero__title {
font-family: var(--font-sans);
font-size: clamp(32px, 5vw, 44px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--text);
margin: 0 0 16px;
}
.xf-brand-page-hero__lede {
font-size: 16px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
}
.xf-brand-page-empty {
max-width: 720px;
margin: 0 auto 80px;
padding: 48px 24px;
text-align: center;
font-size: 15px;
color: var(--text-3);
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 14px;
}
.xf-brand-page-grid {
max-width: 1080px;
margin: 0 auto 48px;
padding: 0 24px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 960px) {
.xf-brand-page-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.xf-brand-page-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
.xf-brand-page-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 14px;
overflow: hidden;
transition: border-color .2s, transform .2s;
}
@media (hover: hover) {
.xf-brand-page-card:hover {
border-color: var(--accent-line);
transform: translateY(calc(-2px * var(--xf-motion, 1)));
}
.xf-brand-page-card:hover .xf-brand-page-card__name { color: var(--accent-2); }
}
.xf-brand-page-card__logo {
width: 100%;
height: 120px;
background-color: var(--surface-3);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 16px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.xf-brand-page-card__logo--empty {
background-color: var(--accent-dim);
color: var(--accent-2);
font-family: var(--font-mono);
font-size: 36px;
font-weight: 600;
}
.xf-brand-page-card__body {
padding: 14px 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.xf-brand-page-card__name {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
transition: color .15s;
}
.xf-brand-page-card__lede {
font-size: 12.5px;
line-height: 1.45;
color: var(--text-3);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.xf-brand-page-pagination {
max-width: 1080px;
margin: 0 auto 80px;
padding: 0 24px;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 13px;
}
.xf-brand-page-pagination a,
.xf-brand-page-pagination__current {
min-width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 8px;
border: 1px solid transparent;
color: var(--text-2);
text-decoration: none;
transition: border-color .15s, color .15s;
}
@media (hover: hover) {
.xf-brand-page-pagination a:hover {
border-color: var(--accent-line);
color: var(--accent-2);
}
}
.xf-brand-page-pagination__current {
background: var(--accent-dim);
color: var(--accent-2);
font-weight: 600;
}
.xf-brand-page-pagination__gap {
color: var(--text-3);
padding: 0 4px;
}
.xf-brand-detail {
max-width: 960px;
margin: 0 auto 40px;
padding: 32px 24px 0;
}
.xf-brand-detail .xf-brand-detail__crumbs { margin-bottom: 28px; }
.xf-brand-detail__head {
display: grid;
grid-template-columns: 200px 1fr;
gap: 32px;
align-items: center;
margin-bottom: 36px;
padding-bottom: 32px;
border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 600px) {
.xf-brand-detail__head {
grid-template-columns: 1fr;
gap: 20px;
text-align: center;
}
}
.xf-brand-detail__logo {
width: 200px;
height: 120px;
background-color: var(--surface-2);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 16px;
box-sizing: border-box;
border: 1px solid var(--line-soft);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 600px) {
.xf-brand-detail__logo { margin: 0 auto; }
}
.xf-brand-detail__logo--empty {
background-color: var(--accent-dim);
color: var(--accent-2);
font-family: var(--font-mono);
font-size: 56px;
font-weight: 600;
}
.xf-brand-detail__heading {
display: flex;
flex-direction: column;
gap: 12px;
}
.xf-brand-detail__title {
font-family: var(--font-sans);
font-size: clamp(26px, 3.4vw, 36px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--text);
margin: 0;
}
.xf-brand-detail__meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-family: var(--font-mono);
font-size: 13px;
}
@media (max-width: 600px) {
.xf-brand-detail__meta { justify-content: center; }
}
.xf-brand-detail__site {
color: var(--accent-2);
text-decoration: none;
transition: color .15s;
}
@media (hover: hover) {
.xf-brand-detail__site:hover { color: var(--text); text-decoration: underline; }
}
.xf-brand-detail__phone {
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
color: var(--text-2);
text-decoration: none;
}
@media (hover: hover) {
.xf-brand-detail__phone:hover { color: var(--accent-2); }
}
.xf-brand-detail__body {
font-size: 15.5px;
line-height: 1.65;
color: var(--text-2);
padding-bottom: 48px;
}
.xf-brand-detail__body h2 {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
margin: 32px 0 14px;
}
.xf-brand-detail__body h3 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
color: var(--text);
margin: 24px 0 10px;
}
.xf-brand-detail__body p { margin: 0 0 14px; }
.xf-brand-detail__body p:last-child { margin-bottom: 0; }
.xf-brand-detail__body a {
color: var(--accent-2);
text-decoration: underline;
text-underline-offset: 2px;
}
.xf-brand-detail__body img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 20px 0;
}
.xf-brand-detail__body ul,
.xf-brand-detail__body ol { margin: 0 0 14px; padding-left: 22px; }
.xf-brand-detail__body li { margin: 6px 0; }
.xf-brand-products {
max-width: 1080px;
margin: 0 auto 80px;
padding: 0 24px;
}
.xf-brand-products__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;
}
.xf-brand-products__title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.xf-brand-products__all {
font-family: var(--font-mono);
font-size: 13px;
color: var(--accent-2);
text-decoration: none;
transition: color .15s;
}
@media (hover: hover) {
.xf-brand-products__all:hover { color: var(--text); text-decoration: underline; }
}
.xf-brand-products__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 960px) { .xf-brand-products__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .xf-brand-products__grid { grid-template-columns: repeat(2, 1fr); } }
.xf-brand-products__card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: border-color .15s, transform .15s;
}
@media (hover: hover) {
.xf-brand-products__card:hover {
border-color: var(--accent-line);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
}
.xf-brand-products__card-image {
width: 100%;
aspect-ratio: 1;
background-color: var(--surface-3);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 8px;
}
.xf-brand-products__card-name {
font-family: var(--font-sans);
font-size: 12.5px;
line-height: 1.4;
font-weight: 500;
color: var(--text);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.xf-brand-products__card-price {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-top: auto;
}
.xf-brand-products__card-price--empty {
font-weight: 400;
color: var(--text-3);
}
.xf-brand-products--empty {
text-align: center;
padding: 40px 24px 80px;
}
.xf-brand-products__fallback {
font-size: 14.5px;
color: var(--text-3);
margin: 0;
}
.xf-brand-products__fallback a {
color: var(--accent-2);
text-decoration: none;
margin-left: 6px;
}
@media (hover: hover) {
.xf-brand-products__fallback a:hover { color: var(--text); text-decoration: underline; }
}
/* End */
/* Start:/local/templates/xcore_front/css/projects.xfmin-1-10688.css?17928413547831*/
.xf-project-hero {
max-width: 720px;
margin: 0 auto;
padding: 64px 24px 32px;
text-align: center;
}
.xf-project-hero__eyebrow {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent-2);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 14px;
}
.xf-project-hero__title {
font-family: var(--font-sans);
font-size: clamp(32px, 5vw, 44px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--text);
margin: 0 0 16px;
}
.xf-project-hero__lede {
font-size: 16px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
}
.xf-project-empty {
max-width: 720px;
margin: 0 auto 80px;
padding: 48px 24px;
text-align: center;
font-size: 15px;
color: var(--text-3);
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 14px;
}
.xf-project-grid {
max-width: 1080px;
margin: 0 auto 48px;
padding: 0 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
@media (max-width: 900px) {
.xf-project-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
.xf-project-grid { grid-template-columns: 1fr; }
}
.xf-project-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 14px;
overflow: hidden;
transition: border-color .2s, transform .2s;
}
@media (hover: hover) {
.xf-project-card:hover {
border-color: var(--accent-line);
transform: translateY(calc(-2px * var(--xf-motion, 1)));
}
.xf-project-card:hover .xf-project-card__name { color: var(--accent-2); }
}
.xf-project-card__cover {
width: 100%;
aspect-ratio: 3 / 2;
background-color: var(--surface-3);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.xf-project-card__cover--empty {
background-color: var(--accent-dim);
color: var(--accent-2);
font-family: var(--font-mono);
font-size: 44px;
font-weight: 600;
}
.xf-project-card__body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.xf-project-card__name {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.3;
color: var(--text);
margin: 0;
transition: color .15s;
}
.xf-project-card__lede {
font-size: 13px;
line-height: 1.5;
color: var(--text-3);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.xf-project-pagination {
max-width: 1080px;
margin: 0 auto 80px;
padding: 0 24px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 13px;
}
.xf-project-pagination a,
.xf-project-pagination__current {
min-width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 8px;
border: 1px solid transparent;
color: var(--text-2);
text-decoration: none;
transition: border-color .15s, color .15s;
}
@media (hover: hover) {
.xf-project-pagination a:hover {
border-color: var(--accent-line);
color: var(--accent-2);
}
}
.xf-project-pagination__current {
background: var(--accent-dim);
color: var(--accent-2);
font-weight: 600;
}
.xf-project-pagination__gap {
color: var(--text-3);
padding: 0 4px;
}
.xf-project-section-head {
max-width: 1080px;
margin: 0 auto;
padding: 40px 24px 24px;
}
.xf-project-section-head .xf-project-section-head__crumbs { margin-bottom: 20px; }
.xf-project-section-head__title {
font-family: var(--font-sans);
font-size: clamp(28px, 4vw, 38px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.08;
color: var(--text);
margin: 0 0 12px;
}
.xf-project-section-head__lede {
max-width: 680px;
font-size: 15.5px;
line-height: 1.55;
color: var(--text-2);
margin: 0;
}
.xf-project-detail {
max-width: 900px;
margin: 0 auto;
padding: 32px 24px 0;
}
.xf-project-detail .xf-project-detail__crumbs { margin-bottom: 24px; }
.xf-project-detail__head {
margin-bottom: 24px;
}
.xf-project-detail__title {
font-family: var(--font-sans);
font-size: clamp(28px, 3.6vw, 40px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.08;
color: var(--text);
margin: 0;
}
.xf-project-detail__hero {
margin: 0 0 32px;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--line-soft);
}
.xf-project-detail__hero img {
display: block;
width: 100%;
height: auto;
}
.xf-project-detail__body {
font-size: 15.5px;
line-height: 1.65;
color: var(--text-2);
padding-bottom: 40px;
}
.xf-project-detail__body h2 {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
margin: 32px 0 14px;
}
.xf-project-detail__body h3 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
color: var(--text);
margin: 24px 0 10px;
}
.xf-project-detail__body p { margin: 0 0 14px; }
.xf-project-detail__body p:last-child { margin-bottom: 0; }
.xf-project-detail__body a {
color: var(--accent-2);
text-decoration: underline;
text-underline-offset: 2px;
}
.xf-project-detail__body img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 20px 0;
}
.xf-project-detail__body ul,
.xf-project-detail__body ol { margin: 0 0 14px; padding-left: 22px; }
.xf-project-detail__body li { margin: 6px 0; }
.xf-project-gallery {
max-width: 1080px;
margin: 0 auto 48px;
padding: 0 24px;
}
.xf-project-gallery__title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 20px;
}
.xf-project-gallery__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 720px) { .xf-project-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
.xf-project-gallery__item {
display: block;
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--line-soft);
transition: border-color .15s, transform .15s;
}
@media (hover: hover) {
.xf-project-gallery__item:hover { border-color: var(--accent-line); transform: translateY(calc(-1px * var(--xf-motion, 1))); }
}
.xf-project-gallery__item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.xf-project-goods {
max-width: 1080px;
margin: 0 auto 80px;
padding: 0 24px;
}
.xf-project-goods__head {
margin-bottom: 22px;
}
.xf-project-goods__title {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.xf-project-goods__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 960px) { .xf-project-goods__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .xf-project-goods__grid { grid-template-columns: repeat(2, 1fr); } }
.xf-project-goods__card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: border-color .15s, transform .15s;
}
@media (hover: hover) {
.xf-project-goods__card:hover {
border-color: var(--accent-line);
transform: translateY(calc(-1px * var(--xf-motion, 1)));
}
}
.xf-project-goods__card-image {
width: 100%;
aspect-ratio: 1;
background-color: var(--surface-3);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 8px;
}
.xf-project-goods__card-name {
font-family: var(--font-sans);
font-size: 12.5px;
line-height: 1.4;
font-weight: 500;
color: var(--text);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.xf-project-goods__card-price {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-top: auto;
}
.xf-project-goods__card-price--empty {
font-family: var(--font-sans);
font-weight: 400;
color: var(--text-3);
}
/* End */
/* Start:/local/templates/xcore_front/css/chat.xfmin-1-38236.css?179283480110218*/
.xf-chat {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 100;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
transition: bottom .3s ease;
}
.xf-chat__fab {
position: relative;
width: 56px;
height: 56px;
flex: 0 0 auto;
border: none;
border-radius: 50%;
background: var(--accent);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px -8px var(--accent), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
transition: transform .2s, box-shadow .2s;
animation: xf-chat-in .45s ease;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
.xf-chat__fab:hover {
transform: translateY(calc(-2px * var(--xf-motion, 1)));
box-shadow: 0 12px 28px -8px var(--accent), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
}
}
.xf-chat__fab:active { transform: translateY(0) scale(calc(1 - 0.04 * var(--xf-motion, 1))); }
html[data-theme="dark"] .xf-chat__fab { box-shadow: 0 10px 28px -12px oklch(0 0 0 / 0.8); }
.xf-chat__fab-icon {
position: absolute;
display: inline-flex;
transition: opacity .2s ease, transform .2s ease;
}
.xf-chat__fab-icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.xf-chat__fab-icon--live { opacity: 0; transform: rotate(90deg) scale(.6); }
.xf-chat__fab-icon--open { opacity: 1; transform: rotate(0) scale(1); }
.xf-chat.has-live:not(.is-open) .xf-chat__fab-icon--open { opacity: 0; transform: rotate(-90deg) scale(.6); }
.xf-chat.has-live:not(.is-open) .xf-chat__fab-icon--live { opacity: 1; transform: rotate(0) scale(1); }
.xf-chat.is-open .xf-chat__fab-icon--open { opacity: 0; transform: rotate(90deg) scale(.6); }
.xf-chat.is-open .xf-chat__fab-icon--live { opacity: 0; transform: rotate(90deg) scale(.6); }
.xf-chat.is-open .xf-chat__fab-icon--close { opacity: 1; transform: rotate(0) scale(1); }
.xf-chat__fab::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 2px var(--accent);
opacity: 0;
transform: scale(.4);
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
}
.xf-chat.has-live .xf-chat__fab::after { opacity: 1; transform: scale(1); }
.xf-chat.has-live.is-open .xf-chat__fab::after { opacity: 0; transform: scale(.4); }
.xf-chat__menu {
width: 264px;
max-width: calc(100vw - 32px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
transform-origin: bottom right;
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.xf-chat__menu[hidden] { display: none; }
.xf-chat:not(.is-open) .xf-chat__menu {
opacity: 0;
visibility: hidden;
transform: translateY(8px) scale(.96);
pointer-events: none;
}
.xf-chat.is-open .xf-chat__menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.xf-chat__teaser {
position: absolute;
right: 0;
bottom: calc(100% + 12px);
width: max-content;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
max-width: min(300px, calc(100vw - 32px));
transform-origin: bottom right;
visibility: hidden;
opacity: 0;
transform: translateY(calc(8px * var(--xf-motion, 1))) scale(calc(1 - 0.03 * var(--xf-motion, 1)));
transition: opacity .22s ease, transform .26s cubic-bezier(0.22, 1, 0.36, 1), visibility .26s;
}
.xf-chat__teaser[hidden] { display: none; }
.xf-chat.has-teaser .xf-chat__teaser { visibility: inherit; opacity: 1; transform: none; }
.xf-chat__teaser,
.xf-chat__teaser-asks { pointer-events: none; }
.xf-chat__teaser-who,
.xf-chat__teaser-bubble,
.xf-chat__teaser-ask { pointer-events: auto; }
.xf-chat__teaser-who {
display: flex;
align-items: center;
gap: 7px;
padding: 3px 10px 3px 3px;
border: 1px solid var(--line-soft);
border-radius: 999px;
background: var(--surface);
font-size: 12px;
color: var(--text-2);
}
.xf-chat__teaser-avatar {
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent-dim);
color: var(--accent-2);
}
.xf-chat__teaser-bubble {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px 16px 4px 16px;
box-shadow: var(--shadow-card);
}
.xf-chat__teaser-open {
display: block;
width: 100%;
padding: 11px 36px 11px 14px;
border: none;
background: transparent;
color: var(--text);
font: inherit;
font-size: 14px;
line-height: 1.45;
text-align: left;
cursor: pointer;
}
.xf-chat__teaser-close {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
padding: 0;
border: none;
border-radius: 8px;
background: transparent;
color: var(--text-3);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) {
.xf-chat__teaser-close:hover { background: var(--surface-2); color: var(--text); }
}
.xf-chat__teaser-asks {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.xf-chat__teaser-ask {
display: inline-flex;
align-items: center;
padding: 8px 13px;
border-radius: 10px;
border: 1px solid var(--accent-line);
background: var(--surface);
color: var(--accent-2);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 6px 16px -10px oklch(0.3 0.05 285 / 0.35);
transition: background-color .15s ease, border-color .15s ease;
}
@media (hover: hover) {
.xf-chat__teaser-ask:hover { background: var(--accent-dim); border-color: var(--accent); }
}
.xf-chat__teaser.xf-chat__teaser--narrow { max-width: 240px; }
.xf-chat__teaser--bare .xf-chat__teaser-who { display: none; }
.xf-chat__item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
border: none;
border-radius: 10px;
background: transparent;
color: var(--text);
text-align: left;
text-decoration: none;
cursor: pointer;
width: 100%;
font: inherit;
transition: background-color .15s ease;
}
@media (hover: hover) {
.xf-chat__item:hover { background: var(--surface-2); }
}
.xf-chat__item:active { background: var(--surface-3); }
.xf-chat__item-icon {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.xf-chat__item-icon--bot { background: var(--accent); color: #fff; }
.xf-chat__item-icon--live { background: var(--surface-3); color: var(--text-2); }
.xf-chat__item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.xf-chat__item-title { font-size: 14px; font-weight: 600; }
.xf-chat__item-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.xf-chat__item.is-loading { pointer-events: none; }
.xf-chat__item.is-loading .xf-chat__item-icon--live {
position: relative;
color: transparent;
}
.xf-chat__item.is-loading .xf-chat__item-icon--live::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 2px solid var(--line);
border-top-color: var(--text-2);
border-radius: 50%;
animation: xf-chat-spin .6s linear infinite;
}
body.xf-cookie-up .xf-chat { bottom: calc(var(--xf-cookie-h, 72px) + 24px); }
@media (min-width: 641px) and (max-width: 1100px) {
body.page-configurator .xf-chat { bottom: 100px; }
body.xf-cookie-up.page-configurator .xf-chat { bottom: calc(var(--xf-cookie-h, 72px) + 100px); }
}
@media (max-width: 640px) {
body.page-configurator.xf-has-picks .xf-chat { bottom: 152px; }
body.xf-cookie-up.page-configurator.xf-has-picks .xf-chat { bottom: calc(var(--xf-cookie-h, 120px) + 152px); }
}
@media (min-width: 641px) {
body.xf-bottombar-up:not(.xf-cookie-up) .xf-chat {
bottom: calc(var(--xf-bottombar-h, 84px) + 16px);
}
body.xf-cookie-up.xf-bottombar-stacked .xf-chat {
bottom: calc(var(--xf-cookie-h, 92px) + var(--xf-bottombar-h, 84px) + 16px);
}
body.xf-bottombar-stacked .xf-chat { transition: none; }
}
.b24-widget-button-wrapper,
.b24-widget-button-position-bottom-right,
.b24-widget-button-position-bottom-left {
display: none !important;
}
@media (min-width: 641px) {
.bx-livechat-wrapper {
left: auto !important;
right: 24px !important;
}
body.xf-cookie-up .bx-livechat-wrapper {
bottom: calc(var(--xf-cookie-h, 92px) + 24px) !important;
}
}
@keyframes xf-chat-in {
from { opacity: 0; transform: translateY(10px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes xf-chat-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.xf-chat, .xf-chat__fab, .xf-chat__fab-icon, .xf-chat__menu { transition: none; animation: none; }
.xf-chat__fab::after { transition: none; }
.xf-chat__fab:hover { transform: none; }
.xf-chat__item.is-loading .xf-chat__item-icon--live::after { animation: none; }
}
@media (max-width: 640px) {
.xf-chat { right: 16px; bottom: 16px; }
.xf-chat__fab { width: 52px; height: 52px; }
.xf-chat__teaser { max-width: min(320px, calc(100vw - 32px)); }
.xf-chat__teaser-close { width: 40px; height: 40px; top: 2px; right: 2px; }
.xf-chat__teaser-open { padding-right: 44px; }
.xf-chat__teaser-ask { min-height: 40px; }
body.xf-cookie-up .xf-chat { bottom: calc(var(--xf-cookie-h, 120px) + 16px); }
body.xf-bottombar-up .xf-chat {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px) scale(0.94);
transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
body.xf-bottombar-stacked .xf-chat {
bottom: calc(var(--xf-bottombar-h, 84px) + 16px);
transition: none;
}
body.xf-cookie-up.xf-bottombar-stacked .xf-chat {
bottom: calc(var(--xf-cookie-h, 120px) + var(--xf-bottombar-h, 84px) + 16px);
}
body.xf-bottombar-ahead .xf-chat {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(calc(-1 * var(--xf-chat-guard, 0px)));
animation: xf-chat-rehome .2s ease both;
}
@media (prefers-reduced-motion: reduce) {
body.xf-bottombar-ahead .xf-chat { animation: none; }
}
}
@keyframes xf-chat-rehome { from { opacity: 0; } to { opacity: 1; } }
body:not(.xf-bottombar-up) .xf-chat {
transform: translateY(calc(-1 * var(--xf-chat-guard, 0px)));
}
body.xf-chat-yield .xf-chat {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, visibility .2s ease;
}
/* End */
/* Start:/local/templates/xcore_front/css/aichat.xfmin-1-61980.css?179283140126018*/
.xf-aichat {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1200;
width: 384px;
max-width: calc(100vw - 32px);
height: 560px;
max-height: calc(100vh - 48px);
display: none;
transition: bottom .3s ease;
}
.xf-aichat.is-open,
.xf-aichat.is-closing { display: block; }
.xf-aichat.is-closing { pointer-events: none; }
body.xf-cookie-up .xf-aichat { bottom: calc(var(--xf-cookie-h, 72px) + 24px); }
@media (min-width: 641px) {
.xf-aichat--above-fab {
bottom: calc(92px + var(--xf-chat-guard, 0px));
max-height: calc(100vh - 116px);
}
body.xf-cookie-up .xf-aichat--above-fab {
bottom: calc(var(--xf-cookie-h, 72px) + 92px + var(--xf-chat-guard, 0px));
max-height: calc(100vh - var(--xf-cookie-h, 72px) - 116px);
}
}
.xf-aichat__panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-card), 0 2px 8px -4px oklch(0.2 0.03 285 / 0.25);
transform-origin: bottom right;
}
.xf-aichat.is-open .xf-aichat__panel { animation: xf-aichat-in .24s cubic-bezier(0.22, 1, 0.36, 1); }
.xf-aichat.is-closing .xf-aichat__panel { animation: xf-aichat-out .2s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes xf-aichat-in {
from { opacity: 0; transform: translateY(14px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes xf-aichat-out {
from { opacity: 1; transform: scale(1); border-radius: 18px; }
to { opacity: 0; transform: scale(.16); border-radius: 999px; }
}
@keyframes xf-aichat-out-m {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(24px); }
}
.xf-aichat__header {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px 12px 16px;
border-bottom: 1px solid var(--line-soft);
background: var(--surface);
}
.xf-aichat__avatar {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent-dim);
color: var(--accent-2);
}
.xf-aichat__ident { display: flex; flex-direction: column; min-width: 0; margin-right: auto; line-height: 1.25; }
.xf-aichat__name {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.xf-aichat__status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-2);
margin-top: 1px;
}
.xf-aichat__status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 3px oklch(0.65 0.17 155 / 0.16);
}
.xf-aichat__status.is-off::before {
background: var(--text-3);
box-shadow: none;
}
.xf-aichat__act {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 10px;
background: none;
color: var(--text-2);
font: inherit;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) {
.xf-aichat__act:hover { background: var(--surface-2); color: var(--text); }
}
.xf-aichat__act:active { background: var(--surface-3); }
.xf-aichat__tg { color: var(--text-2); }
@media (min-width: 641px) {
.xf-aichat__header { cursor: grab; touch-action: none; }
.xf-aichat.is-dragging .xf-aichat__header { cursor: grabbing; }
.xf-aichat__header .xf-aichat__act { cursor: pointer; }
}
body.xf-aichat-drag { -webkit-user-select: none; user-select: none; }
.xf-aichat__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
scroll-behavior: smooth;
background: var(--bg);
}
@media (prefers-reduced-motion: reduce) { .xf-aichat__body { scroll-behavior: auto; } }
.xf-aichat__note {
font-size: 11.5px;
line-height: 1.5;
color: var(--text-3);
text-align: center;
padding: 2px 10px 6px;
margin: 0 auto;
max-width: 32ch;
}
.xf-aichat__row { display: flex; flex-direction: column; max-width: 86%; min-width: 0; }
.xf-aichat__row--bot { align-self: flex-start; align-items: flex-start; }
.xf-aichat__row--user { align-self: flex-end; align-items: flex-end; }
.xf-aichat__bubble {
padding: 9px 13px;
border-radius: 14px;
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
min-width: 0;
}
.xf-aichat__link {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.xf-aichat__link:hover { text-decoration: none; }
html[data-theme="dark"] .xf-aichat__link { color: var(--accent-2); }
.xf-aichat__row--bot .xf-aichat__bubble {
background: var(--surface);
color: var(--text);
border: 1px solid var(--line-soft);
border-bottom-left-radius: 5px;
}
.xf-aichat__row--user .xf-aichat__bubble {
background: var(--accent);
color: #fff;
border-bottom-right-radius: 5px;
}
html[data-theme="dark"] .xf-aichat__row--user .xf-aichat__bubble {
background: var(--accent-3);
}
.xf-aichat__row + .xf-aichat__row { margin-top: 0; }
.xf-aichat__row--bot + .xf-aichat__row--bot,
.xf-aichat__row--user + .xf-aichat__row--user { margin-top: -4px; }
.xf-aichat__typing {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 90%;
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--line-soft);
border-radius: 14px;
border-bottom-left-radius: 5px;
}
.xf-aichat__typing-dots {
display: inline-flex;
flex: 0 0 auto;
gap: 4px;
}
.xf-aichat__typing-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-3);
animation: xf-aichat-blink 1.2s infinite ease-in-out;
}
.xf-aichat__typing-dots span:nth-child(2) { animation-delay: .18s; }
.xf-aichat__typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes xf-aichat-blink {
0%, 60%, 100% { opacity: .3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.xf-aichat__typing-label {
flex: 0 1 auto;
min-width: 0;
font-size: 12.5px;
line-height: 1.35;
color: var(--text-2);
opacity: 0;
transition: opacity .2s ease;
}
.xf-aichat__typing-label:empty { display: none; }
.xf-aichat__typing-label.is-shown { opacity: 1; }
.xf-aichat__typing-label.is-fading { opacity: 0; }
.xf-aichat__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-self: flex-start;
max-width: 100%;
margin-top: 2px;
}
.xf-aichat__chip {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 13px;
border-radius: 10px;
border: 1px solid var(--accent-line);
background: var(--surface);
color: var(--accent-2);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
text-align: left;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
@media (hover: hover) {
.xf-aichat__chip:hover { background: var(--accent-dim); border-color: var(--accent); }
}
.xf-aichat__chip:active { transform: scale(calc(1 - 0.03 * var(--xf-motion, 1))); }
.xf-aichat__chip[disabled] { opacity: .5; cursor: default; }
.xf-aichat__card {
flex: 0 0 auto;
align-self: stretch;
display: flex;
flex-direction: column;
min-width: 0;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
overflow: hidden;
}
.xf-aichat__card[data-state="wait"],
.xf-aichat__card[data-state="fail"],
.xf-aichat__card[data-state="hold"],
.xf-aichat__card[data-state="busy"],
.xf-aichat__card[data-state="bad"] { border-color: var(--accent-line); }
.xf-aichat__card-text {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
font-size: 14px;
line-height: 1.5;
overflow-wrap: anywhere;
word-break: break-word;
}
.xf-aichat__card-title {
font-size: 14.5px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.1px;
text-wrap: balance;
}
.xf-aichat__card-part { white-space: pre-wrap; }
.xf-aichat__card-head { white-space: normal; }
.xf-aichat__card-list {
display: flex;
flex-direction: column;
gap: 5px;
margin: 3px 0 0;
padding: 0;
list-style: none;
white-space: normal;
}
.xf-aichat__card-list > li {
position: relative;
padding-left: 14px;
}
.xf-aichat__card-list > li::before {
content: "";
position: absolute;
left: 2px;
top: .68em;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--text-3);
}
.xf-aichat__card[data-state="mute"] .xf-aichat__card-text { color: var(--text-2); }
.xf-aichat__card-foot {
display: flex;
flex-direction: column;
gap: 9px;
padding: 10px 12px 12px;
border-top: 1px solid var(--line-soft);
background: var(--surface-2);
}
.xf-aichat__card-foot[hidden],
.xf-aichat__confirm[hidden],
.xf-aichat__confirm .xf-aichat__btn[hidden],
.xf-aichat__redo[hidden] { display: none; }
.xf-aichat__redo { align-self: stretch; display: flex; }
.xf-aichat__card-state {
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: var(--text);
}
.xf-aichat__card-icon {
flex: 0 0 auto;
display: inline-flex;
width: 15px;
height: 15px;
margin-top: 1.5px;
color: var(--text-3);
}
.xf-aichat__card[data-state="wait"] .xf-aichat__card-icon,
.xf-aichat__card[data-state="hold"] .xf-aichat__card-icon { color: var(--warning); }
.xf-aichat__card[data-state="ok"] .xf-aichat__card-icon { color: var(--success); }
.xf-aichat__card[data-state="bad"] .xf-aichat__card-icon { color: var(--danger); }
.xf-aichat__card[data-state="fail"] .xf-aichat__card-state,
.xf-aichat__card[data-state="fail"] .xf-aichat__card-icon { color: var(--danger); }
.xf-aichat__card[data-state="fail"] .xf-aichat__card-foot { background: var(--surface); }
.xf-aichat__card[data-state="mute"] .xf-aichat__card-state { color: var(--text-3); font-weight: 400; }
.xf-aichat__card-icon.is-spin,
.xf-aichat__bar[data-state="busy"] .xf-aichat__bar-label::before {
box-sizing: border-box;
width: 14px;
height: 14px;
border: 2px solid var(--line);
border-top-color: var(--accent);
border-radius: 50%;
animation: xf-aichat-spin .6s linear infinite;
}
.xf-aichat__bar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-top: 1px solid var(--accent-line);
background: var(--surface-2);
}
.xf-aichat__bar[hidden],
.xf-aichat__bar-send[hidden],
.xf-aichat__bar-show[hidden],
.xf-aichat.is-gated .xf-aichat__bar { display: none; }
.xf-aichat__bar .xf-aichat__bar-send { flex: 0 0 auto; }
.xf-aichat__bar-info {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
}
.xf-aichat__bar-label {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--text);
}
.xf-aichat__bar[data-state="hold"] .xf-aichat__bar-label,
.xf-aichat__bar[data-state="bad"] .xf-aichat__bar-label { font-weight: 500; }
.xf-aichat__bar[data-state="ok"] .xf-aichat__bar-label,
.xf-aichat__bar[data-state="fail"] .xf-aichat__bar-label { display: flex; align-items: center; gap: 7px; }
.xf-aichat__bar-icon { flex: 0 0 auto; display: inline-flex; color: var(--success); }
.xf-aichat__bar[data-state="fail"] .xf-aichat__bar-label,
.xf-aichat__bar[data-state="fail"] .xf-aichat__bar-icon { color: var(--danger); }
.xf-aichat__bar[data-state="fail"] { background: var(--surface); }
.xf-aichat__bar[data-state="busy"] .xf-aichat__bar-label::before {
content: "";
display: inline-block;
margin-right: 7px;
vertical-align: -2px;
}
.xf-aichat__bar-show {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 40px;
margin: -9px 0;
padding: 0;
border: 0;
background: none;
color: var(--accent-2);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
line-height: 1.3;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
@media (hover: hover) { .xf-aichat__bar-show:hover { text-decoration: none; } }
@media (max-height: 520px) {
.xf-aichat__bar { padding: 6px 12px; }
.xf-aichat__bar .xf-aichat__bar-send { min-height: 36px; padding: 8px 12px; }
.xf-aichat.has-request-bar .xf-aichat__escalate { display: none; }
}
.xf-aichat__alert {
flex: 0 0 auto;
align-self: stretch;
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
font-size: 13px;
line-height: 1.45;
color: var(--text);
}
.xf-aichat__alert-icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: var(--danger); }
.xf-aichat__confirm {
align-self: stretch;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.xf-aichat__btn {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 40px;
padding: 10px 14px;
border-radius: 11px;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.xf-aichat__btn--primary {
background: var(--accent);
color: #fff;
border: 1px solid transparent;
box-shadow: 0 6px 18px -8px var(--accent);
}
html[data-theme="dark"] .xf-aichat__btn--primary { box-shadow: var(--nx-key); }
@media (hover: hover) { .xf-aichat__btn--primary:hover { transform: translateY(calc(-1px * var(--xf-motion, 1))); } }
.xf-aichat__btn--ghost {
background: var(--surface);
color: var(--text);
border: 1px solid var(--line);
flex: 0 1 auto;
}
@media (hover: hover) { .xf-aichat__btn--ghost:hover { background: var(--surface-2); } }
.xf-aichat__btn:active { transform: scale(calc(1 - 0.02 * var(--xf-motion, 1))); }
.xf-aichat__btn[disabled] { opacity: .55; cursor: default; transform: none; }
.xf-aichat__system {
align-self: center;
max-width: 90%;
text-align: center;
font-size: 12px;
color: var(--text-3);
padding: 4px 12px;
}
.xf-aichat__undelivered {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 4px 10px;
max-width: 100%;
margin-top: 5px;
}
.xf-aichat__undelivered-mark {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 500;
line-height: 1.3;
color: var(--danger);
}
.xf-aichat__undelivered-icon { display: inline-flex; flex: 0 0 auto; }
.xf-aichat__retry {
flex: 0 0 auto;
min-height: 30px;
padding: 5px 11px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
@media (hover: hover) {
.xf-aichat__retry:hover { background: var(--surface-2); }
}
.xf-aichat__retry:active { transform: scale(calc(1 - 0.03 * var(--xf-motion, 1))); }
.xf-aichat__retry[disabled] { opacity: .5; cursor: default; transform: none; }
.xf-aichat__row.is-undelivered + .xf-aichat__row { margin-top: 4px; }
.xf-aichat__failnote {
align-self: center;
max-width: 92%;
padding: 2px 12px 4px;
text-align: center;
text-wrap: balance;
font-size: 12px;
line-height: 1.45;
color: var(--text-2);
}
.xf-aichat__failnote-part { display: inline-block; }
.xf-aichat__failnote-alt { margin-top: 2px; line-height: 24px; }
.xf-aichat__failnote-way { display: inline-block; white-space: nowrap; }
.xf-aichat__failnote-link {
padding: 3px 0;
color: var(--text);
font-family: var(--font-sans);
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (hover: hover) { .xf-aichat__failnote-link:hover { text-decoration: none; } }
.xf-aichat__failnote-act { margin: 6px 0 2px; }
.xf-aichat__rate {
align-self: stretch;
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 2px;
padding: 12px;
border: 1px solid var(--line-soft);
border-radius: 12px;
background: var(--surface);
}
.xf-aichat__rate-prompt {
font-size: 13px;
color: var(--text-2);
text-align: center;
}
.xf-aichat__rate.is-ask {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.xf-aichat__rate.is-ask .xf-aichat__rate-prompt { text-align: left; }
.xf-aichat__rate.is-ask .xf-aichat__rate-actions { flex: 0 0 auto; }
.xf-aichat__rate.is-ask .xf-aichat__rate-btn { min-width: 46px; padding: 8px 10px; }
.xf-aichat__rate-btn { transition: opacity .18s ease; }
.xf-aichat__rate.is-arming .xf-aichat__rate-btn { opacity: .4; cursor: default; }
.xf-aichat__rate-actions {
display: flex;
gap: 8px;
justify-content: center;
}
.xf-aichat__rate-btn {
flex: 0 0 auto;
min-width: 56px;
min-height: 40px;
padding: 8px 16px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--surface-2);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
@media (hover: hover) {
.xf-aichat__rate-btn:hover { background: var(--accent-dim); border-color: var(--accent); }
}
.xf-aichat__rate-btn:active { transform: scale(calc(1 - 0.06 * var(--xf-motion, 1))); }
.xf-aichat__rate-input {
width: 100%;
resize: none;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--text);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.45;
transition: border-color .15s ease, box-shadow .15s ease;
}
.xf-aichat__rate-input::placeholder { color: var(--text-3); }
.xf-aichat__rate-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.xf-aichat__fault {
margin: auto 4px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 24px 20px;
}
.xf-aichat__fault-icon {
width: 46px;
height: 46px;
border-radius: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
color: var(--text-3);
}
.xf-aichat__fault-title { font-size: 15px; font-weight: 600; }
.xf-aichat__fault-text { font-size: 13px; line-height: 1.5; color: var(--text-2); max-width: 30ch; }
.xf-aichat__fault .xf-aichat__btn,
.xf-aichat__failnote-act .xf-aichat__btn { flex: 0 0 auto; padding: 10px 18px; }
.xf-aichat__fault-ways { font-size: 12px; color: var(--text-2); text-wrap: balance; }
.xf-aichat__fault-ways .xf-aichat__failnote-alt { margin-top: 0; }
.xf-aichat__escalate {
flex: 0 0 auto;
padding: 6px 10px;
border-top: 1px solid var(--line-soft);
background: var(--surface);
}
.xf-aichat__escalate-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 10px;
border: none;
border-radius: 10px;
background: transparent;
color: var(--text-2);
font: inherit;
font-size: 12.5px;
line-height: 1.2;
text-align: left;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) {
.xf-aichat__escalate-btn:hover { background: var(--surface-2); color: var(--text); }
}
.xf-aichat__escalate-btn:active { background: var(--surface-3); }
.xf-aichat__escalate-icon { flex: 0 0 auto; display: inline-flex; color: var(--text-2); }
.xf-aichat__escalate-cta { margin-left: auto; font-weight: 600; color: var(--text); }
.xf-aichat__escalate-btn.is-loading { pointer-events: none; }
.xf-aichat__escalate-btn.is-loading .xf-aichat__escalate-icon svg { display: none; }
.xf-aichat__escalate-btn.is-loading .xf-aichat__escalate-icon::after {
content: "";
width: 13px;
height: 13px;
border: 2px solid var(--line);
border-top-color: var(--text-2);
border-radius: 50%;
animation: xf-aichat-spin .6s linear infinite;
}
.xf-aichat__composer {
flex: 0 0 auto;
display: flex;
align-items: flex-end;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid var(--line-soft);
background: var(--surface);
}
.xf-aichat__field {
flex: 1 1 auto;
min-width: 0;
resize: none;
max-height: 112px;
padding: 10px 14px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--text);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.45;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.xf-aichat__field::placeholder { color: var(--text-3); }
.xf-aichat__field:focus {
border-color: var(--accent);
background: var(--surface);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.xf-aichat__field:disabled { opacity: .6; cursor: not-allowed; }
.xf-aichat__send {
flex: 0 0 auto;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: #fff;
cursor: pointer;
box-shadow: 0 6px 18px -10px var(--accent);
transition: transform .12s ease, background-color .15s ease, opacity .15s ease;
}
@media (hover: hover) { .xf-aichat__send:hover { transform: translateY(calc(-1px * var(--xf-motion, 1))); } }
.xf-aichat__send:active { transform: scale(calc(1 - 0.06 * var(--xf-motion, 1))); }
.xf-aichat__send:disabled {
background: var(--surface-3);
color: var(--text-3);
box-shadow: none;
cursor: default;
transform: none;
}
html[data-theme="dark"] .xf-aichat__send:not(:disabled) { box-shadow: var(--nx-key); }
.xf-aichat__send-arrow { display: inline-flex; }
.xf-aichat__send.is-busy .xf-aichat__send-arrow { display: none; }
.xf-aichat__send:not(.is-busy) .xf-aichat__send-spin { display: none; }
.xf-aichat__send-spin {
width: 17px;
height: 17px;
border: 2px solid oklch(1 0 0 / 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: xf-aichat-spin .6s linear infinite;
}
.xf-aichat__gate {
display: none;
flex-direction: column;
min-height: 0;
background: var(--bg);
}
.xf-aichat.is-gated .xf-aichat__gate { display: flex; flex: 1 1 auto; }
.xf-aichat.is-gated .xf-aichat__body,
.xf-aichat.is-gated .xf-aichat__escalate,
.xf-aichat.is-gated .xf-aichat__composer,
.xf-aichat.is-gated .xf-aichat__foot { display: none; }
.xf-aichat__gate-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 18px 18px 14px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 11px;
}
.xf-aichat__gate-intro { margin-bottom: 8px; }
.xf-aichat__gate-title {
margin: 0 0 12px;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: var(--text);
}
.xf-aichat__gate-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.xf-aichat__gate-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
line-height: 1.4;
color: var(--text);
}
.xf-aichat__gate-icon {
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: 1px solid var(--line-soft);
color: var(--text-2);
}
.xf-aichat__gate-ask {
margin: 0;
padding: 9px 12px;
border-radius: 10px;
background: var(--accent-dim);
color: var(--text);
font-size: 13.5px;
line-height: 1.45;
}
.xf-aichat__gate-ask[hidden] { display: none; }
.xf-aichat__gate-text {
font-size: 13.5px;
line-height: 1.55;
color: var(--text-2);
overflow-wrap: anywhere;
}
.xf-aichat__gate-link {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.xf-aichat__gate-link:hover { text-decoration: none; }
html[data-theme="dark"] .xf-aichat__gate-link { color: var(--accent-2); }
.xf-aichat__gate-foot {
flex: 0 0 auto;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line-soft);
background: var(--surface);
}
.xf-aichat__gate-accept { width: 100%; }
.xf-aichat.is-gated .xf-aichat__escalate--gate {
display: block;
margin: 10px -10px -4px;
padding: 0;
border-top: none;
background: transparent;
}
@media (max-width: 640px) {
.xf-aichat.is-gated .xf-aichat__escalate--gate { margin-top: 12px; }
.xf-aichat__escalate--gate .xf-aichat__escalate-btn { min-height: 40px; }
}
.xf-aichat__foot {
flex: 0 0 auto;
padding: 7px 12px calc(9px + env(safe-area-inset-bottom, 0px));
text-align: center;
border-top: 1px solid var(--line-soft);
background: var(--surface);
}
.xf-aichat__policy {
font-size: 12px;
line-height: 1.4;
color: var(--text-3);
text-decoration: underline;
text-underline-offset: 2px;
}
@media (hover: hover) { .xf-aichat__policy:hover { color: var(--text-2); } }
.xf-aichat__toast {
position: absolute;
left: 16px;
right: 16px;
bottom: 120px;
z-index: 2;
padding: 10px 14px;
border-radius: 12px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-card);
font-size: 13px;
font-weight: 500;
color: var(--text);
text-align: center;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
}
.xf-aichat__toast.is-shown { opacity: 1; transform: translateY(0); }
@keyframes xf-aichat-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.xf-aichat,
.xf-aichat__panel,
.xf-aichat__typing-dots span,
.xf-aichat__typing-label,
.xf-aichat__send-spin,
.xf-aichat__escalate-icon::after,
.xf-aichat__card-icon.is-spin,
.xf-aichat__bar[data-state="busy"] .xf-aichat__bar-label::before,
.xf-aichat__toast { animation: none !important; transition: none !important; }
.xf-aichat.is-open .xf-aichat__panel,
.xf-aichat.is-closing .xf-aichat__panel { animation: none; }
}
@media (max-width: 640px) {
.xf-aichat {
right: 0;
bottom: 0;
left: 0;
top: 0;
width: 100%;
max-width: none;
height: 100%;
height: 100dvh;
max-height: none;
}
body.xf-cookie-up .xf-aichat {
bottom: 0;
max-height: calc(100vh - var(--xf-cookie-h, 0px));
max-height: calc(100dvh - var(--xf-cookie-h, 0px));
}
.xf-aichat__panel {
border-radius: 0;
border: 0;
}
.xf-aichat.is-closing .xf-aichat__panel { animation: xf-aichat-out-m .18s ease forwards; }
.xf-aichat__header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.xf-aichat__row { max-width: 90%; }
.xf-aichat__field,
.xf-aichat__rate-input { font-size: 16px; }
.xf-aichat__retry { min-height: 36px; padding: 7px 13px; font-size: 13px; }
.xf-aichat__failnote,
.xf-aichat__fault-ways { font-size: 12.5px; }
.xf-aichat__failnote-alt { line-height: 30px; }
.xf-aichat__failnote-link { padding: 6px 0; }
.xf-aichat { background: var(--bg); }
}
@media (max-width: 640px) {
body.xf-aichat-lock {
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
}
/* End */
/* Start:/local/templates/xcore_front/css/catalog-hub.xfmin-1-22319.css?17928314015677*/
.xf-dept-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.xf-dept {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 16px;
overflow: hidden;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.xf-dept--wide { grid-column: span 2; }
@media (hover: hover) {
.xf-dept:hover {
border-color: var(--accent-line);
transform: translateY(calc(-2px * var(--xf-motion, 1)));
box-shadow: var(--shadow-card);
}
html[data-theme="dark"] .xf-dept:hover {
box-shadow: 0 8px 20px -12px oklch(0.05 0.03 280 / 0.35);
}
}
.xf-dept { position: relative; }
.xf-dept__head::after { content: ''; position: absolute; inset: 0; }
.xf-dept__link { position: relative; z-index: 1; }
.xf-dept__head {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
color: var(--text);
text-decoration: none;
min-height: 0;
}
.xf-dept__icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--surface-3);
border: 1px solid var(--line-soft);
color: var(--text-2);
display: flex;
align-items: center;
justify-content: center;
transition: background .25s, border-color .25s, color .25s;
}
.xf-dept__icon svg { width: 24px; height: 24px; }
.xf-dept__icon img {
max-width: 70%;
max-height: 70%;
object-fit: contain;
}
@media (hover: hover) {
.xf-dept:hover .xf-dept__icon {
background: var(--accent);
border-color: transparent;
color: #fff;
}
}
.xf-dept:not(:has(.xf-dept__links)) .xf-dept__head { flex: 1 1 auto; }
.xf-dept__label {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.xf-dept__name {
margin: 0;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.3px;
line-height: 1.25;
}
.xf-dept--wide .xf-dept__name { font-size: 18px; }
.xf-dept__count {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text-3);
}
.xf-dept__arrow {
flex: 0 0 auto;
color: var(--text-3);
display: flex;
transition: color .2s, transform .2s;
}
@media (hover: hover) {
.xf-dept:hover .xf-dept__arrow {
color: var(--accent);
transform: translate(calc(1px * var(--xf-motion, 1)), calc(-1px * var(--xf-motion, 1)));
}
}
.xf-dept__links {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 3px 16px;
margin: 0;
padding: 0 18px 16px;
list-style: none;
}
.xf-dept__link {
font-size: 13px;
line-height: 1.5;
color: var(--text-2);
text-decoration: none;
transition: color .15s;
}
.xf-dept__link:hover { color: var(--accent-2); text-decoration: underline; }
.xf-dept__more {
color: var(--text-3);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (pointer: coarse) {
.xf-dept__links { gap: 6px 16px; }
.xf-dept__link { padding: 4px 0; }
}
html[data-theme="dark"] .xf-dept__count,
html[data-theme="dark"] .xf-dept__more { color: var(--text-2); }
@media (min-width: 900px) and (max-width: 1199px) {
.xf-dept-grid { grid-template-columns: repeat(3, 1fr); }
.xf-dept--wide { grid-column: auto; }
.xf-dept--wide .xf-dept__name { font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 899px) {
.xf-dept-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.xf-dept-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.xf-dept--wide { grid-column: span 2; }
.xf-dept:not(.xf-dept--wide) .xf-dept__links { display: none; }
.xf-dept--wide .xf-dept__links { padding: 0 14px 14px; gap: 2px 14px; }
.xf-dept__arrow { display: none; }
.xf-dept__head { flex: 1 1 auto; padding: 14px; gap: 10px; }
.xf-dept__icon { width: 36px; height: 36px; border-radius: 10px; }
.xf-dept__icon svg { width: 20px; height: 20px; }
.xf-dept__name { font-size: 14px; }
.xf-dept:not(.xf-dept--wide) .xf-dept__head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.xf-dept--wide .xf-dept__name { font-size: 15px; }
.xf-dept__name { overflow-wrap: break-word; hyphens: auto; }
}
.xf-l1hub-grid { grid-template-columns: repeat(var(--xf-l1cols, 4), 1fr); }
.xf-l1hub-grid--stretch-last > :last-child { grid-column: span 2; }
@media (min-width: 768px) and (max-width: 1099px) {
.xf-l1hub-grid { grid-template-columns: repeat(3, 1fr); }
.xf-l1hub-grid--stretch-last > :last-child { grid-column: auto; }
}
@media (min-width: 1100px) and (max-width: 1335px) {
.xf-l1hub-grid--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
.xf-l1hub-grid { grid-template-columns: repeat(2, 1fr); }
.xf-l1hub-grid--stretch-last > :last-child { grid-column: auto; }
}
@media (min-width: 768px) {
.xf-l1hub-grid .xf-cat-tile:has(.xf-cat-tile__art--static) .xf-cat-tile__name {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
min-height: calc(1.35em * 2);
}
}
.xf-l1hub-grid h3.xf-cat-tile__name { margin: 0; }
.xf-l1hub-tile--empty { cursor: default; background: var(--surface-2); }
.xf-l1hub-tile--empty .xf-cat-tile__art { opacity: .45; }
.xf-l1hub-tile--empty .xf-cat-tile__count { color: var(--text-3); }
@media (hover: hover) {
.xf-l1hub-tile--empty:hover {
transform: none;
box-shadow: none;
border-color: var(--line-soft);
}
}
html[data-theme="dark"] .xf-l1hub-grid .xf-cat-tile__count { color: var(--text-2); }
.xf-l1hub-chiprow {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 10px;
margin-top: 12px;
}
.xf-l1hub-chiprow__label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-3);
white-space: nowrap;
}
.xf-l1hub-chiprow .xf-brand-chips,
.xf-l1hub-chiprow .xf-facet-chips { margin-top: 0; }
@media (max-width: 767px) {
.xf-l1hub-chiprow { display: block; }
.xf-l1hub-chiprow__label { display: block; margin-bottom: 2px; }
}
/* End */
/* Start:/local/templates/xcore_front/components/yam.user.cookies/.default/style.css?179264518324622*/
/* OWNS: .xf-cookie, .xf-cookie__* (consent banner + панель «Настроить»), .xf-cookie--expanded.
Все селекторы строго под .xf-cookie__ — не пересекаются с form.css (.licence_block)
и css/*. Перед добавлением нового класса: grep по css/ и этому файлу.
Уважает токены xcore_front (Onest + OKLCH accent 268°), dark/light.
JS-контракт: container#cookie_notice__wrap, btnClose#cookies_btn__close,
hide-class .cookie_hidden, panel#xf-cookie-prefs, чекбоксы #xf-pref-*. */
.xf-cookie {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: var(--surface);
color: var(--text);
border-top: 1px solid var(--accent-line);
box-shadow: 0 -8px 32px -8px oklch(0.3 0.05 285 / 0.18);
font-family: var(--font-sans);
transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s ease;
transform: translateY(0);
opacity: 1;
}
.xf-cookie.cookie_hidden {
transform: translateY(120%);
opacity: 0;
pointer-events: none;
}
.xf-cookie__inner {
max-width: 1200px;
margin: 0 auto;
padding: 14px 20px;
display: flex;
align-items: flex-start;
gap: 16px;
}
.xf-cookie__main {
flex: 1;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.xf-cookie__text {
flex: 1 1 320px;
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--text-2);
}
.xf-cookie__text strong { color: var(--text); font-weight: 600; }
.xf-cookie__link {
color: var(--text);
text-decoration: underline;
text-decoration-color: var(--accent-line);
text-underline-offset: 3px;
transition: text-decoration-color .15s ease;
}
.xf-cookie__link:hover { text-decoration-color: var(--accent); }
.xf-cookie__actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Действия согласия */
.xf-cookie__accept {
appearance: none;
border: 0;
background: var(--accent);
color: oklch(1 0 0);
font: 500 14px/1 var(--font-sans);
padding: 11px 20px;
border-radius: 10px;
cursor: pointer;
transition: background .15s ease, transform .08s ease;
}
.xf-cookie__accept:hover { background: var(--accent-2); }
.xf-cookie__accept:active { transform: scale(calc(1 - 0.02 * var(--xf-motion, 1))); }
/* Тёмная (#857): там --accent-2 — фиолет для текста, белая подпись на нём
1.9:1. Наведение залитой кнопки — --accent-3, как у .xf-btn: 6.4:1. */
html[data-theme="dark"] .xf-cookie__accept:hover { background: var(--accent-3); }
.xf-cookie__reject {
appearance: none;
background: transparent;
color: var(--text-2);
border: 1px solid var(--accent-line);
font: 500 14px/1 var(--font-sans);
padding: 10px 18px;
border-radius: 10px;
cursor: pointer;
transition: color .15s ease, border-color .15s ease, background .15s ease, transform .08s ease;
}
.xf-cookie__reject:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); }
.xf-cookie__reject:active { transform: scale(calc(1 - 0.02 * var(--xf-motion, 1))); }
/* «Настроить» — третичное действие (открыть панель), без рамки */
.xf-cookie__settings {
appearance: none;
background: transparent;
border: 0;
color: var(--text-2);
font: 500 14px/1 var(--font-sans);
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
text-decoration: underline;
text-decoration-color: var(--accent-line);
text-underline-offset: 3px;
transition: color .15s ease, background .15s ease;
}
.xf-cookie__settings:hover { color: var(--text); background: var(--surface-2); }
.xf-cookie__close {
appearance: none;
border: 0;
background: transparent;
color: var(--text-3);
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
flex-shrink: 0;
transition: color .15s ease, background .15s ease;
}
.xf-cookie__close:hover { color: var(--text); background: var(--surface-2); }
/* ───────── Панель «Настроить» ───────── */
.xf-cookie__panel {
border-top: 1px solid var(--surface-3);
background: var(--surface-2);
}
.xf-cookie__panel[hidden] { display: none; }
.xf-cookie__panel-inner {
max-width: 1200px;
margin: 0 auto;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 14px;
max-height: 48vh;
overflow-y: auto; /* запасной путь: первым сжимается список ниже, а панель
прокрутится, только если не влезут даже кнопки */
}
/* Прокручивается только список категорий, кнопки панели всегда под ним. Описания
категорий длинные (это раскрытие по политике), и при общей прокрутке панели
«Сохранить выбор» и «Отклонить все» на низких телефонах (360×640, 375×667)
уходили за её край. Список — flex-элемент со своим overflow: он сжимается до
высоты, которая остаётся от max-height панели после кнопок, без заданных
вручную высот. margin/padding 4px — место под кольцо фокуса тумблера
(outline 2px + offset 2px), иначе край прокрутки его обрежет.
position: relative — скрытые чекбоксы (position: absolute) иначе отсчитываются
от fixed-баннера, лежат вне прокрутки, и Tab на «Маркетинг» не прокручивает
список к тумблеру. scroll-padding-block 16px — прокрутка к фокусу оставляет
видимыми весь тумблер (24px вокруг чекбокса по центру ряда) и его кольцо. */
.xf-cookie__pref-list {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 0;
overflow-y: auto;
scroll-padding-block: 16px;
margin: -4px;
padding: 4px;
}
.xf-cookie__pref { display: flex; flex-direction: column; gap: 4px; }
.xf-cookie__pref-row {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.xf-cookie__pref > .xf-cookie__pref-row { cursor: default; } /* locked-ряд «Необходимые» */
label.xf-cookie__pref-row { cursor: pointer; }
.xf-cookie__pref-title {
flex: 1;
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.xf-cookie__pref-state {
font: 500 12px/1 var(--font-mono);
color: var(--text-2); /* AA: consent-маркер должен проходить 4.5:1, --text-3 не дотягивает */
letter-spacing: .02em;
}
.xf-cookie__pref-desc {
margin: 0;
font-size: 12.5px;
line-height: 1.45;
color: var(--text-2); /* AA: юридически значимое раскрытие — не --text-3 (4.38:1) */
padding-right: 52px; /* запас под тумблер справа */
}
/* Доступный switch: визуально скрытый checkbox + дорожка с кноб'ом */
.xf-cookie__check {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
margin: 0;
pointer-events: none;
}
.xf-cookie__switch {
position: relative;
flex-shrink: 0;
width: 40px;
height: 24px;
border-radius: 999px;
background: var(--surface-3);
border: 1px solid var(--accent-line);
transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.xf-cookie__knob {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--surface);
box-shadow: 0 1px 2px oklch(0 0 0 / 0.25);
transition: transform .15s ease;
}
.xf-cookie__check:checked + .xf-cookie__switch {
background: var(--accent);
border-color: var(--accent);
}
.xf-cookie__check:checked + .xf-cookie__switch .xf-cookie__knob {
transform: translateX(16px);
}
.xf-cookie__check:focus-visible + .xf-cookie__switch {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Locked-тумблер «Необходимые» — всегда вкл., не интерактивен */
.xf-cookie__switch--locked {
background: var(--accent);
border-color: var(--accent);
opacity: .65;
}
.xf-cookie__switch--locked .xf-cookie__knob { transform: translateX(16px); }
/* Тёмная тема: выключенный тумблер с контуром accent-line и тёмным кноб'ом на
тёмной панели не читался как «это можно включить» — контур 45% белого
(4.5:1 к --surface) и светлый кноб. Включённый и «Необходимые» — в акценте. */
html[data-theme="dark"] .xf-cookie__check:not(:checked) + .xf-cookie__switch:not(.xf-cookie__switch--locked) {
border-color: oklch(1 0 0 / 0.45);
}
html[data-theme="dark"] .xf-cookie__check:not(:checked) + .xf-cookie__switch:not(.xf-cookie__switch--locked) .xf-cookie__knob {
background: oklch(0.86 0.006 292);
}
.xf-cookie__panel-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 4px;
flex-shrink: 0; /* сжимается список категорий, не кнопки */
}
@media (max-width: 720px) {
.xf-cookie__inner { padding: 10px 16px; gap: 8px; }
.xf-cookie__main { gap: 10px; }
.xf-cookie__text { flex-basis: 100%; padding-right: 36px; font-size: 13px; line-height: 1.4; }
.xf-cookie__actions { width: 100%; gap: 6px; }
.xf-cookie__settings { flex: 1 1 100%; text-align: center; }
.xf-cookie__reject,
.xf-cookie__accept { flex: 1; padding: 10px 14px; font-size: 13px; }
.xf-cookie__close { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; }
.xf-cookie__panel-inner { padding: 14px 16px; max-height: 62vh; } /* #722: было 56vh */
.xf-cookie__pref-desc { padding-right: 0; }
.xf-cookie__panel-actions .xf-cookie__reject,
.xf-cookie__panel-actions .xf-cookie__accept { flex: 1 1 0; min-width: 0; text-align: center; }
}
/* ───────── Короткий баннер (#715) ─────────
Решение Ильи 2026-10-12: «сильно короче, текста явно меньше, чуть аккуратнее».
Текст первого слоя — строка-подпись и ссылка (template.php), здесь —
раскладка; вид самой подписи — в блоке «Первый слой в одну строку» ниже.
Блок стоит последним и перекрывает правила выше порядком в файле (мобильный
блок ≤720) — не переносить выше. Блок #704 (сжатие на 340–480 px) им
заменён и удалён: всё, что он задавал, задано здесь.
Кнопки первого слоя правим ТОЛЬКО под .xf-cookie__actions: те же классы
носят «Сохранить выбор» и «Отклонить все» в панели «Настроить», а у них своя
раскладка (до #722 — столбиком, где с нулевыми вертикальными полями и
flex: 1 1 0 они сжимались до высоты текста, 14 px; с #722 — в ряд).
Обкатано на /dev/ под скоупом d1, скоуп снят при выкатке 2026-10-12. */
/* Десктоп и планшет: текст в одну строку — ряд центруем по высоте,
крестик встаёт вровень с кнопками. */
.xf-cookie__inner { align-items: center; padding: 12px 20px; }
.xf-cookie__text { line-height: 1.45; }
/* Три действия одного роста: высоту задаём числом, а не полями — у трёх кнопок
были три разные высоты (33, 34 и 35 px). */
.xf-cookie__actions .xf-cookie__accept,
.xf-cookie__actions .xf-cookie__reject,
.xf-cookie__actions .xf-cookie__settings {
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
padding-top: 0;
padding-bottom: 0;
white-space: nowrap;
}
/* «Отклонить» не бледнее «Согласиться»: текст основным цветом, рамка — не
акцентная на 30%. Отказ не должен быть заметен хуже согласия. То же — у
«Отклонить все» в панели. Цвет рамки здесь (--line) перекрыт блоком #718 в
конце файла: --line почти не читалась. */
.xf-cookie__reject { color: var(--text); border-color: var(--line); }
/* Ссылка на политику: мишень выше 17 px текста — поля строчного элемента
строку не раздвигают. Вниз — только 2 px: под текстом ряд кнопок, и палец,
попавший чуть выше «Отклонить», не должен уводить на страницу политики.
Две подписи: полная («Подробнее в политике») и короткая для телефона
(«Политика») — см. блок «Первый слой в одну строку» ниже. */
.xf-cookie__link { padding: 8px 0 2px; white-space: nowrap; }
.xf-cookie__link-narrow { display: none; }
@media (max-width: 720px) {
.xf-cookie__inner { align-items: flex-start; padding: 10px 16px; gap: 0; }
/* min-width: 0 — ряд кнопок шире экрана больше не растягивает весь блок
(на 320 px он тянул за край и текст, #713). */
.xf-cookie__main { gap: 10px; min-width: 0; }
.xf-cookie__text { flex-basis: 100%; padding-right: 0; font-size: 12.5px; line-height: 1.4; }
/* Место под крестик держит плавающая распорка — только у первой строки:
крестик стоит у самой кромки (значок 14 px — на 11–25 px от верха),
вторая строка (до #722 она была на 320 px) идёт уже на всю ширину. Выше
не поднимаем: над баннером на карточке товара стоит липкая полоса, и её
«В избранное» — ровно над крестиком. right: 8px (#722) — правый край
значка (кнопка 30 px, значок 14 по центру) на кромке ряда, вровень с
«Согласиться»; при 4 px он торчал на 4 px за неё. */
.xf-cookie__text::before { content: ""; float: right; width: 24px; height: 16px; }
.xf-cookie__close { position: absolute; top: 3px; right: 8px; width: 30px; height: 30px; }
/* Ряд действий: «Отклонить» и «Согласиться» — равной ширины, «Настроить» —
по тексту. Раньше три кнопки были трёх разных ширин и высот.
[#722] Порядок — как в разметке и на десктопе: «Настроить», «Отклонить»,
«Согласиться» (раньше order: 3 уводил «Настроить» в конец — фокус с
клавиатуры шёл не в том порядке, что на экране). Текст «Настроить» —
вровень с подписью над ним: кнопка сдвинута влево на своё же поле
(margin = −padding-left, здесь и на ≤359 ниже — менять парой). */
.xf-cookie__actions { width: 100%; gap: 8px; }
.xf-cookie__actions .xf-cookie__reject,
.xf-cookie__actions .xf-cookie__accept { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; font-size: 13.5px; }
.xf-cookie__actions .xf-cookie__settings { flex: 0 0 auto; padding-left: 8px; padding-right: 8px; margin-left: -8px; font-size: 13.5px; text-align: center; }
/* Кнопки панели «Настроить» были 33 и 35 px — того же роста, что действия
первого слоя: min-height 38. [#722] Стоят рядом, равной ширины, как
«Отклонить» и «Согласиться» первого слоя (раньше — столбиком): списку
категорий это 46 px высоты. */
.xf-cookie__panel-actions .xf-cookie__reject,
.xf-cookie__panel-actions .xf-cookie__accept { min-height: 38px; padding-left: 10px; padding-right: 10px; font-size: 13.5px; }
}
/* Самые узкие экраны (#713): на 320 px ряду нужно 312 px при 288 доступных —
«Настроить» выходила за правый край (233–329 px). Поля и кегль кнопок ужаты,
ряд помещается целиком. */
@media (max-width: 359px) {
.xf-cookie__actions { gap: 6px; }
.xf-cookie__actions .xf-cookie__reject,
.xf-cookie__actions .xf-cookie__accept { padding-left: 6px; padding-right: 6px; font-size: 13px; }
.xf-cookie__actions .xf-cookie__settings { padding-left: 6px; padding-right: 4px; margin-left: -6px; font-size: 13px; }
}
/* ───────── Первый слой в одну строку (#715, второй заход) ─────────
Илья, 2026-10-12: «Про cookie можно просто Cookie аналитики и маркетинга».
Строка-подпись вместо абзаца: основным цветом и полужирнее, ссылка на
политику рядом — тише. Фраза о согласии и о Google без cookie переехала в
панель «Настроить» (.xf-cookie__panel-note) слово в слово.
На телефоне подпись ссылки короткая («Политика») на любой ширине: с полной
строка не помещалась в одну на 390–412 px. Адрес ссылки тот же, и слово
по-прежнему называет, куда она ведёт.
Высота баннера: 87 px на 340–720 px ширины, 105 на 320 (подпись в две
строки; с #722 — 86, одна строка), 63 на десктопе. Было 122 / 139 / 66, до
#715 — 162 / 212 / 92.
Обкатано на /dev/ под скоупом d1, скоуп снят при выкатке 2026-10-12. */
.xf-cookie__text--label { color: var(--text); font-weight: 500; }
.xf-cookie__text--label .xf-cookie__link { margin-left: 2px; font-weight: 400; color: var(--text-2); }
.xf-cookie__panel-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
@media (max-width: 720px) {
.xf-cookie__text--label { font-size: 13px; }
.xf-cookie__link-wide { display: none; }
.xf-cookie__link-narrow { display: inline; }
}
/* ───────── «Отклонить» наравне с «Согласиться» (#718) ─────────
Взгляд со стороны после #715: рамка «Отклонить» цветом --line почти не
читалась (контраст с фоном баннера ~1,5:1; в тёмной теме кнопка выглядела
просто текстом рядом с залитой «Согласиться»), а на планшете и десктопе
кнопка была уже «Согласиться» (110 против 126 px). Рамка — --text-3 (этим
цветом она раньше подсвечивалась при наведении; с фоном больше 3:1 в обеих
темах), при наведении — --text-2; то же у «Отклонить все» в панели. От
721 px у двух кнопок общая минимальная ширина. Заливку не трогаем: делать
ли кнопки одного веса — решение владельца.
Обкатано на /dev/ под скоупом d1, скоуп снят при выкатке 2026-10-12. */
.xf-cookie__reject { border-color: var(--text-3); }
.xf-cookie__reject:hover { border-color: var(--text-2); }
@media (min-width: 721px) {
.xf-cookie__actions .xf-cookie__reject,
.xf-cookie__actions .xf-cookie__accept { min-width: 128px; }
}
/* ───────── Косметика после #715 (#722) ─────────
Замеры ДО — живой s1, 2026-10-21, карточка товара, баннер открыт. Часть
правок сделана на месте, в блоках выше (с пометкой #722): порядок действий
на телефоне и «Настроить» вровень с подписью, крестик на кромке ряда, кнопки
окна «Настроить» в ряд, окно до 62vh. Здесь — то, чего выше не было:
1. Планшет (721 px и шире): подпись и три кнопки — одним рядом. У подписи
была база 320 px, и рядом с кнопками (368 px) она не помещалась уже на
768: кнопки уходили вторым рядом, правая половина пустела, крестик вставал
между рядами (баннер 99 px). Теперь подпись сама уступает ширину и
переносится — «Подробнее в политике» целиком второй строкой, — ряд один,
66 px. На десктопе подпись по-прежнему в строку: ширины ей хватает.
2. 320 px: «Политика» не падает на вторую строку. Подписи не хватало 1 px
(265 при 264 доступных, баннер 105 px вместо 87) — кегль 12.5 на ≤359 px
(с #821 — 12: в Safari-движке не хватало ещё 10 px, см. ниже).
3. Окно «Настроить» на ≤359 px: категория «Необходимые» (её переключатель не
нажимается) — после двух переключаемых, иначе «Маркетинг» уходил под край
списка. Фокус порядок не меняет: у «Необходимых» нет поля ввода. Абзац о
согласии и о Google без cookie — последним в списке на любой ширине
(template.php): первым он уводил переключатели под край окна
(390×664 — «Маркетинг» за краем, 320×568 — «Аналитика»). */
@media (min-width: 721px) {
.xf-cookie__text { flex: 1 1 200px; min-width: 0; }
}
/* [#821] Кегль подписи на ≤359 — 12 px, не 12.5: в Safari-движке строка на
10 px уже, чем в Chrome (замер: 278 против 288 px на 320), и «Политика»
снова падала второй строкой — баннер 103 px вместо 86. На карточке товара
эти 17 px поднимали липкую полосу на последнюю строку названия. */
@media (max-width: 359px) {
.xf-cookie__text--label { font-size: 12px; }
.xf-cookie__pref--locked { order: 1; }
.xf-cookie__panel-note { order: 2; }
}
/* End */
/* Start:/local/templates/xcore_front/styles.css?1792154828280*/
/* Deprecated aggregator. css/*.css подключаются по одному через header.php
с ?v= для корректного cache-bust. Оставлен как no-op, чтобы
не сломать возможные внешние ссылки. */
/* End */
/* /local/templates/xcore_front/css/tokens.xfmin-1-31519.css?17928465007776 */
/* /local/templates/xcore_front/css/base.xfmin-1-18012.css?17928464815638 */
/* /local/templates/xcore_front/css/layout.xfmin-1-756.css?1792831401541 */
/* /local/templates/xcore_front/css/ui.xfmin-1-19963.css?17928314017825 */
/* /local/templates/xcore_front/css/header.xfmin-1-58560.css?179284134523762 */
/* /local/templates/xcore_front/css/footer.xfmin-1-8348.css?17928347763505 */
/* /local/templates/xcore_front/css/home.xfmin-1-184514.css?179283777061454 */
/* /local/templates/xcore_front/css/catalog.xfmin-1-16595.css?17928314016449 */
/* /local/templates/xcore_front/css/catsection.xfmin-1-56122.css?179284648519937 */
/* /local/templates/xcore_front/css/product.xfmin-1-115454.css?179283813844520 */
/* /local/templates/xcore_front/css/installment.xfmin-1-13386.css?17928314017607 */
/* /local/templates/xcore_front/css/cart.xfmin-1-19061.css?179284132111018 */
/* /local/templates/xcore_front/css/auth.xfmin-1-13156.css?17928314018894 */
/* /local/templates/xcore_front/css/order.xfmin-1-16649.css?17928464909146 */
/* /local/templates/xcore_front/css/account.xfmin-1-28285.css?179284130818212 */
/* /local/templates/xcore_front/css/search.xfmin-1-21372.css?179284649510732 */
/* /local/templates/xcore_front/css/modal.xfmin-1-85504.css?179283140149011 */
/* /local/templates/xcore_front/css/content.xfmin-1-51936.css?179284133826139 */
/* /local/templates/xcore_front/css/form.xfmin-1-13662.css?17928314017937 */
/* /local/templates/xcore_front/css/blog.xfmin-1-20109.css?179284131211131 */
/* /local/templates/xcore_front/css/news.xfmin-1-2079.css?17928314011031 */
/* /local/templates/xcore_front/css/brands.xfmin-1-12120.css?17928413158565 */
/* /local/templates/xcore_front/css/projects.xfmin-1-10688.css?17928413547831 */
/* /local/templates/xcore_front/css/chat.xfmin-1-38236.css?179283480110218 */
/* /local/templates/xcore_front/css/aichat.xfmin-1-61980.css?179283140126018 */
/* /local/templates/xcore_front/css/catalog-hub.xfmin-1-22319.css?17928314015677 */
/* /local/templates/xcore_front/components/yam.user.cookies/.default/style.css?179264518324622 */
/* /local/templates/xcore_front/styles.css?1792154828280 */