/* ============================================================
   CUSTOMIZATIONS — magazine-style catalog with illustrations
   ============================================================ */

/* ---------- Hero ---------- */
.page-hero .hero-grid{
  display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;
}
@media(max-width:980px){.page-hero .hero-grid{grid-template-columns:1fr}}
.page-hero .hero-grid > div:first-child h1{max-width:none}

.page-hero .crumbs{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:24px}
.page-hero .crumbs a{color:rgba(255,255,255,.55);transition:color .2s var(--ease)}
.page-hero .crumbs a:hover{color:var(--gold-2)}
.page-hero .crumbs .sep{opacity:.35;margin:0 8px}
.page-hero .crumbs span:not(.sep){color:#fff}

.hero-stats{display:flex;gap:40px;margin-top:30px;flex-wrap:wrap}
.hero-stats .stat .num{font-family:var(--serif);font-size:34px;font-weight:400;color:#fff;line-height:1;font-feature-settings:'tnum' 1}
.hero-stats .stat .num em{font-style:normal;color:var(--gold-2);font-size:20px;margin-left:2px}
.hero-stats .stat .lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-top:8px}

/* ---------- Sticky filter ---------- */
.toolbar-band{background:var(--bg-2);padding:18px 0}
.cust-toolbar{
  width:calc(100% - clamp(40px,7vw,96px));
  max-width:var(--container);
  margin:0 auto;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(16px);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  border:1px solid rgba(10,13,18,.08);
  border-radius:14px;
  box-shadow:0 8px 30px -12px rgba(0,0,0,.18);
  padding:12px 18px;
}
.cust-toolbar .container{padding:0;max-width:none}
.cust-toolbar .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.cust-toolbar .left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cust-toolbar .pill{
  padding:9px 16px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--line);
  font-size:12px;font-weight:600;color:var(--ink-2);
  transition:all .2s var(--ease);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
}
.cust-toolbar .pill:hover{border-color:var(--ink);color:var(--ink)}
.cust-toolbar .pill.active{background:var(--ink);border-color:var(--ink);color:#fff}
.cust-toolbar .pill .count{
  font-size:10px;background:rgba(255,255,255,.18);
  padding:2px 7px;border-radius:7px;font-weight:700;
}
.cust-toolbar .pill:not(.active) .count{background:#fff;color:var(--muted);border:1px solid var(--line)}
.cust-toolbar .search{position:relative}
.cust-toolbar .search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.cust-toolbar input{
  padding:11px 16px 11px 40px;border:1px solid var(--line);border-radius:12px;
  font-size:13px;width:280px;background:#fff;
  transition:all .2s var(--ease);
}
.cust-toolbar input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,140,84,.1);width:340px}
@media(max-width:780px){
  .cust-toolbar input,.cust-toolbar input:focus{width:100%}
  .cust-toolbar .row{flex-direction:column;align-items:stretch;gap:12px}
}

/* ---------- Catalog body ---------- */
.cust-catalog{padding:clamp(40px,5vw,60px) 0 clamp(60px,8vw,100px);background:var(--bg-2)}

/* Group header */
.cust-group{margin-bottom:60px}
.cust-group:last-child{margin-bottom:0}
.cust-group .gr-head{
  margin-bottom:30px;
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:end;
  padding-bottom:20px;border-bottom:1px solid var(--line);
}
.cust-group .gr-head .num{
  font-family:var(--serif);font-size:64px;font-weight:300;
  color:var(--gold);line-height:.85;
  font-feature-settings:'tnum' 1;
}
.cust-group .gr-head .mid h2{
  font-family:var(--serif);font-size:clamp(26px,3vw,38px);
  font-weight:500;line-height:1.05;margin:0 0 6px;
}
.cust-group .gr-head .mid h2 em{font-style:italic;color:var(--gold)}
.cust-group .gr-head .mid p{color:var(--muted);font-size:14px;line-height:1.5;max-width:55ch;margin:0}
.cust-group .gr-head .gr-count{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
  white-space:nowrap;
}
@media(max-width:680px){
  .cust-group .gr-head{grid-template-columns:1fr;gap:8px}
  .cust-group .gr-head .num{font-size:42px}
  .cust-group .gr-head .gr-count{margin-top:8px}
}

/* ---------- Item card with illustration ---------- */
.cust-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media(max-width:1100px){.cust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cust-grid{grid-template-columns:1fr}}

.cust-item{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:all .25s var(--ease);
  position:relative;
}
.cust-item:hover{
  border-color:var(--line-2);
  transform:translateY(-3px);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.12);
}
.cust-item:hover .ill img{transform:scale(1.05)}

/* Illustration area — real factory photos (assets/customizations/N.webp) */
.cust-item .ill{
  aspect-ratio:1/1;
  background:#fff;
  display:grid;place-items:center;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.cust-item .ill img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  transition:transform .5s var(--ease);
}
.cust-item .ill .noimg{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(160deg,#f6f6f7 0%,#ececee 100%);
  color:var(--muted);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
}

/* Code badge over illustration */
.cust-item .code-badge{
  position:absolute;top:14px;left:14px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(4px);
  padding:4px 10px;border-radius:99px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--ink);
  border:1px solid rgba(0,0,0,.06);
}
.cust-item .meta-badge{
  position:absolute;top:14px;right:14px;
  background:var(--ink);color:#fff;
  padding:4px 10px;border-radius:99px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}

/* Body */
.cust-item .body{
  padding:20px 22px 22px;
  flex:1;display:flex;flex-direction:column;
}
.cust-item h4{
  font-family:var(--serif);font-size:19px;font-weight:500;
  line-height:1.25;margin:0 0 8px;
}
.cust-item p{
  font-size:13px;color:var(--muted);line-height:1.55;
  margin:0;flex:1;
}
.cust-item .footnote{
  display:flex;align-items:center;gap:10px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.cust-item .footnote .dot{
  width:5px;height:5px;border-radius:99px;background:var(--gold);
}

/* Empty state */
.cust-empty{padding:80px 20px;text-align:center;color:var(--muted);display:none}
.cust-empty h3{font-family:var(--serif);font-size:24px;color:var(--ink);font-weight:500;margin-bottom:6px}
.cust-empty p{font-size:14px}
.cust-catalog.is-empty .cust-group{display:none}
.cust-catalog.is-empty .cust-empty{display:block}

/* ---------- How it works ---------- */
.how-it-works{background:#fff;padding:clamp(60px,8vw,100px) 0;border-top:1px solid var(--line)}
.how-it-works .head{text-align:center;margin-bottom:50px;max-width:680px;margin-left:auto;margin-right:auto}
.how-it-works .head h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:10px}
.how-it-works .head h2 em{font-style:italic;color:var(--gold)}
.how-it-works .head p{color:var(--muted);font-size:15px}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:880px){.how-steps{grid-template-columns:1fr}}
.how-step{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;padding:30px 28px;position:relative;
}
.how-step .num{
  position:absolute;top:18px;right:22px;
  font-family:var(--serif);font-size:48px;font-weight:300;
  color:rgba(184,140,84,.25);line-height:1;font-feature-settings:'tnum' 1;
}
.how-step .ico{
  width:42px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
  display:grid;place-items:center;color:#fff;margin-bottom:16px;
}
.how-step h4{font-family:var(--serif);font-size:20px;font-weight:500;margin-bottom:8px}
.how-step p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}

/* ---------- CTA ---------- */
.cust-cta{background:var(--ink);color:#fff;padding:clamp(60px,8vw,90px) 0;text-align:center}
.cust-cta h2{color:#fff;font-size:clamp(28px,3.8vw,40px);margin-bottom:10px}
.cust-cta h2 em{font-style:italic;color:var(--gold-2)}
.cust-cta p{color:rgba(255,255,255,.7);max-width:52ch;margin:0 auto 26px;font-size:15px;line-height:1.6}