/* ============================================================
   VELLINORE — Personalisierung (Monogram) system
   PDP flow panel + dedicated service page.
   ============================================================ */

/* hide when Tweak off */
body[data-perso="off"] [data-pdp-perso]{ display:none; }

/* ---- PDP monogram panel ---- */
.pdp-perso{ margin:24px 0 4px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.perso-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:0; padding:18px 2px; cursor:pointer; font-family:var(--sans); color:var(--ink); }
.perso-toggle .pt-left{ display:flex; align-items:center; gap:11px; font-size:14px; letter-spacing:.04em; }
.perso-toggle .pt-mark{ color:var(--gold-deep); font-size:13px; }
.perso-toggle .pt-right{ display:flex; align-items:center; gap:12px; font-family:var(--sans);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); }
.perso-toggle .pt-chev{ font-size:17px; line-height:1; color:var(--ink-soft); transition:transform .3s var(--ease); }
.pdp-perso.open .perso-toggle .pt-chev{ transform:rotate(45deg); }

.perso-panel{ padding:2px 2px 24px; display:flex; flex-direction:column; gap:20px;
  animation:persoIn .4s var(--ease) both; }
@keyframes persoIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.perso-intro{ font-family:var(--sans); font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:0; max-width:46ch; }
.perso-field{ display:flex; flex-direction:column; gap:9px; }
.perso-field > label{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.perso-field input[data-perso-initials]{ font-family:var(--serif); font-size:22px; letter-spacing:.18em;
  text-transform:uppercase; padding:12px 16px; border:1px solid var(--line-dark); background:var(--cream);
  color:var(--ink); width:160px; outline:none; transition:border-color .2s; }
.perso-field input[data-perso-initials]:focus{ border-color:var(--gold-deep); }
.perso-field input[data-perso-initials]::placeholder{ color:var(--ink-faint); letter-spacing:.12em; }

.perso-threads, .perso-place{ display:flex; gap:9px; flex-wrap:wrap; }
.perso-threads button{ display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:12px;
  letter-spacing:.04em; color:var(--ink-soft); background:var(--cream); border:1px solid var(--line-dark);
  padding:8px 13px 8px 10px; cursor:pointer; transition:all .2s var(--ease); }
.perso-threads button::before{ content:''; width:13px; height:13px; border-radius:50%; background:var(--c);
  border:1px solid rgba(0,0,0,.12); }
.perso-threads button.sel{ border-color:var(--ink); color:var(--ink); }
.perso-place button{ font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--ink-soft);
  background:var(--cream); border:1px solid var(--line-dark); padding:9px 16px; cursor:pointer; transition:all .2s var(--ease); }
.perso-place button.sel{ border-color:var(--ink); color:var(--ink); background:var(--cream-2); }

.perso-preview{ display:flex; align-items:center; gap:18px; padding:18px 20px; background:var(--cream-2);
  border:1px solid var(--line); }
.perso-preview .pp-label{ font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.perso-preview .pp-mono{ font-family:var(--serif); font-style:italic; font-size:32px; letter-spacing:.14em;
  color:var(--gold-deep); min-height:1.1em; }
.perso-note{ font-family:var(--sans); font-size:11px; line-height:1.55; color:var(--ink-faint); margin:0; }

/* a small badge appended to the buy button area when active */
.perso-active-chip{ display:none; align-items:center; gap:8px; margin:14px 0 0; font-family:var(--sans);
  font-size:12px; letter-spacing:.03em; color:var(--gold-deep); }
.pdp-perso.has-mono ~ .perso-active-chip,
.perso-active-chip.show{ display:flex; }

/* ============================================================
   PERSONALISIERUNG — dedicated page
   ============================================================ */
.perso-hero{ position:relative; min-height:clamp(380px,56vh,620px); display:flex; align-items:center;
  overflow:hidden; background:var(--espresso); }
.perso-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; }
.perso-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(34,28,18,.3),rgba(34,28,18,.62)); }
.perso-hero .wrap{ position:relative; z-index:2; color:#F6EFE0; text-align:center; margin:0 auto; }
.perso-hero .eyebrow{ color:var(--champagne); }
.perso-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(40px,6vw,84px); line-height:1.02; margin:14px 0 16px; }
.perso-hero p{ font-family:var(--sans); font-size:16px; line-height:1.7; color:rgba(246,239,224,.88); max-width:52ch; margin:0 auto; }

.perso-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,64px); }
.perso-step{ display:flex; flex-direction:column; gap:12px; }
.perso-step .n{ font-family:var(--serif); font-style:italic; font-size:34px; color:var(--gold-deep); line-height:1; }
.perso-step h3{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2vw,28px); color:var(--ink); margin:0; }
.perso-step p{ font-family:var(--sans); font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:0; }
@media (max-width:760px){ .perso-steps{ grid-template-columns:1fr; gap:32px; } }

.perso-what{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(36px,5vw,90px); align-items:center; }
.perso-what-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--cream-3); }
.perso-what-media img{ width:100%; height:100%; object-fit:cover; }
.perso-what-body h2{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,3.4vw,50px); line-height:1.04; margin:0 0 18px; }
.perso-what-body p{ font-family:var(--sans); font-size:16px; line-height:1.72; color:var(--ink-soft); margin:0 0 22px; max-width:46ch; }
.perso-what-list{ list-style:none; margin:0 0 26px; padding:0; border-top:1px solid var(--line); }
.perso-what-list li{ display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--line);
  font-family:var(--sans); font-size:14px; color:var(--ink); }
.perso-what-list li .meta{ color:var(--ink-faint); font-size:12.5px; letter-spacing:.04em; }
@media (max-width:820px){ .perso-what{ grid-template-columns:1fr; gap:32px; } .perso-what-media{ order:-1; } }