/* Шрифты Google Fonts: @font-face встроены, файлы грузятся с fonts.gstatic.com (googleapis не нужен) */
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpQ59CjCQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3rem);

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem;
  --s10: 2.5rem; --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem;

  /* Buschmann palette: white, light gray product tiles, ink text, near-black footer */
  --bg: #ffffff;
  --tile: #f2f2f2;
  --ink: #363c46;
  --ink-strong: #16161a;
  --muted: #7b818b;
  --line: oklch(0.3 0.01 260 / 0.14);
  --dark: #16161a;
  --dark-2: #0e0e11;
  --on-dark: #fffefe;
  --on-dark-muted: #b8bcc3;
  --radius-full: 9999px;
  --font: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --t: 180ms cubic-bezier(.16,1,.3,1);
  --wide: 1320px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { min-height: 100dvh; font-family: var(--font); font-size: var(--text-base); line-height: 1.55; color: var(--ink); background: var(--bg); }
img, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.12; font-weight: 700; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 3px; }
a, button, input, textarea { transition: color var(--t), background var(--t), border-color var(--t), opacity var(--t), transform var(--t); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

.skip-link { position: absolute; top: -100px; left: var(--s4); background: var(--dark); color: #fff; padding: var(--s2) var(--s4); z-index: 200; }
.skip-link:focus { top: var(--s4); }
.wrap { width: min(100% - var(--s12), var(--wide)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(100% - var(--s8), var(--wide)); } }

.label { font-size: var(--text-xs); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.muted { color: var(--muted); }
.section { padding-block: clamp(var(--s12), 7vw, var(--s24)); }
.section-tight { padding-top: 0; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s8); }

/* Pills — like the manufacturer's rounded buttons */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--s3) var(--s8); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.pill-outline { border-color: oklch(1 0 0 / .6); color: #fff; background: transparent; }
.pill-outline:hover { background: #fff; color: var(--dark); border-color: #fff; }
.pill-dark { background: var(--dark); color: #fff; }
.pill-dark:hover { background: #2a2a30; }
.pill-outline-dark { border-color: var(--ink-strong); color: var(--ink-strong); }
.pill-outline-dark:hover { background: var(--ink-strong); color: #fff; }
.pill-block { width: 100%; }
.pill[disabled] { opacity: .5; cursor: default; }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: oklch(0.12 0.005 260 / .85); backdrop-filter: blur(14px); color: var(--on-dark); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: 68px; }
.logo { color: #fff; }
.logo img { height: 22px; width: auto; }
.nav { display: flex; gap: var(--s6); }
.nav a { text-decoration: none; font-size: var(--text-sm); color: var(--on-dark); opacity: .85; padding-block: var(--s2); }
.nav a:hover { opacity: 1; }
.cart-btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s4); border: 1px solid oklch(1 0 0 / .35); border-radius: var(--radius-full); font-size: var(--text-sm); color: #fff; }
.cart-btn:hover { background: #fff; color: var(--dark); }
.cart-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--radius-full); background: #fff; color: var(--dark); font-size: .75rem; font-weight: 700; }
.cart-btn:hover .cart-count { background: var(--dark); color: #fff; }
.cart-count[hidden] { display: none; }
.cart-btn.bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.08); } }
@media (max-width: 760px) { .nav { display: none; } .cart-btn span:first-of-type { display: none; } .cart-btn { padding-inline: var(--s3); } }

/* Hero — dark, like the original */
.hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; background: var(--dark-2); color: #fff; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; opacity: .85; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.1 0 0 / .92) 0%, oklch(0.1 0 0 / .6) 50%, oklch(0.1 0 0 / .2) 100%), linear-gradient(0deg, oklch(0.1 0 0 / .85) 0%, transparent 45%); }
.hero-content { position: relative; z-index: 1; padding-block: clamp(var(--s16), 10vw, var(--s24)) clamp(var(--s12), 6vw, var(--s20)); max-width: 640px; margin-left: calc((100% - min(100% - var(--s12), var(--wide))) / 2); }
.hero h1 { color: #fff; font-size: clamp(1.75rem, 1rem + 3.2vw, 3rem); margin-bottom: var(--s5); }
.hero-sub { color: var(--on-dark-muted); font-size: var(--text-base); max-width: 48ch; margin-bottom: var(--s8); }
@media (max-width: 640px) { .hero { min-height: auto; } .hero-img { object-position: 60% 50%; } }

/* Product grid — gray tiles, uppercase names */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.card { display: flex; flex-direction: column; gap: var(--s3); }
.card-media { position: relative; background: var(--tile); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 0; width: 100%; cursor: pointer; }
.card-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.card-media:hover img { transform: scale(1.04); }
.card-badge { position: absolute; top: var(--s3); left: var(--s3); background: #fff; border-radius: var(--radius-full); padding: var(--s1) var(--s3); font-size: var(--text-xs); color: var(--ink); }
.card-name { font-size: var(--text-sm); font-weight: 400; letter-spacing: .04em; }
.card-name button { text-transform: uppercase; text-align: left; letter-spacing: inherit; }
.card-name button:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-short { font-size: var(--text-xs); color: var(--muted); }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s2); }
.card-price { font-weight: 700; font-size: var(--text-base); color: var(--ink-strong); display: flex; flex-direction: column; line-height: 1.2; }
.card-price small, .cart-item-sum small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--muted); }
.rate-note { font-size: var(--text-xs); color: var(--muted); max-width: 64ch; margin: calc(-1 * var(--s6)) 0 var(--s8); }
.cart-total-rub { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted); margin-top: calc(-1 * var(--s2)); }
.add-btn { min-height: 40px; padding: var(--s2) var(--s5); border-radius: var(--radius-full); border: 1px solid var(--ink-strong); color: var(--ink-strong); font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; }
.add-btn:hover { background: var(--ink-strong); color: #fff; }
.add-btn.added { background: var(--ink-strong); color: #fff; }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; gap: var(--s8); } .card-media { aspect-ratio: 4 / 3; } }

/* Terms */
.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8); margin-top: var(--s6); border-top: 1px solid var(--line); padding-top: var(--s6); }
.terms dt { font-weight: 700; margin-bottom: var(--s2); color: var(--ink-strong); }
.terms dd { font-size: var(--text-sm); color: var(--ink); }
@media (max-width: 760px) { .terms { grid-template-columns: 1fr; gap: var(--s6); } }

/* About */
.about { background: #f6f7fb; padding-block: clamp(var(--s12), 7vw, var(--s20)); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(var(--s8), 6vw, var(--s20)); }
.about-text h2 { font-size: var(--text-xl); margin-bottom: var(--s5); }
.about-text p { font-size: var(--text-sm); margin-bottom: var(--s8); max-width: 50ch; }
.about-grid img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } .about-grid img { order: -1; } }

/* Footer — near-black like the original */
.footer { background: var(--dark); color: var(--on-dark); padding-block: var(--s16) var(--s12); font-size: var(--text-sm); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1fr; gap: var(--s8); align-items: start; }
.footer-logo { height: 22px; width: auto; color: #fff; }
.footer-col { display: flex; flex-direction: column; gap: var(--s3); }
.footer-col a { text-decoration: none; color: var(--on-dark); }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-col--right { align-items: flex-end; text-align: right; }
.copy { color: var(--on-dark-muted); margin-top: var(--s8); font-size: var(--text-xs); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-logo { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .footer-col--right { align-items: flex-start; text-align: left; } }

/* Product dialog */
.product-dialog { border: 0; padding: 0; width: min(100% - var(--s8), 1040px); max-height: calc(100dvh - var(--s8)); background: #fff; color: var(--ink); }
.product-dialog::backdrop { background: oklch(0.1 0 0 / .6); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; top: var(--s3); right: var(--s3); width: 44px; height: 44px; border-radius: var(--radius-full); font-size: 1.5rem; line-height: 1; color: var(--ink-strong); background: #fff; z-index: 2; }
.dialog-close:hover { background: var(--tile); }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; }
.pd-media { background: var(--tile); display: grid; place-items: center; min-height: 320px; }
.pd-media img { width: 100%; height: 100%; object-fit: contain; }
.pd-body { padding: clamp(var(--s6), 4vw, var(--s10)); display: flex; flex-direction: column; gap: var(--s4); overflow: auto; max-height: calc(100dvh - var(--s8)); }
.pd-body h2 { font-size: var(--text-xl); }
.pd-desc { font-size: var(--text-sm); }
.pd-features { display: grid; gap: var(--s2); font-size: var(--text-sm); }
.pd-features li { padding-left: var(--s4); position: relative; }
.pd-features li::before { content: ''; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-strong); }
.pd-specs { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.pd-specs td { padding: var(--s2) 0; border-top: 1px solid var(--line); vertical-align: top; }
.pd-specs td:first-child { color: var(--muted); padding-right: var(--s4); width: 45%; }
.pd-specs td:last-child { text-align: right; font-weight: 500; }
.pd-buy { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }
.pd-price { display: flex; flex-direction: column; font-size: var(--text-xl); font-weight: 700; color: var(--ink-strong); line-height: 1.1; }
.pd-rub { font-size: var(--text-sm); font-weight: 400; color: var(--muted); margin-top: var(--s1); }
.pd-price small { font-size: var(--text-xs); font-weight: 400; color: var(--muted); letter-spacing: .04em; margin-top: var(--s1); }
@media (max-width: 760px) { .pd-grid { grid-template-columns: 1fr; } .pd-media { min-height: 0; aspect-ratio: 4 / 3; } .pd-body { max-height: none; } .product-dialog { overflow: auto; } }

/* Cart drawer */
.drawer-backdrop { position: fixed; inset: 0; background: oklch(0.1 0 0 / .55); z-index: 90; }
.drawer-backdrop[hidden] { display: none; }
.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(100%, 440px); background: #fff; color: var(--ink); z-index: 100; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s .35s; visibility: hidden; }
.drawer.open { transform: translateX(0); visibility: visible; transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s; box-shadow: -20px 0 60px oklch(0 0 0 / .2); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s6); border-bottom: 1px solid var(--line); min-height: 68px; }
.drawer-head .dialog-close { position: static; }
.drawer-body { padding: var(--s6); overflow: auto; flex: 1; display: flex; flex-direction: column; gap: var(--s4); }
.drawer-body[hidden] { display: none; }
.cart-list { display: grid; gap: var(--s4); }
.cart-item { display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); align-items: start; }
.cart-item img { width: 72px; height: 72px; object-fit: contain; background: var(--tile); }
.cart-item-name { font-size: var(--text-sm); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.cart-item-price { font-size: var(--text-xs); color: var(--muted); }
.cart-item-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-full); }
.qty button { width: 36px; height: 36px; font-size: 1.1rem; }
.qty button:hover { background: var(--tile); border-radius: var(--radius-full); }
.qty span { min-width: 28px; text-align: center; font-size: var(--text-sm); }
.cart-item-sum { font-weight: 700; color: var(--ink-strong); font-size: var(--text-sm); }
.remove { font-size: var(--text-xs); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: var(--s2) 0; }
.remove:hover { color: var(--ink-strong); }
.cart-empty { color: var(--muted); font-size: var(--text-sm); }
.cart-empty[hidden] { display: none; }
.cart-foot { margin-top: auto; display: grid; gap: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s4); }
.cart-foot[hidden] { display: none; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-base); }
.cart-total strong { font-size: var(--text-lg); color: var(--ink-strong); }
.cart-note { font-size: var(--text-xs); color: var(--muted); }
.back-link { align-self: flex-start; font-size: var(--text-sm); color: var(--muted); padding: var(--s1) 0; }
.back-link:hover { color: var(--ink-strong); }
.field { display: grid; gap: var(--s1); }
.field label { font-size: var(--text-xs); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; min-height: 46px; padding: var(--s3); border: 1px solid oklch(0.3 0.01 260 / .3); border-radius: 10px; background: #fff; font-size: var(--text-base); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink-strong); }
.field input[aria-invalid="true"] { border-color: #c0392b; }
.form-error { color: #c0392b; font-size: var(--text-sm); }
.form-error[hidden] { display: none; }
.done-title { font-size: var(--text-lg); font-weight: 700; color: var(--ink-strong); text-transform: uppercase; }
#order-done p { font-size: var(--text-sm); }
#order-done .pill { align-self: flex-start; margin-top: var(--s4); }
body.no-scroll { overflow: hidden; }