/* ==========================================================================
   Detail produktu (svatebni kytice) - 3 layouty PD-1/2/3
   + konfigurator (cena dle velikosti, Styl, Zakonceni, prani)
   ========================================================================== */

/* --- Sdilene prvky konfiguratoru --- */
.price-tag { font-family: var(--font-heading); font-weight: 400; font-size: var(--step-4); color: var(--c-primary-ink); line-height: 1.1; }
.price-tag small { font-family: var(--font-body); font-size: 0.85rem; color: var(--c-muted); font-weight: 400; }
.price-note { font-size: 0.82rem; color: var(--c-muted); }

.config { display: grid; gap: var(--space-md); }
.config__row { display: grid; gap: 0.5rem; }
.config__legend { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; color: var(--c-text); }
.config__legend .req { color: var(--c-accent-deep); font-weight: 600; }
.config__legend .opt { color: var(--c-muted); font-weight: 400; font-size: 0.8rem; }

.cart-status[hidden] { display: none; }
.cart-status {
  display: flex; align-items: center; gap: 0.5rem;
  background: color-mix(in oklab, var(--c-success) 12%, var(--c-surface));
  border: 1px solid color-mix(in oklab, var(--c-success) 40%, transparent);
  color: var(--c-primary-ink); border-radius: var(--radius);
  padding: 0.6rem 0.85rem; font-size: 0.88rem; margin-top: var(--space-sm);
}
.cart-status::before { content: "\2713"; color: var(--c-success); font-weight: 700; }

.buy-meta { display: grid; gap: 0.6rem; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--c-border); }
.buy-meta__item { display: flex; gap: 0.6rem; font-size: 0.88rem; color: var(--c-muted); }
.buy-meta__item svg { color: var(--c-botanical); flex: none; }

/* --- Vizualni volby stylu (PD-3): karty s obrazkem --- */
.opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.opt-card { position: relative; }
.opt-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.opt-card__box {
  display: block; height: 100%;
  border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--c-surface); cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.opt-card input:checked + .opt-card__box { border-color: var(--c-accent-deep); box-shadow: var(--shadow-1); }
.opt-card input:focus-visible + .opt-card__box { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.opt-card__media { position: relative; }
.opt-card__media .photo { border-radius: 0; aspect-ratio: 4 / 3; }
.opt-card__tick {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-surface); border: 1px solid var(--c-border);
  display: grid; place-items: center; color: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.opt-card input:checked + .opt-card__box .opt-card__tick { background: var(--c-accent-deep); border-color: var(--c-accent-deep); color: #fff; }
.opt-card__cap { padding: var(--space-sm) var(--space-md) var(--space-md); }
.opt-card__name { font-family: var(--font-heading); font-size: var(--step-1); color: var(--c-primary-ink); margin: 0 0 0.15rem; }
.opt-card__desc { font-size: 0.85rem; color: var(--c-muted); margin: 0; }
@media (max-width: 480px) { .opt-cards { grid-template-columns: 1fr; } }

/* --- Info karty (doruceni / termin) --- */
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.info-card { display: flex; gap: 0.7rem; padding: var(--space-sm) var(--space-md); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.info-card svg { color: var(--c-botanical); flex: none; margin-top: 0.15rem; }
.info-card__t { font-weight: 600; font-size: 0.9rem; }
.info-card__d { font-size: 0.82rem; color: var(--c-muted); }
@media (max-width: 700px) { .info-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   PD-1 - Klasika se sticky konfiguraci (2 sloupce, vertikalni nahledy)
   ========================================================================== */
.pdp { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.pdp__gallery { display: grid; grid-template-columns: 74px 1fr; gap: var(--space-sm); }
.pdp__thumbs { display: flex; flex-direction: column; gap: var(--space-sm); }
.pdp__thumb { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; padding: 0; background: none; cursor: pointer; aspect-ratio: 3 / 4; }
.pdp__thumb .photo { border-radius: 0; height: 100%; }
.pdp__thumb:hover { border-color: var(--c-accent); }
.pdp__thumb:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.pdp__thumb[aria-current="true"] { border-color: var(--c-accent-deep); }
.pdp__main .photo { aspect-ratio: 4 / 5; box-shadow: var(--shadow-soft); }

.buy-box { position: sticky; top: 88px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.buy-box__cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-muted); font-weight: 600; }
.buy-box__title { font-size: var(--step-4); margin: 0.3rem 0 var(--space-xs); }
.buy-box__rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-sm); font-size: 0.85rem; color: var(--c-muted); }

@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } .buy-box { position: static; } }
@media (max-width: 560px) {
  .pdp__gallery { grid-template-columns: 1fr; }
  .pdp__thumbs { flex-direction: row; }
  .pdp__thumb { width: 68px; flex: none; }
}

/* ==========================================================================
   PD-2 - Immersive fotka + konfigurator pod ni (vycentrovany)
   ========================================================================== */
.pdp-immersive { display: grid; gap: var(--space-lg); }
.pdp-immersive__stage .photo { aspect-ratio: 16 / 9; box-shadow: var(--shadow-soft); }
.pdp-immersive__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.pdp-immersive__row .photo { aspect-ratio: 1; }
@media (max-width: 560px) { .pdp-immersive__row { grid-template-columns: repeat(2, 1fr); } .pdp-immersive__stage .photo { aspect-ratio: 4 / 3; } }

.config-card {
  max-width: 760px; margin-inline: auto; width: 100%;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem);
}
.config-card__head { text-align: center; margin-bottom: var(--space-lg); }

/* Konfigurator jako cislovane kroky */
.config--steps { counter-reset: cfg; gap: var(--space-lg); }
.config--steps .config__row { position: relative; padding-left: 2.8rem; }
.config--steps .config__row::before {
  counter-increment: cfg; content: counter(cfg);
  position: absolute; left: 0; top: -0.1rem;
  width: 1.95rem; height: 1.95rem; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 0.95rem;
}
.config-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm);
  margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--c-border);
}

/* ==========================================================================
   PD-3 - Editorial split (sticky foto vlevo, pribeh vpravo)
   ========================================================================== */
.pdp-editorial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pdp-editorial__media { position: sticky; top: 88px; }
.pdp-editorial__media .photo { aspect-ratio: 3 / 4; box-shadow: var(--shadow-soft); }
.pdp-editorial__media .price-tag { margin-top: var(--space-md); }
.pdp-editorial__story { display: grid; gap: var(--space-xl); }
.story-block > h2 { font-size: var(--step-3); }
.story-block > p { color: var(--c-muted); }
@media (max-width: 900px) {
  .pdp-editorial { grid-template-columns: 1fr; }
  .pdp-editorial__media { position: static; }
}

/* Zakonceni jako vizualni volby (svatek: lyko / stuha) */
.finish-set { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.finish { position: relative; }
.finish input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.finish__box {
  display: grid; gap: 0.5rem; justify-items: center; text-align: center;
  padding: var(--space-sm); border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); cursor: pointer; height: 100%;
  transition: border-color var(--dur) var(--ease);
}
.finish input:checked + .finish__box { border-color: var(--c-accent-deep); background: var(--c-blush-wash); }
.finish input:focus-visible + .finish__box { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.finish__swatch { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-border); }
.finish__swatch--lyko { background: linear-gradient(135deg, #C9A96A, #B08D4E); }
.finish__swatch--bila { background: #FFFFFF; }
.finish__swatch--ivory { background: #F3EADA; }
.finish__name { font-size: 0.85rem; font-weight: 600; color: var(--c-text); line-height: 1.2; }
@media (max-width: 480px) { .finish-set { grid-template-columns: 1fr; } .finish__box { flex-direction: row; grid-auto-flow: column; justify-items: start; text-align: left; align-items: center; } }