/* brand-polish.css — shopmarkryden.ru prototype, 06.11.2026 (David: «исправь шрифты и UI/UX», «делай»).
   stock-first: n/a — hand-written override layer for this prototype; motion values from the
   design-taste-frontend skill (assets/base.css, references/motion.md).
   Brand language kept: Inter, ink rgb(23,23,23), white / #fafafa grounds, pill buttons.
   Load order: …qa-mobile-fixes.css → brand-snap*.css (generated) → this file. */

:root {
  --bp-ink: rgb(23, 23, 23);
  --bp-muted: #555;                 /* 7.5:1 on #fff, 7.1:1 on #fafafa */
  --bp-tone: #f5f5f5;
  /* type scale: small · body · heading · title · display (390px → 1440px) */
  --bp-s1: 13px;
  --bp-s2: 16px;
  --bp-s3: clamp(20px, 18.51px + .381vw, 24px);
  --bp-s4: clamp(28px, 23.54px + 1.143vw, 40px);
  --bp-s5: clamp(40px, 31.09px + 2.286vw, 64px);
  --bp-ease: cubic-bezier(.22, 1, .36, 1);
  --bp-ease-soft: cubic-bezier(.33, 1, .68, 1);
}

/* ---------- type ---------- */
h1, h2 { letter-spacing: -.03em; text-wrap: balance; }
h3 { letter-spacing: -.01em; text-wrap: balance; }
main p, main li, main dd { text-wrap: pretty; }
main p { max-width: 60ch; }
.g-statement h2 span { font-size: 1em; }

/* running text in the full ink; muted ink only for notes */
.gh-section-lead,
.g-image-text p,
.g-help-answer p,
.g-brand-panel p,
.g-statement p,
.g-pdp-details details p,
.bp-lead { color: var(--bp-ink); }

/* article codes and review sources: sentence case, readable, no tracking */
.product-card-body .model,
.gh-review-source { letter-spacing: normal; text-transform: none; color: var(--bp-muted); font-weight: 500; }
.gh-review-source { order: 3; margin: 18px 0 0; }

/* running text is set on the body step everywhere; only captions and legal notes stay small */
body .g-image-text p,
body .g-brand-panel p,
body .g-pdp-details details p,
body .g-variant-summary p,
body .gdi-recent-note,
body .gdi-recent-empty,
body .empty-state p { font-size: var(--bp-s2); line-height: 1.5; }

body .gh-section-lead { font-size: var(--bp-s2); }
body .g-pdp-details p { font-size: var(--bp-s2) !important; }   /* beats global.css 14px!important on phones */

/* product cards: model name on the body step, its description on the small step */
body .gc-grid .g-card .product-name,
body .product-card .product-name { font-size: var(--bp-s2) !important; line-height: 1.3; }   /* global.css sets 14px!important on phones */
.bp-card-sub { display: block; margin-top: 4px; font-size: var(--bp-s1); line-height: 1.4; font-weight: 400; color: var(--bp-muted); }
.bp-card-sub::first-letter { text-transform: uppercase; }

/* review quotes read as quotes, not as headlines */
body .gh-review-card blockquote p { font-size: var(--bp-s3); line-height: 1.35; letter-spacing: -.01em; }

/* product title split: name + one line of description */
.bp-h1-sub { font-size: var(--bp-s3); line-height: 1.3; color: var(--bp-muted); margin: 0 0 18px; max-width: 34ch; font-weight: 400; }
.bp-lead { font-size: var(--bp-s2); line-height: 1.5; max-width: 60ch; margin: 14px 0 0; }

/* measure: classes that set their own wide max-width */
.gh-section-lead, .g-brand-panel p, .g-statement p, .g-help-hero-copy p, .g-plp-meta p, .gdi-recent-note { max-width: 60ch; }
.g-brand-panel p, .g-statement p { margin-inline: auto; }
.g-statement p { font-size: var(--bp-s2); }

/* one typeface: the help centre used a second family (Jost) */
.g-help-tab, .g-help-panel { font-family: inherit !important; }
.g-help-tab[aria-selected=true], .g-help-tab:hover { color: #1567b8; }   /* 5.7:1, was #1d80dc 4.1:1 */

/* the demo badge is read, so it gets the small step */
.g-logo .g-demo-badge { font-size: var(--bp-s1) !important; letter-spacing: normal; }

@media (max-width: 767px) {
  .g-section-heading { flex-wrap: wrap; gap: 14px 16px; }
  .g-section-heading > h2 { flex: 1 1 100%; }
}

/* ---------- surfaces: space and tone instead of hairlines ---------- */
.g-card-tools { border-top: 0; padding-top: 2px; }
.g-slide-controls { border-top: 0; }
.g-pdp-local-tools { border-top: 0; padding-top: 8px; }
.g-pdp-details { border-top: 0; }
.g-pdp-details details { border-block-start: 0; background: var(--bp-tone); border-radius: 16px; padding: 18px 22px; margin-bottom: 8px; }
main dl > div { border-bottom: 0 !important; padding-inline: 14px; border-radius: 10px; }
.gdi-recent { border-top: 0; }
.g-pdp-details { margin-block-end: 56px; }
@media (max-width: 767px) { .g-marquee { margin-top: 40px; } }
main dl > div:nth-child(odd) { background: var(--bp-tone); }
.g-marquee { border-block: 0; background: #fafafa; }
.gh-review-card { border: 0; }
.text-link, .g-help-quick a {
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}
.g-filter-trigger { box-shadow: none; }

/* tablet product page: keep the title on the first screen */
@media (min-width: 768px) and (max-width: 1099px) {
  .gallery .main-photo { aspect-ratio: auto; height: min(520px, 52vh); }
  .gallery .main-photo img { width: 100%; height: 100%; object-fit: contain; }
}

/* ---------- feedback on every control ---------- */
.btn, .outline-btn, .g-card-cta, .category-tabs button, .g-slide-content > a {
  transition: transform 140ms var(--bp-ease), background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn:active, .outline-btn:active, .g-card-cta:active, .category-tabs button:active, .g-slide-content > a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn svg, .outline-btn svg, .text-link svg { transition: transform 200ms var(--bp-ease); }
  .btn:hover svg, .outline-btn:hover svg, .text-link:hover svg { transform: translateX(4px); }
  .text-link, .g-help-quick a { transition: text-decoration-color 180ms ease; }
  .text-link:hover, .g-help-quick a:hover { text-decoration-color: transparent; }
  .g-card .product-picture > a:first-child img, .g-collection-tile img { transition: transform 700ms var(--bp-ease-soft); }
  .g-card:hover .product-picture > a:first-child img, .g-collection-tile:hover img { transform: scale(1.04); }
}

/* ---------- entrances (brand-motion.js marks the parts; content stays visible without it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-bp-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms var(--bp-ease), transform 900ms var(--bp-ease);
    transition-delay: calc(var(--bp-i, 0) * 70ms);
  }
  img[data-bp-reveal], picture[data-bp-reveal], video[data-bp-reveal] {
    transform: scale(1.05);
    transition: opacity 900ms var(--bp-ease), transform 1600ms var(--bp-ease-soft);
    transition-delay: calc(var(--bp-i, 0) * 70ms);
  }
  [data-bp-reveal].is-in { opacity: 1; transform: none; }
  [data-bp-load] { animation: bp-rise 800ms var(--bp-ease) both; animation-delay: calc(var(--bp-i, 0) * 70ms); }
}
@keyframes bp-rise { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .btn:active, .outline-btn:active, .g-card-cta:active, .category-tabs button:active, .g-slide-content > a:active { transform: none; }
  .g-card:hover .product-picture > a:first-child img, .g-collection-tile:hover img { transform: none; }
}