/* WooCommerce, îmbrăcat în hainele site-ului.
 *
 * Nu rescriem șabloanele lui WooCommerce. El își scoate coșul, finalizarea
 * și contul cu markup-ul lui, iar foaia asta le dă înfățișarea de pe
 * rdndata.ro. Așa magazinul merge mai departe și după ce WooCommerce se
 * schimbă — n-avem șabloane vechi care să crape la prima actualizare.
 *
 * Culorile sunt ale magazinului (--mg-*), de zi din start, fiindcă pagina
 * are fundalul alb al site-ului. Sub [data-tema="noapte"] trec toate pe
 * varianta închisă, odată cu butonul de lumină din antet.
 */

/* --- culorile magazinului ---------------------------------------------- */

/* Nocturn e desenul benzii de găzduire, și e de noapte din construcție.
   Magazinul are fundalul alb al site-ului, așa că îmbrăcat în culorile lui
   ieșea text aproape alb pe alb — exact asta s-a și întâmplat pe magazinul
   adevărat, și abia dintr-o poză s-a văzut.
   Aici magazinul își are culorile lui: de zi din start, ca site-ul, cu
   noaptea la cerere. */

.woocommerce-continut,
#content > .page,
#content > article{
  --mg-text:       #19233f;
  --mg-stins:      #55607a;
  --mg-linie:      rgba(25,35,63,.14);
  --mg-card:       #ffffff;
  --mg-camp:       #f7f8fb;
  --mg-pret:       #6239bd;
  --mg-accent:     #6239bd;
  --mg-violet:     #4a2a92;
  --mg-buton:      linear-gradient(100deg,#6239bd,#7a52d4 48%,#74c5da);
  --mg-buton-text: #ffffff;
  --mg-umbra:      0 16px 34px -16px rgba(98,57,189,.55);
  --mg-halou:      none;
  --mg-arc:        cubic-bezier(.22,.61,.36,1);
}

:root[data-tema="noapte"] .woocommerce-continut,
:root[data-tema="noapte"] #content > .page,
:root[data-tema="noapte"] #content > article{
  --mg-text:       #e9edf8;
  --mg-stins:      rgba(233,237,248,.72);
  --mg-linie:      rgba(255,255,255,.12);
  --mg-card:       rgba(255,255,255,.055);
  --mg-camp:       rgba(255,255,255,.08);
  --mg-pret:       #ffffff;
  --mg-accent:     #a6e4f2;
  --mg-violet:     #8b63e8;
  --mg-buton:      linear-gradient(100deg,#74c5da,#a6e4f2);
  --mg-buton-text: #07101a;
  --mg-umbra:      0 14px 32px -14px rgba(116,197,218,.85);
  --mg-halou:      0 0 28px rgba(116,197,218,.55);
}

/* --- rama paginilor de magazin ---------------------------------------- */

.woocommerce-continut{
  max-width: 1170px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  color: var(--mg-text);
  /* Nimic din magazin n-are voie să împingă pagina în lături. „clip", nu
     „hidden": „hidden" ar strica orice element lipit cu position:sticky. */
  overflow-x: clip;
}
@supports not (overflow-x: clip){ .woocommerce-continut{ overflow-x: hidden; } }

/* Aceeași pază și un pas mai sus, numai pe paginile de magazin: dacă un
   plugin sau o bucată de markup pe care n-o știm iese în lături, pagina se
   taie, nu se strâmbă. Antetul și subsolul rămân neatinse. */
body.woocommerce #main,
body.woocommerce-page #main{ overflow-x: clip; }
@supports not (overflow-x: clip){
  body.woocommerce #main,
  body.woocommerce-page #main{ overflow-x: hidden; }
}

/* nimic nu iese din celula lui de grilă */
.woocommerce-continut *{ min-width: 0; }
.woocommerce-continut img,
.woocommerce-continut select,
.woocommerce-continut input,
.woocommerce-continut table{ max-width: 100%; }

.woocommerce-continut h1,
.woocommerce-continut h2,
.woocommerce-continut h3{ color: var(--mg-text); }

.woocommerce-continut a{ color: var(--mg-accent); }
.woocommerce-continut a:hover{ color: var(--mg-violet); }

/* --- mesajele ---------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 20px;
  border-radius: 10px;
  border-left: 4px solid var(--mg-accent);
  background: var(--mg-card);
  color: var(--mg-text);
  font-size: 15px;
  line-height: 1.5;
}
.woocommerce-error{ border-left-color: #e0637a; }
.woocommerce-message{ border-left-color: #5fbf8a; }
.woocommerce-message .button,
.woocommerce-info .button{ float: right; margin-left: 16px; }

/* --- butoanele --------------------------------------------------------- */

.woocommerce-continut .button,
.woocommerce-continut button.button,
.woocommerce-continut input.button,
.woocommerce-continut a.button,
.woocommerce-continut .checkout-button,
.woocommerce-continut #place_order{
  display: inline-block;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--mg-buton);
  box-shadow: var(--mg-umbra);
  color: var(--mg-buton-text);
  font-family: 'Open Sans', Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--mg-arc), box-shadow .18s var(--mg-arc);
}
.woocommerce-continut .button:hover,
.woocommerce-continut button.button:hover,
.woocommerce-continut input.button:hover,
.woocommerce-continut a.button:hover,
.woocommerce-continut .checkout-button:hover,
.woocommerce-continut #place_order:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -14px rgba(116,197,218,.9);
  color: var(--mg-buton-text);
}
.woocommerce-continut .button:disabled,
.woocommerce-continut .button.disabled{ opacity: .5; transform: none; cursor: default; }

/* butonul de mai departe, mai șters: nu e drumul principal */
.woocommerce-continut .button[name="update_cart"],
.woocommerce-continut .wc-backward{
  background: none;
  border: 1px solid var(--mg-linie);
  box-shadow: none;
  color: var(--mg-stins);
}

/* --- tabelul coșului --------------------------------------------------- */

.woocommerce-cart-form__contents,
.shop_table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
}
.shop_table th,
.shop_table td{
  padding: 16px 12px;
  border-bottom: 1px solid var(--mg-linie);
  text-align: left;
  vertical-align: middle;
}
.shop_table th{
  font-family: Teko, 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mg-stins);
}
.shop_table .product-thumbnail{ width: 72px; }
.shop_table .product-thumbnail img{ width: 64px; height: auto; border-radius: 8px; }
.shop_table .product-name a{ font-size: 16px; text-decoration: none; }
.shop_table .product-price,
.shop_table .product-subtotal,
.shop_table .amount{ font-variant-numeric: tabular-nums; }
.shop_table .product-remove a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mg-camp);
  color: var(--mg-stins);
  font-size: 16px; line-height: 1; text-decoration: none;
}
.shop_table .product-remove a:hover{ background: #e0637a; color: #fff; }

.quantity input.qty{
  width: 64px;
  padding: 8px;
  border: 1px solid var(--mg-linie);
  border-radius: 8px;
  background: var(--mg-camp);
  color: var(--mg-text);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- totalurile și finalizarea ----------------------------------------- */

.cart_totals,
.woocommerce-checkout-review-order,
#order_review{
  padding: 24px;
  border-radius: 14px;
  background: var(--mg-card);
  border: 1px solid var(--mg-linie);
}
.cart_totals h2,
#order_review_heading{
  margin-top: 0;
  font-family: Teko, sans-serif;
  font-size: 30px;
  letter-spacing: 1px;
}
.cart_totals .order-total .amount,
#order_review .order-total .amount{
  color: var(--mg-pret);
  font-size: 24px;
  font-weight: 700;
  text-shadow: var(--mg-halou);
}
.wc-proceed-to-checkout{ margin-top: 20px; }
.wc-proceed-to-checkout .checkout-button{ display: block; text-align: center; }

/* --- formularele ------------------------------------------------------- */

.woocommerce-continut .form-row{ margin-bottom: 18px; }
.woocommerce-continut label{
  display: block;
  margin-bottom: 6px;
  color: var(--mg-stins);
  font-size: 14px;
}
.woocommerce-continut input[type="text"],
.woocommerce-continut input[type="email"],
.woocommerce-continut input[type="tel"],
.woocommerce-continut input[type="password"],
.woocommerce-continut input[type="number"],
.woocommerce-continut textarea,
.woocommerce-continut select,
.woocommerce-continut .select2-container .select2-selection{
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--mg-linie);
  border-radius: 10px;
  background: var(--mg-camp);
  color: var(--mg-text);
  font-size: 15px;
  line-height: 1.4;
}
.woocommerce-continut input:focus,
.woocommerce-continut textarea:focus,
.woocommerce-continut select:focus{
  outline: 2px solid var(--mg-accent);
  outline-offset: 1px;
}
.woocommerce-continut .required{ color: #e0637a; }

#customer_details{ display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }

/* --- lista de produse -------------------------------------------------- */

/* WooCommerce își pune produsele pe float, la 22,05% lățime, cu regula
   „.woocommerce ul.products li.product". Asta cântărește două clase și un
   element; un „ul.products li.product" de-al nostru cântărește mai puțin și
   pierde. De aici ieșeau cardurile înguste, cu înălțimi diferite și cu
   butoanele ieșind peste vecin.
   Scriem la aceeași greutate ca el și îi desfacem float-ul pe față. */

.woocommerce ul.products,
.woocommerce-page ul.products{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
/* clearfix-ul lui n-are ce curăța într-o grilă, și lasă un rând gol */
.woocommerce ul.products::after,
.woocommerce ul.products::before{ content: none; }

/* Pe ecran lat ținem numărul de coloane cerut din WooCommerce (Aspect →
   Personalizare → WooCommerce). Mai jos de 1100px lăsăm grila să se
   descurce singură, ca să nu iasă coloane de-o șchioapă. */
@media (min-width: 1100px){
  .woocommerce ul.products.columns-1{ grid-template-columns: minmax(0, 1fr); }
  .woocommerce ul.products.columns-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woocommerce ul.products.columns-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .woocommerce ul.products.columns-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .woocommerce ul.products.columns-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .woocommerce ul.products.columns-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Selectorul poartă și „[class*=columns-]" fiindcă WooCommerce scrie
   „.woocommerce ul.products.columns-3 li.product{width:30.75%}" — asta
   cântărește trei clase, mai mult decât „.woocommerce ul.products
   li.product". Fără el, lățimea lui se aplica înăuntrul celulei de grilă
   și ieșeau carduri de 83px. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product{
  float: none;
  clear: none;
  width: auto;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--mg-card);
  border: 1px solid var(--mg-linie);
  text-align: center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link{
  display: flex;
  flex-direction: column;
  flex: 1;
}
.woocommerce ul.products li.product a img{
  width: auto;
  max-width: 100%;
  max-height: 140px;
  margin: 0 auto 14px;
  object-fit: contain;
}

.woocommerce ul.products li.product a{ color: inherit; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: Teko, 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .5px;
  margin: 0 0 10px;
  padding: 0;
  color: var(--mg-text);
  overflow-wrap: break-word;
}

/* „auto" sus: prețul se lipește de talpa legăturii, deci toate prețurile
   de pe un rând ies la aceeași înălțime, chiar dacă un titlu se rupe pe
   două rânduri. */
.woocommerce ul.products li.product .price{
  display: block;
  margin: auto 0 16px;
  color: var(--mg-pret);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .price del{ opacity: .6; font-size: .8em; }

/* Butonul se lipește de talpa cardului, iar cardurile ies toate la fel de
   înalte oricât de lung ar fi un titlu. Lățime întreagă: altfel textul lung
   („Adaugă în coș") îl umfla peste marginea cardului. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button{
  margin: auto 0 0;
  width: 100%;
  padding: 12px 10px;
  float: none;
  white-space: normal;
  font-size: 13px;
}

/* --- rândul de categorii ----------------------------------------------- */

/* Cu 46 de produse într-o listă, omul nu găsește nimic. Rândul ăsta îi dă
   drumul drept la ce caută. Se înfășoară singur pe telefon. */
.rdn-categorii{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.rdn-categorii .rdn-categorie{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--mg-linie);
  border-radius: 999px;
  background: var(--mg-card);
  color: var(--mg-text);
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .18s var(--mg-arc), background .18s var(--mg-arc);
}
.rdn-categorii .rdn-categorie:hover{ border-color: var(--mg-accent); color: var(--mg-text); }
.rdn-categorii .rdn-categorie--acum{
  background: var(--mg-buton);
  border-color: transparent;
  color: var(--mg-buton-text);
}
.rdn-categorii .rdn-categorie-cate{
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--mg-camp);
  color: var(--mg-stins);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rdn-categorie--acum .rdn-categorii .rdn-categorie-cate{
  background: rgba(255,255,255,.22);
  color: inherit;
}

/* --- rândul de deasupra listei ----------------------------------------- */

/* Câte rezultate, și rânduirea. WooCommerce le pune pe float una la stânga
   și alta la dreapta; pe un ecran îngust asta le suprapune sau le împinge
   afară din pagină. Le facem un rând care se înfășoară. */
/* Rânduirea o lăsăm la dreapta, cum o pune WooCommerce — nu-i desfacem
   float-ul, fiindcă aici chiar ne trebuie. Îl desfacem doar pe telefon,
   mai jos, unde cele două n-ar încăpea pe același rând. */
.woocommerce .woocommerce-result-count{
  float: none;
  margin: 0;
  line-height: 44px;
}
.woocommerce .woocommerce-ordering{
  margin: 0;
  max-width: 100%;
}
.woocommerce-continut .woocommerce-result-count{
  color: var(--mg-stins);
  font-size: 14px;
}
.woocommerce .woocommerce-ordering select{
  width: 100%;
  max-width: 260px;
  min-width: 0;
}

@media (max-width: 759px){
  .woocommerce .woocommerce-ordering{
    float: none;
    display: block;
    margin-bottom: 14px;
  }
  .woocommerce .woocommerce-result-count{ line-height: 1.5; margin-bottom: 10px; }
  .woocommerce .woocommerce-ordering select{ max-width: none; }
}

/* --- paginarea --------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination{
  margin: 36px 0 0;
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.woocommerce nav.woocommerce-pagination ul li{
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--mg-linie);
  border-radius: 12px;
  background: var(--mg-card);
  color: var(--mg-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{ border-color: var(--mg-accent); }
.woocommerce nav.woocommerce-pagination ul li span.current{
  background: var(--mg-buton);
  border-color: transparent;
  color: var(--mg-buton-text);
  font-weight: 700;
}

/* --- pagina de produs -------------------------------------------------- */

/* Aici WooCommerce taie pagina în două coloane de 48% pe float. Poza umplea
   coloana și ieșea cât jumătate de ecran, iar textul era împins alături și
   tăiat. O facem grilă, cu poza mărginită. */
.woocommerce div.product,
.woocommerce-page div.product{
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 20px 48px;
  align-items: start;
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary{
  float: none;
  width: auto;
  margin: 0;
}
.woocommerce div.product div.images img{
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 14px;
}
/* ce vine sub cele două coloane ține toată lățimea */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-product-gallery__wrapper > :not(:first-child){
  grid-column: 1 / -1;
}

.woocommerce div.product .product_title{
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  margin: 0 0 18px;
  color: var(--mg-pret);
  font-size: 32px;
  font-weight: 700;
  text-shadow: var(--mg-halou);
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product form.cart{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0;
}
.woocommerce div.product form.cart::after{ content: none; }
.woocommerce div.product form.cart div.quantity{ float: none; margin: 0; }
.woocommerce div.product form.cart .button{ float: none; margin: 0; }
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-Tabs-panel p{
  max-width: 62ch;
  color: var(--mg-stins);
}
.woocommerce div.product .product_meta{
  color: var(--mg-stins);
  font-size: 14px;
  border-top: 1px solid var(--mg-linie);
  padding-top: 16px;
}

/* filele de sub produs */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--mg-linie);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{ margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display: inline-block;
  padding: 10px 18px;
  text-decoration: none;
  font-family: Teko, sans-serif;
  font-size: 19px;
  letter-spacing: 1px;
}
.woocommerce div.product .related > h2,
.woocommerce div.product .woocommerce-tabs h2{
  font-family: Teko, sans-serif;
  letter-spacing: 1px;
}

/* --- contul ------------------------------------------------------------ */

.woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0 0 24px; padding: 0; }
.woocommerce-MyAccount-navigation li{ display: inline-block; margin: 0 6px 6px 0; }
.woocommerce-MyAccount-navigation a{
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--mg-camp);
  text-decoration: none;
  font-size: 14px;
}
.woocommerce-MyAccount-navigation .is-active a{
  background: var(--mg-buton);
  color: var(--mg-buton-text);
}

/* --- pe telefon -------------------------------------------------------- */

@media (max-width: 900px){
  #customer_details{ grid-template-columns: 1fr; }
  .woocommerce div.product,
  .woocommerce-page div.product{ grid-template-columns: 1fr; gap: 24px; }
  .woocommerce div.product div.images img{ max-width: 320px; margin: 0 auto; }
  .woocommerce .woocommerce-ordering{ float: none; display: block; margin-top: 12px; }
  .woocommerce .woocommerce-ordering select{ width: 100%; }
}

@media (max-width: 640px){
  .woocommerce-continut{ padding: 24px 16px 56px; }

  /* Tabelul coșului nu se strânge pe lățimea unui telefon: patru coloane
     pe 390px dau coloane de 80px, în care numele produsului se rupe la
     fiecare literă. Îl desfacem în cartonașe, cu numele coloanei în față. */
  .shop_table thead{ display: none; }
  .shop_table,
  .shop_table tbody,
  .shop_table tr,
  .shop_table td{ display: block; width: 100%; }
  .shop_table tr{
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--mg-linie);
    border-radius: 12px;
    background: var(--mg-card);
    position: relative;
  }
  .shop_table td{
    border: 0;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .shop_table td::before{
    content: attr(data-title);
    color: var(--mg-stins);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .shop_table td.product-remove{ position: absolute; top: 10px; right: 10px; padding: 0; }
  .shop_table td.product-remove::before{ content: none; }
  .shop_table td.product-thumbnail{ justify-content: flex-start; }
  .shop_table td.product-thumbnail::before{ content: none; }
  .shop_table td.actions{ display: block; }
  .shop_table td.actions .button{ width: 100%; margin-top: 8px; }

  .woocommerce-continut .button{ width: 100%; text-align: center; }

  .woocommerce ul.products,
  .woocommerce-page ul.products{
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }
  .woocommerce ul.products li.product{ padding: 14px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__link{
  display: flex;
  flex-direction: column;
  flex: 1;
}
.woocommerce ul.products li.product a img{ max-height: 90px; }
  .woocommerce ul.products li.product a{ color: inherit; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size: 20px; }
  .woocommerce ul.products li.product .price{ font-size: 18px; margin-bottom: 12px; }
  .woocommerce-message .button,
  .woocommerce-info .button{ float: none; margin: 10px 0 0; }
}

/* --- titlurile paginilor de magazin ------------------------------------ */

/* Pe site titlul de pagină e ascuns cu totul, iar h1 e pus la 90px pentru
   titlurile mari din benzi. Pe o pagină de coș, 90px strigă și dă pe
   dinafară la lățimea unui telefon. Le aducem la o măsură de citit. */
#content .entry-title,
.woocommerce-continut h1,
.woocommerce-products-header__title{
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.12;
  margin: 0 0 24px;
}
#content h2, .woocommerce-continut h2{ font-size: clamp(24px, 5vw, 34px); line-height: 1.15; margin: 32px 0 16px; }
#content h3, .woocommerce-continut h3{ font-size: clamp(20px, 4vw, 26px); line-height: 1.2; margin: 24px 0 12px; }
#content p, .woocommerce-continut p{ font-size: 16px; line-height: 1.65; }

/* Un titlu lung nu se taie: se rupe și trece pe rândul următor. Fonturile
   de titlu sunt late, iar „dumneavoastră" nu încape pe 390px. */
#content h1, #content h2, #content h3, #content h4,
.woocommerce-continut h1, .woocommerce-continut h2,
.woocommerce-continut h3, .woocommerce-continut h4{
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Paginile obișnuite ale magazinului (termeni, retur) folosesc aceeași
   ramă ca cele de WooCommerce, ca lățimea textului să fie una singură. */
#content > .page,
#content > article{
  max-width: 1170px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}