/*
===============================================================================
 FILE: /css/handles.css
 VERSION: 1.4
 PROJECT: ОКНА ORIGINAL — оконные ручки
 DATE: 2026-09-08
 CHANGE: блок заказа, состояния загрузки и клавиатурный фокус.
===============================================================================
*/
:root{--handles-ink:#183248;--handles-muted:#6b7f8f;--handles-line:#dfe7ec;--handles-soft:#f5f8fa;--handles-accent:#356f76}
.handles-page{max-width:1380px;margin:0 auto;padding:28px 18px 64px}.handles-kicker{display:block;color:#68808c;font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase}.handles-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:32px;align-items:end;padding:clamp(30px,4vw,58px);border:1px solid #d9e5e8;border-radius:28px;background:radial-gradient(circle at 86% 14%,rgba(78,205,196,.25),transparent 30%),radial-gradient(circle at 5% 90%,rgba(227,38,54,.08),transparent 30%),linear-gradient(135deg,#f7fbfc 0%,#edf5f5 100%);box-shadow:0 18px 45px rgba(25,59,74,.09)}.handles-hero h1{max-width:900px;margin:.55rem 0 .8rem;color:var(--handles-ink);font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.045em;font-weight:500}.handles-hero h1 span{color:#42767b}.handles-hero p{max-width:760px;margin:0;color:var(--handles-muted);font-size:17px;line-height:1.65}.handles-hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}.handles-btn-light{background:#fff;border:1px solid #cddadd;color:#345b63}.handles-hero__stats{display:grid;gap:.65rem}.handles-hero__stats div{padding:1rem 1.1rem;border:1px solid rgba(87,131,137,.2);border-radius:17px;background:rgba(255,255,255,.64);backdrop-filter:blur(8px)}.handles-hero__stats strong{display:block;color:var(--handles-ink);font-size:30px;font-weight:500;line-height:1}.handles-hero__stats span{display:block;margin-top:.25rem;color:var(--handles-muted);font-size:13px}.handles-toolbar{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin:2.2rem 0 1.1rem}.handles-toolbar h2{margin:.25rem 0 0;color:var(--handles-ink);font-size:clamp(26px,3vw,38px);font-weight:500}.handles-brand-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem}.handles-brand-chips button{display:inline-flex;align-items:center;gap:.4rem;min-height:38px;padding:.5rem .75rem;border:1px solid #d8e2e6;border-radius:999px;background:#fff;color:#526c78;font:inherit;font-size:14px;cursor:pointer}.handles-brand-chips button span{opacity:.6;font-size:12px}.handles-brand-chips button:hover,.handles-brand-chips button.is-active{background:#eaf3f3;border-color:#8db2b6;color:#27575f}.handles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.handle-card{min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--handles-line);border-radius:22px;background:#fff;box-shadow:0 10px 26px rgba(30,64,79,.06);transition:transform .18s ease,box-shadow .18s ease}.handle-card:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(30,64,79,.1)}.handle-card[hidden]{display:none}.handle-card__visual{position:relative;min-height:250px;display:grid;place-items:center;padding:30px;background:#fff;border-bottom:1px solid var(--handles-line)}.handle-card__visual img{display:block;max-width:100%;max-height:190px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(29,47,56,.13));transition:opacity .15s ease,transform .2s ease}.handle-card.is-switching .handle-card__visual img{opacity:.25;transform:scale(.97)}.handle-badge{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;min-height:28px;padding:.25rem .6rem;border-radius:999px;background:#153d47;color:#fff;font-size:12px;font-weight:500;box-shadow:0 5px 14px rgba(21,61,71,.16)}.handle-card:nth-child(3n+2) .handle-badge{background:#41706a}.handle-card:nth-child(3n) .handle-badge{background:#6d5b49}.handle-card__body{display:flex;flex:1;flex-direction:column;padding:.85rem .95rem .95rem}.handle-card__brand{color:#82939c;font-size:10px;letter-spacing:.11em;text-transform:uppercase}.handle-card h2{margin:.15rem 0 .4rem;color:var(--handles-ink);font-size:21px;line-height:1.1;font-weight:500}.handle-card__body>p{min-height:3.9em;margin:0 0 .8rem;color:var(--handles-muted);font-size:13px;line-height:1.5}.handle-card__color-head{display:flex;justify-content:space-between;gap:.5rem;margin:.15rem 0 .45rem;color:#84949b;font-size:12px}.handle-card__color-head strong{color:#3f5965;font-weight:500}.handle-color-list{display:flex;flex-wrap:wrap;gap:.4rem}.handle-color{display:inline-flex;align-items:center;gap:.38rem;min-height:30px;padding:.26rem .48rem;border:1px solid #e0e7ea;border-radius:999px;background:#fff;color:#536b76;font:inherit;font-size:12px;cursor:pointer}.handle-color:hover,.handle-color.is-active{border-color:#82a7aa;background:#edf5f5;color:#244f55}.handle-color__dot{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.handle-color__dot--white{background:#f7f7f4}.handle-color__dot--black,.handle-color__dot--black-matte{background:#222}.handle-color__dot--silver{background:linear-gradient(135deg,#dfe4e6,#8e989d)}.handle-color__dot--brown{background:#6b4936}.handle-color__dot--bronze{background:#9a6a46}.handle-color__dot--gold{background:#c7a24f}.handle-color__dot--anthracite{background:#4b5052}.handle-color__dot--titan{background:#777d7f}.handle-color__dot--steel,.handle-color__dot--steel-aluminium{background:linear-gradient(135deg,#c2c8ca,#737f85)}.handle-color__dot--grey-matte{background:#757575}.handle-color__dot--black-amber{background:#40352b}.handle-color__dot--champagne{background:#c8b38c}.handle-card__footer{display:flex;align-items:end;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.75rem;border-top:1px solid #edf1f3}.handle-card__reserve small{display:block;color:#96a3aa;font-size:11px}.handle-card__reserve span{display:block;margin-top:.1rem;color:#667b84;font-size:12px}.handle-card__action{flex:0 0 auto;padding:.52rem .7rem;border:1px solid #8eb0b3;border-radius:10px;background:#fff;color:#315c62;font:inherit;font-size:13px;font-weight:500;cursor:pointer}.handle-card__action:hover{background:#eaf3f3}.handles-note{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;margin-top:1.5rem;padding:1.25rem 1.4rem;border-radius:22px;background:#163a47;color:#fff}.handles-note .handles-kicker{color:#a9cad0}.handles-note h2{margin:.3rem 0;color:#fff;font-weight:500}.handles-note p{max-width:850px;margin:0;color:rgba(255,255,255,.78);line-height:1.55}@media(max-width:1100px){.handles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){.handles-hero{grid-template-columns:1fr}.handles-toolbar{align-items:flex-start;flex-direction:column}.handles-brand-chips{justify-content:flex-start}.handles-note{grid-template-columns:1fr}}@media(max-width:620px){.handles-page{padding:22px 12px 54px}.handles-hero{padding:1.2rem;border-radius:20px}.handles-hero h1{font-size:36px}.handles-grid{grid-template-columns:1fr}.handle-card__visual{min-height:228px;padding:22px}.handle-card__visual img{max-height:172px}.handle-card__body>p{min-height:0}.handle-card__footer{align-items:stretch;flex-direction:column}.handle-card__action{width:100%}.handles-note{padding:1rem;border-radius:18px}}

.handles-hero .handles-hero__tagline{font-size:20px;color:#42767b;margin:.5rem 0 1rem}
.handle-card__status{font-size:12px;color:#8b3434;margin:.5rem 0 0;min-height:0}
.handle-card__status:empty{display:none}
.handles-order{margin-top:1.5rem;padding:clamp(20px,3vw,36px);border:1px solid var(--handles-line);border-radius:22px;background:#f7fbfc;color:var(--handles-ink)}
.handles-order h2{font-size:clamp(24px,3vw,34px);font-weight:500;margin:.4rem 0 1.2rem}
.handles-order__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.handles-order h3{font-size:19px;margin:0 0 .6rem}
.handles-order p{line-height:1.6;color:#526977}
.handles-order a{color:#285e67;text-decoration:underline;text-underline-offset:3px}
.handles-order__hint{font-size:13px;margin:1.4rem 0 0}
.handles-page button:focus-visible,.handles-page a:focus-visible{outline:3px solid #356f76;outline-offset:4px}
@media(max-width:620px){.handles-order__grid{grid-template-columns:1fr;gap:1.4rem}}
@media(prefers-reduced-motion:reduce){.handle-card,.handle-card__visual img{transition:none}.handle-card:hover{transform:none}}

.handle-card__footer{flex-wrap:wrap}