/* Asezarea coloanei de detalii de pe pagina de produs.
 *
 * De ce e nevoie de fisierul asta: corpul paginii se genereaza acum din baza de date, cu
 * markup curat, fara `style="--flex-direction: column; --gap: 20px; ..."`-urile pe care
 * tema Shopify le punea pe fiecare div. Grila mare (poza | detalii) era oricum definita in
 * `neon-redesign.css` si a ramas neatinsa.
 *
 * Ce s-a rupt fara ele: `product-price`, `product-inventory`, `nl-variant-picker`,
 * `add-to-cart-component` sunt ELEMENTE WEB, iar un element necunoscut e `display: inline`
 * implicit. Asezate una dupa alta, pretul ajungea peste "In stoc" si titlul se ingusta la
 * cateva litere. Nu era o problema de latime, ci de tip de afisare.
 */

#nl-produs .product-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Fiecare element web din coloana devine bloc pe toata latimea. */
#nl-produs .product-details > *,
#nl-produs product-price,
#nl-produs product-inventory,
#nl-produs nl-variant-picker,
#nl-produs .buy-buttons-block,
#nl-produs product-form-component,
#nl-produs add-to-cart-component {
  display: block;
  width: 100%;
}

#nl-produs .view-product-title { display: none; }   /* dubleaza <h1> imediat sub el */

#nl-produs h1 { margin: 0; }

#nl-produs .price { font-size: 1.5rem; font-weight: 700; }

#nl-produs .product-inventory__status { font-size: .85rem; opacity: .75; }

#nl-produs .divider {
  width: 100%;
  height: 1px;
  background: var(--nl-line2, rgba(255, 255, 255, .11));
  margin: 4px 0;
}

/* --- variantele --- */

#nl-produs .variant-picker__form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#nl-produs .variant-picker__form legend {
  width: 100%;
  padding: 0 0 6px;
  font-size: .82rem;
  opacity: .75;
}

/* Butonul e eticheta; input-ul radio ramane in pagina pentru tastatura si cititoare de
   ecran, dar nu se deseneaza. `appearance: none` singur i-ar lasa un dreptunghi. */
#nl-produs .variant-option__button-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

#nl-produs .variant-option__button-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--nl-line2, rgba(255, 255, 255, .11));
  border-radius: var(--nl-r, 8px);
  cursor: pointer;
  font-size: .9rem;
  transition: border-color .15s ease, background .15s ease;
}

#nl-produs .variant-option__button-label:hover {
  border-color: var(--np, #ff36b0);
}

#nl-produs .variant-option__button-label:has(input:checked) {
  border-color: var(--np, #ff36b0);
  background: rgba(var(--np-rgb, 255, 54, 176), .12);
}

/* Conturul de focalizare merge pe eticheta, fiindca input-ul e ascuns - altfel navigarea
   cu tastatura n-ar arata nicaieri unde esti. */
#nl-produs .variant-option__button-label:has(input:focus-visible) {
  outline: 2px solid var(--np, #ff36b0);
  outline-offset: 2px;
}

/* --- cantitate si adaugare --- */

#nl-produs .product-form-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

#nl-produs .quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--nl-line2, rgba(255, 255, 255, .11));
  border-radius: var(--nl-r, 8px);
  overflow: hidden;
  flex: 0 0 auto;
}

#nl-produs .quantity-selector button {
  width: 38px;
  height: 42px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

#nl-produs .quantity-selector button:hover { background: rgba(255, 255, 255, .06); }

#nl-produs .quantity-selector input {
  width: 48px;
  height: 42px;
  border: 0;
  background: none;
  color: inherit;
  text-align: center;
  font: inherit;
  -moz-appearance: textfield;
  appearance: textfield;
}

#nl-produs .quantity-selector input::-webkit-outer-spin-button,
#nl-produs .quantity-selector input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#nl-produs add-to-cart-component { flex: 1 1 200px; }

#nl-produs .add-to-cart-button {
  width: 100%;
  min-height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--nl-r, 8px);
  background: var(--np, #ff36b0);
  color: #15030e;
  font-weight: 700;
  cursor: pointer;
}

#nl-produs .add-to-cart-button:hover { box-shadow: 0 8px 28px rgba(var(--np-rgb, 255, 54, 176), .45); }

#nl-produs .product-form-text__error.hidden { display: none; }

@media (max-width: 768px) {
  #nl-produs .product-details { gap: 10px; }
  #nl-produs .price { font-size: 1.3rem; }
}