.haft-ui { --haft-ink:#2b2118; --haft-muted:#7a6a58; --haft-line:#e3d8c6; --haft-card:#fffdf8; --haft-accent:#8a4b2a; color:var(--haft-ink); font-size:15px; line-height:1.45; }
.haft-ui * { box-sizing:border-box; }
.haft-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.haft-tabs button, .haft-sizes button, .haft-dl button { font:inherit; font-size:14px; padding:7px 12px; border-radius:999px; border:1px solid var(--haft-line); background:#fff; color:var(--haft-ink); cursor:pointer; }
.haft-tabs button.is-on, .haft-sizes button.is-on { background:var(--haft-accent); border-color:var(--haft-accent); color:#fff; }
.haft-params { display:flex; flex-wrap:wrap; gap:10px 16px; background:var(--haft-card); border:1px solid var(--haft-line); border-radius:10px; padding:12px 14px; margin-bottom:14px; }
.haft-params label { display:flex; flex-direction:column; font-size:12.5px; color:var(--haft-muted); }
.haft-params input { width:100px; margin-top:3px; padding:5px 7px; border:1px solid var(--haft-line); border-radius:6px; font:inherit; }
.haft-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; }
.haft-card { display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:8px; border:1px solid var(--haft-line); border-radius:10px; background:var(--haft-card); cursor:pointer; font:inherit; text-align:center; color:var(--haft-ink); }
.haft-card:hover { border-color:#c9a774; }
.haft-card.is-on { border-color:var(--haft-accent); box-shadow:0 0 0 2px var(--haft-accent) inset; }
.haft-thumb { display:flex; align-items:center; justify-content:center; height:130px; background:#3b2a1e; border-radius:7px; padding:8px; overflow:hidden; }
.haft-thumb svg { width:100%; height:100%; display:block; }
.haft-name { font-size:12.5px; line-height:1.25; }
.haft-spin { width:18px; height:18px; border-radius:50%; border:2px solid #7a5a3c; border-top-color:#ecd3a2; animation:haft-spin 0.8s linear infinite; }
@keyframes haft-spin { to { transform:rotate(360deg); } }
.haft-detail { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; background:var(--haft-card); border:1px solid var(--haft-line); border-radius:12px; padding:14px; margin-bottom:16px; }
.haft-detail[hidden] { display:none; }
.haft-stage { background:#3b2a1e; border-radius:9px; padding:14px; display:flex; justify-content:center; }
.haft-stage svg { width:100%; max-height:360px; }
.haft-info h3 { margin:0 0 6px; font:600 20px/1.2 Georgia, serif; }
.haft-meta { margin:0 0 6px; color:var(--haft-muted); font-size:13.5px; }
.haft-sizes { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.haft-sizes button { border-radius:10px; display:flex; flex-direction:column; align-items:center; min-width:84px; }
.haft-sizes small { font-size:11.5px; opacity:0.8; }
.haft-parts { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.haft-parts figure { margin:0; flex:1 1 70px; background:#fff; border:1px solid var(--haft-line); border-radius:6px; padding:4px; text-align:center; font-size:11.5px; color:var(--haft-muted); }
.haft-parts svg { width:100%; height:70px; }
.haft-dl { display:flex; flex-wrap:wrap; gap:6px; }
.haft-dl button { border-radius:6px; border-color:var(--haft-accent); color:var(--haft-accent); }
.haft-dl button.is-main { background:var(--haft-accent); color:#fff; }
.haft-label { margin:12px 0 0; font-weight:600; font-size:13.5px; }
.haft-sizes { margin-top:6px; }
.haft-variants button { flex-direction:column; text-align:center; }
.ramki-haft-field { margin:0 0 18px; width:100%; }
.ramki-haft-tools { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ramki-haft-tools .haft-mini { width:70px; height:70px; background:#3b2a1e; border-radius:6px; padding:4px; }
.ramki-haft-tools .haft-mini svg { width:100%; height:100%; }
.ramki-haft-tools button { font-size:12px; }
.ramki-haft-order { display:flex; gap:14px; align-items:center; margin-bottom:12px; }
.ramki-haft-order .haft-mini { width:110px; height:110px; }
.haft-order.button { display:inline-block; margin-top:10px; padding:10px 18px; border-radius:8px; background:var(--haft-accent); color:#fff; text-decoration:none; font-weight:600; }
.haft-order.button:hover { filter:brightness(1.1); color:#fff; }
.ramki-haft-buy { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin:6px 0 24px; padding:14px; background:#fffdf8; border:1px solid #e3d8c6; border-radius:12px; position:sticky; bottom:8px; z-index:5; }
.ramki-haft-total { font-weight:700; font-size:18px; color:#2b2118; margin-right:auto; }
.ramki-haft-qty { display:flex; align-items:center; gap:6px; font-size:14px; }
.ramki-haft-qty input { width:64px; padding:6px; }
.haft-protect .haft-stage, .haft-protect .haft-thumb, .haft-protect svg { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none; }
.haft-protect .haft-stage svg, .haft-protect .haft-thumb svg { pointer-events:none; }
@media print { .haft-protect .haft-stage, .haft-protect .haft-grid { visibility:hidden; } }
.ramki-haft-order-preview img { -webkit-user-drag:none; -webkit-touch-callout:none; }
.haft-need { outline:3px solid #c0392b; outline-offset:4px; border-radius:8px; }
.haft-warn { color:#a3341b; font-size:13px; }
@media (max-width: 640px) { .haft-detail { grid-template-columns:1fr; } .haft-grid { grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); } }