/* components.css — buttons, cards, gallery, reviews, forms, configurator */

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f);
  font-weight:500;font-size:15.5px;padding:13px 26px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;transition:transform .12s,background .15s,box-shadow .15s;white-space:nowrap;letter-spacing:.005em}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;transform:translateY(-1px);box-shadow:var(--sh)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border-2)}
.btn-outline:hover{border-color:var(--ink);background:var(--surface)}
.btn-ink{background:var(--brand);color:#fff}
.btn-ink:hover{background:var(--brand-deep);transform:translateY(-1px)}
.btn-line{background:var(--line-green);color:#fff;border-color:var(--line-green)}
.btn-line:hover{filter:brightness(.95);transform:translateY(-1px)}
.btn-line.ghost{background:transparent;color:#0a8f3c;border-color:#bfe6cf}
.btn-line.ghost:hover{background:var(--line-green);color:#fff;border-color:var(--line-green);filter:none}
.line-glyph{font-family:var(--f-en);font-weight:700;font-size:11px;background:rgba(255,255,255,.22);padding:2px 6px;border-radius:4px;letter-spacing:.03em}
.btn-line.ghost .line-glyph{background:rgba(6,199,85,.12)}
.btn-lg{padding:16px 34px;font-size:16.5px}
.btn-block{display:flex;width:100%}

/* eyebrow / badge */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-en);font-weight:600;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:1.5px;background:var(--brand)}
.badge{display:inline-block;background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:999px;border:1px solid var(--border)}

/* section */
.sec{padding:104px 0}
.sec-head{max-width:680px;margin-bottom:54px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--muted);font-size:18px;margin:0;line-height:1.7}

/* generic cards */
.margin-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:26px 28px;box-shadow:var(--sh-sm)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* service card — minimal, professional */
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:32px 30px;
  transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column;position:relative}
.service-card:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--border-2)}
.service-card .ic{width:46px;height:46px;color:var(--ink);display:flex;align-items:center;margin-bottom:22px}
.service-card .ic svg{width:30px;height:30px}
.service-card h3{font-size:20px;margin-bottom:10px}
.service-card p{color:var(--muted);font-size:15.5px;margin:0 0 18px;line-height:1.65}
.service-card .more{margin-top:auto;font-weight:500;color:var(--brand);font-size:15px;display:inline-flex;align-items:center;gap:6px}
.service-card:hover .more{gap:10px}

/* gallery — agency portfolio look */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gal-item{position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.gal-item img{aspect-ratio:1/1.28;object-fit:cover;width:100%;transition:transform .5s ease}
.gal-item:hover img{transform:scale(1.04)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 16px 14px;color:#fff;font-size:14.5px;font-weight:500;
  background:linear-gradient(transparent,rgba(20,24,29,.78));transform:translateY(8px);opacity:0;transition:.25s}
.gal-item:hover .gal-cap{transform:translateY(0);opacity:1}

/* reviews */
.review-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:32px;box-shadow:var(--sh-sm)}
.review-card .stars{color:#d9a400;font-size:15px;letter-spacing:3px;margin-bottom:14px}
.review-card p{font-size:16px;color:var(--ink-2);margin:0 0 18px;line-height:1.7}
.review-card .who{font-weight:600;font-size:14.5px;color:var(--ink)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-family:var(--f-en);font-weight:600;font-size:44px;color:var(--ink);line-height:1;letter-spacing:-.02em}
.stat .lbl{color:var(--muted);font-size:14.5px;margin-top:10px}

/* forms */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:4px}
.field label{font-weight:500;font-size:14.5px;color:var(--ink-2)}
.field input,.field select,.field textarea{font-family:var(--f);font-size:15.5px;padding:13px 15px;
  border:1px solid var(--border-2);border-radius:var(--r-sm);background:#fff;width:100%;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.field .msg{color:var(--err);font-size:13px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:14px 18px;border-radius:var(--r-sm);margin-bottom:22px;font-weight:500;font-size:15px}
.alert.ok{background:var(--brand-soft);color:var(--brand-deep)}
.alert.err{background:#fdeceb;color:var(--err)}

/* cart icon */
.cart-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;color:var(--ink);transition:.15s}
.cart-link:hover{background:var(--surface)}
.cart-link svg{width:21px;height:21px}
.cart-badge{position:absolute;top:2px;right:2px;background:var(--brand);color:#fff;font-family:var(--f-en);
  font-size:10.5px;font-weight:600;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.cart-badge[hidden]{display:none}

/* configurator */
.builder{display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:start}
.opt-group{margin-bottom:36px}
.opt-group>label{display:block;font-weight:600;font-size:17px;margin-bottom:16px;color:var(--ink)}
.opt-group .req{color:var(--brand)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.swatch{cursor:pointer;border:1px solid var(--border-2);border-radius:var(--r-sm);overflow:hidden;background:#fff;transition:.15s;position:relative}
.swatch img{aspect-ratio:1/1.3;object-fit:cover;width:100%}
.swatch .cap{font-size:13px;padding:10px 9px;text-align:center;color:var(--ink-2)}
.swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch:hover{border-color:var(--ink-2)}
.swatch.sel{border-color:var(--brand);box-shadow:var(--ring)}
.swatch.sel::after{content:"✓";position:absolute;top:8px;right:8px;background:var(--brand);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}
.swatch .zoom{position:absolute;top:8px;left:8px;background:rgba(20,24,29,.6);color:#fff;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:0;transition:.15s}
.swatch:hover .zoom{opacity:1}
.paper-opts{display:grid;gap:12px}
.paper-opt{display:flex;align-items:center;gap:14px;border:1px solid var(--border-2);border-radius:var(--r-sm);padding:15px 18px;cursor:pointer;transition:.15s}
.paper-opt:hover{border-color:var(--ink-2)}
.paper-opt.sel{border-color:var(--brand);box-shadow:var(--ring)}
.paper-opt input{accent-color:var(--brand);width:18px;height:18px}
.paper-opt .pl{font-weight:600}
.paper-opt .pd{font-size:13px;color:var(--muted)}
.paper-opt .pp{margin-left:auto;font-family:var(--f-en);font-weight:600;color:var(--ink)}

/* summary */
.summary{position:sticky;top:100px;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:28px;box-shadow:var(--sh)}
.summary h3{margin-bottom:18px;font-size:18px}
.sum-preview{display:flex;gap:12px;margin-bottom:20px}
.sum-preview figure{flex:1;margin:0;text-align:center}
.sum-preview img{width:100%;aspect-ratio:1/1.3;object-fit:cover;border:1px solid var(--border);border-radius:var(--r-sm);background:#fff}
.sum-preview figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.sum-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px;gap:12px}
.sum-row .v{font-weight:600;text-align:right;color:var(--ink)}
.qty-ctrl{display:flex;align-items:center;gap:10px;margin:18px 0}
.qty-ctrl button{width:40px;height:40px;border:1px solid var(--border-2);background:#fff;border-radius:8px;font-size:20px;cursor:pointer}
.qty-ctrl button:hover{border-color:var(--ink)}
.qty-ctrl input{width:96px;text-align:center;font-size:16px;padding:9px;border:1px solid var(--border-2);border-radius:8px;font-family:var(--f-en)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0}
.sum-total .big{font-family:var(--f-en);font-size:30px;font-weight:600;color:var(--ink)}
.sum-vat{font-size:12.5px;color:var(--muted);text-align:right;margin-top:-12px}

/* cart */
.cart-tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.cart-tbl th{background:var(--surface);color:var(--ink-2);text-align:left;padding:15px 20px;font-weight:600;font-size:13.5px;letter-spacing:.02em;text-transform:uppercase;border-bottom:1px solid var(--border)}
.cart-tbl td{padding:18px 20px;border-bottom:1px solid var(--border);vertical-align:middle}
.cart-tbl tr:last-child td{border-bottom:none}
.cart-thumb{width:52px;height:66px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
.cart-item-name{font-weight:600}
.cart-item-detail{font-size:13px;color:var(--muted)}
.cart-rm{color:var(--err);font-size:13px;background:none;border:none;cursor:pointer}
.cart-rm:hover{text-decoration:underline}
.cart-foot{display:flex;justify-content:flex-end;margin-top:28px}
.cart-box{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:28px;min-width:340px}
.cart-empty{text-align:center;padding:90px 20px}
.cart-empty .em{width:72px;height:72px;margin:0 auto 18px;color:var(--border-2)}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(20,24,29,.86);display:none;align-items:center;justify-content:center;z-index:200;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(440px,92vw);max-height:86vh;border-radius:var(--r);box-shadow:var(--sh-lg);background:#fff}
.lightbox .x{position:absolute;top:20px;right:24px;background:#fff;border:none;width:44px;height:44px;border-radius:50%;font-size:22px;cursor:pointer}

@media(max-width:980px){.grid-3,.grid-4,.gallery,.stats{grid-template-columns:repeat(2,1fr)}.builder{grid-template-columns:1fr;gap:32px}.summary{position:static}}
@media(max-width:560px){.grid-3,.grid-2,.grid-4,.gallery{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.sec{padding:64px 0}.cart-box{min-width:0;width:100%}.cart-tbl{display:block;overflow-x:auto}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}