.materials .material-card-visual{padding:0;display:flex;flex-direction:column}
.material-card-visual .material-photo{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-bottom:1px solid #434943}
.material-card-copy{padding:28px;display:flex;flex-direction:column;flex:1}
.material-card-copy .material-type{font-size:14px;line-height:1.5;letter-spacing:.045em;max-width:none;min-height:42px;margin-bottom:18px;color:#d6dbd2}
.material-card-copy h3{font-size:36px;min-height:82px;margin-bottom:18px}
.material-card-copy .material-description{font-size:16px;line-height:1.6;min-height:102px;color:#c7cfc1}
.material-card-copy .material-cost{margin:22px 0 16px}
.material-card-copy .material-cost span{font-size:14px}
.material-card-copy .underlined{align-self:start;min-height:44px;font-size:16px;margin-top:auto}
.materials-heading .underlined{display:inline-flex;align-items:center;min-height:44px;font-size:16px;margin-top:10px}
.shade-selector{padding-top:75px;padding-bottom:85px}
.shade-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px}
.shade-heading>p{max-width:350px;font-size:16px}
.shade-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(310px,1fr);gap:44px;align-items:start}
.shade-preview{position:relative;aspect-ratio:3/2;background:var(--dark);overflow:hidden}
.shade-preview img{width:100%;height:100%;object-fit:cover}
.shade-preview figcaption{position:absolute;bottom:16px;left:16px;right:16px;background:#191b1be8;color:#fff;padding:9px 12px;font-size:13px;line-height:1.45;width:fit-content;max-width:calc(100% - 32px)}
.shade-preview-status{position:absolute;top:16px;left:16px;right:16px;background:#191b1bf5;color:#fff;padding:12px 16px;font-size:14px;line-height:1.5}
.shade-controls>.eyebrow{font-size:14px;color:var(--muted);margin-bottom:16px}
.shade-options{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
.shade-options legend{font-size:16px;font-weight:500;margin-bottom:14px}
.shade-option{display:flex;align-items:center;gap:14px;position:relative;padding:14px 40px 14px 14px;min-height:78px;border:1px solid var(--line);cursor:pointer;background:white;transition:border-color .15s,background .15s}
.shade-option:hover{border-color:#7b6544}
.shade-option:has(input:checked){border-color:var(--ink);background:var(--silver);box-shadow:inset 0 0 0 1px var(--ink)}
.shade-option:focus-within{outline:3px solid #996900;outline-offset:3px}
.shade-option input{position:absolute;right:14px;top:calc(50% - 8px);width:16px;height:16px;accent-color:var(--ink);margin:0}
.shade-chip{width:42px;height:42px;flex:none;background:var(--shade-color);border:1px solid #20232126;border-radius:50%}
.shade-option strong{display:block;font-size:16px;font-weight:500;line-height:1.4}
.shade-option small{display:block;font-size:14px;color:var(--muted);line-height:1.4;margin-top:3px}
.shade-current{margin-top:22px;font-size:14px;color:var(--muted);line-height:1.5}
.shade-current strong{color:var(--ink);font-weight:500}
.shade-controls .shade-request{width:100%;margin-top:16px;font-size:16px}
.shade-controls .shade-palette-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;margin-top:10px}
.shade-disclaimer{margin-top:15px;font-size:14px;line-height:1.55}
.contact .contact-info>a{display:block;max-width:100%;width:fit-content}
.contact .contact-info>.contact-telegram{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;margin:12px 0 14px;background:var(--dark);color:#fff;font-size:16px;border:1px solid var(--dark);text-decoration:none}
.contact .contact-info>.contact-telegram:hover{background:#3d423d}
.contact .contact-info>a[href^="mailto:"]{display:block;font-size:16px;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:5px}
@media(max-width:1100px){.material-card-copy{padding:24px}.material-card-copy h3{font-size:30px;min-height:70px}.material-card-copy .material-description{min-height:128px}.material-card-copy .material-cost{font-size:30px}.shade-layout{gap:28px;grid-template-columns:minmax(0,1.35fr) minmax(285px,1fr)}}
@media(max-width:1000px){.material-card-copy{padding:22px}.material-card-copy .material-type{font-size:13px;min-height:42px}.material-card-copy h3{font-size:28px;min-height:95px}.material-card-copy .material-description{min-height:180px}.material-card-copy .underlined{font-size:14px}.shade-layout{grid-template-columns:1fr}.shade-preview{max-width:900px}.shade-options{grid-template-columns:repeat(3,minmax(0,1fr))}.shade-option{flex-direction:column;align-items:start;min-height:145px;padding-right:32px}.shade-option input{top:16px}.shade-controls .shade-request{width:auto;min-width:260px}.shade-controls .shade-palette-link{margin-left:20px}.shade-disclaimer{max-width:680px}}
@media(max-width:760px){.material-card-copy{padding:24px}.material-card-copy .material-type{font-size:14px;min-height:0;margin-bottom:16px}.material-card-copy h3{font-size:35px;min-height:0}.material-card-copy .material-description{min-height:0;font-size:16px}.material-card-copy .underlined{font-size:16px;margin-top:0}.material-card-copy .material-cost{font-size:34px}.material-card-visual .material-photo{aspect-ratio:4/3}.shade-selector{padding-top:50px;padding-bottom:55px}.shade-heading{display:block;margin-bottom:28px}.shade-heading>p{margin-top:22px}.shade-layout{gap:26px}.shade-preview{aspect-ratio:3/2}.shade-preview figcaption{font-size:12px;left:10px;bottom:10px;right:10px;padding:7px 9px;max-width:calc(100% - 20px)}.shade-preview-status{top:10px;left:10px;right:10px;font-size:14px}.shade-controls{display:block}.shade-controls>.eyebrow{margin-bottom:14px}.shade-controls .shade-current{margin-top:22px}.shade-controls .shade-request{margin-top:16px}.shade-controls .shade-palette-link{margin-top:10px}.shade-controls .shade-disclaimer{margin-top:15px}.contact .contact-info>.contact-telegram{margin:16px 0}.contact .contact-info>a[href^="mailto:"]{min-height:44px;display:flex;align-items:center}.header nav a{min-height:44px;display:flex;align-items:center}.mobile-bar{box-shadow:0 -5px 20px #191b1b0a}.mobile-bar>a,.mobile-bar>button{min-height:48px;display:flex;align-items:center;justify-content:center}}
@media(prefers-reduced-motion:reduce){.shade-option{transition:none}}
@media(max-width:760px){.shade-options{grid-template-columns:1fr}.shade-option{flex-direction:row;align-items:center;min-height:78px;padding-right:40px}.shade-option input{top:calc(50% - 8px)}.shade-controls .shade-request{width:100%;min-width:0}.shade-controls .shade-palette-link{margin-left:0}}
