.configuratore {
  padding: clamp(2.8rem, 7vw, 7rem) 5%;
  background: radial-gradient(ellipse at 79% 23%, #efafc5 0, #f8e4eb 59%);
}

.config-intro,
.config-layout {
  max-width: 1200px;
  margin-inline: auto;
}

.config-intro h2 {
  font-size: clamp(2.9rem, 8vw, 7.5rem);
  letter-spacing: -.085em;
  line-height: .98;
}

.config-intro p {
  max-width: 52ch;
  margin: .85rem 0 1.8rem;
}

.config-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1rem, 4vw, 3rem);
}

.config-form,
.config-result {
  min-width: 0;
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: 1.65rem;
  background: #fffafb;
  border: 1px solid #dcb6c6;
}

.config-form fieldset {
  min-width: 0;
  padding: 0;
  margin: 0 0 1.35rem;
  border: 0;
}

.config-form legend,
.config-detail {
  font-weight: 750;
}

.config-options {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .55rem;
}

.config-options label { position: relative; }

.config-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.config-options span,
.config-actions :is(button,a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .55rem .85rem;
  border: 1px solid #d69cb0;
  border-radius: 999px;
  font: inherit;
  font-size: .9rem;
  font-weight: 720;
  cursor: pointer;
}

.config-options input:checked + span,
.config-actions button {
  background: #9b395b;
  color: #fff;
  border-color: #9b395b;
}

.config-options input:focus-visible + span {
  outline: 2px solid #542441;
  outline-offset: 3px;
}

.config-detail input,
.config-detail textarea,
.config-summary textarea {
  width: 100%;
  margin-top: .35rem;
  min-height: 44px;
  border: 1px solid #d4a9ba;
  border-radius: .72rem;
  padding: .6rem;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.config-detail {
  display: block;
  margin-top: 1rem;
}

.config-detail small {
  font-weight: 450;
  font-size: .8rem;
  color: #6c5260;
}

.config-result figure {
  position: relative;
  overflow: hidden;
  border-radius: .95rem;
}

.config-result figure img {
  height: clamp(128px, 19vw, 235px);
  object-position: center 53%;
}

.config-result figcaption {
  position: absolute;
  bottom: .55rem;
  left: .55rem;
  padding: .24rem .55rem;
  background: #fffafb;
  border-radius: 999px;
  font-size: .73rem;
}

.config-summary h3 {
  margin: .85rem 0 .2rem;
  font-size: 1.5rem;
  letter-spacing: -.04em;
}

.config-summary textarea { font-size: .88rem; }
.config-info,.config-status { margin-top: .5rem; font-size: .84rem; }
.config-status:empty { margin: 0; }

.config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .8rem;
}

.config-actions a {
  color: #66213e;
  text-decoration: none;
}

@media (max-width: 760px) {
  .config-layout { grid-template-columns: 1fr; }
}

.ester-portrait {
  left: 3%;
  right: 3%;
  aspect-ratio: 3 / 2;
}

.ester-portrait img {
  object-fit: contain;
  clip-path: none;
}

.configuratore [hidden] { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.config-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.65rem;
}
.config-progress li {
  padding-top: .4rem;
  border-top: 3px solid #efcfdb;
  color: #6f5561;
  font-size: clamp(.7rem, 1.4vw, .87rem);
}
.config-progress li[aria-current] {
  color: #722745;
  border-color: #9b395b;
  font-weight: 750;
}
.config-progress li.done { border-color: #c5829b; }
.config-step h3 {
  font-size: clamp(1.5rem, 3.6vw, 2.45rem);
  letter-spacing: -.055em;
  margin-bottom: .9rem;
}

.photo-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}
.photo-options label { position: relative; }
.photo-options input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.photo-options span {
  display: grid;
  align-content: start;
  gap: .45rem;
  height: 100%;
  padding: .36rem;
  border: 2px solid #ead5dd;
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
}
.photo-options span:hover { border-color: #b8708e; }
.photo-options input:checked + span {
  border-color: #9b395b;
  background: #f9e0ea;
}
.photo-options input:focus-visible + span {
  outline: 2px solid #542441;
  outline-offset: 3px;
}
.photo-options img,.photo-options i {
  width: 100%;
  height: auto;
  aspect-ratio: 1.12;
  border-radius: .65rem;
  background: #f3e1e8;
  object-fit: cover;
}
.photo-options img[src$=".png"] { object-fit: contain; padding: .28rem; }
.photo-options i {
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-style: normal;
  color: #802a4e;
}
.photo-options b { font-size: clamp(.73rem, 1.45vw, .93rem); line-height: 1.18; }
.config-step .config-options { margin-bottom: .75rem; }
.config-options legend { margin-bottom: .45rem; }
.swatch-options span { gap: .35rem; }
.swatch { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid #61384c55; }
.swatch.azzurro { background: #a9cbe1; }
.swatch.rosa { background: #e9a7be; }
.swatch.crema { background: #efdfbf; }
.swatch.verde { background: #aec7a2; }
.config-navigation { display: flex; justify-content: space-between; gap: .65rem; margin-top: 1.1rem; }
.config-navigation button {
  min-height: 44px;
  padding: .45rem 1rem;
  border: 1px solid #9b395b;
  border-radius: 999px;
  background: transparent;
  color: #722745;
  font: inherit;
  font-weight: 730;
  cursor: pointer;
}
#config-avanti { margin-left: auto; background: #9b395b; color: white; }

.config-result { padding: clamp(.7rem, 2vw, 1.25rem); }
#preview-card {
  background: var(--preview-color, #f5dbe6);
  transition: background-color .25s ease;
}
#preview-card[data-colore="Azzurro"] { --preview-color: #c2dcf0; }
#preview-card[data-colore="Rosa"] { --preview-color: #f2b6ca; }
#preview-card[data-colore="Crema"] { --preview-color: #f3e4c6; }
#preview-card[data-colore="Verde"] { --preview-color: #d0e0c4; }
#preview-card img { height: clamp(190px, 28vw, 360px); object-fit: contain; }
#preview-card img[src$=".png"] { padding: 1rem; }
.preview-copy { margin: .7rem .25rem .15rem; }
.preview-copy p { color: #6f5561; font-size: .85rem; }
.preview-copy h3 { font-size: 1.6rem; letter-spacing: -.045em; overflow-wrap: anywhere; }
.preview-copy ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: .55rem 0 0; padding: 0; }
.preview-copy li { max-width: 100%; padding: .25rem .52rem; background: #f5e1ea; border-radius: .6rem; font-size: .8rem; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .config-result { order: -1; display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); gap: .65rem; }
  #preview-card img { height: 124px; }
  #preview-card img[src$=".png"] { padding: .35rem; }
  .config-result figcaption { left: .2rem; bottom: .2rem; font-size: .62rem; padding: .15rem .35rem; }
  .preview-copy { align-self: center; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { #preview-card { transition: none; } }

.config-intro h2 { color: #60243f; }
.config-form { box-shadow: 0 16px 45px #883b5a14; }
.config-step:not([hidden]) { animation: choice-in .25s ease-out both; }
@keyframes choice-in {
  from { opacity: .5; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
.photo-options { gap: clamp(.4rem, 1.3vw, .85rem); }
.photo-options span {
  position: relative;
  padding: .4rem .4rem .7rem;
  border-radius: 1.15rem;
  transition: transform .2s ease, border-color .2s ease;
}
.photo-options span:hover { transform: translateY(-3px); }
.photo-options span::after {
  content: "↗";
  position: absolute;
  top: .65rem;
  right: .65rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #fffafc;
  color: #722745;
  font-size: .75rem;
}
.photo-options img,.photo-options i { aspect-ratio: 1 / 1.12; }
.photo-options label:nth-of-type(2) img { background: #f6dfcb; }
.photo-options label:nth-of-type(3) img { background: #e1e9f5; }

.config-result {
  background: #f5c3d4;
  border-color: #df9bb5;
  box-shadow: 0 16px 45px #883b5a1a;
}
#preview-card {
  background: radial-gradient(ellipse at 50% 36%, #fff9f5, var(--preview-color, #efabca) 77%);
}
#preview-card img[src$=".png"] { filter: drop-shadow(0 12px 10px #62284039); }
.preview-copy h3 { color: #60243f; }
.preview-copy li { background: #fff4f8; }
@media (max-width: 760px) {
  .photo-options span { gap: .35rem; padding: .3rem .3rem .5rem; }
  .photo-options span::after { top: .45rem; right: .45rem; width: 1.1rem; height: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .config-step:not([hidden]) { animation: none; }
  .photo-options span { transition: none; }
  .photo-options span:hover { transform: none; }
}