/* =========================================================
   Florarie Pitesti - design modernizat, responsive (2026)
   Pastreaza clasele HTML originale; rescrie complet stilul.
   ========================================================= */

:root {
  --clr-primary: #4a7c3f;
  --clr-primary-dark: #365c2d;
  --clr-accent: #d9587a;
  --clr-accent-dark: #b8425f;
  --clr-text: #2b2b2b;
  --clr-text-muted: #6f6f6f;
  --clr-bg: #faf8f4;
  --clr-surface: #ffffff;
  --clr-border: #e6e1d6;
  --clr-price: #4a7c3f;
  --clr-price-old: #a3a3a3;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
  --shadow-hover: 0 8px 22px rgba(0,0,0,.12);
  --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Segoe UI', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--clr-bg);
  min-height: 100%;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--clr-text);
  line-height: 1.55;
}

div.content {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  min-height: 100%;
  background: var(--clr-surface);
  box-shadow: var(--shadow);
  overflow-x: hidden;
}

img, form, ul { border: 0; padding: 0; list-style: none; margin: 0; }
img { max-width: 100%; height: auto; }

.clear { clear: both; font-size: 1px; line-height: 0; }
.left { float: left; }
.right { float: right; }
.center { text-align: center; }
.strong { font-weight: 700; }

a { color: inherit; }

h1, h2 { font-family: var(--font-heading); }

/* ===================== HEADER ===================== */

.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--clr-border);
  gap: 10px;
}

h1 {
  background: url("../imagini/florarie-pitesti.png") no-repeat left center;
  background-size: contain;
  width: 190px;
  height: 52px;
  display: block;
  margin: 0;
  cursor: pointer;
  float: none;
}

h1 span { visibility: hidden; overflow: hidden; position: absolute; }

/* LOGO_MOBILE_CENTERED_50PCT */
/* Logo centrat orizontal si 50% mai mare pe mobil (baza mobil: 190x52 -> 285x78).
   Logo-ul e deja singur pe randul lui in header (flex-wrap), deci margin auto
   il centreaza orizontal fara sa afecteze restul header-ului. */
@media (max-width: 899px) {
  div.header h1 {
    width: 285px;
    height: 78px;
    margin: 0 auto;
  }
}


.header .right {
  float: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

div.moneda {
  background: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--clr-text-muted);
}

div.moneda select.select_moneda {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--clr-text);
  width: auto;
  margin: 0;
  padding: 4px 6px;
  background: var(--clr-surface);
}

/* HIDE_CURRENCY_SELECTOR_SITEWIDE */
/* div.moneda e in includes/header.php, deci apare pe toate paginile;
   il ascundem global cu CSS (nu stergem PHP-ul) ca sa fie usor reversibil
   si sa nu afectam logica de sesiune/calcul pret existenta. */
div.moneda {
  display: none;
}

div.cos_cumparaturi {
  width: auto;
  height: auto;
  margin: 0;
  background: var(--clr-primary);
  border-radius: 999px;
  padding: 8px 16px;
  display: block;
}

div.cos_cumparaturi a {
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

div.cos_cumparaturi a img { filter: brightness(0) invert(1); width: 9px; }

div.cos_cumparaturi p {
  margin: 2px 0 0;
  padding: 0;
  font-size: 11px;
  color: rgba(255,255,255,.85);
  text-align: center;
}

/* ===================== MENIU PRINCIPAL ===================== */

.menu-toggle {
  display: none;
  width: 100%;
  background: var(--clr-primary-dark);
  color: #fff;
  border: 0;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}

div.meniu {
  background: var(--clr-primary);
  width: 100%;
  margin: 0;
}

div.meniu div.meniu_st,
div.meniu div.meniu_dr { display: none; }

div.meniu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
}

div.meniu ul li { float: none; margin: 0; }

div.meniu ul li a {
  color: #fff;
  font-family: var(--font-body);
  width: auto;
  height: auto;
  display: block;
  text-decoration: none;
  line-height: normal;
  text-align: center;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: background .15s;
}

div.meniu ul li a:hover { background: rgba(255,255,255,.15); }

/* ===================== SUB-MENIU (categorii + bara secundara) ===================== */

div.sub_meniu {
  background: #f8f8f6;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--clr-border);
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

div.deasupra_footer {
  background: #f8f8f6;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid var(--clr-border);
  width: 100%;
  margin: 0;
  padding: 4px 10px;
}

div.sub_meniu span.data {
  float: none;
  flex-shrink: 0;
  order: 2;
  font-size: 12px;
  color: var(--clr-text-muted);
  margin: 0;
  line-height: 30px;
  white-space: nowrap;
}

div.sub_meniu > div.clear {
  display: none;
}

ul.meniu_secundar {
  margin: 0;
  padding: 0;
  display: inline-flex;
  overflow-x: auto;
  max-width: 100%;
  order: 1;
}

@media (min-width: 900px) {
  ul.meniu_secundar {
    overflow: visible;
  }
}

ul.meniu_secundar li { float: none; position: relative; flex: 0 0 auto; }

ul.meniu_secundar li a {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-muted);
  text-decoration: none;
  margin: 0;
  padding: 0 16px;
  line-height: 32px;
  display: block;
}

ul.meniu_secundar li a:hover { color: var(--clr-primary); }

ul.meniu_secundar li ul.submeniu {
  display: none;
  height: auto;
  position: absolute;
  z-index: 20;
  margin: 0;
  padding: 0;
  white-space: normal;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}

ul.meniu_secundar li:hover ul.submeniu { display: block; width: 170px; margin: 0; }

ul.meniu_secundar li ul.submeniu li {
  display: block; float: none; font-size: 12px;
  background: transparent; border: 0; text-align: left; padding: 0; margin: 0;
}

ul.meniu_secundar li ul.submeniu li.jos { display: none; }

ul.meniu_secundar li ul.submeniu a {
  display: block; color: var(--clr-text-muted); font-size: 12px;
  padding: 8px 12px; text-align: left; font-weight: 500; line-height: 18px;
  height: auto; width: auto; margin: 0;
}

ul.meniu_secundar li ul.submeniu a:hover { background: #f2f2ec; color: var(--clr-primary); }

/* MOBILE_SUBMENIU_TOGGLE_CSS */
@media (max-width: 899px) {
  ul.meniu_secundar li > a {
    position: relative;
    padding-right: 22px;
  }
  ul.meniu_secundar li > a::after {
    content: "\25BE";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
  }
  ul.meniu_secundar li ul.submeniu {
    display: none;
    position: fixed;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 60vh;
    overflow-y: auto;
  }
  ul.meniu_secundar li:hover ul.submeniu {
    display: none;
  }
  ul.meniu_secundar li.open ul.submeniu {
    display: block;
  }
}

.sub_meniu_ingusta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px; overflow: visible; white-space: normal; }

/* HIDE_ORDER_SEARCH_BAR_PRODUCT_PAGE */
/* div.informatii_floare exista numai pe pagina de produs (nu pe homepage/categorii),
   deci il folosim ca selector de scop pentru a ascunde caseta de verificare comanda
   (email + ID comanda + Verifica) si caseta de cautare, doar acolo. */
body:has(div.informatii_floare) div.sub_meniu_ingusta {
  display: none;
}
.sub_meniu_ingusta form { display: flex; gap: 6px; flex-wrap: wrap; }

/* ===================== HOMEPAGE - CATEGORII SUS ===================== */

div.categorii_sus {
  width: auto;
  margin: 0;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

div.categorii_sus > * { min-width: 0; }

div.categorii_sus div.coloana { width: auto; float: none; height: auto; border-top: 0; }

div.coloana ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

div.coloana ul li {
  height: auto; min-height: 88px; width: auto; display: block;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  transition: box-shadow .2s, transform .2s;
}

div.coloana ul li:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

div.coloana ul li a {
  font-size: 15px; font-weight: 700; color: var(--clr-text);
  display: block; text-decoration: none; padding: 0 0 6px 0;
}

div.coloana ul li span {
  font-size: 12px; font-weight: 400; color: var(--clr-text-muted);
  padding: 0; display: block;
}

div.categorii_sus > div.clear { display: none; }

div.categorii_sus div.floare_centru {
  width: auto; height: auto; float: none; border: 1px solid var(--clr-border);
  border-radius: var(--radius); padding: 18px; background: var(--clr-surface);
  box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: 18px;
}

div.floare_centru img.left { float: none; width: 100%; max-width: 260px; margin: 0 auto; border-radius: 8px; display: block; }

div.floare_centru div.info { width: auto; background: none; float: none; flex: 1; min-width: 220px; }

div.info a.titlu {
  font-size: 22px; color: var(--clr-text); font-family: var(--font-heading);
  letter-spacing: normal; margin: 6px 0; padding: 0; text-decoration: none; display: block; font-weight: 600;
}

div.info span.redus { color: var(--clr-price-old); font-size: 14px; text-decoration: line-through; }
div.info span.pret { color: var(--clr-price); font-size: 17px; font-weight: 700; }

div.info p { color: var(--clr-text-muted); font-size: 13px; margin: 12px 0 0; line-height: 1.5; }

a.buton {
  width: auto; height: auto; line-height: normal; color: #fff !important;
  text-align: center; font-size: 13px; font-weight: 700; text-decoration: none;
  background: var(--clr-accent); display: inline-block; margin: 16px 0 0;
  padding: 11px 22px; border-radius: var(--radius-sm); transition: background .2s, transform .2s;
}

a.buton:hover { background: var(--clr-accent-dark); transform: translateY(-1px); }

/* HIDE_QUICK_ADD_TO_CART_CARDS */
/* class="buton" (OfertaHome) si class="buton_albastru" (DisplayFloareMica) sunt folosite
   DOAR pentru butoanele rapide "Adauga in cos" de pe cardurile de produs (homepage,
   categorii, cautare, Flori inrudite, Ultimele vizitate) - niciodata pentru alte butoane.
   Butonul real de pe pagina de produs (div.buton_comanda input[type=submit]) e cu totul
   alta structura HTML si NU e afectat de aceasta regula. */
a.buton,
a.buton_albastru {
  display: none;
}

/* ===================== PAGINA / CONTAINER GENERIC ===================== */

div.pagina {
  margin: 16px; width: auto; background: var(--clr-surface);
  border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 6px;
}

div.info_cat {
  border-bottom: 2px solid var(--clr-border); margin: 0; width: auto;
  padding: 12px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}

div.info_cat a.titlu_categorie {
  text-decoration: none; font-size: 21px; color: var(--clr-text);
  font-family: var(--font-heading); font-weight: 600; letter-spacing: normal; padding-left: 0;
}

div.info_cat div.descriere_cat {
  text-decoration: none; font-size: 13px; color: var(--clr-text-muted);
  font-family: var(--font-body); margin: 0; width: auto; float: none; flex-basis: 100%;
}

/* ===================== LISTARE PRODUSE (grid) ===================== */

ul.flori {
  margin: 0; padding: 14px; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 14px;
}

ul.flori li {
  float: none; padding: 12px; margin: 0; width: auto; display: block;
  border: 1px solid var(--clr-border); border-radius: var(--radius);
  text-align: center; background: var(--clr-surface);
  box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s;
}

ul.flori li.border { border: 1px solid var(--clr-border); }

ul.flori li:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }

ul.flori li a {
  font-size: 13px; color: var(--clr-text); font-family: var(--font-body);
  font-weight: 600; display: block; text-align: center; text-decoration: none;
}

ul.flori li img { border-radius: var(--radius-sm); margin-bottom: 8px; }

ul.flori li span.redus { color: var(--clr-price-old); font-size: 12px; text-decoration: line-through; }
ul.flori li span.pret { color: var(--clr-price); font-size: 15px; font-weight: 700; }

ul.flori li a.buton_albastru {
  width: 100%; max-width: 170px; height: auto; line-height: normal;
  color: #fff; text-align: center; font-size: 12px; font-weight: 700;
  text-decoration: none; background: var(--clr-primary); display: block;
  margin: 10px auto 0; padding: 8px 10px; border-radius: var(--radius-sm);
  transition: background .2s;
}

ul.flori li a.buton_albastru:hover { background: var(--clr-primary-dark); }

/* HIDE_QUICK_ADD_TO_CART_CARDS_SPECIFIC */
/* regula "ul.flori li a.buton_albastru" de mai sus are specificitate mai mare decat
   regula generica "a.buton_albastru { display:none; }" adaugata anterior (marcaj
   HIDE_QUICK_ADD_TO_CART_CARDS), deci o suprascria (display:block a castigat).
   Adaugam aceeasi specificitate, dupa ea in sursa, ca sa ascundem efectiv butonul. */
ul.flori li a.buton_albastru {
  display: none;
}

/* ===================== FOOTER ===================== */

div.footer {
  background: var(--clr-primary); width: 100%; margin: 0; padding: 6px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
}

div.footer div.footer_st, div.footer div.footer_dr { display: none; }

div.footer div.copyright { font-size: 12px; color: #fff; line-height: 1.6; order: 2; }
div.copyright a { text-decoration: underline; color: #fff; font-size: 12px; }

div.footer ul.meniu_jos { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; order: 1; }
div.footer > div.clear { display: none; }

ul.meniu_jos li { float: none; font-size: 12px; color: #fff; margin: 0; line-height: 30px; }

ul.meniu_jos li a { text-decoration: none; color: #fff; margin: 0 2px; font-size: 12px; }
ul.meniu_jos li a:hover { text-decoration: underline; }

/* ===================== MESAJE / ERORI ===================== */

div.eroare {
  font-size: 15px; font-weight: 700; padding: 16px; margin: 16px;
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  color: var(--clr-text-muted); text-align: center;
}

div.mesaj_sus {
  font-size: 14px; font-weight: 700; padding: 16px; margin: 10px;
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  color: var(--clr-text); text-align: center; line-height: 1.6; cursor: pointer;
}

div.mesaj_sus:hover { border-color: var(--clr-accent); color: var(--clr-accent-dark); }

/* ===================== PAGINA PRODUS ===================== */

div.imagine { width: 100%; max-width: 300px; margin: 16px auto; float: none; }

div.imagine ul.thumbs { margin: 10px 0; display: flex; justify-content: center; gap: 6px; }

ul.thumbs li { float: none; margin: 0; }
ul.thumbs img { border: 1px solid var(--clr-border); border-radius: var(--radius-sm); }

div.informatii_floare { width: auto; float: none; padding: 0 16px 16px; }

div.informatii_floare h2 {
  font-size: 22px; font-weight: 600; color: var(--clr-text); margin: 8px 0 6px; padding: 0;
}

div.informatii_floare p.pret_1 { font-size: 14px; font-weight: 700; color: var(--clr-price-old); margin: 2px 0 4px; padding: 0; }
div.informatii_floare p.pret_2 { font-size: 18px; font-weight: 700; color: var(--clr-price); margin: 2px 0 16px; padding: 0; }
div.informatii_floare span.descriere { font-size: 13px; color: var(--clr-text-muted); }

div.preturi_floare {
  padding: 14px; margin: 16px 0; border: 1px solid var(--clr-border);
  border-radius: var(--radius); color: var(--clr-text-muted);
}

div.preturi_floare p.titlu_preturi { font-size: 13px; color: var(--clr-text); margin: 0 0 8px; padding: 0; font-weight: 700; }
div.preturi_floare div.pret { font-size: 13px; color: var(--clr-text-muted); margin: 6px 0; }
div.pret input { margin: 0 4px 0 0; padding: 0; }

div.buton_comanda { margin: 16px 0 0; text-align: right; }

div.buton_comanda input {
  width: auto; height: auto; background: var(--clr-accent); line-height: normal;
  font-size: 14px; font-weight: 700; color: #fff; padding: 12px 22px;
  border: 0; border-radius: var(--radius-sm); text-align: center; cursor: pointer;
  transition: background .2s;
}

div.buton_comanda input:hover { background: var(--clr-accent-dark); }

ul.listare_cadouri { display: flex; flex-wrap: wrap; gap: 8px; }
ul.listare_cadouri li { float: none; width: 110px; margin: 0; }

ul.listare_cadouri div.info_cadou { margin: 4px 0; padding: 6px; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); }
ul.listare_cadouri p.denumire_cadou { margin: 0; padding: 0; font-size: 11px; color: var(--clr-text-muted); }
ul.listare_cadouri p.pret_cadou { margin: 0; padding: 0; font-size: 11px; color: var(--clr-price); font-weight: 700; }

div.culori { margin: 10px 0; }
div.culori select { width: 130px; color: var(--clr-text); font-size: 13px; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: 4px; }

/* PRODUCT_OPTIONS_FLUID_LAYOUT */
/* Inlocuieste layout-ul vechi bazat pe float (class="right" pe buton_comanda/culori)
   cu un rand flex curat: Marime | Culoare | Buton. Se aplica DOAR pe blocul de
   optiuni al produsului (clasa noua "optiuni_comanda" adaugata in floare.php),
   nu si pe blocul de Cadouri, care foloseste tot div.preturi_floare. */
/* PRODUCT_OPTIONS_FLEX_GROWTH_FIX */
/* PRODUCT_OPTIONS_PADDING_MATH_FIX */
div.preturi_floare.optiuni_comanda {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

div.preturi_floare.optiuni_comanda .marime_grup {
  flex: 0 1 195px;
  max-width: 300px;
  margin: 0;
}

div.preturi_floare.optiuni_comanda div.culori {
  flex: 0 1 145px;
  margin: 0;
}

div.preturi_floare.optiuni_comanda div.culori select {
  width: 100%;
}

div.preturi_floare.optiuni_comanda div.buton_comanda {
  margin: 0;
  text-align: left;
  flex: 0 0 auto;
}

@media (max-width: 899px) {
  div.preturi_floare.optiuni_comanda {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  div.preturi_floare.optiuni_comanda div.culori select {
    width: 100%;
  }
  div.preturi_floare.optiuni_comanda div.buton_comanda input {
    width: 100%;
  }
}

div.continut_buchet { padding: 14px; margin: 16px 0; color: var(--clr-text-muted); border: 1px solid var(--clr-border); border-radius: var(--radius); }
div.continut_buchet p.titlu_continut { font-size: 13px; color: var(--clr-text); margin: 0 0 8px; padding: 0; font-weight: 700; }

div.continut { padding-left: 0; }
div.continut p { font-size: 13px; font-weight: 700; color: var(--clr-text-muted); }
div.continut span { font-size: 13px; color: var(--clr-text-muted); padding-left: 3px; }
div.continut a { font-size: 13px; color: var(--clr-price); text-decoration: none; font-weight: 700; }
div.continut a:hover { text-decoration: underline; }
div.continut span.val { font-size: 13px; color: var(--clr-price); text-decoration: none; font-weight: 700; padding: 0; margin: 0; }

/* PRODUCT_PAGE_REORDER_CARE_SECTION */
/* acum e o sectiune de sine statatoare sub cele doua coloane (foto + info),
   nu mai e ingesuita in coloana foto - stil de card, ca div.continut_buchet */
div.detalii_ingrijire {
  text-align: left; margin: 16px 0; padding: 14px;
  border: 1px solid var(--clr-border); border-radius: var(--radius);
  clear: both;
}
div.detalii_ingrijire p { font-size: 14px; font-weight: 700; color: var(--clr-text); margin: 4px 0 6px; padding: 0; border-bottom: 1px solid var(--clr-border); }
div.detalii_ingrijire span { font-size: 13px; color: var(--clr-text-muted); }

div.info_categorie { margin: 10px; padding: 6px; display: flex; flex-wrap: wrap; gap: 14px; }
div.info_categorie div.poza { width: 100%; max-width: 285px; text-align: center; float: none; }
div.info_categorie img { border: 2px solid var(--clr-border); border-radius: var(--radius-sm); }
div.info_categorie div.descriere { font-size: 13px; color: var(--clr-text-muted); margin: 0; width: auto; flex: 1; min-width: 200px; float: none; }

div.pagini { margin: 12px 0; text-align: center; }

div.pagini a.pagina, div.pagini a.pagina_curenta {
  margin: 0 3px; padding: 6px 10px; text-decoration: none; font-weight: 700;
  border-radius: var(--radius-sm); font-size: 12px; display: inline-block;
}

div.pagini a.pagina { color: var(--clr-primary); border: 1px solid var(--clr-border); background: #f2f7ec; }
div.pagini a.pagina_curenta { color: #fff; background: var(--clr-primary); }

div.filtrare {
  margin: 10px; padding: 10px 14px; font-size: 12px; color: var(--clr-text-muted);
  background: #f2f7ec; border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
}
div.filtrare > div.clear { display: none; }
div.filtrare > div.left { order: 1; }
div.filtrare > div.right { order: 2; }

div.filtrare a { text-decoration: none; font-size: 12px; color: var(--clr-text); }
div.filtrare a:hover { color: var(--clr-primary); }

/* ===================== COS DE CUMPARATURI ===================== */

div.floare_cos {
  padding: 14px; margin: 0; border-bottom: 1px dotted var(--clr-border);
  display: flex; flex-wrap: wrap; gap: 14px;
}

div.floare_cos div.poza { width: 140px; text-align: center; float: none; }
div.floare_cos div.poza img { border: 1px solid var(--clr-border); border-radius: var(--radius-sm); }
div.floare_cos div.info { width: auto; flex: 1; min-width: 220px; padding: 0; float: none; }

div.info p.titlu_cos { font-size: 17px; font-weight: 700; color: var(--clr-text); margin: 2px 0 5px; padding: 0; }
div.info span.pret_cos { font-size: 14px; font-weight: 700; color: var(--clr-price); margin: 2px 0 16px; padding: 0; }
div.info p.subtitlu { font-size: 13px; color: #961201; }

div.info div.input_holder { width: 100%; max-width: 170px; margin: 7px 0; color: var(--clr-text-muted); font-size: 13px; }

div.input_holder select, div.input_holder input {
  width: 100%; border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  color: var(--clr-text); font-size: 13px; padding: 6px;
}

div.input_holder input.mare { width: 100%; }
div.input_holder input.data { background: var(--clr-surface); }
div.input_holder input.eroare { border: 1px solid #c85f5f; }

div.info a.sterge { text-decoration: none; font-size: 13px; color: #961201; line-height: 1.8; display: inline-block; font-weight: 600; }

div.info textarea {
  width: 100%; max-width: 220px; height: 60px; margin: 7px 0 0;
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm); color: var(--clr-text); font-size: 13px; padding: 6px;
}

div.info p.subtotal { color: var(--clr-text-muted); font-size: 14px; font-weight: 700; }
p.subtotal span { color: #9a0b0b; }
p.total { color: #9a0b0b; font-weight: 700; font-size: 18px; margin: 8px 0; }

input.submit, input.submit2, input.submit3 {
  width: auto; height: auto; display: inline-block; line-height: normal;
  color: #fff; text-align: center; font-size: 14px; font-weight: 700;
  cursor: pointer; border: 0; border-radius: var(--radius-sm); margin: 6px 6px 6px 0;
  padding: 12px 20px; transition: background .2s, transform .2s;
}

input.submit { background: var(--clr-accent); }
input.submit:hover { background: var(--clr-accent-dark); }
input.submit2 { background: #7c7c7c; }
input.submit2:hover { background: #666; }
input.submit3 { background: #b23b3b; }
input.submit3:hover { background: #942f2f; }

p.cadou { text-align: left; color: var(--clr-text-muted); margin: 4px 0; padding: 0; font-size: 13px; }
p.cadou span.pret_cadou { font-weight: 700; color: var(--clr-price); }

div.qtip-content { font-size: 12px; }

div.loading {
  width: 140px; border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  color: var(--clr-text-muted); font-size: 13px; line-height: 1.4; padding: 8px;
  background: #fff; margin: 0 auto; display: block;
}

div.ascuns { visibility: hidden; display: none; }

/* ===================== PAGINI DE TEXT ===================== */

div.text { padding: 20px 16px; font-size: 14px; color: var(--clr-text-muted); line-height: 1.7; }
div.text a { text-decoration: underline; color: var(--clr-primary); }
div.text ul { margin: 0 0 0 20px; }
div.text ul a { text-decoration: none; }
div.text ul a:hover { text-decoration: underline; }
div.text ul.submeniu { margin: 0 0 0 25px; }

h2 {
  text-decoration: none; font-size: 19px; color: var(--clr-text); font-weight: 600;
  padding-left: 0; letter-spacing: normal; margin: 14px 10px;
}

ul.contact_info { padding: 10px; margin: 0; }
ul.contact_info li {
  color: var(--clr-text); font-size: 14px; padding: 8px 0;
  border-bottom: 1px dotted var(--clr-border); font-weight: 600;
  display: flex; justify-content: space-between;
}
ul.contact_info li span { color: var(--clr-primary); font-weight: 700; }

div.formular { padding: 10px; }
div.formular label { font-size: 13px; line-height: 1.8; font-weight: 700; display: block; margin-top: 8px; }

div.formular input.text {
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  width: 100%; max-width: 300px; font-size: 13px; color: var(--clr-text); padding: 7px;
}

div.formular textarea {
  width: 100%; max-width: 300px; height: 90px;
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: 7px; font-family: var(--font-body);
}

div.formular div#buton { margin: 16px 0 10px; text-align: center; }

input.input_sus {
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--clr-text); margin: 0; padding: 6px 8px;
}

input.submit_sus {
  border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--clr-text-muted); margin: 0; background: #eee;
  cursor: pointer; padding: 6px 10px;
}

ul.imagini_jos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; }
ul.imagini_jos li { float: none; margin: 0; }
ul.imagini_jos li.mijloc { width: 100%; max-width: 330px; background: url("../imagini/diverse/bg_mijloc.png") no-repeat center/cover; height: auto; min-height: 245px; border-radius: var(--radius-sm); padding: 10px 0; }

div.camp_reminder { padding: 4px 6px; width: 46%; }
div.camp_reminder label { display: block; margin: 2px; color: #fff; font-size: 11px; }
div.camp_reminder input, div.camp_reminder select { border: 1px solid rgba(255,255,255,.5); border-radius: 4px; font-size: 11px; padding: 3px; color: var(--clr-text); }

input#submit_reminder {
  color: #fff; background: var(--clr-primary); border: 0; border-radius: var(--radius-sm);
  text-align: center; margin: 6px 0 0 20px; cursor: pointer; font-size: 11px; padding: 6px 12px;
}

div.mesaj_reminder {
  color: #20390e; font-weight: 700; font-size: 12px; padding: 10px;
  background: #fff; border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  width: 100%; max-width: 282px; text-align: center; margin: 12px auto;
}

/* ===================== RESPONSIVE BREAKPOINTS ===================== */

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  div.meniu ul { display: none; flex-direction: column; }
  div.meniu ul.open { display: flex; }
  div.meniu ul li a { width: 100%; text-align: left; padding: 12px 20px; }
}

@media (min-width: 600px) {
  ul.flori { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 700px) {
  div.formular .left { float: left; width: 48%; }

  div.imagine { float: left; width: 300px; margin: 16px; }
  div.informatii_floare { float: left; width: calc(100% - 340px); }
}

@media (min-width: 900px) {
  h1 { width: 240px; height: 66px; }
  ul.flori { grid-template-columns: repeat(4, 1fr); }
  div.categorii_sus { grid-template-columns: 1fr 1.6fr 1fr; }
  div.camp_reminder { width: auto; }
}

@media (min-width: 1200px) {
  ul.flori { grid-template-columns: repeat(5, 1fr); }
}