/*
Theme Name: AromaThai
Theme URI: https://aromathai.ro
Author: AromaThai
Description: Temă block Gutenberg rapidă pentru magazinul AromaThai.
Version: 1.1.0
Requires at least: 6.9
Requires PHP: 8.3
Text Domain: aromathai
*/

/* Limbajul vizual, pe scurt — ca să nu se strecoare la loc ce am scos dinadins:
   un singur font (Inter), titlurile la greutatea 400 cu spațiere strânsă, corpul la 16px;
   două culori (verde închis pe alb-verzui) și un singur accent (lime), folosit rar: bara de
   anunț, eticheta ofertei, discurile bifelor. Butoanele sunt pastile fără umbră; cartelele
   sunt dale colorate fără chenar, cu rază de 16px; secțiunile și scenele de produs au 32px.
   Nu există majuscule bold, bandă rulantă, ștampile, arcade sau umbre sub butoane.

   Culorile trăiesc în `theme.json`, fiindcă blocurile WooCommerce și elementele de bază le
   citesc numai de acolo. Aici doar le împrumutăm, ca să nu existe două seturi de hex-uri care
   se pot desincroniza. Rezerva după virgulă ține landing-ul în picioare dacă stilurile
   globale lipsesc (editorul de blocuri, un plugin care le dezactivează). */
:root {
  --ink: var(--wp--preset--color--ink, #1c3a13);
  --forest: var(--wp--preset--color--forest, #1c3a13);
  --forest-light: var(--wp--preset--color--forest-light, #3d5b34);
  --lime: var(--wp--preset--color--lime, #d3fa99);
  --gold: var(--wp--preset--color--gold, #efe39a);
  --cream: var(--wp--preset--color--cream, #eff1e4);
  --paper: var(--wp--preset--color--paper, #fcfcf7);
  --ink-soft: var(--wp--preset--color--ink-soft, #3d5b34);
  --muted: var(--wp--preset--color--muted, #5f7059);
  --hairline: var(--wp--preset--color--hairline, #dfe4d8);
  --hairline-warm: var(--wp--preset--color--hairline-warm, #d2d8cc);
  --accent: var(--wp--preset--color--accent, #4a7a2a);
  --night: var(--wp--preset--color--night, #1c3a13);
  --price: var(--wp--preset--color--price, #1c3a13);
  --danger: var(--wp--preset--color--danger, #9c2d20);

  /* Ce nu e culoare vine tot din `theme.json`, prin `settings.custom`. Motivul e același:
     o singură sursă. Cinci raze (8 câmpuri și miniaturi, 16 cartele, 32 scene și secțiuni,
     pastila pentru butoane și etichete, 50% bulinele), o singură umbră — pentru ce plutește
     deasupra paginii, niciodată pentru butoane — plus inelul de focus, și trei înălțimi de
     control: `rand` e minimul de atins pe telefon, `cartela` e pentru câmpuri și butoane
     dintr-o cartelă, `pagina` e butonul principal. */
  --shadow-plutitor: var(--wp--custom--shadow--plutitor, 0 24px 70px rgba(0, 0, 0, .24));
  --ring-focus: var(--wp--custom--shadow--focus, 0 0 0 3px rgba(28, 58, 19, .16));
  --radius-mic: var(--wp--custom--radius--mic, 8px);
  --radius: var(--wp--custom--radius--baza, 16px);
  --radius-mare: var(--wp--custom--radius--mare, 32px);
  --radius-pastila: var(--wp--custom--radius--pastila, 999px);
  --radius-cerc: var(--wp--custom--radius--cerc, 50%);
  --control-rand: var(--wp--custom--control--rand, 44px);
  --control-cartela: var(--wp--custom--control--cartela, 52px);
  --control-pagina: var(--wp--custom--control--pagina, 56px);

  /* Tonuri derivate. Nu intră în paletă fiindcă niciun bloc WooCommerce nu le citește: sunt
     nuanțe ale unui rol care există deja (`accent`, `cream`) și cele două trepte de text de pe
     fundal închis, folosite de subsol, de bannerul de cookie-uri și de bara de cumpărare. Sunt
     singurele hex-uri din fișier în afara rezervelor; `build-design-system.mjs` le repetă în
     planșa de culori, deci o schimbare aici se face și acolo. */
  --accent-tint: #e9f0ca;
  --cream-deep: #e3e8d6;
  --on-night: #c3cebb;
  --on-night-dim: #8fa386;

  /* Antetul e lipicios pe toate paginile, deci ancorele se opresc sub el, nu în spatele lui. */
  --header-height: 64px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
[id] { scroll-margin-top: calc(var(--header-height) + 16px); }

.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

/* Bara de anunț: verdele-accent, text normal, o săgeată. Este singura bandă lime a paginii. */
.topbar {
  padding: 10px 16px;
  background: var(--lime);
  color: var(--ink);
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}
.topbar a { display: inline-flex; align-items: center; gap: 8px; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Antetul: 64px, lipicios, translucid. Marca e punga zâmbitoare și un cuvânt (`aromathai_brand()`):
   punga ia culoarea textului prin currentColor, fața rămâne lime oriunde. */
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(252, 252, 247, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header.shell { width: 100%; padding-inline: max(24px, calc((100% - 1180px) / 2)); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.brand strong { font-weight: inherit; }
.brand-icon { flex: none; width: 28px; height: 28px; }
.brand-icon circle.brand-face { fill: var(--lime); }
.brand-icon path.brand-face { stroke: var(--lime); }
.brand-tld { font-weight: 400; color: var(--muted); }
.header nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.header nav a { transition: opacity .2s ease; }
.header nav a:hover { opacity: .7; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-rand);
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pastila);
  background: var(--forest);
  color: var(--paper);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background .2s ease;
}
.nav-cta:hover { background: var(--forest-light); }

/* ---------- Eroul ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
  padding-block: 56px 96px;
}
/* Supratitlul: o etichetă mică, cu bulină, în gri-verde. Nu strigă. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-cerc); background: var(--accent); flex: none; }
/* Varianta pastilă, pentru oferta din erou și din vitrină: singurul loc în care lime-ul
   ajunge lângă text. */
.eyebrow.tag, .at-eyebrow.tag {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: var(--radius-pastila);
  background: var(--lime);
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow.tag::before, .at-eyebrow.tag::before { content: none; }
.hero h1, .section h2, .places-section h2, .checkout-section h2 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.06;
}
/* Singura mărime de font a temei citită din `theme.json`: `display` există doar pentru eroul
   campaniei. E fluidă (44–72px între 320 și 1180px), deci nu mai are mărimi proprii pe telefon. */
.hero h1 { font-size: var(--wp--preset--font-size--display, clamp(44px, 6vw, 72px)); letter-spacing: -.03em; line-height: 1.02; }
.hero-lead {
  max-width: 520px;
  margin: 26px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 32px; }
.primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--control-pagina);
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius-pastila);
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  transition: background .2s ease, color .2s ease;
}
.primary-button { background: var(--forest); color: var(--paper); }
.primary-button:hover { background: var(--forest-light); }
.primary-button:disabled { opacity: .6; cursor: wait; }
.secondary-button { border: 1px solid var(--forest); background: transparent; color: var(--forest); }
.secondary-button:hover { background: var(--cream); }
/* Al doilea drum, ca la referință: un link subliniat cu săgeată, nu încă un buton. */
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--forest); font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.text-link:hover { color: var(--forest-light); }
.microcopy { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.trust-row span { display: flex; align-items: center; gap: 8px; }
.trust-row span::before { content: "✓"; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--radius-cerc); background: var(--accent-tint); color: var(--accent); font-size: 12px; }

/* Scena produsului: o dală de 32px cu o lumină moale, pe care pachetul stă decupat. Fotografia
   are canal alfa, deci nu are nevoie nici de chenar, nici de fundal propriu. */
.hero-media { position: relative; }
.hero-stage {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 7%;
  border-radius: var(--radius-mare);
  background: radial-gradient(110% 80% at 50% 100%, var(--cream-deep), var(--cream) 72%);
  overflow: hidden;
}
.hero-stage img { width: 100%; height: auto; filter: drop-shadow(0 28px 36px rgba(28, 58, 19, .22)); }

/* ---------- Secțiunile campaniei ---------- */
.section { padding-block: 112px; }
.section-heading { max-width: 640px; }
.section-heading h2, .ingredients h2, .checkout-section h2 { font-size: clamp(34px, 3.8vw, 52px); }
.section-heading > p:last-child { margin: 20px 0 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.how-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; margin-top: 56px; }
.how-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* `height: auto` nu e de prisos: `aromathai_photo()` scrie `width`/`height` pe fiecare `<img>`,
   iar atributul `height` devine înălțime fixă (1440px) dacă CSS-ul nu-l suprascrie — cu
   `width: 100%` și `aspect-ratio` ignorate, fotografia se întindea pe toată coloana. */
.how-images img { width: 100%; height: auto; aspect-ratio: .78; object-fit: cover; border-radius: var(--radius); }
.how-images img:last-child { margin-top: 40px; }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--hairline); }
.steps li:first-child { border-top: 1px solid var(--hairline); }
.steps > li > span { padding-top: 4px; color: var(--muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.steps strong { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.steps p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* Banda închisă: aceeași verde ca subsolul, cu trei fotografii în dale și titlul lor dedesubt,
   nu peste imagine. */
.places-section { padding: 112px 0; background: var(--night); color: var(--paper); }
/* Titlurile primesc verdele mărcii din `theme.json` (`elements.heading`), deci pe banda închisă
   ar fi verde pe verde: aici se scriu explicit în alb. */
.places-section h2, .places-grid h3 { color: var(--paper); }
.section-heading.light { max-width: 760px; }
.section-heading.light .eyebrow { color: var(--on-night); }
.section-heading.light .eyebrow::before { background: var(--lime); }
.places-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.places-grid article { margin: 0; }
.places-grid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--forest-light); }
.places-grid h3 { margin: 16px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }

.ingredients { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 80px; }
.product-image-wrap { position: relative; border-radius: var(--radius-mare); overflow: hidden; background: var(--night); }
.product-image-wrap img { width: 100%; height: auto; }
/* Originea, ca etichetă conturată în colțul fotografiei — nu ca ștampilă rotită. */
.origin-stamp {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1.5px solid rgba(252, 252, 247, .7);
  border-radius: var(--radius-pastila);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
}
.ingredients-copy > p:not(.eyebrow):not(.safety-note) { max-width: 560px; margin: 22px 0 36px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.ingredient-list { border-top: 1px solid var(--hairline); }
.ingredient-list div { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.ingredient-list span { color: var(--muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ingredient-list strong { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.ingredient-list small { color: var(--muted); font-size: 14px; }
.safety-note { margin: 24px 0 0; padding: 16px 18px; border-radius: var(--radius); background: var(--cream); color: var(--ink-soft); font-size: 14px; line-height: 1.55; }

/* Banda de comandă: crem, cu cartela de comandă albă. */
.checkout-section { padding: 112px 0; background: var(--cream); }
.checkout-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 64px; align-items: center; }
.checkout-product h2 { max-width: 560px; }
.checkout-product > img { width: min(100%, 460px); height: auto; margin: 28px auto 16px; }
.checkout-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; border-top: 1px solid var(--hairline-warm); font-size: 15px; }
.checkout-summary strong { white-space: nowrap; font-weight: 500; }
.checkout-summary.muted { color: var(--muted); font-size: 14px; }
.order-card { padding: 44px 40px; border-radius: var(--radius-mare); background: var(--paper); }
.availability-card { display: grid; justify-items: start; text-align: left; }
.availability-card h3 { max-width: 420px; margin: 0; font-size: clamp(30px, 3vw, 40px); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.availability-card > p:not(.eyebrow):not(.form-note) { max-width: 420px; margin: 18px 0 28px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.primary-button.full { width: 100%; }
.form-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.availability-card .form-note { margin-top: 14px; }

.stock-modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(28, 58, 19, .6); backdrop-filter: blur(8px); animation: modal-fade .18s ease-out; }
.stock-modal { width: min(100%, 540px); position: relative; padding: 48px 44px 40px; border-radius: var(--radius-mare); background: var(--paper); text-align: center; box-shadow: var(--shadow-plutitor); animation: modal-rise .22s ease-out; }
.stock-modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: var(--radius-cerc); background: var(--cream); color: var(--ink); cursor: pointer; font-size: 24px; line-height: 1; }
.stock-modal-icon { width: 60px; height: 60px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: var(--radius-cerc); background: var(--lime); color: var(--ink); font-size: 28px; font-weight: 500; }
.stock-modal .eyebrow { justify-content: center; }
.stock-modal h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.stock-modal > p:not(.eyebrow) { max-width: 420px; margin: 18px auto 28px; color: var(--muted); font-size: 16px; line-height: 1.55; }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.faq-list { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { padding: 22px 44px 22px 0; position: relative; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 22px; font-weight: 300; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 44px 24px 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* Subsolul, un singur markup pentru campanie și pentru paginile block (`aromathai_footer_html()`):
   marca, o propoziție mare, trei coloane cu titluri mici. */
main > footer.at-footer { padding: 72px 0 32px; background: var(--night); color: var(--paper); }
.at-footer { --at-footer-dim: var(--on-night); }
.at-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.at-footer-brand { display: flex; flex-direction: column; gap: 22px; }
.at-footer-brand .brand { color: var(--paper); }
.at-footer-brand .brand-tld { color: var(--on-night); }
.at-footer-brand p { margin: 0; max-width: 340px; color: var(--paper); font-size: 22px; font-weight: 400; letter-spacing: -.015em; line-height: 1.3; }
.at-footer-col { display: flex; flex-direction: column; gap: 12px; }
.at-footer-col h2 {
  margin: 0 0 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-night-dim);
}
.at-footer-col a { color: var(--at-footer-dim); font-size: 14px; line-height: 1.5; transition: color .2s ease; }
.at-footer-col a:hover { color: var(--paper); }
.at-footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(252, 252, 247, .14);
  color: var(--on-night-dim);
  font-size: 13px;
}
.mobile-buy { display: none; }

.at-legal-shell { width: min(900px, calc(100% - 40px)); margin: 64px auto 110px; }

/* Antetul comun paginilor de magazin, construit după cel al paginii principale. */
.at-site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0 max(24px, calc((100% - 1180px) / 2));
  min-height: var(--header-height);
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  background: rgba(252, 252, 247, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.at-site-header a { text-decoration: none; color: inherit; }
.at-header-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.at-header-nav a { transition: opacity .2s ease; }
.at-header-nav a:hover { opacity: .7; }

/* Coșul din antet, identic în ambele antete. */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-cerc);
  background: var(--cream);
  color: var(--forest);
  transition: background .2s ease;
}
.cart-link:hover, .at-header-nav .cart-link:hover, .header nav .cart-link:hover { background: var(--lime); opacity: 1; }
.cart-link:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pastila);
  background: var(--forest);
  color: var(--paper);
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

/* Magazinul are un singur produs, deci „Afișez singurul rezultat” și „Sortare implicită”
   nu spun nimic; bara ocupă spațiu și sugerează un catalog care nu există. */
.wc-block-product-results-count,
.wc-block-catalog-sorting { display: none; }
.wp-block-group:has(> .wc-block-product-results-count) { display: none; }

/* Linia „Category: Inhalatoare aromatice” de sub preț. Categoria are un singur produs, deci
   arhiva ei repetă exact pagina de magazin — motiv pentru care e și scoasă din sitemap. În
   plus, prefixul vine din șablonul blocurilor WooCommerce, unde e scris literal în engleză,
   nu printr-un `__()`, deci nu se traduce. Dacă apar mai multe produse, aici e locul unde se
   pornește la loc — cu prefixul rescris, nu doar afișat. */
.wp-block-woocommerce-product-details ~ * .taxonomy-product_cat,
.wp-block-post-terms.taxonomy-product_cat { display: none; }

/* Meniul pentru ecrane înguste. Ascuns implicit: pe lat, linkurile stau în bara de sus.
   Este un <details>, deci se deschide fără JavaScript. */
.nav-menu { position: relative; display: none; flex: none; }
.nav-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-cerc);
  background: var(--cream);
  color: var(--forest);
  cursor: pointer;
  list-style: none;
}
/* Săgeata implicită a lui <details>, în ambele motoare. */
.nav-menu > summary::marker,
.nav-menu > summary::-webkit-details-marker { display: none; content: ""; }
.nav-menu > summary:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.nav-menu[open] > summary { background: var(--lime); }
.nav-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  display: grid;
  min-width: 220px;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-plutitor);
}
.nav-menu-panel a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-mic);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.nav-menu-panel a:hover { background: var(--cream); }

/* ---------- Paginile WooCommerce, aduse la identitatea magazinului ---------- */
.woocommerce-page main,
.woocommerce main {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  padding-block: 48px 100px;
}
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce div.product .product_title,
.wc-block-components-title { letter-spacing: -.02em; }
.woocommerce-page h1 { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 10px; }
.woocommerce-breadcrumb { color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.woocommerce .woocommerce-result-count { color: var(--muted); font-size: 13px; }

/* Magazinul folosește blocul Product Collection, nu bucla clasică. */
ul.wc-block-product-template.wc-block-product-template__responsive,
.wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
}
li.wc-block-product {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 20px;
}
li.wc-block-product .wc-block-components-product-image img { border-radius: var(--radius-mic); }
li.wc-block-product .wp-block-post-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  margin: 8px 0 0;
}
li.wc-block-product .wp-block-woocommerce-product-price { color: var(--ink); font-weight: 500; }
li.wc-block-product .wc-block-components-product-button { margin-top: auto; padding-top: 8px; }
li.wc-block-product .wc-block-components-product-button .wp-block-button__link { width: 100%; }

/* ---------- Pagina produsului ----------
   Șablonul propriu al temei (`templates/single-product.html`) o scoate de pe
   `woocommerce/legacy-template` și o aduce la limbajul paginii principale: aceleași
   blocuri de ofertă, aceleași argumente de încredere, aceiași pași de folosire, iar
   filele „Descriere / Informații suplimentare” devin acordeon. */
.wp-block-woocommerce-product-price { color: var(--ink); font-weight: 500; }
.wc-block-components-product-sku { color: var(--muted); font-size: 12px; letter-spacing: .06em; }

.at-product .wc-block-breadcrumbs { color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.at-product-top { gap: 64px; align-items: flex-start; margin-bottom: 0; }

/* Galeria stă pe o scenă crem, ca pachetul din eroul campaniei. */
.at-product-media .woocommerce-product-gallery {
  padding: 40px;
  border-radius: var(--radius-mare);
  background: radial-gradient(110% 80% at 50% 100%, var(--cream-deep), var(--cream) 72%);
}
.at-product-media .woocommerce-product-gallery img { border-radius: var(--radius-mic); }
.at-product-media .flex-control-thumbs { display: flex; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.at-product-media .flex-control-thumbs li { flex: 1; }
.at-product-media .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-mic);
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s ease;
}
.at-product-media .flex-control-thumbs img:hover,
.at-product-media .flex-control-thumbs img.flex-active { opacity: 1; }

.at-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.at-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-cerc); background: var(--accent); flex: none; }
.at-product-buy .wp-block-post-title {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.at-product-lead p { max-width: 470px; margin: 18px 0 0; color: var(--ink-soft); font-size: 18px; line-height: 1.5; }

/* Blocul de ofertă: o dală crem cu două valori, aceeași pe pagina produsului și în vitrină. */
.at-offer-row {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 24px;
  margin: 28px 0 22px;
  border-radius: var(--radius);
  background: var(--cream);
}
.at-offer-row > div { min-width: 120px; }
.at-offer-row strong { display: block; margin-top: 4px; font-size: 22px; font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
.at-offer-label { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.at-offer-divider { width: 1px; height: 40px; background: var(--hairline-warm); }
.at-offer-price, .at-offer-price .amount, .at-offer-price bdi { color: var(--price); font-size: 22px; font-weight: 500; }

/* Stocul, ca o singură linie cu bulină, nu ca text de sistem. */
.at-product-buy .wc-block-components-product-stock-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
}
.at-product-buy .wc-block-components-product-stock-indicator::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-cerc);
  background: var(--accent);
}

/* Cantitatea și butonul, pe același rând, la înălțimea butonului principal. */
.at-product-buy form.cart { display: flex; align-items: center; gap: 12px; margin: 0; }
.at-product-buy form.cart .quantity { flex: none; margin: 0; }
.at-product-buy form.cart input.qty {
  width: 88px;
  height: var(--control-pagina);
  min-height: var(--control-pagina);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pastila);
  background: var(--paper);
  text-align: center;
  font-weight: 500;
}
.at-product-buy form.cart .single_add_to_cart_button {
  flex-grow: 1;
  min-height: var(--control-pagina);
  padding: 0 28px;
  border-radius: var(--radius-pastila);
  font-weight: 500;
  font-size: 16px;
}
.at-product-buy form.cart .single_add_to_cart_button:hover { background: var(--forest-light); }

/* Stocul e deja o linie cu bulină deasupra; blocul de add-to-cart îl mai scrie o dată,
   simplu, sub el. Îl ascundem pe al doilea. */
.at-product-buy .wp-block-add-to-cart-form p.stock { display: none; }

.at-product-microcopy { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.at-trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.at-trust-row span { display: flex; align-items: center; gap: 8px; }
.at-trust-row span::before { content: "✓"; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--radius-cerc); background: var(--accent-tint); color: var(--accent); font-size: 12px; }
.at-safety-note { margin: 28px 0 20px; padding: 14px 18px; border-radius: var(--radius); background: var(--cream); color: var(--ink-soft); font-size: 14px; line-height: 1.55; }

/* „Cum se folosește”, aceiași trei pași ca pe pagina principală. */
.at-how { margin-top: 96px; padding-top: 80px; border-top: 1px solid var(--hairline); }
.at-how h2 { margin: 0; font-size: clamp(32px, 3.6vw, 44px); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.at-how-lead { max-width: 620px; margin: 18px 0 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.at-how-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; margin-top: 52px; }
.at-steps { margin: 0; padding: 0; list-style: none; }
.at-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--hairline); }
.at-steps li:first-child { border-top: 1px solid var(--hairline); }
.at-steps > li > span { padding-top: 4px; color: var(--muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.at-steps strong { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.at-steps p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.at-how-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.at-how-images img { width: 100%; height: auto; aspect-ratio: .78; object-fit: cover; border-radius: var(--radius); }
.at-how-images img:last-child { margin-top: 40px; }

/* Detaliile: acordeon în locul filelor, în stilul întrebărilor de pe pagina principală. */
.at-product-details { margin-top: 96px; padding-top: 80px; border-top: 1px solid var(--hairline); }
.at-product-details h2 { margin: 0 0 30px; font-size: clamp(32px, 3.6vw, 44px); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.at-product-details .wp-block-details { border-bottom: 1px solid var(--hairline); }
.at-product-details .wp-block-details:first-of-type { border-top: 1px solid var(--hairline); }
.at-product-details summary {
  padding: 22px 44px 22px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.at-product-details summary::-webkit-details-marker,
.at-product-details summary::marker { display: none; content: ""; }
.at-product-details summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 22px; font-weight: 300; line-height: 1; }
.at-product-details details[open] summary::after { content: "–"; }
.at-product-details .wp-block-details > *:not(summary) { margin: 0 0 24px; padding-right: 44px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.at-product-details .wp-block-woocommerce-product-specifications table { width: 100%; border-collapse: collapse; }
.at-product-details .wp-block-woocommerce-product-specifications td { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.at-product-details .wp-block-woocommerce-product-specifications tr:last-child td { border-bottom: 0; }

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce div.product .single_add_to_cart_button,
.wp-element-button {
  /* Forma butonului vine din `theme.json` (`elements.button`), care citește același token.
     Regula asta a rămas pentru butoanele clasice ale WooCommerce, care nu poartă clasa
     `wp-element-button` și n-ar primi nimic din stilurile globale. */
  border-radius: var(--radius-pastila);
  background: var(--forest);
  color: var(--paper);
  font-weight: 500;
  padding: 14px 24px;
  border: 0;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce div.product .single_add_to_cart_button:hover { background: var(--forest-light); color: var(--paper); }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  border-top-color: var(--accent);
  background: var(--cream);
  border-radius: var(--radius);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--accent); }

/* Coșul și checkout-ul sunt blocuri, cu propriile clase. */
.wc-block-components-button:not(.is-link) {
  border-radius: var(--radius-pastila);
  background: var(--forest);
  color: var(--paper);
  font-weight: 500;
}
.wc-block-components-button:not(.is-link):hover { background: var(--forest-light); }
.wc-block-components-totals-item__value { font-weight: 500; }
/* Colțurile rotunjite erau puse pe blocuri de totaluri care nu sunt cartele, deci ieșeau
   linii curbate, tăiate, în mijlocul rezumatului. Cartela e containerul, nu fiecare rând. */
.wc-block-components-sidebar {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--cream);
}
.wc-block-components-sidebar .wc-block-components-totals-wrapper { border-radius: 0; }
/* Sub ~700px WooCommerce anulează paddingul cartelei (`.is-small`, regulă cu doi selectori,
   care o bătea pe a noastră) și pune în schimb 16px pe fiecare rând de totaluri — textul rămânea
   lipit de chenar. 10px + 16px = aceiași 26px ca pe desktop. */
.wc-block-cart.wc-block-components-sidebar-layout .wc-block-components-sidebar { padding: 26px; }
.wc-block-cart.is-small .wc-block-components-sidebar,
.wc-block-cart.is-mobile .wc-block-components-sidebar { padding: 10px; }
/* Rezumatul comenzii de la checkout: aceeași cartelă, dar cu loc pentru numele produsului.
   WooCommerce ține două coloane de la 700px de container în sus („is-large”), cu bara la 35%:
   la 768px asta înseamnă 252px, din care numele produsului primea 57 — un cuvânt pe rând. Sub
   1000px bara ia 42% și paddingul scade; descrierea scurtă nu se mai repetă în rezumat (e deja
   în nume și în preț), iar textul stă mai aproape de imagine. Sub 700px („is-small”/„is-mobile”)
   WooCommerce anulează paddingul cartelei, ca la coș: 10px + 16px ai lor. */
.wc-block-checkout.wc-block-components-sidebar-layout .wc-block-components-sidebar { padding: 20px; }
.wc-block-checkout.is-small .wc-block-components-sidebar,
.wc-block-checkout.is-mobile .wc-block-components-sidebar { padding: 10px; }
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description { display: none; }
.wc-block-components-order-summary-item .wc-block-components-order-summary-item__description { padding-left: 14px; }
@media (max-width: 1000px) {
  .wc-block-checkout.is-large .wc-block-components-main { width: 58%; padding-right: 3%; }
  .wc-block-checkout.is-large .wc-block-components-sidebar { width: 42%; padding: 14px; }
}
.wc-block-components-order-summary { border-radius: 0; }
.wc-block-components-product-name { font-weight: 500; }
/* Coșul gol e conținutul paginii „Coș”, rescris de `store-setup.php` cu aceleași drumuri ca pe
   404 și pe căutarea fără rezultate. Blocul de coș e `alignwide`, deci textul stă în linie cu
   titlul, la stânga — nu centrat sub o față tristă. */
.at-empty-cart { max-width: 640px; margin-top: 8px; }
.at-empty-cart-lead { margin: 0; font-size: 19px; font-weight: 500; color: var(--ink); }
.at-empty-cart-copy { margin: 10px 0 0; max-width: 60ch; color: var(--muted); }
.at-empty-cart-ways { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.at-empty-cart .at-way { text-decoration: none; }

/* ---------- Magazinul și căutarea ----------
   Cu un singur produs, o grilă gândită pentru douăsprezece arată ca o cartelă pierdută
   într-o pagină goală. `patterns/shop-showcase.php` pune produsul în vitrină; grila rămâne
   în șablon și reapare singură la al doilea produs, când pattern-ul iese gol. */
/* Căutarea nu e pagină WooCommerce și nu are `.at-legal-shell`, deci nu primea lățimea și
   marginile celorlalte pagini: pe telefon textul și formularul stăteau lipite de marginea
   ecranului. Același cadru ca paginile de magazin. */
.at-search {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  padding-block: 48px 100px;
}
.at-shop .wp-block-query-title,
.at-shop .at-shop-title,
.at-search .wp-block-query-title {
  margin: 0 0 40px;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.06;
}
.at-shop .wc-block-breadcrumbs { color: var(--muted); font-size: 13px; margin-bottom: 26px; }

.at-showcase { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.at-showcase-media {
  padding: 40px;
  border-radius: var(--radius-mare);
  background: radial-gradient(110% 80% at 50% 100%, var(--cream-deep), var(--cream) 72%);
}
.at-showcase-media img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(28, 58, 19, .2)); }
.at-showcase h2 {
  margin: 0;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.at-showcase-lead { max-width: 470px; margin: 18px 0 0; color: var(--ink-soft); font-size: 18px; line-height: 1.5; }
.at-showcase .at-offer-row { margin: 26px 0 22px; }
.at-showcase-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.at-showcase .at-showcase-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-pagina);
  padding: 0 30px;
  border-radius: var(--radius-pastila);
  font-size: 16px;
  font-weight: 500;
}
.at-showcase .at-showcase-buy:hover { background: var(--forest-light); }
.at-showcase-details { display: inline-flex; align-items: center; gap: 8px; color: var(--forest); font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* Grila și vitrina nu coexistă: cât timp vitrina e randată, grila ar repeta același produs. */
.at-shop:has(.at-showcase) .at-shop-grid { display: none; }

/* Drumul înainte de sub vitrină: „cum se folosește” e pe pagina produsului, la ancora ei. */
.at-shop-onward {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 72px;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 15px;
}
.at-shop-onward a { color: var(--forest); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

/* Căutarea nu avea niciun șablon: cădea pe `index.html` și arăta ca un blog. */
/* Lățimea formularului stă pe învelișul interior, nu pe bloc: un copil direct al grupului
   constrâns cu `max-width` mai mic e centrat de WordPress cu `margin-left: auto !important`,
   deci formularul ajungea în mijloc, sub un titlu aliniat la stânga. */
.at-search-form { margin: 0 0 40px; }
.at-search-form .wp-block-search__inside-wrapper { max-width: 560px; }
.at-search-form .wp-block-search__input { min-height: var(--control-cartela); }
/* Rezultatele sunt rânduri, nu o grilă de cartele. Un magazin cu un singur produs întoarce
   aproape mereu un rezultat, iar o cartelă îngustă într-un rând gol e chiar defectul pe care
   vitrina de mai sus îl repară. Un rând arată la fel de bine cu unul sau cu zece. */
.at-search-results {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.at-search-results > li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: center;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--cream);
}
/* Paginile nu au imagine reprezentativă; fără asta ar rămâne o coloană goală în stânga. */
.at-search-results > li:not(:has(img)) { grid-template-columns: 1fr; }
.at-search-results img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-mic); }
.at-search-text { min-width: 0; }
.at-search-results .wp-block-post-title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; }
.at-search-results .wp-block-post-excerpt { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.at-search-results .wp-block-post-excerpt__more-text { display: none; }
/* Butonul căutării poartă aceeași formă ca butoanele din jurul lui. */
.at-search-form .wp-block-search__button,
.at-legal-shell .wp-block-search__button { border-radius: var(--radius-pastila); min-height: var(--control-cartela); padding: 0 24px; }
.at-search-empty { max-width: 620px; margin: 0 0 34px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.at-search-ways { display: flex; flex-wrap: wrap; gap: 12px; }
.at-way {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-cartela);
  padding: 0 22px;
  border: 1px solid var(--forest);
  border-radius: var(--radius-pastila);
  color: var(--forest);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.at-way:hover { background: var(--cream); }
.at-way-primary { background: var(--forest); color: var(--paper); }
.at-way-primary:hover { background: var(--forest-light); color: var(--paper); }

@media (max-width: 920px) {
  .at-showcase { grid-template-columns: 1fr; gap: 28px; }
  .at-shop-onward { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 44px; }
}
@media (max-width: 600px) {
  .at-showcase-media { padding: 24px; border-radius: var(--radius); }
  .at-showcase-actions { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
  .at-showcase .at-showcase-buy { width: 100%; }
  .at-showcase-details { justify-content: center; }
}

/* Pagina produsului pe ecran îngust: o singură coloană, iar bara de cumpărare rămâne jos. */
@media (max-width: 920px) {
  .at-product-top { gap: 34px; }
  .at-how-layout { grid-template-columns: 1fr; gap: 28px; }
  .at-how-images img:last-child { margin-top: 0; }
  .at-how, .at-product-details { margin-top: 56px; padding-top: 44px; }
  .at-product { padding-bottom: 104px; }
}
@media (max-width: 600px) {
  .at-product-media .woocommerce-product-gallery { padding: 24px; border-radius: var(--radius); }
  .at-offer-row { width: 100%; gap: 16px; padding: 16px 18px; }
  .at-offer-row > div { min-width: 0; flex: 1; }
  .at-offer-row strong { font-size: 20px; }
  .at-offer-price, .at-offer-price .amount, .at-offer-price bdi { font-size: 20px; }
  .at-product-buy form.cart input.qty { width: 76px; }
  .at-product-details summary, .at-steps strong { font-size: 17px; }
  .at-steps li { grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 0; }
}

/* ---------- Pagina de mulțumire ----------
   Este pagina pe care clientul o vede imediat după ce a plătit. Blocurile de rezumat ale
   WooCommerce sunt tot acolo, dar se randează goale pentru cine nu are sesiunea comenzii, deci
   nu te baza pe ele ca să umple pagina: banda „ce urmează” se vede oricui. */
/* Blocul de stare al WooCommerce vine `alignwide`, deci ieșea la 1180px lângă un conținut de
   760 — titlul începea cu 210px la stânga propriului text. Egalăm cele două lățimi pe
   container, în loc să luptăm cu alinierea fiecărui bloc. */
.at-confirmation { --wp--style--global--wide-size: var(--wp--style--global--content-size); }
.at-confirmation .wc-block-order-confirmation-status,
.at-confirmation h2 {
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.at-confirmation .wc-block-order-confirmation-status {
  margin: 0 0 12px;
  color: var(--forest);
  font-size: clamp(30px, 3.4vw, 44px);
}
.at-confirmation h2 { margin: 48px 0 18px; font-size: clamp(24px, 2.4vw, 30px); }
/* Sub titlu, blocul lor pune un `<p>` fără clasă, deci moștenea mărimea de titlu a
   containerului: două rânduri de titlu, unul sub altul. Clasa `-description` pe care o
   stilam există doar pe alte ramuri de stare (anulată, rambursată), nu pe „comandă primită”. */
.at-confirmation .wc-block-order-confirmation-status-description,
.at-confirmation .wc-block-order-confirmation-status > p {
  margin: 12px 0 0;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.at-next {
  margin-top: 44px;
  padding: 30px 34px;
  border-radius: var(--radius);
  background: var(--cream);
}
.at-next h2 { margin: 0 0 6px; font-size: 26px; }
.at-next-steps { margin: 0; padding: 0; list-style: none; }
.at-next-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--hairline-warm); }
.at-next-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.at-next-steps > li > span { padding-top: 3px; color: var(--muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.at-next-steps strong { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.at-next-steps p { margin: 5px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.at-next-steps a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }

/* „Un cont, dacă vrei”: blocul WooCommerce de creare a contului după plată. Se randează doar
   pentru cine are sesiunea comenzii și nu are deja cont; formularul (un buton, parola vine prin
   email) e montat de scriptul lor în `.wc-block-order-confirmation-create-account-form`. Vine cu
   fundal gri translucid și margini `!important`; îl aliniem cu cartela „ce urmează”. */
.at-confirmation .wc-block-order-confirmation-create-account {
  /* Doar pe verticală: blocul e `alignwide`, iar marginile lui orizontale `auto !important`
     din layout-ul constrâns îl țin în coloană; un `margin: … 0` le-ar anula și l-ar lipi de stânga. */
  margin-top: 28px !important;
  margin-bottom: 0 !important;
  padding: 28px 34px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  gap: 28px;
}
.at-confirmation .wc-block-order-confirmation-create-account h2 { margin: 0 0 8px; font-size: 26px; }
.at-confirmation .wc-block-order-confirmation-create-account p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.at-confirmation .wc-block-order-confirmation-create-account-form-wrapper { flex: 0 1 300px; }
.at-confirmation .wc-block-order-confirmation-create-account-description { color: var(--muted); font-size: 14px; line-height: 1.55; }
/* După click, blocul lor înlocuiește conținutul cu `…-success` în același container; cartela e
   containerul, deci succesul e doar text, aliniat la stânga ca restul paginii. */
.at-confirmation .wc-block-order-confirmation-create-account-success { flex: 1 1 100%; text-align: left; }
.at-confirmation .wc-block-order-confirmation-create-account-success h3 { margin: 0 0 8px; font-weight: 500; font-size: 22px; letter-spacing: -.01em; }
.at-confirmation .wc-block-order-confirmation-create-account-success p { margin: 0; color: var(--muted); line-height: 1.6; }

.at-confirmation .wc-block-order-confirmation-address-wrapper { gap: 40px; margin-top: 8px; }
.at-confirmation address { font-style: normal; color: var(--muted); line-height: 1.7; }
.at-confirmation-ways { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--hairline); }
.at-confirmation .at-way { text-decoration: none; }

@media (max-width: 600px) {
  .at-next { padding: 22px 20px; }
  .at-next-steps li { grid-template-columns: 34px 1fr; gap: 12px; }
  .at-confirmation .wc-block-order-confirmation-create-account { padding: 22px 20px; }
}

/* ---------- Baza care lipsea ----------
   Câmpurile, formularele de cont, urmărirea comenzii, tabelele de comenzi și notificările
   blocurilor nu aveau nicio regulă, deci arătau ca un WooCommerce oarecare lângă un landing
   proiectat. Valorile nu sunt inventate: vin din tokenii de sistem (`--control-cartela`,
   `--radius-mic`, `--hairline`), aceiași pe care îi poartă cartela de produs și coșul din antet. */

.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"]:not(.wc-block-components-quantity-selector__input),
.woocommerce-page input[type="search"],
.woocommerce-page select,
.woocommerce-page textarea,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wp-block-search__input {
  width: 100%;
  min-height: var(--control-cartela);
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-mic);
  background: var(--paper);
  color: var(--ink);
  outline: none;
}
.woocommerce-page textarea { min-height: 120px; padding: 14px; line-height: 1.6; }
/* Selectoarele din checkout-ul pe blocuri („Țară/regiune”, „Județ”) își poartă eticheta
   plutitoare ÎNĂUNTRUL casetei, deci au nevoie de spațiu sus. Un `padding: 0` pus de noi o
   suprapunea peste valoare. Le lăsăm în seama WooCommerce. */
.woocommerce-page input:focus,
.woocommerce-page select:focus,
.woocommerce-page textarea:focus,
.wc-block-components-text-input input:focus,
.wp-block-search__input:focus {
  border-color: var(--forest);
  box-shadow: var(--ring-focus);
}
.woocommerce-page label,
.woocommerce form .form-row label { font-size: 13px; font-weight: 500; }
.woocommerce-page .required { color: var(--danger); }

/* Formularele care stau singure pe pagină — autentificare, înregistrare, parolă pierdută,
   urmărirea comenzii — capătă corp de cartelă, ca să nu plutească pe fundal. */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword,
.woocommerce-form-track-order {
  padding: 30px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
}
.woocommerce-form-track-order { max-width: 620px; }
/* Cele două câmpuri ale urmăririi stau pe 47% fiecare (`form-row-first/last`, CSS-ul clasic
   WooCommerce), iar foaia lor pentru ecrane mici nu se încarcă în temele block: pe telefon
   textul de ajutor din câmpuri se tăia. Sub 600px, unul sub altul. */
@media (max-width: 600px) {
  .woocommerce form.woocommerce-form-track-order .form-row-first,
  .woocommerce form.woocommerce-form-track-order .form-row-last { width: 100%; float: none; }
}
/* Aranjarea în două coloane a paginii de login/înregistrare rămâne cea a WooCommerce (flotante).
   Dacă vreodată pui o grilă peste un `.col2-set`, scoate-i întâi clearfix-ul: foaia lor pune pe
   `.col2-set::before/::after` un `content: " "` cu `display: table`, iar într-o grilă pseudo-
   elementul devine primul element și ocupă prima celulă — coloanele par „inversate” fără
   `order`, fără `direction`, fără `grid-column`. Contul de mai jos face exact asta. */

/* ---------- „Contul meu” ---------- */
/* Două coloane, ca într-un cont de magazin: navigația pe stânga, conținutul lat pe dreapta.
   Coaja e cea a paginilor de citit (`page.html`, 760px), deci o lățim doar când există
   navigația contului: pagina de login/înregistrare, cu aceeași coajă, rămâne cum e. Grila stă pe
   învelișul `.woocommerce`, nu pe `.col2-set` (vezi mai sus), iar notificările — „Adresa a fost
   salvată” — ocupă ambele coloane și dispar când sunt goale, altfel ar lua prima celulă. */
/* 1000px, cât lasă foaia WooCommerce învelișului `.woocommerce` pe paginile de cont — titlul
   trebuie să se termine unde se termină conținutul. Coaja (`.at-legal-shell`, 900px) trebuie
   lărgită odată cu variabila: altfel copiii constrânși au voie 1000, dar părintele le dă 900. */
.at-legal-shell:has(.woocommerce-MyAccount-navigation) {
  width: min(1000px, calc(100% - 40px));
  --wp--style--global--content-size: 1000px;
}
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}
/* Clearfix-ul WooCommerce (`::before`/`::after` cu `content: " "`) ar fi primul element al
   grilei și ar împinge navigația în coloana a doua; la fel pe perechile de adrese de mai jos. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after,
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns::before,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns::after { content: none; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 24px; }
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--header-height) + 24px); }
.woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; }
/* `.at-legal-shell a` subliniază linkurile de conținut și vine mai jos în fișier; `li a` bate. */
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 16px;
  border-radius: var(--radius-pastila);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--cream); }
/* Foaia WooCommerce subliniază elementul activ cu un selector lung; îl batem cu unul mai lung. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a { background: var(--forest); color: var(--paper); text-decoration: none; }
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); font-weight: 500; }

/* Conținutul: titluri de secțiune la 24px (nu H2-ul de 36 al paginilor de citit), introduceri
   estompate, cu numărul, data și starea comenzii (`mark`) în cerneală plină. */
.woocommerce-MyAccount-content h2,
.at-account-heading {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.woocommerce-MyAccount-content .at-account-heading { margin-top: 34px; }
.woocommerce-MyAccount-content > p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; }
.woocommerce-MyAccount-content mark { color: var(--ink); background: transparent; }
.woocommerce-MyAccount-content address { font-style: normal; line-height: 1.75; }

/* Tabelele de comenzi. Doar antetul e crem: numărul comenzii e un `th` de rând, iar totalurile
   comenzii sunt `th` de subsol — cu regula generală pe `th` arătau ca încă două antete. */
.woocommerce table.shop_table,
.woocommerce-orders-table,
.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
}
.woocommerce table.shop_table thead th,
.woocommerce-orders-table thead th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--cream);
  color: var(--muted);
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot th,
.woocommerce-orders-table td,
.woocommerce-orders-table tbody th { padding: 16px 14px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: middle; }
.woocommerce table.shop_table tfoot th { color: var(--muted); font-weight: 500; }
.woocommerce table.shop_table tbody tr:last-child td,
.woocommerce table.shop_table tbody tr:last-child th { border-bottom-color: var(--hairline); }
.woocommerce-account .woocommerce-orders-table__cell-order-number a { color: var(--forest); font-weight: 500; text-decoration: none; text-transform: capitalize; }
.woocommerce-orders-table__cell-order-date,
.woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.woocommerce-orders-table__cell-order-actions { text-align: right; }
.woocommerce-account .woocommerce-orders-table a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-rand);
  padding: 0 16px;
  border: 1px solid var(--forest);
  border-radius: var(--radius-pastila);
  background: transparent;
  color: var(--forest);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.woocommerce-account .woocommerce-orders-table a.button:hover { background: var(--forest); color: var(--paper); }
.woocommerce-account .woocommerce-pagination { display: flex; gap: 10px; margin-top: 16px; }

/* Adresele din cont și cele de pe pagina comenzii: cartele pereche, nu coloane flotante cu
   chenarul WooCommerce pe `address`. */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
.woocommerce-account .woocommerce-customer-details .woocommerce-column {
  float: none;
  width: auto;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--cream);
}
/* Titlul și linkul „Editează…” stau în același `<header>`; unul lângă altul nu încap într-o
   cartelă de 340px și titlul se rupea pe trei rânduri. `display: contents` scoate antetul din
   ecuație, iar linkul, devenit copil al cartelei, coboară sub adresă, ca buton de contur. */
.woocommerce-account .woocommerce-Addresses .woocommerce-Address { display: flex; flex-direction: column; align-items: flex-start; }
.woocommerce-account .woocommerce-Address-title { display: contents; }
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-customer-details .woocommerce-column__title { margin: 0 0 12px; font-size: 20px; font-weight: 500; }
.woocommerce-account .woocommerce-Address-title a.edit {
  order: 3;
  display: inline-block;
  float: none;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid var(--forest);
  border-radius: var(--radius-pastila);
  color: var(--forest);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-transform: lowercase;
}
/* „Editează Adresă de facturare” vine cu titlul în %s; `::first-letter` cere un bloc. */
.woocommerce-account .woocommerce-Address-title a.edit::first-letter { text-transform: uppercase; }
.woocommerce-account .woocommerce-Address-title a.edit:hover { background: var(--forest); color: var(--paper); }
.woocommerce-account .woocommerce .woocommerce-customer-details address { width: auto; padding: 0; border: 0; border-radius: 0; }
.woocommerce-account .woocommerce-customer-details { margin-top: 32px; }
.woocommerce-account .woocommerce-order-details__title { margin-top: 28px; }

/* Formularele contului — detalii, adresă — în cartelă, ca formularele care stau singure pe
   pagină; schimbarea parolei e o secțiune cu linie, nu un `fieldset` cu chenar de browser. */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account form .woocommerce-address-fields {
  padding: 28px 30px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
}
.woocommerce-account .woocommerce-EditAccountForm fieldset { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; }
.woocommerce-account .woocommerce-EditAccountForm legend {
  float: left;
  width: 100%;
  margin: 0 0 16px;
  padding: 24px 0 0;
  border-top: 1px solid var(--hairline);
  font-size: 20px;
  font-weight: 500;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset > .woocommerce-form-row { clear: both; }
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row > span > em { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; font-style: normal; }
.woocommerce-account .woocommerce-EditAccountForm > p:last-child,
.woocommerce-account .woocommerce-address-fields > p:last-child { margin: 10px 0 0; }

@media (min-width: 769px) {
  /* Un punct colorat înaintea stării comenzii; pe telefon celula începe cu eticheta ei
     (`data-title`), pusă de WooCommerce tot pe `::before`. */
  .woocommerce-orders-table__cell-order-status::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: var(--radius-cerc);
    background: var(--gold);
    vertical-align: 1px;
  }
  .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before { background: var(--accent); }
  .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before { background: var(--forest); }
  .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
  .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before,
  .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before { background: var(--muted); }
}
@media (max-width: 768px) {
  /* Sub pragul lor de „ecran mic” (768px), WooCommerce transformă tabelul în rânduri etichetate;
     noi facem din fiecare comandă o cartelă cu numărul ei drept titlu — `tbody th`, pe care ei
     îl ascund. Selectoarele poartă `.woocommerce` în plus ca să bată foaia lor. */
  .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; gap: 0; }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    position: static;
    margin: 0 -24px 26px;
    padding: 0 24px 12px;
    border-bottom: 1px solid var(--hairline);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none; }
  .woocommerce-MyAccount-navigation ul { flex-direction: row; gap: 6px; width: max-content; }
  .woocommerce-MyAccount-navigation li a { padding: 9px 14px; border: 1px solid var(--hairline); font-size: 13px; white-space: nowrap; }
  .woocommerce-MyAccount-navigation .is-active a { border-color: var(--forest); }
  .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; padding: 0; border: 0; }
  .woocommerce-account .woocommerce .woocommerce-orders-table { border: 0; border-radius: 0; overflow: visible; }
  .woocommerce-account .woocommerce table.shop_table_responsive tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 2px 18px 16px;
    border-radius: var(--radius);
    background: var(--cream);
  }
  .woocommerce-account .woocommerce table.shop_table_responsive tbody th { display: block; padding: 14px 0 8px; border-bottom: 1px solid var(--hairline-warm); font-size: 18px; font-weight: 500; }
  .woocommerce-account .woocommerce table.shop_table_responsive tr td { padding: 10px 0; border-bottom: 1px solid var(--hairline-warm); background: transparent; }
  .woocommerce-account .woocommerce table.shop_table_responsive tr td::before { color: var(--muted); font-weight: 500; }
  .woocommerce-account .woocommerce table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions { padding-top: 14px; border-bottom: 0; }
  .woocommerce-account .woocommerce-orders-table a.button { display: flex; width: 100%; }
  .woocommerce-account .woocommerce-Addresses,
  .woocommerce-account .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr; }
  .woocommerce-account .woocommerce-EditAccountForm,
  .woocommerce-account form .woocommerce-address-fields { padding: 22px 20px; }
}
@media (max-width: 600px) {
  .woocommerce-account form .form-row-first,
  .woocommerce-account form .form-row-last { width: 100%; float: none; }
}

/* Notificările blocurilor: perechea celor clasice de mai sus, altfel coșul și checkout-ul
   afișează banda albastră implicită a WooCommerce peste paleta magazinului.

   Regula de mai jos poartă și clasa de stare (`.is-info` etc.), nu doar numele blocului: a
   noastră era cu o clasă mai slabă decât a lor, deci fundalul rămânea albastru-pal și doar
   dunga din stânga se colora. Se vedea cel mai bine în „Contul meu”, unde WooCommerce cere
   confirmarea adresei de email: singura pată albastră din magazin. */
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-error {
  border-radius: var(--radius);
  border-color: transparent;
  border-left-width: 3px;
  background: var(--cream);
  color: var(--ink);
}
.wc-block-components-notice-banner.is-success { border-left-color: var(--accent); }
.wc-block-components-notice-banner.is-info { border-left-color: var(--forest-light); }
.wc-block-components-notice-banner.is-warning { border-left-color: var(--gold); }
.wc-block-components-notice-banner.is-error { border-left-color: var(--danger); }
.wc-block-components-notice-banner > svg { fill: currentColor; }

/* Selectorul de cantitate al blocurilor are deja chenar de la WooCommerce — un al doilea,
   pus de noi, ieșea ca o casetă în casetă. Îl atingem doar pe cel clasic, din pagina
   produsului, care chiar n-are niciunul. */
.woocommerce .quantity input.qty {
  min-height: var(--control-cartela);
  width: 76px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-mic);
  background: var(--paper);
  text-align: center;
}

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option { border-radius: var(--radius); }
.wc-block-checkout__form .wc-block-components-checkout-step { border-radius: var(--radius); }

/* Plata expresă (Apple Pay / Google Pay) stă deasupra formularului, într-o casetă WooCommerce
   cu chenar la 4px și titlu de 14px; o aliniem la cartelele checkout-ului: contur `hairline`,
   raza `baza`, titlul ca supratitlu. Butoanele sunt iframe-uri Stripe și își iau raza din
   `wc_stripe_express_checkout_params` (pluginul), dar învelișul WooCommerce al fiecăruia are
   `overflow: hidden` cu 4px, deci fără raza de aici colțurile pastilei s-ar tăia. */
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before,
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after { border-color: var(--hairline); }
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::before { border-top-left-radius: var(--radius); }
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title-container::after { border-top-right-radius: var(--radius); }
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.wc-block-components-express-payment--checkout .wc-block-components-express-payment__content {
  border-color: var(--hairline);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 16px;
}
.wc-block-components-express-payment .wc-block-components-express-payment__event-buttons > div,
.wc-block-components-express-payment .wc-block-components-express-payment__event-buttons > li { border-radius: var(--radius-pastila); }
.wc-block-components-express-payment-continue-rule { color: var(--muted); }
.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after { border-color: var(--hairline); }

/* `.at-checkout-shell` există din ziua în care checkout-ul a primit șablon propriu, dar nu
   avea nicio regulă: pagina de plată merită mai mult aer decât o pagină de listă. */
.at-checkout-shell { padding-block: 40px 90px; }

/* Paginile de conținut, 404 și mulțumirea: lățime de citit și legături vizibile. Ritmul dintre
   blocuri vine din `blockGap`-ul din theme.json, nu de aici. */
/* Pe paginile WooCommerce, `main` se lățește la 1180px ca să încapă tabelele coșului și ale
   comenzilor. Titlul paginii primea însă 1000px, iar conținutul 760px, deci „Contul meu”
   începea cu 120px mai la stânga decât textul de sub el. Titlurile marcate `alignwide` —
   coșul, magazinul — rămân late dinadins. */
.woocommerce-page .wp-block-post-title:not(.alignwide):not(.alignfull) {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}

.at-legal-shell a { text-decoration: underline; text-underline-offset: 3px; }
/* Lățimea de citit se pune pe CONTAINER, nu pe paragraf. Regula WordPress e
   `.is-layout-constrained > :where(…) { max-width: var(--wp--style--global--content-size);
   margin-left: auto !important }` — un `max-width` pus doar pe paragraf îl îngustează, iar
   marginile automate îl centrează, deci textul ajungea cu 37px la dreapta titlului. Schimbând
   variabila, toți copiii primesc aceeași lățime și rămân aliniați între ei. */
/* Doar paginile de citit se îngustează. `page.html` servește și „Contul meu”, unde stau două
   formulare alături: la 700px se înghesuie, deci paginile WooCommerce își păstrează lățimea. */
body:not(.woocommerce-page) .at-legal-shell { --wp--style--global--content-size: 700px; }

/* Titlul unei pagini de conținut e antetul ei, nu un titlu care plutește deasupra textului. */
.at-legal-shell > .wp-block-post-title,
.at-legal-shell > h1 {
  margin: 0 0 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}

/* Întrebările frecvente folosesc acordeonul paginii principale. */
.at-legal-shell .wp-block-details { border-bottom: 1px solid var(--hairline); }
.at-legal-shell .wp-block-details:first-of-type { border-top: 1px solid var(--hairline); }
.at-legal-shell .wp-block-details summary {
  padding: 22px 44px 22px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.at-legal-shell .wp-block-details summary::-webkit-details-marker,
.at-legal-shell .wp-block-details summary::marker { display: none; content: ""; }
.at-legal-shell .wp-block-details summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 22px; font-weight: 300; line-height: 1; }
.at-legal-shell details[open] summary::after { content: "–"; }
.at-legal-shell .wp-block-details > *:not(summary) { margin: 0 0 24px; padding-right: 44px; color: var(--muted); line-height: 1.6; }

/* Pagina 404: drumurile înapoi sunt butoane, nu o listă de linkuri într-un rând de text. */
.at-404-ways { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
/* Butoanele moștenesc altfel sublinierea linkurilor de conținut. */
.at-legal-shell .at-way { text-decoration: none; }
.wp-block-search__button { border-radius: var(--radius-pastila); }

@media (max-width: 720px) {
  /* Bara „rezultate / sortare” este `is-nowrap`; pe ecran mic o lăsăm să curgă. */
  .wp-block-woocommerce-product-collection .wp-block-group.is-nowrap {
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 10px;
  }
  .wc-block-product-results-count { flex: 1 1 100%; }
  .wc-block-catalog-sorting select { max-width: 100%; }
  .at-site-header { padding-inline: 20px; }
  .at-header-nav { gap: 16px; font-size: 13px; }
  .woocommerce-page main, .woocommerce main { padding-block: 36px 80px; }
}

/* Bannerul de cookie-uri: o cartelă verde închis, cu butoane-pastilă. */
.cookie-consent {
  position: fixed;
  z-index: 120;
  left: 20px;
  right: 20px;
  bottom: 20px;
  width: min(920px, calc(100% - 40px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: rgba(28, 58, 19, .97);
  color: var(--paper);
  box-shadow: var(--shadow-plutitor);
  backdrop-filter: blur(14px);
}
.cookie-consent-copy { max-width: 630px; }
.cookie-consent-copy strong { color: var(--paper); font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.cookie-consent-copy p { margin: 7px 0 6px; color: var(--on-night); font-size: 14px; line-height: 1.5; }
.cookie-consent-copy a { color: var(--lime); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-button { min-height: var(--control-rand); padding: 0 20px; border-radius: var(--radius-pastila); cursor: pointer; font-size: 14px; font-weight: 500; }
.cookie-button.secondary { border: 1px solid rgba(252, 252, 247, .4); background: transparent; color: var(--paper); }
.cookie-button.primary { border: 1px solid var(--lime); background: var(--lime); color: var(--ink); }
.cookie-settings {
  position: fixed;
  z-index: 19;
  left: 14px;
  bottom: 14px;
  padding: 9px 14px;
  border: 1px solid rgba(252, 252, 247, .26);
  border-radius: var(--radius-pastila);
  background: rgba(28, 58, 19, .9);
  color: var(--paper);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(10px);
}


/* Cinci linkuri, coșul și butonul de cumpărare încap lejer abia peste 1180px. */
@media (max-width: 1180px) {
  .header nav { gap: 20px; }
}

@media (max-width: 920px) {
  .shell { width: min(100% - 32px, 680px); }
  .header.shell { padding-inline: 16px; }
  /* Ascundem doar linkurile din bară, nu și coșul: pe telefon și pe tabletă el este
     singurul drum înapoi la comanda începută. Selectorul este pe copil direct, altfel ar
     prinde și linkurile din panoul meniului, care trăiesc tot în <nav>. */
  .header nav > a:not(.cart-link) { display: none; }
  .header nav .nav-menu { display: block; }
  .header nav { gap: 12px; }
  /* Textul rămâne primul, ca la referință: titlul e cel din reclamă, iar dala cu pachetul
     intră oricum în primul ecran, sub buton. */
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 40px 72px; }
  .hero-stage { aspect-ratio: 1; padding: 8%; }
  .hero-lead { font-size: 17px; }
  .section { padding-block: 88px; }
  .how-layout, .ingredients, .checkout-grid, .faq { grid-template-columns: 1fr; gap: 44px; }
  .how-images { order: 2; }
  .steps { order: 1; }
  .places-section { padding-block: 88px; }
  .places-grid { grid-template-columns: 1fr; gap: 28px; }
  .places-grid img { aspect-ratio: 4 / 3; }
  .product-image-wrap { max-width: 580px; margin-inline: auto; }
  .checkout-product { max-width: 650px; }
  .order-card { padding: 36px 28px; }
  .at-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .at-footer-brand { grid-column: 1 / -1; }
  .cookie-consent { align-items: stretch; flex-direction: column; gap: 16px; }
  .cookie-consent-actions { justify-content: flex-end; }
  /* Bara lipicioasă de cumpărare: o pastilă verde jos, cu prețul și un singur gest. */
  .mobile-buy {
    position: fixed;
    z-index: 20;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border: 0;
    border-radius: var(--radius-pastila);
    background: var(--forest);
    color: var(--paper);
    box-shadow: var(--shadow-plutitor);
    cursor: pointer;
  }
  .mobile-buy span { color: var(--on-night); font-size: 13px; }
  .mobile-buy strong { color: var(--paper); font-size: 15px; font-weight: 500; }
  .cookie-consent { bottom: 84px; }
  .cookie-settings { bottom: 82px; }
}

@media (max-width: 600px) {
  /* Antetul paginilor de magazin: trei linkuri, coșul și marca nu mai încap la lățimea unui
     telefon. Sub 600px trec în același meniu ca pe pagina principală. */
  .at-header-nav > a:not(.cart-link) { display: none; }
  .at-header-nav .nav-menu { display: block; }
  .topbar { font-size: 13px; }
  .brand { font-size: 18px; gap: 7px; }
  .brand-icon { width: 24px; height: 24px; }
  .nav-cta { padding: 0 14px; }
  .hero { padding-top: 24px; }
  .hero-lead { margin-top: 20px; }
  .hero-actions { margin-top: 24px; }
  .primary-button { width: 100%; }
  .trust-row { gap: 10px 16px; }
  .section-heading h2, .ingredients h2, .checkout-section h2 { font-size: 34px; }
  .how-images { gap: 10px; }
  .how-images img:last-child { margin-top: 24px; }
  .steps li { grid-template-columns: 36px 1fr; gap: 12px; }
  .steps strong { font-size: 18px; }
  .places-section { padding-block: 72px; }
  .product-image-wrap { border-radius: var(--radius); }
  .origin-stamp { top: 14px; left: 14px; }
  .ingredient-list div { grid-template-columns: 36px 1fr; }
  .ingredient-list small { grid-column: 2; }
  .checkout-section { padding-block: 72px; }
  .order-card { padding: 28px 22px; border-radius: var(--radius); }
  .stock-modal { padding: 42px 22px 28px; border-radius: var(--radius); }
  .stock-modal .primary-button { width: 100%; }
  .faq { gap: 32px; }
  .faq summary { font-size: 17px; }
  /* Loc pentru bara lipicioasă de cumpărare, care sub 920px stă fixată jos. Regula era scrisă
     pe `footer` gol, deci prindea și subsolul paginilor block, unde bara nu există: acolo lăsa
     122px de verde mort sub ultimul rând. `.mobile-buy` trăiește doar pe campanie
     (`patterns/home.php`) și pe pagina produsului (`patterns/product-trust.php`). */
  body:has(.mobile-buy) footer { padding-bottom: 122px; }
  .cookie-consent { left: 12px; right: 12px; width: calc(100% - 24px); padding: 18px; }
  .cookie-consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .primary-button, .secondary-button, .nav-cta, .cart-link, .at-way { transition: none; }
  .stock-modal-backdrop, .stock-modal { animation: none; }
}

/* Pe o pagină scurtă — legală, 404, căutare fără rezultat, coș golit — subsolul rămânea la
   jumătatea ecranului, cu o bandă de hârtie sub el: pagina părea neterminată sau ruptă.
   Învelișul block devine o coloană de cel puțin un ecran, iar subsolul își ia restul.
   `min-height` pe înveliș, nu pe `body`: pe paginile de magazin body-ul poartă clasele
   WooCommerce, iar `main` e doar unul dintre copiii lui. */
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > footer { margin-top: auto; }

/* Subsolul paginilor block folosește aceleași reguli ca al campaniei (`.at-footer*`, mai sus),
   fiindcă markup-ul e același. Aici rămâne doar ce ține de învelișul block: partea de șablon
   nu are `.shell`, deci lățimea vine din padding, ca la antet. Paddingul vertical al părții
   (`parts/footer.html`) e cel al campaniei. */
.at-footer { padding-inline: max(24px, calc((100% - 1180px) / 2)); }
main > footer.at-footer { padding-inline: 0; }