/* Hermio užrašų konstruktorius. Form on the left, sticky preview + price on the right; one column on phones. */
.huz {
  --huz-accent: #C8501A;
  --huz-ink: #1C2026; --huz-muted: #5D6670; --huz-line: #D8DDE2; --huz-card: #FFFFFF; --huz-soft: #F3F5F7;
  --huz-metal: #3A414A; --huz-sheet: #E7EBEE; --huz-bad: #B3261E; --huz-bad-bg: #FCEBEA; --huz-info: #2F5F8A; --huz-info-bg: #EAF2FA;
  color: var(--huz-ink); font-size: 15px; line-height: 1.45; max-width: 1200px; margin: 0 auto; color-scheme: light;
}
.huz *, .huz *::before, .huz *::after { box-sizing: border-box }
.huz [hidden] { display: none !important }
.huz-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 28px; align-items: start }
@media (max-width: 880px) { .huz-grid { grid-template-columns: minmax(0, 1fr) } .huz-side { order: -1; position: static !important } }

.huz-form { display: flex; flex-direction: column; gap: 22px; counter-reset: huzstep; min-width: 0 }
.huz-step { display: flex; flex-direction: column; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--huz-line); counter-increment: huzstep; min-width: 0 }
.huz-step:last-child { border-bottom: 0 }
.huz-step h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; line-height: 1.2; font-weight: 700; color: var(--huz-ink) }
.huz-step h3::before { content: counter(huzstep); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--huz-ink); color: #fff; font-size: 14px; font-weight: 700; flex: none }

.huz-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
@media (max-width: 600px) { .huz-products { grid-template-columns: minmax(0, 1fr) } }
.huz-prod { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px solid var(--huz-line); border-radius: 8px; background: var(--huz-card); cursor: pointer; color: var(--huz-ink); min-width: 0 }
.huz-prod input { position: absolute; opacity: 0; pointer-events: none }
.huz-prod svg { width: 64px; height: 32px; color: var(--huz-metal); margin-bottom: 4px }
.huz-prod b { font-size: 15px; line-height: 1.25 }
.huz-prod small { font-size: 13px; color: var(--huz-muted) }
.huz-prod.on { border-color: var(--huz-accent); box-shadow: 0 0 0 1px var(--huz-accent) inset }
.huz-prod.on svg { color: var(--huz-accent) }
.huz-prod:focus-within { outline: 2px solid var(--huz-accent); outline-offset: 2px }

.huz-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px }
.huz-f { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; color: var(--huz-ink); min-width: 0; margin: 0 }
.huz-f input[type=text], .huz-f input[type=tel], .huz-f input[type=email], .huz-f input[type=number], .huz-f select, .huz-f textarea {
  font: inherit; font-weight: 400; color: var(--huz-ink); background: var(--huz-card); border: 1px solid #BFC6CD; border-radius: 6px; padding: 10px 12px; width: 100%; min-width: 0; margin: 0; box-shadow: none; height: auto }
.huz-f textarea { resize: vertical }
#huz-text { font-size: 18px; font-weight: 600 }
.huz-f input[type=file] { font: inherit; font-weight: 400; font-size: 14px; max-width: 100% }
.huz-f input:focus, .huz-f select:focus, .huz-f textarea:focus { outline: 2px solid var(--huz-accent); outline-offset: 0; border-color: var(--huz-accent) }
.huz-unit { position: relative; display: block }
.huz-unit input { padding-right: 44px !important }
.huz-unit::after { content: attr(data-u); position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 400; color: var(--huz-muted); pointer-events: none }
.huz-hint { font-size: 13px; font-weight: 400; color: var(--huz-muted); margin: 0 }
.huz-f .huz-hint { display: inline; margin-left: 4px }
.huz-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; margin: 0 }
.huz-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--huz-accent); flex: none }
.huz-radios { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px }
.huz-radios legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 6px }
.huz-radios label { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer }
.huz-radios input { accent-color: var(--huz-accent); margin: 0 }
.huz-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.huz-err { outline: 2px solid var(--huz-bad) !important }

.huz-gh { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--huz-muted); margin-top: 4px }
.huz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.huz-card { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1.5px solid var(--huz-line); border-radius: 8px; background: var(--huz-card); cursor: pointer; text-align: left; color: var(--huz-ink); font: inherit; min-width: 0; margin: 0; box-shadow: none; line-height: 1.3 }
.huz-card:hover { border-color: #AEB6BE; background: var(--huz-card) }
.huz-cv { display: block; height: 52px }
.huz-cv svg { display: block; width: 100%; height: 100% }
.huz-cv path { fill: var(--huz-metal) }
.huz-cn { font-size: 12px; font-weight: 600; color: var(--huz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.huz-card.on { border-color: var(--huz-accent); box-shadow: 0 0 0 1px var(--huz-accent) inset }
.huz-card.on path { fill: var(--huz-accent) }
.huz-card:focus-visible { outline: 2px solid var(--huz-accent); outline-offset: 2px }

.huz-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.huz-preview { position: relative; background: var(--huz-sheet); border-radius: 8px; overflow: hidden; min-height: 180px;
  background-image: linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px); background-size: 20px 20px }
.huz-preview svg { display: block; width: 100%; height: auto; max-height: 360px }
.huz-metal { fill: var(--huz-metal); fill-rule: evenodd }
.huz-lost { fill: var(--huz-bad) }
.huz-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--huz-muted); font-size: 14px }
.huz-dims { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--huz-muted); font-variant-numeric: tabular-nums }
.huz-dims b { color: var(--huz-ink) }
.huz-warn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.huz-warn li { background: var(--huz-bad-bg); color: var(--huz-bad); border-radius: 6px; padding: 8px 12px; font-size: 13px; margin: 0 }
.huz-warn li.info { background: var(--huz-info-bg); color: var(--huz-info) }
.huz-price { background: var(--huz-soft); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums }
.huz-price:empty { display: none }
.huz-pl { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--huz-muted) }
.huz-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid var(--huz-line); padding-top: 8px; margin-top: 2px }
.huz-total span { font-weight: 600 }
.huz-total b { font-size: 26px; color: var(--huz-ink) }
.huz-note { font-size: 12.5px; color: var(--huz-muted); margin: 0 }

.huz-submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.huz-btn { font: inherit; font-weight: 700; font-size: 16px; padding: 13px 26px; border-radius: 6px; border: 0; background: var(--huz-accent); color: #fff; cursor: pointer; margin: 0; line-height: 1.2 }
.huz-btn:hover { filter: brightness(1.07) }
.huz-btn:disabled { opacity: .6; cursor: default }
.huz-btn:focus-visible { outline: 2px solid var(--huz-ink); outline-offset: 2px }
.huz-ghost { background: transparent; color: var(--huz-ink); border: 1.5px solid var(--huz-ink) }
.huz-status { font-size: 14px; color: var(--huz-muted) }
.huz-status.bad { color: var(--huz-bad); font-weight: 600 }

.huz-done { max-width: 620px; margin: 20px auto; padding: 28px; border: 1.5px solid var(--huz-line); border-radius: 10px; background: var(--huz-card); display: flex; flex-direction: column; gap: 10px; align-items: flex-start }
.huz-done h3 { margin: 0; font-size: 24px }
.huz-done p { margin: 0 }
@media (prefers-reduced-motion: reduce) { .huz * { transition: none !important; scroll-behavior: auto !important } }