/* Конфігуратор «Металочерепиця Класік». Усі класи з префіксом kl-, щоб не конфліктувати зі стилями сайту. */
.kl {
  --kl-bg: #f3f2f2; --kl-surface: #eae9e9; --kl-text: #201f1d;
  --kl-accent: #b68235; --kl-accent-100: #fff3e4; --kl-accent-700: #7d5411;
  --kl-n500: #9b9797; --kl-n600: #7d7979; --kl-n700: #605d5d;
  --kl-divider: rgba(32, 31, 29, .16);
  --kl-head: Inter, ui-sans-serif, system-ui, sans-serif; --kl-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --kl-r: 4px;
  font-family: var(--kl-body); color: var(--kl-text);
  max-width: 760px; margin: 0 auto; box-sizing: border-box;
  background: var(--kl-bg); border: 1px solid var(--kl-divider); border-radius: 7px;
  box-shadow: 0 1px 2px rgba(45, 43, 43, .14);
  padding: 40px 44px; display: flex; flex-direction: column; gap: 30px;
}
.kl *, .kl *::before, .kl *::after { box-sizing: border-box; }
.kl :focus-visible { outline: 2px solid var(--kl-accent); outline-offset: 2px; }

.kl-head { display: flex; flex-direction: column; gap: 6px; }
.kl-kicker { font-family: var(--kl-head); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--kl-accent-700); }
.kl-title { margin: 0; font-family: var(--kl-head); font-weight: 400; font-size: 40px; line-height: 1.05; }

.kl-plate { border: 6px solid var(--kl-surface); outline: 1px solid var(--kl-divider); }
.kl-photo { position: relative; line-height: 0; isolation: isolate; }
.kl-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.kl-photo .kl-layer { position: absolute; inset: 0; width: 100%; height: 100%; }

.kl-step { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
.kl-step-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kl-step-title { font-family: var(--kl-head); font-size: 15px; font-weight: 600; padding: 0; }
.kl-note { font-size: 14px; font-style: italic; color: var(--kl-n700); }

.kl-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kl-offer { all: unset; cursor: pointer; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--kl-divider); border-radius: var(--kl-r); }
.kl-offer:hover { background: rgba(182, 130, 53, .06); }
.kl-offer[aria-checked="true"] { border-color: var(--kl-accent); background: var(--kl-accent-100); }
.kl-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--kl-n500); box-shadow: inset 0 0 0 3px var(--kl-bg); }
.kl-offer[aria-checked="true"] .kl-dot { background: var(--kl-accent); }
.kl-offer-name { display: block; font-size: 14px; font-weight: 500; }
.kl-offer-meta { display: block; font-size: 14px; color: var(--kl-n600); }
.kl-offer-price { font-family: var(--kl-head); font-size: 19px; font-variant-numeric: tabular-nums; }

.kl-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.kl-color { all: unset; cursor: pointer; width: 64px; height: 64px; border-radius: var(--kl-r);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff;
  outline: 1.5px solid transparent; outline-offset: 3px; font-variant-numeric: tabular-nums; }
.kl-color[aria-checked="true"] { outline-color: var(--kl-accent); }
.kl-color small { font-size: 12px; letter-spacing: .08em; opacity: .85; }
.kl-color b { font-family: var(--kl-head); font-size: 19px; font-weight: 600; line-height: 1; }

.kl-area { display: flex; align-items: center; gap: 10px; }
.kl-input { width: 110px; height: 44px; padding: 6px 10px; text-align: center; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--kl-text); background: transparent; border: 1px solid var(--kl-divider); border-radius: var(--kl-r); }
.kl-input:focus-visible { border-color: var(--kl-accent); outline-offset: 0; }

.kl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; min-height: 44px; padding: 8px 18px;
  font-family: var(--kl-head); font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--kl-text);
  background: transparent; border: 1px solid var(--kl-divider); border-radius: var(--kl-r); text-decoration: none; }
.kl-btn:hover { background: rgba(32, 31, 29, .07); }
.kl-btn:active { background: rgba(32, 31, 29, .14); }
.kl-btn-icon { width: 44px; padding: 0; font-size: 18px; }
.kl-btn-primary { color: var(--kl-accent-700); border-color: var(--kl-accent); }
.kl-btn-primary:hover { background: rgba(182, 130, 53, .12); }
.kl-btn-primary:active { background: rgba(182, 130, 53, .22); }

.kl-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--kl-divider); padding-top: 22px; }
.kl-total-sum { display: flex; flex-direction: column; gap: 4px; }
.kl-total-value { font-family: var(--kl-head); font-weight: 400; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .kl { padding: 24px 18px; gap: 24px; border-radius: 0; border-inline: 0; }
  .kl-title { font-size: 32px; }
  .kl-offers { grid-template-columns: 1fr; }
  .kl-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kl-color { width: 100%; height: auto; aspect-ratio: 1; }
  .kl-total-value { font-size: 36px; }
  .kl-total .kl-btn { width: 100%; }
}

.kl{--kl-accent:#b57200;--kl-accent-700:#744a00;--kl-accent-100:#fff2d7;max-width:960px;background:#fff;gap:24px}.kl-title{font-weight:800;letter-spacing:-.04em;line-height:1.15}.kl-offer-meta{color:#53616a;line-height:1.5}.kl-btn-primary{background:#f6a51c;color:#111b24;font-weight:800;border-color:#f6a51c}.kl-btn-primary:hover{background:#ffbd3d}.kl-total-value{font-weight:800;line-height:1.2;overflow-wrap:anywhere}.kl-input{font-size:16px}.kl-note{font-style:normal;line-height:1.6}.kl [hidden]{display:none!important}.kl textarea{width:100%;font:inherit;padding:12px}.kl button:disabled{opacity:.55;cursor:wait}.kl-offer-price{white-space:nowrap}.kl-status{color:#48555d;font-size:14px}.catalog-main{padding:36px 0 72px}.catalog-breadcrumbs{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;margin-bottom:26px}.catalog-breadcrumbs a{text-decoration:underline}.catalog-heading{font-size:clamp(2rem,4vw,3.5rem);max-width:1000px}.catalog-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:30px 0}.catalog-card{padding:26px;background:#fff;border-top:3px solid #f6a51c}.catalog-card h2{font-size:1.5rem}.catalog-card a{display:inline-block;text-decoration:underline;font-weight:700}.catalog-card p{color:#53616a}.catalog-copy{max-width:960px;margin:32px auto}.catalog-copy a{text-decoration:underline}.catalog-card img{width:100%;aspect-ratio:16/9;object-fit:contain}.kl-fallback label{display:block;margin-bottom:12px}@media(max-width:640px){.catalog-cards{grid-template-columns:1fr}.catalog-main{padding-top:24px}.kl{padding:24px 14px}.kl-offer{padding:12px;gap:8px}.kl-title{font-size:30px}.kl-total-value{font-size:32px}.kl-offer-price{font-size:17px}.kl-offers{grid-template-columns:1fr}.kl-colors{grid-template-columns:repeat(3,minmax(0,1fr))}.kl-color{max-height:76px}.catalog-breadcrumbs{gap:8px}}