/* Catalog: the showcase's night palette, softened toward champagne for ceremonies. */
.catalog-page{--gold:#e8c98a}
.catalog-page .b1{background:radial-gradient(circle, rgba(232,201,138,.28), transparent 65%)}
.links a[aria-current="page"]{color:var(--text)}

.c-hero{display:grid; gap:20px; justify-items:start; padding-block:64px 12px}
.c-hero h1{max-width:14ch}
.c-hero h1 em{font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-weight:500; color:var(--gold); letter-spacing:-.01em}
.c-hero > *{animation:rise .8s var(--ease) both}
.c-hero > :nth-child(2){animation-delay:.08s} .c-hero > :nth-child(3){animation-delay:.16s} .c-hero > :nth-child(4){animation-delay:.24s}
.c-features{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.c-features li{padding:7px 14px; border-radius:999px; font-size:14px; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--edge)}
.c-features li::before{content:"✦"; margin-right:8px; color:var(--gold); font-size:11px}

.c-head{display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{font:600 14px var(--body); color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--edge); border-radius:999px; padding:9px 16px; cursor:pointer; transition:background .2s, color .2s}
.chip:hover{color:var(--text)}
.chip[aria-selected="true"]{background:var(--gold); color:#1b1408; border-color:transparent}
.chip:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

.c-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px}
.design{display:grid; gap:14px; padding:14px 14px 18px; border-radius:26px; background:var(--surface); border:1px solid var(--edge);
  transition:translate .35s var(--ease), border-color .3s, box-shadow .35s; animation:rise .7s var(--ease) both; animation-delay:calc(var(--i) * 70ms)}
.design:hover{translate:0 -5px; border-color:var(--edge-hi); box-shadow:0 34px 70px -34px rgba(0,0,0,.9)}
.design.selected{border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,201,138,.25)}
.design .phone{--w:100%; border-radius:32px; padding:7px}
.design .phone-screen{border-radius:26px; aspect-ratio:390 / 700}
.design .phone-screen iframe{height:700px; pointer-events:none; transition:opacity .4s}
.design .phone-screen.swapping iframe{opacity:.2}
.design-body{display:grid; gap:4px; padding-inline:6px}
.design-title{display:flex; align-items:center; justify-content:space-between; gap:10px}
.design-title h3{font-size:21px}
.swatches{display:inline-flex}
.swatches i{width:16px; height:16px; border-radius:50%; border:2px solid var(--surface); margin-left:-6px}
.design-body p{margin:0; color:var(--muted); font-size:14px}
.design-actions{display:flex; gap:8px; padding-inline:6px}
.design-actions .btn{flex:1; padding:10px 12px; font-size:14px}
.catalog-page .btn-primary{background:linear-gradient(135deg, #f3dca6, var(--gold) 55%, #c9a35d); color:#1b1408; box-shadow:0 12px 30px -14px var(--gold)}

.c-steps{margin:14px 0 0; padding:0; list-style:none; counter-reset:step; display:grid; gap:10px}
.c-steps li{counter-increment:step; display:flex; gap:12px; align-items:center; color:var(--muted)}
.c-steps li::before{content:counter(step); display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--gold); color:var(--gold); font:600 13px var(--mono)}
.catalog-page .dopt:has(input:checked){border-color:var(--gold); background:rgba(232,201,138,.1)}
.catalog-page .field input:focus,.catalog-page .field textarea:focus{border-color:var(--gold); box-shadow:0 0 0 4px rgba(232,201,138,.16)}
.foot a.foot-tag{color:var(--muted); text-decoration:none}

@media (max-width:980px){ .c-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:620px){ .c-grid{grid-template-columns:1fr; max-width:360px; margin-inline:auto} .c-hero{padding-top:36px} }

/* ---------- interactive catalog: showcase pink instead of champagne ---------- */
.catalog-fun{--gold:#ffc65c}
.catalog-fun .b1{background:radial-gradient(circle, rgba(255,79,123,.45), transparent 65%)}
.catalog-fun .btn-primary{background:linear-gradient(135deg, var(--wax-2), var(--wax) 55%, #e5306a); color:#fff; box-shadow:0 12px 30px -12px var(--wax)}
.catalog-fun .design.selected{border-color:var(--wax); box-shadow:0 0 0 3px rgba(255,79,123,.25)}
.catalog-fun .dopt:has(input:checked){border-color:var(--wax); background:rgba(255,79,123,.1)}
.catalog-fun .field input:focus,.catalog-fun .field textarea:focus{border-color:var(--wax); box-shadow:0 0 0 4px rgba(255,79,123,.18)}
.catalog-fun .c-steps li::before{border-color:var(--wax); color:var(--wax-2)}
.catalog-fun .c-features li::before{color:var(--wax-2)}
.c-head-note{max-width:34ch}
.design-unique{align-content:center; justify-items:start; gap:14px; padding:28px; min-height:420px; border-style:dashed;
  background:radial-gradient(circle at 20% 15%, rgba(255,79,123,.25), transparent 50%), radial-gradient(circle at 85% 90%, rgba(255,198,92,.2), transparent 50%), var(--surface)}
.design-unique .big{margin:0; font:800 clamp(28px, 3vw, 36px)/1.05 var(--display); letter-spacing:-.02em}
.design-unique p{margin:0; color:var(--muted)}
.carousel .drag-hint a{color:inherit; text-decoration:none}
.carousel .drag-hint a:hover{color:var(--text); text-decoration:underline}
.links a[aria-current="page"]{color:var(--text)}