/* ============================================================
   AVA MOBILLI — punți WordPress / WooCommerce
   Aici stă DOAR ce n-are corespondent în machetă: elemente pe care
   le produce WordPress și pe care le aducem în limbajul vizual existent.
   Nu se redefinesc variabile din :root și nu se rescrie designul machetei.
   ============================================================ */

/* ============================================================
   1. ACCESIBILITATE (standard WordPress)
   ============================================================ */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  white-space: nowrap;
  word-wrap: normal !important;
}

/* La focalizare din tastatură eticheta devine vizibilă, în forma unui .chip. */
.screen-reader-text:focus,
.skip-link:focus {
  clip: auto !important;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  z-index: 200;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.75em 1.3em;
  background: var(--porcelain);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-size: var(--t--1);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   2. SERTARUL COȘULUI — containerul de fragmente
   ============================================================ */
/* [data-mini-cart] e doar ținta fragmentelor WooCommerce; nu trebuie
   să apară în layout, altfel rupe coloana flex a sertarului
   (.drawer__body cu flex:1 și .drawer__foot lipit jos). */
.drawer__wrap { display: contents; }

/* ============================================================
   3. PANOUL DE CĂUTARE (body.search-open)
   ============================================================ */
.searchpanel {
  position: fixed;
  inset: 62px 0 auto 0;                 /* imediat sub antet, ca .shopbar */
  z-index: 78;
  padding: 0.9rem var(--pad) 1.1rem;
  background: color-mix(in srgb, var(--porcelain) 96%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 20px 40px -38px rgba(30, 20, 10, 0.5);
  transform: translateY(-120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--m) var(--e), opacity var(--f), visibility var(--f);
}
body.search-open .searchpanel {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.searchpanel__form {
  width: 100%;
  max-width: 1720px;                    /* aceeași lățime ca .wrap--wide din antet */
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.searchpanel__form > svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  stroke: var(--brass);
  fill: none;
  stroke-width: 1.5;
}
.searchpanel__form input[type="search"] {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  background: none;
  padding: 0.5rem 0;
  font-family: var(--display);
  font-weight: 340;
  font-size: var(--t-2);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.searchpanel__form input[type="search"]::placeholder { color: var(--faint); }
.searchpanel__form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Butonul de închidere, identic cu .drawer__close. */
.searchpanel__close {
  flex: none;
  width: 2.4em;
  height: 2.4em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background var(--f);
}
.searchpanel__close:hover { background: rgba(34, 27, 20, 0.05); }
.searchpanel__close svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 1.6; }

@media (max-width: 620px) {
  .searchpanel { top: 56px; }
  .searchpanel__form input[type="search"] { font-size: var(--t-1); }
}

/* ============================================================
   4. NOTIFICĂRI WooCommerce
   ============================================================ */
.woocommerce-notices-wrapper:not(:empty) { margin-bottom: 1.6rem; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 1rem 1.3rem;
  background: var(--porcelain);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--r);
  font-size: var(--t--1);
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1.2rem;
}
.woocommerce-error { border-left-color: var(--orange); }
.woocommerce-error li { list-style: none; flex: 1 1 100%; }
.woocommerce-error li strong { font-weight: 600; color: var(--ink); }

/* Butonul din interiorul notificării („Vezi coșul") preia forma .btn. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 0.8em 1.6em;
  background: var(--ink);
  color: var(--porcelain);
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform var(--f) var(--e), background var(--f), color var(--f);
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover { transform: translateY(-2px); }

/* Grupul de notificări pe care checkout.js îl injectează cu `prepend` direct în
   `form.checkout` la fiecare eroare de validare sau recalculare. */
.woocommerce-NoticeGroup { margin-bottom: 1.4rem; }
.woocommerce-NoticeGroup > :last-child { margin-bottom: 0; }

/* `form.checkout` e o grilă de două coloane (.checkout__main + .checkout__aside).
   Fără asta, notificarea ar ocupa doar prima coloană și ar împinge sumarul pe
   rândul următor — adică macheta s-ar rearanja complet la prima eroare. */
.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }

/* ============================================================
   5. PAGINARE (WooCommerce + WordPress) — în stilul .chip
   ============================================================ */
.woocommerce-pagination ul,
.navigation.pagination .nav-links,
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  border: 0;
}
.woocommerce-pagination li { list-style: none; border: 0; }
.woocommerce-pagination .page-numbers,
.navigation.pagination .page-numbers,
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.9em;
  padding: 0.6em 1.15em;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-size: var(--t--1);
  font-weight: 500;
  white-space: nowrap;
  transition: var(--f);
}
.woocommerce-pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover,
.pagination a.page-numbers:hover { border-color: var(--ink); }
.woocommerce-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current,
.pagination .page-numbers.current {
  background: var(--ink);
  color: var(--porcelain);
  border-color: var(--ink);
}
.woocommerce-pagination .page-numbers.dots { border-color: transparent; }

/* ============================================================
   6. FORMULARE WooCommerce care nu trec prin template-urile noastre
      (cont, urmărire comandă, recenzii) — aliniate la .field din machetă
   ============================================================ */
.woocommerce form .form-row {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }
.woocommerce form .form-row label {
  display: block;
  font-size: var(--t--1);
  color: var(--mute);
  margin-bottom: 0.4rem;
}
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.woocommerce form .form-row .required { color: var(--orange); border: 0; text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text {
  width: 100%;
  padding: 0.9em 1em;
  background: var(--porcelain);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--f);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-form-login input.input-text:focus,
.woocommerce-form-register input.input-text:focus { border-color: var(--brass); }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--orange); }
.woocommerce form .form-row textarea { min-height: 7rem; resize: vertical; }

/* select2 (țările/județele) adus pe aceeași linie vizuală */
.select2-container--default .select2-selection--single {
  height: auto;
  padding: 0.9em 1em;
  background: var(--porcelain);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.4;
  color: var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 0.9em;
  height: auto;
  transform: translateY(-50%);
}
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--brass); }
.select2-dropdown {
  background: var(--porcelain);
  border-color: var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 0.6em 0.8em;
  background: var(--porcelain);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--brass);
  color: #fff;
}

/* ============================================================
   7. CONȚINUT DIN EDITORUL WORDPRESS (.entry-content)
   ============================================================ */
.entry-content {
  max-width: 72ch;
  color: var(--ink-2);
}
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { font-size: var(--t-2); color: var(--ink); margin-top: 2.2rem; }
.entry-content h3 { font-size: var(--t-1); color: var(--ink); margin-top: 1.8rem; }
.entry-content h4 { font-size: var(--t-0); color: var(--ink); margin-top: 1.5rem; }
.entry-content p { color: var(--ink-2); }
.entry-content a {
  color: var(--brass);
  border-bottom: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  transition: border-color var(--f);
}
.entry-content a:hover { border-bottom-color: var(--brass); }
.entry-content strong { font-weight: 600; color: var(--ink); }

/* main.css golește listele; în conținutul editorial le punem la loc. */
.entry-content ul,
.entry-content ol { padding-left: 1.3rem; margin-left: 0; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.4rem; }
.entry-content li::marker { color: var(--brass); }

.entry-content blockquote {
  border-left: 2px solid var(--brass);
  padding: 0.2rem 0 0.2rem 1.4rem;
  margin-block: 1.8rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 380;
  font-size: var(--t-1);
  line-height: 1.4;
  color: var(--ink);
}
.entry-content blockquote cite {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t--1);
  color: var(--mute);
}

.entry-content img { border-radius: var(--r); }
.entry-content figure { margin-block: 1.8rem; }
.entry-content figcaption,
.entry-content .wp-caption-text {
  margin-top: 0.6rem;
  font-size: var(--t--2);
  color: var(--mute);
  text-align: center;
}

.entry-content .alignleft { float: left; margin: 0.3rem 1.6rem 1.1rem 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 0.3rem 0 1.1rem 1.6rem; max-width: 50%; }
.entry-content .aligncenter { display: block; margin-inline: auto; }
.entry-content .alignwide,
.entry-content .alignfull {
  max-width: none;
  width: min(1100px, 92vw);
  margin-inline: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.entry-content .alignfull { width: 92vw; }
.entry-content .wp-caption { max-width: 100%; }

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t--1);
}
.entry-content th,
.entry-content td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.entry-content th { font-weight: 600; color: var(--ink); }
.entry-content thead th { border-bottom-color: var(--line-2); }

.entry-content hr { height: 1px; background: var(--line); border: 0; margin-block: 2.2rem; }
.entry-content code {
  padding: 0.15em 0.45em;
  background: var(--porcelain);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.9em;
}
.entry-content pre {
  padding: 1.1rem 1.3rem;
  background: var(--porcelain);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow-x: auto;
}
.entry-content pre code { padding: 0; background: none; border: 0; }
.entry-content > *:first-child { margin-top: 0; }

/* ============================================================
   8. COMENTARII
   ============================================================ */
.comments-area {
  max-width: 72ch;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(1.8rem, 3vw, 2.6rem);
  border-top: 1px solid var(--line);
}
.comments-title,
.comment-reply-title {
  font-family: var(--display);
  font-weight: 360;
  font-size: var(--t-2);
  margin-bottom: 1.4rem;
}
.comment-list { display: grid; gap: 1.4rem; list-style: none; padding: 0; }
.comment-list .children { display: grid; gap: 1.4rem; list-style: none; padding-left: 1.6rem; margin-top: 1.4rem; }
.comment-body { padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 0.6rem; }
.comment-author { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: var(--t--1); }
.comment-author img { width: 34px; height: 34px; border-radius: 50%; }
.comment-metadata { font-size: var(--t--2); color: var(--mute); letter-spacing: 0.08em; text-transform: uppercase; }
.comment-content p { color: var(--ink-2); }
.comment-content p + p { margin-top: 0.8rem; }
.reply { margin-top: 0.6rem; }
.comment-reply-link {
  font-size: var(--t--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}

.comment-form { display: grid; gap: 0.2rem; }
.comment-form .comment-notes,
.comment-form .comment-form-cookies-consent label { font-size: var(--t--1); color: var(--mute); }
.comment-form p { margin-bottom: 1rem; }
.comment-form label { display: block; font-size: var(--t--1); color: var(--mute); margin-bottom: 0.4rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 0.9em 1em;
  background: var(--porcelain);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--f);
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--brass); }
.comment-form .form-submit input[type="submit"] {
  display: inline-flex;
  padding: 1.05em 1.9em;
  background: var(--ink);
  color: var(--porcelain);
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--f) var(--e);
}
.comment-form .form-submit input[type="submit"]:hover { transform: translateY(-2px); }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 0.55em; }
.comment-form-cookies-consent label { margin: 0; }

/* ============================================================
   9. JURNAL (arhivă) ȘI CĂUTARE
      Refolosesc .journal / .jpost / .empty din machetă; aici doar spațierea.
   ============================================================ */
.journal + .navigation,
.journal + .woocommerce-pagination,
.pgrid + .navigation,
.pgrid + .woocommerce-pagination { margin-top: clamp(2rem, 4vw, 3.5rem); }
.jpost__excerpt { margin-top: 0.5rem; font-size: var(--t--1); color: var(--mute); }
.search-no-results .empty { margin-block: clamp(3rem, 8vw, 7rem); }

/* ============================================================
   10. BARA DE ADMINISTRARE
       (.hdr e deja compensat din inc/assets.php)
   ============================================================ */
.admin-bar .menu { top: 32px; }
.admin-bar .searchpanel { top: 94px; }
.admin-bar .drawer { top: 32px; height: calc(100dvh - 32px); }
@media (max-width: 782px) {
  .admin-bar .menu { top: 46px; }
  .admin-bar .searchpanel { top: 108px; }
  .admin-bar .drawer { top: 46px; height: calc(100dvh - 46px); }
}
@media (max-width: 620px) {
  .admin-bar .searchpanel { top: 102px; }
}
@media (max-width: 600px) {
  /* sub 600px bara de administrare nu mai e fixă */
  .admin-bar .menu { top: 0; }
  .admin-bar .searchpanel { top: 56px; }
  .admin-bar .drawer { top: 0; height: 100dvh; }
}

/* ============================================================
   11. ȘABLOANELE DE BAZĂ (index / archive / search / single / cont)
       Doar punți: clasele vizuale rămân cele din machetă.
   ============================================================ */

/* Paginarea în „chip"-uri, folosită de ava_pagination() și de
   woocommerce/loop/pagination.php. */
.ava-pagination { margin-top: clamp(2rem, 4vw, 3.5rem); }
.ava-pagination .chips { justify-content: center; }
.ava-pagination .chip.dots { border-color: transparent; }

/* Macheta ascundea articolele de la al treilea în sus din `.journal` pe mobil,
   fiindcă pe prima pagină erau exact trei. Într-o listă paginată trebuie să
   rămână toate vizibile. */
@media (max-width: 760px) {
  .journal--list .jpost:nth-child(n+3) { display: block; }
}

/* Formularul de comentarii folosește `.field` din machetă, nu perechea
   <label>+<input> implicită; punțile generice de mai sus n-au ce căuta pe el. */
.comment-form label.field { font-size: inherit; color: inherit; margin-bottom: 1rem; }
.comment-form label.field > span { font-size: var(--t--1); color: var(--mute); margin-bottom: 0.4rem; }
.comment-form label.field.comment-form-cookies-consent > span { margin-bottom: 0; }

/* Contul clientului: navigația e o listă de chip-uri, fără marcatori. */
.woocommerce-MyAccount-navigation ul { margin: 0; }
.woocommerce-MyAccount-navigation li { list-style: none; margin: 0; padding: 0; border: 0; }
.woocommerce-MyAccount-content > .empty:first-child { margin-top: clamp(2rem, 5vw, 4rem); }

/* ============================================================
   12. COȘ ȘI FINALIZARE — punți către structura cerută de WooCommerce
   ============================================================ */

/* În machetă, `aside.checkout__aside` are exact trei copii direcți — `.osum`,
   butonul emerald și nota `p.mute` — distanțați de `gap: 1rem`. WooCommerce îi
   îngroapă în `#payment > .form-row.place-order` și are nevoie de ambele
   containere: `#payment` e fragmentul pe care checkout.js îl înlocuiește la
   fiecare recalculare AJAX, iar `.form-row.place-order` e locul unde se agață
   `woocommerce_review_order_before/after_submit`. Nu le mutăm din DOM, ci le
   facem transparente la aranjare: copiii lor redevin celule ale grilei, deci
   `gap`-ul li se aplică din nou, exact ca în machetă. */
.checkout__aside > #payment,
.checkout__aside > #payment > .form-row.place-order { display: contents; }

/* Tabelele WooCommerce pe care șabloanele temei le ocolesc (folosim `.osum`,
   `.crow`, `.summary__row`), dar pe care le pot emite pluginuri sau pagini
   auxiliare: urmărirea comenzii, descărcările, detaliile din e-mailuri. */
.woocommerce-table,
.shop_table,
.order_details {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6rem;
  font-size: var(--t--1);
}
.woocommerce-table th,
.woocommerce-table td,
.shop_table th,
.shop_table td,
.order_details th,
.order_details td {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.woocommerce-table th,
.shop_table th,
.order_details th { font-weight: 600; color: var(--ink); }
.woocommerce-table thead th,
.shop_table thead th,
.order_details thead th {
  font-size: var(--t--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mute);
  border-bottom-color: var(--line-2);
}
.woocommerce-table tfoot th,
.shop_table tfoot th,
.order_details tfoot th { font-weight: 500; color: var(--mute); }
.woocommerce-table tfoot tr:last-child th,
.woocommerce-table tfoot tr:last-child td,
.shop_table tfoot tr:last-child th,
.shop_table tfoot tr:last-child td,
.order_details tfoot tr:last-child th,
.order_details tfoot tr:last-child td { font-weight: 600; color: var(--ink); }
.shop_table td.product-thumbnail img { width: 54px; border-radius: var(--r-sm); }
.shop_table .amount,
.order_details .amount { white-space: nowrap; }
.shop_table a { color: var(--brass); }

/* Adresele de sub o comandă („Detalii client"). */
.woocommerce-customer-details { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.woocommerce-customer-details .woocommerce-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.4rem, 1rem + 2vw, 3rem);
}
.woocommerce-customer-details h2 {
  font-family: var(--display);
  font-weight: 360;
  font-size: var(--t-1);
  margin-bottom: 0.7rem;
}
.woocommerce-customer-details address {
  font-style: normal;
  font-size: var(--t--1);
  line-height: 1.7;
  color: var(--ink-2);
}
.woocommerce-customer-details address a { color: var(--brass); }

/* ============================================================
   13. TIPAR
   ============================================================ */
@media print {
  .hdr, .menu, .searchpanel, .drawer, .scrim, .curtain, .cursor, .toasts,
  .ftr, .pcard__add, .shopbar, .filters { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
  [data-r] { opacity: 1 !important; transform: none !important; }
  a { text-decoration: underline; }
}