/* css/tokens.css */
:root {
--red: #E2231A;
--red-hover: #C01E16;
--red-active: #B51C15;
--red-tint: #FBE9E8;
--red-bar: #E2231A;
--red-on: var(--red);
--red-text-dark: #FF4D45;
--ink: #1D1D1B;
--dark-surface: #2B2B28;
--dark-surface-alt: #373733;
--dark-hairline: #3A3A36;
--ink-soft: #3A3A38;
--g-0: #FFFFFF; --g-50: #F9F9F8; --g-100: #F4F4F3; --g-200: #E8E8E8; --g-300: #D4D4D2;
--g-400: #B3B3B1; --g-500: #8A8A88; --g-600: #6B6B69; --g-700: #5C5C5A; --g-800: #3A3A38; --g-900: #1D1D1B;
--ok: #1E7A3E; --ok-bg: #E6F3EA;
--warn: #8A5A00; --warn-bg: #FFF3D6;
--err: #8B1610; --err-bg: #FBE9E8;
--info: #2560A8; --info-bg: #E8EFF9;
--express: #FFD23F;
--surface: var(--g-0);
--surface-alt: var(--g-100);
--surface-panel: var(--g-200);
--text: var(--ink);
--text-2: var(--g-600);
--text-3: var(--g-500);
--border: var(--g-300);
--border-input: var(--g-500);
--border-strong: var(--ink);
--hairline: var(--g-200);
--link: var(--ink);
--link-hover: var(--red-hover);
--selected-border: var(--red);
--selected-bg: var(--g-100);
--focus-color: var(--ink);
--focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-color);
--font-display: "Jost", "Jost Fallback", Arial, sans-serif;
--font-text: "Jost", "Jost Fallback", Arial, sans-serif;
--font-price: var(--font-display);
--fs-display: clamp(2.25rem, 4.2vw, 3.5rem);
--fs-h1: 2.25rem; --fs-h2: 1.625rem; --fs-h3: 1.3125rem; --fs-h4: 1.0625rem;
--fs-label: 0.8125rem; --fs-label-sm: 0.75rem; --fs-btn: 0.8125rem;
--fs-body: 1rem; --fs-body-sm: 0.875rem; --fs-small: 0.75rem; --fs-micro: 0.6875rem;
--fs-price-card: 1.375rem; --fs-price-grid: 0.875rem; --fs-price-total: 1.625rem; --fs-kpi: 1.75rem;
--lh-tight: 1.05; --lh-heading: 1.15; --lh-body: 1.5;
--ls-label: 0.10em; --ls-btn: 0.05em;
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
--sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
--container: 1360px; --container-narrow: 920px;
--gutter: 16px; --col-gap: 16px; --section-gap: var(--sp-8);
--header-h: 56px; --nav-h: 44px;
--hdr-util-h: 32px; --hdr-nav-h: 44px;
--logo-h: clamp(36px, calc((100vw - 164px) / 5.405), 48px);
--summary-w: 360px; --filters-w: 260px; --admin-sidebar-w: 232px; --admin-sidebar-min: 56px;
--sec-pad: 32px; --sec-pad-lg: 48px;
--edge: calc(max(0px, (100vw - var(--container))) / 2 + var(--gutter));
--r-1: 2px; --r-2: 4px; --r-pill: 999px;
--bw: 1px; --bw-2: 2px;
--rule: 2px solid var(--border-strong);
--rule-section: 2px solid var(--ink);
--rule-section-inv: 2px solid var(--g-0);
--shadow-1: 0 1px 2px rgba(29, 29, 27, .08);
--shadow-2: 0 8px 24px rgba(29, 29, 27, .12);
--shadow-3: 0 16px 48px rgba(29, 29, 27, .18);
--t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms;
--ease: cubic-bezier(.2, 0, 0, 1);
--z-sticky: 90; --z-header: 100; --z-menu: 110; --z-sheet: 120; --z-modal: 200; --z-toast: 300;
}
@media (min-width: 768px) { :root { --gutter: 24px; --col-gap: 24px; --section-gap: var(--sp-12); --fs-price-card: 1.5rem; } }
@media (min-width: 1024px) {
:root {
--header-h: 80px; --logo-h: 56px;
--hdr-util-h: 40px; --hdr-nav-h: 48px;
--sec-pad: 48px; --sec-pad-lg: 80px;
--section-gap: var(--sp-12);
--fs-h2: 2rem;
--fs-display: clamp(2.25rem, 4.44vw, 4rem);
}
}
@media (min-width: 1280px) { :root { --header-h: 88px; --logo-h: 64px; --fs-price-card: 1.75rem; } }
@media (max-width: 1023px) { :root { --fs-h1: 1.75rem; --fs-h2: 1.375rem; --fs-h3: 1.1875rem; --fs-price-total: 1.375rem; --fs-kpi: 1.5rem; } }
.surface--dark {
--surface: var(--dark-surface); --surface-alt: var(--dark-surface-alt); --surface-panel: var(--dark-surface-alt);
--text: var(--g-0); --text-2: var(--g-400); --text-3: var(--g-500);
--border: #45453F; --hairline: var(--dark-hairline); --border-strong: var(--g-0); --border-input: var(--g-400);
--rule-section: var(--rule-section-inv);
--link: var(--g-0); --link-hover: var(--g-400);
--red-on: var(--g-0);
--selected-bg: var(--dark-surface-alt);
--focus-color: var(--g-0);
background: var(--surface); color: var(--text);
}
.surface--brand {
--surface: var(--g-200); --surface-alt: var(--g-0);
--text-2: var(--g-700);
--text-3: var(--g-600);
--border: var(--g-400); --border-input: #7A7A78; --hairline: var(--g-300);
--selected-bg: var(--g-0);
background: var(--surface);
}
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } }
/* css/base.css */
@font-face {
font-family: "Jost";
src: url(/assets/fonts/jost-var-1.woff2) format("woff2");
font-weight: 400 800;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
font-family: "Jost Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
size-adjust: 96.68%;
ascent-override: 110.67%;
descent-override: 38.79%;
line-gap-override: 0%;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
font-synthesis: none;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
}
body {
margin: 0;
min-width: 320px;
background: var(--surface);
color: var(--text);
font-family: var(--font-text);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
overflow-wrap: break-word;
}
body.is-locked { overflow: hidden; }
.label, .eyebrow, .badge, .btn, .chip, .num, .price, th, .tile__name, .tile__meta, .pcard__eyebrow { overflow-wrap: normal; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
svg { max-width: none; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--link-hover); }
p { margin: 0 0 var(--sp-4); max-width: 68ch; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
li { margin: 0; }
dl { margin: 0 0 var(--sp-4); }
dt { font-weight: 600; }
dd { margin: 0 0 var(--sp-2); }
address { font-style: normal; }
hr { border: 0; border-top: var(--bw) solid var(--hairline); margin: var(--sp-6) 0; }
pre, code, kbd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em; }
pre { overflow: auto; margin: 0 0 var(--sp-4); }
small { font-size: var(--fs-small); }
strong, b { font-weight: 600; }
s { color: var(--text-3); }
table { border-collapse: collapse; border-spacing: 0; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--g-0); }
::placeholder { color: var(--text-3); opacity: 1; }
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--sp-4);
font-family: var(--font-display);
font-weight: 700;
line-height: var(--lh-heading);
color: var(--text);
overflow-wrap: normal;
}
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: 0; }
h2 { font-size: var(--fs-h2); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4, h5, h6 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }
.display {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--fs-display);
line-height: var(--lh-tight);
letter-spacing: -0.01em;
text-transform: uppercase;
}
@media (max-width: 1023px) { .display { font-size: 2.125rem; } }
.eyebrow, .label {
display: block;
margin: 0 0 var(--sp-2);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label);
line-height: 1.3;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-2);
}
.label--sm { font-size: var(--fs-label-sm); }
.label--ink { color: var(--text); }
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-4);
margin: 0 0 var(--sp-6);
padding-bottom: var(--sp-3);
border-bottom: var(--rule-section);
}
.section-head > h1, .section-head > h2, .section-head > h3 { margin: 0; }
.section-head--plain { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--sp-5); }
.section-head__more {
display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label);
letter-spacing: var(--ls-btn); text-transform: uppercase; white-space: nowrap;
text-decoration: none;
}
.section-head__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.section-head__more .icon { width: 16px; height: 16px; }
.lead { font-size: 1.125rem; line-height: 1.5; color: var(--text); }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-small); line-height: 1.4; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.price { font-family: var(--font-text); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; color: var(--text); white-space: nowrap; }
.price__from { font-size: var(--fs-small); font-weight: 400; color: var(--text-2); }
.price__vat { font-size: var(--fs-small); font-weight: 400; color: var(--text-2); }
.price--card { font-size: var(--fs-price-card); line-height: 1.1; }
.price--total { font-family: var(--font-price); font-size: var(--fs-price-total); line-height: 1; }
.price--kpi { font-family: var(--font-price); font-size: var(--fs-kpi); line-height: 1; }
.price--promo { color: var(--red-on); }
.price__list { font-weight: 400; color: var(--text-3); }
.icon {
display: inline-block;
width: 16px; height: 16px;
flex: none;
vertical-align: -0.15em;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; stroke-width: 1.5; }
.icon--18 { width: 18px; height: 18px; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: var(--sp-4); top: -100px;
z-index: var(--z-toast);
padding: var(--sp-2) var(--sp-3);
background: var(--dark-surface); color: var(--g-0);
font-family: var(--font-display); font-weight: 600; font-size: var(--fs-btn); text-transform: uppercase; letter-spacing: var(--ls-btn);
border-radius: var(--r-1);
}
.skip-link:focus { top: var(--sp-2); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-1); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.main { min-height: 50vh; padding: var(--sec-pad) 0 var(--sec-pad-lg); }
.main > .section:first-child { padding-top: 0; }
.main > .section:last-child { padding-bottom: 0; }
.error-page { padding: var(--sp-6) var(--gutter); }
.error-page__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.error-page__list { color: var(--err); }
.error-page__trace { padding: var(--sp-4); background: var(--g-100); border: var(--bw) solid var(--border); white-space: pre-wrap; font-size: var(--fs-small); }
/* css/layout.css */
.container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: var(--container); }
.container--narrow > * { max-width: var(--container-narrow); }
.container--full { max-width: none; }
.section { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
.section.section--surface-change { padding-top: var(--sec-pad-lg); padding-bottom: var(--sec-pad-lg); }
.section.section--tight { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.section.section--flush { padding-top: 0; }
.grid { display: grid; gap: var(--col-gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid > * { min-width: 0; grid-column: span 12; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
.grid--2 > *, .grid--3 > *, .grid--4 > * { grid-column: auto; }
@media (min-width: 480px) {
.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }
.col-3 { grid-column: span 3; }
.col-9 { grid-column: span 9; }
.col-5 { grid-column: span 5; }
.col-7 { grid-column: span 7; }
}
@media (min-width: 1024px) {
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stack > * + * { margin-top: var(--sp-4); }
.stack--sm > * + * { margin-top: var(--sp-2); }
.stack--lg > * + * { margin-top: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cluster--sm { gap: var(--sp-2); }
.cluster--end { justify-content: flex-end; }
.cluster--between { justify-content: space-between; }
.cluster--nowrap { flex-wrap: nowrap; }
.sidebar-layout { display: grid; gap: var(--col-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.sidebar-layout > * { min-width: 0; }
@media (min-width: 1024px) {
.sidebar-layout { grid-template-columns: var(--filters-w) minmax(0, 1fr); }
.sidebar-layout--right { grid-template-columns: minmax(0, 1fr) var(--summary-w); }
.sidebar-layout--account { grid-template-columns: 220px minmax(0, 1fr); }
}
.with-summary { display: grid; gap: var(--col-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.with-summary > * { min-width: 0; }
.with-summary__aside { position: static; }
@media (min-width: 1024px) {
.with-summary { grid-template-columns: minmax(0, 1fr) var(--summary-w); }
.with-summary__aside { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
}
.panel { border: var(--bw) solid var(--border); border-radius: var(--r-2); background: var(--surface); padding: var(--sp-4); }
.panel--strong { border-color: var(--border-strong); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: var(--bw) solid var(--hairline); }
.panel__head .label, .panel__head .eyebrow { margin: 0; }
@media (min-width: 768px) {
.panel { padding: var(--sp-6); }
.panel__head { margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-6); padding: var(--sp-3) var(--sp-6); }
}
.ratio { position: relative; display: block; overflow: hidden; background: var(--g-100); }
.ratio > img, .ratio > video, .ratio > picture, .ratio > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ratio--4x3 { aspect-ratio: 4 / 3; }
.ratio--3x2 { aspect-ratio: 3 / 2; }
.ratio--1x1 { aspect-ratio: 1 / 1; }
.ratio--16x9 { aspect-ratio: 16 / 9; }
.ratio--cover > img, .ratio--cover > video { object-fit: cover; }
.pgrid-cards { display: grid; gap: var(--col-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid-cards > * { min-width: 0; }
@media (min-width: 768px) { .pgrid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .pgrid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pgrid-cards--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .pgrid-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rule { border: 0; border-top: var(--rule); margin: var(--sp-6) 0; }
.hairline { border: 0; border-top: var(--bw) solid var(--hairline); margin: var(--sp-4) 0; }
.band { padding: 0; }
.band.surface--dark p, .band.surface--dark li { color: var(--text-2); }
.band.surface--dark h2, .band.surface--dark h3, .band.surface--dark strong { color: var(--text); }
.band-x { width: 100%; }
.band-x--soft { background: var(--g-100); }
.band-x--ink { background: var(--dark-surface); color: var(--g-0); }
.band-x--edge { padding-left: var(--edge); padding-right: var(--edge); }
.stickybar {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: var(--z-sheet);
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
min-height: 64px;
padding: var(--sp-2) var(--gutter);
padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
background: var(--surface);
border-top: var(--bw) solid var(--border-strong);
box-shadow: var(--shadow-2);
}
.stickybar__total { display: flex; flex-direction: column; line-height: 1.1; }
.stickybar__total .price__vat { display: block; }
body.has-stickybar { padding-bottom: var(--fixed-bars, 72px); }
@media (min-width: 1024px) {
.stickybar--mobile { display: none; }
body.has-stickybar { padding-bottom: var(--fixed-bars, 0px); }
}
.pgrid-cards--few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .pgrid-cards--few { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .pgrid-cards--few { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* css/utilities.css */
.u-m-0 { margin: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mt-1 { margin-top: var(--sp-1) !important; }
.u-mt-2 { margin-top: var(--sp-2) !important; }
.u-mt-3 { margin-top: var(--sp-3) !important; }
.u-mt-4 { margin-top: var(--sp-4) !important; }
.u-mt-6 { margin-top: var(--sp-6) !important; }
.u-mt-8 { margin-top: var(--sp-8) !important; }
.u-mt-12 { margin-top: var(--sp-12) !important; }
.u-mb-1 { margin-bottom: var(--sp-1) !important; }
.u-mb-2 { margin-bottom: var(--sp-2) !important; }
.u-mb-3 { margin-bottom: var(--sp-3) !important; }
.u-mb-4 { margin-bottom: var(--sp-4) !important; }
.u-mb-6 { margin-bottom: var(--sp-6) !important; }
.u-mb-8 { margin-bottom: var(--sp-8) !important; }
.u-p-0 { padding: 0 !important; }
.u-p-2 { padding: var(--sp-2) !important; }
.u-p-4 { padding: var(--sp-4) !important; }
.u-p-6 { padding: var(--sp-6) !important; }
.u-gap-2 { gap: var(--sp-2) !important; }
.u-gap-4 { gap: var(--sp-4) !important; }
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-text-2 { color: var(--text-2) !important; }
.u-text-3 { color: var(--text-3) !important; }
.u-ink { color: var(--text) !important; }
.u-ok { color: var(--ok) !important; }
.u-warn { color: var(--warn) !important; }
.u-err { color: var(--err) !important; }
.u-info { color: var(--info) !important; }
.u-small { font-size: var(--fs-small) !important; line-height: 1.4 !important; }
.u-body-sm { font-size: var(--fs-body-sm) !important; }
.u-num { font-variant-numeric: tabular-nums lining-nums !important; }
.u-bold { font-weight: 600 !important; }
.u-upper { text-transform: uppercase !important; letter-spacing: var(--ls-label) !important; }
.u-nowrap { white-space: nowrap !important; }
.u-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.u-clamp-2 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2; overflow: hidden !important; }
.u-measure { max-width: 68ch !important; }
.u-block { display: block !important; }
.u-inline { display: inline-block !important; }
.u-flex { display: flex !important; }
.u-flex-1 { flex: 1 1 auto !important; }
.u-items-center { align-items: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-full { width: 100% !important; }
.u-relative { position: relative !important; }
.u-border { border: var(--bw) solid var(--border) !important; }
.u-radius { border-radius: var(--r-2) !important; }
.u-bg-alt { background: var(--surface-alt) !important; }
.u-list-plain { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.u-scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.u-hide { display: none !important; }
@media (max-width: 767px) { .u-hide-mobile { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .u-hide-tablet { display: none !important; } }
@media (min-width: 1024px) { .u-hide-desktop { display: none !important; } }
@media (max-width: 1023px) { .u-only-desktop { display: none !important; } }
@media (min-width: 768px) { .u-only-mobile { display: none !important; } }
@media print { .u-no-print { display: none !important; } }
/* css/components/button.css */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
padding: 0 12px;
margin: 0;
border: var(--bw) solid var(--border-strong);
border-radius: var(--r-1);
background: var(--surface);
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-btn);
line-height: 1;
letter-spacing: var(--ls-btn);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
-webkit-appearance: none;
appearance: none;
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn .icon { width: 16px; height: 16px; }
.btn:hover { background: var(--g-100); color: var(--text); text-decoration: none; }
.btn:active { background: var(--g-200); }
.btn:focus-visible { box-shadow: var(--focus); border-radius: var(--r-1); }
.btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn--sm { height: 28px; padding: 0 10px; font-size: 0.75rem; }
.btn--sm .icon { width: 14px; height: 14px; }
.btn--lg { height: 40px; padding: 0 18px; font-size: 0.875rem; }
.btn--icon { width: 32px; padding: 0; }
.btn--icon.btn--sm { width: 28px; }
.btn--icon.btn--lg { width: 40px; }
.btn--tap { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.btn--tap:hover { background: var(--g-100); }
.btn--tap .icon { width: 20px; height: 20px; }
.btn--primary { background: var(--red); border-color: var(--red); color: var(--g-0); }
.btn--primary:hover { background: var(--red-hover); border-color: var(--red-hover); color: var(--g-0); }
.btn--primary:active { background: var(--red-active); border-color: var(--red-active); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--g-0); }
.btn--dark:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--g-0); }
.btn--dark:active { background: var(--ink); }
.btn--outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--outline:hover { background: var(--g-100); }
.surface--dark .btn--outline:hover { background: var(--surface-alt); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn--ghost:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn--danger { background: transparent; border-color: var(--err); color: var(--err); }
.btn--danger:hover { background: var(--err-bg); color: var(--err); }
.btn--danger:active { background: var(--err); color: var(--g-0); }
.btn--link {
height: auto;
padding: 0;
border: 0;
background: transparent;
color: var(--link);
font-family: var(--font-text);
font-weight: 400;
font-size: var(--fs-body-sm);
letter-spacing: 0;
text-transform: none;
text-decoration: underline;
text-underline-offset: 2px;
}
.btn--link:hover { background: transparent; color: var(--link-hover); }
.surface--dark .btn { background: transparent; border-color: var(--border-strong); color: var(--text); }
.surface--dark .btn:hover { background: var(--surface-alt); color: var(--text); }
.surface--dark .btn--primary { background: var(--red); border-color: var(--red); color: var(--g-0); }
.surface--dark .btn--primary:hover { background: var(--red-hover); border-color: var(--red-hover); }
.surface--dark .btn--dark { background: var(--g-0); border-color: var(--g-0); color: var(--ink); }
.surface--dark .btn--dark:hover { background: var(--g-200); border-color: var(--g-200); color: var(--ink); }
.btn.is-loading, .btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.btn.is-loading::after, .btn[aria-busy="true"]::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 14px; height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid currentColor;
border-color: rgba(255, 255, 255, .35);
border-top-color: var(--g-0);
border-radius: 50%;
animation: btn-spin 0.7s linear infinite;
}
.btn:not(.btn--primary):not(.btn--dark).is-loading::after, .btn:not(.btn--primary):not(.btn--dark)[aria-busy="true"]::after {
border-color: var(--g-300);
border-top-color: var(--ink);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.btn-group--end { justify-content: flex-end; }
.btn--block { width: 100%; }
@media (min-width: 1024px) { .btn--block { width: auto; } }
.seg { display: inline-flex; border: var(--bw) solid var(--border-strong); border-radius: var(--r-1); overflow: hidden; }
.seg__btn {
height: 26px;
padding: 0 10px;
border: 0;
border-right: var(--bw) solid var(--border-strong);
background: var(--surface);
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: var(--ls-btn);
text-transform: uppercase;
line-height: 1;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg__btn:last-child { border-right: 0; }
.seg__btn:hover { background: var(--g-100); }
.seg__btn[aria-pressed="true"], .seg__btn[aria-checked="true"], .seg__btn.is-active { background: var(--ink); color: var(--g-0); }
.seg__btn:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-color); border-radius: 0; }
.seg--sm .seg__btn { height: 22px; padding: 0 8px; font-size: 0.6875rem; }
/* css/components/badge.css */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
height: 20px;
padding: 0 6px;
border: var(--bw) solid transparent;
border-radius: var(--r-1);
background: var(--ink);
color: var(--g-0);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.6875rem;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
}
.badge .icon { width: 12px; height: 12px; }
.badge--best_seller {
height: 22px;
padding: 0 9px 0 0;
gap: 7px;
background: var(--ink);
border-color: var(--ink);
color: var(--g-0);
font-weight: 700;
}
.badge--best_seller::before { content: ""; width: 3px; align-self: stretch; margin: 3px 0; background: var(--red); }
.badge--novita { background: var(--red); border-color: var(--red); color: var(--g-0); }
.badge--promo { background: var(--red); border-color: var(--red); color: var(--g-0); }
.badge--eco { background: transparent; border-color: var(--ok); color: var(--ok); }
.badge--express { background: var(--express); border-color: var(--express); color: var(--ink); }
.badge--inhouse { background: rgba(244, 244, 243, .94); border-color: var(--g-300); color: var(--ink); }
.badge--partner { background: transparent; border-color: var(--text-2); color: var(--text-2); }
.badge--neutral { background: transparent; border-color: var(--border); color: var(--text-2); }
.badge-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding: 0 8px;
border-radius: var(--r-pill);
background: var(--g-100);
color: var(--text);
font-family: var(--font-text);
font-weight: 500;
font-size: var(--fs-small);
line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--err { background: var(--err-bg); color: var(--err); }
.pill--info { background: var(--info-bg); color: var(--info); }
.pill--neutral { background: var(--g-100); color: var(--text-2); }
.pill--ink { background: var(--ink); color: var(--g-0); }
.pill--plain::before { display: none; }
.count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--r-pill);
background: var(--red);
color: var(--g-0);
font-family: var(--font-text);
font-weight: 700;
font-size: 0.6875rem;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.count--ink { background: var(--ink); }
.count--muted { background: var(--g-200); color: var(--text); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g-400); vertical-align: middle; }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--err { background: var(--err); }
.dot--info { background: var(--info); }
/* css/components/header.css */
.hdr {
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--g-0);
--logo-h: clamp(36px, calc((100vw - 144px) / 5.405), 48px);
border-bottom: var(--rule-section);
}
.hdr__util { display: none; background: var(--g-100); border-bottom: var(--bw) solid var(--g-300); }
.hdr__util-row { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--hdr-util-h); }
.hdr__social { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.hdr__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--r-1);
color: var(--text-2);
text-decoration: none;
transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.hdr__social a:hover { color: var(--text); background: var(--g-200); }
.hdr__social .icon { width: 15px; height: 15px; }
.hdr__util-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-2);
text-decoration: none;
font-family: var(--font-text);
font-size: var(--fs-small);
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
}
.hdr__util-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.hdr__util-link .icon { width: 14px; height: 14px; color: var(--text-3); }
.hdr__svc {
display: flex;
align-items: center;
gap: var(--sp-5);
list-style: none;
margin: 0 0 0 auto;
padding: 0;
}
.hdr__svc a {
color: var(--text-2);
text-decoration: none;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
white-space: nowrap;
}
.hdr__svc a:hover { color: var(--text); }
.hdr__svc a[aria-current="page"] { color: var(--text); }
.hdr__util-cta { flex: none; height: 32px; padding: 0 12px; font-size: var(--fs-btn); }
.hdr__bar {
position: relative;
z-index: 1;
background: var(--g-0);
}
.hdr__row {
display: flex;
align-items: center;
gap: var(--sp-2);
min-height: var(--header-h);
}
.hdr__burger {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: var(--r-1);
background: transparent;
color: var(--text);
cursor: pointer;
}
.hdr__burger:hover { background: var(--g-100); }
.hdr__logo {
display: inline-flex; align-items: center; align-self: center;
flex: none; min-width: 0;
height: var(--logo-h); min-height: 44px;
padding: 0;
text-decoration: none;
}
.hdr__logo img { height: var(--logo-h); width: auto; max-width: 100%; }
.hdr__search { flex: 1 1 auto; min-width: 0; display: none; }
.hdr__field { position: relative; width: 100%; max-width: 420px; margin: 0 auto; display: block; }
.hdr__field .input { height: 44px; padding: 0 48px 0 40px; background: var(--g-100); border-color: var(--g-300); font-size: 16px; }
.hdr__field .input:focus { background: var(--g-0); border-color: var(--ink); }
.hdr__search-icon { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--text-3); pointer-events: none; }
.hdr__search-go {
position: absolute;
right: 0;
top: 0;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0 var(--r-1) var(--r-1) 0;
cursor: pointer;
}
.hdr__search-go .icon { width: 20px; height: 20px; }
.hdr__search-go:hover { background: var(--g-200); color: var(--text); }
.hdr__actions { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; flex: none; }
.hdr__action {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 44px;
height: 44px;
padding: 0 var(--sp-2);
border-radius: var(--r-1);
color: var(--text);
text-decoration: none;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
transition: background-color var(--t-fast) var(--ease);
}
.hdr__action:hover { background: var(--g-100); color: var(--text); }
.hdr__action .icon { width: 20px; height: 20px; }
.hdr__action-text { display: none; }
.hdr__action--user { display: none; }
.hdr__logout { display: none; margin: 0; }
.hdr__action--exit { background: none; border: 0; cursor: pointer; font-family: inherit; }
.drawer__logout { margin: 0; }
.drawer__logout .btn { width: 100%; }
.hdr__count { position: absolute; top: 4px; right: 2px; }
.hdr__searchbar { padding: var(--sp-2) 0; border-bottom: var(--bw) solid var(--g-300); background: var(--g-100); }
.hdr__searchbar .input { font-size: 16px; }
.hdr__searchbar .hdr__field { max-width: none; }
div.hdr__searchbar .input { height: 44px; background: var(--g-0); }
div.hdr__searchbar .hdr__search-go { top: 0; right: 0; }
.hdr__nav {
display: none;
position: relative;
background: var(--g-0);
border-bottom: 0;
}
.hdr__nav-row { display: flex; align-items: stretch; min-height: var(--hdr-nav-h); }
.hdr__list {
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: var(--sp-6);
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 auto;
min-width: 0;
}
.hdr__list > li { display: flex; }
.hdr__link {
display: inline-flex;
align-items: center;
position: relative;
min-height: var(--hdr-nav-h);
border-bottom: 0;
color: var(--text);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.hdr__link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: transparent;
transition: background-color var(--t-fast) var(--ease);
}
.hdr__link:hover { color: var(--text); }
.hdr__link:hover::after { background: var(--g-300); }
.hdr__link[aria-current="page"]::after, .hdr__item.is-open > .hdr__link::after { background: var(--red-bar); }
.hdr__tag {
display: inline-flex;
align-items: center;
height: 18px;
margin-left: 6px;
padding: 0 5px;
border-radius: var(--r-1);
background: var(--red);
color: var(--g-0);
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
}
.hdr__hl-short { display: none; }
.hdr__scrim { position: fixed; inset: 0; z-index: var(--z-sheet); background: rgba(29, 29, 27, .6); opacity: 0; transition: opacity var(--t-base) var(--ease); }
.hdr__scrim[hidden] { display: none; }
.hdr__scrim.is-open { opacity: 1; }
.drawer {
position: fixed;
top: 0; left: 0; bottom: 0;
z-index: calc(var(--z-sheet) + 1);
width: 88%;
max-width: 400px;
display: flex;
flex-direction: column;
background: var(--g-0);
box-shadow: var(--shadow-3);
transform: translateX(-100%);
transition: transform var(--t-slow) var(--ease);
overflow: hidden;
overscroll-behavior: contain;
}
.drawer[hidden] { display: none; }
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-bottom: var(--bw) solid var(--hairline); min-height: 56px; flex: none; }
.drawer__head img { height: 36px; width: auto; }
.drawer__close {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: var(--r-1);
background: transparent;
color: var(--text);
cursor: pointer;
}
.drawer__close:hover { background: var(--g-100); }
.drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--sp-4); }
.drawer__label {
margin: var(--sp-4) var(--sp-4) var(--sp-1);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-2);
}
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list .drawer__list { padding-left: var(--sp-4); background: var(--g-50); }
.drawer__row { display: flex; align-items: stretch; border-bottom: var(--bw) solid var(--hairline); }
.drawer__link {
flex: 1 1 auto;
display: flex;
align-items: center;
min-height: 56px;
padding: var(--sp-2) var(--sp-4);
color: var(--text);
text-decoration: none;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label);
letter-spacing: 0.05em;
line-height: 1.2;
text-transform: uppercase;
}
.drawer__link:active { background: var(--g-100); }
.drawer__toggle {
flex: none;
width: 48px;
min-height: 56px;
border: 0;
background: transparent;
color: var(--text-2);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.drawer__toggle .icon { transition: transform var(--t-fast) var(--ease); }
.drawer__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.drawer__sub[hidden] { display: none; }
.drawer__sub .drawer__link { min-height: 44px; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-body-sm); letter-spacing: 0; text-transform: none; }
.drawer__sub .drawer__sub .drawer__link { color: var(--text-2); font-size: var(--fs-small); }
.drawer__link--svc { font-family: var(--font-text); font-weight: 600; font-size: var(--fs-body-sm); letter-spacing: 0; text-transform: none; }
.drawer__contacts { list-style: none; margin: var(--sp-4) 0 0; padding: 0 var(--sp-4); display: grid; gap: var(--sp-2); }
.drawer__contacts a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--text-2); text-decoration: none; font-size: var(--fs-body-sm); }
.drawer__contacts a:hover { color: var(--text); }
.drawer__contacts .icon { width: 16px; height: 16px; color: var(--text-3); }
.drawer__foot { flex: none; padding: var(--sp-4); border-top: var(--bw) solid var(--hairline); display: grid; gap: var(--sp-2); background: var(--g-0); }
.drawer__foot .btn { width: 100%; min-height: 40px; }
.hdr.is-stuck .hdr__bar { box-shadow: var(--shadow-1); }
.hdr.is-stuck .hdr__nav { box-shadow: var(--shadow-1); }
@media (max-width: 1023px) {
.hdr__logo { margin-left: auto; margin-right: auto; }
}
@media (max-width: 359px) {
.hdr__row { padding-left: 12px; padding-right: 12px; gap: var(--sp-1); }
}
@media (min-width: 1024px) {
.hdr { --logo-h: 56px; }
.hdr__util { display: block; }
.hdr__burger { display: none; }
.hdr__search { display: block; }
.hdr__searchbar { display: none; }
.hdr__nav { display: block; }
.hdr__row {
display: grid;
grid-template-columns: 1fr minmax(0, 300px) 1fr;
align-items: center;
gap: var(--sp-4);
min-height: var(--header-h);
}
.hdr__row > * { min-width: 0; }
.hdr__search { display: block; width: 100%; }
.hdr__field { max-width: none; margin: 0; }
.hdr__actions { justify-self: end; margin-left: 0; }
.hdr__action { height: 40px; min-width: 0; }
.hdr__action--user { display: inline-flex; }
.hdr__logout { display: inline-flex; }
.hdr__action-text { display: inline; }
.hdr__count { position: static; top: auto; right: auto; margin-left: 4px; }
.drawer, .hdr__scrim { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
.hdr__list { gap: var(--sp-4); }
}
@media (min-width: 1024px) and (max-width: 1179px) {
.hdr__list:has(.hdr__link--hl) { gap: var(--sp-3); }
.hdr__list:has(.hdr__link--hl) .hdr__link { letter-spacing: 0.08em; }
.hdr__link--hl .hdr__hl-long { display: none; }
.hdr__link--hl .hdr__hl-short { display: inline; }
}
@media (min-width: 1280px) {
.hdr { --logo-h: 64px; }
.hdr__row { grid-template-columns: 1fr minmax(0, 420px) 1fr; }
}
.search-results {
position: absolute;
left: 0; right: 0; top: calc(100% + 4px);
z-index: var(--z-menu);
max-height: 420px;
overflow: auto;
padding: var(--sp-2);
background: var(--g-0);
border: var(--bw) solid var(--border);
border-top: var(--bw-2) solid var(--ink);
border-radius: var(--r-2);
box-shadow: var(--shadow-2);
text-align: left;
}
.search-results[hidden] { display: none; }
.search-results__label { margin: var(--sp-2) 0 4px 8px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.search-results__list { list-style: none; margin: 0; padding: 0; }
.search-results__cat { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-1); color: var(--text); text-decoration: none; font-size: var(--fs-body-sm); }
.search-results__cat:hover { background: var(--g-100); color: var(--text); }
.search-results__count { margin-left: auto; color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums lining-nums; }
.search-results__all { display: block; padding: 8px; margin-top: 4px; border-top: var(--bw) solid var(--hairline); font-size: var(--fs-body-sm); text-align: center; }
.search-results__empty { margin: 0; padding: var(--sp-3); font-size: var(--fs-body-sm); color: var(--text-2); }
@media (min-width: 1024px) {
.hdr { top: calc((var(--hdr-util-h) + var(--bw) + var(--header-h)) * -1); }
}
.hdr.is-stuck { box-shadow: var(--shadow-1); }
.hdr.is-stuck .hdr__bar, .hdr.is-stuck .hdr__nav { box-shadow: none; }
.drawer__foot-row { display: flex; gap: var(--sp-2); }
.drawer__foot-row .btn { flex: 1 1 0; min-width: 0; }
.drawer__close { margin-right: -6px; }
@media (pointer: coarse) {
.hdr__search-go::after { content: ""; position: absolute; inset: -6px; }
.hdr__util-link, .drawer__contacts a { min-height: 44px; }
}
.drawer__row > .drawer__link:only-child { padding-right: 48px; }
@media (max-width: 1023px) {
.hdr .btn, .hdr .btn--sm, .drawer .btn, .drawer .btn--sm { min-height: 44px; }
}
/* css/components/search-voice.css */
.voice {
position: absolute;
top: 50%;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: -22px 0 0;
padding: 0;
border: 0;
border-radius: var(--r-1);
background: transparent;
color: var(--text);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.voice::before,
.voice::after {
content: "";
position: absolute;
inset: 4px;
border-radius: var(--r-1);
pointer-events: none;
}
.voice::before { background: transparent; transition: background-color var(--t-fast) var(--ease); }
.voice::after { border: var(--bw-2) solid var(--ink); opacity: 0; }
.voice .icon { position: relative; width: 20px; height: 20px; }
.voice:focus-visible { box-shadow: none; }
.voice:focus-visible::before { box-shadow: var(--focus); }
.voice[aria-pressed="true"] { color: var(--g-0); }
.voice[aria-pressed="true"]::before { background: var(--ink); }
.voice[aria-pressed="true"]::after { animation: voice-pulse 1.6s var(--ease) infinite; }
@keyframes voice-pulse {
from { opacity: 0.5; transform: scale(1); }
to { opacity: 0; transform: scale(1.22); }
}
@media (hover: hover) {
.voice:hover::before { background: var(--g-200); }
.voice[aria-pressed="true"]:hover::before { background: var(--ink-soft); }
}
.hdr__field .voice { right: 44px; z-index: 1; }
.hdr__field.has-voice .input { padding-right: 92px; }
.voice-field { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.voice-field.has-voice .input { padding-right: 48px; }
@media (min-width: 1024px) and (pointer: fine) {
.voice { width: 32px; height: 32px; margin-top: -16px; }
.voice::before,
.voice::after { inset: 0; }
.hdr__field .voice { right: 46px; }
.hdr__field.has-voice .input { padding-right: 84px; }
.voice-field .voice { right: 4px; }
.voice-field.has-voice .input { padding-right: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.voice::before { transition: none; }
.voice[aria-pressed="true"]::after { animation: none; opacity: 0; }
}
@media print {
.voice { display: none; }
}
/* css/components/mega.css */
.hdr__item { position: static; }
.mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: var(--z-menu);
max-height: min(70vh, 520px);
overflow: hidden auto;
overscroll-behavior: contain;
background: var(--g-0);
border-top: var(--rule);
border-bottom: var(--bw) solid var(--border);
box-shadow: var(--shadow-2);
}
.mega[hidden] { display: none; }
.mega__inner {
display: grid;
gap: var(--sp-6);
padding-top: var(--sp-6);
padding-bottom: var(--sp-6);
grid-template-columns: repeat(3, minmax(0, 1fr)) 260px;
align-items: start;
}
.mega__inner--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) 260px; }
.mega__inner--c1 { grid-template-columns: minmax(0, 1fr) 260px; }
.mega__inner--nofeat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__inner--c2.mega__inner--nofeat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__inner--c1.mega__inner--nofeat { grid-template-columns: minmax(0, 1fr); }
.mega__inner--c4.mega__inner--nofeat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega.mega--dense { max-height: min(84vh, 680px); }
.mega__foot { grid-column: 1 / -1; padding-top: var(--sp-3); border-top: var(--bw) solid var(--hairline); }
.mega__col { min-width: 0; }
.mega__group + .mega__group { margin-top: var(--sp-5); }
.mega__l2 {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-2);
margin: 0 0 var(--sp-2);
padding-bottom: 4px;
border-bottom: var(--bw) solid var(--hairline);
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
text-decoration: none;
overflow-wrap: normal;
}
.mega__l2:hover { color: var(--text); border-bottom-color: var(--ink); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__l3 {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-2);
padding: 3px 0;
color: var(--text);
font-family: var(--font-text);
font-size: var(--fs-body-sm);
text-decoration: none;
}
.mega__l3:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.mega__count { flex: none; color: var(--text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.mega__all {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--sp-3);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text);
text-decoration: none;
}
.mega__all:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.mega__all .icon { width: 14px; height: 14px; color: var(--red-bar); }
.mega__feat { min-width: 0; border-left: var(--bw) solid var(--hairline); padding-left: var(--sp-6); }
.mega__feat .mega__all { margin-top: var(--sp-2); }
.mega__card { display: block; text-decoration: none; color: var(--text); border: var(--bw) solid var(--border); border-radius: var(--r-2); overflow: hidden; }
.mega__card:hover { border-color: var(--border-strong); color: var(--text); }
.mega__card:hover .mega__card-name { text-decoration: underline; text-underline-offset: 2px; }
.mega__card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--g-100); }
.mega__card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
.mega__card-body { display: block; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.mega__card-name { display: block; font-size: var(--fs-body-sm); font-weight: 600; line-height: 1.3; }
.mega__card-meta { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--text-2); }
@media (max-width: 1023px) {
.mega { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
.mega__inner { grid-template-columns: repeat(3, minmax(0, 1fr)) 210px; gap: var(--sp-5); }
.mega__inner--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) 210px; }
.mega__inner--c1 { grid-template-columns: minmax(0, 1fr) 210px; }
.mega__inner--nofeat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__inner--c2.mega__inner--nofeat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__inner--c1.mega__inner--nofeat { grid-template-columns: minmax(0, 1fr); }
.mega__feat { padding-left: var(--sp-5); }
}
/* css/components/footer.css */
.ftr { margin-top: 0; padding: var(--sp-10) 0 var(--sp-6); border-top: 3px solid var(--red-bar); }
.ftr__grid { display: grid; align-items: start; gap: var(--sp-8) var(--sp-6); }
.ftr__brand { max-width: 380px; }
.ftr__logo {
display: inline-block;
margin: 0 0 var(--sp-5);
padding: 0;
line-height: 0;
border-radius: var(--r-1);
}
.ftr__logo img { display: block; height: 40px; width: auto; }
.ftr__logo:hover { opacity: 0.85; }
.ftr__address { font-style: normal; color: var(--text-2); font-size: var(--fs-body-sm); line-height: 1.7; }
.ftr__address strong { color: var(--text); font-weight: 600; }
.ftr__address a { color: var(--link); text-decoration: none; }
.ftr__address a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
.ftr__rating { display: flex; align-items: center; gap: 8px; margin: var(--sp-4) 0 0; font-size: var(--fs-body-sm); color: var(--text-2); }
.ftr__rating strong { color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.ftr__rating .icon { color: var(--text); }
.ftr__social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.ftr__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: var(--bw) solid var(--border);
border-radius: var(--r-2);
color: var(--text-2);
text-decoration: none;
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ftr__social a:hover { color: var(--text); border-color: var(--border-strong); }
.ftr__social .icon { width: 20px; height: 20px; }
.ftr__col-h {
margin: 0;
font: inherit;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-label);
line-height: 1.2;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text);
}
.ftr__col { border-top: var(--bw) solid var(--border); padding-top: var(--sp-2); }
.ftr__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
width: 100%;
min-height: 44px;
margin: 0;
padding: var(--sp-2) 0;
border: 0;
background: transparent;
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
text-align: left;
cursor: pointer;
}
.ftr__title .icon { color: var(--text-2); transition: transform var(--t-fast) var(--ease); }
.ftr__title[aria-expanded="true"] .icon { transform: rotate(180deg); }
.ftr__links { list-style: none; margin: 0; padding: 0 0 var(--sp-3); display: grid; gap: 2px; font-size: var(--fs-body-sm); }
.ftr__links a { display: inline-block; padding: 7px 0; color: var(--link); text-decoration: none; }
.ftr__links a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
.ftr__legal { margin-top: var(--sp-8); color: var(--text-2); font-size: var(--fs-small); line-height: 1.6; }
.ftr__legal-row { padding-top: var(--sp-5); border-top: var(--bw) solid var(--border); }
.ftr__legal-row { display: grid; gap: var(--sp-3); }
.ftr__logo { margin-top: -4px; }
.ftr__legal-text { max-width: none; margin: 0; }
.ftr__legal a { color: var(--text-2); text-decoration: none; }
.ftr__legal a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.ftr__legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-5); list-style: none; margin: 0; padding: 0; }
.ftr__legal-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
@media (pointer: coarse) {
.ftr__legal-text a { position: relative; }
.ftr__legal-text a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}
.ftr__pay {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
margin: 0 0 var(--sp-5);
padding: 0;
border-top: 0;
list-style: none;
color: var(--g-400);
}
.ftr__pay li {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
border: var(--bw) solid var(--border);
border-radius: var(--r-1);
font-size: var(--fs-small);
white-space: nowrap;
}
.ftr__pay .icon { color: var(--g-500); }
.ftr__pay .ftr__pay-label {
height: auto;
padding: 0 var(--sp-2) 0 0;
border: 0;
font-family: var(--font-display);
font-weight: 600;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-3);
}
@media (max-width: 1023px) {
.ftr__col:has(.ftr__title[aria-expanded="false"]) .ftr__links { display: none; }
.ftr__links a { display: flex; align-items: center; min-height: 44px; padding: 0; }
.ftr__logo { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (min-width: 768px) {
.ftr__logo img { height: 44px; }
}
@media (min-width: 1024px) {
.ftr { padding-top: var(--sp-12); }
.ftr__grid { grid-template-columns: minmax(260px, 1.15fr) 1fr 1fr 1fr; gap: var(--sp-10) var(--sp-8); }
.ftr__brand { max-width: none; }
.ftr__logo { margin-bottom: var(--sp-6); }
.ftr__logo img { height: 48px; }
.ftr__col { border-top: 0; padding-top: 0; }
.ftr__col-h { padding-bottom: var(--sp-2); border-bottom: var(--rule-section); }
.ftr__title { min-height: 0; cursor: default; padding: 0; margin-bottom: var(--sp-3); }
.ftr__title .icon { display: none; }
.ftr__links { padding-bottom: 0; gap: 0; }
.ftr__links a { padding: 5px 0; }
.ftr__social a { width: 40px; height: 40px; }
.ftr__legal-row { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-6); }
.ftr__legal-links { justify-content: flex-end; }
.ftr__legal-links a { min-height: 0; }
.ftr__pay { justify-content: flex-start; }
}
@media (min-width: 1280px) {
.ftr__grid { grid-template-columns: minmax(300px, 1.4fr) 1fr 1fr 1fr; }
}
/* css/components/placeholder.css */
.ph {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-3);
background: var(--surface-alt);
color: var(--text-2);
text-align: center;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--hairline);
}
.ph::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(135deg, rgba(29, 29, 27, .035) 0 1px, transparent 1px 9px);
pointer-events: none;
}
.ph > * { position: relative; }
.ph__icon {
width: 32px;
height: 32px;
color: var(--g-400);
flex: none;
}
.ph__label {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
max-width: 100%;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
line-height: 1.2;
text-transform: uppercase;
overflow-wrap: normal;
color: #6E6E6C;
}
.ph__bar {
width: 28px;
height: 2px;
flex: none;
background: var(--red-bar);
}
.ph__note {
font-family: var(--font-text);
font-size: var(--fs-micro);
letter-spacing: 0;
text-transform: none;
color: #6E6E6C;
}
.ph--card { gap: 6px; }
.ph--card .ph__icon { width: 24px; height: 24px; }
.ph--card .ph__label { font-size: var(--fs-micro); }
.ph--wide .ph__icon { width: 40px; height: 40px; }
.ph--wide .ph__label { font-size: var(--fs-label); }
.pcard--row .ph__label, .pcard--row .ph__note, .pcard--row .ph__bar,
.pcard--compact .ph__label, .pcard--compact .ph__note { display: none; }
.pcard--row .ph { padding: 0; }
.pcard--row .ph__icon { width: 18px; height: 18px; }
.pcard--compact .ph__icon { width: 22px; height: 22px; }
.ph--cover {
align-items: flex-start;
justify-content: flex-end;
gap: var(--sp-3);
padding: var(--sp-6);
background: var(--dark-surface);
box-shadow: none;
text-align: left;
}
.ph--cover::before {
background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 10px);
}
.ph--cover .ph__note { order: -1; margin-bottom: auto; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--g-400); }
.ph--cover .ph__bar { width: 32px; height: 3px; }
.ph--cover .ph__label {
-webkit-line-clamp: 4;
line-clamp: 4;
font-size: var(--fs-h3);
line-height: 1.15;
letter-spacing: 0;
color: var(--g-0);
}
:root {
--ph-glyph-image: url('data:image/svg+xml;utf8,');
--ph-glyph-shirt: url('data:image/svg+xml;utf8,');
--ph-glyph-gift: url('data:image/svg+xml;utf8,');
}
.home-tile__media:not(:has(img)) {
background: var(--surface-alt);
background-image: repeating-linear-gradient(135deg, rgba(29, 29, 27, .035) 0 1px, transparent 1px 9px);
box-shadow: inset 0 0 0 1px var(--hairline);
}
.home-tile__media:not(:has(img))::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 40px;
height: 40px;
transform: translate(-50%, -50%);
background-color: var(--g-400);
-webkit-mask: var(--ph-glyph, var(--ph-glyph-image)) center / contain no-repeat;
mask: var(--ph-glyph, var(--ph-glyph-image)) center / contain no-repeat;
}
.home-tile__media:not(:has(img))::before {
content: "";
position: absolute;
left: 50%;
bottom: 18%;
width: 28px;
height: 2px;
transform: translateX(-50%);
background: var(--red-bar);
}
.home-tile[href="/abbigliamento-personalizzato"] .home-tile__media { --ph-glyph: var(--ph-glyph-shirt); }
.home-tile[href="/gadget-personalizzati"] .home-tile__media { --ph-glyph: var(--ph-glyph-gift); }
.ask {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--sp-2);
min-height: 220px;
padding: var(--sp-6);
border-radius: var(--r-2);
background: var(--g-100);
}
.ask--full { grid-column: 1 / -1; min-height: 0; }
@media (min-width: 900px) {
.ask--full { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-10); }
.ask--full > * { grid-column: 1; }
.ask--full .ask__actions { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-content: flex-end; margin-top: 0; }
}
.ask--flat { min-height: 0; }
.ask .eyebrow { margin: 0; color: var(--text-2); }
.ask__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; text-transform: uppercase; }
.ask__text { margin: 0; max-width: 56ch; color: var(--text-2); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.ask__text a { color: var(--text); }
.ask__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.ask .chips { margin-top: var(--sp-3); }
@media (min-width: 768px) { .ask { padding: var(--sp-8); } }
@media (max-width: 1023px) { .ask .btn, .ask .chip { min-height: 44px; } }
/* css/components/pcard.css */
.pcard-grid { display: grid; gap: var(--col-gap); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 480px) { .pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pcard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .pcard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard-grid--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .pcard-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pcard-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcard {
--pcard-price: var(--fs-price-card);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border: var(--bw) solid var(--border);
border-radius: var(--r-2);
background: var(--surface);
color: var(--text);
text-decoration: none;
overflow: hidden;
transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.pcard:hover { box-shadow: inset 0 0 0 2px var(--ink); background: var(--g-100); color: var(--text); }
.pcard:hover .pcard__name { text-decoration: underline; text-underline-offset: 2px; }
.pcard:focus-visible { box-shadow: var(--focus); }
.pcard__media {
display: block;
position: relative;
margin: 0;
aspect-ratio: 1 / 1;
padding: 0;
overflow: hidden;
background: var(--g-0);
border: 0;
border-bottom: var(--bw-2) solid var(--border-strong);
}
.pcard__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform var(--t-fast) var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.02); }
.pcard__media img[data-fit="cover"] { object-fit: cover; }
.brand-badge {
position: absolute;
z-index: 2;
top: 5%;
right: 5%;
width: 13%;
min-width: 24px;
max-width: 48px;
aspect-ratio: 1 / 1;
background: center / contain no-repeat;
pointer-events: none;
}
.brand-badge--g { aspect-ratio: 179 / 180; background-image: url('/assets/brand/monogramma-g-179x180.png'); }
.brand-badge--jrc { background-image: url('/assets/brand/partner/jrc-logo-nero.svg'); }
.brand-mark {
position: absolute;
z-index: 2;
left: 5%;
bottom: 5%;
width: 32%;
min-width: 52px;
max-width: 118px;
aspect-ratio: 280 / 96;
background: left bottom / contain no-repeat;
pointer-events: none;
}
.brand-mark--handle { background-image: url('/assets/brand/partner/handle-logo-nero.png'); }
.brand-mark--handle.brand-mark--on-dark { background-image: url('/assets/brand/partner/handle-logo-bianco.png'); }
.pcard__badges {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0;
max-width: 100%;
}
.pcard__badges .badge { border-radius: 0; }
.pcard__badges .badge--eco { background: var(--ok-bg); border-color: var(--ok-bg); }
.pcard__body { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); flex: 1 1 auto; min-width: 0; }
.pcard:not(.pcard--row):not(.pcard--compact) .pcard__price { margin-top: auto; padding-top: var(--sp-2); }
.pcard__eyebrow { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--g-600); }
.pcard__name {
margin: 0;
font-family: var(--font-text);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.3;
text-transform: none;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
min-height: calc(2 * 1.3em);
}
.pcard__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pcard__chips:empty { display: none; }
.pcard:not(.pcard--row):not(.pcard--compact) .pcard__chips { margin-top: var(--sp-2); margin-bottom: var(--sp-2); }
.pcard__chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 7px;
background: var(--surface-alt); border: var(--bw) solid var(--border);
font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); white-space: nowrap;
}
.pcard__chip .icon { width: 13px; height: 13px; color: var(--text-2); }
.pcard__foot {
display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3);
margin-top: auto; padding-top: var(--sp-3); border-top: var(--bw) solid var(--hairline);
}
.pcard__foot { flex-wrap: wrap; row-gap: var(--sp-3); }
.pcard__colors {
container: pcolors / inline-size;
display: flex; align-items: center; gap: 4px;
min-height: 12px; margin-top: auto; margin-bottom: var(--sp-2);
overflow: hidden;
}
.pcard__colors + .pcard__foot { margin-top: 0; }
.pcard__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.2); }
.pcard__more { flex: none; margin-left: 2px; font-size: 0.6875rem; font-weight: 600; line-height: 1; color: var(--text-2); }
.pcard__dot--wide, .pcard__more--wide { display: none; }
@container pcolors (min-width: 180px) {
.pcard__dot--wide { display: block; }
.pcard__more--narrow { display: none; }
.pcard__more--wide { display: inline; }
}
.pcard__foot > .pcard__price { flex: 1 1 0%; min-width: min-content; }
.pcard__foot .pcard__go { margin-left: auto; }
.pcard__go {
flex: none;
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label-sm);
letter-spacing: var(--ls-btn); text-transform: uppercase;
padding: 6px 10px; border: var(--bw-2) solid var(--border-strong); color: var(--text);
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pcard:hover .pcard__go, .pcard:focus-visible .pcard__go { background: var(--border-strong); color: var(--surface); }
.pcard--compact .pcard__chips, .pcard--row .pcard__chips { min-height: 0; }
.pcard--compact .pcard__foot, .pcard--row .pcard__foot { border-top: 0; padding-top: 0; margin-top: 4px; }
.pcard__formats { display: block; min-height: 1.35em; font-size: var(--fs-small); color: var(--g-600); font-variant-numeric: tabular-nums lining-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 5px; margin-top: 2px; min-height: calc(var(--pcard-price) * 1.15); }
.pcard__from, .pcard__yours { font-size: var(--fs-small); color: var(--g-600); }
.pcard__amount {
font-family: var(--font-price);
font-weight: 800;
font-size: var(--pcard-price);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums lining-nums;
}
.pcard__vat { font-size: var(--fs-small); color: var(--g-600); }
.pcard__list { font-size: var(--fs-small); color: var(--text-3); }
.pcard__promo { font-weight: 700; color: var(--red-on); }
.pcard__quote { display: inline-flex; align-items: center; min-height: calc(var(--pcard-price) * 1.1); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink); }
.pcard__ship { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--fs-small); color: var(--g-600); font-variant-numeric: tabular-nums lining-nums; }
.pcard__ship .icon { width: 14px; height: 14px; color: var(--g-600); }
.pgrid-cards--few { container: pcards / inline-size; }
.pgrid-cards--few > .pcard:only-of-type .pcard__name { min-height: 0; }
@container pcards (min-width: 1144px) {
.pcard--wide { flex-direction: row; align-items: stretch; }
.pcard--wide .pcard__media { flex: 0 0 46%; align-self: stretch; aspect-ratio: auto; margin: 0; }
.pcard--wide .pcard__media img[data-fit] { object-fit: contain; }
.pcard--wide .pcard__body { flex: 1 1 auto; justify-content: center; gap: 6px; padding: var(--sp-6); }
.pcard--wide .pcard__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; -webkit-line-clamp: 3; line-clamp: 3; min-height: 0; }
.pcard--wide:not(.pcard--row):not(.pcard--compact) .pcard__price { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--bw) solid var(--g-300); }
.pcard--wide:not(.pcard--row):not(.pcard--compact) .pcard__foot .pcard__price { margin-top: 0; padding-top: 0; border-top: 0; }
}
.pcard--compact { flex-direction: row; align-items: stretch; }
.pcard--compact .pcard__media { flex: none; width: 96px; aspect-ratio: 1 / 1; margin: 0; padding: 0; border: 0; border-right: var(--bw) solid var(--g-300); background: var(--g-0); }
.pcard--compact .pcard__media img { inset: 0; width: 100%; height: 100%; padding: 6px; }
.pcard--compact .pcard__body { flex: 1 1 auto; padding: 10px 12px; }
.pcard--compact .pcard__badges { position: static; flex-direction: row; margin-bottom: 4px; }
.pcard--row { flex-direction: row; align-items: center; gap: 10px; border: 0; border-radius: 0; padding: 6px 8px; background: transparent; }
.pcard--row:hover { box-shadow: none; background: var(--g-100); }
.pcard--row .pcard__media { flex: none; width: 40px; height: 40px; aspect-ratio: 1 / 1; margin: 0; padding: 0; border: 0; border-radius: var(--r-1); background: var(--g-0); }
.pcard--row .pcard__media img { inset: 0; width: 100%; height: 100%; padding: 0; }
.pcard--row .pcard__body { padding: 0; gap: 0; background: transparent; }
.pcard--row .pcard__name, .pcard--compact .pcard__name { min-height: 0; }
.pcard--row .pcard__amount, .pcard--compact .pcard__amount { font-size: var(--fs-price-card); font-weight: 700; letter-spacing: 0; }
@media (max-width: 399px) {
.pcard__badges { max-width: 100%; }
.pcard__badges .badge {
max-width: 100%;
height: 18px;
padding: 0 5px;
font-size: 0.5625rem;
letter-spacing: 0.02em;
overflow: hidden;
text-overflow: ellipsis;
display: block;
line-height: 18px;
}
}
.pcard--row .pcard__media img:not([data-fit="cover"]), .pcard--compact .pcard__media img:not([data-fit="cover"]) { object-fit: contain; }
.pcard--row .pcard__formats, .pcard--compact .pcard__formats { min-height: 0; }
@media (max-width: 480px) {
.pcard__name {
-webkit-line-clamp: 4; line-clamp: 4; min-height: calc(2 * 1.3em);
-webkit-hyphens: auto; hyphens: auto;
-webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
hyphenate-limit-chars: 10 4 4;
overflow-wrap: anywhere;
}
}
/* css/components/tile.css */
.tile-grid { display: grid; gap: var(--col-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border: 0;
border-radius: var(--r-2);
background: var(--g-100);
color: var(--text);
text-decoration: none;
overflow: hidden;
transition: box-shadow var(--t-fast) var(--ease);
}
.tile:hover { box-shadow: inset 0 0 0 2px var(--ink); color: var(--text); }
.tile:focus-visible { box-shadow: var(--focus); }
.tile__media {
display: block;
position: relative;
flex: none;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--g-200);
}
.tile__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-base) var(--ease);
}
.tile:hover .tile__media img { transform: scale(1.03); }
.tile--contain .tile__media { background: var(--g-0); }
.tile--contain .tile__media img { object-fit: contain; }
.tile__bar {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-3);
background: var(--g-100);
}
.tile__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; }
.tile:hover .tile__bar::before { background: var(--red-bar); }
.tile__name {
display: block;
min-width: 0;
overflow-wrap: normal;
hyphens: none;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
line-height: 1.2;
display: flex;
align-items: flex-end;
min-height: calc(2 * 1.2em);
}
.tile__foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
.tile__meta { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font-size: var(--fs-body-sm); color: var(--g-600); font-variant-numeric: tabular-nums lining-nums; }
.tile__meta strong { color: var(--text); font-weight: 700; }
.tile__go {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: var(--bw) solid var(--g-300);
border-radius: var(--r-1);
color: var(--ink);
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tile__go .icon { width: 16px; height: 16px; }
.tile:hover .tile__go { border-color: var(--ink); background: var(--ink); color: var(--g-0); }
.tile__sub { display: block; font-size: var(--fs-body-sm); line-height: 1.35; color: var(--g-600); }
@media (min-width: 768px) {
.tile__bar { padding: var(--sp-4); }
}
.tile-grid--line { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .tile-grid--line { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile--line { background: var(--dark-surface); color: var(--g-0); }
.tile--line .tile__media { aspect-ratio: 4 / 3; }
.tile--line .tile__bar { background: var(--ink); }
.tile--line .tile__name { color: var(--g-0); font-size: 1.1875rem; line-height: 1.15; }
.tile--line .tile__meta { color: var(--g-400); }
.tile--line .tile__sub { color: var(--g-400); }
.tile--line .tile__go { border-color: var(--g-600); color: var(--g-0); }
.tile--line:hover .tile__go { border-color: var(--g-0); background: var(--g-0); color: var(--ink); }
@media (max-width: 719px) {
.tile--line .tile__media { aspect-ratio: 16 / 9; }
.tile--line .tile__name { min-height: 0; }
}
.tile--sub .tile__name { font-size: var(--fs-label-sm); }
@media (max-width: 599px) {
.tile__bar { gap: var(--sp-2); padding: 10px; }
.tile--sub .tile__meta { font-size: var(--fs-small); }
.tile__go { width: 28px; height: 28px; }
.tile__go .icon { width: 14px; height: 14px; }
}
/* css/components/client-logos.css */
.clogos {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
justify-items: start;
gap: var(--sp-4) var(--sp-5);
}
.clogos__item { display: flex; align-items: center; justify-content: flex-start; width: 100%; max-width: 120px; height: 40px; }
.clogos__img {
display: block;
width: auto;
height: auto;
max-width: 120px;
max-height: 28px;
object-fit: contain;
object-position: center;
filter: saturate(0.6);
}
.clogos__item--testo {
width: auto;
height: 28px;
padding: 0 var(--sp-3);
border: var(--bw) solid var(--border);
border-radius: var(--r-2);
font-family: var(--font-display);
font-size: var(--fs-label-sm);
font-weight: 700;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: #6E6E6C;
white-space: nowrap;
}
@media (min-width: 768px) {
.clogos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); justify-items: center; }
.clogos__item { width: 100%; max-width: 132px; height: 48px; justify-content: center; }
.clogos__img { max-width: 132px; max-height: 32px; }
.clogos__item--testo { width: auto; height: 32px; font-size: var(--fs-label); }
}
/* css/components/crumb.css */
.crumb {
margin: 0 0 var(--sp-4);
padding: var(--sp-3) 0 0;
font-size: 0.8125rem;
color: var(--text-2);
overflow-wrap: normal;
}
.crumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; list-style: none; margin: 0; padding: 0; }
.crumb__list li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumb__list li + li::before { content: "/"; color: var(--text-3); }
.crumb a { color: var(--text-2); text-decoration: none; }
.crumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.crumb [aria-current="page"] { color: var(--text); }
.crumb__back { display: none; align-items: center; gap: 4px; min-height: 44px; color: var(--text-2); text-decoration: none; }
.crumb__back .icon { width: 14px; height: 14px; }
@media (max-width: 1023px) {
.crumb { padding-top: 0; }
.crumb__list li, .crumb__list a, .crumb__list [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 719px) {
.crumb { margin-bottom: var(--sp-2); padding-top: var(--sp-1); }
.crumb__list { display: none; }
.crumb__back { display: inline-flex; }
}
/* css/components/pagination.css */
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
margin: var(--sp-8) 0 0;
padding: 0;
list-style: none;
}
.pagination > li { margin: 0; display: flex; }
.pagination > li:first-child { margin-right: auto; }
.pagination > li:last-child { margin-left: auto; }
.pagination a,
.pagination > li > span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 8px;
border: var(--bw) solid var(--border);
border-radius: var(--r-1);
background: var(--surface);
color: var(--text);
font-family: var(--font-text);
font-size: var(--fs-body-sm);
font-variant-numeric: tabular-nums lining-nums;
text-decoration: none;
transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.pagination a:hover { border-color: var(--ink); background: var(--g-100); color: var(--text); }
.pagination a:focus-visible { box-shadow: var(--focus); outline: none; }
.pagination [aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--g-0); font-weight: 600; }
.pagination .is-disabled { border-color: var(--hairline); color: var(--g-400); }
.pagination__gap { border-color: transparent !important; background: transparent !important; color: var(--text-2) !important; padding: 0 2px !important; min-width: 16px !important; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-8); }
.pager__state { font-size: var(--fs-body-sm); color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 1023px) {
.pagination a, .pagination > li > span { min-width: 44px; height: 44px; }
.pager .btn { min-height: 44px; }
}
@media (min-width: 1024px) {
.pagination a, .pagination > li > span { min-width: 36px; height: 36px; }
}
/* css/components/filters.css */
.filters { font-size: var(--fs-body-sm); }
.filters__group { padding: var(--sp-4) 0; border-bottom: var(--bw) solid var(--hairline); }
.filters__group:first-child { padding-top: 0; }
.filters__group:last-child { border-bottom: 0; }
.filters__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
width: 100%;
margin: 0 0 var(--sp-2);
padding: 0;
border: 0;
background: transparent;
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
text-align: left;
cursor: pointer;
}
.filters__title .icon { color: var(--text-2); transition: transform var(--t-fast) var(--ease); }
.filters__title[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.filters__title[aria-expanded="false"] + .filters__body { display: none; }
.filters__body { display: grid; gap: 2px; }
.filters__body--scroll { max-height: 240px; overflow: auto; padding-right: 4px; }
.filters__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 4px 0; color: var(--text); text-decoration: none; }
.filters__link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.filters__count { color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; font-size: var(--fs-small); }
.filters__more { margin-top: var(--sp-2); font-size: var(--fs-small); }
.filters__price { display: flex; align-items: center; gap: var(--sp-2); }
.filters__price .input { height: 32px; font-size: var(--fs-body-sm); }
.filters__actions { display: grid; gap: var(--sp-2); padding-top: var(--sp-4); }
.filters-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-4); }
.filters-bar__count { font-size: var(--fs-body-sm); color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; }
.filters-bar__sort { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.filters-bar__sort .select { height: 32px; width: auto; min-width: 180px; font-size: var(--fs-body-sm); }
.filters-bar__toggle { display: inline-flex; }
@media (max-width: 1023px) {
.filters-panel {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: var(--z-sheet);
max-height: 85vh;
display: flex;
flex-direction: column;
padding: 0 var(--gutter) var(--sp-4);
background: var(--surface);
border-top-left-radius: var(--r-2);
border-top-right-radius: var(--r-2);
box-shadow: var(--shadow-3);
transform: translateY(100%);
transition: transform var(--t-slow) var(--ease);
overflow: hidden auto;
overscroll-behavior: contain;
}
.filters-panel.is-open { transform: translateY(0); }
.filters-panel__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; background: var(--surface); border-bottom: var(--bw) solid var(--hairline); }
.filters-panel__foot { position: sticky; bottom: 0; display: flex; gap: var(--sp-2); padding: var(--sp-3) 0; background: var(--surface); border-top: var(--bw) solid var(--hairline); }
.filters-panel__foot .btn { flex: 1 1 auto; }
}
@media (min-width: 1024px) {
.filters-bar__toggle { display: none; }
.filters-panel__head, .filters-panel__foot { display: none; }
}
/* css/components/form.css */
.form { display: block; }
.form__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 768px) {
.form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form__grid > .field--full { grid-column: 1 / -1; }
}
.form__grid > .field + .field { margin-top: 0; }
.form__section { padding-top: var(--sp-6); margin-top: var(--sp-6); border-top: var(--rule); }
.form__section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.form__section > .label { margin-bottom: var(--sp-4); color: var(--text); }
.form__panel { padding: var(--sp-5); border-radius: var(--r-2); background: var(--g-100); }
.form__panel + .form__panel { margin-top: var(--sp-4); }
.form__panel > .label, .form__panel > legend { display: block; margin: 0 0 var(--sp-4); padding: 0 0 var(--sp-2); border-bottom: var(--rule-section, 2px solid var(--ink)); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text); width: 100%; }
@media (max-width: 719px) { .form__panel { padding: var(--sp-4); } }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-6); }
.field { display: block; margin: 0; min-width: 0; }
.field + .field { margin-top: var(--sp-4); }
.field__label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-2);
min-height: 17px;
margin: 0 0 6px;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
line-height: 1.3;
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text);
}
.field__optional { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-small); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.field__hint { display: block; margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); }
.field__error { display: flex; align-items: flex-start; gap: 4px; margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.4; color: var(--err); }
.field__error .icon { width: 14px; height: 14px; margin-top: 1px; }
.field__ok { display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; font-size: var(--fs-small); color: var(--ok); }
.input, .select, .textarea {
display: block;
width: 100%;
height: 40px;
padding: 0 12px;
margin: 0;
border: var(--bw) solid var(--border-input);
border-radius: var(--r-1);
background: var(--surface-alt);
color: var(--text);
font-family: var(--font-text);
font-size: 0.9375rem;
line-height: 1.3;
-webkit-appearance: none;
appearance: none;
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.input { background: var(--g-0); }
.select { background: var(--g-0); }
.textarea { background: var(--g-0); }
.surface--brand .input, .surface--brand .select, .surface--brand .textarea { background: var(--g-0); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), var(--focus); }
.input:disabled, .select:disabled, .textarea:disabled, .input[readonly] { background: var(--g-100); color: var(--text-2); cursor: not-allowed; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"], .field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--err); }
.field.is-invalid .input:focus, .input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--err), var(--focus); }
.field.is-valid .input { border-color: var(--ok); }
.textarea { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; }
.input--sm, .select--sm { height: 32px; padding: 0 10px; font-size: var(--fs-body-sm); }
.input--num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.input--code { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.05em; text-transform: uppercase; }
.input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.input[type="search"]::-webkit-search-decoration, .input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.select {
padding-right: 36px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px 16px;
}
.select:disabled { opacity: 0.6; }
.select--sm { background-position: right 8px center; }
.input-group { position: relative; display: flex; align-items: stretch; }
.input-group .input { min-width: 0; flex: 1 1 auto; border-radius: var(--r-1) 0 0 var(--r-1); }
.input-group__suffix, .input-group__prefix {
display: inline-flex; align-items: center;
padding: 0 10px;
border: var(--bw) solid var(--border-input);
background: var(--g-100);
color: var(--text-2);
font-size: var(--fs-body-sm);
white-space: nowrap;
}
.input-group__suffix { border-left: 0; border-radius: 0 var(--r-1) var(--r-1) 0; }
.input-group__prefix { border-right: 0; border-radius: var(--r-1) 0 0 var(--r-1); }
.input-group__prefix + .input { border-radius: 0; }
.input-group__prefix + .input:last-child { border-radius: 0 var(--r-1) var(--r-1) 0; }
.input-group--icon .input { padding-left: 36px; border-radius: var(--r-1); }
.input-group__icon { position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--text-3); pointer-events: none; }
.input-group__btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 4px 0; font-size: var(--fs-body-sm); line-height: 1.4; cursor: pointer; }
.check + .check { margin-top: 2px; }
.check__input {
flex: none;
width: 16px; height: 16px;
margin: 2px 0 0;
border: var(--bw) solid var(--border-input);
border-radius: var(--r-1);
background: var(--g-0);
-webkit-appearance: none;
appearance: none;
cursor: pointer;
display: grid;
place-content: center;
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.check__input::before {
content: "";
width: 10px; height: 10px;
transform: scale(0);
transition: transform var(--t-fast) var(--ease);
background: var(--g-0);
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.check__input:checked { background: var(--ink); border-color: var(--ink); }
.check__input:checked::before { transform: scale(1); }
.check__input:indeterminate { background: var(--ink); border-color: var(--ink); }
.check__input:indeterminate::before { transform: scale(1); clip-path: inset(40% 10% 40% 10%); }
.check__input[type="radio"] { border-radius: 50%; }
.check__input[type="radio"]::before { border-radius: 50%; clip-path: none; width: 8px; height: 8px; }
.check__input[type="radio"]:checked { background: var(--g-0); border: var(--bw-2) solid var(--ink); }
.check__input[type="radio"]:checked::before { background: var(--ink); }
.check__input:hover { border-color: var(--ink); }
.check__input:focus-visible { box-shadow: var(--focus); }
.check__input:disabled { opacity: 0.45; cursor: not-allowed; }
.check__input:disabled + .check__text { opacity: 0.6; }
.check__text { flex: 1 1 auto; }
.check__count { margin-left: auto; padding-left: var(--sp-2); color: var(--text-2); font-variant-numeric: tabular-nums; }
.check__hint { display: block; font-size: var(--fs-small); color: var(--text-2); }
.check--card {
position: relative;
overflow: hidden;
padding: 12px 14px;
border: 0;
border-radius: var(--r-1);
background: var(--g-50);
box-shadow: inset 0 0 0 var(--bw) var(--g-300);
transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.check--card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.check--card:hover { background: var(--g-100); box-shadow: inset 0 0 0 var(--bw) var(--ink); }
.check--card:has(.check__input:checked) { padding: 12px 14px; background: var(--g-100); box-shadow: inset 0 0 0 var(--bw-2) var(--ink); }
.check--card:has(.check__input:checked)::before { background: var(--red-bar); }
.check--card:has(.check__input:focus-visible) { box-shadow: inset 0 0 0 var(--bw-2) var(--ink), var(--focus); }
.check--card .check__hint { margin-top: 2px; line-height: 1.4; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-body-sm); }
.switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--g-400); position: relative; transition: background-color var(--t-fast) var(--ease); flex: none; }
.switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--g-0); transition: transform var(--t-fast) var(--ease); }
.switch__input:checked + .switch__track { background: var(--ink); }
.switch__input:checked + .switch__track::after { transform: translateX(16px); }
.switch__input:focus-visible + .switch__track { box-shadow: var(--focus); }
.field__row { display: flex; gap: var(--sp-2); align-items: center; }
.field__row > .input, .field__row > .select { flex: 1 1 0; min-width: 0; }
.form__error { display: flex; gap: var(--sp-2); align-items: flex-start; padding: 10px 12px; margin: 0 0 var(--sp-4); border-left: 3px solid var(--err); background: var(--err-bg); color: var(--err); font-size: var(--fs-body-sm); }
.form__error ul { margin: 0; padding-left: 1.1em; }
.qty { display: inline-flex; align-items: stretch; height: 36px; }
.qty__btn { width: 36px; height: 36px; padding: 0; border: var(--bw) solid var(--border-strong); border-radius: var(--r-1) 0 0 var(--r-1); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.qty__btn:last-child { border-radius: 0 var(--r-1) var(--r-1) 0; }
.qty__btn:hover { background: var(--g-100); }
.qty__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.qty__btn:focus-visible { box-shadow: var(--focus); position: relative; z-index: 1; }
.qty__input { width: 64px; height: 36px; padding: 0 6px; border: var(--bw) solid var(--border-strong); border-left: 0; border-right: 0; text-align: center; font-variant-numeric: tabular-nums lining-nums; font-weight: 600; background: var(--g-0); }
.qty__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--focus-color); }
.qty--sm, .qty--sm .qty__btn, .qty--sm .qty__input { height: 28px; }
.qty--sm .qty__btn { width: 28px; }
.qty--sm .qty__input { width: 48px; font-size: var(--fs-body-sm); }
/* css/components/table.css */
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); line-height: 1.4; }
.tbl th, .tbl td { padding: 0 12px; text-align: left; vertical-align: middle; }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl thead th {
height: 36px;
border-bottom: var(--rule);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text);
white-space: nowrap;
}
.tbl tbody td { height: 44px; border-bottom: var(--bw) solid var(--hairline); }
.tbl tbody tr:nth-child(even) td, .tbl tbody tr:nth-child(even) th { background: var(--g-100); }
.tbl tbody tr:hover td, .tbl tbody tr:hover th { background: var(--g-200); }
.tbl tfoot td { height: 40px; border-top: var(--rule); font-weight: 600; }
.tbl .num, .tbl__num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tbl .tbl__actions, .tbl td.tbl__actions, .tbl th.tbl__actions { text-align: right; white-space: nowrap; }
.tbl__actions .btn + .btn { margin-left: 4px; }
.tbl__muted { color: var(--text-2); }
.tbl__thumb { width: 40px; height: 40px; object-fit: contain; background: var(--g-100); border-radius: var(--r-1); }
.tbl__link { text-decoration: none; font-weight: 500; }
.tbl__link:hover { text-decoration: underline; }
.tbl__cell-stack { display: flex; flex-direction: column; line-height: 1.3; }
.tbl__cell-stack small { color: var(--text-2); }
.tbl tr[data-href] { cursor: pointer; }
.tbl tr.is-selected td { box-shadow: inset 3px 0 0 var(--ink); }
.tbl tr.is-selected td:first-child { padding-left: 12px; }
.tbl tr.is-muted td { color: var(--text-2); }
.tbl--dense { font-size: 0.8125rem; }
.tbl--dense thead th { height: 32px; }
.tbl--dense tbody td { height: 36px; padding-top: 4px; padding-bottom: 4px; }
.tbl--specs { font-size: var(--fs-body-sm); }
.tbl--specs th {
width: 38%;
padding: 8px 12px 8px 0;
border-bottom: var(--bw) solid var(--hairline);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-2);
text-align: left;
vertical-align: top;
}
.tbl--specs td { padding: 8px 0; border-bottom: var(--bw) solid var(--hairline); }
.tbl--specs tr:first-child th, .tbl--specs tr:first-child td { border-top: var(--rule); }
.tbl--plain tbody tr:nth-child(even) td, .tbl--plain tbody tr:nth-child(even) th { background: transparent; }
.tbl--plain tbody tr:hover td, .tbl--plain tbody tr:hover th { background: transparent; }
@media (max-width: 767px) {
.tbl--cards, .tbl--cards tbody, .tbl--cards tr, .tbl--cards td { display: block; width: 100%; }
.tbl--cards thead { display: none; }
.tbl--cards tbody tr { padding: 14px; margin: 0 0 8px; border: 0; border-radius: var(--r-2); background: var(--g-100); }
.tbl--cards tbody tr:nth-child(even) td, .tbl--cards tbody tr:hover td,
.tbl--cards tbody tr:nth-child(even) th, .tbl--cards tbody tr:hover th { background: transparent; }
.tbl--cards tbody td { display: flex; justify-content: space-between; gap: 12px; height: auto; min-height: 28px; padding: 4px 0; border-bottom: 0; text-align: right; }
.tbl--cards tbody td::before { content: attr(data-label); flex: none; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); text-align: left; }
.tbl--cards tbody td[data-label=""]::before { display: none; }
.tbl--cards .tbl__actions { justify-content: flex-end; padding-top: 8px; margin-top: 4px; border-top: var(--bw) solid var(--hairline); }
.tbl--cards tr.is-selected td { box-shadow: none; }
.tbl--cards tr.is-selected { box-shadow: inset 3px 0 0 var(--red-bar); }
.tbl--cards tbody td::before { color: var(--text-2); }
.tbl--cards .tbl__actions { border-top: var(--bw) solid var(--g-300); }
}
.kv { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 6px 0; font-size: var(--fs-body-sm); border-bottom: var(--bw) solid var(--hairline); }
.kv:last-child { border-bottom: 0; }
.kv__k { color: var(--text-2); }
.kv__v { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.kv--total { padding-top: 10px; margin-top: 4px; border-top: var(--rule); border-bottom: 0; align-items: baseline; }
.kv--total .kv__k { color: var(--text); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-label); letter-spacing: var(--ls-label); }
.kv--total .kv__v { font-family: var(--font-price); font-weight: 700; font-size: var(--fs-price-total); line-height: 1; }
.kv--indent { padding-left: var(--sp-4); }
.empty { max-width: 640px; padding: var(--sp-6); text-align: left; border: 0; border-radius: var(--r-2); background: var(--g-100); color: var(--text-2); font-size: var(--fs-body-sm); }
.empty .icon { width: 24px; height: 24px; margin: 0 0 var(--sp-2); color: var(--text-3); }
.empty p { margin: 0 0 var(--sp-3); max-width: 52ch; }
.empty p:last-child { margin-bottom: 0; }
.empty strong, .empty b { display: block; margin-bottom: 4px; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: 0.02em; }
.kpi { display: block; padding: var(--sp-4); border: 0; border-radius: var(--r-2); background: var(--g-100); text-decoration: none; color: var(--text); transition: box-shadow var(--t-fast) var(--ease); }
.kpi:hover { box-shadow: inset 0 0 0 var(--bw-2) var(--ink); color: var(--text); }
.kpi__label { display: block; margin: 0 0 var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.kpi__value { display: block; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: var(--fs-kpi); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.kpi__note { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-2); }
.kpi.is-alert { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); }
.kpi.is-alert .kpi__note { color: var(--warn); }
.kpi-grid { display: grid; gap: var(--col-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* css/components/modal.css */
.modal {
width: min(480px, calc(100vw - 32px));
max-width: none;
max-height: calc(100vh - 64px);
padding: 0;
border: 0;
border-radius: var(--r-2);
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-3);
overflow: hidden;
}
.modal::backdrop { background: rgba(29, 29, 27, .6); }
.modal--md { width: min(720px, calc(100vw - 32px)); }
.modal--lg { width: min(960px, calc(100vw - 32px)); }
.modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
min-height: 48px;
padding: 0 var(--sp-2) 0 var(--sp-4);
border-bottom: var(--rule-section, 2px solid var(--ink));
}
.modal__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }
.modal__close {
flex: none;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
border: 0;
border-radius: var(--r-1);
background: transparent;
color: var(--text-2);
cursor: pointer;
}
.modal__close:hover { background: var(--g-100); color: var(--text); }
.modal__body { padding: var(--sp-4); overflow: auto; max-height: calc(100vh - 220px); font-size: var(--fs-body-sm); }
.modal__body p { max-width: none; }
.modal__body p:last-child { margin-bottom: 0; }
.modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 0; background: var(--g-100); }
@media (max-width: 719px) {
.modal, .modal--md, .modal--lg {
width: 100%;
max-width: none;
margin: auto 0 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.modal__foot { flex-direction: column-reverse; }
.modal__foot .btn { width: 100%; }
}
/* css/components/cookie.css */
.cookie {
position: fixed;
left: 0;
right: 0;
bottom: var(--stickybar-h, 0px);
z-index: calc(var(--z-sheet) + 1);
border-top: var(--bw-2) solid var(--ink);
background: var(--g-0);
box-shadow: 0 -8px 24px rgba(29, 29, 27, .12);
font-size: var(--fs-body-sm);
}
.cookie[hidden] { display: none; }
.cookie__row {
display: flex;
align-items: center;
gap: var(--sp-4);
padding-top: var(--sp-3);
padding-bottom: var(--sp-3);
}
.cookie__text {
flex: 1 1 auto;
max-width: none;
margin: 0;
color: var(--text-2);
line-height: 1.4;
}
.cookie__text a { color: var(--link); }
.cookie__actions { flex: none; display: flex; align-items: center; gap: var(--sp-2); }
body { padding-bottom: var(--fixed-bars, 0px); }
body:has(.cookie:not([hidden])) { padding-bottom: var(--fixed-bars, 116px); }
@media (min-width: 768px) {
body:has(.cookie:not([hidden])) { padding-bottom: var(--fixed-bars, 72px); }
}
@media (max-width: 767px) {
.cookie__row { flex-wrap: wrap; gap: var(--sp-2); }
.cookie__text { flex: 1 1 100%; font-size: var(--fs-small); }
.cookie__actions { flex: 1 1 100%; }
.cookie__actions .btn { flex: 1 1 0; min-height: 36px; }
}
/* css/components/toast.css */
.toasts {
position: fixed;
right: var(--gutter);
bottom: var(--gutter);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--sp-2);
width: 360px;
max-width: calc(100vw - 32px);
pointer-events: none;
}
.toast {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: 12px 12px 12px 14px;
border-left: 3px solid var(--g-500);
border-radius: var(--r-2);
background: var(--dark-surface);
color: var(--g-0);
box-shadow: var(--shadow-3);
font-size: var(--fs-body-sm);
line-height: 1.4;
pointer-events: auto;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.toast.is-open { opacity: 1; transform: translateY(0); }
.toast .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--g-0); }
.toast__text { flex: 1 1 auto; }
.toast__text { color: var(--g-300); }
.toast__text strong { display: block; color: var(--g-0); font-weight: 700; font-family: var(--font-display); }
.toast a { color: var(--g-0); }
.toast__close { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-1); background: transparent; color: var(--g-400); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.toast__close:hover { background: var(--ink-soft); color: var(--g-0); }
.toast--ok { border-left-color: var(--ok); }
.toast--warn { border-left-color: var(--warn); }
.toast--err { border-left-color: var(--err); }
.toast--info { border-left-color: var(--info); }
@media (max-width: 719px) {
.toasts { left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + 64px); width: auto; }
}
/* css/components/steps.css */
.steps { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: 0; padding: 0; list-style: none; }
.step { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.step__num {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
flex: none;
border: var(--bw) solid var(--ink);
border-radius: var(--r-1);
background: transparent;
color: var(--ink);
font-family: var(--font-text);
font-weight: 700;
font-size: var(--fs-small);
letter-spacing: 0;
font-variant-numeric: tabular-nums lining-nums;
}
.step__num .icon { width: 14px; height: 14px; }
.step.is-active { color: var(--text); }
.step.is-active .step__num { background: var(--ink); color: var(--g-0); }
.step.is-done .step__num { background: var(--ok); border-color: var(--ok); color: var(--g-0); }
.step.is-done { color: var(--text-2); }
.step a { color: inherit; text-decoration: none; }
.step a:hover { text-decoration: underline; }
.step-label { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text); }
.step-label__num { color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; }
.step-label__info { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 2px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--text-2); cursor: pointer; }
.step-label__info:hover { color: var(--text); background: var(--g-100); }
.step-label__info .icon { width: 16px; height: 16px; }
.step-label__hint { margin-left: auto; font-family: var(--font-text); font-weight: 400; font-size: var(--fs-small); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.howto { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.howto__item { display: flex; gap: 12px; align-items: flex-start; }
.howto__num { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--g-0); font-family: var(--font-text); font-weight: 700; font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; border-radius: var(--r-1); }
.howto__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; margin-bottom: 2px; }
.howto__text { font-size: var(--fs-body-sm); color: var(--text-2); margin: 0; }
@media (min-width: 1024px) { .howto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* css/components/chip.css */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.chips > li { margin: 0; display: flex; }
.chips--scroll { flex-wrap: wrap; }
.chips--scroll .chip { flex: none; }
.chips > li.chips__custom { flex-basis: 100%; }
.chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border: var(--bw) solid var(--border-input);
border-radius: var(--r-1);
background: var(--g-0);
color: var(--text);
font-family: var(--font-text);
font-weight: 500;
font-size: 0.8125rem;
line-height: 1;
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
user-select: none;
transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--text); }
.chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip.is-selected, .chip[aria-pressed="true"], .chip[aria-checked="true"], .chip:has(.chip__input:checked) { background: var(--ink); border-color: var(--ink); color: var(--g-0); }
.chip:has(.chip__input:focus-visible), .chip:focus-visible { box-shadow: var(--focus); }
.chip.is-disabled, .chip:has(.chip__input:disabled) { opacity: 0.45; cursor: not-allowed; }
.chip.is-unavailable { color: var(--text-2); opacity: 0.45; outline: 1px dashed var(--border-input); outline-offset: -1px; }
.chip.is-unavailable:hover { opacity: 0.75; outline-color: var(--ink); }
.chip__delta { color: var(--text-2); font-size: var(--fs-small); }
.chip.is-selected .chip__delta, .chip:has(.chip__input:checked) .chip__delta { color: var(--g-400); }
.chip .icon { width: 14px; height: 14px; }
.chip--sm { height: 28px; padding: 0 10px; font-size: var(--fs-small); }
.chip--filter { height: 26px; padding: 0 6px 0 10px; border-color: var(--border); background: var(--g-100); font-size: var(--fs-small); cursor: default; }
.chip--filter:hover { border-color: var(--border); }
.chip__remove {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
margin: 0; padding: 0;
border: 0; border-radius: var(--r-1);
background: transparent; color: var(--text-2);
cursor: pointer;
text-decoration: none;
}
.chip__remove:hover { background: var(--g-300); color: var(--text); }
.chip__remove .icon { width: 12px; height: 12px; }
.chips__clear { align-self: center; font-size: var(--fs-small); }
.chips-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.chips-row .label { margin: 0; }
.chips--scroll { max-width: 100%; }
/* css/components/opt-tile.css */
.opt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.opt-tile {
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
width: auto;
padding: var(--sp-3) 30px var(--sp-3) var(--sp-3);
border: 0;
border-radius: var(--r-2);
background: var(--g-100);
box-shadow: inset 0 0 0 1px var(--g-200);
color: var(--text);
cursor: pointer;
user-select: none;
transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.opt-tile:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.opt-tile__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt-tile__media {
display: block;
aspect-ratio: 1 / 1;
margin-bottom: var(--sp-1);
background: var(--g-0);
border-radius: var(--r-1);
overflow: hidden;
}
.opt-tile__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.opt-tile__media img[data-fit="cover"] { object-fit: cover; }
.opt-tile__media--empty { aspect-ratio: 1 / 1; }
.opt-tile__label { font-family: var(--font-text); font-weight: 600; font-size: 0.8125rem; line-height: 1.25; }
.opt-tile__sub { color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); line-height: 1.3; }
.opt-tile__delta { color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); font-variant-numeric: tabular-nums lining-nums; }
.opt-tile__check {
position: absolute;
top: var(--sp-2);
right: var(--sp-2);
display: none;
width: 16px;
height: 16px;
color: var(--ink);
}
.opt-tile__check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: square; }
.opt-tile.is-selected, .opt-tile:has(.opt-tile__input:checked) {
box-shadow: inset 0 0 0 2px var(--selected-border);
background: var(--g-0);
}
.opt-tile.is-selected .opt-tile__check, .opt-tile:has(.opt-tile__input:checked) .opt-tile__check { display: block; }
.opt-tile:has(.opt-tile__input:focus-visible) { box-shadow: var(--focus); }
.opt-tile.is-disabled, .opt-tile:has(.opt-tile__input:disabled) { opacity: 0.45; cursor: not-allowed; }
.opt-tile.is-unavailable { opacity: 0.45; box-shadow: none; outline: 1px dashed var(--border-input); outline-offset: -1px; }
.opt-tile.is-unavailable:hover { opacity: 0.75; outline-color: var(--ink); }
.opt-tile__note { display: none; color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); line-height: 1.3; }
.opt-tile.is-disabled .opt-tile__note:not(:empty) { display: block; }
@media (max-width: 767px) {
.opt-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.opt-tiles { align-items: stretch; }
.opt-tile { justify-content: flex-start; align-items: stretch; min-height: 72px; }
.opt-tile--text { justify-content: flex-start; min-height: 64px; }
.opt-tile__delta { margin-top: auto; padding-top: 2px; }
.opt-tile--text .opt-tile__label { font-size: var(--fs-body-sm); }
/* css/components/swatch.css */
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.swatch {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
width: 76px;
text-align: center;
cursor: pointer;
user-select: none;
}
.swatch__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.swatch__dot {
display: block;
width: 28px;
height: 28px;
border: var(--bw) solid var(--border);
border-radius: var(--r-pill);
background: var(--swatch, var(--g-200));
transition: box-shadow var(--t-fast) var(--ease);
}
.swatch__dot { margin: 4px 0 8px; }
.swatch:hover .swatch__dot { border-color: var(--ink); }
.swatch.is-selected .swatch__dot, .swatch:has(.swatch__input:checked) .swatch__dot {
border-color: var(--ink);
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
}
.swatch:has(.swatch__input:focus-visible) .swatch__dot { box-shadow: var(--focus); }
.swatch__name { color: var(--text); font-family: var(--font-text); font-size: var(--fs-small); line-height: 1.3; }
.swatch__stock {
color: var(--text-2);
font-family: var(--font-text);
font-size: 0.6875rem;
line-height: 1.2;
font-variant-numeric: tabular-nums lining-nums;
}
.swatch__stock.is-low::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 4px;
border-radius: var(--r-pill);
background: var(--warn);
vertical-align: baseline;
}
.swatch.is-out { cursor: not-allowed; }
.swatch.is-out .swatch__dot { opacity: 0.45; }
.swatch.is-out .swatch__name { text-decoration: line-through; color: var(--text-2); }
.swatch.is-disabled { cursor: not-allowed; }
.swatch.is-disabled .swatch__dot { opacity: 0.45; }
.swatch.is-disabled .swatch__name { color: var(--text-2); }
.swatch.is-unavailable .swatch__dot { opacity: 0.45; border-style: dashed; border-color: var(--border-input); }
.swatch.is-unavailable .swatch__name { color: var(--text-2); }
.swatch.is-unavailable:hover .swatch__dot { opacity: 0.75; border-color: var(--ink); }
/* css/components/stepper.css */
.stepper {
display: inline-flex;
align-items: stretch;
border: var(--bw) solid var(--border-input);
border-radius: var(--r-2);
background: var(--surface);
overflow: hidden;
}
.stepper__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
min-height: 36px;
padding: 0;
border: 0;
background: var(--surface);
color: var(--text);
font-family: var(--font-text);
font-size: 1rem;
line-height: 1;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease);
}
.stepper__btn:hover { background: var(--g-100); }
.stepper__btn:focus-visible { box-shadow: var(--focus); outline: none; }
.stepper__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.stepper__input {
width: 64px;
min-height: 36px;
padding: 0 var(--sp-1);
border: 0;
border-left: var(--bw) solid var(--border);
border-right: var(--bw) solid var(--border);
background: var(--surface);
color: var(--text);
font-family: var(--font-text);
font-weight: 600;
font-size: 0.9375rem;
text-align: center;
font-variant-numeric: tabular-nums lining-nums;
}
.stepper__input:focus-visible { box-shadow: var(--focus); outline: none; }
.stepper--sm .stepper__btn { width: 28px; min-height: 28px; font-size: 0.875rem; }
.stepper--sm .stepper__input { width: 44px; min-height: 28px; font-size: var(--fs-body-sm); }
@media (max-width: 1023px) {
.stepper--sm .stepper__input { width: 64px; min-height: 44px; font-size: 1rem; }
.stepper--sm .stepper__btn { width: 44px; min-height: 44px; font-size: 1rem; }
}
/* css/components/dim.css */
.dim {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
margin-top: var(--sp-4);
}
.dim__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 132px)); gap: var(--sp-3) var(--sp-4); align-content: start; }
.dim__fields .field { margin: 0; }
.dim__hint, .dim__error { grid-column: 1 / -1; margin: 0; font-family: var(--font-text); font-size: var(--fs-small); line-height: 1.4; }
.dim__hint { color: var(--text-2); }
.dim__error { color: var(--err); font-weight: 500; }
.field__suffixed { position: relative; display: block; }
.field__suffixed .field__input { padding-right: 34px; }
.field__suffix {
position: absolute;
top: 0;
right: var(--sp-2);
display: flex;
align-items: center;
height: 40px;
color: var(--text-2);
font-family: var(--font-text);
font-size: var(--fs-small);
pointer-events: none;
}
.dim__figure { align-self: start; }
@media (max-width: 719px) {
.dim__figure { justify-self: center; width: 100%; }
.dim__drawing { max-width: 320px; margin: 0 auto; }
}
.dim__drawing { display: block; width: 100%; max-width: 240px; height: auto; }
.dim__trim { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.dim__safe { fill: none; stroke: var(--g-600); stroke-width: 0.8; stroke-dasharray: 3 2.5; }
.dim__bleed { fill: none; stroke: var(--red-bar); stroke-width: 1; }
.dim__q { stroke: var(--g-600); stroke-width: 0.8; }
.dim__val {
fill: var(--text);
font-family: var(--font-text);
font-size: 9px;
font-variant-numeric: tabular-nums lining-nums;
}
.dim__legend {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1) var(--sp-3);
margin: var(--sp-2) 0 0;
color: var(--text-2);
font-family: var(--font-text);
font-size: 0.6875rem;
line-height: 1.3;
}
.dim__key { display: inline-block; width: 14px; height: 0; margin-right: 2px; vertical-align: middle; }
.dim__key--trim { border-top: 2px solid var(--ink); }
.dim__key--safe { border-top: 1px dashed var(--g-600); }
.dim__key--bleed { border-top: 2px solid var(--red-bar); }
@media (min-width: 560px) {
.dim { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
}
.dim__fields { grid-template-columns: repeat(2, minmax(0, 112px)); }
.dim__fields .field__input { width: 100%; max-width: 112px; }
.dim__item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
@media (min-width: 560px) {
.dim { grid-template-columns: minmax(248px, 1fr) minmax(0, 240px); }
}
/* css/components/matrix.css */
.matrix__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix {
width: 100%;
border-collapse: collapse;
font-family: var(--font-text);
font-size: var(--fs-body-sm);
}
.matrix th, .matrix td { padding: var(--sp-2); text-align: center; }
.matrix thead th {
border-bottom: var(--bw-2) solid var(--ink);
background: var(--g-100);
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
white-space: nowrap;
}
.matrix tbody tr { border-bottom: 0; }
.matrix tbody tr:nth-child(odd) th, .matrix tbody tr:nth-child(odd) td { background: var(--g-50); }
.matrix tbody th, .matrix thead th:first-child, .matrix tfoot th {
position: sticky;
left: 0;
z-index: 1;
background: var(--g-0);
text-align: left;
white-space: nowrap;
}
.matrix thead th:first-child { background: var(--g-100); }
.matrix tbody tr:nth-child(odd) th { background: var(--g-50); }
.matrix tbody th { display: table-cell; font-weight: 500; }
.matrix__swatch {
display: inline-block;
width: 16px;
height: 16px;
margin-right: var(--sp-2);
border: var(--bw) solid var(--border);
border-radius: var(--r-pill);
background: var(--swatch, var(--g-200));
vertical-align: text-bottom;
}
.matrix__qty {
width: 48px;
height: 28px;
padding: 0 var(--sp-1);
border: var(--bw) solid var(--border-input);
border-radius: var(--r-2);
background: var(--surface);
color: var(--text);
font-family: var(--font-text);
font-size: var(--fs-body-sm);
text-align: center;
font-variant-numeric: tabular-nums lining-nums;
}
.matrix__qty:focus-visible { box-shadow: var(--focus); outline: none; }
.matrix__qty.is-over { border-color: var(--err); }
.matrix__qty.is-short { border-color: var(--warn); }
.matrix__na { color: var(--text-3); }
.matrix tfoot th, .matrix tfoot td {
border-top: var(--bw-2) solid var(--ink);
background: var(--g-0);
font-weight: 700;
font-variant-numeric: tabular-nums lining-nums;
}
.matrix tfoot td { text-align: right; }
.matrix__scroll { max-width: 100%; }
.matrix { min-width: max-content; }
.matrix--single { min-width: 0; }
.matrix--single tbody th { white-space: normal; }
.matrix--single .matrix__qcol { width: 1%; text-align: right; }
.matrix--single .matrix__qty { width: 72px; }
.matrix--single .matrix__na { display: inline-flex; align-items: center; height: 28px; color: var(--text-2); white-space: nowrap; }
@media (pointer: coarse) { .matrix--single .matrix__na { height: 44px; } }
.matrix__head { display: flex; align-items: flex-start; }
.matrix__head .matrix__swatch { flex: none; margin-top: 2px; }
.matrix__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.matrix .matrix__avail { display: none; text-align: left; }
.matrix__avail-line {
display: block;
color: var(--text-2);
font-size: var(--fs-small);
font-weight: 400;
line-height: 1.3;
white-space: nowrap;
font-variant-numeric: tabular-nums lining-nums;
}
.matrix__avail-note {
display: block;
color: var(--text-2);
font-size: var(--fs-micro);
font-weight: 400;
line-height: 1.25;
white-space: normal;
}
.matrix__avail-inline { display: block; margin-top: 2px; font-size: var(--fs-small); }
.matrix__avail-inline .matrix__avail-note { width: 0; min-width: 100%; }
.matrix__cell { position: relative; display: inline-block; vertical-align: middle; }
.matrix__cell-stock {
position: absolute;
top: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--text-2);
font-size: var(--fs-micro);
font-weight: 400;
line-height: 1.1;
white-space: nowrap;
font-variant-numeric: tabular-nums lining-nums;
}
.matrix__cell-stock--low, .matrix__cell-stock--restock { color: var(--warn); font-weight: 600; }
.matrix__info {
position: relative;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--info);
cursor: help;
}
.matrix__info::after { content: ""; position: absolute; inset: -6px; }
.matrix__info .icon { width: 13px; height: 13px; }
.matrix__info:hover { color: var(--ink); }
.matrix__info:focus-visible { outline: none; box-shadow: var(--focus); }
.matrix__avail-line .matrix__info { margin-left: 4px; vertical-align: -1px; }
.matrix__na--out .matrix__info { margin-left: 3px; }
.matrix tr.has-cell-stock > th, .matrix tr.has-cell-stock > td { padding-bottom: calc(var(--sp-2) + 14px); }
.matrix__na--out {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
color: var(--text-2);
font-size: var(--fs-micro);
white-space: nowrap;
}
@media (pointer: coarse) { .matrix__na--out { height: 44px; } }
.matrix__frame { position: relative; }
.matrix__frame::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
width: 16px;
box-shadow: inset -12px 0 10px -10px rgba(29, 29, 27, .38);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease);
}
.matrix__frame.is-more-right::after { opacity: 1; }
.matrix__frame.is-more-left .matrix tbody th::after,
.matrix__frame.is-more-left .matrix thead th:first-child::after,
.matrix__frame.is-more-left .matrix tfoot th::after {
content: "";
position: absolute;
top: 0;
right: -10px;
bottom: 0;
width: 10px;
box-shadow: inset 12px 0 10px -10px rgba(29, 29, 27, .38);
pointer-events: none;
}
.matrix__sum { display: inline-block; }
.matrix__frame.is-more-right .matrix__sum { position: sticky; right: var(--sp-4); }
.matrix:not(.matrix--single) .matrix__text { overflow-wrap: normal; }
@media (min-width: 768px) {
.matrix { --mx-avail-w: 7.5rem; }
.matrix .matrix__avail {
display: table-cell;
position: sticky;
right: 0;
z-index: 1;
min-width: var(--mx-avail-w);
background: var(--g-0);
}
.matrix thead .matrix__avail { background: var(--g-100); }
.matrix--single .matrix__avail { width: 1%; }
.matrix__avail-inline { display: none; }
.matrix__frame:has(.matrix__avail)::after { display: none; }
.matrix__frame.is-more-right .matrix__avail::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 10px;
box-shadow: inset -12px 0 10px -10px rgba(29, 29, 27, .38);
pointer-events: none;
}
.matrix__frame.is-more-right .matrix:has(.matrix__avail) .matrix__sum { right: calc(var(--mx-avail-cur, var(--mx-avail-w)) + var(--sp-4)); }
}
@media (min-width: 1024px) {
.matrix:not(.matrix--single) th,
.matrix:not(.matrix--single) td { padding: var(--sp-1); }
.matrix:not(.matrix--single) .matrix__qty { width: 40px; padding: 0 2px; }
.matrix:not(.matrix--single) tr.has-cell-stock > th,
.matrix:not(.matrix--single) tr.has-cell-stock > td { padding-bottom: calc(var(--sp-1) + 14px); }
.matrix { --mx-avail-w: 7rem; }
.matrix--wide { min-width: 0; }
.matrix--wide tbody th { white-space: normal; }
}
@media (min-width: 1024px) and (pointer: fine) {
.matrix:not(.matrix--single) td:not(.matrix__avail) { padding-inline: 3px; }
}
@media (min-width: 1024px) and (pointer: coarse) {
.matrix:not(.matrix--single) td { padding-inline: 2px; }
.matrix:not(.matrix--single) .matrix__qty { width: 44px; }
}
@media (min-width: 1360px) {
.prod:has(.matrix--wide) { grid-template-columns: minmax(0, 30%) minmax(0, 1fr) 320px; }
}
/* css/components/deco.css */
.deco { display: grid; gap: var(--sp-3); }
.deco__sub {
margin: var(--sp-2) 0 0;
color: var(--text-2);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.deco__areas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.deco__area {
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
width: 160px;
padding: var(--sp-2);
border: var(--bw) solid var(--border);
border-radius: var(--r-2);
background: var(--surface);
cursor: pointer;
user-select: none;
}
.deco__area:hover { border-color: var(--ink); }
.deco__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.deco__area:has(.deco__input:checked) {
border-width: var(--bw-2);
border-color: var(--selected-border);
background: var(--selected-bg);
padding: calc(var(--sp-2) - 1px);
}
.deco__area:has(.deco__input:focus-visible) { box-shadow: var(--focus); }
.deco__media { display: block; aspect-ratio: 1 / 1; background: var(--g-0); border-radius: var(--r-1); overflow: hidden; }
.deco__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.deco__media img[data-fit="cover"] { object-fit: cover; }
.deco__name { font-family: var(--font-text); font-weight: 600; font-size: var(--fs-body-sm); }
.deco__max { color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); font-variant-numeric: tabular-nums lining-nums; }
.deco__list { margin: 0; padding: 0; list-style: none; }
.deco__list:empty { display: none; }
.deco__list li {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) 0;
border-top: var(--bw) solid var(--hairline);
font-family: var(--font-text);
font-size: var(--fs-body-sm);
}
.deco__list li span { color: var(--text-2); }
.deco__list li strong { font-weight: 600; }
.deco__list .btn--link { margin-left: auto; }
@media (max-width: 479px) {
.deco__area { width: calc(50% - var(--sp-3) / 2); }
}
.deco__areas { align-items: stretch; }
.deco__area { justify-content: flex-start; min-height: 96px; }
.deco__area--text { justify-content: center; min-height: 72px; }
.deco:not(:has(.deco__area:not([hidden]))) .deco__areas,
.deco:not(:has(.deco__area:not([hidden]))) .deco__sub:nth-of-type(2) { display: none; }
/* css/components/acc.css */
.acc { margin: 0; padding: 0; list-style: none; }
.acc__row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) 0;
border-bottom: var(--bw) solid var(--hairline);
}
.acc__row:last-child { border-bottom: 0; }
.acc__pick { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; cursor: pointer; }
.acc__pick input { width: 16px; height: 16px; accent-color: var(--ink); flex: none; }
.acc__thumb { flex: none; width: 48px; height: 48px; object-fit: contain; background: var(--g-100); border-radius: var(--r-1); }
.acc__name { font-family: var(--font-text); font-size: var(--fs-body-sm); line-height: 1.3; }
.acc__req { color: var(--text-2); font-size: var(--fs-small); }
.acc__price {
flex: none;
min-width: 72px;
color: var(--text);
font-family: var(--font-text);
font-weight: 600;
font-size: var(--fs-body-sm);
text-align: right;
font-variant-numeric: tabular-nums lining-nums;
}
.acc__row.is-off .stepper, .acc__row.is-off .acc__price { opacity: 0.45; }
@media (max-width: 479px) {
.acc__row { flex-wrap: wrap; }
.acc__pick { flex: 1 1 100%; }
.acc__price { margin-left: auto; }
}
/* css/components/subjects.css */
.subjects { margin-top: var(--sp-4); }
.subjects__head { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-2); }
.subjects__head .field__label { margin: 0; }
.subjects__list { margin: 0; padding: 0; list-style: none; }
.subjects__list:empty { display: none; }
.subjects__item {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) 0;
border-bottom: var(--bw) solid var(--hairline);
}
.subjects__no {
flex: none;
width: 24px;
color: var(--text-2);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
font-variant-numeric: tabular-nums lining-nums;
}
.subjects__name { flex: 1 1 auto; min-width: 0; height: 32px; }
.subjects__item .btn--link { flex: none; }
.subjects__note { margin: var(--sp-3) 0 0; color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); line-height: 1.4; }
@media (max-width: 479px) {
.subjects__item { flex-wrap: wrap; }
.subjects__name { flex: 1 1 calc(100% - 32px); }
}
/* css/components/pgrid.css */
.pgrid-head { display: none; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2); flex-wrap: wrap; }
.seg { display: inline-flex; border: var(--bw) solid var(--border-input); border-radius: var(--r-2); overflow: hidden; }
.seg__btn {
min-height: 28px;
padding: 0 10px;
border: 0;
background: var(--surface);
color: var(--text-2);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-btn);
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg__btn + .seg__btn { border-left: var(--bw) solid var(--border); }
.seg__btn:hover { background: var(--g-100); color: var(--text); }
.seg__btn.is-selected { background: var(--ink); color: var(--g-0); }
.seg__btn:focus-visible { box-shadow: var(--focus); outline: none; }
.seg__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pgrid__scroll { display: none; }
.pgrid { width: 100%; border-collapse: collapse; }
.pgrid thead th {
padding: var(--sp-2) var(--sp-3);
border-bottom: var(--bw-2) solid var(--ink);
background: var(--g-100);
text-align: center;
vertical-align: bottom;
}
.pgrid thead th:first-child { text-align: left; }
.pgrid__tier {
display: block;
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.pgrid__pct { display: block; color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); font-variant-numeric: tabular-nums lining-nums; }
.pgrid tbody tr:nth-child(odd) th, .pgrid tbody tr:nth-child(odd) .pgrid__cell { background: var(--g-50); }
.pgrid tbody th {
padding: var(--sp-2) var(--sp-3);
border-bottom: 0;
color: var(--text);
font-family: var(--font-text);
font-weight: 600;
font-size: var(--fs-body-sm);
text-align: left;
white-space: nowrap;
font-variant-numeric: tabular-nums lining-nums;
}
.pgrid__cell {
padding: var(--sp-3) var(--sp-2);
border: 0;
text-align: center;
cursor: pointer;
transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.pgrid__cell:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.pgrid__cell:focus-visible { box-shadow: var(--focus); outline: none; }
.pgrid__date { display: block; color: var(--text-2); font-family: var(--font-text); font-size: 0.6875rem; font-variant-numeric: tabular-nums lining-nums; }
.pgrid__unit {
display: block;
color: var(--text);
font-family: var(--font-text);
font-weight: 500;
font-size: var(--fs-price-grid);
line-height: 1.2;
font-variant-numeric: tabular-nums lining-nums;
}
.pgrid__line { display: block; color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); font-variant-numeric: tabular-nums lining-nums; }
.pgrid tbody tr .pgrid__cell.is-selected {
box-shadow: inset 0 0 0 2px var(--selected-border);
background: var(--g-0);
}
.pgrid__cell.is-selected .pgrid__unit { font-weight: 800; font-size: 1.0625rem; font-family: var(--font-price); letter-spacing: -0.02em; }
.pgrid__cell.is-disabled { opacity: 0.45; cursor: not-allowed; }
.pgrid.is-mode-line .pgrid__unit { color: var(--text-2); font-weight: 400; font-size: var(--fs-small); }
.pgrid.is-mode-line .pgrid__line { color: var(--text); font-weight: 500; font-size: var(--fs-price-grid); }
.pgrid.is-mode-line .pgrid__cell.is-selected .pgrid__line { font-weight: 700; font-size: 1rem; }
.pgrid.is-mode-line .pgrid__cell.is-selected .pgrid__unit { font-weight: 400; font-size: var(--fs-small); }
@media (min-width: 720px) {
.pgrid-head { display: flex; }
.pgrid__scroll { display: block; overflow-x: auto; }
}
@media (max-width: 1023px) {
.seg__btn { min-height: 44px; padding: 0 var(--sp-3); }
}
.pgrid__scroll { max-width: 100%; }
.pgrid { min-width: 360px; }
.pgrid tbody tr:only-child .pgrid__cell:only-of-type,
.pgrid tbody tr:only-child .pgrid__cell:only-of-type:hover {
box-shadow: none;
cursor: default;
}
.pgrid tbody tr:only-child .pgrid__cell:only-of-type.is-selected {
box-shadow: none;
background: transparent;
}
/* css/components/dcard.css */
.dcards { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.dcard {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas:
"label date price"
"pct date total";
align-items: center;
gap: 0 var(--sp-3);
padding: var(--sp-3);
border: 0;
border-radius: var(--r-2);
background: var(--g-50);
box-shadow: inset 0 0 0 1px var(--g-300);
cursor: pointer;
user-select: none;
transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.dcard:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.dcard__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dcard__label {
grid-area: label;
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.dcard__pct { grid-area: pct; color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); font-variant-numeric: tabular-nums lining-nums; }
.dcard__date {
grid-area: date;
color: var(--text);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.375rem;
line-height: 1.1;
text-align: center;
font-variant-numeric: tabular-nums lining-nums;
}
.dcard__price { grid-area: price; color: var(--text); font-family: var(--font-text); font-weight: 600; font-size: var(--fs-body-sm); text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.dcard__total { grid-area: total; color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.dcard.is-selected, .dcard:has(.dcard__input:checked) {
box-shadow: inset 0 0 0 2px var(--selected-border);
background: var(--g-0);
}
.dcard:has(.dcard__input:focus-visible) { box-shadow: var(--focus); }
.dcard.is-disabled { opacity: 0.45; cursor: not-allowed; }
@media (min-width: 720px) {
.dcards { display: none; }
.dcards.dcards--always { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dcards { grid-auto-rows: 1fr; }
.dcard { min-height: 64px; }
/* css/components/summary.css */
.summary {
display: none;
border: var(--bw) solid var(--g-300);
border-top-color: var(--dark-surface);
border-radius: var(--r-2);
background: var(--g-0);
}
.summary__inner {
border: 0;
border-radius: 0;
overflow: hidden;
background: var(--g-0);
}
.summary__head {
margin: 0;
padding: var(--sp-3) var(--sp-4);
border-bottom: 0;
background: var(--dark-surface);
color: var(--g-0);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.summary__avail {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px var(--sp-2);
margin: 0;
padding: var(--sp-3) var(--sp-4);
border-bottom: var(--bw) solid var(--g-200);
background: var(--g-0);
}
.summary__avail-detail {
flex: 1 1 auto;
min-width: 0;
color: var(--text-2);
font-family: var(--font-text);
font-size: var(--fs-small);
line-height: 1.35;
}
.summary__avail-detail:empty { display: none; }
.summary__stale {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: 0;
padding: var(--sp-3) var(--sp-4);
border-left: 3px solid var(--warn);
background: var(--warn-bg);
color: var(--warn);
font-family: var(--font-text);
font-size: var(--fs-body-sm);
}
.summary__stale p { margin: 0; flex: 1 1 auto; }
.summary__warnings {
margin: 0;
padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + var(--sp-4));
border-left: 3px solid var(--info);
background: var(--info-bg);
color: var(--info);
font-family: var(--font-text);
font-size: var(--fs-small);
line-height: 1.4;
}
.summary__warnings:empty { display: none; }
.summary__rows { margin: 0; padding: var(--sp-4); background: var(--g-50); }
.summary__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
padding: 3px 0;
font-family: var(--font-text);
font-size: var(--fs-body-sm);
}
.summary__row dt { color: var(--text-2); margin: 0; }
.summary__row dd { margin: 0; color: var(--text); text-align: right; }
.summary__row--sep { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--bw) solid var(--g-300); }
.summary__row--sep dd { font-weight: 600; }
.summary__total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-2);
margin: 0;
padding: var(--sp-4);
border-top: var(--bw-2) solid var(--ink);
}
.summary__total-label {
color: var(--text);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.summary__total-value {
margin-left: auto;
color: var(--ink);
font-family: var(--font-price);
font-weight: 800;
font-size: var(--fs-price-total);
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums lining-nums;
}
.summary__vatnote { display: block; width: 100%; margin-top: 2px; text-align: right; color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); }
.summary__total { flex-wrap: wrap; }
.summary__free { margin: 0; padding: 0 var(--sp-4) var(--sp-4); color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); }
.summary .field { margin: 0; padding: 0 var(--sp-4) var(--sp-3); }
.summary__cta { display: flex; width: calc(100% - var(--sp-4) * 2); margin: 0 var(--sp-4) var(--sp-3); }
.summary__links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0 var(--sp-4); padding: var(--sp-2) 0 var(--sp-3); border-top: var(--bw) solid var(--g-200); }
.summary.is-busy .summary__rows, .summary.is-busy .summary__total { opacity: 0.5; }
.summary.is-stale .summary__cta { opacity: 0.45; pointer-events: none; }
@media (min-width: 1024px) {
.summary { display: block; position: sticky; top: calc(var(--nav-h) + 16px); align-self: start;
max-height: calc(100vh - var(--nav-h) - 32px); overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: var(--g-400) transparent; }
}
.summary__row dd, .summary__row dt .num { font-variant-numeric: tabular-nums lining-nums; }
.summary__links { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.summary__links .btn--link { justify-content: flex-start; min-height: 44px; text-align: left; text-decoration: none; }
.summary__links .btn--link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) and (pointer: fine) {
.summary__links { gap: 0; }
.summary__links .btn--link { min-height: 32px; }
}
@supports (animation-timeline: scroll()) {
@media (min-width: 1024px) {
.summary::after {
content: "";
position: sticky;
bottom: 0;
z-index: 1;
display: block;
height: 28px;
margin-top: -28px;
border-top: var(--bw) solid var(--g-300);
background: var(--g-0) url('data:image/svg+xml;utf8,') center / 18px 18px no-repeat;
pointer-events: none;
opacity: 0;
animation: gm-summary-cue linear both;
animation-timeline: scroll(nearest block);
}
}
@keyframes gm-summary-cue { 0%, 96% { opacity: 1; } 100% { opacity: 0; } }
}
/* css/components/sheet.css */
.sheet { display: block; }
.sheet__bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-sheet);
display: flex;
align-items: center;
gap: var(--sp-3);
height: 64px;
padding: 0 var(--gutter);
border-top: var(--bw-2) solid var(--ink);
background: var(--g-0);
box-shadow: var(--shadow-2);
}
.sheet__toggle {
display: flex;
align-items: baseline;
gap: var(--sp-1);
flex: 1 1 auto;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--text);
text-align: left;
cursor: pointer;
}
.sheet__toggle { flex-wrap: wrap; align-content: center; }
.sheet__toggle:focus-visible { box-shadow: var(--focus); outline: none; }
.sheet__total {
font-family: var(--font-price);
font-weight: 800;
letter-spacing: -0.02em;
font-size: var(--fs-price-total);
line-height: 1;
font-variant-numeric: tabular-nums lining-nums;
}
.sheet__vatnote { color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); }
.sheet__caret { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 2; }
.sheet__toggle[aria-expanded="true"] .sheet__caret { transform: rotate(180deg); }
.sheet__panel {
position: fixed;
left: 0;
right: 0;
bottom: 64px;
z-index: var(--z-sheet);
max-height: 70vh;
overflow-y: auto;
border-top: var(--bw-2) solid var(--border-strong);
background: var(--surface);
box-shadow: var(--shadow-3);
}
.sheet__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) var(--gutter);
border-bottom: 0;
background: var(--dark-surface);
color: var(--g-0);
}
.sheet__close { color: var(--g-0); }
.sheet__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.sheet__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
background: transparent;
color: var(--text-2);
cursor: pointer;
}
.sheet__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.sheet__close:focus-visible { box-shadow: var(--focus); outline: none; }
.sheet__body { padding: var(--sp-4) var(--gutter); background: var(--g-50); }
.sheet__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
padding: 3px 0;
font-family: var(--font-text);
font-size: var(--fs-body-sm);
}
.sheet__row span:first-child { color: var(--text-2); }
.sheet__row span:last-child { font-variant-numeric: tabular-nums lining-nums; }
.sheet__row--sep {
margin: var(--sp-3) calc(var(--gutter) * -1) 0;
padding: var(--sp-3) var(--gutter);
border-top: var(--bw-2) solid var(--ink);
background: var(--g-0);
font-weight: 700;
}
.sheet__row--sep span:first-child { color: var(--text); }
@media (min-width: 1024px) {
.sheet { display: none; }
}
.sheet__toggle { align-self: stretch; min-height: 44px; }
.sheet::before {
content: "";
position: fixed;
inset: 0;
z-index: calc(var(--z-sheet) - 1);
background: rgba(29, 29, 27, .45);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-base) var(--ease);
}
.sheet:has(.sheet__panel:not([hidden]))::before { opacity: 1; }
.sheet__panel { overscroll-behavior: contain; }
.sheet__toggle { row-gap: 0; }
.sheet__caret { align-self: center; }
.sheet__avail { display: flex; flex-basis: 100%; min-width: 0; }
.sheet__avail .pill { max-width: 100%; min-width: 0; height: 20px; }
.sheet__avail [data-js="avail-label"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 360px) {
.sheet__toggle { row-gap: 2px; }
.sheet__avail .pill { height: 22px; }
}
.sheet__avail-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin: 0 0 var(--sp-3);
padding: 0 0 var(--sp-3);
border-bottom: var(--bw) solid var(--g-200);
}
.sheet__avail-detail { color: var(--text-2); font-family: var(--font-text); font-size: var(--fs-small); line-height: 1.35; }
.sheet__actions { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--gutter) var(--sp-5); background: var(--g-50); }
.sheet__actions .field { margin: 0 0 var(--sp-2); }
.sheet__actions .btn { width: 100%; min-height: 44px; }
/* css/components/dropzone.css */
.drop {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: 140px;
padding: var(--sp-5) var(--sp-4);
border: var(--bw) dashed var(--border-input);
border-radius: var(--r-2);
background: var(--surface-alt);
text-align: center;
font-size: var(--fs-body-sm);
color: var(--text-2);
transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.drop.is-over { border-color: var(--ink); border-style: solid; background: var(--g-100); }
.drop.is-invalid { border-color: var(--err); }
.drop__icon { width: 24px; height: 24px; color: var(--text-3); }
.drop__text, .drop__hint { margin: 0; }
.drop__text { color: var(--text); }
.drop__text button, .drop__text .drop__pick { border: 0; background: transparent; padding: 0; color: var(--link); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.drop__hint { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--text-2); }
.drop__list:empty { display: none; }
.drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop + .field { margin-top: var(--sp-6); }
.drop__bar { width: 100%; max-width: 320px; height: 4px; margin-top: var(--sp-2); background: var(--g-200); border-radius: var(--r-pill); overflow: hidden; }
.drop__bar span { display: block; height: 100%; width: 0; background: var(--red-bar); transition: width var(--t-base) var(--ease); }
.drop__pct { font-size: var(--fs-small); font-variant-numeric: tabular-nums lining-nums; color: var(--text-2); }
.drop-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.drop-file { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border: var(--bw) solid var(--border); border-radius: var(--r-2); background: var(--surface); font-size: var(--fs-body-sm); }
.drop-file__thumb { flex: none; width: 48px; height: 48px; object-fit: contain; background: var(--g-100); border-radius: var(--r-1); }
.drop-file__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drop-file__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-file__meta { font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; }
.drop-file__check { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-small); }
.drop-file__check .icon { width: 14px; height: 14px; margin-top: 2px; flex: none; }
.drop-file__check--ok { color: var(--ok); }
.drop-file__check--warn { color: var(--warn); }
.drop-file__check--err { color: var(--err); }
.drop-file__actions { flex: none; display: flex; align-items: center; gap: var(--sp-2); }
.drop__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); width: 100%; }
.drop-list, .drop__list { width: 100%; text-align: left; }
.drop-file { flex-wrap: wrap; }
.drop-file__main { gap: 4px; }
.drop-file__check + .drop-file__check { margin-top: 2px; }
.drop-file .drop__bar { max-width: none; margin-top: 4px; }
.drop-file:not(.is-uploading) .drop__bar { display: none; }
.drop-file__thumb { display: block; border: var(--bw) solid var(--hairline); }
.drop-file__actions { margin-left: auto; }
.upl { margin: var(--sp-4) 0 0; padding: var(--sp-4); border: var(--bw) solid var(--border); border-radius: var(--r-2); background: var(--surface); }
.upl__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.upl__title { margin: 0; font-size: var(--fs-h5); }
.upl__subject { width: 100%; max-width: 240px; margin: 0 auto var(--sp-2); text-align: left; }
.upl__proof { margin: var(--sp-3) 0; padding: var(--sp-3); border: var(--bw) solid var(--border-strong); border-radius: var(--r-1); background: var(--g-50); }
.upl__proof-t { margin: 0 0 var(--sp-2); font-weight: 600; }
.upl__proof-form { margin-top: var(--sp-2); }
.upl__proof-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.upl__proof-actions .btn { flex: 1 1 auto; min-width: 160px; }
@media (min-width: 768px) {
.upl__proof-actions .btn { flex: 0 0 auto; }
}
/* css/components/timeline.css */
.tl { list-style: none; margin: 0; padding: 0; }
.tl__item { position: relative; display: grid; gap: 2px; padding: 0 0 var(--sp-5) var(--sp-6); }
.tl__item::before {
content: "";
position: absolute;
left: 5px; top: 14px; bottom: 0;
width: 2px;
background: var(--g-300);
}
.tl__item:last-child { padding-bottom: 0; }
.tl__item:last-child::before { display: none; }
.tl__item::after {
content: "";
position: absolute;
left: 0; top: 2px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--g-0);
border: var(--bw-2) solid var(--g-400);
}
.tl__label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-2); }
.tl__when { font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; }
.tl__note { font-size: var(--fs-body-sm); }
.tl__note a { font-variant-numeric: tabular-nums lining-nums; }
.tl__item.is-done::after { background: var(--ink); border-color: var(--ink); }
.tl__item.is-done::before { background: var(--ink); }
.tl__item.is-done .tl__label { color: var(--text); }
.tl__item.is-current::after { background: var(--red-bar); border-color: var(--red-bar); box-shadow: 0 0 0 3px var(--red-tint); }
.tl__item.is-current .tl__label { color: var(--text); }
.tl__item.is-next::before { background: repeating-linear-gradient(to bottom, var(--g-400) 0 4px, transparent 4px 8px); }
.tl__item.is-next::after { border-style: dashed; }
@media (min-width: 1024px) {
.tl--row { display: flex; gap: var(--sp-4); }
.tl--row .tl__item { flex: 1 1 0; padding: var(--sp-5) 0 0; }
.tl--row .tl__item::before { left: 12px; right: 0; top: 5px; bottom: auto; width: auto; height: 2px; }
.tl--row .tl__item::after { top: 0; left: 0; }
}
/* css/components/cart.css */
.cart-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.cart-line {
min-width: 0;
display: flex; flex-wrap: wrap; gap: var(--sp-4);
padding: var(--sp-4);
border: 0;
border-radius: var(--r-2);
background: var(--g-100);
}
.cart-line__foot {
order: 2;
flex: 1 1 100%;
min-width: 0;
padding-top: var(--sp-3);
border-top: var(--bw) solid var(--g-300);
}
.cart-line__side { order: 1; }
.cart-line__media { flex: none; width: 104px; }
.cart-line__media img {
display: block; width: 104px; height: 104px;
padding: 10px;
object-fit: contain;
background: var(--g-0);
box-shadow: inset 0 0 0 1px var(--g-300);
border: 0;
border-radius: var(--r-1);
}
.cart-line img[data-fit="cover"] { object-fit: cover; }
.cart-line__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-line__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.cart-line__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.25; text-transform: none; }
.cart-line__name a { text-decoration: none; }
.cart-line__name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.cart-line__config { max-width: none; font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; }
.cart-line__config span + span::before { content: " | "; color: var(--text-3); }
.cart-line__job { font-size: 0.8125rem; color: var(--text-2); }
.cart-line__job strong { color: var(--text); font-weight: 600; }
.cart-line__ship { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; }
.cart-line__ship .icon { width: 14px; height: 14px; }
.cart-line__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cart-line__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 0; padding-top: 0; border-top: 0; }
.cart-line__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--sp-2); text-align: right; }
.cart-line__qty { font-size: var(--fs-body-sm); color: var(--text-2); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cart-line__total { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cart-line--child { margin-left: var(--sp-6); background: var(--g-50); box-shadow: inset 3px 0 0 var(--g-400); }
.cart-line--child .cart-line__media img { width: 48px; height: 48px; }
.cart-line--child .cart-line__media { width: 48px; }
.cart-line--child .cart-line__name { font-size: var(--fs-body-sm); font-weight: 500; }
.notice { display: flex; gap: var(--sp-2); align-items: flex-start; padding: 10px 12px; border-left: 3px solid var(--info); background: var(--info-bg); color: var(--text); font-size: var(--fs-body-sm); border-radius: 0 var(--r-1) var(--r-1) 0; }
.notice .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--info); }
.notice p { margin: 0; max-width: none; }
.notice--ok { border-left-color: var(--ok); background: var(--ok-bg); }
.notice--warn { border-left-color: var(--warn); background: var(--warn-bg); }
.notice--err { border-left-color: var(--err); background: var(--err-bg); }
.cart-summary { border: 0; border-radius: var(--r-2); overflow: hidden; background: var(--g-100); }
.cart-summary__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 44px; padding: 0 var(--sp-4); background: var(--dark-surface); color: var(--g-0); }
.cart-summary__head .label { max-width: none; margin: 0; color: var(--g-0); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.cart-summary__head a { color: var(--g-0); font-size: var(--fs-body-sm); }
.cart-summary__body { padding: var(--sp-4); }
.cart-summary__body .btn--lg { width: 100%; margin-top: var(--sp-4); }
.cart-summary__note { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--text-2); }
.cart-summary__field { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.cart-summary__rows { margin: 0; }
.cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 7px 0; }
.cart-summary__row dt { margin: 0; color: var(--text-2); font-size: var(--fs-body-sm); }
.cart-summary__row dd { margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.cart-summary__row--total {
margin: var(--sp-3) calc(-1 * var(--sp-4)) 0;
padding: var(--sp-3) var(--sp-4);
background: var(--dark-surface);
color: var(--g-0);
align-items: baseline;
}
.cart-summary__row--total dt { color: var(--g-0); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-label); }
.cart-summary__row--total dd { color: var(--g-0); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-price-total); line-height: 1; letter-spacing: -.02em; }
.cart-groups { margin-top: var(--sp-4); padding: var(--sp-4); border: 0; border-radius: var(--r-2); background: var(--g-100); }
.cart-groups .label { max-width: none; margin: 0 0 var(--sp-2); padding-bottom: var(--sp-2); border-bottom: var(--rule-section, 2px solid var(--ink)); }
.cart-groups ul { list-style: none; margin: 0; padding: 0; }
.cart-groups li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 7px 0; font-size: var(--fs-body-sm); color: var(--text-2); }
.cart-groups li + li { border-top: var(--bw) solid var(--g-300); }
.cart-summary__row--total + .cart-summary__row--total { margin-top: 0; border-top: var(--bw) solid var(--ink-soft); }
.cart-summary__row--total:last-child { border-bottom-left-radius: var(--r-2); border-bottom-right-radius: var(--r-2); }
.cart-summary__field .input { height: 32px; font-size: var(--fs-body-sm); }
@media (max-width: 719px) {
.cart-line { flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3); }
.cart-line__media, .cart-line__media img { width: 76px; height: 76px; }
.cart-line__media img { padding: 6px; }
.cart-line__side { flex-basis: 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-3); text-align: left; padding-top: var(--sp-2); border-top: var(--bw) solid var(--g-300); }
.cart-line--child { margin-left: var(--sp-3); }
.cart-line__name { font-size: var(--fs-body); }
}
/* css/components/rfq.css */
.rfq { container: rfq / inline-size; }
.rfq__intro { margin: 0 0 var(--sp-4); max-width: 68ch; color: var(--text-2); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.rfq__config { margin: 0 0 var(--sp-5); padding: var(--sp-4); border-radius: var(--r-2); background: var(--g-50); box-shadow: inset 0 0 0 1px var(--g-300); }
.rfq__config-title { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label-sm); letter-spacing: var(--ls-label); text-transform: uppercase; }
.rfq__rows { margin: 0; }
.rfq__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 3px 0; font-size: var(--fs-body-sm); }
.rfq__row dt { margin: 0; color: var(--text-2); }
.rfq__row dd { margin: 0; text-align: right; color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.rfq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.rfq__grid > .field + .field { margin-top: 0; }
@container rfq (min-width: 520px) {
.rfq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rfq__grid > .field--full { grid-column: 1 / -1; }
}
.rfq .textarea { min-height: 112px; }
.rfq .field__error[hidden] { display: none; }
.rfq__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rfq__privacy { margin-top: var(--sp-4); }
.rfq__privacy .check__text a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.rfq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); }
.rfq__note { margin: 0; color: var(--text-2); font-size: var(--fs-small); }
.rfq__alert { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--border); border-radius: var(--r-1); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.rfq__alert--ok { background: var(--ok-bg); border-left-color: var(--ok); color: var(--text); }
.rfq__alert--err { background: var(--err-bg); border-left-color: var(--err); color: var(--err); }
.rfq__alert-text { margin: 0; max-width: none; font-weight: 600; }
.rfq__alert-list { margin: var(--sp-1) 0 0; padding-left: 1.1em; }
.rfq__done { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin: 0; }
.rfq__done[hidden] { display: none; }
.rfq__done-text { flex: 1 1 260px; margin: 0; max-width: none; }
.rfq__done-text strong { overflow-wrap: anywhere; }
.rfq__done:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ok); }
#richiesta { scroll-margin-top: var(--sp-4); }
.summary__total--quote { align-items: center; }
.summary__quote { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.1; letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.sheet__total--quote { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; }
.cfg__rfq-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0 0; color: var(--text-2); font-size: var(--fs-small); }
.cfg__rfq-hint[hidden] { display: none; }
.summary .cfg__rfq-hint { margin: 0; padding: var(--sp-3) var(--sp-4) 0; }
@media (min-width: 1024px) { .cfg .cfg__rfq-hint { display: none; } }
.rfq-dialog { max-height: calc(100vh - 64px); max-height: calc(100dvh - 32px); }
.rfq-dialog .modal__body { max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); overscroll-behavior: contain; }
.rfq-dialog .rfq__config { margin-bottom: var(--sp-4); }
@media (max-width: 1023px) {
.rfq__privacy .check { min-height: 44px; padding-block: var(--sp-2); }
.rfq__privacy .check__input { width: 22px; height: 22px; margin-top: 0; }
.rfq__privacy .check__input::before { width: 13px; height: 13px; }
.rfq__actions .btn, .cfg__rfq-hint .btn { min-height: 44px; }
.rfq-dialog .modal__close { width: 44px; height: 44px; }
}
@media (max-width: 767px) {
.rfq__actions .btn { width: 100%; }
}
/* css/components/assistente.css */
.aiw__launch {
position: fixed;
right: var(--gutter);
bottom: calc(var(--fixed-bars, 0px) + var(--sp-4));
z-index: calc(var(--z-sheet) + 2);
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
padding: 0;
overflow: visible;
border: 0;
border-radius: 50%;
background: var(--red);
color: var(--g-0);
box-shadow: 0 0 0 3px var(--g-0), 0 10px 26px rgba(29, 29, 27, .30);
cursor: pointer;
transition: background-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.aiw__launch .icon { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.aiw__launch-label { display: none; }
.aiw__ai {
position: absolute;
top: -4px;
right: -6px;
min-width: 30px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--ink);
color: var(--g-0);
box-shadow: 0 0 0 2px var(--g-0);
font-family: var(--font-display);
font-weight: 800;
font-size: 11px;
line-height: 20px;
letter-spacing: .06em;
text-align: center;
pointer-events: none;
}
.aiw__launch:hover { background: var(--red-hover); transform: translateY(-2px); box-shadow: 0 0 0 3px var(--g-0), 0 14px 30px rgba(29, 29, 27, .34); }
.aiw__launch:active { background: var(--red-active); transform: translateY(0); }
.aiw__launch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--g-0), 0 0 0 5px var(--ink), 0 10px 26px rgba(29, 29, 27, .30); }
.aiw__launch[aria-expanded="true"] { display: none; }
@media (prefers-reduced-motion: reduce) { .aiw__launch, .aiw__launch:hover { transform: none; } }
body:has(.drawer:not([hidden])) .aiw__launch,
body:has(.sheet__panel:not([hidden])) .aiw__launch,
body:has(dialog[open]) .aiw__launch { display: none; }
@media (min-width: 1024px) {
body.page-product .aiw__launch { right: auto; left: var(--gutter); }
}
@media (max-width: 479px) {
.aiw__launch { width: 64px; height: 64px; }
.aiw__launch .icon { width: 30px; height: 30px; }
}
.aiw__panel {
position: fixed;
inset: 0;
z-index: calc(var(--z-modal) - 10);
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
height: 100dvh;
background: var(--g-0);
color: var(--text);
font-family: var(--font-text);
}
.aiw__panel[hidden] { display: none; }
.aiw__panel.is-entering { animation: aiw-in .22s var(--ease); }
@keyframes aiw-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 768px) {
.aiw__panel {
top: 0;
right: 0;
bottom: var(--fixed-bars, 0px);
left: auto;
width: 400px;
max-width: 100vw;
height: auto;
border-left: var(--bw-2) solid var(--ink);
box-shadow: var(--shadow-3);
}
@keyframes aiw-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (min-width: 1366px) { .aiw__panel { width: 420px; } }
@media (prefers-reduced-motion: reduce) { .aiw__panel.is-entering { animation: none; } }
@media (max-width: 767px) {
html.aiw-lock, html.aiw-lock body { overflow: hidden; }
}
.aiw__head {
flex: none;
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-1) var(--sp-2) var(--sp-4);
border-bottom: 3px solid var(--red-bar);
background: var(--dark-surface);
color: var(--g-0);
}
.aiw__head-text { flex: 1 1 auto; min-width: 0; }
.aiw__title {
margin: 0;
color: var(--g-0);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h4);
line-height: 1.2;
}
.aiw__sub { margin: 2px 0 0; color: var(--g-400); font-size: var(--fs-small); line-height: 1.3; }
.aiw__close {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: var(--r-1);
background: transparent;
color: var(--g-0);
cursor: pointer;
}
.aiw__close .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.aiw__close:hover { background: var(--dark-surface-alt); }
.aiw__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--dark-surface), 0 0 0 4px var(--g-0); }
.aiw__log {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--sp-4) var(--sp-4) var(--sp-6);
background: var(--g-200);
scroll-behavior: smooth;
}
.aiw__log:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .aiw__log { scroll-behavior: auto; } }
.aiw__intro { padding-bottom: var(--sp-2); }
.aiw__intro-text { margin: 0 0 var(--sp-4); max-width: none; font-size: var(--fs-body); line-height: 1.5; }
.aiw__sugg-title,
.aiw__who {
margin: 0 0 var(--sp-2);
color: var(--text-2);
font-family: var(--font-text);
font-weight: 600;
font-size: var(--fs-small);
line-height: 1.3;
}
.aiw__sugg { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.aiw__sugg li { margin: 0; max-width: 100%; }
.aiw__chip {
display: inline-flex;
align-items: center;
max-width: 100%;
min-height: 44px;
padding: var(--sp-2) var(--sp-3);
border: var(--bw) solid var(--g-300);
border-radius: var(--r-1);
background: var(--g-0);
color: var(--text);
font-family: var(--font-text);
font-size: var(--fs-body-sm);
font-weight: 500;
line-height: 1.3;
text-align: left;
cursor: pointer;
}
.aiw__chip:hover { border-color: var(--ink); }
.aiw__chip:focus-visible { outline: none; box-shadow: var(--focus); }
.aiw__chip:disabled { opacity: .5; cursor: default; }
.aiw__q {
width: fit-content;
max-width: 85%;
margin: var(--sp-5) 0 0 auto;
padding: 10px 14px 11px;
border: 0;
border-radius: 16px 16px 4px 16px;
background: var(--dark-surface);
color: var(--g-0);
box-shadow: 0 1px 2px rgba(29, 29, 27, .12);
}
.aiw__q:first-child { margin-top: 0; }
.aiw__q .aiw__who {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.aiw__q-text { margin: 0; max-width: none; color: var(--g-0); font-weight: 500; font-size: var(--fs-body); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.aiw__a {
width: fit-content;
min-width: min(240px, 100%);
max-width: 94%;
margin: var(--sp-2) auto 0 0;
padding: var(--sp-3) var(--sp-4) var(--sp-4);
border: var(--bw) solid var(--g-300);
border-radius: 4px 16px 16px 16px;
background: var(--g-0);
box-shadow: 0 1px 2px rgba(29, 29, 27, .06), 0 6px 16px rgba(29, 29, 27, .08);
}
.aiw__a > .aiw__who {
display: flex;
align-items: center;
gap: 7px;
color: var(--text);
font-weight: 700;
}
.aiw__a > .aiw__who::before {
content: "";
flex: none;
width: 20px;
height: 20px;
background: url("/assets/brand/icon-32.png") center / contain no-repeat;
}
.aiw__a:focus { outline: none; }
.aiw__a:focus-visible { box-shadow: var(--focus); }
.aiw__a p { margin: 0 0 var(--sp-3); max-width: none; font-size: var(--fs-body); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.aiw__a p:last-child { margin-bottom: 0; }
.aiw__a > * + .aiw-b { margin-top: var(--sp-3); }
.aiw__a.is-waiting { border-color: var(--g-300); box-shadow: none; }
.aiw__src { margin: var(--sp-3) 0 0 !important; color: var(--text-2); font-size: var(--fs-small) !important; line-height: 1.4 !important; }
.aiw__after { margin-top: var(--sp-3); }
.aiw__status {
flex: none;
min-height: 0;
margin: 0;
padding: 0 var(--sp-4);
background: var(--g-50);
color: var(--text-2);
font-size: var(--fs-small);
line-height: 1.4;
}
.aiw__status:not(:empty) { padding-top: var(--sp-2); padding-bottom: var(--sp-2); border-top: var(--bw) solid var(--g-200); }
.aiw__dots { display: inline-flex; gap: 3px; margin-right: var(--sp-2); vertical-align: middle; }
.aiw__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); animation: aiw-dot 1s infinite ease-in-out; }
.aiw__dots i:nth-child(2) { animation-delay: .15s; }
.aiw__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aiw-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aiw__dots i { animation: none; opacity: .6; } }
.aiw__form {
flex: none;
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
gap: var(--sp-2);
align-items: end;
padding: var(--sp-3) var(--sp-4) var(--sp-3);
padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
border-top: var(--bw-2) solid var(--ink);
background: var(--g-0);
}
.aiw__input {
display: block;
width: 100%;
min-height: 44px;
max-height: 132px;
margin: 0;
padding: 11px var(--sp-3);
border: var(--bw) solid var(--border-input);
border-radius: var(--r-1);
background: var(--g-0);
color: var(--text);
font-family: var(--font-text);
font-size: 16px;
line-height: 1.3;
resize: none;
overflow-y: auto;
}
.aiw__input:hover { border-color: var(--ink); }
.aiw__input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), var(--focus); }
.aiw__send { width: 44px; height: 44px; padding: 0; }
.aiw__send .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.aiw__note {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
gap: var(--sp-3);
margin: 0;
max-width: none;
color: var(--text-2);
font-size: var(--fs-small);
line-height: 1.4;
}
.aiw__note a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.aiw__count { flex: none; font-variant-numeric: tabular-nums; }
.aiw__count.is-over { color: var(--err); font-weight: 600; }
.aiw-b { margin: 0; }
.aiw-b__title {
margin: 0 0 var(--sp-2);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
.aiw-cards { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.aiw-card {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: var(--sp-3);
align-items: start;
min-height: 72px;
padding: var(--sp-2);
border: var(--bw) solid var(--g-300);
border-radius: var(--r-1);
background: var(--g-0);
color: var(--text);
text-decoration: none;
}
.aiw-card:hover { border-color: var(--ink); text-decoration: none; color: var(--text); }
.aiw-card:focus-visible { outline: none; box-shadow: var(--focus); }
.aiw-card__img {
display: block;
width: 72px;
height: 72px;
object-fit: contain;
border-bottom: var(--bw-2) solid var(--ink);
background: var(--g-0);
}
.aiw-card__img[data-fit="cover"] { object-fit: cover; }
.aiw-card__ph {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-bottom: 3px solid var(--red-bar);
background: var(--dark-surface);
color: var(--g-0);
}
.aiw-card__ph .icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.aiw-card__body { min-width: 0; display: grid; gap: 2px; }
.aiw-card__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9375rem;
line-height: 1.25;
overflow-wrap: anywhere;
}
.aiw-card__meta { color: var(--text-2); font-size: var(--fs-small); line-height: 1.35; overflow-wrap: anywhere; }
.aiw-card__price {
margin-top: 2px;
color: var(--ink);
font-family: var(--font-price);
font-weight: 700;
font-size: var(--fs-body-sm);
font-variant-numeric: tabular-nums lining-nums;
}
.aiw-card__ship { color: var(--text-2); font-size: var(--fs-small); line-height: 1.35; }
.aiw-price { overflow: hidden; border-radius: var(--r-1); box-shadow: inset 0 0 0 1px var(--g-300); background: var(--g-0); }
.aiw-price__head {
padding: var(--sp-2) var(--sp-3);
background: var(--dark-surface);
color: var(--g-0);
}
.aiw-price__label { display: block; color: var(--g-400); font-size: var(--fs-small); line-height: 1.3; }
.aiw-price__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.aiw-price__rows { margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--g-50); }
.aiw-price__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-3);
padding: 6px 0;
border-bottom: var(--bw) solid var(--g-200);
font-size: var(--fs-body-sm);
}
.aiw-price__row:last-child { border-bottom: 0; }
.aiw-price__row dt { margin: 0; color: var(--text-2); }
.aiw-price__row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }
.aiw-price__total {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-3);
padding: var(--sp-3);
border-top: var(--bw-2) solid var(--ink);
}
.aiw-price__total span:first-child { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.aiw-price__total strong { color: var(--ink); font-family: var(--font-price); font-size: var(--fs-h3); font-variant-numeric: tabular-nums lining-nums; }
.aiw-price__tiers { margin: 0; padding: 0 var(--sp-3) var(--sp-2); }
.aiw-price__tiers table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.aiw-price__tiers caption { padding: 0 0 var(--sp-1); color: var(--text-2); text-align: left; font-size: var(--fs-small); }
.aiw-price__tiers th, .aiw-price__tiers td { padding: 4px 0; border-top: var(--bw) solid var(--g-200); text-align: left; font-weight: 400; }
.aiw-price__tiers td { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.aiw-price__tiers tr.is-current th, .aiw-price__tiers tr.is-current td { font-weight: 700; }
.aiw-price__note { margin: 0 !important; padding: 0 var(--sp-3) var(--sp-2); color: var(--text-2); font-size: var(--fs-small) !important; line-height: 1.4 !important; }
.aiw-price__cta { padding: 0 var(--sp-3) var(--sp-3); }
.aiw-price__cta .btn { width: 100%; min-height: 44px; }
.aiw-order { border: var(--bw) solid var(--g-300); border-radius: var(--r-1); background: var(--g-0); }
.aiw-order__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-bottom: var(--bw-2) solid var(--ink);
}
.aiw-order__num { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.aiw-order__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); margin: 0; padding: var(--sp-3); background: var(--g-50); }
.aiw-order__facts div { min-width: 0; }
.aiw-order__facts dt { color: var(--text-2); font-size: var(--fs-small); }
.aiw-order__facts dd { margin: 0; font-weight: 600; font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums lining-nums; }
.aiw-order__lines { margin: 0; padding: 0 var(--sp-3); list-style: none; }
.aiw-order__line { padding: var(--sp-2) 0; border-bottom: var(--bw) solid var(--g-200); }
.aiw-order__line:last-child { border-bottom: 0; }
.aiw-order__line-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.aiw-order__line-name { min-width: 0; font-size: var(--fs-body-sm); font-weight: 600; overflow-wrap: anywhere; }
.aiw-order__line-file { margin-top: 2px; color: var(--text-2); font-size: var(--fs-small); }
.aiw-order__line-file.is-attention { color: var(--warn); font-weight: 600; }
.aiw-order__ship { padding: var(--sp-2) var(--sp-3); border-top: var(--bw) solid var(--g-200); font-size: var(--fs-body-sm); }
.aiw-order__ship a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.aiw-order__ship .icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.aiw-order__foot { padding: 0 var(--sp-3) var(--sp-3); }
.aiw-order__foot .btn { width: 100%; min-height: 44px; }
.aiw-verify { padding: var(--sp-3); border: var(--bw) solid var(--g-300); border-left: 3px solid var(--ink); border-radius: var(--r-1); background: var(--g-50); }
.aiw-verify__msg { margin: 0 0 var(--sp-3) !important; font-weight: 600; font-size: var(--fs-body-sm) !important; }
.aiw-verify .field + .field { margin-top: var(--sp-3); }
.aiw-verify .field__label { display: block; margin-bottom: 4px; }
.aiw-verify .input { width: 100%; height: 44px; font-size: 16px; }
.aiw-verify__actions { margin-top: var(--sp-3); }
.aiw-verify__actions .btn { width: 100%; min-height: 44px; }
.aiw-verify__priv { margin: var(--sp-2) 0 0 !important; color: var(--text-2); font-size: var(--fs-small) !important; line-height: 1.4 !important; }
.aiw-verify.is-locked { display: flex; gap: var(--sp-2); align-items: flex-start; border-left-color: var(--warn); }
.aiw-verify.is-locked .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--warn); stroke-width: 2; }
.aiw-list ul { margin: 0; padding: 0 0 0 var(--sp-5); font-size: var(--fs-body-sm); line-height: 1.5; }
.aiw-list li + li { margin-top: 4px; }
.aiw-table { max-width: 100%; overflow-x: auto; border: var(--bw) solid var(--g-300); border-radius: var(--r-1); }
.aiw-table table { width: 100%; min-width: 320px; border-collapse: collapse; font-size: var(--fs-small); }
.aiw-table th, .aiw-table td { padding: var(--sp-2); border-bottom: var(--bw) solid var(--g-200); text-align: left; vertical-align: top; }
.aiw-table thead th { background: var(--dark-surface); color: var(--g-0); font-family: var(--font-display); font-weight: 700; }
.aiw-table tbody th { font-weight: 600; }
.aiw-links, .aiw-contacts { margin: 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--g-200); }
.aiw-links li, .aiw-contacts li { border-bottom: var(--bw) solid var(--g-200); }
.aiw-links a, .aiw-contacts a {
display: flex;
align-items: center;
gap: var(--sp-3);
min-height: 44px;
padding: var(--sp-2) 0;
color: var(--text);
font-size: var(--fs-body-sm);
text-decoration: none;
}
.aiw-links a:hover, .aiw-contacts a:hover { text-decoration: underline; text-underline-offset: 2px; }
.aiw-links a:focus-visible, .aiw-contacts a:focus-visible { outline: none; box-shadow: var(--focus); }
.aiw-links .icon, .aiw-contacts .icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.aiw-links a span { flex: 1 1 auto; font-weight: 600; }
.aiw-contacts__txt { display: grid; min-width: 0; }
.aiw-contacts__txt strong { font-weight: 600; }
.aiw-contacts__txt span { color: var(--text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
/* css/components/touch.css */
@media (max-width: 1023px) {
.input,
.select,
.textarea,
.input--sm,
.select--sm,
.qty__input,
.stepper__input,
.matrix__qty,
.filters__price .input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
font-size: 16px;
}
.adm-filters .input,
.adm-filters .select,
.adm-set__main .input,
.adm-set__main .select,
.adm-set__main .textarea,
.adm-row .input,
.adm-row .select,
.adm-inline {
font-size: 16px;
}
.adm-set__textarea { font-size: 14px !important; }
}
@media (pointer: coarse) {
.btn,
.chip,
.pagination a,
.pagination span,
.filters__item,
.stepper__btn,
.qty__btn,
.btn--link,
.chips__clear,
.filters__more,
.cart-vat__btn,
.adm-card__sheet,
.adm-card__num,
.tbl__link {
position: relative;
}
.btn::before,
.chip::before,
.pagination a::before,
.pagination span::before,
.filters__item::after,
.stepper__btn::before,
.qty__btn::before,
.btn--link::before,
.chips__clear::before,
.filters__more::before,
.cart-vat__btn::before,
.adm-card__sheet::before,
.adm-card__num::before,
.tbl__link::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 44px;
transform: translateY(-50%);
}
.cookie__actions .btn,
.filters-panel__foot .btn,
.notfound__search .btn { min-height: 44px; }
.sheet__toggle { align-self: stretch; min-height: 64px; }
.ftr__address a,
.ftr__legal-links a,
.contatti__links a,
.drawer__contacts a,
.hdr__util-link { display: inline-flex; align-items: center; min-height: 44px; }
.skip-link { min-height: 44px; display: inline-flex; align-items: center; }
.matrix__qty { height: 44px; }
}
@media (max-width: 1023px) {
.btn, .btn--sm, .btn--lg { height: auto; min-height: 44px; }
.btn--tap { height: 44px; min-height: 44px; }
.input, .select { height: 44px; }
.input--sm, .select--sm { height: 44px; }
.adm-filters .input, .adm-filters .select,
.adm-set__main .input, .adm-set__main .select,
.adm-row .input, .adm-row .select { height: 44px; }
.adm-set__main .textarea, .adm-set__textarea { height: auto; }
.hdr__searchbar .input { height: 44px; }
.hdr__searchbar .hdr__search-go { top: 6px; }
.stepper__input, .stepper__btn, .qty__input, .qty__btn { height: 44px; }
.stepper__btn, .qty__btn { width: 44px; }
.filters__price .input { width: 84px; }
}
/* css/print.css */
@media print {
:root { --gutter: 0; --section-gap: 12px; }
html, body { background: #FFFFFF; color: #000000; font-size: 11pt; }
body { overflow: visible; }
.hdr, .hdr__bar, .hdr__nav, .mega, .drawer, .hdr__scrim, .ftr, .cookie, .toasts, .stickybar, .filters-panel, .skip-link, .crumb__back { display: none; }
.btn, .btn-group, .form__actions, .filters, .filters-bar, .pagination, .drop, .seg { display: none; }
.container, .container--narrow { max-width: none; width: 100%; padding: 0; }
.main { padding: 0; min-height: 0; }
a { color: #000000; text-decoration: none; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444444; }
a[href^="/"]::after { content: ""; }
.panel, .cart-summary, .pcard, .tile { border-color: #999999; box-shadow: none; }
.surface--dark, .surface--brand { background: #FFFFFF; color: #000000; }
.surface--dark a, .surface--dark p, .surface--dark li { color: #000000; }
h1, h2, h3 { break-after: avoid; }
tr, .cart-line, .tl__item { break-inside: avoid; }
.tbl thead { display: table-header-group; }
.tbl tbody td { height: auto; padding: 4px 8px; }
.tbl tbody tr:nth-child(even) td { background: transparent; }
img { max-width: 100%; }
.print-only { display: block; }
.print-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #000000; }
.print-head img { height: 18mm; width: auto; }
.print-legal { margin-top: 16px; padding-top: 8px; border-top: 1px solid #999999; font-size: 8pt; color: #444444; }
@page { size: A4; margin: 14mm 12mm; }
}
.print-only { display: none; }