/* 731003 — visual-only premium refinement. Business logic and product data are unchanged. */
:root{
  --rd-ink:#1a1b1d;
  --rd-ink-soft:#292b2e;
  --rd-paper:#f3f0ea;
  --rd-paper-deep:#eae5dc;
  --rd-card:#fffdfa;
  --rd-line:rgba(39,38,35,.12);
  --rd-gold:#b28a60;
  --rd-gold-light:#d8bc9c;
  --rd-muted:#706c66;
  --rd-shadow:0 20px 54px rgba(48,43,35,.10);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 8% 2%,rgba(255,255,255,.92),transparent 30%),
    linear-gradient(180deg,#efede8 0%,#f5f2ed 44%,#ece8e1 100%);
  color:var(--rd-ink);
}
header{
  height:72px;
  background:rgba(25,26,28,.96);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 28px rgba(13,13,14,.16);
}
.logo{
  border:1px solid rgba(216,188,156,.72);
  border-radius:9px;
  color:#ead6bd;
  background:linear-gradient(145deg,rgba(178,138,96,.18),rgba(255,255,255,.025));
}
.brand strong{font-weight:650;letter-spacing:.01em}
.brand small{color:#aaa9a6;letter-spacing:.16em}
.tag{border-color:rgba(255,255,255,.12);color:#c9c7c1;background:rgba(255,255,255,.025)}
main{max-width:1480px;padding:24px 24px 52px}

.design-hero{
  grid-template-columns:minmax(0,1.16fr) minmax(360px,.84fr);
  min-height:390px;
  margin:2px 0 26px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:
    radial-gradient(circle at 18% 12%,rgba(178,138,96,.18),transparent 34%),
    linear-gradient(118deg,#17181a 0%,#1f2124 56%,#292b2e 100%);
  box-shadow:0 30px 76px rgba(30,28,25,.22);
}
.design-hero:before{
  background:
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.18) 72%,transparent);
  opacity:.48;
}
.design-hero:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,188,156,.72),transparent);
  opacity:.65;
}
.design-hero-copy{padding:58px 42px 48px 54px}
.design-hero-kicker{color:#d8bc9c;font-size:10px;letter-spacing:.25em}
.design-hero-kicker:before{width:34px;background:linear-gradient(90deg,#b28a60,#e2c7a8)}
.design-hero h1{
  max-width:760px;
  margin:18px 0 17px;
  font-family:Georgia,"Songti SC","STSong",serif;
  font-size:clamp(40px,4.15vw,61px);
  line-height:1.08;
  font-weight:500;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.design-hero p{max-width:650px;color:#c7c7c4;font-size:15px;line-height:1.8}
.design-hero-actions{margin-top:29px;gap:18px}
.hero-primary{
  min-width:138px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:linear-gradient(135deg,#c09a71,#9c7249);
  padding:14px 25px;
  box-shadow:0 14px 30px rgba(117,78,43,.30),inset 0 1px rgba(255,255,255,.28);
  letter-spacing:.03em;
}
.hero-primary:hover{transform:translateY(-2px);background:linear-gradient(135deg,#cba67e,#a57b53)}
.hero-assurance{color:#aaa9a5;letter-spacing:.025em}
.hero-metrics{gap:11px;margin-top:32px}
.hero-metrics div{
  min-width:116px;
  padding:13px 15px;
  border-color:rgba(255,255,255,.09);
  border-radius:15px;
  background:rgba(255,255,255,.038);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.hero-metrics strong{color:#e0c4a4;font-size:19px;font-weight:600}
.hero-metrics span{color:#9f9f9c;letter-spacing:.12em}
.hero-reset{
  top:20px;right:20px;
  border:1px solid rgba(255,255,255,.12);
  color:#c7c6c3;
  background:rgba(255,255,255,.035);
  box-shadow:none;
}
.hero-reset:hover{border-color:rgba(216,188,156,.46);color:#f0dfc9;background:rgba(178,138,96,.08)}

/* Abstract brand panel: intentionally no photo and no simulated railing. */
.design-hero-visual.hero-abstract{
  position:relative;
  min-height:390px;
  overflow:hidden;
  border-left:1px solid rgba(255,255,255,.055);
  background:
    radial-gradient(circle at 70% 38%,rgba(178,138,96,.12),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.003));
  isolation:isolate;
}
.hero-aura{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}
.hero-aura-one{
  width:330px;height:330px;right:4%;top:4%;
  border:1px solid rgba(216,188,156,.16);
  box-shadow:0 0 0 42px rgba(216,188,156,.018),0 0 0 90px rgba(216,188,156,.01);
}
.hero-aura-two{
  width:160px;height:160px;left:12%;bottom:8%;
  background:radial-gradient(circle,rgba(178,138,96,.13),transparent 68%);
}
.hero-grid-lines{
  position:absolute;inset:10% 7% 11% 8%;
  border-top:1px solid rgba(255,255,255,.075);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.hero-grid-lines:before,.hero-grid-lines:after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.055)}
.hero-grid-lines:before{left:23%}.hero-grid-lines:after{right:18%}
.hero-monogram{
  position:absolute;inset:50% auto auto 50%;
  transform:translate(-48%,-54%);
  display:flex;align-items:center;gap:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(118px,13vw,205px);
  line-height:.78;
  letter-spacing:-.22em;
  color:transparent;
  -webkit-text-stroke:1px rgba(231,210,186,.29);
  text-shadow:0 30px 80px rgba(0,0,0,.20);
  user-select:none;
}
.hero-monogram span:last-child{transform:translateY(20px);-webkit-text-stroke-color:rgba(178,138,96,.43)}
.hero-design-note{
  position:absolute;left:10%;bottom:38px;z-index:2;
  display:grid;gap:7px;
}
.hero-design-note span{font-size:8px;letter-spacing:.27em;color:#8f908e}
.hero-design-note strong{font:500 14px/1.2 Georgia,serif;letter-spacing:.13em;color:#d8c2a8}
.hero-coordinate{position:absolute;font-size:8px;letter-spacing:.20em;color:rgba(210,210,206,.42)}
.hero-coordinate-top{right:24px;top:72px;writing-mode:vertical-rl}
.hero-coordinate-bottom{right:27px;bottom:25px}

.steps{gap:9px;margin-bottom:20px}
.step-tab{
  border:1px solid rgba(48,46,42,.08);
  border-radius:13px;
  background:rgba(255,253,250,.72);
  color:#77736d;
  box-shadow:0 5px 20px rgba(48,43,35,.045);
  backdrop-filter:blur(10px);
}
.step-tab.active{
  border-color:rgba(178,138,96,.36);
  background:#fffdfa;
  color:#282723;
  box-shadow:0 12px 30px rgba(48,43,35,.085);
}
.step-tab.active:before{background:linear-gradient(90deg,#a7784d,#d8bc9c)}
.panel{
  border:1px solid var(--rd-line);
  border-radius:24px;
  background:rgba(255,253,250,.92);
  box-shadow:var(--rd-shadow);
}
.panel-title{border-color:rgba(39,38,35,.085)}
.panel-title h2{font-family:Georgia,"Songti SC",serif;font-weight:600;color:#252420}
.panel-title p{color:var(--rd-muted)}
.catalog-toolbar{background:linear-gradient(120deg,#f0ece5,#f6f3ed)!important}
.catalog-search input{background:#fffdfa!important;border-color:rgba(48,46,42,.12)!important}
.catalog-filter{color:#625e58!important;background:rgba(255,253,250,.72)!important;border-color:rgba(48,46,42,.09)!important}
.catalog-filter.active{color:#fff!important;background:linear-gradient(135deg,#333235,#1c1d1f)!important}
.product{
  border-color:rgba(48,46,42,.10)!important;
  background:#fffdfa!important;
  box-shadow:0 10px 30px rgba(49,43,34,.065)!important;
}
.product:hover{box-shadow:0 18px 40px rgba(49,43,34,.105)!important}
.product.selected{border-color:rgba(178,138,96,.68)!important;background:#fffbf5!important}
.product-photo{background:linear-gradient(145deg,#fbfaf7,#eeeae3)!important}
.product-photo-open-label{background:rgba(28,28,29,.84)!important;color:#f1e6d8!important}
.select-product,.view-product-photos{border-radius:10px!important}
.select-product{border-color:rgba(178,138,96,.54)!important;background:#faf3e9!important;color:#6e4b2e!important}
.next button,.confirm,.calc-btn,.primary-action,.detail-confirm{
  border-radius:999px!important;
  background:linear-gradient(135deg,#2c2d30,#17181a)!important;
  box-shadow:0 10px 24px rgba(24,24,25,.16)!important;
}
.next button:hover,.confirm:hover,.calc-btn:hover,.primary-action:hover,.detail-confirm:hover{background:linear-gradient(135deg,#a87d54,#7e5735)!important}

@media(max-width:980px){
  .design-hero{grid-template-columns:1fr;min-height:0}
  .design-hero-copy{padding:46px 36px 38px}
  .design-hero-visual.hero-abstract{min-height:245px;border-left:0;border-top:1px solid rgba(255,255,255,.055)}
  .hero-monogram{font-size:150px}
}
@media(max-width:650px){
  main{padding:12px 10px 34px}
  .design-hero{border-radius:21px}
  .design-hero-copy{padding:35px 22px 27px}
  .design-hero h1{font-size:36px}
  .design-hero-visual.hero-abstract{min-height:205px}
  .hero-monogram{font-size:116px}
  .hero-design-note{left:9%;bottom:24px}
  .hero-coordinate-top{display:none}
  .hero-coordinate-bottom{right:17px;bottom:15px}
  .steps{gap:6px}
  .step-tab{padding:10px 7px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-primary,.product{transition:none!important}}