/*
Theme Name: ElitAgrotehnologie
Theme URI: https://elitagrotehnologie.md/
Author: ElitAgrotehnologie
Author URI: https://elitagrotehnologie.md/
Description: Standalone theme for ElitAgrotehnologie. No parent theme dependency. Replaces the Divi-based setup.
Version: 2.34
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elitagrotehnologie
Tags: woocommerce, agriculture
*/

/* ============================================================
   ELITAGROTEHNOLOGIE — Main Stylesheet
   Sections in order:
   1.  CSS Variables (design tokens)
   2.  Reset + Base
   3.  Typography
   4.  Layout primitives (container, grid, sections)
   5.  Buttons + Forms
   6.  Header (sticky, compact-on-scroll)
   7.  Footer
   8.  Hero (reusable)
   9.  Section helpers (line-left accent)
   10. Card components (category, product, blog)
   11. Page-specific (home, shop, single product, etc.)
   12. WooCommerce overrides
   13. Calculator / periodic table widgets
   14. Utilities + Responsive
   ============================================================ */

/* ===== 1. Design tokens ===== */
:root {
    --color-green:        #00BC65;
    --color-green-dark:   #00A95B;
    --color-green-deep:   #006B36;
    --color-yellow:       #FFB21C;
    --color-yellow-dark:  #F79F07;
    --color-text:         #1A1C1E;
    --color-text-muted:   #919699;
    --color-text-light:   #ffffff;
    --color-bg:           #ffffff;
    --color-bg-alt:       #F4F5F7;
    --color-bg-dark:      #1F2125;
    --color-border:       #E5E7EB;

    --font-body:    'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-heading: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --container-max: 1280px;
    --container-pad: 32px;

    --header-h-desktop: 72px;
    --header-h-desktop-compact: 56px;
    --header-h-mobile: 76px;

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --radius: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
}

/* ===== 2. Reset + Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--color-green); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-green-dark); }
button { font: inherit; cursor: pointer; }

/* ===== 3. Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.6em;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 500; }
h2 { font-size: clamp(22px, 2.6vw, 32px); }
h3 { font-size: clamp(18px, 1.8vw, 22px); }
h4 { font-size: 16px; font-weight: 600; }
h5 { font-size: 14px; font-weight: 600; }
h6 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }
p { margin: 0 0 1em; }

.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.08em; }

/* ===== 4. Layout primitives ===== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    width: 100%;
}
.section { padding: 60px 0; }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-light); }
.section--narrow { padding: 36px 0; }

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* Cards grid (/produse/ category cards) — explicit column counts per breakpoint.
   Desktop wide (≥1400): 4 columns
   Desktop normal (1100-1400): 3 columns
   Tablet landscape / iPad mini landscape (900-1100): 3 columns
   Tablet portrait (700-900): 2 columns
   Phone landscape (480-700): 3 columns (cards are smaller, denser layout)
   Phone portrait (<480): 1 column */
.grid--cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
@media (max-width: 1400px) {
    .grid--cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) and (min-width: 701px) {
    .grid--cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) and (min-width: 541px) {
    /* Phone landscape — pack 3 cards in a row */
    .grid--cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    /* Compact cards for the dense layout */
    .grid--cards .cat-card { aspect-ratio: 1 / 1.1; }
    .grid--cards .cat-card__name { font-size: 16px; }
    .grid--cards .cat-card__panel { padding: 14px 14px; }
    .grid--cards .cat-card__link { font-size: 11px; gap: 8px; }
}
@media (max-width: 540px) and (min-width: 481px) {
    /* Surface Duo and similar narrow foldables — 2 columns */
    .grid--cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
    .grid--cards { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== 5. Buttons + Forms ===== */
.btn {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    overflow: hidden;
    transition: background var(--transition), transform 0.15s, box-shadow var(--transition);
    text-decoration: none !important;
    cursor: pointer;
    border: none;
}
.btn__label { padding: 14px 26px; display: inline-flex; align-items: center; justify-content: center; flex: 1; }
.btn__arrow {
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    background: rgba(0,0,0,0.1);
}
.btn__arrow svg { display: block; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn--green       { background: var(--color-green); color: #fff !important; }
.btn--green:hover { background: var(--color-green-dark); }

.btn--yellow      { background: var(--color-yellow); color: #fff !important; box-shadow: var(--shadow-md); }
.btn--yellow .btn__arrow { background: var(--color-yellow-dark); }
.btn--yellow:hover { background: var(--color-yellow-dark); }

.btn--outline {
    background: transparent;
    border: 2px solid currentColor;
    color: var(--color-text) !important;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
    font-family: inherit;
    font-size: 15px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    width: 100%;
    transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-green);
}

/* ===== 6. Header ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
/* WordPress admin bar handling
   --------------------------------------------------------------------
   When a logged-in user is viewing the site, WordPress prepends its
   32px admin bar (46px below 782px width) to the top of the page and
   adds `admin-bar` class to <body>. The admin bar is itself
   position:fixed with a very high z-index, so it sits ON TOP of our
   fixed header — covering the logo and the top half of the nav.

   We expose an --admin-bar-h CSS variable that's 0 by default and
   becomes the actual admin-bar height when logged in. Anywhere we
   offset content for the fixed header (`.site-main`, `.hero`), we add
   this variable so logged-in users don't lose their navigation behind
   the admin bar. */
:root { --admin-bar-h: 0px; }
body.admin-bar { --admin-bar-h: 32px; }
@media (max-width: 782px) {
    body.admin-bar { --admin-bar-h: 46px; }
}
.admin-bar .site-header { top: var(--admin-bar-h); }
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 32px;
    max-width: 1400px;
    margin: 0 auto;
    transition: padding var(--transition);
}
.site-header__logo img {
    height: 40px;
    width: auto;
    display: block;
    transition: height var(--transition);
    /* SVG renders best with default image-rendering on all displays */
}
.site-header.is-compact .site-header__inner {
    padding-top: 8px;
    padding-bottom: 8px;
}
.site-header.is-compact .site-header__logo img {
    height: 32px;
}

/* Primary nav */
.site-nav {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    justify-content: center;
}
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap; /* Never wrap menu items to a second line */
}
.site-nav li { position: relative; white-space: nowrap; }
.site-nav a {
    display: inline-block;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
    white-space: nowrap;
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
/* WordPress flags menu items whose linked page is an ancestor of the
   current page. The exact class name varies by WP version and whether
   it's a nav-menu (`current-menu-*`) or page-listing (`current-page-*` or
   legacy underscored `current_page_*`) walker. Cover all known forms. */
.site-nav .current-menu-ancestor > a,
.site-nav .current-menu-parent > a,
.site-nav .current-page-ancestor > a,
.site-nav .current-page-parent > a,
.site-nav .current_page_ancestor > a,
.site-nav .current_page_parent > a {
    color: var(--color-green);
}
/* Belt-and-suspenders: hide any legacy Divi menu item classes for cart/phone.
   The PHP filter strips them by URL, but CSS catches edge cases too. */
.site-nav li.call-header,
.site-nav li.cart-menu,
.site-nav li[class*="call-header"],
.site-nav li[class*="cart-menu"] {
    display: none !important;
}
/* Dropdown caret */
.site-nav .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    transition: transform var(--transition);
}
.site-nav .menu-item-has-children:hover > a::after { transform: rotate(180deg); }

.site-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: var(--shadow-lg);
    /* min-width: 100% — at least as wide as the parent nav item (Boli și Dăunători ▾)
       max-width: 320 — prevent runaway widths if an item label gets very long */
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    padding: 8px 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    border-radius: var(--radius);
}
.site-nav li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.site-nav .sub-menu li {
    display: block;
    width: 100%;
}
.site-nav .sub-menu a {
    display: block;
    width: 100%;
    padding: 12px 20px;
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 14px;
    color: var(--color-text);
    white-space: nowrap;
}
.site-nav .sub-menu a:hover { background: var(--color-bg-alt); color: var(--color-green); }

/* Header right cluster: cart + phone */
.site-header__right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}
.site-header__cart {
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    position: relative;
}
.site-header__cart svg { width: 20px; height: 20px; }
.site-header__cart-count {
    position: absolute;
    top: -7px;
    right: -8px;
    background: var(--color-green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.site-header__phone {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    /* Icon inside uses currentColor for its stroke, so both icon and
       number follow the link's `color` together. */
    text-decoration: none;
    transition: color 0.18s ease;
}
.site-header__phone:hover,
.site-header__phone:focus { color: var(--color-green); }
.site-header__phone svg { width: 16px; height: 16px; }
.site-header__phone-icon {
    /* Inherit color from parent <a> — flips between black (default) and
       green (hover) together with the number. */
    color: inherit;
    display: inline-flex;
}

/* Burger (mobile) */
.site-header__burger {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    color: var(--color-text);
}
.site-header__burger svg { display: block; }

/* Mobile menu drawer */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 360px);
    background: #fff;
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
    padding: 80px 24px 32px;
    box-shadow: var(--shadow-lg);
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}
.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.mobile-menu__close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    padding: 8px;
    color: var(--color-text);
}
.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobile-menu li { border-bottom: 1px solid var(--color-border); }
.mobile-menu a {
    display: block;
    padding: 16px 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
}
.mobile-menu .sub-menu { padding-left: 16px; }
.mobile-menu .sub-menu a {
    padding: 10px 0;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.mobile-menu__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-green);
}

/* Page content offset for fixed header */
.site-main { padding-top: calc(var(--header-h-desktop) + var(--admin-bar-h)); }
/* But if the FIRST child of site-main is a hero, it should butt up against
   the header. The fixed header overlays the top of the hero, which is the
   intended design (hero image extends edge-to-edge under the header). */
.site-main:has(> .hero:first-child),
.site-main:has(> section.hero:first-child),
.site-main:has(> .hp-hero:first-child),
.site-main:has(> section.hp-hero:first-child) {
    padding-top: 0 !important;
}

/* ===== 7. Footer ===== */
.site-footer {
    position: relative;
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: 70px 0 0;
    overflow: hidden;
    isolation: isolate;
}
/* Rolling green hills illustration — sits between footer content and copyright row.
   Full-width, brand greens, no detail. Fades softly at the top. */
.site-footer__scene {
    margin-top: 50px;
    height: 140px;
    background-image: url('assets/img/footer-scene.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
    pointer-events: none;
}
.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 60px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}
.site-footer__logo img {
    height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
}
.site-footer__contact { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.site-footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--color-green) !important;
    text-decoration: none !important;
}
.site-footer__contact-row svg { color: var(--color-green); flex-shrink: 0; margin-top: 2px; }
.site-footer__contact-phone {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-green) !important;
}
.site-footer__contact-address {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--color-green);
}
.site-footer__contact-row:hover { opacity: 0.85; }

.site-footer__columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px 36px;
    align-items: start;
    padding-top: 8px;
}
.site-footer__nav-col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__nav-col li { margin: 0 0 22px; }
.site-footer__nav-col a {
    color: var(--color-text-muted) !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: color var(--transition);
    white-space: nowrap;
    display: inline-block;
}
.site-footer__nav-col a:hover { color: #fff !important; }

/* Wrapper for col-3 contents (so socials can sit under the col-3 nav) */
.site-footer__col-3-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.site-footer__social {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 4px;
}
.site-footer__social a {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.6;
    transition: opacity var(--transition);
    cursor: pointer !important;
    text-decoration: none !important;
}
.site-footer__social a:hover { opacity: 1; cursor: pointer !important; }
.site-footer__social a:hover svg { cursor: pointer !important; }
/* Make absolutely sure SVG inside any header/footer link doesn't intercept cursor */
.site-footer__social a svg,
.site-header__cart svg,
.site-header__phone svg,
.site-header__phone-icon svg,
.floating-cart svg {
    pointer-events: none !important;
    cursor: pointer;
}

/* ===== Floating mobile cart (visible only when items in cart, only on mobile) ===== */
.floating-cart {
    display: none; /* shown by mobile media query below */
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #00A95B !important; /* Brand green from logo */
    color: #fff !important;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: 9990;
    text-decoration: none !important;
}
.floating-cart svg {
    pointer-events: none;
    color: #fff;
}
.floating-cart__count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-yellow);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px solid #fff;
}

.site-footer__bottom {
    margin-top: 0;
    padding: 22px 60px;
    border-top: 1px solid rgba(255,255,255,0.08);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    position: relative;
    z-index: 1;
}
.site-footer__bottom a {
    color: rgba(255,255,255,0.6) !important;
    text-decoration: none;
    cursor: pointer !important;
}
.site-footer__bottom a:hover { color: #fff !important; cursor: pointer !important; }
/* All footer links explicitly get pointer cursor */
.site-footer a,
.site-footer a:hover,
.site-footer__contact-row,
.site-footer__contact-row:hover {
    cursor: pointer !important;
}
.site-footer__bottom strong { color: rgba(255,255,255,0.85); font-weight: 600; }

/* ===== 8. Hero ===== */
.hero {
    position: relative;
    /* 250px total height on desktop — applies to ALL interior pages
       (homepage uses .hp-hero). */
    min-height: 250px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* Hero background image — sits as a real <img> behind the content
   so the browser preload scanner can discover and prioritize it
   from the initial HTML scan. Behaves visually like background-cover.
   Selector is intentionally combined to beat WooCommerce's
   `.woocommerce-page img { height:auto }` rule on cart/checkout. */
.hero img.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    display: block;
    max-width: none;
}
.hero--tall { min-height: 320px; }
.hero--no-image {
    background: linear-gradient(135deg, #1A2E1A 0%, #2E4A2E 50%, #1B3A1B 100%);
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(15,30,15,0.78) 0%,
        rgba(15,30,15,0.55) 50%,
        rgba(15,30,15,0.25) 100%);
    z-index: 1;
}
.hero__overlay--soft {
    background: linear-gradient(90deg,
        rgba(15,30,15,0.55) 0%,
        rgba(15,30,15,0.30) 70%,
        rgba(15,30,15,0.10) 100%);
}
.hero__content {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    /* Top padding pushes content past the fixed header (72px) + a bit of
       breathing room. Bottom padding keeps the title visually balanced. */
    padding: calc(20px + var(--header-h-desktop) + var(--admin-bar-h)) var(--container-pad) 30px;
    color: #fff;
}
.hero__title { color: #fff; margin: 0 0 12px; }
.hero__desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,0.92);
    max-width: 540px;
    margin: 0 0 20px;
}
.hero--tall .hero__content { padding-top: 80px; padding-bottom: 80px; }

/* ===== 9. Accent line — green segment + white segment, before titles ===== */
/* ===== 9. Accent line — green segment + white/dark segment ===== */
.line-accent {
    display: inline-flex;
    align-items: center;          /* Vertically center segments within the 4px-tall parent */
    justify-content: flex-start;
    gap: 0;
    width: 45px;                  /* 20 + 25 */
    height: 4px;
    margin-right: 14px;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 0;               /* Prevent any inline-text baseline offset */
}
/* Green segment: short and thick — fills the full height of the parent */
.line-accent::before {
    content: '';
    display: block;
    width: 20px;
    height: 4px;
    background: var(--color-green);
    border-radius: 1px;
    flex-shrink: 0;
}
/* White segment: longer and THIN — centered vertically by flex align-items */
.line-accent::after {
    content: '';
    display: block;
    width: 25px;
    height: 1px;
    background: #fff;
    border-radius: 1px;
    flex-shrink: 0;
}
/* Dark variant for light backgrounds — green stays green, second segment is GREY (not white, not black) */
.line-accent--dark::after { background: var(--color-text-muted); }

/* Orange variant for green backgrounds (e.g. Inovație section) — the
   short segment becomes brand orange #FFB21C, the longer thin segment
   stays white for contrast on green. */
.line-accent--orange::before { background: #FFB21C; }
.line-accent--orange::after  { background: #fff; }

/* ===== 10. Cards ===== */
.cat-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
    background: #2E4A2E center/cover no-repeat;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08);
    transition: transform var(--transition), box-shadow var(--transition);
}
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cat-card__panel {
    position: absolute;
    left: 22px; right: 22px; bottom: 0;
    background: #fff;
    padding: 22px 24px;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.05);
}
.cat-card__name {
    font-size: 22px;
    font-weight: 400;
    color: var(--color-text);
    margin: 0 0 10px;
    line-height: 1.2;
}
.cat-card__link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-green);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: gap var(--transition);
}
.cat-card:hover .cat-card__link { gap: 18px; }

/* Brand card variant — used on /producatori/. Same outer dimensions as
   .cat-card so it slots into the same .grid--cards layout, but the
   background is white (logos look bad on green) and the brand logo
   sits centered in the top portion of the card above the name panel. */
.brand-card {
    background: #fff;
    border: 1px solid #E6E7EB;
}
.brand-card__logo-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 110px; /* leave room for the panel at the bottom */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.brand-card__logo {
    max-width: 80%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0.15);
    transition: filter var(--transition);
}
.brand-card:hover .brand-card__logo { filter: grayscale(0); }
.brand-card__monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.brand-card__panel {
    background: #F6F7F9;
    border-top: 1px solid #E6E7EB;
    box-shadow: none;
}

/* Product card (used in shop, related, etc.) */
.product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card__image {
    aspect-ratio: 1;
    background: var(--color-bg-alt) center/contain no-repeat;
}
.product-card__body { padding: 16px 20px; }
.product-card__name { font-size: 16px; font-weight: 500; margin: 0 0 6px; }
.product-card__price { font-size: 15px; font-weight: 700; color: var(--color-green); }

/* Disease/Crop card (square photo with hover overlay) */
.media-card {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}
.media-card__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 20px;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    transition: background var(--transition);
}
.media-card:hover .media-card__label { background: linear-gradient(0deg, rgba(0,188,101,0.9) 0%, rgba(0,188,101,0) 100%); }

/* ===== 11. CTA Banner ===== */
.cta-banner {
    position: relative;
    min-height: 380px;
    background-color: var(--color-green-deep); /* Brand green fallback when no image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.cta-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(8,18,10,0.78) 0%,
        rgba(8,18,10,0.55) 35%,
        rgba(8,18,10,0.15) 70%,
        rgba(8,18,10,0) 100%);
    z-index: 1;
}
.cta-banner__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    padding: 60px var(--container-pad);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.cta-banner__title { color: #fff; max-width: 600px; margin: 0 0 24px; font-weight: 400; }

/* ===== 12. WooCommerce overrides ===== */
.woocommerce-breadcrumb { display: none; }
.woocommerce-notices-wrapper:empty { display: none; }
/* Suppress WC's stock floating icons on ALL frontend notices — they're
   absolutely-positioned ::before pseudos that overlap our notice text
   and look out of place against our clean card styling. Affects:
     - "X was added to your cart" message
     - empty-cart info notice
     - validation errors
     - any other woocommerce-message/info/error rendered by WC.
   We rebuild the visual hierarchy with our own border-top accent color. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
    content: none !important;
    display: none !important;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding-left: 18px !important;
}
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
    float: right;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
    border-radius: var(--radius);
    border-top: 3px solid var(--color-green);
    padding: 14px 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

/* ===== 13. Testimonials carousel (homepage) ===== */
.testimonials { background: var(--color-bg-alt); }
.testimonial-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: var(--shadow-sm);
}
.testimonial-card__name { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.testimonial-card__role { font-size: 12px; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 18px; }
.testimonial-card__text { font-size: 15px; line-height: 1.7; color: var(--color-text); margin: 0; font-style: italic; }

/* ===== 13b. Homepage — built to mirror the Divi page exactly ===== */

/* ---------- Shared hero/CTA-banner pattern: .hp-hero ---------- */
/* Used by the top hero, calculator CTA, and recomandare CTA — all use the
   exact same Divi pattern: bg image + gradient overlay + left-padded text. */
.hp-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background-color: #00463A; /* fallback color if image fails */
    /* For .hp-hero instances that still use inline background-image
       (calc CTA, reco CTA below the fold — they're not the LCP so
       CSS background is fine, naturally lazy). */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* The hero image now lives as a real <img> so the browser preload
   scanner can discover it from the HTML alone (no need to wait for
   the CSS to load before starting the image fetch). Positioned to
   fill the section like a background. Selector combined to beat
   WooCommerce's `.woocommerce-page img { height:auto }` rule. */
.hp-hero img.hp-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    display: block;
    max-width: none;
}
/* gradient-blue overlay (used on hero + calculator section) — dark blue-green
   tint that fades to transparent on the right, matching Divi's "gradient-blue" */
.hp-hero.gradient-blue::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        rgba(0, 70, 50, 0.78) 0%,
        rgba(0, 70, 50, 0.55) 30%,
        rgba(0, 70, 50, 0.25) 60%,
        rgba(0, 70, 50, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}
/* gradient-black overlay (used on "Nu sunteți sigur") */
.hp-hero.gradient-black::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.52) 30%,
        rgba(0, 0, 0, 0.25) 60%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}
/* Hero inner: matches Divi's row padding (170px top, 150px bottom, 100px LEFT) */
.hp-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 170px var(--container-pad) 150px 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* Top hero — extra top padding to clear the fixed header (and admin bar
   for logged-in users). */
.hp-hero--top .hp-hero__inner {
    padding-top: calc(170px + var(--header-h-desktop) + var(--admin-bar-h));
}
.hp-hero__inner--compact {
    padding-top: 120px;
    padding-bottom: 120px;
}
.hp-hero__title {
    max-width: 800px;
    color: #fff;
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}
.hp-hero__title--h2 { font-size: clamp(26px, 2.3vw, 36px); }
.hp-hero__desc {
    max-width: 650px;
    color: #fff;
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 28px;
}

/* ---------- 2. Identificați Boala — 4-column grid ---------- */
.hp-boli {
    padding: 80px 0 50px;
    background: #fff;
}
.hp-boli__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad) 0 100px;
}
.hp-boli__title {
    font-size: clamp(26px, 2.3vw, 36px);
    font-weight: 500;
    margin: 0 0 40px;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}
.hp-boli__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 0 100px 0 0;
}
.hp-boli__tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 300px;
    border-radius: 6px;
    background-color: #2E4A2E;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--transition);
}
.hp-boli__tile:hover { transform: translateY(-3px); }
.hp-boli__tile::after {
    /* Subtle dark gradient at bottom for label readability */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.0) 50%);
    border-radius: 6px;
}
.hp-boli__label {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    padding: 18px 12px;
    width: 100%;
}
/* Yellow CTA tile with sun.svg background */
.hp-boli__tile--cta {
    background-color: #FFB21C !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    align-items: center;
    padding: 0;
}
.hp-boli__tile--cta::after {
    background: none;
}
.hp-boli__label--cta {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    background: rgba(0,0,0,0.0);
    padding: 0 16px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.22);
}

/* ---------- 3. Despre Noi — image as real <img> at top, white card overlaps below ---------- */
.hp-despre {
    background-color: #F6F7F9;
    padding: 0 20px 100px;
    position: relative;
}
.hp-despre__image-wrap {
    max-width: 1100px;
    margin: 0 auto 40px;
    text-align: center;
}
.hp-despre__image {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
    margin: 0 auto;
}
.hp-despre__card {
    position: relative;
    z-index: 2;
    background: #fff;
    max-width: 890px;
    margin: 0 auto;
    padding: 50px 80px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.hp-despre__title {
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 500;
    margin: 0 0 18px;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hp-despre__text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text);
    margin: 0 0 0;
}
.hp-despre__btn {
    margin-top: 40px;
    margin-bottom: -85px;
    display: inline-flex;
}

/* ---------- 4-6. Reviews + reuse hp-hero pattern for CTAs ---------- */
.hp-reviews {
    padding: 80px 0;
    background: #fff;
}
.hp-reviews__header {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad) 30px 100px;
}
.hp-reviews__title {
    font-size: clamp(26px, 2.3vw, 36px);
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
}
.hp-reviews__intro {
    color: var(--color-text-muted);
    font-size: 15px;
    margin: 0;
    max-width: 700px;
}

/* ---------- 7. Partners — 3 rows of 5 columns ---------- */
.hp-partners {
    padding: 70px 0 90px;
    background: #fff;
}
.hp-partners__header {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad) 30px 100px;
}
.hp-partners__title {
    font-size: clamp(26px, 2.3vw, 36px);
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
}
.hp-partners__intro {
    color: var(--color-text-muted);
    font-size: 15px;
    margin: 0;
}
.hp-partners__rows {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 40px 0;
}
.hp-partners__row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: center;
    justify-items: center;
    padding: 18px 0;
}
.hp-partners__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
}
.hp-partners__cell a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: opacity var(--transition);
}
.hp-partners__cell img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity var(--transition);
}
.hp-partners__cell a:hover img { opacity: 1; }

/* Fallback for brands without a logo: a designed monogram placeholder.
   A 1-2 character mark sits on a soft colored circle, brand name
   underneath. The circle's color comes inline from PHP, derived
   deterministically from the brand slug so each brand always looks
   the same and the row gets a nice color variety. Once the client
   uploads a logo in WC admin, the real <img> replaces this. */
.hp-partners__placeholder {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: transform var(--transition);
}
.hp-partners__placeholder:hover { transform: translateY(-2px); }
.hp-partners__placeholder-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    /* Default bg/color come from inline style on the element */
    transition: transform var(--transition), box-shadow var(--transition);
}
.hp-partners__placeholder:hover .hp-partners__placeholder-mark {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.hp-partners__placeholder-name {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1A1C1E;
    line-height: 1.3;
    text-align: center;
    max-width: 100%;
    padding: 0 6px;
    transition: color var(--transition);
}
.hp-partners__placeholder:hover .hp-partners__placeholder-name {
    color: var(--color-green);
}

/* ===== Reviews slider (keep existing slider behavior) ===== */
.reviews-slider {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 var(--container-pad);
}
.reviews-slider__track {
    display: flex;
    gap: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.reviews-slider__track .testimonial-card {
    flex: 0 0 100%;
    min-width: 100%;
    box-sizing: border-box;
    background: #F6F7F9;
    border-radius: 6px;
    padding: 40px 50px;
}
.testimonial-card__name { font-size: 18px; font-weight: 600; margin: 0 0 4px; color: var(--color-text); }
.testimonial-card__role { font-size: 12px; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 22px; }
.testimonial-card__text { font-size: 14px; line-height: 1.7; color: var(--color-text); margin: 0; text-align: justify; }
.reviews-slider__controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}
.reviews-slider__btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.reviews-slider__btn:hover {
    background: var(--color-green);
    border-color: var(--color-green);
    color: #fff;
}
.reviews-slider__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 18px;
}
.reviews-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-border);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition);
}
.reviews-slider__dot.is-active { background: var(--color-green); }

/* ===== 13c. Nutriția Plantelor page (page-nutritia-plantelor.php) =====
   Hero reuses the global .hero pattern (same as /produse/).
   Periodic table CSS is a VERBATIM port of the original child theme's
   "Tabelul periodic" block — same class names (.tabel-periodic, .tabel-row,
   .tabel-subtitle, .tabel-mobile, .tabel-nr, .table-border-top, .green-bg,
   .yellow-bg, .red-bg, .blue-bg) so the rules apply identically. */

/* Section wrapper — aligns with .hero__content (max-width var(--container-max),
   left/right padding = var(--container-pad)). This puts the H2 "Clasificarea..."
   directly below the H1 "Nutriția Plantelor" at the same x-coordinate. */
.np-section {
    background: #fff;
    padding: 125px 0 60px;
}
.np-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.np-section__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 22px;
    text-transform: capitalize;
}
.np-section__text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text);
    margin: 0 0 40px;
    max-width: 760px;
    text-align: justify;
}

/* ===== Tabelul periodic — verbatim port from old child theme style.css ===== */
table.tabel-periodic {
    width: auto;
}
.tabel-periodic td,
.tabel-periodic tr,
.tabel-periodic tbody,
table.tabel-periodic {
    border: 0;
    border-top: 0 !important;
}
.tabel-periodic td {
    border-right: 4px solid #fff;
}
.tabel-periodic .table-border-top td {
    border-top: 4px solid #fff !important;
}
.tabel-periodic td {
    padding: 0 !important;
    text-align: center;
    width: 110px;
    height: 150px;
    color: #fff;
}
.tabel-periodic td a {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 60px;
    letter-spacing: -0.03em;
    display: block;
    border-radius: 4px;
    color: #fff;
    position: relative;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 35px;
    text-decoration: none;
    transition: background-color 0.18s ease;
}
.tabel-periodic td.green-bg a,
.tabel-periodic .tabel-subtitle td.green-bg span,
td.tabel-mobile.green-bg span {
    background-color: #81BA39;
}
.tabel-periodic td.yellow-bg a,
.tabel-periodic .tabel-subtitle td.yellow-bg span,
td.tabel-mobile.yellow-bg span {
    background-color: #E4A835;
}
.tabel-periodic td.red-bg a,
.tabel-periodic .tabel-subtitle td.red-bg span,
td.tabel-mobile.red-bg span {
    background-color: #D24E30;
}
.tabel-periodic td.blue-bg a,
.tabel-periodic .tabel-subtitle td.blue-bg span,
td.tabel-mobile.blue-bg span {
    background-color: #5F92CE;
}
.tabel-periodic td.green-bg a:hover  { background-color: #6B9F28; }
.tabel-periodic td.yellow-bg a:hover { background-color: #D69C2E; }
.tabel-periodic td.red-bg a:hover    { background-color: #BB4226; }
.tabel-periodic td.blue-bg a:hover   { background-color: #3A79C3; }

.tabel-periodic .tabel-subtitle td {
    height: 56px;
}
.tabel-periodic .tabel-subtitle td span {
    display: block;
    border-radius: 4px;
    padding: 12px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0.01em;
    color: #fff;
}
.tabel-periodic td a span {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 110.5%;
    letter-spacing: 0.01em;
    display: block;
    color: #fff;
}
.tabel-periodic td a .tabel-nr {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    line-height: 180%;
    letter-spacing: 0.01em;
    position: absolute;
    right: 10px;
    top: 5px;
    color: #fff;
}
.tabel-mobile {
    display: none;
}

/* ===== Nutriția Plantelor — Calculator nutrienți (port from old child theme) ===== */
.np-calc {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 80px 0 100px;
    overflow: hidden;
}
.np-calc__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 22, 25, 0.55);
    z-index: 1;
}
.np-calc__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.np-calc__header {
    margin-bottom: 50px;
}
.np-calc__title {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 12px;
}
.np-calc__subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}
.np-calc__footnote {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin: 12px 0 0;
}

/* Calculator body — 2-column layout */
.calc-nutr {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}
.calc-col {
    flex: 1;
    min-width: 0;
}
.calc-col:first-child { padding-right: 0; }

.calc-title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 18px;
}
.calc-title span {
    font-weight: 700;
    margin-right: 6px;
}

/* Crop tiles */
.calc-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.cel-content {
    background-color: #fff;
    padding: 15px 8px;
    height: 120px;
    border-radius: 4px;
    text-align: center;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #242728;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.cel-content::before {
    content: '';
    width: 40px;
    height: 44px;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto 14px;
    transition: filter 0.18s ease;
}
.cel-content[data-id="grau"]::before              { background-image: url('assets/img/calculator-nutrienti/wheat.svg'); }
.cel-content[data-id="porumb"]::before            { background-image: url('assets/img/calculator-nutrienti/porumb.svg'); }
.cel-content[data-id="floarea-soarelui"]::before  { background-image: url('assets/img/calculator-nutrienti/sunflower.svg'); }
.cel-content[data-id="soia"]::before              { background-image: url('assets/img/calculator-nutrienti/boabe-de-soia.svg'); }
.cel-content:hover,
.cel-content.cel-active { background-color: #FFB21C; color: #fff; }
.cel-content:hover[data-id="grau"]::before,
.cel-content.cel-active[data-id="grau"]::before              { background-image: url('assets/img/calculator-nutrienti/wheat-white.svg'); }
.cel-content:hover[data-id="porumb"]::before,
.cel-content.cel-active[data-id="porumb"]::before            { background-image: url('assets/img/calculator-nutrienti/porumb-white.svg'); }
.cel-content:hover[data-id="floarea-soarelui"]::before,
.cel-content.cel-active[data-id="floarea-soarelui"]::before  { background-image: url('assets/img/calculator-nutrienti/sunflower-white.svg'); }
.cel-content:hover[data-id="soia"]::before,
.cel-content.cel-active[data-id="soia"]::before              { background-image: url('assets/img/calculator-nutrienti/boabe-de-soia-white.svg'); }

/* Step 02 — Ajustați Recolta */
.calc-nu-step2 { margin-top: 40px; }
.select-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    margin-bottom: 20px;
    min-height: 60px;
}
.select-info-img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.select-info-img img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}
.select-info-nr {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.03em;
    min-width: 130px;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.select-info-desc {
    font-size: 16px;
    letter-spacing: 0.01em;
}

.select-range { width: 100%; margin-bottom: 30px; }
.select-range input[type="range"] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #00BC65 0%, #00BC65 0%, #fff 0%, #fff 100%);
    outline: none;
    cursor: pointer;
}
.select-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #FFB21C url('assets/img/calculator-nutrienti/range-btn.svg') center/18px no-repeat;
    cursor: pointer;
    border: none;
}
.select-range input[type="range"]::-moz-range-thumb {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: #FFB21C url('assets/img/calculator-nutrienti/range-btn.svg') center/18px no-repeat;
    cursor: pointer;
    border: none;
}

.select-credits {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Result chart (right column) */
.calc-rezult-wrapper {
    background-color: #242728;
    border-radius: 6px;
    overflow: hidden;
}
.c-rez-title {
    padding: 14px 20px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.c-rez-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 18px 20px 24px;
    align-items: end;
}
.c-rez-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.c-rez-item-title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}
.c-rez-item-title span {
    font-size: 14px;
    position: relative;
    bottom: -3px;
}
.c-rez-item-content {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: visible;
}
/* Thin vertical gray axis line — runs full height of the chart cell */
.c-rez-item-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateX(-50%);
    z-index: 1;
}
/* Short horizontal dash at the bottom (axis tick) */
.c-rez-item-content::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 30px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateX(-50%);
    z-index: 1;
}

/* Colored bar — anchored at the BOTTOM of the chart and grows UP.
   Height set by JS proportionally to the consumption value. */
.c-rez-item-bg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 90px;
    min-height: 0;
    border-radius: 4px;
    transition: height 0.25s ease;
    z-index: 2;
}
.bg-n    { background-color: #CE2947; }
.bg-p2o5 { background-color: #EB8A30; }
.bg-k2o  { background-color: #F2D640; }
.bg-s    { background-color: #AFEF5D; }

/* Value pill — sits at the TOP edge of its bar (overhangs by half its own
   height so it visually "caps" the bar tip). Centered horizontally. */
.c-rez-item-val {
    position: absolute;
    left: 50%;
    top: -14px;
    transform: translateX(-50%);
    background: #fff;
    color: #242728;
    font-weight: 700;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
    pointer-events: none;
}

/* ===== Nutriția Plantelor — Locality form (yellow bg with sun pattern) =====
   The sun.svg is the section's background image. It's sized 2× the visible
   left half (so much of the circle sits off-screen to the left and top) and
   only its bottom-right arc curves through the visible area — no harsh
   circle edges show on the right or top edge of the section. */
.np-form {
    background-color: #FFB21C;
    background-image: var(--np-form-sun);
    background-repeat: no-repeat;
    /* Big sun, anchored upper-left and offset far off-canvas so only a
       diagonal arc curves across the bottom-left of the section. */
    background-size: 1100px auto;
    background-position: -350px -150px;
    padding: 70px 0 80px;
    overflow: hidden;
}
.np-form__inner {
    position: relative;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.np-form__left {
    color: #fff;
    position: relative;
    z-index: 1;
}
.np-form__title {
    font-size: 32px;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 16px;
}
.np-form__subtitle {
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.np-form__right {
    background: #fff;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    align-self: stretch;
}
.np-form__form p {
    margin: 0;
    position: relative;
}

/* Unified spacing — single source of truth.
   Make the form a vertical flex container with a fixed gap between
   every child element. This eliminates every margin-based layout
   inconsistency: paired rows, standalone fields, GDPR row, Turnstile
   widget and submit button all separate by exactly the same 10px,
   on every viewport. Inner margins on those children are zeroed below
   so they don't double-count. */
.np-form__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.np-form__form > * { margin: 0 !important; }

/* Paired rows — two fields per row on desktop, stacks on narrow screens.
   The wrapping <div class="np-form__row np-form__row--2col"> contains
   two <p> children (one per field). On phones they fall back to a
   single column so the inputs stay comfortably wide. */
.np-form__row { margin: 0; }
.np-form__row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.np-form__row--2col > p { margin: 0; }
.np-form__form input[type="text"],
.np-form__form input[type="email"],
.np-form__form input[type="tel"],
.np-form__form select {
    width: 100%;
    height: 48px;
    border: 1px solid #D7DBDE;
    border-radius: 4px;
    padding: 0 20px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #1A1C1E;
    background: #fff;
    transition: border-color 0.15s ease;
}
.np-form__form input:focus,
.np-form__form select:focus {
    outline: none;
    border-color: #FFB21C;
}
.np-form__form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23919699' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 38px;
}
.np-form__accept {
    font-size: 12px;
    line-height: 1.5;
    color: #616466;
}
.np-form__accept label {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    cursor: pointer;
}
.np-form__accept input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.np-form__submit { margin: 0; }
.np-form__form button[type="submit"] {
    width: 100%;
    height: 56px;
    background: #FFB21C;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    transition: background 0.18s ease;
}
.np-form__form button[type="submit"]:hover {
    background: #F79F07;
}
.np-form__arrow {
    display: inline-flex;
    align-items: center;
}
.np-form__arrow svg { stroke: #fff; }

/* CF7 form styling — applies when the real Contact Form 7 shortcode renders
   inside .np-form__right. CF7 wraps every field in <span.wpcf7-form-control-wrap>
   which defaults to inline-block — that's why naive styling looks wonky.
   We force each wrapper + the form itself to flow as block-level layout. */
.np-form__right .wpcf7 { padding: 0; margin: 0; }
.np-form__right .wpcf7-form { margin: 0; }
.np-form__right .wpcf7-form p {
    margin: 0;
    padding: 0;
    position: relative;
}

/* CF7's field wrapper must be block so the input inside fills the row.
   We also make it the positioning context for a red asterisk that we drop
   in the top-right corner of each REQUIRED field (CF7 auto-adds the class
   `wpcf7-validates-as-required` to required inputs, which we detect with
   `:has()`). The asterisk overlays the input's right padding so it sits
   visually AFTER the placeholder text without affecting layout. */
.np-form__right .wpcf7-form-control-wrap {
    display: block !important;
    width: 100%;
    position: relative;
}
.np-form__right .wpcf7-form-control-wrap:has(.wpcf7-validates-as-required)::after {
    content: '*';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #D24E30;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}
/* The <select> field has a chevron in the right side — push asterisk further left */
.np-form__right .wpcf7-form-control-wrap:has(select.wpcf7-validates-as-required)::after {
    right: 40px;
}
/* The acceptance row is required too but we don't want an asterisk there */
.np-form__right .wpcf7-form p.np-form__accept::after,
.np-form__right .wpcf7-form p.np-form__accept .wpcf7-form-control-wrap::after {
    display: none !important;
}
/* Submit-row p might match :has(required) somehow — make sure it's hidden */
.np-form__right .wpcf7-form p.np-form__submit::after {
    display: none !important;
}

/* All text-like inputs + select — same height, padding, font, border */
.np-form__right .wpcf7-form input[type="text"],
.np-form__right .wpcf7-form input[type="email"],
.np-form__right .wpcf7-form input[type="tel"],
.np-form__right .wpcf7-form input[type="url"],
.np-form__right .wpcf7-form input[type="number"],
.np-form__right .wpcf7-form select,
.np-form__right .wpcf7-form textarea {
    width: 100% !important;
    height: 48px;
    border: 1px solid #D7DBDE;
    border-radius: 4px;
    padding: 0 32px 0 20px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #1A1C1E;
    background: #fff;
    box-sizing: border-box;
    margin: 0;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.np-form__right .wpcf7-form textarea {
    height: auto;
    min-height: 96px;
    padding: 14px 20px;
    resize: vertical;
}
.np-form__right .wpcf7-form input:focus,
.np-form__right .wpcf7-form select:focus,
.np-form__right .wpcf7-form textarea:focus {
    outline: none;
    border-color: #FFB21C;
}
.np-form__right .wpcf7-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23919699' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 38px;
}

/* Acceptance / GDPR row — checkbox + long-form text side by side */
.np-form__right .wpcf7-form p.np-form__accept {
    font-size: 12px;
    line-height: 1.5;
    color: #616466;
    padding: 4px 0;
}
.np-form__right .wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.np-form__right .wpcf7-form .wpcf7-list-item-label {
    flex: 1 1 auto;
    min-width: 0;
    color: #616466;
}
.np-form__right .wpcf7-form input[type="checkbox"] {
    margin: 3px 0 0 0;
    flex-shrink: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* Submit button — full width yellow, no asterisk space, matches design.
   The submit-row <p> becomes the positioning context for a loading spinner
   that overlays the button while CF7's AJAX is in flight (CF7 adds the
   `.submitting` class to the <form> element during submission). */
.np-form__right .wpcf7-form p.np-form__submit {
    margin: 0;
    position: relative;
}
.np-form__right .wpcf7-form input[type="submit"],
.np-form__right .wpcf7-form button[type="submit"] {
    display: block;
    width: 100%;
    height: 56px;
    background: #FFB21C;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: background 0.18s ease, opacity 0.18s ease;
}
.np-form__right .wpcf7-form input[type="submit"]:hover,
.np-form__right .wpcf7-form button[type="submit"]:hover {
    background: #F79F07;
}
.np-form__right .wpcf7-form input[type="submit"]:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* While the form is submitting: dim the button, disable pointer events
   (prevents accidental double-submit), and show a circular CSS spinner
   centered over the button. */
.np-form__right .wpcf7-form.submitting input[type="submit"],
.np-form__right .wpcf7-form.submitting button[type="submit"] {
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    cursor: wait;
}
.np-form__right .wpcf7-form.submitting p.np-form__submit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: np-form-spin 0.7s linear infinite;
    z-index: 5;
    pointer-events: none;
}
@keyframes np-form-spin {
    to { transform: rotate(360deg); }
}

/* CF7's default spinner element — hide it; we have our own. */
.np-form__right .wpcf7-spinner {
    display: none !important;
}

/* CF7 native validation tip — shows next to invalid fields */
.np-form__right .wpcf7-not-valid-tip {
    color: #D24E30;
    font-size: 12px;
    margin-top: 4px;
    display: block;
    line-height: 1.3;
}
.np-form__right .wpcf7-form input.wpcf7-not-valid,
.np-form__right .wpcf7-form select.wpcf7-not-valid,
.np-form__right .wpcf7-form textarea.wpcf7-not-valid {
    border-color: #D24E30;
}

/* CF7 response output — success/error message below the form */
.np-form__right .wpcf7-response-output {
    border: 1px solid #D7DBDE;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    background: #fff;
}
.np-form__right .wpcf7 form.sent .wpcf7-response-output {
    border-color: #00BC65;
    background: #F0FFF8;
    color: #00915A;
}
.np-form__right .wpcf7 form.invalid .wpcf7-response-output,
.np-form__right .wpcf7 form.failed .wpcf7-response-output,
.np-form__right .wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #D24E30;
    background: #FFF5F3;
    color: #BB4226;
}
.np-form__right .wpcf7 form.spam .wpcf7-response-output {
    border-color: #FFB21C;
    background: #FFF8E8;
    color: #B07410;
}

/* Fallback notice when CF7 plugin is not installed */
.np-form__notice {
    padding: 20px 16px;
    background: #FFF5F3;
    border: 1px solid #FFC4B5;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #1A1C1E;
    text-align: center;
}
.np-form__notice strong { color: #D24E30; display: block; margin-bottom: 4px; }
.np-form__notice em { font-style: italic; }

/* =====================================================================
   NUTRIENT SUB-PAGES — page-templates/nutrient.php
   17 pages under /nutritia-plantelor/, recreating the production design
   at https://elitagrotehnologie.md/nutritia-plantelor/<slug>/

   Category color palette (drives the split section background, the swiper
   nav buttons, and hotspot pulses):
     macro      → green   #81BA39
     secondary  → yellow  #FFB21C
     micro      → red     #D24E30
     non        → blue    #3A79C3
   ===================================================================== */
.hero.nutrient-cat-macro     { --nutrient-color: #81BA39; --nutrient-color-dark: #6B9F28; }
.hero.nutrient-cat-secondary { --nutrient-color: #FFB21C; --nutrient-color-dark: #C88A0B; }
.hero.nutrient-cat-micro     { --nutrient-color: #D24E30; --nutrient-color-dark: #A03A22; }
.hero.nutrient-cat-non       { --nutrient-color: #3A79C3; --nutrient-color-dark: #275993; }

/* Hero element badge (kept from the earlier version per client preference) */
.nutrient-hero__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 38px;
    line-height: 1.1;
}
.nutrient-hero__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--nutrient-color, #81BA39);
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
    line-height: 1;
}
.nutrient-hero__name {
    font-weight: 500;
    color: #fff;
}

/* Back link sits just below the hero, in a light strip */
.nutrient-back-wrap {
    background: #fff;
    padding: 28px 0 8px;
}
.nutrient-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.18s ease;
}
.nutrient-back:hover { color: var(--color-green); }
.nutrient-back__arrow {
    color: var(--color-green);
    font-size: 16px;
    transition: transform 0.18s ease;
}
.nutrient-back:hover .nutrient-back__arrow { transform: translateX(-3px); }

/* =====================================================================
   SECTION 3 — STIATI CA split section
   Left panel (~55% wide) painted with category color, white text + cards.
   Right panel: white background with plant image + hotspots.
   The left panel's background bleeds to the LEFT edge of the viewport
   (uses a ::before pseudo-element with width: 200%, left: -100%).
   ===================================================================== */
.nutrient-split {
    position: relative;
    background: #fff;
    padding: 0;
    overflow: hidden;
}
.nutrient-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 60px;
    align-items: stretch;
    min-height: 600px;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}
/* Colored left panel — extends to the page's left edge via a ::before
   pseudo-element that's positioned absolute and bleeds left of the viewport.
   The pseudo sits BEHIND the column's text content (z-index: 0) but ABOVE
   the section's white background — text is on top via the implicit
   stacking order of regular content children. */
.nutrient-split__left {
    position: relative;
    padding: 60px 50px 70px;
    color: #fff;
    isolation: isolate;
    background: var(--nutrient-color, #81BA39);
}
.nutrient-cat-macro .nutrient-split__left     { background: #81BA39; }
.nutrient-cat-secondary .nutrient-split__left { background: #FFB21C; }
.nutrient-cat-micro .nutrient-split__left     { background: #D24E30; }
.nutrient-cat-non .nutrient-split__left       { background: #3A79C3; }

/* Left-bleed: the colored panel needs to extend past the container's left
   edge all the way to the viewport edge. The ::before sits absolutely to
   the LEFT of the column with the same bg color and full row height. */
.nutrient-split__left::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 100vw;
    background: inherit;
    z-index: 0;
}
/* Text content sits ABOVE the colored bg via natural stacking. The
   isolation:isolate on the parent creates a new stacking context so any
   ::before inside doesn't compete with sibling sections. */
.nutrient-split__left > * {
    position: relative;
    z-index: 1;
}

.nutrient-split__title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #fff;
    margin: 0 0 22px;
    line-height: 1;
}
.nutrient-split__symbol {
    font-size: 72px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}
.nutrient-split__name {
    font-size: 48px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.nutrient-split__intro {
    font-size: 15px;
    line-height: 1.8;
    color: #fff;
    margin: 0 0 36px;
    max-width: 600px;
}
.nutrient-split__intro p { margin: 0 0 14px; }
.nutrient-split__intro p:last-child { margin-bottom: 0; }

/* Știați Că heading inside the left panel */
.nutrient-stiati__heading {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 24px;
    line-height: 1;
}
/* Override the green line-accent inside this heading to match (yellow for green bg) */
.nutrient-cat-macro .nutrient-stiati__heading .line-accent::before     { background: #FFB21C; }
.nutrient-cat-secondary .nutrient-stiati__heading .line-accent::before { background: #fff; }
.nutrient-cat-micro .nutrient-stiati__heading .line-accent::before     { background: #FFB21C; }
.nutrient-cat-non .nutrient-stiati__heading .line-accent::before       { background: #FFB21C; }

/* Stiati Ca swiper — one card visible, prev/next arrows on the right */
.nutrient-swiper {
    position: relative;
    padding-right: 80px;
}
.nutrient-swiper__track {
    position: relative;
    background: #fff;
    border-radius: 4px;
    min-height: 160px;
}
.nutrient-swiper__slide {
    display: none;
    padding: 28px 30px;
    color: #1A1C1E;
}
.nutrient-swiper__slide.is-active {
    display: block;
    animation: nutrient-swiper-fade 0.3s ease;
}
@keyframes nutrient-swiper-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nutrient-swiper__slide-title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 0 0 10px;
    line-height: 1.3;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.nutrient-swiper__slide-num {
    color: #1A1C1E;
    font-weight: 700;
}
.nutrient-swiper__slide-body {
    font-size: 14px;
    line-height: 1.7;
    color: #2C2E30;
}
.nutrient-swiper__slide-body p { margin: 0 0 10px; }
.nutrient-swiper__slide-body p:last-child { margin-bottom: 0; }

/* Prev/Next buttons — column on the right, yellow squares with arrow */
.nutrient-swiper__nav {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nutrient-swiper__btn {
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 4px;
    background: #FFB21C;
    color: #fff;
    font-size: 32px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease;
}
.nutrient-swiper__btn:hover { background: #F79F07; transform: translateX(-2px); }
.nutrient-swiper__btn span { display: block; margin-top: -4px; }
/* Macro (green) uses green-darker arrow buttons; others keep yellow per production */
.nutrient-cat-macro .nutrient-swiper__btn { background: #00A95B; }
.nutrient-cat-macro .nutrient-swiper__btn:hover { background: #00915A; }

/* =====================================================================
   PLANT IMAGE + HOTSPOTS (right panel of the split section)
   ===================================================================== */
.nutrient-split__right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    background: #fff;
}
.nutrient-plant {
    position: relative;
    width: 221px;
    height: 500px;
    flex-shrink: 0;
}
.nutrient-plant__img {
    width: 221px;
    height: 500px;
    object-fit: contain;
    display: block;
}
.nutrient-plant__hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #FFB21C;
    color: #fff;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nutrient-plant__hotspot:hover {
    transform: translate(-50%, -50%) scale(1.1);
}
.nutrient-plant__hotspot.active-point {
    animation: nutrient-pulse 1.5s infinite;
}
@keyframes nutrient-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 178, 28, 0.7); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 178, 28, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 178, 28, 0); }
}

/* =====================================================================
   SECTION 4 — Ghid de utilizare (full-width gray-bg prose)
   ===================================================================== */
.nutrient-section {
    background: #F6F7F9;
    padding: 70px 0;
}
.nutrient-section--simptome { background: #fff; }
.nutrient-section__title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #1A1C1E;
    margin: 0 0 30px;
    line-height: 1.2;
}
.nutrient-prose {
    font-size: 15px;
    line-height: 1.85;
    color: #2C2E30;
    max-width: 980px;
}
.nutrient-prose p { margin: 0 0 14px; }
.nutrient-prose p:last-child { margin-bottom: 0; }
.nutrient-prose strong { color: #1A1C1E; font-weight: 700; }
.nutrient-prose h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 24px 0 12px;
    color: #1A1C1E;
}
.nutrient-prose ul, .nutrient-prose ol { margin: 0 0 16px; padding-left: 22px; }
.nutrient-prose li { margin-bottom: 6px; line-height: 1.75; }

/* =====================================================================
   SECTION 5 — Simptome de carență (split: prose + image carousel)
   ===================================================================== */
.nutrient-simptome__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}
.nutrient-simptome__right {
    position: relative;
}

/* Image carousel — single image, prev/next yellow buttons overlaying sides */
.nutrient-gallery-slider {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #F2F4F0;
}
.nutrient-gallery-slider__track {
    position: relative;
    min-height: 400px;
}
/* Gallery slides — stacked absolutely so switching never reflows the
   container. The active slide is opacity:1 + pointer-events:auto; others
   are hidden via opacity (not display:none) so the browser keeps their
   images decoded and ready. No translateY in the transition — that was
   causing the visible "jump up" when scrolling to the next image. */
.nutrient-gallery-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.nutrient-gallery-slider__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.nutrient-gallery-slider__slide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}
.nutrient-gallery-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 4px;
    background: #FFB21C;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
}
.nutrient-gallery-slider__btn:hover { background: #F79F07; }
.nutrient-gallery-slider__btn span { display: block; margin-top: -4px; }
.nutrient-gallery-slider__btn--prev { left: 12px; }
.nutrient-gallery-slider__btn--next { right: 12px; }
.nutrient-gallery-slider__credits {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 14px 0 0;
}

/* =====================================================================
   SECTION 6 — PREV/NEXT PAGER (full-width, two buttons)
   Blue button (prev) + green button (next), with arrow at outer edge.
   ===================================================================== */
.nutrient-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #F6F7F9;
}
.nutrient-pager__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 30px 48px;
    text-decoration: none;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    transition: background 0.18s ease;
}
/* Force white text on hover/focus — the global `a:hover { color: green }`
   rule would otherwise turn the label green-on-green and make it unreadable. */
.nutrient-pager__link:hover,
.nutrient-pager__link:focus,
.nutrient-pager__link:active,
.nutrient-pager__link:visited { color: #fff; }
.nutrient-pager__link--prev { justify-content: flex-start; }
.nutrient-pager__link--next { justify-content: flex-end; }
/* Category-driven colors — each pager button matches the destination
   element's color in the periodic chart on /nutritia-plantelor/.
   Hover values mirror the chart's own hover-darken variants. */
.nutrient-pager__link.nutrient-cat-macro       { background: #81BA39; }
.nutrient-pager__link.nutrient-cat-macro:hover { background: #6B9F28; }
.nutrient-pager__link.nutrient-cat-secondary       { background: #E4A835; }
.nutrient-pager__link.nutrient-cat-secondary:hover { background: #D69C2E; }
.nutrient-pager__link.nutrient-cat-micro       { background: #D24E30; }
.nutrient-pager__link.nutrient-cat-micro:hover { background: #BB4226; }
.nutrient-pager__link.nutrient-cat-non       { background: #5F92CE; }
.nutrient-pager__link.nutrient-cat-non:hover { background: #3A79C3; }
.nutrient-pager__arrow { font-size: 22px; line-height: 1; }
.nutrient-pager__label { line-height: 1.2; }

/* =====================================================================
   BOLI ȘI DĂUNĂTORI — disease/pest browser
   Three views:
     1. Landing /boli-daunatori/         — 3-card crop-category grid
     2. Parent archive (e.g. Culturi)    — title + image-right + child cards
     3. Child archive (e.g. Cereale)     — image-left + disease list right
     4. Single disease (CPT)             — image-left + title + CTA right
   Plus the "Cereți o Recomandare" sunset CTA banner used on all 3 views.
   ===================================================================== */

/* --- LANDING & PARENT ARCHIVE: use the shared .cat-card / .grid--cards
       pattern from /produse/ for visual consistency. Just set section
       padding + bg around the grid here. --- */
.boli-cat-grid-section { padding: 80px 0; background: var(--color-bg, #fff); }
.boli-children-section { padding: 60px 0 100px; background: var(--color-bg, #fff); }

/* --- "Cereți o Recomandare" sunset CTA --- */
.boli-recommend-cta {
    background-image: url('https://elitagrotehnologie.md/wp-content/uploads/2020/02/small-farm-2-4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    position: relative;
}
.boli-recommend-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 50%);
    pointer-events: none;
}
.boli-recommend-cta .np-container { position: relative; z-index: 1; }
.boli-recommend-cta__title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 38px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 28px;
    line-height: 1.2;
}
.boli-recommend-cta__btn {
    display: inline-flex;
    align-items: stretch;
    text-decoration: none;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    transition: filter 0.18s ease;
}
.boli-recommend-cta__btn:hover { filter: brightness(0.92); color: #fff; }
.boli-recommend-cta__btn-label {
    background: #FFB21C;
    padding: 18px 32px;
    display: inline-flex;
    align-items: center;
    color: #fff;
}
.boli-recommend-cta__btn-arrow {
    background: #F79F07;
    padding: 18px 22px;
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    line-height: 1;
}

/* --- Back link (shared across views) --- */
.boli-back-wrap { background: #F6F7F9; padding: 28px 0 8px; }
.boli-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.18s ease;
}
.boli-back:hover { color: var(--color-green); }
.boli-back__arrow { color: var(--color-green); font-size: 16px; transition: transform 0.18s ease; }
.boli-back:hover .boli-back__arrow { transform: translateX(-3px); }

/* --- 2. PARENT ARCHIVE styling — handled by shared .hero + .grid--cards + .cat-card (no separate rules needed) --- */

/* --- 3. CHILD ARCHIVE: hero banner + slim description + disease card grid

   Clean redesign: replaces the previous image-left + huge-title +
   UPPERCASE-row list with a hero/grid pattern that matches the rest of
   the site (produse, nutritia-plantelor). Scannable, mobile-friendly,
   keeps disease titles legible without screaming. --- */
.boli-crop-hero { min-height: 320px; }

.boli-crop-desc {
    padding: 50px 0 10px;
    background: var(--color-bg, #fff);
}
.boli-crop-desc__inner {
    max-width: 760px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    color: #2C2E30;
}
.boli-crop-desc__inner p { margin: 0 0 14px; }
.boli-crop-desc__inner p:last-child { margin-bottom: 0; }

.boli-crop-list {
    padding: 50px 0 90px;
    background: var(--color-bg, #fff);
}
.boli-crop-list__heading {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #1A1C1E;
    margin: 0 0 32px;
    line-height: 1.2;
}

/* Disease grid: 3-column on desktop, 2 on tablet, 1 on phone. */
.boli-disease-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.boli-disease-tile {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.boli-disease-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.1);
    color: inherit;
}
.boli-disease-tile__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #ECECEC;
}
.boli-disease-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.boli-disease-tile:hover .boli-disease-tile__img { transform: scale(1.04); }
.boli-disease-tile__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.boli-disease-tile__title {
    margin: 0;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #1A1C1E;
    /* No uppercase — keeps Latin binomials legible and reduces visual weight */
    letter-spacing: 0;
}
.boli-disease-tile__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-green);
}
.boli-disease-tile:hover .boli-disease-tile__link { color: var(--color-green-dark); }
.boli-disease-empty {
    color: var(--color-text-muted, #6B7280);
    font-style: italic;
    font-size: 15px;
}

/* --- 4. SINGLE DISEASE DETAIL ---
   Hero banner + 2-col body (article + sticky CTA aside) + related grid.
   Replaces the old 50/50 split with the huge bleed image. --- */
.boli-detail-hero__latin {
    font-size: 18px;
    opacity: 0.9;
    margin-top: 4px;
    letter-spacing: 0.01em;
}
.boli-detail-hero__latin em { font-style: italic; }

/* "Măriți imaginea" button overlaid on the disease hero — bottom-right
   floating action button, sits above the gradient overlay. Renders as
   a <label for> so the pure-CSS checkbox-hack lightbox can toggle. */
.boli-detail-hero { position: relative; }
.boli-detail-hero__enlarge {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 16px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    z-index: 3;
    user-select: none;
}
.boli-detail-hero__enlarge:hover {
    background: rgba(0, 0, 0, 0.75);
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-1px);
}
.boli-detail-hero__enlarge svg { flex: 0 0 18px; }

/* Lightbox modal: hidden by default, shown when the sibling checkbox is
   checked. Lives at page scope (not inside .hero) so it covers the whole
   viewport. Pure-CSS, JS-optional. */
.boli-lightbox-toggle {
    /* Hidden but accessible. Positioned absolute so it never affects
       layout, and visually-hidden via clip so screen readers can still
       reach the label fallback. */
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    pointer-events: none;
}
.boli-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    padding: 40px 24px;
}
.boli-lightbox-toggle:checked ~ .boli-lightbox {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.boli-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 14, 0.92);
    cursor: zoom-out;
}
.boli-lightbox__inner {
    position: relative;
    max-width: min(1400px, 95vw);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    /* Sit above the backdrop label so it captures interactions */
    z-index: 1;
}
.boli-lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 160px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.boli-lightbox__caption {
    margin: 0;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    text-align: center;
    color: rgba(255,255,255,0.95);
    font-size: 15px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.boli-lightbox__caption-name { font-weight: 600; }
.boli-lightbox__caption-latin {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}
.boli-lightbox__close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    z-index: 2;
}
.boli-lightbox__close:hover {
    background: rgba(255,255,255,0.25);
    transform: rotate(90deg);
}
/* When the lightbox is open, lock body scroll. Driven by a body class
   the inline script toggles on the toggle's `change` event. */
body.boli-lightbox-open { overflow: hidden; }

.boli-detail { padding: 50px 0 80px; background: var(--color-bg, #fff); }
.boli-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 60px;
    align-items: start;
}
.boli-detail__main {
    min-width: 0;
    max-width: 760px;
}
.boli-detail__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: var(--color-text-muted, #6B7280);
    letter-spacing: 0.02em;
}
.boli-detail__tag-label { font-weight: 500; }
.boli-detail__tag-link {
    font-weight: 600;
    color: var(--color-green);
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid rgba(0, 188, 101, 0.25);
    border-radius: 999px;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.boli-detail__tag-link:hover {
    background: rgba(0, 188, 101, 0.08);
    border-color: rgba(0, 188, 101, 0.5);
    color: var(--color-green-dark);
}
.boli-detail__prose {
    font-size: 16px;
    line-height: 1.85;
    color: #2C2E30;
}
.boli-detail__prose p { margin: 0 0 16px; }
.boli-detail__prose p:last-child { margin-bottom: 0; }
.boli-detail__prose strong { color: #1A1C1E; font-weight: 700; }
.boli-detail__prose em { font-style: italic; }
.boli-detail__prose ul, .boli-detail__prose ol { margin: 0 0 18px; padding-left: 22px; }
.boli-detail__prose ul li, .boli-detail__prose ol li { margin-bottom: 6px; }
.boli-detail__prose h2 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 32px 0 14px;
    line-height: 1.3;
}
.boli-detail__prose h3 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 26px 0 10px;
    line-height: 1.3;
}
.boli-detail__prose a {
    color: var(--color-green);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.boli-detail__prose a:hover { color: var(--color-green-dark); }
/* Belt-and-suspenders: hide AddToAny share buttons even if the PHP
   filter doesn't catch them. */
.boli-detail__prose .addtoany_share_save_container,
.boli-detail__prose .a2a_kit { display: none !important; }

.boli-detail__aside {
    position: sticky;
    top: calc(var(--header-h-desktop, 72px) + var(--admin-bar-h, 0px) + 24px);
}
.boli-detail__cta-card {
    background: linear-gradient(135deg, #1F2125 0%, #2D3036 100%);
    color: #fff;
    padding: 32px 28px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.boli-detail__cta-title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 14px;
}
.boli-detail__cta-body {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    margin: 0 0 22px;
}
.boli-detail__cta {
    display: inline-flex;
    align-items: stretch;
    text-decoration: none;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    width: 100%;
    transition: filter 0.18s ease;
}
.boli-detail__cta:hover { filter: brightness(0.95); color: #fff; }
.boli-detail__cta-label {
    background: #FFB21C;
    padding: 16px 22px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}
.boli-detail__cta-arrow {
    background: #F79F07;
    padding: 16px 18px;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    line-height: 1;
}
.boli-detail__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    color: #fff;
    text-decoration: none;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.18s ease;
}
.boli-detail__phone:hover { color: var(--color-green); }
.boli-detail__phone svg path {
    fill: var(--color-green) !important;
    stroke: var(--color-green) !important;
}

/* Related diseases block */
.boli-detail-related {
    padding: 60px 0 90px;
    background: #F6F7F9;
}
.boli-detail-related__heading {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #1A1C1E;
    margin: 0 0 28px;
    line-height: 1.2;
}

/* Legacy shortcode markup (.boala-row) used by [boli-daunatori] — kept
   minimal since the new taxonomy template uses .boli-disease-tile. */
.boala-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    background: #fff;
    margin-bottom: 18px;
    overflow: hidden;
}
.boala-row .boala-img {
    display: block;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1 / 1;
}
.boala-row .boala-content { padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.boala-row .boala-title { font-size: 16px; font-weight: 600; margin: 0; text-transform: uppercase; }
.boala-row .boala-link { font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--color-green); text-decoration: none; }

/* =====================================================================
   /producator/<slug>/ — Brand archive
   Hero with logo + brand name + product count, product grid, empty
   state with friendly CTA. Reuses .hero, .grid--products and the
   shared button language for consistency with the rest of the site.
   ===================================================================== */
.brand-hero {
    /* Soft neutral background — logos read better on plain canvas than
       on a busy photo. Brand pages should feel quiet and showroom-like. */
    background-image: none !important;
    background: linear-gradient(180deg, #F6F7F9 0%, #FFFFFF 100%);
    min-height: 280px;
}
.brand-hero .hero__overlay { display: none; }
.brand-hero__content {
    /* Override the default hero padding to give the logo room */
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}
.brand-hero__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    padding: 16px;
    flex: 0 0 auto;
}
.brand-hero__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.brand-hero__text { min-width: 0; flex: 1 1 auto; }
.brand-hero .hero__title {
    color: #1A1C1E;
    margin: 0 0 6px;
}
.brand-hero .hero__desc {
    color: var(--color-text-muted, #6B7280);
    font-size: 15px;
    margin: 0;
}

.brand-desc { padding: 36px 0 0; background: var(--color-bg, #fff); }
.brand-desc__inner {
    max-width: 760px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    color: #2C2E30;
}
.brand-desc__inner p:last-child { margin-bottom: 0; }

.brand-products { padding: 50px 0 90px; background: var(--color-bg, #fff); }

/* Empty state — rendered when the brand term has no products yet */
.brand-empty {
    display: flex;
    justify-content: center;
}
.brand-empty__inner {
    max-width: 560px;
    text-align: center;
    padding: 56px 32px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.04);
}
.brand-empty__icon {
    color: var(--color-green);
    margin: 0 auto 22px;
    display: block;
    opacity: 0.85;
}
.brand-empty__title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 0 0 14px;
    line-height: 1.3;
}
.brand-empty__body {
    color: #4B5258;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 26px;
}
.brand-empty__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.brand-empty__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: var(--color-green);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.18s ease;
}
.brand-empty__actions .btn:hover { background: var(--color-green-dark); color: #fff; }
.brand-empty__link {
    color: var(--color-text-muted, #6B7280);
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.18s ease;
}
.brand-empty__link:hover { color: var(--color-green); }

/* Product grid for the brand archive — uses Woo's default `.products`
   class with our spacing on top. WC theme support for the
   wc-product-gallery flag isn't required here. */
.brand-products .products,
.brand-products ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.brand-products .products li.product {
    margin: 0;
    width: auto;
    padding: 0;
}
.brand-products .products li.product a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.brand-products .products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: #F2F4F6;
    border-radius: 6px 6px 0 0;
}
.brand-products .products li.product .woocommerce-loop-product__title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 14px 0 6px;
    padding: 0;
    line-height: 1.3;
}
.brand-products .products li.product .price {
    color: var(--color-green-dark);
    font-weight: 700;
}
.brand-products .products li.product .button {
    margin-top: 10px;
    background: var(--color-green);
    color: #fff;
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.brand-products .products li.product .button:hover { background: var(--color-green-dark); }

/* Pagination — list of pages, styled as pill buttons */
.brand-products__pagination {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}
.brand-products__pagination ul.page-numbers,
.brand-products__pagination .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.brand-products__pagination li { margin: 0; }
.brand-products__pagination a.page-numbers,
.brand-products__pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    color: #1A1C1E;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.brand-products__pagination a.page-numbers:hover {
    background: rgba(0, 188, 101, 0.08);
    border-color: var(--color-green);
    color: var(--color-green);
}
.brand-products__pagination span.page-numbers.current {
    background: var(--color-green);
    border-color: var(--color-green);
    color: #fff;
}
.brand-products__pagination span.page-numbers.dots {
    border: none;
    background: transparent;
}

/* =====================================================================
   /produse/<slug>/ — Product Category Archive (ported verbatim from the
   previous child theme so the design is pixel-identical)
   ===================================================================== */

#elitag-category-page { background: #F6F7F9; }

/* Product grid section */
.elitag-cat-products {
    padding: 30px 0 60px;
    background: #F6F7F9;
}
.elitag-cat-products-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
.elitag-cat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
}
.elitag-cat-empty {
    text-align: center;
    padding: 60px 20px;
    color: #919699;
    font-size: 15px;
}

/* Product card (shared with related-products elsewhere) */
.elitag-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.elitag-related-card {
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}
.elitag-related-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}
.elitag-related-img-wrap {
    display: block;
    overflow: hidden;
    height: 180px;
    background: #F6F7F9;
}
.elitag-related-img-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}
.elitag-related-card:hover .elitag-related-img-bg { transform: scale(1.05); }
.elitag-related-no-img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C4C8CC;
    font-size: 22px;
}
.elitag-related-body { padding: 14px 16px; }
.elitag-related-name {
    display: block;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1A1C1E;
    line-height: 1.35;
    margin-bottom: 8px;
    text-decoration: none;
    min-height: 36px;
}
.elitag-related-name:hover { color: #009954; }
.elitag-related-brand {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #919699 !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 2px 0 4px 0 !important;
}
.elitag-related-price {
    font-size: 15px;
    font-weight: 700;
    color: #FFB21C;
    margin-bottom: 12px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
.elitag-related-price .woocommerce-Price-amount { color: inherit !important; }
.elitag-related-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #F0F1F3;
    padding-top: 10px;
}
.elitag-related-link-details {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #919699;
    text-decoration: none;
}
.elitag-related-link-details:hover { color: #1A1C1E; }
.elitag-related-link-buy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #009954;
    text-decoration: none;
    background: #F0FFF8;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background 0.15s;
}
.elitag-related-link-buy:hover { background: #e0fff0; color: #007a42; }

/* =====================================================================
   Single Product page — /produs/<slug>/ (ported from the previous child
   theme, consolidated from v2.6 image-fill + v3.1 right column rules)
   ===================================================================== */

#elitag-product-page { background: #F6F7F9; min-height: 60vh; }

/* Breadcrumb — sits below the global header */
.elitag-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #E6E7EB;
}
.elitag-breadcrumb-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.elitag-breadcrumb .elitag-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #009954;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.elitag-breadcrumb .elitag-back-link:hover { color: #007a42; }
.elitag-bc-sep { color: #C4C8CC; }
.elitag-bc-cat {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #616466;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.elitag-bc-cat:hover { color: #1A1C1E; }

/* Main 2-col wrap: 480px gallery + flex info */
.elitag-product-wrap {
    max-width: 1280px;
    margin: 24px auto;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

/* LEFT: gallery */
.elitag-product-gallery {
    background: #F6F7F9;
    border-right: 1px solid #E6E7EB;
    display: flex;
    flex-direction: column;
}
.elitag-main-image-wrap {
    position: relative;
    background: #F6F7F9;
    overflow: hidden;
    min-height: 400px;
    height: 100%;
}
.elitag-img-fill {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background-size: 120%;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: zoom-in;
    transition: background-size 0.3s ease;
}
.elitag-img-fill:hover { background-size: 140%; }
.elitag-no-image {
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C4C8CC;
    font-size: 14px;
    background: #F6F7F9;
}
.elitag-thumbnails {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid #E6E7EB;
    flex-wrap: wrap;
}
.elitag-thumb {
    width: 56px;
    height: 56px;
    border: 2px solid #E6E7EB;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s;
}
.elitag-thumb.active, .elitag-thumb:hover { border-color: #00BC65; }
.elitag-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* RIGHT: product info */
.elitag-product-info {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
}

.elitag-product-header { padding-bottom: 0; }
.elitag-product-title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    color: #1A1C1E;
    letter-spacing: -0.02em;
    margin: 0 0 10px 0;
    padding: 0;
    text-transform: none;
}
.elitag-header-sub {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.elitag-stars-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
}
.elitag-stars .star { color: #D7DBDE; font-size: 15px; }
.elitag-stars .star.filled { color: #FFB21C; }
.elitag-reviews-count,
.elitag-no-reviews-link {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #009954;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.elitag-reviews-count:hover,
.elitag-no-reviews-link:hover { text-decoration: underline; }

.elitag-sku-procurat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.elitag-sku-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #F6F7F9;
    border: 1px solid #E6E7EB;
    border-radius: 4px;
    padding: 3px 8px;
}
.elitag-sku-label-sm {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #919699;
}
.elitag-sku-val-sm {
    font-size: 12px;
    font-weight: 600;
    color: #2E3133;
    letter-spacing: 0.03em;
}
.elitag-procurat-muted {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #919699;
    font-weight: 500;
}
.elitag-procurat-muted svg { color: #C4C8CC; flex-shrink: 0; }

.elitag-divider {
    height: 1px;
    background: #E6E7EB;
    margin: 16px 0;
}

.elitag-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
}
.elitag-price-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #919699;
}
.elitag-price-value {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #FFB21C;
    letter-spacing: -0.01em;
    line-height: 1;
}
.elitag-price-value .woocommerce-Price-amount {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.elitag-short-desc {
    font-size: 14px;
    line-height: 1.65;
    color: #616466;
    margin-bottom: 16px;
}
.elitag-description {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 16px;
}
.elitag-description p { margin-bottom: 10px; }
.elitag-description p:last-child { margin-bottom: 0; }

/* Inline meta — Categorie · Producător */
.elitag-meta-inline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
}
.elitag-meta-chip-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #919699;
    white-space: nowrap;
}
.elitag-meta-chip-val {
    font-size: 12px;
    font-weight: 500;
    color: #616466;
}
a.elitag-brand-link,
.elitag-meta-chip-val.elitag-brand-link {
    color: #009954;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}
a.elitag-brand-link:hover { text-decoration: underline; }
.elitag-meta-sep {
    color: #D7DBDE;
    font-size: 14px;
    font-weight: 300;
    padding: 0 2px;
    line-height: 1;
    align-self: center;
}

/* Add-to-cart — flex row with quantity + green button, right slab is darker green */
.elitag-atc-wrap .cart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap;
}
.elitag-atc-wrap .quantity { width: auto !important; margin: 0 !important; }
.elitag-atc-wrap .quantity input.qty {
    width: 52px !important;
    height: 46px !important;
    border: 1px solid #D7DBDE !important;
    border-radius: 6px !important;
    background: #fff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: center !important;
    color: #1A1C1E !important;
    padding: 0 !important;
}
.elitag-atc-wrap button.single_add_to_cart_button {
    /* No flex:1 — the button doesn't need to fill the whole row. A
       240px cap keeps it visually balanced next to the quantity input
       while still being a comfortable click target. */
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 200px !important;
    max-width: 240px !important;
    height: 46px !important;
    background: #00BC65 !important;
    border: none !important;
    border-right: 52px solid #00A95B !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    cursor: pointer !important;
    padding: 0 22px !important;
    position: relative !important;
    transition: background 0.15s ease !important;
}
.elitag-atc-wrap button.single_add_to_cart_button:hover {
    background: #00A95B !important;
    border-right-color: #00BC65 !important;
}
.elitag-atc-wrap button.single_add_to_cart_button::after {
    /* Cart icon embedded via inline SVG data URI so we don't depend on
       an external asset file. White SVG, 22×22, centered on the right slab. */
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center/contain no-repeat !important;
    position: absolute !important;
    right: -37px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* Spinner shown while AJAX add-to-cart is in flight */
.elitag-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: elitag-spin 0.7s linear infinite;
}
@keyframes elitag-spin { to { transform: rotate(360deg); } }

/* Reviews section */
.elitag-reviews-section {
    background: #fff;
    padding: 36px 0 50px;
    border-top: 1px solid #E6E7EB;
}
.elitag-reviews-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
/* WC outputs its own h2.woocommerce-Reviews-title — match it to the
   rest of our section headings (Montserrat 20px + green line accent). */
.elitag-reviews-section .woocommerce-Reviews-title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #1A1C1E;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-transform: none;
    letter-spacing: -0.01em;
}
.elitag-reviews-section .woocommerce-Reviews-title::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 3px;
    background: #00BC65;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Cloudflare Turnstile widget inside the review form — vertical spacing
   so it doesn't crowd the submit button. */
/* Cloudflare Turnstile widget — universal styles. The widget is
   wrapped in <div class="elitag-turnstile elitag-turnstile--{context}">
   so we can target context-specific spacing if needed later (e.g.
   --cf7, --comment). Default: tight on top, gap below before submit. */
.elitag-turnstile { margin: 0 0 14px; }
/* Suppress any stray CF7 invalid-tip / red icon next to the Turnstile
   widget. The widget isn't a real CF7 form tag so any error indicator
   attached to it floats awkwardly over the form-level message below. */
.elitag-turnstile .wpcf7-not-valid-tip,
.elitag-turnstile::before,
.elitag-turnstile::after {
    display: none !important;
}
.elitag-turnstile .cf-turnstile { display: inline-block; }
/* On CF7 forms outside the np-form, slightly tighter. */
.wpcf7-form .elitag-turnstile { margin: 4px 0 12px; }
/* Inside the np-form (flex+gap container) the parent handles spacing —
   widget itself stays margin-free so it doesn't double-count. */
.np-form__form .elitag-turnstile { margin: 0; }

/* Related products section (also used by product page for "Produse Similare") */
.elitag-related-section {
    background: #F6F7F9;
    padding: 36px 0 50px;
}
.elitag-related-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
.elitag-related-title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #1A1C1E;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-transform: none;
    letter-spacing: -0.01em;
}
.elitag-title-line {
    display: inline-block;
    width: 28px;
    height: 3px;
    background: #00BC65;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Lightbox */
#elitag-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
#elitag-lightbox.active { display: flex; }
#elitag-lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}
#elitag-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    cursor: default;
}
#elitag-lightbox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 36px;
    height: 36px;
    background: #fff;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #1A1C1E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#elitag-lightbox-close:hover { background: #f0f0f0; }

/* Responsive */
@media (max-width: 1024px) {
    .elitag-product-wrap { grid-template-columns: 1fr; margin: 16px; }
    .elitag-product-gallery { border-right: none; border-bottom: 1px solid #E6E7EB; }
    .elitag-main-image-wrap, .elitag-img-fill, .elitag-no-image { min-height: 320px; }
    .elitag-product-info { padding: 28px 24px; }
}
@media (max-width: 767px) {
    .elitag-breadcrumb-inner { padding: 10px 16px; }
    .elitag-product-wrap { margin: 12px; }
    .elitag-product-info { padding: 20px 16px; }
    .elitag-product-title { font-size: 22px; }
    .elitag-main-image-wrap, .elitag-img-fill, .elitag-no-image { min-height: 260px; }
    .elitag-reviews-inner, .elitag-related-inner { padding: 0 16px; }
    .elitag-atc-wrap .cart { flex-direction: column; align-items: stretch !important; }
    .elitag-atc-wrap .quantity input.qty { width: 100% !important; }
    .elitag-atc-wrap button.single_add_to_cart_button { min-width: 0 !important; max-width: none !important; width: 100% !important; }
}

/* Responsive */
@media (max-width: 1024px) {
    .elitag-cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
    .elitag-cat-products-inner { padding: 14px 16px; }
    .elitag-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .elitag-related-img-wrap, .elitag-related-no-img { height: 140px; }
}

/* =====================================================================
   Contact page — /contact/
   Hero + 2-col body (info cards left, form card right) + Google Maps.
   Form card is plain white; the form inside reuses the .np-form__form
   field styling (paired rows, uniform 10px gap, yellow submit) so
   layout/spacing is consistent with other forms — but no yellow
   background or sun graphic. The form card is just a clean white box.
   ===================================================================== */
.contact-section {
    background: #fff;
    padding: 60px 0 80px;
}
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Info cards on the left */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.contact-card {
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 8px;
    padding: 24px 28px;
}
.contact-card__title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 0 0 14px;
    line-height: 1.3;
}
.contact-card__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #1A1C1E;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.55;
    transition: color 0.18s ease;
}
a.contact-card__row:hover { color: var(--color-green); }
.contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-green);
    margin-top: 2px;
}
.contact-card__text { display: block; }

.contact-card__social {
    display: flex;
    gap: 14px;
}
.contact-card__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F6F7F9;
    color: var(--color-green);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.contact-card__social-link:hover {
    background: var(--color-green);
    color: #fff;
    transform: translateY(-2px);
}

/* Form card on the right — plain white box with the form inside.
   No yellow background, no sun graphic, no special bg treatment.
   The form's internal styling (paired rows, fields, submit button)
   comes from the .np-form__right .wpcf7-form rules — picked up because
   the card also has the `np-form__right` class.

   `margin-top: -120px` lifts the card so it overlaps the hero from
   below, matching the production layout where the form floats over
   the wheat-field photo. On tablet/mobile the overlap is removed so
   the card doesn't run off the top. */
.contact-form-card {
    background: #fff;
    border-radius: 8px;
    padding: 36px 36px 32px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.10);
    margin-top: -120px;
    position: relative;
    z-index: 2;
}
.contact-form-card__title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 0 0 24px;
    line-height: 1.3;
}

/* The CF7 form inside renders with html_class="np-form__form contact-form"
   so it inherits all the np-form field styling (paired rows, flex+gap
   spacing, yellow submit). Textarea styling is added here since the
   contact form has a [textarea] field that the nutritia form doesn't. */
.contact-form-card .np-form__form textarea {
    width: 100%;
    min-height: 110px;
    border: 1px solid #D7DBDE;
    border-radius: 4px;
    padding: 14px 16px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #1A1C1E;
    background: #fff;
    resize: vertical;
    transition: border-color 0.15s ease;
}
.contact-form-card .np-form__form textarea:focus {
    outline: none;
    border-color: #FFB21C;
}

/* Map at the bottom — full-width iframe, no chrome */
.contact-map {
    line-height: 0;
    background: #F6F7F9;
}
.contact-map iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Responsive — stack the 2 columns at tablet. */
@media (max-width: 900px) {
    .contact-section { padding: 40px 0 60px; }
    .contact-layout { grid-template-columns: 1fr; gap: 32px; }
    .contact-form-card { margin-top: 0; padding: 28px 24px; }
    .contact-form-card__title { font-size: 20px; margin-bottom: 18px; }
}
@media (max-width: 640px) {
    .contact-section { padding: 32px 0 48px; }
    .contact-card { padding: 20px 22px; }
    .contact-card__title { font-size: 16px; }
    .contact-card__row { font-size: 14px; }
    .contact-form-card { padding: 24px 18px; }
    .contact-map iframe { height: 380px; }
}

/* =====================================================================
   Thank-You page — /multumim-pentru-mesaj-contact/
   Centered success card shown after CF7 form submission. Reuses .btn
   and .np-container tokens so it feels native to the rest of the site.
   ===================================================================== */
.thanks-section {
    background: #fff;
    padding: 80px 0 100px;
}
.thanks-card {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 12px;
    padding: 56px 48px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}

/* Circular green checkmark — 84px disc with the icon centered inside.
   Uses currentColor so the SVG stroke inherits white. The disc itself
   gets the brand green. */
.thanks-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--color-green);
    color: #fff;
    margin: 0 auto 24px;
    box-shadow: 0 8px 24px rgba(0, 188, 101, 0.25);
}

.thanks-card__title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #1A1C1E;
    line-height: 1.3;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}
.thanks-card__body {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #444;
    margin: 0 0 12px;
}
.thanks-card__body--muted {
    color: #919699;
    font-size: 14px;
    margin-bottom: 28px;
}
.thanks-card__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 8px;
}
.thanks-card__actions .btn {
    /* Match the primary CTA dimensions used elsewhere (np-form submit,
       contact CTA) so the visual weight feels familiar. */
    padding: 14px 26px;
    font-size: 12px;
    letter-spacing: 0.08em;
}
.thanks-card__link {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #616466;
    text-decoration: none;
    border-bottom: 1px dashed #C4C8CC;
    padding-bottom: 3px;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.thanks-card__link:hover {
    color: var(--color-green);
    border-bottom-color: var(--color-green);
}

@media (max-width: 640px) {
    .thanks-section { padding: 50px 0 70px; }
    .thanks-card { padding: 40px 28px; border-radius: 10px; }
    .thanks-card__icon { width: 68px; height: 68px; margin-bottom: 20px; }
    .thanks-card__icon svg { width: 34px; height: 34px; }
    .thanks-card__title { font-size: 22px; }
    .thanks-card__body { font-size: 14px; }
    .thanks-card__actions { flex-direction: column; gap: 14px; }
    .thanks-card__actions .btn { width: 100%; }
}

/* =====================================================================
   Cart page — /cos/
   Styles WC's default cart output to match the rest of the site. Two
   columns on desktop (items table + totals sidebar), stacks on mobile.
   No template overrides — pure CSS on top of WC's stock markup, which
   means cart updates won't break across WC versions.
   ===================================================================== */
.woocommerce-cart .site-main { background: #F6F7F9; padding-bottom: 60px; }
.woocommerce-cart .woocommerce {
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    padding: 40px var(--container-pad, 32px) 0;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}
.woocommerce-cart .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}
/* Cart form (left column) */
.woocommerce-cart form.woocommerce-cart-form {
    grid-column: 1;
    background: #fff;
    border-radius: 8px;
    padding: 12px 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid #E6E7EB;
}

/* Cart items table — cleaner, more breathable */
.woocommerce-cart table.shop_table.cart {
    border: none;
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    background: transparent;
}
.woocommerce-cart table.shop_table.cart th {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #919699;
    background: transparent;
    border: none;
    border-bottom: 1px solid #E6E7EB;
    padding: 14px 18px;
    text-align: left;
}
.woocommerce-cart table.shop_table.cart td {
    border: none;
    border-bottom: 1px solid #F0F1F3;
    padding: 18px;
    vertical-align: middle;
    background: transparent;
    color: #1A1C1E;
    font-size: 14px;
}
.woocommerce-cart table.shop_table.cart tr:last-child td { border-bottom: none; }

/* Remove (×) cell */
.woocommerce-cart .product-remove { width: 44px; padding-left: 14px !important; padding-right: 0 !important; }
.woocommerce-cart .product-remove .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F6F7F9;
    color: #919699 !important;
    font-size: 20px;
    line-height: 1;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-cart .product-remove .remove:hover {
    background: #FFE6E6;
    color: #C32F2F !important;
}

/* Thumbnail */
.woocommerce-cart .product-thumbnail { width: 96px; padding-left: 0 !important; }
.woocommerce-cart .product-thumbnail a {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #F6F7F9;
    border: 1px solid #E6E7EB;
}
.woocommerce-cart .product-thumbnail img,
.woocommerce-cart .product-thumbnail a img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    margin: 0;
    padding: 0;
}
/* When the product has no link wrapping the image, the <img> itself needs the styling */
.woocommerce-cart .product-thumbnail > img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 6px;
    border: 1px solid #E6E7EB;
}

/* Product name link */
.woocommerce-cart .product-name a {
    font-weight: 600;
    color: #1A1C1E;
    text-decoration: none;
    transition: color 0.15s ease;
}
.woocommerce-cart .product-name a:hover { color: var(--color-green); }

/* Price + subtotal */
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal {
    font-weight: 600;
    color: #1A1C1E;
}

/* Quantity stepper */
.woocommerce-cart .product-quantity .quantity { display: inline-flex; align-items: center; }
.woocommerce-cart .product-quantity input.qty {
    width: 56px;
    height: 38px;
    border: 1px solid #D7DBDE;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #1A1C1E;
    text-align: center;
    padding: 0;
    transition: border-color 0.15s ease;
}
.woocommerce-cart .product-quantity input.qty:focus {
    outline: none;
    border-color: #FFB21C;
}

/* Coupon row + update button (live in the actions <td>) */
.woocommerce-cart .actions {
    padding: 18px !important;
    background: #FAFBFC;
    border-top: 1px solid #E6E7EB !important;
}
.woocommerce-cart .actions .coupon { display: inline-flex; gap: 8px; align-items: center; }
.woocommerce-cart .actions input[name="coupon_code"] {
    height: 40px;
    padding: 0 14px;
    border: 1px solid #D7DBDE;
    border-radius: 6px;
    font-size: 13px;
    min-width: 180px;
}
.woocommerce-cart .actions .button {
    background: #fff !important;
    color: #1A1C1E !important;
    border: 1px solid #D7DBDE !important;
    border-radius: 6px !important;
    height: 40px !important;
    padding: 0 18px !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}
.woocommerce-cart .actions .button:hover {
    background: #F6F7F9 !important;
    border-color: #C4C8CC !important;
}
.woocommerce-cart .actions .button[disabled] {
    background: #F6F7F9 !important;
    color: #C4C8CC !important;
    cursor: not-allowed !important;
}

/* Totals sidebar (right column) */
.woocommerce-cart .cart-collaterals {
    grid-column: 2;
    width: auto !important;
    float: none !important;
}
.woocommerce-cart .cart_totals {
    width: 100% !important;
    float: none !important;
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.woocommerce-cart .cart_totals > h2 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 0 0 18px;
    padding: 0 0 14px;
    border-bottom: 1px solid #E6E7EB;
    letter-spacing: -0.01em;
}
.woocommerce-cart .cart_totals table.shop_table {
    border: none;
    margin: 0 0 22px;
    background: transparent;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
    border: none;
    background: transparent;
    padding: 10px 0;
    color: #1A1C1E;
    font-size: 14px;
    vertical-align: top;
}
.woocommerce-cart .cart_totals table.shop_table th {
    font-weight: 500;
    color: #616466;
    width: 40%;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
    font-weight: 700;
    font-size: 18px;
    color: #1A1C1E;
    padding-top: 16px;
    border-top: 1px solid #E6E7EB;
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
    font-weight: 700;
    color: #1A1C1E;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 16px;
    border-top: 1px solid #E6E7EB;
}
.woocommerce-cart .cart_totals .woocommerce-Price-amount { font-weight: inherit; color: inherit; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
}
.woocommerce-cart .cart_totals .shipping-calculator-button {
    color: var(--color-green) !important;
    text-decoration: none;
    font-weight: 600;
}
.woocommerce-cart .cart_totals .shipping-calculator-button:hover { text-decoration: underline; }

/* Checkout button — green, full-width inside the totals card */
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 52px !important;
    background: var(--color-green, #00BC65) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    box-shadow: 0 4px 14px rgba(0, 188, 101, 0.25) !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: #00A95B !important;
    transform: translateY(-1px);
}

/* Empty cart state */
.cart-empty {
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 8px;
    padding: 60px 40px;
    text-align: center;
    font-size: 16px;
    color: #616466;
    margin: 0 0 24px;
}
.return-to-shop { text-align: center; }
.return-to-shop .button {
    display: inline-flex !important;
    align-items: center !important;
    height: 48px !important;
    padding: 0 28px !important;
    background: var(--color-green, #00BC65) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
}
.return-to-shop .button:hover { background: #00A95B !important; }

/* Cross-sells block (WC adds this below cart-collaterals) */
.woocommerce-cart .cross-sells {
    grid-column: 1 / -1;
    margin-top: 28px;
}

/* Responsive */
@media (max-width: 1024px) {
    .woocommerce-cart .woocommerce {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px var(--container-pad, 20px) 0;
    }
}
@media (max-width: 640px) {
    /* === Cart page mobile layout === */

    /* Collapse the 2-column desktop grid */
    .woocommerce-cart .woocommerce {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 16px var(--container-pad, 12px) 0 !important;
    }
    .woocommerce-cart form.woocommerce-cart-form,
    .woocommerce-cart .cart-collaterals {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .woocommerce-cart .cart-collaterals .cart_totals {
        width: 100% !important;
        padding: 22px 18px !important;
        box-shadow: none !important;
    }

    /* The cart form is just a wrapper — drop its inner padding so we
       don't have double-card visuals */
    .woocommerce-cart form.woocommerce-cart-form {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Hide the table header — labels are baked into each item card. */
    .woocommerce-cart table.shop_table.cart thead,
    .woocommerce-cart table.shop_table.cart thead tr,
    .woocommerce-cart table.shop_table.cart thead th { display: none !important; }

    /* WC's `shop_table_responsive` class adds `::before { content: attr(data-title) }`
       on every td/th, which on mobile renders labels like "Produs:", "Preț:",
       "Sub-total:" before each value. Suppress site-wide on every WC table
       (items + totals) — our visual hierarchy doesn't need them. */
    .woocommerce-cart .shop_table_responsive td::before,
    .woocommerce-cart .shop_table_responsive th::before,
    .woocommerce-cart table.shop_table td::before,
    .woocommerce-cart table.shop_table th::before {
        content: none !important;
        display: none !important;
    }

    /* The items table itself becomes a stack of cards — no table styling. */
    .woocommerce-cart table.shop_table.cart {
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
    }
    .woocommerce-cart table.shop_table.cart tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Each item row → vertical card */
    .woocommerce-cart table.shop_table.cart tbody tr.cart_item {
        display: grid !important;
        grid-template-columns: 84px 1fr auto;
        grid-template-areas:
            "img name remove"
            "img qty  subtotal";
        gap: 6px 14px;
        align-items: center;
        padding: 16px;
        margin: 0 0 12px;
        background: #fff;
        border: 1px solid #E6E7EB;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.03);
        text-align: left !important;
    }
    .woocommerce-cart table.shop_table.cart tbody tr.cart_item td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }
    .woocommerce-cart table.shop_table.cart tbody td.product-thumbnail {
        grid-area: img;
        width: 84px !important;
    }
    .woocommerce-cart table.shop_table.cart tbody td.product-thumbnail img {
        width: 84px !important;
        height: 84px !important;
        object-fit: cover;
        border-radius: 8px;
        display: block;
    }
    .woocommerce-cart table.shop_table.cart tbody td.product-name {
        grid-area: name;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.35;
        color: #1A1C1E;
        align-self: start;
        justify-self: start !important;
        text-align: left !important;
        width: 100%;
    }
    .woocommerce-cart table.shop_table.cart tbody td.product-name a {
        color: #1A1C1E;
        text-decoration: none;
    }

    /* Kill the price cell entirely — the subtotal covers it on mobile.
       WC's stock CSS forces display:block; we go nuclear with
       visibility/dimensions in addition to display so it can't slip
       through any specificity battle. */
    .woocommerce-cart table.shop_table.cart tbody td.product-price,
    .woocommerce-cart .shop_table_responsive tbody td.product-price {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .woocommerce-cart table.shop_table.cart tbody td.product-quantity {
        grid-area: qty;
        justify-self: start;
    }
    .woocommerce-cart table.shop_table.cart tbody td.product-quantity .quantity {
        max-width: 100px;
    }
    .woocommerce-cart table.shop_table.cart tbody td.product-quantity input.qty {
        width: 80px;
        height: 36px;
        padding: 6px 8px;
        font-size: 14px;
        text-align: center;
        border: 1px solid #D7DBDE;
        border-radius: 8px;
        background: #fff;
    }
    .woocommerce-cart table.shop_table.cart tbody td.product-subtotal {
        grid-area: subtotal;
        justify-self: end;
        align-self: center;
        font-weight: 700;
        font-size: 16px;
        color: #1A1C1E;
        white-space: nowrap;
        text-align: right !important;
    }
    .woocommerce-cart table.shop_table.cart tbody td.product-remove {
        grid-area: remove;
        justify-self: end;
        align-self: start;
    }
    .woocommerce-cart table.shop_table.cart tbody td.product-remove a {
        width: 28px;
        height: 28px;
        line-height: 26px;
        font-size: 18px;
        text-align: center;
        color: #919699;
        background: #F6F7F9;
        border-radius: 50%;
        display: inline-block;
    }
    .woocommerce-cart table.shop_table.cart tbody td.product-remove a:hover {
        color: #fff;
        background: #C0392B;
    }

    /* Coupon + Update Cart button row */
    .woocommerce-cart table.shop_table.cart tr.cart_item + tr,
    .woocommerce-cart table.shop_table.cart tr:has(td.actions) {
        display: block !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .woocommerce-cart table.shop_table.cart td.actions {
        display: flex !important;
        flex-wrap: wrap;
        gap: 10px;
        background: transparent !important;
        padding: 4px 0 16px !important;
    }
    .woocommerce-cart .coupon {
        display: none; /* no coupons in pickup flow */
    }
    .woocommerce-cart button[name="update_cart"] {
        flex: 1 1 100%;
        width: 100%;
        height: 46px;
        padding: 12px 18px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        background: #fff;
        color: #1A1C1E;
        border: 1px solid #D7DBDE;
        border-radius: 8px;
        white-space: nowrap;
        cursor: pointer;
    }
    .woocommerce-cart button[name="update_cart"]:hover {
        border-color: #00BC65;
        color: #00834A;
    }

    /* Cart totals card */
    .woocommerce-cart .cart_totals > h2 {
        font-size: 18px !important;
        margin: 0 0 14px !important;
    }
    .woocommerce-cart .cart_totals table.shop_table {
        display: table !important;
        background: transparent !important;
    }
    .woocommerce-cart .cart_totals table.shop_table tr {
        display: table-row !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
    }
    .woocommerce-cart .cart_totals table.shop_table td,
    .woocommerce-cart .cart_totals table.shop_table th {
        display: table-cell !important;
        padding: 10px 0 !important;
        text-align: left !important;
    }
    .woocommerce-cart .cart_totals table.shop_table td {
        text-align: right !important;
        font-weight: 600;
    }
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout {
        margin-top: 16px;
    }
    .woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
        width: 100%;
        text-align: center;
    }

    /* === Hide the floating cart bubble on cart and checkout pages === */
    .woocommerce-cart .floating-cart,
    .woocommerce-checkout .floating-cart {
        display: none !important;
    }
}

/* === Floating cart bubble: also hide on cart/checkout at ALL viewports ===
   (the bubble's whole point is to take the user to the cart — useless when
   they're already on the cart or checkout page) */
.woocommerce-cart .floating-cart,
.woocommerce-checkout .floating-cart {
    display: none !important;
}

/* =====================================================================
   Checkout page — /checkout/
   Themed WooCommerce checkout with our pickup-only flow. Two columns
   on desktop (customer details + order summary), stacks on mobile.
   Pure CSS on top of WC's stock markup — no template overrides.
   ===================================================================== */
.woocommerce-checkout .site-main { background: #F6F7F9; padding-bottom: 60px; }
.woocommerce-checkout .woocommerce {
    max-width: var(--container-max, 1280px);
    margin: 0 auto;
    padding: 40px var(--container-pad, 32px) 0;
}
.woocommerce-checkout .woocommerce-notices-wrapper { margin-bottom: 16px; }

/* Pickup notice — yellow tint card explaining the pickup-only flow.
   Sits above the form (or in production, above the customer details
   block) with margin-bottom giving it breathing room. */
.elitag-pickup-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #FFF6E0;
    border: 1px solid #FFD479;
    border-radius: 8px;
    padding: 18px 22px;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.55;
    color: #5A4200;
    width: 100%;
    box-sizing: border-box;
}
.elitag-pickup-notice strong { color: #1A1C1E; font-weight: 700; }
.elitag-pickup-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFB21C;
    color: #fff;
    flex-shrink: 0;
}

/* Checkout form layout — explicit grid with named areas so each block
   lands in the right cell regardless of WC's source order or which
   actions injected what. The 4 areas:
     - notice  (pickup notice, spans both columns at top)
     - billing (customer details, left column)
     - addit   (additional fields / order notes, left column, below billing)
     - review  (order review + payment + submit, right column, spans both rows)

   Float-based approaches were fragile because WC's stock styles use
   floats internally and fight with our wrapping logic. Grid areas
   side-step that entirely. */
form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
        "notice  notice"
        "billing review"
        "addit   review";
    gap: 16px 40px;
    align-items: start;
}
form.woocommerce-checkout > .elitag-pickup-notice { grid-area: notice; margin: 0; }
form.woocommerce-checkout > #customer_details     { grid-area: billing; min-width: 0; }
form.woocommerce-checkout > .woocommerce-additional-fields { grid-area: addit; min-width: 0; }
form.woocommerce-checkout > #order_review_heading { display: none; }
form.woocommerce-checkout > #order_review         { grid-area: review; min-width: 0; }
/* Strip any WC-stock floats/widths that fight the grid */
form.woocommerce-checkout > #customer_details,
form.woocommerce-checkout > .woocommerce-additional-fields,
form.woocommerce-checkout > #order_review {
    float: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* If additional_fields appears NESTED inside customer_details rather
   than as a sibling (depends on which WC actions injected it), still
   give it the same card styling so visually it's identical either way. */
.woocommerce-checkout #customer_details .woocommerce-additional-fields {
    margin-top: 16px;
}

.woocommerce-checkout .woocommerce-billing-fields {
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.woocommerce-checkout .woocommerce-additional-fields {
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 8px;
    padding: 24px 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E6E7EB;
}

/* Form rows — paired side-by-side for first/last name etc, full width
   when class is form-row-wide */
.woocommerce-checkout .form-row {
    margin: 0 0 14px;
    padding: 0;
    display: block;
}
.woocommerce-checkout .form-row.form-row-first,
.woocommerce-checkout .form-row.form-row-last {
    width: calc(50% - 7px);
    display: inline-block;
    vertical-align: top;
}
.woocommerce-checkout .form-row.form-row-first { margin-right: 14px; }
.woocommerce-checkout .form-row.form-row-wide { width: 100%; }
.woocommerce-checkout .form-row label {
    display: block;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #1A1C1E;
    margin-bottom: 6px;
}
.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label abbr.required {
    color: #C32F2F;
    text-decoration: none;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    height: 46px;
    border: 1px solid #D7DBDE;
    border-radius: 6px;
    padding: 0 14px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #1A1C1E;
    background: #fff;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}
.woocommerce-checkout .form-row textarea {
    height: auto;
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    outline: none;
    border-color: #FFB21C;
}
/* Locked Chișinău field — visually disabled but still POSTed */
.woocommerce-checkout .elitag-locked-field input,
.woocommerce-checkout .elitag-locked-field input:focus {
    background: #F6F7F9;
    color: #616466;
    cursor: not-allowed;
    border-color: #E6E7EB;
}

/* Order review (right column via grid-area: review). The standalone
   heading is hidden — "Comanda dvs." is rendered via ::before inside
   the review card so there's no gap between heading and table. */
.woocommerce-checkout #order_review_heading {
    display: none;
}
.woocommerce-checkout #order_review {
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 8px;
    padding: 24px 26px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    margin: 0;
}
.woocommerce-checkout #order_review::before {
    content: "Comanda dvs.";
    display: block;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid #E6E7EB;
}

.woocommerce-checkout .shop_table {
    border: none !important;
    border-collapse: collapse;
    margin: 0 0 18px;
    background: transparent;
    width: 100%;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
    border: none !important;
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    color: #1A1C1E;
    vertical-align: top;
}
.woocommerce-checkout .shop_table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #919699;
    border-bottom: 1px solid #E6E7EB !important;
    padding-bottom: 12px;
}
.woocommerce-checkout .shop_table tbody td.product-name { width: 60%; }
/* Hide the redundant cart-subtotal row — with no shipping, no tax,
   and no discounts in our pickup-only flow, subtotal === total. The
   order-total row below carries the same value with proper emphasis,
   so showing both is just visual clutter. */
.woocommerce-checkout .shop_table tfoot tr.cart-subtotal {
    display: none;
}
.woocommerce-checkout .shop_table tfoot th,
.woocommerce-checkout .shop_table tfoot td {
    font-weight: 600;
    border-top: 1px solid #F0F1F3 !important;
}
.woocommerce-checkout .shop_table tfoot tr.order-total th,
.woocommerce-checkout .shop_table tfoot tr.order-total td {
    font-size: 16px;
    font-weight: 700;
    color: #1A1C1E;
    padding-top: 16px;
    border-top: 1px solid #E6E7EB !important;
}

/* No-payment-methods notice — when WC has no gateway available it
   renders a .woocommerce-info inside #payment. WC's stock CSS adds
   an "i" info icon via ::before that looks weird floating over our
   friendly Romanian message. We restyle the notice as a yellow card
   matching the pickup notice + suppress the WC icon. */
.woocommerce-checkout #payment .woocommerce-info,
.woocommerce-checkout #payment .woocommerce-NoticeGroup .woocommerce-info {
    background: #FFF6E0;
    border: 1px solid #FFD479;
    border-top: 1px solid #FFD479;
    border-radius: 8px;
    color: #5A4200;
    padding: 16px 20px;
    margin: 0 0 18px;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.55;
    position: relative;
}
.woocommerce-checkout #payment .woocommerce-info::before,
.woocommerce-checkout #payment .woocommerce-NoticeGroup .woocommerce-info::before {
    /* Hide WC's stock info icon — looks like a weird floating glyph
       over our friendly message. */
    content: none !important;
    display: none !important;
}
.woocommerce-checkout #payment .woocommerce-info a {
    color: #00834A;
    font-weight: 600;
    text-decoration: none;
}
.woocommerce-checkout #payment .woocommerce-info a:hover {
    text-decoration: underline;
}

/* Payment methods block */
.woocommerce-checkout #payment {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.woocommerce-checkout #payment ul.payment_methods:empty {
    display: none;
    margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
    padding: 14px 0;
    border-top: 1px solid #F0F1F3;
}
.woocommerce-checkout #payment ul.payment_methods li:first-child { border-top: none; }
.woocommerce-checkout #payment ul.payment_methods li label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1A1C1E;
    cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods .payment_box {
    background: #F6F7F9 !important;
    border: none !important;
    border-radius: 6px;
    padding: 14px !important;
    margin-top: 10px;
    font-size: 13px;
    color: #616466;
}
.woocommerce-checkout #payment ul.payment_methods .payment_box::before {
    display: none !important;
}

/* Terms & privacy acceptance checkbox — soft inline acceptance row
   above the place-order button. Visible green checkbox + linked
   T&C and Privacy Policy. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin: 0 0 18px;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper-message {
    display: none; /* hide WC's auto-injected helper text */
}
.woocommerce-checkout .wc-terms-and-conditions,
.woocommerce-checkout .form-row.terms,
.woocommerce-checkout .woocommerce-form__label-for-checkbox.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #1A1C1E;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.woocommerce-checkout .wc-terms-and-conditions input[type="checkbox"],
.woocommerce-checkout .form-row.terms input[type="checkbox"],
.woocommerce-checkout .woocommerce-form__input-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--color-green, #00BC65);
    cursor: pointer;
}
.woocommerce-checkout .wc-terms-and-conditions a,
.woocommerce-checkout .form-row.terms a {
    color: var(--color-green, #00BC65);
    font-weight: 600;
    text-decoration: none;
}
.woocommerce-checkout .wc-terms-and-conditions a:hover,
.woocommerce-checkout .form-row.terms a:hover {
    text-decoration: underline;
}
/* Hide the "*" required indicator next to the terms label — the
   checkbox itself is clearly required visually. */
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text .required,
.woocommerce-checkout .form-row.terms .required {
    display: none;
}

/* Yellow COMANDAȚI button — matches production */
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    background: #FFB21C !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    box-shadow: 0 4px 14px rgba(255, 178, 28, 0.30) !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}
.woocommerce-checkout #place_order:hover {
    background: #F79F07 !important;
    transform: translateY(-1px);
}
.woocommerce-checkout #place_order::after {
    content: "→";
    display: inline-block;
    margin-left: 12px;
    font-weight: 400;
    font-size: 18px;
}

/* Turnstile widget on checkout */
.woocommerce-checkout .elitag-turnstile { margin: 0 0 16px; }

/* Coupon notice (if any) */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    background: #FFF6E0;
    border-left: 4px solid #FFB21C;
    color: #5A4200;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 1024px) {
    form.woocommerce-checkout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "notice"
            "billing"
            "addit"
            "review";
        gap: 16px;
    }
    .woocommerce-checkout .woocommerce { padding: 24px var(--container-pad, 20px) 0; }
}
@media (max-width: 640px) {
    .elitag-pickup-notice { padding: 14px 16px; }
    .elitag-pickup-notice__icon { width: 32px; height: 32px; }
    .elitag-pickup-notice__icon svg { width: 18px; height: 18px; }
    .woocommerce-checkout .form-row.form-row-first,
    .woocommerce-checkout .form-row.form-row-last {
        width: 100%;
        display: block;
        margin-right: 0;
    }
    .woocommerce-checkout .woocommerce-billing-fields,
    .woocommerce-checkout .woocommerce-additional-fields,
    .woocommerce-checkout #order_review { padding: 20px 18px; }
}

/* =====================================================================
   Order received page — /checkout/order-received/<id>/
   Themed thank-you after WC order placement. Reuses the .thanks-card
   design from /multumim-pentru-mesaj-contact/ for consistency.
   ===================================================================== */
.woocommerce-order-received .site-main { background: #F6F7F9; padding-bottom: 60px; }
.woocommerce-order-received .woocommerce {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px var(--container-pad, 32px) 0;
}
.woocommerce-order-received .woocommerce-notices-wrapper { margin-bottom: 16px; }
.woocommerce-order-received .woocommerce-order-received,
.woocommerce-order-received .woocommerce-thankyou-order-received {
    background: var(--color-green, #00BC65);
    color: #fff;
    padding: 24px 28px;
    border-radius: 10px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0, 188, 101, 0.25);
}
.woocommerce-order-received .woocommerce-order-received::before,
.woocommerce-order-received .woocommerce-thankyou-order-received::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}
.woocommerce-order-received .woocommerce-order-overview,
.woocommerce-order-received ul.order_details,
.woocommerce-order-received ul.woocommerce-thankyou-order-details {
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 10px;
    padding: 24px 28px;
    list-style: none;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    text-align: left !important;
}
.woocommerce-order-received .woocommerce-order-overview li,
.woocommerce-order-received ul.order_details li,
.woocommerce-order-received ul.woocommerce-thankyou-order-details li {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #919699 !important;
    text-align: left !important;
    line-height: 1.4 !important;
}
.woocommerce-order-received .woocommerce-order-overview li strong,
.woocommerce-order-received ul.order_details li strong,
.woocommerce-order-received ul.woocommerce-thankyou-order-details li strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #1A1C1E;
    margin-top: 6px;
    text-align: left !important;
}
.woocommerce-order-received h2 {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1A1C1E;
    margin: 28px 0 14px;
}
.woocommerce-order-received .woocommerce-table,
.woocommerce-order-received table.shop_table {
    width: 100%;
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 10px;
    overflow: hidden;
    border-collapse: collapse;
    margin: 0 0 24px;
}
.woocommerce-order-received .woocommerce-table th,
.woocommerce-order-received table.shop_table th,
.woocommerce-order-received .woocommerce-table td,
.woocommerce-order-received table.shop_table td {
    padding: 14px 18px;
    border-bottom: 1px solid #F0F1F3;
    font-size: 14px;
}
.woocommerce-order-received .woocommerce-table thead th,
.woocommerce-order-received table.shop_table thead th {
    background: #FAFBFC;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #919699;
}
.woocommerce-order-received .woocommerce-table tfoot th,
.woocommerce-order-received table.shop_table tfoot th {
    font-weight: 600;
    color: #616466;
}
.woocommerce-order-received .woocommerce-table tfoot td,
.woocommerce-order-received table.shop_table tfoot td {
    font-weight: 600;
}
.woocommerce-order-received .woocommerce-table tfoot tr.order-total td,
.woocommerce-order-received table.shop_table tfoot tr.order-total td {
    font-size: 18px;
    font-weight: 700;
    color: #1A1C1E;
}
.woocommerce-order-received .woocommerce-customer-details {
    background: #fff;
    border: 1px solid #E6E7EB;
    border-radius: 10px;
    padding: 24px 28px;
    margin: 0 0 24px;
}
.woocommerce-order-received .woocommerce-customer-details address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.7;
    color: #1A1C1E;
    border: none;
    padding: 0;
}

/* ===== 14. Responsive ===== */
@media (max-width: 1280px) {
    .site-nav a { padding: 10px 10px; font-size: 11px; letter-spacing: 0.04em; }
    .site-header__phone { font-size: 13px; }
    .site-header__inner { gap: 16px; padding: 12px 24px; }
}
@media (max-width: 1100px) {
    .site-nav a { padding: 8px 8px; font-size: 11px; letter-spacing: 0.02em; }
    .site-header__phone span:last-child { display: none; } /* Hide phone number text, keep icon */
}
/* Tablet partner layout (600-1100px) — 4 columns instead of 5 */
@media (min-width: 600px) and (max-width: 1100px) {
    .hp-partners__rows {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 22px 28px;
    }
    .hp-partners__row { display: contents; }
    .hp-partners__cell {
        width: calc(25% - 28px);
        height: 90px;
        flex: 0 0 auto;
    }
    .hp-partners__cell:empty { display: none; }
}

/* Tablet portrait: keep logo at native 40px (matches SVG natural height) to avoid upscaling fuzziness */
@media (max-width: 980px) and (min-width: 600px) {
    .site-header__logo img { height: 40px !important; }
    .site-header.is-compact .site-header__logo img { height: 32px !important; }
}

@media (max-width: 980px) {
    :root { --container-pad: 20px; }
    .site-header__inner { padding: 14px 20px; }
    .site-header__logo img { height: 50px; }
    .site-header.is-compact .site-header__logo img { height: 38px; }
    .site-nav, .site-header__right { display: none; }
    .site-header__burger { display: inline-flex; }
    .site-main { padding-top: calc(var(--header-h-mobile) + var(--admin-bar-h)); }
    .section { padding: 60px 0; }

    .hero__content { padding: calc(40px + var(--header-h-mobile) + var(--admin-bar-h)) var(--container-pad) 40px; }
    .hero { min-height: calc(280px + var(--header-h-mobile)); }
    .hero__title { font-size: 32px; }
    .hero__desc { font-size: 15px; }

    .line-accent {
        display: flex;
        margin: 0 0 22px;
        top: 0;
        width: 45px;
        align-items: center;
    }
    /* On mobile, ANY title containing a line-accent: title becomes block,
       line sits ABOVE the title on its own line, with breathing room below. */
    h1, h2, h3, h4,
    .hp-hero__title,
    .hp-boli__title,
    .hp-despre__title,
    .hp-reviews__title,
    .hp-partners__title,
    .hero__title,
    .cta-banner__title {
        display: block !important;
    }
    h1 .line-accent,
    h2 .line-accent,
    h3 .line-accent,
    h4 .line-accent {
        display: flex;
        margin: 0 0 22px;
        top: 0;
    }
    /* Show floating cart only on mobile */
    .floating-cart {
        display: inline-flex !important;
    }

    .cta-banner { min-height: 380px; }
    .cta-banner__inner { padding: 56px var(--container-pad); }
    .cta-banner__title { font-size: 26px; }
    .btn { width: 100%; max-width: 360px; }
    .btn__label { padding: 16px 24px; }
    .btn__arrow { padding: 0 20px; }

    .grid--3, .grid--4 { grid-template-columns: 1fr; }

    .cat-card { aspect-ratio: 16/11; }
    .cat-card__panel { left: 18px; right: 18px; padding: 20px 22px; }
    .cat-card__name { font-size: 20px; }

    /* Homepage mobile adjustments */
    .hp-hero__inner { padding: 80px 24px 80px 24px; }
    .hp-hero--top .hp-hero__inner { padding-top: calc(80px + var(--header-h-mobile) + var(--admin-bar-h)); }
    .hp-hero__inner--compact { padding-top: 60px; padding-bottom: 60px; }
    .hp-hero__title { font-size: 26px; }
    .hp-hero__title--h2 { font-size: 22px; }
    .hp-hero__desc { font-size: 14px; }

    .hp-boli__container { padding: 0 24px; }
    .hp-boli__grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
    }
    .hp-boli__tile { min-height: 200px; }
    .hp-boli__label { font-size: 15px; }

    .hp-despre {
        padding: 0 16px 60px;
    }
    .hp-despre__image-wrap { margin-bottom: 24px; }
    .hp-despre__card { padding: 36px 24px; }

    .hp-reviews { padding: 60px 0; }
    .hp-reviews__header { padding: 0 24px 20px; }
    .reviews-slider__track .testimonial-card { padding: 28px 22px; }
    .testimonial-card__text { font-size: 13px; }

    .hp-partners { padding: 60px 0 70px; }
    .hp-partners__header { padding: 0 24px 20px; }
    .hp-partners__rows {
        padding: 8px 20px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px 24px;
    }
    /* Flatten the row structure on mobile — let cells flow naturally */
    .hp-partners__row {
        display: contents;
    }
    .hp-partners__cell {
        width: calc(33.333% - 24px);
        height: 70px;
        flex: 0 0 auto;
    }
    /* Hide empty cells on mobile so we don't get weird gaps */
    .hp-partners__cell:empty { display: none; }
    .hp-partners__cell img { max-height: 60px; }

    /* Nutriția Plantelor — tablet/small desktop (≤980px) */
    .np-container { padding: 0 20px; }
    .np-section { padding: 80px 0 50px; }
    .np-section__text { margin-bottom: 30px; font-size: 14px; max-width: 100%; }
    /* Slightly smaller tiles on tablet so the 7-col table still fits */
    .tabel-periodic td { width: 90px; height: 110px; }
    .tabel-periodic td a {
        font-size: 36px;
        line-height: 44px;
        padding-top: 26px;
        padding-bottom: 24px;
    }
    .tabel-periodic td a span { font-size: 12px; }
    .tabel-periodic td a .tabel-nr { font-size: 15px; top: 3px; right: 8px; }
    .tabel-periodic .tabel-subtitle td span {
        font-size: 12px;
        padding: 10px;
        line-height: 1.45;
    }

    /* Calculator: tighter padding/sizes but stay 2-col side-by-side */
    .np-calc { padding: 60px 0 70px; }
    .np-calc__inner { padding: 0 24px; }
    .np-calc__title { font-size: 24px; }
    .calc-nutr { gap: 30px; }
    .calc-title { font-size: 19px; }
    .cel-content { height: 100px; padding: 12px 6px; font-size: 12px; }
    .cel-content::before { width: 32px; height: 36px; margin-bottom: 10px; }
    .select-info-nr { font-size: 38px; }
    .c-rez-item-title { font-size: 22px; }
    .c-rez-item-content { height: 220px; }
    .c-rez-item-bg { max-width: 64px; }
    .c-rez-item-val { font-size: 13px; padding: 3px 8px; }

    /* Form: tighter spacing but stay 2-col */
    .np-form { padding: 70px 0 80px; background-size: 800px auto; background-position: -280px -100px; }
    .np-form__inner { padding: 0 24px; gap: 40px; }
    .np-form__title { font-size: 26px; }
    .np-form__subtitle { font-size: 16px; }
    .np-form__right { padding: 32px 28px; }

    .site-footer__inner {
        grid-template-columns: 1fr;
        padding: 0 32px;
        gap: 40px;
    }
    .site-footer__columns {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .site-footer__social {
        margin-top: 8px;
    }
    .site-footer__bottom { padding: 18px 32px; flex-direction: column; text-align: center; }
}

/* ===== Nutriția Plantelor — Calculator + form: stack to single column =====
   At ≤900px we no longer have room for side-by-side calc steps or the
   form's title+card split. Stack each section's two columns vertically. */
@media (max-width: 900px) {
    .calc-nutr {
        flex-direction: column;
        gap: 40px;
    }
    .calc-col,
    .calc-col:first-child,
    .calc-col:last-child {
        flex: 1 1 100%;
        width: 100%;
        padding-right: 0;
    }
    .np-form__inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    /* When the columns stack, the sun graphic has no horizontal half-column
       to occupy without bleeding behind the form card. Hide it. */
    /* When the columns stack, hide the sun graphic (no left half to fill). */
    .np-form { background-image: none; }

    /* Nutrient pages: stack split section, simptome columns, and pager */
    .nutrient-split__inner {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 0;
    }
    /* When stacked, paint the WHOLE section with the category color so both
       the left (intro + swiper) and right (plant) panels share an
       edge-to-edge background — no horizontal seam, no white strip from the
       container's max-width padding. */
    .nutrient-split { background: var(--nutrient-color, #81BA39); }
    .nutrient-cat-macro.nutrient-split,     .nutrient-cat-macro .nutrient-split     { background: #81BA39; }
    .nutrient-cat-secondary.nutrient-split, .nutrient-cat-secondary .nutrient-split { background: #FFB21C; }
    .nutrient-cat-micro.nutrient-split,     .nutrient-cat-micro .nutrient-split     { background: #D24E30; }
    .nutrient-cat-non.nutrient-split,       .nutrient-cat-non .nutrient-split       { background: #3A79C3; }
    /* The left column's ::before viewport-extended bg is unnecessary in
       stacked mode (the parent section already provides full-width color),
       and risks creating a darker overlap stripe. Disable it. */
    .nutrient-split__left::before { display: none; }
    .nutrient-split__left  { padding: 40px 24px 30px; background: transparent; }
    .nutrient-split__right { padding: 10px 0 50px; background: transparent; }

    .nutrient-split__title { gap: 10px; margin-bottom: 16px; }
    .nutrient-split__symbol { font-size: 52px; }
    .nutrient-split__name { font-size: 36px; }
    .nutrient-swiper { padding-right: 70px; }
    .nutrient-swiper__btn { width: 50px; height: 50px; font-size: 28px; }

    .nutrient-plant, .nutrient-plant__img { width: 180px; height: 408px; }

    .nutrient-simptome__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .nutrient-gallery-slider__track { min-height: 320px; }
    .nutrient-gallery-slider__slide img { height: 320px; }

    .nutrient-pager { grid-template-columns: 1fr; }
    .nutrient-pager__link { padding: 22px 28px; }
    /* Reverse stack order on mobile: forward/next on top, back/prev on bottom.
       Matches the user's reading intuition — "where you're going" first.
       Desktop side-by-side order is unchanged (prev left, next right). */
    .nutrient-pager__link--next { order: 1; }
    .nutrient-pager__link--prev { order: 2; }

    /* === Boli & Dăunători responsive (≤900px) ===
       Most layout responsiveness comes from .grid--cards rules (defined
       earlier with .grid--cards { grid-template-columns... } at each
       breakpoint). Per-page rules below cover the child archive (disease
       list) and the single disease detail. */

    .boli-crop-hero { min-height: 240px; }
    .boli-crop-desc { padding: 36px 0 6px; }
    .boli-crop-list { padding: 36px 0 60px; }
    .boli-crop-list__heading { font-size: 20px; margin-bottom: 24px; }
    .boli-disease-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .boli-disease-tile__body { padding: 14px 16px 16px; }

    /* Single disease detail — stack content + CTA aside vertically.
       Sticky positioning is unhelpful on narrow screens, so disable it. */
    .boli-detail { padding: 36px 0 60px; }
    .boli-detail__layout { grid-template-columns: 1fr; gap: 32px; }
    .boli-detail__main { max-width: 100%; }
    .boli-detail__aside { position: static; }
    .boli-detail__cta-card { padding: 26px 22px; }
    .boli-detail-related { padding: 50px 0 70px; }
    .boli-detail-related__heading { font-size: 20px; margin-bottom: 22px; }

    /* === /producator/ brand archive responsive === */
    .brand-hero { min-height: 220px; }
    .brand-hero__content { gap: 24px; }
    .brand-hero__logo { width: 100px; height: 100px; padding: 12px; }
    .brand-products .products,
    .brand-products ul.products { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .brand-empty__inner { padding: 44px 24px; }
    .brand-empty__title { font-size: 19px; }

    /* Enlarge button: shrink padding so it fits in tight hero space.
       Lightbox close button: bring inside the viewport (no negative
       offsets that would clip on narrow screens). */
    .boli-detail-hero__enlarge {
        right: 16px;
        bottom: 16px;
        padding: 10px 14px 10px 12px;
        font-size: 12px;
        gap: 8px;
    }
    .boli-lightbox { padding: 20px 12px; }
    .boli-lightbox__close { top: 4px; right: 4px; width: 40px; height: 40px; }
    .boli-lightbox__img { max-height: calc(100vh - 140px); }

    .boli-recommend-cta { padding: 70px 0; }
    .boli-recommend-cta__title { font-size: 28px; }

    .nutrient-hero__title { font-size: 30px; gap: 14px; }
    .nutrient-hero__symbol { min-width: 48px; height: 48px; font-size: 22px; }
}

/* Tablet landscape (iPad mini landscape ~1133px and similar): keep the two-column
   outer layout but tighten gap, and ensure the inner 3-col nav is roomy enough. */
@media (min-width: 981px) and (max-width: 1200px) {
    .site-footer__inner {
        grid-template-columns: 1fr 1.6fr;
        gap: 40px;
        padding: 0 40px;
    }
    .site-footer__columns {
        gap: 18px 26px;
    }
    .site-footer__nav-col a {
        font-size: 11px;
        letter-spacing: 0.08em;
    }
    .site-footer__bottom { padding: 22px 40px; }
}

/* Tablet portrait (iPad mini portrait ~768px): force a clean 3-column nav row,
   with logo + contact stacked above as a full-width row. Better than the cramped
   2-column nav we had before. */
@media (min-width: 600px) and (max-width: 980px) {
    .site-footer__inner {
        grid-template-columns: 1fr !important;
        padding: 0 40px !important;
        gap: 36px !important;
    }
    .site-footer__brand {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 32px;
    }
    .site-footer__contact {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 28px;
        margin-top: 0;
        align-items: flex-start;
    }
    .site-footer__contact-row { flex: 0 0 auto; }
    .site-footer__columns {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 20px 28px;
    }
    .site-footer__nav-col a {
        font-size: 11px;
        letter-spacing: 0.08em;
    }
    .site-footer__col-3-stack { gap: 14px; }
    .site-footer__bottom {
        flex-direction: row !important;
        text-align: left !important;
        padding: 18px 40px !important;
    }
}

/* ===== Nutriția Plantelor — phone re-flow (≤640px) =====
   Original used 768px; we use 640px so iPad mini portrait (768w) stays on the
   tablet grid (90×110 tiles), which fills the wider viewport better than the
   inline-block wrap layout. Below 640px (true phone widths) re-flow kicks in. */
@media all and (max-width: 640px) {
    .tabel-periodic td a {
        font-size: 22px;
        line-height: 30px;
        letter-spacing: -0.03em;
        padding-top: 20px;
        padding-bottom: 15px;
    }
    .tabel-periodic td {
        padding: 0 !important;
        text-align: center;
        width: 70px;
        height: 80px;
        color: #fff;
    }
    .tabel-periodic td a .tabel-nr {
        font-size: 14px;
        right: 5px;
        top: 0;
    }
    .tabel-periodic td a span {
        font-size: 12px;
    }
    .tabel-subtitle {
        display: none !important;
    }
    .tabel-periodic td,
    .tabel-periodic tbody,
    table.tabel-periodic {
        display: inline-block;
    }
    td.tabel-mobile,
    .tabel-periodic tr {
        display: block;
        width: 100%;
    }
    td.tabel-mobile {
        height: 44px;
        padding: 0 !important;
        margin: 4px 0 28px !important;
    }
    td.tabel-mobile span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        color: #fff;
        font-family: 'Open Sans', Arial, sans-serif;
        font-weight: 600;
        font-size: 13px;
        line-height: 1.3;
        letter-spacing: 0.01em;
        text-align: center;
        padding: 4px 10px;
        box-sizing: border-box;
    }
    .tabel-periodic .table-border-top td.tabel-mobile {
        border-top: 0 !important;
    }

    /* Calculator + form on phones */
    .np-calc { padding: 50px 0 60px; }
    .np-calc__title { font-size: 20px; line-height: 1.3; }
    .np-calc__subtitle { font-size: 14px; }
    .calc-title { font-size: 18px; }
    .calc-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cel-content { height: 96px; font-size: 11.5px; }
    .select-info-nr { font-size: 34px; }
    .select-info-desc { font-size: 14px; }
    .c-rez-content { gap: 10px; padding: 14px 12px 20px; }
    .c-rez-item-title { font-size: 20px; }
    .c-rez-item-title span { font-size: 11px; }
    .c-rez-item-content { height: 180px; }
    .c-rez-item-bg { max-width: 56px; }
    .c-rez-item-val { font-size: 12px; padding: 3px 6px; }

    .np-form { padding: 50px 0 60px; }
    .np-form__inner { padding: 0 16px; gap: 28px; }
    .np-form__title { font-size: 22px; }
    .np-form__subtitle { font-size: 14px; }
    .np-form__right { padding: 24px 20px; border-radius: 6px; }
    .np-form__form input, .np-form__form select { font-size: 14px; height: 46px; }
    .np-form__form button[type="submit"] { height: 50px; font-size: 12px; }
    /* Stack paired fields on phones — two narrow inputs side-by-side feel cramped.
       Use row-gap to match the 10px spacing between standalone fields. */
    .np-form__row--2col { grid-template-columns: 1fr; gap: 10px; }
    .np-form__row--2col > p { margin: 0; }
}

@media (max-width: 600px) {
    .grid--3, .grid--4 { grid-template-columns: 1fr; }
    /* Footer: single-column nav so long labels never get cut off */
    .site-footer__inner { padding: 0 20px !important; gap: 32px !important; }
    .site-footer__columns { grid-template-columns: 1fr !important; gap: 22px 0 !important; }
    .site-footer__nav-col { text-align: left; }
    .site-footer__nav-col li { margin: 0 0 14px; }
    .site-footer__nav-col a {
        white-space: normal !important;
        font-size: 11px;
        letter-spacing: 0.08em;
    }
    .site-footer__bottom { padding: 18px 20px !important; font-size: 12px; }
    /* Homepage: use balanced padding instead of left-heavy 100px which doesn't fit on small phones */
    .hp-boli__container,
    .hp-reviews__header,
    .hp-partners__header {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .hp-hero__inner { padding-left: 20px !important; padding-right: 20px !important; }
    /* Nutriția Plantelor — tiny phones (≤600px) */
    .np-container { padding: 0 16px !important; }
    .np-section { padding: 60px 0 40px !important; }
    /* Calculator at narrow widths */
    .np-calc { padding: 40px 0 50px; }
    .np-calc__inner { padding: 0 16px; }
    .np-calc__title { font-size: 18px; line-height: 1.3; }
    .calc-tiles { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .cel-content { height: 84px; font-size: 11px; padding: 8px 4px; }
    .cel-content::before { width: 28px; height: 32px; margin-bottom: 6px; }
    .select-info { gap: 8px; }
    .select-info-nr { font-size: 28px; }
    .select-info-desc { font-size: 13px; }
    .select-info-img img { width: 36px; height: 36px; }
    .calc-rezult-wrapper { border-radius: 4px; }
    .c-rez-content { gap: 6px; padding: 12px 10px 18px; }
    .c-rez-item-title { font-size: 17px; }
    .c-rez-item-title span { font-size: 10px; }
    .c-rez-item-content { height: 160px; }
    .c-rez-item-bg { max-width: 48px; }
    .c-rez-item-val { font-size: 11px; padding: 2px 5px; max-width: 100%; box-sizing: border-box; }
    /* Form */
    .np-form { padding: 40px 0 50px; }
    .np-form__inner { padding: 0 16px; gap: 24px; }
    .np-form__title { font-size: 20px; line-height: 1.3; }
    .np-form__subtitle { font-size: 14px; }
    .np-form__right { padding: 20px 18px; border-radius: 6px; }
    .np-form__form input, .np-form__form select { font-size: 14px; height: 44px; }
    .np-form__form button[type="submit"] { height: 50px; font-size: 12px; }
    h1 { font-size: 28px; }
    /* Nutrient pages on phones — new production design */
    .nutrient-section { padding: 50px 0; }
    .nutrient-back-wrap { padding: 20px 0 0; }
    .nutrient-back { font-size: 12px; }
    .nutrient-hero__title { font-size: 26px; gap: 12px; }
    .nutrient-hero__symbol { min-width: 42px; height: 42px; font-size: 18px; padding: 0 10px; }
    .nutrient-section__title { font-size: 22px; margin-bottom: 20px; gap: 12px; }
    .nutrient-prose { font-size: 14px; line-height: 1.75; }
    .nutrient-split__left { padding: 32px 16px 40px; }
    .nutrient-split__title { gap: 8px; }
    .nutrient-split__symbol { font-size: 42px; }
    .nutrient-split__name { font-size: 28px; }
    .nutrient-split__intro { font-size: 14px; line-height: 1.7; margin-bottom: 28px; }
    .nutrient-stiati__heading { font-size: 20px; gap: 12px; }
    .nutrient-swiper { padding-right: 56px; }
    .nutrient-swiper__slide { padding: 22px 18px; }
    .nutrient-swiper__slide-title { font-size: 16px; }
    .nutrient-swiper__slide-body { font-size: 13px; }
    .nutrient-swiper__btn { width: 42px; height: 42px; font-size: 24px; }
    .nutrient-plant, .nutrient-plant__img { width: 150px; height: 340px; }
    .nutrient-plant__hotspot { width: 26px; height: 26px; font-size: 13px; line-height: 26px; }
    .nutrient-gallery-slider__track { min-height: 240px; }
    .nutrient-gallery-slider__slide img { height: 240px; }
    .nutrient-gallery-slider__btn { width: 44px; height: 44px; font-size: 24px; }
    .nutrient-gallery-slider__btn--prev { left: 8px; }
    .nutrient-gallery-slider__btn--next { right: 8px; }
    .nutrient-pager__link { padding: 18px 20px; font-size: 12px; gap: 10px; }

    /* === Boli pages on phones === */
    .boli-cat-grid-section { padding: 50px 0; }
    .boli-children-section { padding: 30px 0 60px; }
    .boli-crop-hero { min-height: 200px; }
    .boli-crop-desc { padding: 26px 0 4px; }
    .boli-crop-desc__inner { font-size: 15px; line-height: 1.7; }
    .boli-crop-list { padding: 24px 0 50px; }
    .boli-crop-list__heading { font-size: 18px; margin-bottom: 18px; }
    .boli-disease-grid { grid-template-columns: 1fr; gap: 14px; }
    .boli-disease-tile__title { font-size: 14px; }
    .boli-detail__prose { font-size: 15px; line-height: 1.75; }
    .boli-detail__prose h2 { font-size: 19px; margin-top: 26px; }
    .boli-detail__cta-title { font-size: 18px; }
    /* Enlarge button on phones — icon-only to save space */
    .boli-detail-hero__enlarge { padding: 10px; gap: 0; }
    .boli-detail-hero__enlarge span { display: none; }
    .boli-lightbox__caption { font-size: 13px; }
    .boli-lightbox__caption-latin { font-size: 12px; }

    /* /producator/ brand archive on phones */
    .brand-hero { min-height: 0; padding: 30px 0; }
    .brand-hero__content { flex-direction: column; align-items: flex-start; text-align: left; gap: 18px; }
    .brand-hero__logo { width: 84px; height: 84px; padding: 10px; }
    .brand-products { padding: 30px 0 60px; }
    .brand-products .products,
    .brand-products ul.products { grid-template-columns: 1fr; gap: 18px; }
    .brand-products__pagination a.page-numbers,
    .brand-products__pagination span.page-numbers { min-width: 34px; height: 34px; padding: 0 10px; font-size: 13px; }
    .brand-empty__inner { padding: 36px 18px; }
    .brand-empty__icon { width: 44px; height: 44px; }
    .brand-empty__title { font-size: 17px; }
    .brand-empty__body { font-size: 14px; }
    .boli-detail__cta-label, .boli-detail__cta-arrow,
    .boli-recommend-cta__btn-label, .boli-recommend-cta__btn-arrow { padding: 14px 20px; }
    .boli-recommend-cta { padding: 50px 0; }
    .boli-recommend-cta__title { font-size: 22px; gap: 12px; margin-bottom: 22px; }
    h2 { font-size: 22px; }
}

/* ===== Accessibility helpers ===== */
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px; height: 1px;
    overflow: hidden;
}
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 12px 16px;
    z-index: 100000;
}
.skip-link:focus { top: 0; }

/* ===== Utilities ===== */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: 16px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mt-4 { margin-top: 32px !important; }
.mb-4 { margin-bottom: 32px !important; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }

/* =====================================================================
   Despre Noi page — /despre-noi/
   Section-based about page mirroring production design. Uses utility
   classes `.dn-*` so styles don't collide with anything else.
   Section order: intro → experiență → tradiție → inovație → cta → echipa
   ===================================================================== */

/* Generic section spacing — every Despre Noi section uses .dn-section */
.dn-section {
    padding: 80px 0;
    background: #ffffff;
}
.dn-section__title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #1A1C1E;
    margin: 0 0 40px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.dn-section__title--light { color: #ffffff; }

/* ---- 1. Intro ---- */
.dn-intro {
    padding: 64px 0 48px;
}
.dn-intro__body {
    max-width: 760px;
}
.dn-intro__body p {
    font-size: 16px;
    line-height: 1.75;
    color: #1A1C1E;
    margin: 0 0 22px;
}
.dn-intro__body p:last-child { margin-bottom: 0; }

/* ---- 2. Experiență — italic mission quote on light-grey ---- */
.dn-experienta {
    background: #F6F7F9;
    padding: 72px 0;
}
.dn-experienta__quote {
    max-width: 820px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.6;
    color: #1A1C1E;
    margin: 0;
    font-weight: 400;
}

/* ---- 3. Tradiție — 4-up icon cards ---- */
.dn-traditie__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.dn-traditie__item {
    text-align: left;
}
.dn-traditie__icon {
    width: 80px;
    height: 80px;
    margin-bottom: 18px;
    line-height: 0;
}
.dn-traditie__icon img {
    width: 80px;
    height: 80px;
    display: block;
}
.dn-traditie__text {
    font-size: 15px;
    line-height: 1.65;
    color: #1A1C1E;
    margin: 0;
}

/* ---- 4. Inovație — green bg, numbered timeline ----
   The section's inline style supplies background-image (the green-sun.svg
   watermark from production). We layer a solid green color underneath
   plus a subtle gradient on top via ::after so the foreground numbers/
   text stay readable. The SVG sits center-LEFT, no-repeat, sized to
   about 90% of the section height. */
.dn-inovatie {
    background-color: #00BC65;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 90%;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
/* Soft tint overlay on top of the SVG to keep contrast solid for the
   foreground content. Sits behind the .np-container content but above
   the background-image. Stronger on the right (opposite the sun glow)
   for balance. */
.dn-inovatie::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,153,84,0.35) 0%, rgba(0,188,101,0.55) 45%, rgba(0,188,101,0.95) 100%);
    pointer-events: none;
}
.dn-inovatie > .np-container { position: relative; z-index: 1; }
.dn-inovatie__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}
/* Horizontal connecting line behind the number circles — sits between
   numbers, hidden behind the circles via white opaque background. */
.dn-inovatie__steps::before {
    content: '';
    position: absolute;
    top: 32px; /* center of the 64px circle */
    left: 12%;
    right: 12%;
    height: 2px;
    background: rgba(255,255,255,0.4);
    z-index: 0;
}
.dn-inovatie__step {
    position: relative;
    z-index: 1;
    text-align: left;
}
.dn-inovatie__num {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ffffff;
    color: #FFB21C;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.dn-inovatie__text {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.95;
}

/* ---- 5. CTA — image bg, yellow button ---- */
.dn-cta {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
    color: #ffffff;
}
.dn-cta__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.1) 100%);
}
.dn-cta > .np-container { position: relative; z-index: 1; }
.dn-cta__content {
    max-width: 560px;
}
.dn-cta__title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.dn-cta__desc {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 28px;
    color: rgba(255,255,255,0.95);
}
.dn-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    background: #FFB21C;
    color: #ffffff;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease;
}
.dn-cta__btn:hover { background: #F79F07; color: #ffffff; }
.dn-cta__btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---- 6. Echipa Noastră — full-bleed black sliders per dept ----
   Each department gets its own black panel that spans 100% of the
   viewport width (escapes the np-container via the full-bleed
   technique). Only ONE team member is visible at a time. Photo on
   left, name + role text on right. Large circular arrows positioned
   on the left/right edges of the panel let users flip through
   members. No autoplay — fully manual. */

.dn-team .dn-section__title {
    margin-bottom: 56px;
}

/* Prevent the full-bleed slider's 100vw width from triggering a
   horizontal scrollbar on the body. */
.dn-team { overflow-x: hidden; }

.dn-team__dept {
    margin: 0 0 72px;
}
.dn-team__dept:last-child { margin-bottom: 0; }

/* Centered dept title sits inside the container */
.dn-team__dept-title {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1A1C1E;
    margin: 0 0 32px;
    text-align: center;
}

/* The slider escapes the container — full viewport width.
   The negative margin trick: shifts the element left by half the
   distance between viewport and its current width, then expands
   it to full viewport width. */
.dn-team__slider {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    background: #006B36; /* brand deep green */
    color: #ffffff;
    overflow: hidden;
    padding: 64px 96px; /* room for the arrows on the sides */
    min-height: 480px;
}

/* Subtle vignette to add depth — radial darkening at the edges */
.dn-team__slider::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Viewport clips the track. Track holds all slides side-by-side
   but only one is visible (the others sit beyond viewport edges
   via the transform). */
.dn-team__viewport {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.dn-team__track {
    position: relative;
    /* Track holds slides absolute-stacked. Active one fades in. */
}

/* Each slide — only the active one is visible. Others are
   positioned absolutely on top of each other with opacity 0. */
.dn-team__slide {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    inset: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    pointer-events: none;
}
.dn-team__slide.is-active {
    opacity: 1;
    visibility: visible;
    position: relative; /* active slide drives container height */
    pointer-events: auto;
}

/* Slide content — text on LEFT, photo on RIGHT */
.dn-team__slide-inner {
    display: flex;
    align-items: center;
    gap: 64px;
    width: 100%;
}

/* Text block on the left — takes remaining flex space */
.dn-team__content {
    flex: 1 1 auto;
    color: #ffffff;
    order: 1;
}
.dn-team__name {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0 0 12px;
    line-height: 1.15;
}
.dn-team__role {
    font-size: 18px;
    color: rgba(255,255,255,0.78);
    line-height: 1.5;
    font-weight: 400;
}

/* Photo block on the right — fixed proportions, contained.
   Acts as positioning context for the layered placeholder + img. */
.dn-team__photo {
    flex: 0 0 360px;
    width: 360px;
    aspect-ratio: 3 / 4;
    border-radius: 4px;
    overflow: hidden;
    background: #00532A; /* darker green tint behind the photo */
    display: block;
    order: 2;
    position: relative;
}
/* Photo image — sits on top of the placeholder layer.
   When present, covers it completely; when missing or errored
   (onerror hides it), the placeholder shows through. */
.dn-team__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;
}

/* Placeholder layer — ALWAYS rendered as the photo's background.
   Visible when the img is missing, still loading, or 404s.
   SVG paints a warm-gold radial backdrop with a silhouette head +
   shoulders. The monogram letters float in a frosted-glass pill
   over the silhouette so the person is still identifiable. */
.dn-team__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00532A;
    z-index: 1;
}
.dn-team__placeholder-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.dn-team__placeholder .dn-team__monogram {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 56px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
    margin-top: -28px; /* nudge up so monogram sits over the head area */
    text-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Arrow buttons — large GOLD circles on the deep-green panel.
   Positioned absolutely on the outer left/right edges of the
   slider, vertically centered. */
.dn-team__nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFB21C; /* brand gold */
    color: #1A1C1E;      /* dark text on gold for contrast */
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
    box-shadow: 0 8px 24px rgba(255,178,28,0.35);
    z-index: 3;
}
.dn-team__nav-btn--prev { left: 24px; }
.dn-team__nav-btn--next { right: 24px; }
.dn-team__nav-btn:hover {
    background: #F79F07; /* darker gold on hover */
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 10px 28px rgba(255,178,28,0.45);
}
.dn-team__nav-btn:active { transform: translateY(-50%) scale(0.95); }
.dn-team__nav-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* Hide arrows entirely when there's only 1 slide */
.dn-team__slider[data-count="1"] .dn-team__nav-btn { display: none; }

/* Counter "1 / 6" at the bottom-right of the slider */
.dn-team__counter {
    position: absolute;
    bottom: 24px;
    right: 32px;
    color: rgba(255,255,255,0.75);
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    z-index: 2;
}
.dn-team__counter-current { color: #ffffff; }
.dn-team__counter-sep { margin: 0 6px; opacity: 0.4; }

/* ---- Despre Noi mobile responsive ---- */
@media (max-width: 900px) {
    .dn-traditie__grid,
    .dn-inovatie__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
    /* Inovație timeline line — hide on tablet because the numbers
       no longer sit in a horizontal row */
    .dn-inovatie__steps::before { display: none; }

    /* Team slider — slightly smaller on tablet */
    .dn-team__slider { padding: 56px 80px; min-height: 440px; }
    .dn-team__photo { flex: 0 0 280px; width: 280px; }
    .dn-team__slide-inner { gap: 48px; }
    .dn-team__name { font-size: 30px; }
    .dn-team__role { font-size: 17px; }
    .dn-team__nav-btn { width: 48px; height: 48px; }
    .dn-team__placeholder .dn-team__monogram {
        width: 104px;
        height: 104px;
        font-size: 48px;
    }
}
@media (max-width: 640px) {
    .dn-section { padding: 56px 0; }
    .dn-section__title { font-size: 28px; margin-bottom: 28px; }
    .dn-intro { padding: 48px 0 36px; }
    .dn-intro__body p { font-size: 15px; }
    .dn-experienta { padding: 56px 0; }
    .dn-experienta__quote { font-size: 18px; line-height: 1.6; }
    .dn-traditie__grid,
    .dn-inovatie__steps {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Center the Tradiție icon cards on mobile — icon sits above
       the body text, both horizontally centered. */
    .dn-traditie__item { text-align: center; }
    .dn-traditie__icon { margin-left: auto; margin-right: auto; }

    /* Same for Inovație timeline steps — center the number circle above
       its description text on mobile. */
    .dn-inovatie__step { text-align: center; }
    .dn-inovatie__num { margin-left: auto; margin-right: auto; }

    .dn-cta { padding: 64px 0; }
    .dn-cta__title { font-size: 26px; }
    .dn-cta__desc { font-size: 15px; }
    .dn-cta__btn { padding: 14px 22px; font-size: 12px; }

    /* Team slider — smaller on mobile, stacks vertically.
       Use column-reverse so photo appears ABOVE text (the photo is
       the visual anchor on mobile; text reads as caption below). */
    .dn-team__dept { margin-bottom: 56px; }
    .dn-team__dept-title { font-size: 20px; margin-bottom: 24px; }
    .dn-team__slider { padding: 40px 16px 60px; min-height: 0; }
    .dn-team__slide-inner {
        flex-direction: column-reverse;
        gap: 24px;
        align-items: center;
        text-align: center;
    }
    .dn-team__photo { flex: 0 0 auto; width: 220px; max-width: 70%; }
    .dn-team__content { text-align: center; }
    .dn-team__name { font-size: 22px; }
    .dn-team__role { font-size: 15px; }

    /* Placeholder monogram a bit smaller to fit the smaller photo box */
    .dn-team__placeholder .dn-team__monogram {
        width: 96px;
        height: 96px;
        font-size: 40px;
    }

    /* Arrows tuck closer to the edges, smaller */
    .dn-team__nav-btn { width: 44px; height: 44px; }
    .dn-team__nav-btn--prev { left: 8px; }
    .dn-team__nav-btn--next { right: 8px; }
    .dn-team__nav-btn svg { width: 20px; height: 20px; }

    /* Counter — slightly smaller and tighter */
    .dn-team__counter { bottom: 16px; right: 16px; font-size: 13px; }
}