/* metall-kartiny-podrobno-guide.css — FAITHFUL from reference */
/* 2026-09-07.03: classes as in sketch; wrap=1180; scoped .zp-metall-guide */

/* =========================================================
   TOKENS
   ========================================================= */

.zp-metall-guide{

  --white:#ffffff;

  --bg:#ffffff;
  --soft:#f7f7f9;
  --soft-cool:#f1f2f6;
  --soft-purple:#f2eef7;

  --text:#201b24;
  --heading:#25172e;
  --muted:#5c5662;
  --muted2:#74707a;

  --purple:#56267c;
  --purple-hover:#421c61;
  --purple-dark:#2f193e;
  --purple-deep:#20162e;

  --metal:#dce0e6;
  --metal-dark:#9097a1;
  --metal-light:#f6f7f9;

  --border:#dcdde2;
  --border-purple:#cdbfd5;

  --green:#315f49;
  --green-bg:#e2efe7;

  --shadow:
    0 16px 45px rgba(39,27,48,.08);

  --shadow-big:
    0 27px 65px rgba(38,24,49,.15);

  --wrap:1180px;

  --radius-xl:30px;
  --radius-lg:23px;
  --radius-md:17px;

  --header-h:80px;
}
.zp-metall-guide {
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}
.zp-metall-guide, .zp-metall-guide * { box-sizing: border-box; }
.zp-metall-guide img {
  max-width:100%;
}
.zp-metall-guide button {
  font:inherit;
}


.zp-metall-guide .wrap {
  width:min(var(--wrap),calc(100% - 40px));
  margin-inline:auto;
}


.zp-metall-guide .section {
  padding:76px 0;
}


.zp-metall-guide .section--soft {
  background:var(--soft);
}


.zp-metall-guide .section--cool {
  background:
    radial-gradient(
      720px 340px at 100% 0%,
      rgba(98,103,119,.07),
      transparent 65%
    ),
    var(--soft-cool);
}


.zp-metall-guide .section--purple {
  background:
    radial-gradient(
      720px 340px at 100% 0%,
      rgba(102,58,145,.08),
      transparent 65%
    ),
    var(--soft-purple);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.zp-metall-guide .kicker {
  display:block;

  margin:0 0 10px;

  color:#694877;

  font-size:14px;
  line-height:1.3;
  font-weight:850;
}


.zp-metall-guide .h2 {
  max-width:840px;

  margin:0 0 15px;

  color:var(--heading);

  font-size:clamp(31px,3.4vw,45px);
  line-height:1.09;
  letter-spacing:-.042em;
}


.zp-metall-guide .lead {
  max-width:800px;

  margin:0;

  color:var(--muted);

  font-size:17px;
  line-height:1.68;
}


.zp-metall-guide .note {
  margin:20px 0 0;

  color:#4e4852;

  font-size:15px;
  line-height:1.62;
}


.zp-metall-guide .text-link {
  color:var(--purple);

  font-size:15px;
  font-weight:800;

  text-decoration:none;
}


.zp-metall-guide .text-link:hover {
  text-decoration:underline;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.zp-metall-guide .actions {
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:28px;
}


.zp-metall-guide .btn {
  min-height:52px;
  padding:0 22px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1.5px solid transparent;
  border-radius:14px;

  font-size:16px;
  line-height:1.2;
  font-weight:800;

  text-decoration:none;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.zp-metall-guide .btn:hover {
  transform:translateY(-1px);
  text-decoration:none;
}


.zp-metall-guide .btn--primary {
  color:#ffffff;
  background:var(--purple);

  box-shadow:
    0 12px 26px rgba(86,38,124,.18);
}


.zp-metall-guide .btn--primary:hover {
  color:#ffffff;
  background:var(--purple-hover);
}


.zp-metall-guide .btn--secondary {
  color:#432151;
  background:#ffffff;

  border-color:#b9a9c1;
}


.zp-metall-guide .btn--secondary:hover {
  background:#f1ecf4;
}


/* =========================================================
   HEADER
   ========================================================= */

































/* =========================================================
   GENERIC IMAGE / FALLBACK
   ========================================================= */

.zp-metall-guide .media {
  position:relative;

  overflow:hidden;

  margin:0;

  border-radius:24px;

  background:
    linear-gradient(
      135deg,
      #d9dce2 0%,
      #f7f8fa 30%,
      #b8bdc6 52%,
      #f3f4f6 72%,
      #a9afb9 100%
    );

  box-shadow:var(--shadow);
}


.zp-metall-guide .media img {
  position:relative;
  z-index:2;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}


.zp-metall-guide .media__fallback {
  position:absolute;
  inset:0;
  z-index:1;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:30px;
}


.zp-metall-guide .media__fallback::before {
  content:"4K";

  width:62%;
  height:70%;

  display:grid;
  place-items:center;

  color:rgba(255,255,255,.92);

  border:1px solid rgba(255,255,255,.72);

  background:
    linear-gradient(
      135deg,
      #273445,
      #6b496e 50%,
      #1a2535
    );

  box-shadow:
    0 18px 35px rgba(36,33,44,.22);

  font-size:52px;
  font-weight:900;
  letter-spacing:.02em;
}


.zp-metall-guide .media.is-missing img {
  display:none;
}


.zp-metall-guide .media figcaption {
  position:absolute;
  left:15px;
  bottom:15px;
  z-index:4;

  padding:9px 12px;

  border-radius:10px;

  background:#20162e;
  color:#ffffff;

  font-size:13px;
  line-height:1.35;
  font-weight:800;
}


/* =========================================================
   HERO
   ========================================================= */

.zp-metall-guide .hero {
  padding:42px 0 60px;

  background:
    radial-gradient(
      900px 460px at 100% -8%,
      rgba(83,57,111,.13),
      transparent 65%
    ),
    radial-gradient(
      650px 350px at 0% 100%,
      rgba(173,178,188,.14),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      #fafafd 0%,
      #ffffff 100%
    );
}


.zp-metall-guide .breadcrumbs {
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  margin:0 0 29px;

  color:#6d6771;

  font-size:14px;
}


.zp-metall-guide .breadcrumbs a {
  color:#514c56;
  text-decoration:none;
}


.zp-metall-guide .hero__grid {
  display:grid;

  grid-template-columns:
    minmax(0,1.04fr)
    minmax(400px,.96fr);

  gap:55px;
  align-items:center;
}


.zp-metall-guide .hero__label {
  display:block;

  margin:0 0 11px;

  color:#684777;

  font-size:14px;
  font-weight:850;
}


.zp-metall-guide .hero h1 {
  max-width:830px;

  margin:0;

  color:var(--heading);

  font-size:clamp(39px,4.7vw,60px);
  line-height:1.045;
  letter-spacing:-.052em;
}


.zp-metall-guide .hero__lead {
  max-width:730px;

  margin:22px 0 0;

  color:#4f4953;

  font-size:18px;
  line-height:1.64;
}


.zp-metall-guide .hero__safe {
  max-width:690px;

  margin-top:21px;
  padding:16px 18px;

  border:1px solid #d9d0e0;
  border-radius:14px;

  background:#f1edf5;

  color:#403546;

  font-size:15px;
  line-height:1.58;
}


.zp-metall-guide .hero__safe strong {
  color:#302038;
}


.zp-metall-guide .hero-media {
  min-height:510px;
}


.zp-metall-guide .hero-media img {
  min-height:510px;
}


/* =========================================================
   TRUST
   ========================================================= */

.zp-metall-guide .trust {
  background:#ffffff;

  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}


.zp-metall-guide .trust__grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
}


.zp-metall-guide .trust__item {
  min-height:80px;

  display:flex;
  align-items:center;

  padding:17px 21px;

  border-right:1px solid var(--border);

  color:#443e47;

  font-size:14px;
  line-height:1.45;
  font-weight:750;
}


.zp-metall-guide .trust__item:last-child {
  border-right:0;
}


.zp-metall-guide .trust__icon {
  width:23px;
  height:23px;

  display:grid;
  place-items:center;

  flex:0 0 23px;

  margin-right:11px;

  border-radius:50%;

  background:var(--green-bg);
  color:var(--green);

  font-size:11px;
  font-weight:900;
}


/* =========================================================
   NAV
   ========================================================= */

/* zerkalo-main.css: bare `nav{width:var(--wrap);display:flex;…}` breaks sketch full-bleed bar */
.zp-metall-guide nav.anchor-nav {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  gap: normal !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;

  background: #ffffff;

  border-bottom: 1px solid var(--border);
}


.zp-metall-guide .anchor-nav__inner {
  min-height: 59px;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;

  gap: 27px !important;

  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  width: min(var(--wrap), calc(100% - 40px)) !important;
  max-width: min(100%, var(--wrap)) !important;
  margin-inline: auto !important;
}


.zp-metall-guide .anchor-nav__inner::-webkit-scrollbar {
  display: none;
}


.zp-metall-guide .anchor-nav a {
  flex: 0 0 auto !important;

  padding: 18px 0;

  color: #49434d !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  white-space: nowrap;

  text-decoration: none !important;
  opacity: 1 !important;
}


.zp-metall-guide .anchor-nav a:hover {
  color: var(--purple) !important;
}


.zp-metall-guide .anchor-nav a:after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   WHAT IS METAL
   ========================================================= */

.zp-metall-guide .split {
  display:grid;

  grid-template-columns:
    minmax(0,.88fr)
    minmax(440px,1.12fr);

  gap:55px;
  align-items:center;
}


.zp-metall-guide .copy {
  max-width:760px;
}


.zp-metall-guide .copy p {
  color:var(--muted);

  font-size:16px;
  line-height:1.7;
}


.zp-metall-guide .copy p:first-of-type {
  margin-top:22px;
}


.zp-metall-guide .copy strong {
  color:#34243b;
}


.zp-metall-guide .medium-media {
  min-height:430px;
}


.zp-metall-guide .medium-media img {
  min-height:430px;
}


/* =========================================================
   TYPES
   ========================================================= */

.zp-metall-guide .types {
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:18px;

  margin-top:35px;
}


.zp-metall-guide .type-card {
  overflow:hidden;

  border:1px solid var(--border);
  border-radius:22px;

  background:#ffffff;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.zp-metall-guide .type-card:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}


.zp-metall-guide .type-card__media {
  height:215px;

  border-radius:0;

  box-shadow:none;
}


.zp-metall-guide .type-card__media .media__fallback {
  padding:28px 50px;
}


.zp-metall-guide .type-card__media .media__fallback::before {
  width:100%;
  height:100%;

  font-size:35px;
}


.zp-metall-guide .type-card__body {
  padding:22px;
}


.zp-metall-guide .type-card__tag {
  display:inline-flex;

  margin-bottom:11px;
  padding:6px 9px;

  border:1px solid #d0cad4;
  border-radius:999px;

  background:#f1eff3;
  color:#504753;

  font-size:12px;
  font-weight:850;
}


.zp-metall-guide .type-card h3 {
  margin:0 0 9px;

  color:#30213a;

  font-size:20px;
}


.zp-metall-guide .type-card p {
  margin:0;

  color:var(--muted);

  font-size:15px;
  line-height:1.62;
}


/* =========================================================
   METAL VS CANVAS
   ========================================================= */

.zp-metall-guide .comparison {
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:18px;

  margin-top:33px;
}


.zp-metall-guide .comparison-card {
  padding:29px;

  border:1px solid var(--border);
  border-radius:22px;

  background:#ffffff;
}


.zp-metall-guide .comparison-card--metal {
  border-color:#c7bfd0;

  background:
    linear-gradient(
      145deg,
      #f4f5f7,
      #ffffff 55%,
      #eff0f3
    );
}


.zp-metall-guide .comparison-card__icon {
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  margin-bottom:17px;

  border-radius:14px;

  color:#ffffff;
  background:#5b4270;

  font-size:14px;
  font-weight:900;
}


.zp-metall-guide .comparison-card--metal .comparison-card__icon {
  color:#31343a;

  background:
    linear-gradient(
      135deg,
      #eef0f3,
      #adb3bc
    );

  border:1px solid #a9afb8;
}


.zp-metall-guide .comparison-card h3 {
  margin:0 0 10px;

  color:#312039;

  font-size:22px;
}


.zp-metall-guide .comparison-card p {
  margin:0;

  color:var(--muted);

  font-size:16px;
  line-height:1.64;
}


.zp-metall-guide .comparison-card ul {
  margin:18px 0 0;
  padding:0;

  list-style:none;
}


.zp-metall-guide .comparison-card li {
  position:relative;

  margin:9px 0;
  padding-left:24px;

  color:#534c57;

  font-size:14px;
  line-height:1.5;
}


.zp-metall-guide .comparison-card li::before {
  content:"✓";

  position:absolute;
  left:0;

  color:var(--green);

  font-weight:900;
}


/* =========================================================
   GLOSS / MATTE
   ========================================================= */

.zp-metall-guide .finish-grid {
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:18px;

  margin-top:34px;
}


.zp-metall-guide .finish-card {
  overflow:hidden;

  border:1px solid var(--border);
  border-radius:22px;

  background:#ffffff;
}


.zp-metall-guide .finish-card__media {
  height:300px;

  border-radius:0;

  box-shadow:none;
}


.zp-metall-guide .finish-card__body {
  padding:25px;
}


.zp-metall-guide .finish-card__label {
  display:inline-flex;

  margin-bottom:11px;
  padding:6px 10px;

  border-radius:999px;

  background:#edf0f3;
  color:#3d4249;

  font-size:12px;
  font-weight:850;
}


.zp-metall-guide .finish-card h3 {
  margin:0 0 9px;

  color:#302039;

  font-size:22px;
}


.zp-metall-guide .finish-card p {
  margin:0;

  color:var(--muted);

  font-size:15px;
  line-height:1.63;
}


/* =========================================================
   QUALITY CHECK
   ========================================================= */

.zp-metall-guide .quality-grid {
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(360px,.78fr);

  gap:55px;
  align-items:center;
}


.zp-metall-guide .quality-note {
  margin-top:21px;
  padding:18px 20px;

  border-left:4px solid var(--purple);
  border-radius:0 14px 14px 0;

  background:#ffffff;

  color:#493f4d;

  font-size:15px;
  line-height:1.62;
}


.zp-metall-guide .quality-note strong {
  color:#342039;
}


.zp-metall-guide .quality-step {
  display:grid;

  grid-template-columns:45px 1fr;

  gap:14px;
  align-items:center;

  padding:18px;

  border:1px solid #d5d5dc;
  border-radius:17px;

  background:#ffffff;
}


.zp-metall-guide .quality-step + .quality-step {
  margin-top:11px;
}


.zp-metall-guide .quality-step__n {
  width:45px;
  height:45px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #59606a,
      #242831
    );

  color:#ffffff;

  font-size:14px;
  font-weight:900;
}


.zp-metall-guide .quality-step strong {
  display:block;

  margin-bottom:3px;

  color:#32223a;
}


.zp-metall-guide .quality-step > div > span {
  color:#625c65;

  font-size:14px;
  line-height:1.45;
}

/* after generic span — numbers stay white on dark badge */
.zp-metall-guide .quality-step__n {
  color:#ffffff !important;
}


/* =========================================================
   SIZE
   ========================================================= */

.zp-metall-guide .size-grid {
  display:grid;

  grid-template-columns:
    minmax(0,.82fr)
    minmax(470px,1.18fr);

  gap:55px;
  align-items:center;
}


.zp-metall-guide .size-table {
  margin-top:27px;

  border-top:1px solid var(--border);
}


.zp-metall-guide .size-row {
  display:grid;

  grid-template-columns:185px 1fr;

  gap:20px;

  padding:18px 0;

  border-bottom:1px solid var(--border);
}


.zp-metall-guide .size-row strong {
  color:#37233f;

  font-size:16px;
}


.zp-metall-guide .size-row span {
  color:var(--muted);

  font-size:16px;
  line-height:1.55;
}


/* =========================================================
   DARK MOCKUP SECTION
   ========================================================= */

.zp-metall-guide .mockup-section {
  padding:78px 0;

  background:
    radial-gradient(
      720px 400px at 100% 10%,
      rgba(148,120,171,.24),
      transparent 65%
    ),
    linear-gradient(
      135deg,
      #17151d,
      #2d193c 56%,
      #1c1922
    );

  color:#ffffff;
}


/* КРИТИЧНО:
   всё задаём явно */

.zp-metall-guide .mockup-section .kicker {
  color:#d9c8e4;
}


.zp-metall-guide .mockup-section .h2 {
  color:#ffffff;
}


.zp-metall-guide .mockup-section .lead {
  color:#ece7ef;
}


.zp-metall-guide .mockup-section p {
  color:#ece7ef;
}


.zp-metall-guide .mockup-section strong {
  color:#ffffff;
}


.zp-metall-guide .mockup-grid {
  display:grid;

  grid-template-columns:
    minmax(0,.84fr)
    minmax(430px,1.16fr);

  gap:52px;
  align-items:center;
}


.zp-metall-guide .mockup-list {
  display:grid;

  gap:11px;

  margin-top:25px;
}


.zp-metall-guide .mockup-list div {
  display:flex;

  gap:11px;

  color:#f3edf5;

  font-size:15px;
  line-height:1.5;
}


.zp-metall-guide .mockup-list div::before {
  content:"✓";

  width:21px;
  height:21px;

  display:grid;
  place-items:center;

  flex:0 0 21px;

  border-radius:50%;

  background:#ffffff;
  color:#4b285e;

  font-size:11px;
  font-weight:900;
}


.zp-metall-guide .mockup-media {
  min-height:420px;

  border:1px solid rgba(255,255,255,.17);

  box-shadow:
    0 22px 55px rgba(0,0,0,.28);
}


.zp-metall-guide .mockup-media img {
  min-height:420px;
}


.zp-metall-guide .mockup-media figcaption {
  background:#ffffff;
  color:#312638;

  left:15px;
  right:15px;
  bottom:15px;

  max-width:calc(100% - 30px);
}


/* =========================================================
   MOUNTING
   ========================================================= */

.zp-metall-guide .mount-grid {
  display:grid;

  grid-template-columns:
    minmax(0,.86fr)
    minmax(440px,1.14fr);

  gap:55px;
  align-items:center;
}


.zp-metall-guide .mount-list {
  margin-top:24px;
}


.zp-metall-guide .mount-item {
  display:flex;

  gap:13px;

  padding:15px 0;

  border-bottom:1px solid var(--border);
}


.zp-metall-guide .mount-item__icon {
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  flex:0 0 32px;

  border-radius:10px;

  background:#edf0f3;
  color:#363b42;

  font-size:13px;
  font-weight:900;
}


.zp-metall-guide .mount-item strong {
  display:block;

  margin-bottom:3px;

  color:#33213b;
}


.zp-metall-guide .mount-item span {
  color:var(--muted);

  font-size:14px;
  line-height:1.5;
}


/* =========================================================
   INCLUDED
   ========================================================= */

.zp-metall-guide .included {
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:14px;

  margin-top:34px;
}


.zp-metall-guide .included article {
  padding:22px;

  border:1px solid var(--border);
  border-radius:18px;

  background:#ffffff;
}


.zp-metall-guide .included small {
  display:block;

  margin-bottom:12px;

  color:#747985;

  font-weight:900;
}


.zp-metall-guide .included h3 {
  margin:0 0 7px;

  color:#31213a;

  font-size:17px;
}


.zp-metall-guide .included p {
  margin:0;

  color:var(--muted);

  font-size:14px;
  line-height:1.55;
}


/* =========================================================
   PROCESS
   ========================================================= */

.zp-metall-guide .process {
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:14px;

  margin-top:33px;
}


.zp-metall-guide .process article {
  position:relative;

  padding:25px;

  border:1px solid var(--border);
  border-radius:18px;

  background:#ffffff;
}


.zp-metall-guide .process small {
  display:block;

  margin-bottom:17px;

  color:#727784;

  font-size:12px;
  font-weight:900;
}


.zp-metall-guide .process h3 {
  margin:0 0 8px;

  color:#302039;

  font-size:18px;
}


.zp-metall-guide .process p {
  margin:0;

  color:var(--muted);

  font-size:14px;
  line-height:1.6;
}


/* =========================================================
   IDEAS / GIFT
   ========================================================= */

.zp-metall-guide .gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:16px;

  margin-top:30px;
}


.zp-metall-guide .gallery .media {
  height:360px;
}


.zp-metall-guide .gallery figcaption {
  background:#20162e;
  color:#ffffff;
}


.zp-metall-guide .gift-grid {
  display:grid;

  grid-template-columns:
    minmax(0,.88fr)
    minmax(430px,1.12fr);

  gap:52px;
  align-items:center;
}


.zp-metall-guide .gift-media {
  min-height:440px;
}


.zp-metall-guide .gift-media img {
  min-height:440px;
}


/* =========================================================
   RISK
   ========================================================= */

.zp-metall-guide .reasons {
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:14px;

  margin-top:33px;
}


.zp-metall-guide .reason {
  padding:22px;

  border:1px solid var(--border);
  border-radius:18px;

  background:#ffffff;
}


.zp-metall-guide .reason__icon {
  width:25px;
  height:25px;

  display:grid;
  place-items:center;

  margin-bottom:14px;

  border-radius:50%;

  background:var(--green-bg);
  color:var(--green);

  font-size:12px;
  font-weight:900;
}


.zp-metall-guide .reason h3 {
  margin:0 0 7px;

  color:#33213b;

  font-size:17px;
}


.zp-metall-guide .reason p {
  margin:0;

  color:var(--muted);

  font-size:14px;
  line-height:1.55;
}


/* =========================================================
   DELIVERY
   ========================================================= */

.zp-metall-guide .delivery {
  display:grid;

  grid-template-columns:.72fr 1.28fr;

  gap:18px;
}


.zp-metall-guide .delivery-card {
  padding:30px;

  border:1px solid var(--border);
  border-radius:22px;

  background:#ffffff;
}


.zp-metall-guide .delivery-card__big {
  display:block;

  margin:15px 0 8px;

  color:var(--purple);

  font-size:44px;
  line-height:1;
  font-weight:900;
}


.zp-metall-guide .delivery-card p {
  margin:0;

  color:var(--muted);

  font-size:15px;
  line-height:1.63;
}


/* =========================================================
   FAQ
   ========================================================= */

.zp-metall-guide .accordion {
  max-width:920px;

  margin-top:29px;

  border-top:1px solid var(--border);
}


.zp-metall-guide .accordion details {
  border-bottom:1px solid var(--border);
}


.zp-metall-guide .accordion summary {
  position:relative;

  padding:22px 48px 22px 0;

  cursor:pointer;
  list-style:none;

  color:#322139;

  font-size:17px;
  line-height:1.4;
  font-weight:800;
}


.zp-metall-guide .accordion summary::-webkit-details-marker {
  display:none;
}


.zp-metall-guide .accordion summary::after {
  content:"+";

  position:absolute;
  right:4px;
  top:50%;

  transform:translateY(-50%);

  color:#74647e;

  font-size:28px;
}


.zp-metall-guide .accordion details[open] summary::after {
  content:"−";
}


.zp-metall-guide .accordion__body {
  max-width:830px;

  padding:0 0 22px;

  color:#59535d;

  font-size:16px;
  line-height:1.68;
}


/* =========================================================
   FINAL
   ========================================================= */

.zp-metall-guide .final {
  padding:75px 0 82px;
}


.zp-metall-guide .final-box {
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(360px,.72fr);

  overflow:hidden;

  border-radius:30px;

  background:
    radial-gradient(
      500px 260px at 90% 0%,
      rgba(155,126,180,.20),
      transparent 65%
    ),
    #21162e;

  box-shadow:
    0 24px 60px rgba(34,20,42,.18);
}


.zp-metall-guide .final-copy {
  padding:52px;
}


/* тёмный блок:
   всё явно светлое */

.zp-metall-guide .final-copy .kicker {
  color:#dccde5;
}


.zp-metall-guide .final-copy h2 {
  margin:0;

  color:#ffffff;

  font-size:clamp(33px,4vw,48px);
  line-height:1.075;
  letter-spacing:-.045em;
}


.zp-metall-guide .final-copy p {
  max-width:670px;

  color:#f0eaf2;

  font-size:16px;
  line-height:1.64;
}


.zp-metall-guide .final-copy strong {
  color:#ffffff;
}


.zp-metall-guide .final-copy .btn--primary {
  color:#291733;
  background:#ffffff;

  box-shadow:none;
}


.zp-metall-guide .final-copy .btn--secondary {
  color:#ffffff;

  background:#4b3159;

  border-color:#a393aa;
}


.zp-metall-guide .final-hint {
  color:#d8ccdc !important;

  font-size:13px !important;
}


.zp-metall-guide .final-media {
  min-height:460px;

  border-radius:0;

  box-shadow:none;
}


.zp-metall-guide .final-media img {
  min-height:460px;
}


/* =========================================================
   FOOTER
   ========================================================= */

















/* =========================================================
   MOBILE BAR
   ========================================================= */



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){.zp-metall-guide .nav, .zp-metall-guide .hero__grid, .zp-metall-guide .split, .zp-metall-guide .quality-grid, .zp-metall-guide .size-grid, .zp-metall-guide .mockup-grid, .zp-metall-guide .mount-grid, .zp-metall-guide .gift-grid {
    grid-template-columns:1fr;
  }.zp-metall-guide .types {
    grid-template-columns:1fr 1fr;
  }.zp-metall-guide .comparison, .zp-metall-guide .finish-grid {
    grid-template-columns:1fr;
  }.zp-metall-guide .trust__grid {
    grid-template-columns:1fr 1fr;
  }.zp-metall-guide .included, .zp-metall-guide .process, .zp-metall-guide .reasons, .zp-metall-guide .gallery {
    grid-template-columns:1fr 1fr;
  }.zp-metall-guide .delivery {
    grid-template-columns:1fr;
  }.zp-metall-guide .final-box {
    grid-template-columns:1fr;
  }
}


@media(max-width:700px){.zp-metall-guide {
    --header-h:70px;
  }.zp-metall-guide body {
    padding-bottom:70px;
  }.zp-metall-guide .wrap {
    width:calc(100% - 28px);
  }.zp-metall-guide .section {
    padding:49px 0;
  }.zp-metall-guide .h2 {
    font-size:30px;
    line-height:1.12;
  }.zp-metall-guide .lead {
    font-size:16px;
  }.zp-metall-guide .hero {
    padding:25px 0 42px;
  }.zp-metall-guide .hero h1 {
    font-size:35px;
    line-height:1.065;
  }.zp-metall-guide .hero__lead {
    font-size:16px;
  }.zp-metall-guide .hero-media, .zp-metall-guide .hero-media img {
    min-height:360px;
  }.zp-metall-guide .actions {
    flex-direction:column;
  }.zp-metall-guide .btn {
    width:100%;
  }.zp-metall-guide .trust__grid, .zp-metall-guide .types, .zp-metall-guide .included, .zp-metall-guide .process, .zp-metall-guide .reasons, .zp-metall-guide .gallery {
    grid-template-columns:1fr;
  }.zp-metall-guide .trust__item {
    border-right:0;
    border-bottom:1px solid var(--border);
  }.zp-metall-guide .size-row {
    grid-template-columns:1fr;
    gap:4px;
  }.zp-metall-guide .mockup-section {
    padding:52px 0;
  }.zp-metall-guide .mockup-media, .zp-metall-guide .mockup-media img {
    min-height:300px;
  }.zp-metall-guide .gallery .media {
    height:390px;
  }.zp-metall-guide .final {
    padding:48px 0 58px;
  }.zp-metall-guide .final-copy {
    padding:32px 22px;
  }.zp-metall-guide .final-copy h2 {
    font-size:30px;
  }





}

/* site chrome only — neutralize site .hero .wrap grid; lock media frame heights like ref */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
/* zerkalo-main.css: .hero .wrap { display:grid } — breaks sketch */
.zp-metall-guide section.hero > .wrap {
  display: block !important;
  width: min(var(--wrap), calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}
/* zerkalo-main.css: .hero { min-height:100dvh } — huge empty gap before .trust */
.zp-metall-guide > section.hero {
  min-height: 0 !important;
  height: auto !important;
  padding: 28px 0 40px;
}
.zp-metall-guide .hero__grid {
  align-items: stretch;
}
/* With real images, min-height alone grows; lock to sketch frame sizes */
.zp-metall-guide .hero-media {
  height: auto;
  min-height: 510px;
  align-self: stretch;
}
.zp-metall-guide .hero-media img {
  height: 100%;
  min-height: 510px;
  object-fit: cover;
}
.zp-metall-guide .medium-media {
  height: 430px;
  min-height: 430px;
}
.zp-metall-guide .medium-media img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.zp-metall-guide .mockup-media {
  height: 420px;
  min-height: 420px;
}
.zp-metall-guide .mockup-media img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.zp-metall-guide .gift-media {
  height: 440px;
  min-height: 440px;
}
.zp-metall-guide .gift-media img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.zp-metall-guide .final-media {
  height: 460px;
  min-height: 460px;
}
.zp-metall-guide .final-media img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.zp-metall-guide .btn[data-zp-contacts-open] {
  cursor: pointer;
}
@media (max-width: 700px) {
  .zp-metall-guide > section.hero {
    padding-top: 18px;
    padding-bottom: 28px;
  }
  .zp-metall-guide .hero-media {
    height: 360px;
    min-height: 360px;
  }
  .zp-metall-guide .mockup-media {
    height: 300px;
    min-height: 300px;
  }
}