/*
 * Pagina de produs Home Deco.
 * Limbaj vizual: precizie de atelier pe hartie calda. Linii de 1px care
 * amintesc straturile printului, cifre monospatiate, asimetrie, fara carduri.
 */

.hd-pdp {
  --paper:      oklch(0.976 0.006 85);
  --paper-sunk: oklch(0.951 0.009 82);
  --ink:        oklch(0.235 0.013 60);
  --ink-2:      oklch(0.455 0.011 60);
  --ink-3:      oklch(0.615 0.009 60);
  --rule:       oklch(0.885 0.009 72);
  --rule-soft:  oklch(0.925 0.007 78);
  --accent:     oklch(0.560 0.115 45);
  --accent-ink: oklch(0.415 0.098 45);

  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 4vw, 64px);
  --measure: 68ch;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.hd-pdp *,
.hd-pdp *::before,
.hd-pdp *::after { box-sizing: border-box; }

.hd-pdp img { max-width: 100%; height: auto; display: block; }

.hd-shell {
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Etichete tehnice: mici, monospatiate, distantate. Folosite ca reper, nu ca titlu. */
.hd-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.hd-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- fir de navigare ---------- */

.hd-breadcrumb {
  padding-block: 24px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hd-breadcrumb a { color: inherit; text-decoration: none; }
.hd-breadcrumb a:hover { color: var(--ink); }
.hd-breadcrumb span { margin-inline: 8px; opacity: 0.5; }

/* ---------- structura principala, asimetrica ---------- */

/* Copiii de grila au implicit min-width:auto, adica nu se strang sub latimea
   continutului lor. O singura imagine sau schita lata umfla atunci coloana si
   scoate randul din ecran. Regula se aplica tuturor grilelor paginii. */
.hd-main > *,
.hd-editorial__lede > *,
.hd-split > *,
.hd-related ul > * { min-width: 0; }

.hd-main {
  display: grid;
  gap: 40px;
  padding-block: 32px 64px;
}

@media (min-width: 992px) {
  .hd-main {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: clamp(40px, 5vw, 88px);
    padding-block: 40px 96px;
  }
}

/* ---------- galerie ---------- */

.hd-gallery {
  display: grid;
  gap: 8px;
}

.hd-gallery figure { margin: 0; background: var(--paper-sunk); }

.hd-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Prima imagine primeste mai mult aer decat restul: ierarhie prin proportie. */
.hd-gallery figure:first-child img { aspect-ratio: 1 / 1; }

@media (min-width: 768px) {
  .hd-gallery { grid-template-columns: 1fr 1fr; }
  .hd-gallery figure:first-child { grid-column: 1 / -1; }
  .hd-gallery figure:first-child img { aspect-ratio: 5 / 4; }
}

/* Sub 768px galeria devine banda cu prindere pe scroll. */
@media (max-width: 767.984px) {
  .hd-gallery {
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .hd-gallery::-webkit-scrollbar { display: none; }
  .hd-gallery figure { scroll-snap-align: center; }
  .hd-gallery figure:first-child img,
  .hd-gallery img { aspect-ratio: 1 / 1; }
}

/* ---------- coloana de cumparare ---------- */

.hd-buy { align-self: start; }

@media (min-width: 992px) {
  .hd-buy { position: sticky; top: 32px; }
}

.hd-title {
  font-size: clamp(25.6px, 18.4px + 1.5vw, 36px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 12px 0 0;
}

/* Tema parinte are o regula globala pe p si li, in rem, iar radacina ei e
   la 13px. Fara marime explicita, tot textul curent iese la 14,8px in loc
   de 16. Le fixam pe cele de proza; restul au deja marimea lor. */
.hd-pdp .hd-standfirst,
.hd-pdp .hd-prose p,
.hd-pdp .hd-prose li { font-size: 16px; line-height: 1.65; }

.hd-standfirst {
  color: var(--ink-2);
  max-width: 42ch;
  margin: 14px 0 0;
}

/* Atributul hidden nu bate un display: flex scris in CSS, deci pretul "de la"
   ramanea pe ecran chiar dupa ce se alegea o marime, sub pretul variatiei. */
.hd-price[hidden] { display: none; }

.hd-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.hd-price__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  letter-spacing: -0.03em;
}

.hd-price__note {
  font-size: 13px;
  color: var(--ink-3);
}

.hd-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.hd-stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- selectoare ---------- */

.hd-picker { margin-top: 28px; }

.hd-picker__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.hd-picker__value { font-size: 13px; color: var(--ink-2); }

.hd-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Aceleasi masuri de specificitate ca la butonul principal: tema parinte are
   reguli globale pe button pe care nu le controlam. */

.hd-pdp button.hd-swatch {
  width: 36px;
  height: 36px;
  min-width: 0;
  border-radius: 50% !important;
  border: 1px solid oklch(0 0 0 / 0.16) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none;
  cursor: pointer;
  background-clip: padding-box;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.hd-pdp button.hd-swatch::before,
.hd-pdp button.hd-swatch::after { display: none !important; }

.hd-pdp button.hd-swatch:hover { transform: translateY(-2px); }
.hd-pdp button.hd-swatch:active { transform: scale(0.94); }

.hd-pdp button.hd-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink);
}

.hd-sizes { display: flex; gap: 8px; flex-wrap: wrap; }

.hd-pdp button.hd-size {
  flex: 1 1 auto;
  min-width: 88px;
  /* XStore fixeaza inaltimea butoanelor la var(--et_inputs-height), 2.642rem,
     asa ca pretul de sub eticheta iesea in afara chenarului. */
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.2s var(--ease);
}

.hd-pdp button.hd-size::before,
.hd-pdp button.hd-size::after { display: none !important; }

.hd-pdp button.hd-size:hover { border-color: var(--ink-3) !important; color: var(--ink) !important; }
.hd-pdp button.hd-size:active { transform: translateY(1px); }

.hd-pdp button.hd-size[aria-pressed="true"] {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  background: oklch(0.24 0.012 60 / 0.045) !important;
}

.hd-pdp button.hd-size small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.03em;
}

.hd-pdp button.hd-size small .amount,
.hd-pdp button.hd-size small bdi { color: inherit; font-weight: inherit; }

/* Tabelul nativ de variatii ramane in pagina, fiindca scriptul
   wc-add-to-cart-variation citeste si scrie in <select>-urile din el.
   Nu se foloseste display:none, ca sa nu strice validarea nativa. */
.hd-pdp .variations {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Blocul pe care WooCommerce il completeaza cand o variatie e aleasa. */
.hd-pdp .single_variation_wrap { margin-top: 4px; }

.hd-pdp .woocommerce-variation-price {
  display: block;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.hd-pdp .woocommerce-variation-price .price del { color: var(--ink-3); margin-right: 8px; }

.hd-pdp .woocommerce-variation-availability,
.hd-pdp .woocommerce-variation-description { font-size: 13px; color: var(--ink-3); }

.hd-pdp .reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.hd-pdp .reset_variations:hover { color: var(--ink); }

/* Cand nicio variatie nu e aleasa, WooCommerce goleste blocul: fara chenar gol. */
.hd-pdp .woocommerce-variation:empty { display: none; }

/* ---------- buton ----------
   Specificitatea e ridicata deliberat: tema parinte stilizeaza
   .single_add_to_cart_button cu inline-flex si flex:1, si ar castiga
   altfel. Ancoram in .hd-buy form.cart si fortam doar proprietatile
   pe care XStore le impune. */

.hd-pdp .hd-buy form.cart .woocommerce-variation-add-to-cart {
  display: block;
  margin-top: 24px;
}

.hd-pdp .hd-buy form.cart button.single_add_to_cart_button,
.hd-pdp .hd-buy button.single_add_to_cart_button {
  display: flex !important;
  width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 17px 20px !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.4s var(--ease), transform 0.2s var(--ease);
}

.hd-pdp .hd-buy button.single_add_to_cart_button::before,
.hd-pdp .hd-buy button.single_add_to_cart_button::after { display: none !important; }

.hd-pdp .hd-buy button.single_add_to_cart_button:hover { background: var(--accent-ink) !important; }
.hd-pdp .hd-buy button.single_add_to_cart_button:active { transform: translateY(1px); }

/* Cat timp nu s-a ales o variatie, WooCommerce marcheaza butonul disabled si
   tema parinte ii pune opacity, ceea ce scoate un maro spalacit din negrul
   nostru. Starea inactiva o desenam explicit: contur, nu umplere. */
.hd-pdp .hd-buy form.cart button.single_add_to_cart_button:disabled,
.hd-pdp .hd-buy form.cart button.single_add_to_cart_button.disabled,
.hd-pdp .hd-buy form.cart button.single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 1 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  box-shadow: inset 0 0 0 1px var(--rule) !important;
  cursor: not-allowed;
}

.hd-pdp .hd-buy form.cart button.single_add_to_cart_button:disabled:hover,
.hd-pdp .hd-buy form.cart button.single_add_to_cart_button.disabled:hover,
.hd-pdp .hd-buy form.cart button.single_add_to_cart_button.wc-variation-selection-needed:hover {
  background: transparent !important;
  color: var(--ink-3) !important;
}

/* Cantitatea sta in stanga butonului, ca sa se poata lua doua vaze la fel fara
   drum prin cos. Randul e un grid de doua coloane: stepper cat ii trebuie,
   buton cat mai ramane. */
.hd-pdp .hd-buy form.cart .woocommerce-variation-add-to-cart {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.hd-pdp .hd-buy .quantity {
  display: flex !important;
  align-self: stretch;
  align-items: stretch;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.hd-pdp .hd-buy .quantity .minus,
.hd-pdp .hd-buy .quantity .plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 100%;
  cursor: pointer;
  color: var(--ink-2);
  user-select: none;
}

.hd-pdp .hd-buy .quantity .minus:hover,
.hd-pdp .hd-buy .quantity .plus:hover { color: var(--ink); }

.hd-pdp .hd-buy input.qty {
  display: block !important;
  width: 40px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.hd-pdp .hd-buy input.qty::-webkit-outer-spin-button,
.hd-pdp .hd-buy input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Butonul "Buy now" al temei parinte e scos din PHP; regula ramane ca plasa
   daca vreun update il repune prin alt hook. */
.hd-pdp .hd-buy .et-single-buy-now { display: none !important; }

/* Favoritele sunt o actiune secundara: text discret sub buton, nu al doilea
   buton care sa concureze cu adaugarea in cos. */
.hd-pdp .hd-buy .xstore-wishlist {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--ink-3) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: color 0.35s var(--ease);
}

.hd-pdp .hd-buy .xstore-wishlist:hover { color: var(--ink) !important; }
.hd-pdp .hd-buy .xstore-wishlist span { font-size: inherit !important; }
.hd-pdp .hd-buy .xstore-wishlist svg,
.hd-pdp .hd-buy .xstore-wishlist i { width: 14px; height: 14px; font-size: 14px; }

/* ---------- garantii ---------- */

.hd-assurances {
  margin-top: 32px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hd-assurances li {
  list-style: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13px;
  color: var(--ink-2);
}

.hd-assurances li:nth-child(odd) { padding-right: 16px; }
.hd-assurances li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule-soft); }

/* ---------- banda de specificatii ---------- */

.hd-band {
  border-block: 1px solid var(--rule);
  background:
    repeating-linear-gradient(
      to bottom,
      oklch(0.235 0.013 60 / 0.028) 0 1px,
      transparent 1px 7px
    ),
    var(--paper-sunk);
}

.hd-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-block: clamp(40px, 5vw, 72px);
}

/* Fara asta, un copil lat (schita cu cote are latime minima) umfla coloana
   de grila si impinge tot randul in afara ecranului. */
.hd-band__inner > * { min-width: 0; }

@media (min-width: 992px) {
  .hd-band__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
}

.hd-specs { margin: 20px 0 0; }

.hd-specs div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.hd-specs dt { color: var(--ink-2); font-size: 14px; min-width: 0; }
.hd-specs dd {
  margin: 0;
  min-width: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  text-align: right;
}

/* Pe ecran ingust, valoarea trece sub eticheta: doua randuri citibile in loc
   de doua coloane inghesuite una in alta. */
@media (max-width: 480px) {
  .hd-specs dd { width: 100%; text-align: left; color: var(--ink); }
  .hd-specs dt { color: var(--ink-3); font-size: 13px; }
}

/* Schita are un viewBox lat. Lasata sa se stranga la latimea telefonului,
   cotele ei ajung la vreo 5px si nu se mai citesc. Sub o latime minima
   pagina o lasa sa fie derulata pe orizontala, la marime lizibila. */
/* Desenul incape intreg pe latimea unui telefon, deci nu mai are nevoie de
   derulare orizontala: toate cele trei inaltimi se vad deodata. */
.hd-cote {
  margin-top: 20px;
  max-width: 100%;
}

.hd-cote h3 { display: none; }

.hd-cote svg {
  color: var(--ink-2);
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
}

/* ---------- editorial ---------- */

.hd-editorial { padding-block: clamp(48px, 6vw, 96px); }

.hd-editorial__lede {
  display: grid;
  gap: 24px;
}

@media (min-width: 992px) {
  .hd-editorial__lede {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    gap: clamp(32px, 5vw, 80px);
  }
}

.hd-editorial h2 {
  font-size: clamp(20px, 16px + 0.9vw, 28px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin: 8px 0 0;
  max-width: 20ch;
}

.hd-prose { max-width: var(--measure); color: var(--ink-2); }
.hd-prose p { margin: 0 0 16px; }
.hd-prose p:last-child { margin-bottom: 0; }

.hd-split {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .hd-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
}

.hd-split section { border-top: 1px solid var(--rule); padding-top: 20px; }

/* Al doilea bloc coboara putin: ritm, nu grila moarta. */
@media (min-width: 768px) {
  .hd-split section:nth-child(2) { margin-top: 40px; }
}

.hd-split h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 8px 0 12px;
}

.hd-checklist { margin: 12px 0 0; padding: 0; }
.hd-checklist li {
  list-style: none;
  padding: 8px 0 8px 22px;
  position: relative;
  font-size: 14px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-soft);
}
.hd-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* ---------- detalii pliabile ---------- */

.hd-details { border-top: 1px solid var(--rule); }

.hd-details details { border-bottom: 1px solid var(--rule-soft); }

.hd-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.3s var(--ease);
}

.hd-details summary::-webkit-details-marker { display: none; }
.hd-details summary:hover { color: var(--accent-ink); }

.hd-details summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.4s var(--ease);
  flex: none;
}

.hd-details details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.hd-details__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}

.hd-details details[open] .hd-details__body { grid-template-rows: 1fr; }

.hd-details__body > div { overflow: hidden; }

.hd-details__body .hd-prose { padding-bottom: 24px; }
.hd-details__body h2 { display: none; }
.hd-details__body h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 4px;
}

/* ---------- produse conexe ---------- */

.hd-related { padding-block: clamp(48px, 5vw, 80px); border-top: 1px solid var(--rule); }
.hd-related h2 { font-size: 18px; font-weight: 500; margin: 8px 0 28px; letter-spacing: -0.01em; }

.hd-related ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .hd-related ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
}

.hd-related li { list-style: none; }
.hd-related a { text-decoration: none; color: inherit; display: block; }
.hd-related img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--paper-sunk);
  transition: opacity 0.4s var(--ease);
}
.hd-related a:hover img { opacity: 0.86; }
.hd-related h3 { font-size: 14px; font-weight: 500; margin: 12px 0 2px; }
.hd-related p { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }

/* ---------- aparitie ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hd-rise {
    opacity: 0;
    transform: translateY(12px);
    animation: hd-rise 0.7s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}

@keyframes hd-rise {
  to { opacity: 1; transform: none; }
}

/* ---------- accesibilitate ---------- */

.hd-pdp :focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* ---------- bara de cumparare de pe telefon ---------- */

.hd-pdp .hd-bara {
  display: none;
}

@media (max-width: 900px) {
  .hd-pdp .hd-bara {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px var(--gutter);
    /* Bara de sistem de pe iPhone mananca ultimii pixeli. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 1px solid var(--rule);
  }

  .hd-pdp .hd-bara[hidden] { display: none; }

  .hd-bara__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .hd-bara__nume {
    font-size: 13px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hd-bara__pret {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
  }

  .hd-bara__pret del { display: none; }
  .hd-bara__pret ins { text-decoration: none; }

  .hd-bara__cta {
    margin-left: auto;
    min-height: 48px;
    padding-inline: 22px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
  }

  /* Selectorul de marime clipeste o data cand bara trimite omul la el. */
  .hd-clipeste {
    animation: hd-clipeste 1.1s var(--ease);
  }

  @keyframes hd-clipeste {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    30%      { box-shadow: 0 0 0 3px var(--accent); }
  }
}


/* ---------- promisiunea de sub buton ---------- */

.hd-pdp .hd-garantie {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- "Compara toate culorile" ---------- */

.hd-pdp .hd-picker__toate {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.hd-pdp .hd-picker__toate:hover { color: var(--ink); }

.hd-culori-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

.hd-culori-dialog::backdrop {
  background: oklch(0.235 0.013 60 / 0.45);
}

.hd-culori-dialog__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.hd-culori-dialog__inchide {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}

.hd-culori-dialog__inchide:hover { color: var(--ink); }

.hd-culori-dialog__grup { margin-top: 22px; }

.hd-culori-dialog__grup h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.hd-culori-dialog__grup ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 16px;
}

.hd-culori-dialog__optiune {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.hd-culori-dialog__optiune:hover { background: var(--paper-sunk); }

.hd-culori-dialog__optiune[aria-current="true"] .hd-culori-dialog__nume {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hd-culori-dialog__pata {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 1px solid oklch(0 0 0 / 0.16);
}

.hd-culori-dialog__nota {
  margin: 24px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-3);
}


/* WooCommerce isi scrie propriul "in stock" sub pret, in engleza, desi noi
   spunem deja mai sus si ca e pe stoc, si in cat ajunge. Un singur loc. */
.hd-pdp .hd-buy .woocommerce-variation-availability { display: none; }

/* ---------- recenzii ---------- */

.hd-recenzii {
  padding-block: clamp(40px, 6vw, 88px);
  border-top: 1px solid var(--rule);
}

.hd-recenzii__cap h2 {
  margin: 8px 0 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -.01em;
}

.hd-recenzii__gol {
  margin: 18px 0 0;
  max-width: 56ch;
  color: var(--ink-2);
}

/* WooCommerce spune si el ca nu exista recenzii, in engleza si mai sec. */
.hd-recenzii .woocommerce-noreviews { display: none; }

.hd-recenzii #reviews { margin-top: 28px; }

.hd-recenzii #reviews h2,
.hd-recenzii #reply-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 14px;
}

.hd-recenzii .commentlist {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.hd-recenzii .commentlist li {
  padding-block: 20px;
  border-top: 1px solid var(--rule);
}

.hd-recenzii .comment-form {
  display: grid;
  gap: 14px;
  max-width: 620px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.hd-recenzii .comment-form p { margin: 0; }

.hd-recenzii .comment-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--ink-2);
}

.hd-recenzii .comment-form input[type="text"],
.hd-recenzii .comment-form input[type="email"],
.hd-recenzii .comment-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}

.hd-recenzii .comment-form textarea { min-height: 130px; resize: vertical; }

.hd-recenzii .comment-form input:focus-visible,
.hd-recenzii .comment-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.hd-recenzii .comment-form .form-submit input {
  min-height: 52px;
  padding-inline: 26px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.hd-recenzii .comment-form .form-submit input:hover {
  background: transparent;
  color: var(--ink);
}

.hd-recenzii .comment-form-cookies-consent label { display: inline; margin-left: 8px; }

/* ---------- nota de sub titlu ---------- */

.hd-pdp .hd-nota {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.hd-pdp .hd-nota__stele { color: var(--accent); letter-spacing: .08em; }

.hd-pdp .hd-nota a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.hd-pdp .hd-nota a:hover { color: var(--ink); }
.hd-pdp .hd-nota--goala a { color: var(--ink-3); }

/* ---------- planse in galerie ---------- */

.hd-gallery__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.hd-gallery__plansa {
  margin: 0;
  background: var(--paper-sunk);
  display: flex;
}

.hd-gallery__plansa-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  width: 100%;
  padding: clamp(20px, 4vw, 44px);
  color: var(--ink);
}

.hd-gallery__plansa figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hd-gallery__paleta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px 14px;
}

.hd-gallery__paleta li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-2);
}

.hd-gallery__paleta span {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1px solid oklch(0 0 0 / 0.16);
}

.hd-gallery__paleta em { font-style: normal; }

/* ---------- lupa ---------- */

.hd-lupa {
  width: min(1100px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  background: transparent;
}

.hd-lupa::backdrop { background: oklch(0.18 0.006 60 / 0.88); }

.hd-lupa img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 24px);
  object-fit: contain;
}

.hd-lupa__inchide {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid oklch(1 0 0 / 0.35);
  border-radius: 999px;
  background: oklch(0.18 0.006 60 / 0.6);
  color: oklch(0.98 0 0);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.hd-lupa__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 48px;
  min-height: 48px;
  border: 1px solid oklch(1 0 0 / 0.35);
  border-radius: 50%;
  background: oklch(0.18 0.006 60 / 0.6);
  color: oklch(0.98 0 0);
  font-size: 18px;
  cursor: pointer;
}

.hd-lupa__nav--prev { left: 12px; }
.hd-lupa__nav--next { right: 12px; }

/* ---------- caseta de recomandare ---------- */

.hd-pdp .hd-recomandare {
  margin-top: 26px;
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
}

.hd-pdp .hd-recomandare a {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 12px;
  color: inherit;
  text-decoration: none;
}

.hd-pdp .hd-recomandare img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
}

.hd-pdp .hd-recomandare__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hd-pdp .hd-recomandare__text strong {
  font-size: 16px;
  font-weight: 500;
}

.hd-pdp .hd-recomandare__pret {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}

.hd-pdp .hd-recomandare__sageata {
  color: var(--ink-3);
  transition: transform .3s var(--ease);
}

.hd-pdp .hd-recomandare a:hover .hd-recomandare__sageata {
  transform: translateX(4px);
  color: var(--ink);
}

/* ---------- ambient ---------- */

.hd-ambient {
  padding-block: clamp(40px, 6vw, 88px);
  border-top: 1px solid var(--rule);
}

.hd-ambient__cap h2 {
  margin: 8px 0 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -.01em;
}

.hd-ambient__grila {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 20px);
}

/* Al doilea cadru se intinde pe doua coloane: un rand de sase poze egale e o
   grila de catalog, nu o scena. */
.hd-ambient__grila li:nth-child(2) { grid-column: span 2; }

.hd-ambient__grila a {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
}

.hd-ambient__grila img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hd-ambient__grila span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  background: oklch(0.976 0.006 85 / 0.92);
  font-size: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.hd-ambient__grila a:hover span,
.hd-ambient__grila a:focus-visible span { opacity: 1; transform: none; }

@media (max-width: 800px) {
  .hd-ambient__grila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-ambient__grila li:nth-child(2) { grid-column: span 2; }
  .hd-ambient__grila span { opacity: 1; transform: none; }
}

/* ---------- taburi peste acordeon (doar pe ecran lat) ---------- */

.hd-taburi {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

.hd-tab {
  padding: 0 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink-3);
  cursor: pointer;
}

.hd-tab:hover { color: var(--ink-2); }

.hd-tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Cu taburi active, capul fiecarei sectiuni nu mai are ce cauta: numele lui e
   deja in bara de sus. */
.hd-details--taburi > details > summary {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hd-details--taburi > details { border: 0; }

/* ---------- metodele de plata ---------- */

.hd-pdp .hd-plata {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}

/* ---------- vizorul de galerie (ecran lat) ---------- */

.hd-gallery--ascunsa { display: none; }

.hd-vizor { display: grid; gap: 10px; }

.hd-vizor__scena figure,
.hd-vizor__scena .hd-gallery__plansa {
  margin: 0;
  background: var(--paper-sunk);
}

.hd-vizor__scena img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.hd-vizor__scena .hd-gallery__plansa { aspect-ratio: 1 / 1; }

.hd-vizor__banda {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}

.hd-vizor__mini {
  padding: 0;
  border: 1px solid transparent;
  background: var(--paper-sunk);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.hd-vizor__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hd-vizor__mini[aria-selected="true"] { border-color: var(--ink); }

/* Plansele in miniatura. Nu le micsoram cu transform: schita desenata la 34%
   dispare de tot, fiindca liniile ei au 1,4 px. Le lasam la latimea miniaturii
   si scoatem ce nu se poate citi oricum: titlul si numele culorilor. */
.hd-vizor__mini-plansa {
  width: 100%;
  height: 100%;
  display: flex;
  pointer-events: none;
}

.hd-vizor__mini-plansa .hd-gallery__plansa-inner {
  padding: 8px;
  gap: 0;
  justify-content: center;
}

.hd-vizor__mini-plansa figcaption { display: none; }

.hd-vizor__mini-plansa .hd-cote-svg { width: 100%; height: auto; }

.hd-vizor__mini-plansa .hd-gallery__paleta {
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.hd-vizor__mini-plansa .hd-gallery__paleta em { display: none; }

.hd-vizor__mini-plansa .hd-gallery__paleta span {
  width: 12px;
  height: 12px;
}

/* ---------- cadrul cu miscare ----------
 *
 * Straturile urca din baza pana la buza, apoi o iau de la capat. Animam
 * transform, nu inaltimea, ca sa nu punem browserul sa recalculeze desenul la
 * fiecare cadru. Cine si-a cerut mai putina miscare din sistem primeste
 * desenul intreg, static.
 */

.hd-gallery__animatie .hd-straturi {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hd-creste 7s cubic-bezier(.16, 1, .3, 1) infinite;
}

@keyframes hd-creste {
  0%        { transform: scaleY(0); }
  55%, 100% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hd-gallery__animatie .hd-straturi { animation: none; }
}