.page-head{position:relative;height:65vh;height:65svh;min-height:460px;background:#000;overflow:hidden}
.page-head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.page-head h1{position:absolute;left:50%;top:55%;width:min(520px,90%);transform:translate(-50%,-50%);font-size:24px;line-height:1.3;letter-spacing:3px;text-transform:uppercase;text-align:center;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.page-head--plain{height:auto;min-height:0;padding:230px 20px 0;background:#0e0e0e}
.page-head--plain h1{position:static;transform:none;margin:0 auto}
.crumbs{max-width:560px;margin:0 auto;padding:40px 20px 0;font-size:11px;letter-spacing:2px;text-transform:uppercase;text-align:center;opacity:.8}
.crumbs a{text-decoration:none}

.col{max-width:560px;margin:0 auto;padding:60px 20px 0}
.col h2{margin:0 0 24px;font-size:20px;letter-spacing:3px;text-transform:uppercase;text-align:center}
.col p+p{margin-top:1em}
.col--last{padding-bottom:150px}
.photo-band{height:60vh;min-height:320px;margin-top:110px;overflow:hidden}
.photo-band img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.9}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:12px 8px;border-bottom:1px solid #565656;text-align:left;vertical-align:top}
.tbl thead th{font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase;opacity:.75}
.tbl-wrap{overflow-x:auto}

.steps{counter-reset:passo}
.steps li{position:relative;padding:14px 0 14px 44px;border-top:1px solid #565656;counter-increment:passo}
.steps li:last-child{border-bottom:1px solid #565656}
.steps li:before{content:counter(passo);position:absolute;left:0;top:13px;width:28px;height:28px;border:1px solid #f5f3ee;font-size:13px;line-height:26px;text-align:center}

.size-calc{display:grid;gap:12px;margin-top:28px;padding:24px;border:1px solid #565656}
.size-calc label{font-size:11px;letter-spacing:1px}
.size-calc input{width:100%;min-height:48px;padding:8px 12px;border:1px solid #565656;background:#1c1c1c;font-size:18px}
.size-calc output{display:block;font-size:20px;letter-spacing:1px}

.preview{display:grid;place-items:center;height:260px;margin-top:28px;background:#9a6a3c;background-image:radial-gradient(circle at 30% 30%,rgba(255,255,255,.12),transparent 60%);transition:background-color .2s ease-in-out}
.preview[data-col=naturale]{background-color:#c9a27a}
.preview[data-col=cognac]{background-color:#9a5428}
.preview[data-col=moro]{background-color:#4a2f22}
.preview[data-col=nero]{background-color:#1b1a19}
.preview__letters{font-family:Georgia,'Times New Roman',serif;font-size:56px;letter-spacing:10px;color:rgba(20,10,4,.85);text-shadow:0 1px 0 rgba(255,255,255,.18),0 -1px 0 rgba(0,0,0,.35)}
.preview[data-col=nero] .preview__letters,.preview[data-col=moro] .preview__letters{color:rgba(0,0,0,.6);text-shadow:0 1px 0 rgba(255,255,255,.12)}
.preview-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.preview-form label{display:grid;gap:4px;font-size:11px;letter-spacing:1px}
.preview-form input,.preview-form select{min-height:44px;padding:6px 10px;border:1px solid #565656;background:#1c1c1c;font-size:16px;text-transform:uppercase;letter-spacing:3px}

.legal{max-width:none;margin:0;padding:60px 40px 150px}
.legal h2{margin:48px 0 14px;font-size:24px;letter-spacing:1.5px;text-transform:uppercase}
.legal h2:first-child{margin-top:0}
.legal p{overflow-wrap:anywhere}
.legal p+p{margin-top:.8em}

.grazie{min-height:100vh;display:grid;place-items:center;padding:150px 20px;text-align:center}
.grazie p{max-width:560px;margin:18px auto 0}

@media screen and (max-width:767px){
	.page-head{min-height:380px}
	.page-head h1{font-size:18px;width:258px}
	.col{padding-top:45px}
	.preview{height:200px}
	.preview__letters{font-size:42px}
	.preview-form{grid-template-columns:minmax(0,1fr)}
}
.preview-form input,.preview-form select,.size-calc input{font-size:1rem}
@media screen and (max-width:767px){.preview-form input,.preview-form select{font-size:16px}}