@charset "UTF-8";
/* =============================================================================
   Arovit legacy theme - main.css
   Single stylesheet for the whole public site. Phase A 1:1 replica of
   www.arovit.ro (Softimpera CMS, 2014).

   Every value here comes from docs/FRONTEND-SPEC.md (sections cited as
   "SPEC n.n") or from the legacy stylesheets it cites (MS = MasterStyle.css,
   SK = skeleton.css). Documented defects of SPEC 7.1 are fixed, never
   reproduced; they are marked "FIX D-...". Nothing else deviates.

   Image assets are expected in ../img/ (same folder the PHP templates use),
   with the legacy file names in lower case.

   Contents
     1.1  Custom properties (palette, SPEC 1.7)
     1.2  Fonts (SPEC 2.2/2.6)
     1.3  Reset
     1.4  Global typography (SPEC 1.6)
     1.5  Grid and containers (SPEC 1.4 / 4.0)
     1.6  Accessibility helpers (skip link, D-A11Y-02)
     5.0  Shared elements
     5.1  Header            5.2  Logos           5.3  Language flags
     5.4  Contact zone      5.5  Top menu + mobile menu
     5.6  Slider            5.7  Intro           5.8  Poll
     5.9  Latest articles   5.10 Products carousel
     5.11 Side menu         5.12 Breadcrumb      5.13 Product grid and card
     5.14 Pager             5.15 Product detail (gallery + lightbox)
     5.16 Article detail    5.17 Article list    5.18 Gallery
     5.19 Certifications    5.20 Contact form    5.21 Footer menu
     5.22 Footer            5.23 Back to top     5.24 Cookie banner
     5.25 Not found
     4.3  CMS content pages 4.10 Careers         4.12 Distribution
     4.13 Legal pages       PRD  Technical data (new)
     3.1  Media queries (M1-M4, S1-S3, C1-C3) and the 7.1 fixes
   ========================================================================== */

/* ===== 1.1 Custom properties - palette (SPEC 1.7) =========================
   Near-duplicate values are deliberate: #1c953f / #1c943f and
   #e71b23 / #e81b23 / #e61b23 are three distinct colours each. */
:root {
	--c-white:          #ffffff; /* page bg, text on coloured buttons, footer text */
	--c-text:           #424242; /* body text, default links, mobile menu links */
	--c-text-side:      #333333; /* side-menu links, text-box text */
	--c-brown:          #49312b; /* desktop menu, "Cele mai vizualizate produse", CMS intro */
	--c-brown-light:    #684b44; /* header phone / e-mail text */
	--c-h3:             #741f12; /* h3 "Ultimele articole" */
	--c-art-txt:        #80625a; /* article-card excerpt */
	--c-breadcrumb:     #a8a8a8; /* breadcrumb text and the "»" */
	--c-green:          #1c953f; /* breadcrumb links, green buttons, side-menu hover/bullet */
	--c-green-link:     #1c943f; /* link hover, pager current and pager hover */
	--c-green-light:    #22b24c; /* button hover, back-to-top hover, card top border, select */
	--c-red:            #e71b23; /* desktop menu hover, back-to-top disc, product names */
	--c-red-title:      #e81b23; /* article-card titles, cherry icon, VOTEAZA image */
	--c-red-cms:        #e61b23; /* red menu cross, inline CMS red initials */
	--c-poll-title:     #df1500; /* poll title */
	--c-validation:     #da3f3f; /* validation bubbles */
	--c-border:         #cccccc; /* 1px frames: cards, thumbs, inputs, galleria, separator */
	--c-art-band:       #d8c3b2; /* 5px top/bottom borders of the article band */
	--c-mobile-bar:     #f2c98f; /* mobile menu bar and button */
	--c-hamburger:      #e90000; /* hamburger bars */
	--c-mobile-hover:   #cccccc; /* mobile menu link hover background */
	--c-mobile-hover-t: #222222; /* mobile menu link hover text */
	--c-black:          #000000; /* inactive pager text, lightbox overlays */
	--c-cookie-bg:      #401815; /* cookie banner background */
	--c-cookie-btn:     #e71a22; /* cookie Accept button */
	--c-cookie-btn-h:   #ff4048; /* cookie Accept hover */
	--c-cookie-link:    #e71a21; /* policy links inside the cookie banner */
	--c-cms-h1:         #ff0000; /* CMS H1 titles (inline span of migrated content) */
	--c-galleria-txt:   #777777; /* galleria wrapper text */
	--c-thumb-frame:    #464646; /* galleria thumbnail frame */
	--c-lb-caption:     #bbbbbb; /* Lightbox2 caption */
	--c-counter:        #999999; /* lightbox counter */
	--c-poll-bar-bg:    rgba(66, 66, 66, .78); /* poll result bar track */
	--c-unavailable:    rgba(255, 0, 0, .71);  /* .Unavailable label */

	/* Grid (SPEC 1.4) - the desktop values; the bands override them in 3.1 */
	--container: 1050px;
	/* Fixed desktop column width for the body>#sideBar fallback centering math
	   below (1.5) - deliberately NEVER redefined by a 3.1 band, unlike
	   --container itself. That math only makes sense against the one true
	   desktop content width; reusing --container there made the "fallback is
	   inert once real content exists" claim false below 1050px, because 3.1
	   redefines --container per band for unrelated column-sizing reasons
	   (e.g. 300px under 768px) - at a 390px viewport this produced a stray
	   positive margin (50% - 300/2 = 45px) instead of the intended no-op,
	   pushing #sideBar 45px past the right edge on every product/category
	   page (any template that renders it as a direct child of <body>) and
	   causing real horizontal overflow - found by the session's own visual
	   pixel-diff against the Phase 0 baseline, not assumed. */
	--desktop-container: 1050px;
}

/* ===== 1.2 Fonts (SPEC 2.2, replica rules 2.6) ============================
   Self-hosted only. Roboto Slab 400, Kaushan Script and the dead 'font' face
   are deliberately NOT declared (SPEC 2.1, 2.6 rule 1; FIX D-FUN-02).
   Courgette and Marck Script are declared at 400 only, so the browser keeps
   synthesising the bold used by h1/h3/.title-wrap/.art-title (SPEC 2.6 r2). */
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto-400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto-400-italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto-700.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Roboto Slab';
	src: url('../fonts/roboto-slab-700.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Courgette';
	src: url('../fonts/courgette-400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
/* FIX (session 12): neither courgette-400.ttf nor its own current upstream release
   (github.com/google/fonts, ofl/courgette, checked directly - the gap is not an artefact of
   how this project subset the file) draws U+021A/U+021B (Ț/ț, the Romanian comma-below T) -
   confirmed by parsing the file's own cmap table, the same method FRONTEND-SPEC 2.2 already
   used to record the gap ("everything except t comma-below") and 2.6 rule 5 already named as
   the fix this needs: "a supplementary face that contains U+021A/U+021B in the same style"
   (F2). Every other Romanian diacritic this font is asked to render (ă â î ș) IS in the file,
   so only h1/h3 text containing ț/Ț was affected - proved live by rendering the real DOM
   heading, not by reading the CSS: with the site's own 'Courgette', cursive stack, the
   glyph metrics of 'ț' were byte-identical to the metrics of the GENERIC 'cursive' fallback
   alone (Canvas measureText, matching width/ascent/descent to the pixel) - i.e. the browser
   was silently drawing that one letter in the visitor's OS default script font (Comic Sans MS
   on a typical Windows Chrome) while every other letter in the same word rendered in
   Courgette, which is exactly the "one letter looks foreign mid-word" defect the owner saw.
   `courgette-400-tcomma.ttf` is 2 glyphs (1,124 bytes): the font's OWN 't'/'T' contours plus
   the font's OWN comma-tail contour (the same shape it already draws for ș/Ș, isolated from
   `scommaaccent`/`Scommaaccent` and re-centred under 't'/'T' instead of 's'/'S' - see
   tools/build/build_tcomma_supplement.py) - no foreign artwork, no new letterform invented,
   just the designer's existing pieces recombined. `unicode-range` scopes it to exactly the
   two codepoints Courgette itself lacks, so the browser only ever loads or uses it for those,
   and every other glyph keeps coming from courgette-400.ttf untouched. Because h1/h3 are
   already bold-VIA-SYNTHESIS from this same 400 face (SPEC 2.6 r2, unchanged), the browser
   synthesises the new glyphs' bold weight exactly the way it already does every other letter
   in the heading - nothing extra to declare at 700. */
@font-face {
	font-family: 'Courgette';
	src: url('../fonts/courgette-400-tcomma.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+021A, U+021B;
}
@font-face {
	font-family: 'Marck Script';
	src: url('../fonts/marck-script-400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
/* Same gap, same fix, same method as Courgette above: marck-script-400.ttf (and its own
   current upstream release) lacks U+021A/U+021B, `.art-title` (bold-synthesised) and
   `.date-style` are the two rules that use this family, and a real `.art-title` on the home
   page ("Plantăm astăzi pentru generațiile de mâine") was proved - by measuring the live DOM
   element's own computed style and Canvas glyph metrics, not by reading the CSS - to draw its
   "ț" via the generic 'cursive' fallback while the rest of the word stayed Marck Script.
   `marckscript-400-tcomma.ttf` is the same construction: this font's own 't'/'T' plus its own
   comma-tail (isolated from uni0219/uni0218 - the smallest-area subpath of each, since a
   naive "differs from the plain glyph" diff here picks up a few rounding-shifted units of the
   S itself, not just the comma; tools/build/build_tcomma_supplement.py picks the smallest
   contour rather than diffing point-for-point, and prints each candidate's area for review). */
@font-face {
	font-family: 'Marck Script';
	src: url('../fonts/marckscript-400-tcomma.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+021A, U+021B;
}

/* ===== 1.3 Reset (normalize-derived, as MS:1-40) =========================
   box-sizing:border-box is an invisible modernisation; every legacy box that
   declares width together with padding/border is put back on content-box
   below, so the SPEC numbers can be transcribed verbatim. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--c-white);
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}

audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline;
}

[hidden],
template {
	display: none !important;
}

a {
	background: 0 0;
}

a:active,
a:hover {
	outline: 0;
}

b, strong {
	font-weight: 700;
}

img {
	border: 0;
}

button, input, optgroup, select, textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button, select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

textarea {
	overflow: auto;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* MS:40 keeps the UA 1px cell padding (the reset rule is commented out there):
   it is what makes the breadcrumb row 26px tall (SPEC 5.12). Do not zero it. */

fieldset {
	border: 1px solid var(--c-border);
}

hr {
	background-color: transparent;
	border-color: transparent;
	height: 1px;
}

/* Custom radio / checkbox sprite (MS:41-64, SPEC 5.0).
   Two forms are supported: the legacy `input + label` and the accessible
   `label > input` used by the new poll markup. */
input[type="checkbox"]:not(old),
input[type="radio"]:not(old) {
	width: 28px;
	margin: 0;
	padding: 0;
	opacity: 0;
}

input[type="checkbox"]:not(old) + label,
input[type="radio"]:not(old) + label {
	display: inline-block;
	margin-left: -28px;
	padding-left: 28px;
	background: url('../img/checks.png') no-repeat 0 0;
	line-height: 24px;
}

input[type="checkbox"]:not(old):checked + label {
	background-position: 0 -24px;
}

input[type="radio"]:not(old):checked + label {
	background-position: 0 -48px;
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
	display: inline-block;
	background: url('../img/checks.png') no-repeat 0 0;
	line-height: 24px;
}

label:has(> input[type="checkbox"]:checked) {
	background-position: 0 -24px;
}

label:has(> input[type="radio"]:checked) {
	background-position: 0 -48px;
}

/* ===== 1.4 Global typography (SPEC 1.6, MS:88-122) ======================= */
body {
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	color: var(--c-text);
	line-height: 24px;
}

a {
	color: var(--c-text);
	text-decoration: none;
}

a:hover {
	color: var(--c-green-link);
	text-decoration: underline;
}

h1, h2, h3, h4, h5 {
	line-height: 1em;
}

h1 {
	font-size: 24px;
	margin: .67em 0;
	font-family: 'Courgette', cursive;
	/* weight stays the UA bold -> synthesised from the 400 face (SPEC 2.6 r2) */
}

/* SPEC 1.6/2.2: 'Amaranth' was never loaded by the legacy site, so h2 always
   rendered in the fallback (Arial on the reference platform). The replica
   names the face that is actually drawn (FIX D-FUN-02). */
h2 {
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
}

h3 {
	font-size: 30px;
	font-family: 'Courgette', cursive;
	color: var(--c-h3);
}

h4 {
	font-size: 12px;
}

/* ===== 1.5 Grid and containers (SPEC 1.4, SK:24-50; 4.0 float rule) ======
   Skeleton scopes the column widths to `.container .x.columns`; here they are
   unscoped so the same widths also apply to the templates that render their
   columns outside a .container wrapper. The values are unchanged. */
.container {
	position: relative;
	width: var(--container);
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

.container::after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.column,
.columns {
	float: left;
	display: inline;
	margin-left: 10px;
	margin-right: 10px;
}

.one.column,
.one.columns      { width: 40px; }
.two.columns      { width: 100px; }
.three.columns    { width: 190px; } /* gallery */
.four.columns     { width: 200px; } /* logo */
.five.columns     { width: 280px; }
.six.columns      { width: 340px; }
.seven.columns    { width: 380px; } /* product / article detail */
.eight.columns    { width: 460px; }
.nine.columns     { width: 520px; }
.ten.columns      { width: 580px; }
.eleven.columns   { width: 630px; } /* article text */
.twelve.columns   { width: 700px; }
.thirteen.columns { width: 760px; }
.fourteen.columns { width: 820px; }
.fifteen.columns  { width: 880px; }
.sixteen.columns  { width: 1030px; }

.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }

.row { margin-bottom: 20px; }

.clearfix::before,
.clearfix::after,
.row::before,
.row::after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.row::after,
.clearfix::after {
	clear: both;
}

/* SPEC 4.0 - exactly the two rules legacy has (MasterStyle.css:180-188), and
   nothing more. The whole vertical/horizontal behaviour of every inner page
   falls out of them, so they must not be "helped":

   #sideBar is a 220px float with a 34px top and 30px right margin, rendered on
   every template including the ones with nothing to put in it. #mainContent is
   a float with NO width, so it is shrink-to-fit against the 1050px container.
   The browser then does the rest by itself:
     - content whose preferred width fits in 1050-250 = 800px (the distribution
       map, the category/product .wrapCont) is placed BESIDE the sidebar, at
       x = 408, level with the breadcrumb (y = 236);
     - content that wants the full 1050px (prose pages, the article list, the
       gallery) cannot fit beside it, so it drops below the sidebar's margin box
       - which is 34px tall and zero-height wide - landing at x = 158, y = 270.
   That single mechanism is where /distributie's 250px indent, every prose page's
   34px gap under the breadcrumb, and the empty sidebar's apparent invisibility
   all come from at once.

   An earlier session collapsed the empty sidebar to `width:0;margin:0;float:none`
   and moved the 34px onto #mainContent to fix a ~400px rightward shift on
   /contact. The shift was real, but its cause was the missing `.container`
   wrapper, not the sidebar: with the wrapper restored (header.php/footer.php)
   the legacy rules are correct as written, and the collapse was what made
   /distributie start 250px too far left and every prose page start 34px too high. */
#mainContent {
	float: left;
}

#sideBar {
	position: relative;
	width: 220px;
	margin: 34px 30px 0 0;
	float: left;
}

.wrapCont {
	width: 800px;
}

/* FRONTEND-SPEC 4.4: the category-listing H1 is a red inline span in legacy
   markup (<h1><span style="color:#ff0000">...) - found missing (default text
   colour, wrong source field too, see arovit_term_heading()) by fresh
   side-by-side comparison against baseline/screenshots/1366x768/
   ro__produse-arovit__tomate.png. --c-cms-h1 already existed for exactly this
   colour but nothing referenced it yet. */
.wrapCont > h1 {
	color: var(--c-cms-h1);
}

#mainContentWrap {
	overflow: hidden;
	position: relative;
}

/* REMOVED (session 6): the `body > …{ margin-left: max(0px, 50% - 525px) }`
   fallback that used to stand in for the missing `.container` wrapper.
   It was never equivalent, in three ways that each produced a real,
   owner-visible defect, and keeping it "just in case" would only hide the
   next one:
     - it listed selectors by hand, so every element NOT on the list escaped
       the column entirely and rendered flush against the viewport's left edge:
       the /miniblog and gallery <h1>, the contact form and its <hr>/<h2>, the
       careers "no open positions" line, the legal "Ultima actualizare" line and
       the not-found message;
     - it set only a left margin, never a width, so `.gallery` and `.blog-list`
       took the viewport width instead of 1050px - the fairs album reflowed from
       5 to 7 columns at 1920px and MiniBlog's 45%-wide cards came out 71px too
       wide at 1366px;
     - below 1050px it evaluates to 0 by design, so at 768px and 390px the inner
       pages had no gutter at all while the header and footer (real `.container`
       divs) stayed centred.
   header.php now opens the same `<div class="container">` legacy's master page
   does, and every inner template renders inside `#sideBar` + `#mainContent`. */

/* ===== 1.6 Accessibility helpers ========================================
   New skip link (D-A11Y-02): invisible until focused, no visual change. */
.skip-link.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: var(--c-white);
	border: 2px solid var(--c-green);
	color: var(--c-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

/* Honeypot (already inline-styled by the PHP; repeated for robustness) */
.arovit-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/* ===== 5.0 Shared elements (SPEC 5.0, MS:446-464, 623-660) =============== */
.centered      { float: none; margin: auto; }
.text-left     { text-align: left !important; }
.text-right    { text-align: right; }
.text-center   { text-align: center; }
.text-justify  { text-align: justify; }
.space-top     { margin-top: 20px; }
.space-bot     { margin-bottom: 20px; }
.space-htop    { margin-top: 10px; }
.space-hbot    { margin-bottom: 10px; }
.pad-top       { padding-top: 20px; }
.pad-bot       { padding-bottom: 20px; }
.pad-htop      { padding-top: 10px; }
.pad-hbot      { padding-bottom: 10px; }
.overflowH     { overflow: hidden; }
.marginAuto    { margin: auto; }
.relative      { position: relative; }
.floatLeft     { float: left; }
.floatRight    { float: right; }
.w100          { width: 100%; }

.clear,
.clearfloat {
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0;
}

.sep {
	width: 100%;
	border-top: 1px solid var(--c-border);
	margin: 15px 0;
}

.emptyCentered {
	width: 100%;
	font-weight: bold;
	text-align: center;
	padding: 20px 0;
}

/* Green button: INAPOI, TRIMITE MESAJ, DETALII on /miniblog (MS:446-464) */
.ButtonDefault {
	color: var(--c-white);
	background-color: var(--c-green);
	font-weight: bold;
	height: 35px;
	width: 150px;
	display: block;
	line-height: 35px;
	border: 0;
	text-align: center;
	text-transform: uppercase;
}

.ButtonDefault:hover {
	background-color: var(--c-green-light);
	text-decoration: none;
	cursor: pointer;
	color: var(--c-white);
}

/* Text inputs (MS:660 + the inline widths of the legacy markup, SPEC 5.0):
   text input 246x31, textarea 366x129 as drawn.
   content-box, against this sheet's global border-box default, because that is what legacy
   computes (measured: input width 230px / height 15px, textarea 350px, all content-box) and
   because the mobile bands then size these the way legacy does. Expressing the same drawn
   box as a border-box width looked equivalent and is not: `.BoxW { width: 94% }` in the two
   mobile bands is a percentage of the column, so under border-box the 16px of padding and
   border came out of the 94% and every field rendered 282px wide where legacy draws 298. */
.TextBox {
	box-sizing: content-box;
	border: 1px solid var(--c-border);
	padding: 7px;
	color: var(--c-text-side);
	background-color: var(--c-white);
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	line-height: normal;
	width: 230px;
	height: 15px;
}

textarea.TextBox {
	width: 350px;
	height: 113px;
	line-height: 24px;
}

/* Validation bubbles (MS:654-657). content-box: height 14 + padding 12 +
   border 4 = 30px tall, exactly as measured. */
.validation,
.validation2 {
	box-sizing: content-box;
	position: absolute;
	top: -37px;
	left: 95px;
	z-index: 5;
	width: auto !important;
	height: 14px;
	line-height: 1;
	padding: 6px;
	font-size: 13px;
	text-align: left;
	color: var(--c-white) !important;
	background: var(--c-validation);
	border: 2px solid var(--c-validation);
	border-radius: 2px;
}

.validation2 {
	left: 5px;
}

.validation::after,
.validation2::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color: var(--c-validation) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
	top: 25px;
	left: 10px;
}

/* ===== 5.1 Header (SPEC 5.1, MS:137-152, 772-788) ======================== */
.headerbg {
	background-image: url('../img/header.png');
	/* default repeat, anchored at 0 0: tiles from the left edge (SPEC 1.8) */
	height: 210px;
	position: relative;
	z-index: 10;
}

#header {
	margin: auto;
	position: relative;
	overflow: hidden;
	padding-top: 30px;
}

#navigation {
	position: relative;
	z-index: 20;
	float: left;
}

/* ===== 5.2 Logos (SPEC 5.2) ============================================== */
#LinkHome {
	display: block;
	text-align: center;
}

#LinkHome img {
	/* Legacy is served as XHTML 1.0 Transitional, which puts the browser in ALMOST
	   STANDARDS mode: a line box whose only content is an image gets no descender
	   space, so its #LinkHome measures exactly 200x102. This build is HTML5 (full
	   standards mode), where the same markup measured 200x110 - the extra 8px is the
	   strut's descent below the baseline at line-height 24px. `display:block` takes the
	   image out of the line box entirely and restores legacy's box; `margin:0 auto`
	   keeps the centring that #LinkHome's `text-align:center` was providing.
	   Same root cause as the `.clip6 img` rule further down. */
	display: block;
	margin: 0 auto;
	width: 200px;
	height: 102px;
}

.mobile-logo-link,
.logoMobile {
	display: none;
}

/* ===== 5.3 Language flags (SPEC 5.3, MS:785-788) ========================= */
.language {
	float: right;
	margin-top: 54px;
}

.language td {
	padding: 0; /* the legacy table is cellpadding=0 cellspacing=0 -> 55px wide */
}

.language img {
	display: block;
	width: 25px;
	height: 25px;
}

.flagsMobile {
	display: none;
}

/* ===== 5.4 Contact zone in the header (SPEC 5.4, MS:779-783) ============= */
.cont-head {
	float: left;
	margin-top: 10px;
	margin-left: 30px;
	font-size: 15px;
	color: var(--c-brown-light);
}

.cont-head table {
	height: 99px;
	width: 720px;
}

.cont-head td {
	vertical-align: middle;
}

/* block images: no inline descender under them, so the zone table is exactly
   90 + 20 + 2 = 112px tall and #navigation stays on the y=152 line (SPEC 1.5) */
.cont-head td img {
	display: block;
}

/* --c-brown-light is #684b44, defined for exactly this text ("header phone /
   e-mail text"). The legacy zone markup wraps the mailto text in
   <span style="color:#684b44">, so the e-mail renders brown like the phone next
   to it; this rule used to repaint it --c-text (#424242) and only restored the
   brown on hover. No new colour value - the correct one was already declared. */
.cont-head a,
.cont-head a:hover {
	color: var(--c-brown-light);
}

/* The three zone images are drawn 1:1 at their legacy sizes (SPEC 1.9):
   village 201x90 with a 20px bottom margin, phone 30x30, envelope 26x26.
   Their sizes are what keeps #navigation on the 152px line of SPEC 1.5. */
.cont-head td:nth-child(1) img {
	width: 201px;
	height: 90px;
	margin-bottom: 20px;
}

.cont-head td:nth-child(2) img {
	width: 30px;
	height: 30px;
}

.cont-head td:nth-child(4) img {
	width: 26px;
	height: 26px;
}

/* ===== 5.5 Top menu, desktop (SPEC 5.5, MS:240-263 + generated head rule) = */
#navigation .MenuTop {
	float: left;
}

#navigation .MenuTop ul.level1 {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Legacy floats the <ul> itself, so it contains its floated items and measures
	   1007x50; without this it measured 1007x0 here - the items landed correctly
	   because .MenuTop is floated too, but the list box itself was collapsed. */
	float: left;
}

#navigation .MenuTop ul.level1 li {
	position: relative;
	float: left;
}

#navigation .MenuTop ul.level1 li a.level1.MenuTopL1,
.MenuTopL1 a {
	box-sizing: content-box; /* height 40 + 2x5 padding = the 50px item box */
	font-family: 'Roboto Slab', serif;
	font-size: 13.6px;
	height: 40px;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 40px;
	text-align: center;
	color: var(--c-brown);
	background: url('../img/crossw.png') no-repeat scroll 0% 50% transparent;
	transition: all 0.5s ease;
	font-weight: bold;
	/* padding-left 20 / right 13 (MS) + the 5px vertical padding of the
	   generated `a.static` rule -> 50px item height (SPEC 5.5) */
	padding: 5px 13px 5px 20px;
}

#navigation .MenuTop ul.level1 li a.level1.MenuTopL1:hover,
.MenuTopL1 a:hover {
	text-decoration: none;
	color: var(--c-red);
	background: url('../img/cross.png') no-repeat scroll 0% 50% transparent;
}
/* SPEC 5.5: the legacy menu renders no active/selected state - none is added. */

/* ===== 5.5a Collapsed top menu, 960-1006px (D-16, new interaction) =======
   The nine top-menu items measure 1007px in Romanian and 980px in English
   (tools/browser/_probe_nav_breakpoint.js), against a container that follows the
   viewport in the 960-1049px band - so below 1007px the row wrapped onto a second
   line (D-REN-39). Legacy instead keeps its fixed 1050px container and lets the
   whole page overflow horizontally, which is not a behaviour worth reproducing.

   Instead the same <ul> collapses behind a labelled disclosure button, and this is
   where the toggle and the panel are declared: hidden by default so >= 1007px is
   byte-for-byte what it always was, switched on by the one band rule in 3.1.

   No new colour value: the button is the site's OWN hamburger (--c-mobile-bar
   ground, --c-hamburger bars, 4px radius - identical to .mobile-menu-toggle, which
   is the same idea at <= 959px), the label is the menu's own Roboto Slab/13.6px/
   uppercase/--c-brown, and the panel is the bordered white card (--c-white on
   --c-border) this build already uses for .catalog-viewer__empty and
   .job-list__empty. */
.nav-compact-toggle {
	display: none;
}

/* ===== 5.5b Mobile menu bar (new markup, SlickNav look of SPEC 5.5) ======
   Hidden at >= 960; the media queries of section 3.1 switch it on. */
.mobile-menu-bar {
	display: none;
}

.mobile-menu-toggle {
	float: right;
	margin: 5px 5px 6px;
	padding: 7px 10px;
	border: 0;
	border-radius: 4px;
	background: var(--c-mobile-bar);
	line-height: 0;
	cursor: pointer;
	width: 50px;
	height: 35px;
}

.mobile-menu-toggle span {
	display: block;
	width: 30px;
	height: 5px;
	border-radius: 6px;
	background-color: var(--c-hamburger);
}

.mobile-menu-toggle span + span {
	margin-top: 3px;
}

.mobile-menu-list {
	clear: both;
	width: 100%;
	list-style: none;
	/* SlickNav clones the real <ul> into its panel and zeroes margin/padding on the
	   panel, not on the inner list, so the open legacy menu keeps the UA 16px block
	   margin: first item at y=134, panel 499px tall. */
	margin: 16px 0;
	padding: 0;
	overflow: hidden;
}

.mobile-menu-list li {
	display: block;
}

.mobile-menu-list a {
	display: block;
	padding: 7px 10px;
	margin: 2px 5px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 24px;
	color: var(--c-text);
	border-top: 1px solid var(--c-white);
	text-align: left;
}

.mobile-menu-list a:hover {
	background: var(--c-mobile-hover);
	color: var(--c-mobile-hover-t);
	text-decoration: none;
}

/* ===== 5.6 Slider - home banner (SPEC 5.6, MS:1162-1172, 1227-1230) ======
   The legacy ran FeatureCarousel (>=768) and ResponsiveSlides (<768); the
   replacement markup (.home-slider) reproduces the rendered look of both.

   JS contract: the centred slide carries .is-active, its right neighbour
   .is-next and its left neighbour .is-prev; every other slide stays behind
   the centre at opacity 0. With no class set at all (no JS - the state the
   acceptance screenshots are taken in) the first slide is the centre, the
   second the right peek and the last the left peek: exactly the
   FeatureCarousel starting frame (startingFeature:1). */
.containerSlides {
	position: relative;
	height: 396px;
}

.bgbanner {
	background: url(../img/bgbanner.jpg) no-repeat center top transparent;
	height: 386px;
	background-size: 100%;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: -10px;
}

#slides {
	width: 100%;
	height: 396px;
	margin: auto;
	position: relative;
}

.home-slider {
	position: relative;
	width: 100%;
	height: 350px;
	margin-bottom: .5em;
	font-family: Arial, sans-serif;
	font-size: 12px;
}

.home-slider__track {
	position: static;
}

/* every feature: the small, dimmed state parked behind the centre */
.home-slider__slide {
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -267.5px;
	border: 5px solid var(--c-white);
	line-height: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 0;
	transition: opacity .5s ease;
}

.home-slider__slide img {
	display: block;
	width: 525px;
	height: 350px;
}

/* centre feature: 525x350 image in the 5px white frame */
.home-slider__slide.is-active,
.home-slider__track:not(:has(.is-active)) .home-slider__slide:first-child {
	top: 20px;
	left: 50%;
	margin-left: -267.5px;
	opacity: 1;
	z-index: 3;
}

/* side features: half size, top 70, 50px from the container edge, opacity .4 */
.home-slider__slide.is-prev,
.home-slider__slide.is-next,
.home-slider__track:not(:has(.is-active)) .home-slider__slide:nth-child(2),
.home-slider__track:not(:has(.is-active)) .home-slider__slide:last-child:not(:nth-child(-n+2)) {
	top: 70px;
	opacity: .4;
	z-index: 1;
	margin-left: 0;
}

.home-slider__slide.is-prev img,
.home-slider__slide.is-next img,
.home-slider__track:not(:has(.is-active)) .home-slider__slide:nth-child(2) img,
.home-slider__track:not(:has(.is-active)) .home-slider__slide:last-child:not(:nth-child(-n+2)) img {
	width: 262.5px;
	height: 175px;
}

.home-slider__slide.is-prev,
.home-slider__track:not(:has(.is-active)) .home-slider__slide:last-child:not(:nth-child(-n+2)) {
	left: 50px;
	right: auto;
}

.home-slider__slide.is-next,
.home-slider__track:not(:has(.is-active)) .home-slider__slide:nth-child(2) {
	left: auto;
	right: 50px;
}

.home-slider__slide.is-prev:hover,
.home-slider__slide.is-next:hover {
	opacity: .8; /* FeatureCarousel hover, SPEC 5.6 */
}

/* Arrows: the 53x53 discs of SPEC 5.10 (slick.css:31-43). The -130px offset
   is applied only where it fits in the viewport (FIX D-REN-02, see 3.1). */
.home-slider__arrow,
.prod-carousel__arrow {
	position: absolute;
	top: 40%;
	margin-top: -10px;
	width: 53px;
	height: 53px;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
	z-index: 5;
}

.home-slider__arrow--prev,
.prod-carousel__arrow--prev {
	left: 0;
	background-image: url(../img/back.png);
}

.home-slider__arrow--next,
.prod-carousel__arrow--next {
	right: 0;
	background-image: url(../img/forward.png);
}

/* Home slider (FeatureCarousel, SPEC 5.6) has no arrow controls at all at
   >= 768: "#carousel-left/#carousel-right (not in the page, so no arrows)".
   Arrows only exist in the phone path (ResponsiveSlides' .centered-btns_nav,
   < 768) - re-shown there below. The product carousel (SPEC 5.10, slick.js)
   keeps its arrows at every width, so this cannot live on the shared
   .home-slider__arrow, .prod-carousel__arrow selector above. */
.home-slider__arrow {
	display: none;
}

/* ===== 5.7 Intro text, home (SPEC 5.7, MS:867-870, 903-906) ============== */
.content-wrap {
	float: left;
	width: 67%;
}

.wrapper {
	margin-top: 20px;
	margin-bottom: 130px;
}

/* ===== 5.8 Poll (SPEC 5.8, MS:908-916, 1087-1151) ======================== */
.poll-wrap {
	width: 281px;
	height: 323px;
	background-image: url(../img/bg.png);
	background-repeat: no-repeat;
	float: right;
	margin-right: -11px;
	/* SPEC 5.8 measures the box at [938,668], i.e. 28px below the top of
	   #mainContent. The legacy float started inside .content-wrap > .wrapper
	   and pulled itself up by 20px; here it is a sibling of .content-wrap,
	   28px higher, so the same rendered position needs +28 instead of -20. */
	margin-top: 28px;
}

#pollBox {
	margin-top: 65px;
}

#pollBox .title {
	width: 100%;
	height: 35px;
	color: var(--c-poll-title);
	font-size: 24px;
	line-height: 35px;
	text-align: center;
	padding: 0;
	margin: 0;
	font-family: 'Courgette', cursive;
}

#pollBox .subtext {
	position: relative;
	padding: 5px 0;
	margin-left: 20px;
	margin-top: 10px;
	width: 80%;
}

#pollBox .subtext > p {
	margin: 0;
	font-weight: bold;
	font-size: 15px;
	line-height: 24px;
}

/* the radio list - same box legacy draws (MasterStyle.css:1107-1111, :1149-1151).
   The markup now has the real .radioButtons wrapper around table.input-box, so these
   are the wrapper's rules only; an earlier version applied them to .input-box as well,
   which double-counted the spacing once both elements existed. */
#pollBox .radioButtons {
	padding-left: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	position: relative;
}

#pollBox .radioButtons td {
	/* content-box: legacy has no global border-box, so its `height:30px` is the CONTENT
	   height and the UA's 1px cell padding brings each row to the 32px legacy renders.
	   Under this theme's global border-box the same declaration produced 30px rows. */
	box-sizing: content-box;
	height: 30px;
}

#pollBox .input-box label {
	font-size: 13px;
	color: var(--c-text);
}

/* bubble: kept at its static vertical position, lifted by the legacy 49px */
#pollBox .validation {
	position: absolute;
	top: auto;
	left: 95px;
	margin-top: -49px;
}

.ButtonPoll {
	color: var(--c-white);
	background: url(../img/button2.png) no-repeat 0 0;
	line-height: 35px;
	height: 35px;
	width: 131px;
	text-align: center;
	text-transform: uppercase;
	display: block;
	border: 0;
	padding: 0;
	margin-left: 7px;
	margin-top: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
}

.ButtonPoll:hover {
	color: var(--c-white);
	text-decoration: none; /* SPEC 5.0: no hover change */
}

/* results panel after voting (SPEC 5.8, MS:1115-1130), same 281x323 box */
.poll-results {
	margin-top: 10px;
}

.poll-results__row {
	margin: 5px 0;
	font-size: 13px;
	line-height: 19px;
}

.poll-results__bar {
	height: 8px;
	width: 100%;
	background: var(--c-poll-bar-bg);
}

.poll-results__bar > span {
	display: block;
	height: 8px;
	background: var(--c-green-light);
}

.poll-results__total {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 24px;
}

/* ===== 5.9 Latest articles, home (SPEC 5.9, MS:790-865, 1236-1239) ======= */
.art-home {
	background: url(../img/artbg.jpg) center top;
	background-size: 100%;
	border-top: 5px solid var(--c-art-band) !important;
	border-bottom: 5px solid var(--c-art-band) !important;
}

/* the two flourishes (left.png / right.png, 180x41) hug the 268px heading
   cell of the legacy table, which keeps the whole group centred */
.table-pad {
	padding-top: 30px;
	padding-bottom: 40px;
}

.table-pad img,
.table-pad .flourish {
	width: 180px;
	height: 41px;
}

.table-pad h3 {
	margin: 30px 0;
}

/* FIX D-REN-01: legacy pins the card at height:370px, which pushed the first
   card's longer teaser (and its DETALII button) outside the white box and left
   the three buttons at three different heights. The approved fix is "cards that
   grow with their content and aligned buttons", so the row is a flex row of
   equal-height cards: nothing is clipped, every card ends at the same y, and the
   buttons line up. The 287x370 box, the 34px gutter and the 70px bottom margin
   are unchanged, so a page whose teasers all fit renders exactly as legacy. */
.art-home .container {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.art-home .table-pad {
	flex: 0 0 100%;
}

.art-tab {
	box-sizing: content-box;
	width: 287px;
	min-height: 370px;
	height: auto;
	background-color: var(--c-white);
	margin-right: 34px;
	margin-bottom: 70px;
	padding: 20px;
	position: relative;
	border-top: 2px solid var(--c-green-light);
	float: left;
	display: flex;
	flex-direction: column;
}

.art-home .art-tab:nth-child(4),
.art-home .art-tab:last-child {
	margin-right: 0;
}

.date-style {
	text-align: center;
	line-height: 40px;
	font-size: 23px;
	color: var(--c-white);
	background: url(../img/rectangle.png) no-repeat;
	width: 201px;
	height: 40px;
	font-family: 'Marck Script', cursive;
	position: absolute;
	top: -22px;
	margin: 0 auto;
	left: 0;
	right: 0;
}

.tableAdlist {
	width: 275px;
	margin-top: 20px;
}

.tableAdlist td {
	padding: 3px;
	text-align: center;
	vertical-align: top;
}

/* 289x141 window of the 289px-wide image (SPEC 6.5: reproduce the crop) */
.clip {
	position: relative;
	width: 289px;
	height: 151px;
}

.clip .img {
	position: absolute;
	width: 289px;
	height: auto;
	clip: rect(10px 289px 151px 0px);
	clip-path: inset(10px 0 calc(100% - 151px) 0);
	top: -10px;
	left: 0;
}

/* Legacy emits `<img src="cherries.png"> <a class="art-title">` as an ordinary inline
   pair inside a text-align:center cell, so the title link's box hugs its own text
   (205 / 240 / 223px on the three home cards) and its hover underline covers the
   words, not the whole column. Drawing the cherries as a ::before of a display:block
   anchor made every title a full-width 289px block with the icon optically 4px high. */
.tableAdlist img.cherries {
	width: 21px;
	height: 21px;
	vertical-align: baseline;
}

.art-title {
	color: var(--c-red-title);
	font-size: 22px;
	font-weight: bold;
	font-family: 'Marck Script', cursive;
	text-align: center;
}

.art-title:hover {
	color: var(--c-green-link); /* a:hover wins over .art-title, SPEC 5.9 */
	text-decoration: underline;
}

/* Inline, like the legacy <span> it reproduces: a one-line teaser hugs its text
   (211px on the Anuga card) instead of always filling the 289px column. */
.art-txt {
	color: var(--c-art-txt);
	font-size: 12px;
	line-height: 19px;
}

.art-divbtn {
	margin-top: auto; /* FIX D-REN-01: buttons aligned at the card bottom */
	padding-top: 20px;
}

.art-btn {
	width: 156px;
	height: 40px;
	background: url(../img/button.png) no-repeat;
	display: block;
	text-align: center;
	line-height: 40px;
	margin: 0 auto;
	left: 0;
	right: 0;
	color: var(--c-white) !important;
	text-transform: uppercase;
	text-decoration: none;
}

.art-btn a {
	color: var(--c-white) !important;
	text-transform: uppercase;
	display: block;
	text-decoration: none;
}

.art-btn:hover,
.art-btn a:hover {
	color: var(--c-white) !important;
	text-decoration: none; /* SPEC 5.0: no hover change */
}

/* ===== 5.10 Most-viewed products carousel (SPEC 5.10, slick.css) =========
   JS contract: .prod-carousel__track is the clip window (overflow hidden);
   move the strip with track.scrollLeft or by offsetting the slides - not by
   transforming the track itself, which would move the window with it. */
.title-wrap {
	font-family: 'Courgette', cursive;
	text-align: center;
	color: var(--c-brown);
	font-size: 34px;
	margin-top: 40px;
	margin-bottom: 20px;
}

.prod-carousel {
	position: relative;
	width: 100%;
	margin-bottom: 30px;
}

.prod-carousel__track {
	display: flex;
	overflow: hidden;
	width: 100%;
	scroll-behavior: smooth;
}

.prod-carousel__slide {
	flex: 0 0 auto;
	width: 180px;
	/* the slide box is 180x300, but the 320px card inside it is what gives
	   the strip its 330px height in the baseline - it must not be clipped */
	min-height: 300px;
	margin: 10px 15px 0; /* pitch 210 -> 5 slides fill the 1050 container */
}

.prod-carousel__slide .prod-box {
	margin-right: 0;
	margin-bottom: 0;
}

/* ===== 5.11 Side category menu + mobile select (SPEC 5.11, MS:1017-1066) = */
.ca-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: auto;
}

.ca-menu li {
	width: 220px;
	height: 35px;
	overflow: hidden;
	position: relative;
	display: block;
	background: var(--c-white) url(../img/ellipse.png) no-repeat scroll 0% 50%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
	margin-bottom: 4px;
	transition: all 300ms ease-in-out;
	line-height: 35px;
	text-indent: 15px;
	font-size: 14px;
}

.ca-menu li:last-child {
	margin-bottom: 0;
}

.ca-menu li a {
	text-align: left;
	width: 100%;
	height: 100%;
	display: block;
	color: var(--c-text-side);
	position: relative;
}

.ca-menu li:hover {
	text-indent: 50px;
	background-color: var(--c-green);
	color: var(--c-white) !important;
}

.ca-menu li a:hover {
	color: var(--c-white) !important;
	text-decoration: none;
	transition: all 300ms ease-in-out;
}
/* SPEC 5.11: the legacy renders no active side item - none is added. */

/* the <select> that replaces TinyNav (MS:1301-1311); shown <= 959 only */
#tinynav1,
.tinynav,
#category-select {
	width: 100%;
	height: 40px;
	text-align: center !important;
	text-align-last: center;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: var(--c-white);
	border-radius: 0;
	border: 1px solid var(--c-border);
	display: none;
	background: var(--c-green-light);
}

/* ===== 5.12 Breadcrumb (SPEC 5.12, MS:413-420) =========================== */
.SitePath,
.SitePath a,
table.SitePath {
	font-size: 12px;
	color: var(--c-breadcrumb);
}

.SitePath a {
	color: var(--c-green);
}

.SitePath a:hover {
	color: var(--c-green); /* .SitePath a is later than a:hover, SPEC 5.12 */
	text-decoration: underline;
}

/* ===== 5.13 Product grid and card (SPEC 5.13, MS:605-619, 946-976) =======
   FIX (session 12): `.prod-box` used to be float:left with a fixed height:320px - legacy's
   own value (FRONTEND-SPEC 5.13), sized for a short 1-2 line name. `/produse-arovit/dietetice`
   (5 products, 4 of the longest names in the whole catalogue - CONTENT-INVENTORY.csv, up to 62
   rendered characters/3 lines) overflowed that box by up to 32px, and because a float's
   NEXT row is positioned from its DECLARED height rather than its rendered content extent,
   the overflowing text painted straight over the top of row 2's cards - measured with
   _probe_prodcards_s12.js: row 0 content bottom 668 against row 1's top of 656, a 12px
   overlap, on both languages of that category at every desktop-tier viewport and on
   /produse-arovit/nectaruri (11 products, same long "conținut redus de zaharuri" names) at
   768px. This is D-14's own defect shape (MiniBlog, session 7) on the one other template that
   renders a fixed-height card grid - same fix: a dedicated grid wrapper around the cards only
   (`.prod-grid`, siblings of the `<br>`/pager `.wrapCont` already carries - CLAUDE.md R44, a
   grid must not swallow non-card children), `display:grid`'s default `align-items:stretch`
   equalising each row to its tallest card, and no more fixed height so a long name simply
   grows the card instead of spilling out of it.
   `repeat(auto-fill, 180px)` (rather than a hardcoded `repeat(4, ...)`) reproduces the float
   layout's own free reflow: this build already drops from 4 to 3 cards a row inside the
   960-1049 band, at whatever width `#mainContent`'s own D-REN-48 shrink (CLAUDE.md session 10)
   leaves too little room for a 4th - auto-fill recomputes however many 180px tracks fit the
   container at ANY width, which is the same "fits or wraps" rule a float used, without a
   hardcoded column count that could go stale the next time the container's width formula
   changes. Verified this still measures 798px (4 columns) at 1024-1920 with the identical
   26px gutter, byte-for-byte the legacy geometry (FRONTEND-SPEC 5.13: "grid rows of 4
   .prod-box 180x320" - now 180xauto).
   `.prod-box` keeps its own `margin-bottom` (not a grid `row-gap`) deliberately: grid items
   never collapse margins with their neighbours the way block boxes do, so the existing 20px
   value produces an identical row gap in the new grid AND keeps working unchanged in the
   <768px band below, where `.prod-grid` reverts to `display:block` (one column - see the M2/M3
   bands) and the cards are plain stacked block boxes again. */
.prod-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 180px);
	column-gap: 26px;
}

.prod-box {
	width: 180px;
	margin-bottom: 20px;
	position: relative;
}

.clip6 {
	box-sizing: content-box;
	height: 225px;
	width: 147px;
	border: 1px solid var(--c-border);
	padding: 16px;
	text-align: center;
	display: table-cell;
	vertical-align: bottom;
}

.clip6 img,
.clip6 .img {
	position: relative;
	width: 147px;
	height: auto;
	/* Two separate 8px problems, one declaration. (1) On the home strip legacy's
	   slick.css sets `.slick-slide img { display:block }`, so the jar sits flush
	   on the bottom of the table-cell frame; as an inline image it floated 8-9px
	   higher. (2) In the category grid legacy is served as XHTML Transitional
	   (almost-standards mode), where a line box containing only an image has no
	   descender space - in standards mode that adds 8px under every card image.
	   `vertical-align:bottom` removes the descender gap in both places without
	   touching any dimension. */
	display: block;
	vertical-align: bottom;
	margin: 0 auto;
}

.clip6 .img--placeholder {
	display: block;
	width: 147px;
	height: 147px;
	background: var(--c-white);
}

/* D-CE-01: an article with no featured image used to render nothing at all
   in its card's image slot (inc/template-tags.php's arovit_home_article_card()
   /arovit_list_article_card() only ever built an <img> tag when a thumbnail
   existed) - a bordered frame + a generic "no image" glyph reads as an
   intentional placeholder, matching the bordered-frame convention .clip6
   above already established for products, not a rendering glitch. Sized to
   fill each card's own existing crop box (.clip 289x151, .clip2 150x120,
   both already position:relative) rather than a fixed size of its own, so no
   card dimension changes. %23cccccc in the data URI is --c-border's own
   value (#cccccc) - SVG data URIs can't reference a CSS custom property. */
.clip .img--placeholder,
.clip2 .img--placeholder {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: var(--c-white);
	border: 1px solid var(--c-border);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='1.5'%3E%3Crect x='2' y='4' width='20' height='16' rx='1'/%3E%3Ccircle cx='8' cy='10' r='1.5'/%3E%3Cpath d='M3 17l5-5 4 4 4-5 5 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32%;
}

.clip6 + div {
	margin-top: 10px;
	text-align: center;
}

.prod-txt {
	font-size: 16px;
	color: var(--c-red);
	font-family: Arial, Helvetica, sans-serif; /* Amaranth was never loaded */
}

.prod-txt:hover {
	color: var(--c-green-link);
	text-decoration: underline;
}

.Unavailable {
	position: absolute;
	top: 140px;
	left: 13px;
	background-color: var(--c-unavailable);
	padding-right: 10px;
	padding-left: 10px;
	color: var(--c-white);
}

/* ===== 5.14 Pager (SPEC 5.14, MS:527-539) ===============================
   21x21 boxes: the anchors stay inline, so their background box is the
   13px font box plus the 3px/7px padding. */
.pager-table {
	margin: 0 auto;
}

.pager-table td {
	padding: 1px 2px;
}

.PagerStyle,
.PagerStyleSelect,
.PagerStyle:hover {
	padding: 3px 7px;
	background-color: var(--c-green-link);
	color: var(--c-white);
	cursor: pointer;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
}

.PagerStyle {
	background-color: var(--c-white);
	color: var(--c-black);
}

/* ===== 5.15 Product detail: gallery, texts, back button (SPEC 5.15) ====== */
.prod-zone {
	padding: 5px 0;
	width: 800px;
	margin-top: 27px;
}

#galleria-wrap {
	color: var(--c-galleria-txt);
	width: 325px;
	margin: 18px auto;
}

/* The Galleria "classic" box: 325x320 content in a 1px #ccc frame (327x322),
   stage inset 10/10/60/10 (305x250) and a 50px thumbnail strip below it.
   The markup is a plain list of <a><img></a>: <a class="galleria-stage"> is the
   stage, every other link is a thumbnail. Legacy's strip carries one thumbnail per
   photo INCLUDING the one on the stage (a single-image item still shows one), so the
   stage photo is emitted twice - lightbox.js de-duplicates the album by href. */
#galleria,
.galleria-container {
	position: relative;
	width: 327px;
	height: 322px;
	border: 1px solid var(--c-border);
	background: var(--c-white);
	overflow: hidden;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: center;
	padding: 10px;
	gap: 10px 5px;
	line-height: 0;
}

#galleria > .galleria-stage {
	flex: 0 0 100%;
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* The one product with no gallery file at all renders the frame with an empty stage, the
   way legacy does (measured: legacy's .galleria-stage is 303x0 there, not 303x250). */
#galleria > .galleria-stage:empty {
	height: 0;
}

#galleria > .galleria-stage img {
	/* 100%, not a fixed 305px: below 768 the box narrows to 99% of a ~300px column and
	   legacy's stage narrows with it (measured 277x185 at 390px wide, against a fixed
	   305x204 that overflowed the frame here). */
	max-width: 100%;
	max-height: 250px;
	width: auto;
	height: auto;
}

/* The thumbnail row. Legacy lays it out as: 23px arrow, 244px clipped list, 23px arrow
   across the 304px content width when the thumbnails overflow, and as a plain 304px list
   with both arrows display:none when they fit. Flex `gap` only applies between visible
   items, so hiding the arrows widens the list to the full 304px on its own. */
.galleria-strip {
	flex: 0 0 100%;
	/* `flex-basis:100%` alone is not enough: a flex item's default `min-width:auto` lets the
	   row grow to its max-content width (measured 553px for a ten-photo strip), which then
	   defeats the clipping the paging depends on. */
	min-width: 0;
	max-width: 100%;
	display: flex;
	align-items: center;
	gap: 7px;
	height: 42px;
}

.galleria-strip__list {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 5px;
	overflow: hidden;
	scroll-behavior: smooth;
}

.galleria-strip__nav {
	display: none;
	flex: 0 0 23px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}

.galleria-strip.is-paged .galleria-strip__nav {
	display: block;
}

/* Legacy's arrows come from the Galleria classic sprite: a solid black triangle at 0.8
   opacity, 0.2 when the strip is at that end. Sampled from the sprite itself rather than
   picked by eye (CLAUDE.md R22) - every non-transparent pixel of it is rgb(0,0,0). */
.galleria-strip__nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	opacity: 0.8;
}

.galleria-strip__nav--prev::before {
	border-right: 8px solid var(--c-black);
	transform: translate(-60%, -50%);
}

.galleria-strip__nav--next::before {
	border-left: 8px solid var(--c-black);
	transform: translate(-40%, -50%);
}

.galleria-strip__nav[disabled] {
	cursor: default;
}

.galleria-strip__nav[disabled]::before {
	opacity: 0.2;
}

#galleria .galleria-strip__list > a {
	display: block;
	flex: 0 0 auto;
	height: 42px;
	border: 1px solid var(--c-thumb-frame);
	overflow: hidden;
	box-sizing: border-box;
}

#galleria .galleria-strip__list > a img {
	display: block;
	height: 40px;
	width: auto;
	max-width: none;
}

.galleria-info-link {
	display: none;
}

.socials {
	width: 300px;
	overflow: hidden;
	margin-left: 28px;
}

.btnTop {
	float: right;
}

.btnW2 {
	margin-bottom: 10px;
	margin-top: 20px;
	float: left;
	margin-left: 36px;
}

/* ===== 5.15b Lightbox popup (SPEC 5.19/5.15, Lightbox2 look) ============
   Expected DOM (built by assets/js/lightbox.js):
     .lb-overlay.is-open > .lb-frame > .lb-image + .lb-prev + .lb-next
                         + .lb-close + .lb-caption + .lb-counter
   Caption and counter may also be siblings of .lb-frame; both are styled.
   The black backdrop uses rgba() instead of opacity so the white frame
   stays opaque, which is what the legacy pair of elements produced. */
.lb-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background-color: rgba(0, 0, 0, .85);
	text-align: center;
	font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
	font-weight: 400;
	line-height: 0;
}

.lb-overlay.is-open {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.lb-frame {
	position: relative;
	background-color: var(--c-white);
	border-radius: 4px;
	padding: 10px;
	margin: 0 auto;
	/* Hug the image (prettyPhoto's frame is 732px around a 700px photo) instead of
	   stretching to 90vw and leaving 60px of white on each side. */
	width: fit-content;
	max-width: min(90vw, 720px); /* 700px image + the 10px padding on each side */
	line-height: 0;
}

.lb-image {
	display: block;
	/* Legacy's gallery/product lightboxes never show the original file: the anchor points
	   at a /…/700/700/ derivative, so the biggest an image ever gets is 700px on its long
	   edge. Linking the full-size original made the overlay 819x668 where legacy's is
	   732x620. Capping here keeps a single href (the original stays downloadable) while
	   matching the legacy frame. */
	max-width: min(100%, 700px);
	max-height: 78vh;
	width: auto;
	height: auto;
	border: none;
}

.lb-prev,
.lb-next {
	position: absolute;
	top: 10px;
	bottom: 10px;
	/* 49% of the frame plus the 10px inset on each side made the two halves overlap by
	   12px in the middle; prettyPhoto (the legacy gallery lightbox) leaves a small gap
	   between them instead. calc keeps them adjacent at any frame width. */
	width: calc(50% - 15px);
	display: block;
	border: 0;
	padding: 0;
	background: transparent;
	outline: 0;
	cursor: pointer;
}

.lb-prev { left: 10px; }
.lb-next { right: 10px; }

.lb-prev::before,
.lb-next::before {
	content: "";
	position: absolute;
	top: 48%;
	width: 0;
	height: 0;
	border-style: solid;
	opacity: 0;
	transition: opacity .2s ease;
}

.lb-prev::before {
	left: 10px;
	border-width: 16px 22px 16px 0;
	border-color: transparent var(--c-white) transparent transparent;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6));
}

.lb-next::before {
	right: 10px;
	border-width: 16px 0 16px 22px;
	border-color: transparent transparent transparent var(--c-white);
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6));
}

.lb-prev:hover::before,
.lb-next:hover::before {
	opacity: 1;
}

.lb-close {
	position: absolute;
	top: -37px;
	right: 0;
	width: 27px;
	height: 27px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	outline: 0;
	font-size: 0;
	line-height: 0;
}

.lb-close::before,
.lb-close::after {
	content: "";
	position: absolute;
	top: 12px;
	left: 3px;
	width: 21px;
	height: 3px;
	background: var(--c-white);
}

.lb-close::before { transform: rotate(45deg); }
.lb-close::after  { transform: rotate(-45deg); }

.lb-caption,
.lb-counter {
	display: block;
	width: 100%;
	max-width: 90vw;
	text-align: left;
	color: var(--c-lb-caption);
	padding: 0 10px;
}

.lb-caption {
	padding-top: 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1em;
}

.lb-counter {
	font-size: 11px;
	line-height: 1.4em;
	padding-bottom: 1em;
}

/* `.prod-excerpt` used to be declared here, with a comment stating that D-CE-02 makes
   "Text scurt" render on the product page between the H1 and the long description.
   D-CE-04 reversed that decision in the session-6 re-audit - the field is printed on the
   listing card, which is where legacy prints it, and printing it again on the detail page
   was this build's own duplication - and `single-arovit_product.php` has not emitted the
   class since. The rule matched nothing and its comment asserted the opposite of the
   decision in force, which is the pair R41 and R45 exist to catch: a selector with nothing
   left to match, and a workaround that outlived its reason. Removed in session 10; the note
   stays so nobody re-derives the doubt. */

/* ===== PRD Technical data block (new content, REQ-PRD-03) ===============
   No legacy equivalent; typed to match the product description around it. */
.prod-tech,
.prod-tech-data {
	margin-top: 20px;
	font-size: 13px;
	line-height: 24px;
	color: var(--c-text);
}

.prod-tech {
	width: 100%;
	border-collapse: collapse;
}

.prod-tech th,
.prod-tech td {
	text-align: left;
	vertical-align: top;
	padding: 4px 10px 4px 0;
	border-bottom: 1px solid var(--c-border);
}

.prod-tech th {
	width: 40%;
	font-weight: bold;
	white-space: nowrap;
}

.prod-tech-data__row {
	margin-bottom: 10px;
}

.prod-tech-data__row h2 {
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 24px;
	margin: 0;
	color: var(--c-text);
}

.prod-tech-data__row p {
	margin: 0;
}

/* ===== 5.17 Article list (SPEC 5.17, MS:555-566, 983-1005) =============== */

/* D-14 (owner-approved improvement, D-11). The two columns used to be floats, and with
   `height:auto` (the D-REN-03 fix) two things followed that the owner asked to have cleaned up:

   1. Cards in the same visual row ended at different heights - measured on the real /miniblog
      at 1366x768 the bottoms of a row were up to 386px apart and the DETALII buttons with them,
      because a card was exactly as tall as its own teaser (the twelve real teasers on page 1
      run from 0 to 548 characters - 0 to 13 rendered lines in this column).
   2. Worse, and not in the owner's screenshot: the floats stopped filling row by row. Measured
      reading order of the twelve cards was left, right, RIGHT, left, right, left ... - card 3
      sat under card 2 in the right-hand column while the left column was still showing card 1.
      Legacy does the same thing (its own last two cards are both in the right column), for the
      same reason; the 768-959 band already had a grid for exactly this, added when its fixed
      height was removed. The desktop band never got one.

   A grid fixes both at once: `grid` fills row by row by definition, and its default
   `align-items: stretch` makes every card in a row as tall as the tallest one. The columns keep
   legacy's own geometry - 45% each with a 50px gutter is 473px at x=158 and x=681 on the 1050px
   container, which is where legacy draws them. */
.blog-list {
	display: grid;
	grid-template-columns: repeat(2, 45%);
	column-gap: 50px;
}

/* The article archive is full-width content, and this says so instead of leaving it to be
   inferred. #mainContent is a shrink-to-fit float (docs/BUILD.md 13.1) whose width comes from
   its widest child's MAX-CONTENT size, and the float layout used to satisfy that by accident:
   max-content lays every float on one notional line, so twelve cards side by side measured far
   more than the 1050px container and #mainContent was clamped to the full 1050. A grid has only
   two columns, so its max-content is two cards - which is fine while the cards hold text (the
   Romanian page still measured 1050) and collapses when they do not. D-13 produced exactly that
   case: on /en/miniblog every card is empty, and the grid's max-content fell to ~422px, which
   dragged #mainContent down with it and drew twelve 186px cards beside the sidebar at x=408
   instead of twelve 473px ones at x=158. Scoped to this one archive body class, so no other
   template's shell changes, and it is the geometry the Romanian page already computed. */
body.post-type-archive-arovit_article #mainContent {
	width: 100%;
}

.blog-wrap {
	/* Column, so .blog-foot's `margin-top:auto` can push the button to the card's bottom edge
	   - the second half of "buttons line up", which equal heights alone does not give. */
	display: flex;
	flex-direction: column;
	margin-top: 20px;
	margin-bottom: 30px;
	/* FIX D-REN-03: no fixed height at any width (the legacy 150px at
	   768-959 made items overlap each other and the footer). */
	height: auto;
	/* Owner-requested improvement (session 6): the two columns of a MiniBlog page
	   ran into each other with nothing between them. Each item is now a card in the
	   site's own existing card language - the white fill and the 2px green top rule
	   of the home article card (`.art-tab`), plus the 1px --c-border frame every
	   other thumbnail/input on the site already uses. No new colour, no new idiom.
	   The global border-box keeps the padding inside the 45% width, so the columns
	   stay exactly 473px wide at x=158 and x=681 as legacy has them. */
	background-color: var(--c-white);
	border: 1px solid var(--c-border);
	border-top: 2px solid var(--c-green-light);
	padding: 15px;
}

/* The image/title/teaser half. A plain block, not a flex row, so the two floats inside it keep
   behaving as floats and every `.blog-img`/`.blog-desc` rule in the responsive bands below keeps
   applying as written (they set margins and crop widths; `.blog-img`/`.blog-desc` no longer carry
   percentage widths - the crop box decides the split, see `.blog-img` below). `flex: 1 1 auto` is
   what leaves the leftover height for `.blog-foot`'s `margin-top: auto` to absorb. */
.blog-body {
	flex: 1 1 auto;
}

/* D-14: the button row. `margin-top:auto` in a flex column eats the leftover space, which is
   what pins it to the bottom edge of a stretched card.
   `justify-content:flex-end`, NOT `text-align:right`, reproduces the `float:right` the markup
   used to carry here: `.ButtonDefault` is `display:block` with a fixed 150px width, and
   `text-align` does nothing to a block-level child - it left-aligned every DETALII button
   against legacy's right-aligned one (measured: legacy 0px from the card's right edge at 1366,
   768 and 390; the text-align version put it 16px from the LEFT edge instead). */
.blog-foot {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
}

/* D-14: the image column is sized by the crop box it contains, not by a percentage of the
   card. `.clip2` is a FIXED 150x120 (140x120 between 768 and 959) - exactly as on legacy - so a
   percentage column can silently end up narrower than the picture it holds, and then the picture
   paints over the first few pixels of the text beside it. That is what was happening: the 15px
   card padding added in session 6 takes 30px out of the content box, which dropped `.blog-img`
   to 135px at 768 (clip 140) and 147px at 390 (clip 150) - measured, 12 of 12 cards overlapping
   at both, against 0 on legacy - and would have done the same between 960 and 1049, where the
   container follows the viewport. `width:auto` on the float makes the column shrink-to-fit the
   crop box, so it can never be too narrow; `.blog-desc` then takes whatever is left as a block
   formatting context (`overflow:hidden`, the standard way to fill the space beside a float -
   nothing is clipped, the box has no height constraint). Side effect worth recording: the
   desktop teaser column goes 286px -> 293px, which is 14px closer to legacy's own 307px. */
.blog-img {
	width: auto;
	float: left;
	/* Legacy's gutter between the photo and the text, measured rather than chosen: its own
	   .blog-img is 165px around a 150px crop box at >=960 and <=479 (15px), 150 around 140 at
	   768-959 (10px) and 183 around 165 at 480-767 (18px). The percentage columns this replaced
	   carried that gap by accident, badly - 4px at 1366 against legacy's 15 - and sizing the
	   column to the crop box removed it entirely, so the teaser butted flush against the
	   photo. Declaring it keeps the crop box fixed AND the gap legacy's. */
	margin-right: 15px;
}

.blog-desc {
	width: auto;
	overflow: hidden;
}

.blog-desc > a {
	font-family: "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: var(--c-text);
}

.blog-desc > a:hover {
	color: var(--c-green-link);
	text-decoration: underline;
}

/* D-14: the teaser, clamped - NOT cut.
   The clamp value is measured, not guessed. Counted as RENDERED text (the browser's own
   textContent, which is what decides the line count - not the raw field length), the nineteen
   migrated articles' teasers are 0, 0, 0, 9, 27, 33, 37, 59, 61, 77, 80, 83, 101, 119, 199,
   231, 233, 324 and 548 characters - nineteen values - which in this column render as 0 to 13
   lines. Six lines shows seventeen of the nineteen whole and bounds the two that are not -
   without it the single 548-character teaser alone made its grid row 456px tall and left
   ~240px of blank card next to it.
   `-webkit-line-clamp` ends the last line with a real ellipsis, so a clamped teaser reads as
   "there is more", which the previous `height`+`overflow:hidden` (below 768px) did not - that
   cut the text mid-line, with no ellipsis, and hid the teaser entirely behind a long title.
   Degrades safely: a browser without line-clamp support simply shows the whole teaser and its
   row grows, which is the layout as it was, never a clipped or broken one.
   Titles are deliberately NOT clamped: the longest of the nineteen is 47 characters
   ("AROVIT angajeaza Reprezentant Vanzari Satu Mare"), which is 2 lines here and 3 at 768px -
   they do not "vary a lot", and the equal-height row already absorbs the difference, so a
   clamp could only ever cut a real title for no gain. */
.blog-desc > span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
	font-size: 13px;
	line-height: 24px;
}

/* the left 150px of a 250px-wide image (SPEC 5.17; keep the crop) */
.clip2 {
	position: relative;
	width: 150px;
	height: 120px;
	top: 7px;
	overflow: hidden;
}

.clip2 img {
	position: absolute;
	width: 250px;
	height: auto;
	max-width: none;
	clip: rect(10px, 150px, 130px, 0px);
	top: -10px;
	left: 0;
}

.ButtonDefault.btnW {
	margin-bottom: 10px;
	margin-top: 20px;
}

/* ===== 5.18 Gallery (SPEC 5.18, MS:590-603) =============================
   5 cells per row at >= 960 (.three.columns 190, pitch 210). overflow is
   clipped on the frame and on the grid so the absolutely positioned images
   cannot widen the document (FIX D-REN-01). */
.gallery {
	overflow: hidden;
}

.clip5 {
	box-sizing: content-box;
	position: relative;
	width: 189px;
	height: 123px;
	border: 1px solid var(--c-border);
	margin-bottom: 20px;
	overflow: hidden;
}

.clip5 img,
.clip5 .img {
	position: absolute;
	width: 200px;
	height: auto;
	max-width: none;
	clip: rect(10px, 200px, 135px, 10px);
	top: -10px;
	left: -10px;
}

/* ===== 5.19 Certifications (SPEC 5.19, 4.11) ============================
   All sizing is inline on the images (200x283 + 15px padding + 1px #ccc);
   .certdiv only lays them out and must add no margin or padding of its own.
   content-box keeps the inline width/padding/border arithmetic of the
   migrated CMS markup (232x315 boxes). */
/* No flex here: SOURCE/Content/MasterStyle.css has no base `.certdiv` rule at
   all, only per-breakpoint `.certdiv img` margin overrides. The three scans are
   plain inline anchors sharing one text baseline, which is what puts the two
   314px-tall certificates 1px below the 315px one; `display:flex` flattened that
   and left 8px of trailing whitespace under the row. The images carry their own
   inline margin-right, so nothing else is needed. */
.certdiv {
	margin: 0;
	padding: 0;
}

.certdiv img {
	box-sizing: content-box;
	max-width: 100%;
	/* Almost-standards-mode descender again (see #LinkHome img): the three scans sit on a
	   line of their own, so in standards mode the row was 8px taller than legacy's 315. */
	vertical-align: bottom;
}

/* ===== 5.16 Article detail extras (SPEC 5.16) ===========================
   The gallery column reuses #galleria-wrap / #galleria of 5.15; .socials and
   .btnW2 are declared there as well. Body text is the global 13px/24px. */
.btnM {
	/* no base rule in the legacy: only the <768 centring of 3.1 */
	width: 150px;
}

/* ===== 5.20 Contact form and captcha (SPEC 5.20, MS:642-660, 1261-1278) == */
.inputTxt {
	width: 90px;
	float: left;
	font-size: 13px;
	line-height: 24px;
}

.inputTxt span,
.inputTxt label {
	font-weight: bold;
}

.inputBox {
	margin-bottom: 15px;
}

.inputBox2 {
	margin-bottom: 15px;
	float: left;
	/* CLAUDE.md R45: this used to hardcode 380px. Legacy leaves this float to shrink-to-fit,
	   sized by the 380px .captchaWrap sitting under the textarea; the KD-21 session that first
	   made the captcha invisible left the float with nothing to size it, so it collapsed to
	   the textarea's own `width:94%` (366px on desktop, 160px at 390px, against legacy's 380
	   and 300) and this rule pinned the two measured widths back explicitly (the mobile one in
	   the two mobile bands below). Session 12 put a real 380px `.captchaWrap` back in that
	   exact slot (main.css 5.20, `.captcha-question`) - the float's own shrink-to-fit already
	   measures 380px from it again, checked by removing this line rather than assumed, so the
	   accommodation this comment described has nothing left to accommodate. Mobile still needs
	   its own line (100%, in the bands below) because the box there is meant to be full width,
	   which is not what removing a workaround here would produce. */
}

.inputBox .relative,
.inputBox2 .relative {
	position: relative;
}

.captchaWrap {
	position: relative;
	width: 380px;
}

.captchaWrap .validation {
	left: 190px;
	width: 196px !important;
	top: -4px;
}

.captchaWrap img {
	width: 180px;
	height: 50px;
	margin: 5px;
	float: left;
}

.captchaWrap > div > span {
	margin: 5px;
	float: left;
}

/* `.btnCaptcha` alone, exactly like legacy: adding `.ButtonDefault` here raised the
   specificity above the mobile band's `.btnCaptcha { margin: 20px auto; float: none }`, so
   the send button stayed floated right at 390px instead of centring the way legacy's does. */
.btnCaptcha {
	float: right;
	margin-top: 20px;
}

/* Session 12: the visible math question, KD-21's replacement for the legacy image captcha.
   `.captchaWrap` above (width/position) is reused as-is - it is still sized for this exact
   slot inside `.inputBox2`. `.captchaWrap img` and `.captchaWrap > div > span` are the old
   captcha image and its refresh/audio icons; nothing here has either, so those two rules
   simply match nothing now rather than needing to be removed - they still apply correctly to
   the box they were written for; there is just no image in it any more. `#contact-form` gives
   the validation-bubble override below enough specificity to win over `.captchaWrap
   .validation` (main.css above, and its two mobile-band copies) regardless of source order,
   rather than depending on where in the cascade each one happens to sit. */
.captcha-question {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
	margin-bottom: 15px;
}

.captcha-question label {
	font-weight: bold;
	font-size: 13px;
}

.captcha-question input#contact-captcha {
	width: 50px;
	text-align: center;
}

#contact-form .captcha-question .validation {
	position: static; /* no image beside it to float past - the default -37px/95px offset
	                      (tuned for the 230px name/e-mail/phone boxes) reads wrong beside a
	                      50px number box; inline, right after the field, always reads right. */
	display: inline-block;
	margin-left: 4px;
}

#contact-form .captcha-question .validation::after {
	display: none; /* the little pointer triangle only makes sense pointing at something
	                   below an absolutely-positioned bubble - static flow has no "below". */
}

/* New send result banner (there was no clean success/error state in the
   legacy beyond the small .UpdateProgress text): same visual language as
   the validation bubbles, full width above the form. */
.form-notice {
	width: 100%;
	margin: 15px 0;
	padding: 10px 15px;
	border: 2px solid var(--c-green);
	border-radius: 2px;
	color: var(--c-green);
	background: var(--c-white);
	font-size: 13px;
	line-height: 24px;
	font-weight: bold;
}

.form-notice.is-error,
.form-notice--error {
	border-color: var(--c-validation);
	color: var(--c-validation);
}

/* ===== 5.21 Footer menu (SPEC 5.21, MS:879-892, 1241-1244) ============== */
.marginFooterMenu {
	margin-left: 190px;
	margin-top: 20px;
	/* Contain the floated ul. Without this the wrapper measured 0px tall, the
	   copyright table below it could not clear the float, and the whole copyright
	   block was squeezed into the 219px gap to the right of the menu. */
	overflow: hidden;
}

ul.MenuBottomL1,
.MenuBottomL1.level1 {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

.MenuBottomL1 li {
	float: left;
	border-right: 1px solid var(--c-white);
	padding-left: 6px;
	padding-right: 6px;
	font-style: italic;
}

.MenuBottomL1 li:last-child {
	border-right: none;
	font-style: italic;
}

.MenuBottomL1 a {
	color: var(--c-white);
	text-decoration: none;
	white-space: nowrap;
	display: block;
	padding-left: .15em;
	padding-right: .15em;
	font-size: 13px;
	line-height: 24px;
}

.MenuBottomL1 a:hover {
	color: var(--c-white);
	text-decoration: none; /* SPEC 5.21: no hover state */
}

/* ===== 5.22 Footer (SPEC 5.22, MS:872-877, 894-901, 205-209) ============
   The IQNet / SRAC certification logos are painted into footer.jpg; they are
   not separate images (SPEC 1.8). */
.footerbg {
	background: url(../img/footer.jpg) center top transparent;
	height: 250px;
	margin-top: 20px;
}

#footer {
	position: relative;
	width: 100%;
	padding-top: 40px;
}

/* Same almost-standards-mode difference as the logo (see #LinkHome img): legacy is served
   as XHTML 1.0 Transitional, so its inline Facebook icon adds no descender and the row
   measures 55px; here it measured 63. `display:block` takes the icon out of the line box
   and `margin:0 auto` keeps the centring the cell's `text-align:center` was providing. */
#footer td img {
	display: block;
	margin: 0 auto;
}

#footer .title {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 10px;
}

/* No display:block here. Legacy has no rule for this image at all, and it is the td's
   own text-align:center that centres it - a block-level image ignores that and sits at
   the cell's left edge, which is where the Facebook icon ended up below 960px. */

.copyright {
	color: var(--c-white);
	font-style: italic;
	text-align: center;
	font-size: 13px;
	line-height: 24px;
}

.copyright a {
	color: var(--c-white);
}

.copyright a:hover {
	color: var(--c-white);
	text-decoration: underline;
}

/* ===== 5.23 Back to top (SPEC 5.23, MS:423-443) =========================
   Visibility is the script's job (shown after 450px of scroll): it toggles
   the element's inline display or the hidden attribute, so no display rule
   is declared here that could fight it. */
#back-top {
	margin: 0;
	/* A <p> is display:block by default, so without this the "#back-top.is-visible"
	   rule below had nothing to switch ON: the red disc was painted on every page
	   from load, before any scrolling. back-to-top.js was toggling the class
	   correctly at the 450px threshold all along - the class simply had no effect. */
	display: none;
}

#back-top.is-visible {
	display: block;
}

#back-top span {
	position: fixed;
	bottom: 15px;
	right: 15px;
	margin: 0;
	padding: 0;
	width: 60px;
	height: 60px;
	border-radius: 50px;
	display: block;
	background: var(--c-red) url(../img/up_arrow.png) no-repeat center center;
	transition: 0.5s;
}

#back-top a:hover span {
	background-color: var(--c-green-light);
}

/* ===== 5.24 Cookie banner (SPEC 5.24, cookieconsent 3.0.3 look) =========
   This whole block used to target the legacy cookieconsent.js classes
   (.cc-window/.cc-btn/...), which assets/public/js/consent.js's own markup
   (.cookie-banner/.cookie-banner__*, class-consent.php) never emits - the
   banner rendered completely unstyled (transparent, static position, no
   colours). Found via visual-parity diffing (docs/VISUAL-PARITY.csv);
   DEFECTS.csv D-LEG-01/KD-17 already call for "a consent banner ... in the
   existing banner style", so this renames the selectors to the real markup
   with no value changed (--c-cookie-* custom properties above already held
   the right colours, just unused until now). display:flex is scoped to
   :not([hidden]) so it doesn't fight the [hidden] attribute consent.js
   toggles (the browser's own `[hidden]{display:none}` must win while set). */
.cookie-banner {
	position: fixed;
	left: 1em;
	bottom: 1em;
	box-sizing: border-box;
	overflow: hidden;
	z-index: 9999;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	padding: 2em;
	max-width: 24em;
	background-color: var(--c-cookie-bg);
	color: var(--c-white);
}

.cookie-banner:not([hidden]) {
	display: flex;
	flex-direction: column;
}

.cookie-banner__message {
	display: block;
	margin-bottom: 1em;
}

/* OWNER DECISION D-19 (session 9), resolving Q-30's third contrast pair.
   The two links are `#e71a21` on the banner's `#401815` ground - legacy's own exact values,
   measured side by side on the running instances - which is 3.35:1 where WCAG 1.4.3 asks for
   4.5:1. D-19 freezes the colours (D-02/R22) and asks for the cheapest honest improvement
   instead: an underline.

   What that fixes and what it does not, stated plainly because the two requirements are
   different rules and only one of them moves:
   - WCAG 1.4.1 "Use of Color": FIXED. Colour was the links' only affordance at rest; the
     hover underline below did not help a visitor who never hovers, and nothing marked them on
     focus either. They are now distinguishable without perceiving colour.
   - WCAG 1.4.3 "Contrast (Minimum)": UNCHANGED, and unchangeable under D-19. axe reports it
     as `color-contrast` with fgColor #e71a21 / bgColor #401815 / contrastRatio 3.35 /
     expectedContrastRatio 4.5 - arithmetic on the two colour values, which D-19 keeps. An
     underline cannot alter a contrast ratio. Q-30 lists the options that would (lighten the
     link, darken the ground); both change a colour, and the owner has said not to.
   The :hover rule is kept so the hover state still differs from rest. */
.cookie-banner__message a {
	color: var(--c-cookie-link);
	text-decoration: underline;
}

.cookie-banner__message a:hover,
.cookie-banner__message a:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.cookie-banner__compliance {
	display: flex;
	align-items: center;
	align-content: space-between;
}

.cookie-banner__compliance > .cookie-banner__accept {
	flex: 1;
}

.cookie-banner__accept {
	display: block;
	padding: .4em .8em;
	font-size: .9em;
	font-weight: 700;
	border-width: 2px;
	border-style: solid;
	border-color: var(--c-cookie-btn);
	background-color: var(--c-cookie-btn);
	color: var(--c-white);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
}

.cookie-banner__accept:hover,
.cookie-banner__accept:focus {
	background-color: var(--c-cookie-btn-h);
	border-color: var(--c-cookie-btn-h);
	color: var(--c-white);
	text-decoration: underline;
}

/* ===== 5.25 Not-found message (SPEC 5.25/4.15) =========================
   Legacy geometry, reproduced: a width:100% div inside the shrink-to-fit
   #mainContent, which therefore ends up only as wide as its own text and sits
   beside the empty sidebar at x=408. An earlier session read the legacy result
   as a bug ("centred but actually left-aligned") and gave the block the full
   viewport width instead - but with no .container around it that centred the
   text on the WINDOW, 225px right of where legacy puts it, which is not the
   same improvement. Matching legacy here; if the message should be centred on
   the 1050px column, that is a design decision to record in FRONTEND-SPEC 7.1
   first. */
/* "Ultima actualizare" on the two legal pages is a new, admin-editable field
   (docs/CONTENT-EDITABILITY.csv) that legacy has no equivalent for. It renders
   inside the content column like any other line rather than as an unstyled
   full-width block above it. */
.legal-updated {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--c-breadcrumb);
}

.not-found-message {
	display: block;
	width: 100%;
	padding: 20px 0;
	font-weight: bold;
	font-size: 13px;
	line-height: 24px;
	color: var(--c-text);
	text-align: center;
}

body.error404 #mainContent,
body.error404 .cms-body {
	float: none;
	width: 100%;
}

/* ===== 4.3 CMS body of the plain content pages =========================
   .cms-body is the wrapper class used by every plain-content template
   (/despre-noi, /distributie, /cariere, the legal pages). Inline styles of
   the migrated CMS HTML (red H1 span, 14/16px paragraphs) are left alone. */
/* No width here on purpose. `.cms-body` has no legacy counterpart - it is this
   theme's wrapper for the migrated CMS HTML - so it must stay transparent to
   layout and let its parent `#mainContent` do the shrink-to-fit sizing legacy
   does. An earlier `width: var(--container)` pinned it to the full 1050px,
   which is right for a prose page but wrong for /distributie, whose legacy
   column is 760px wide (the width of its map image) and therefore sits BESIDE
   the empty sidebar at x=408 rather than below it. */
.cms-body {
	font-size: 13px;
	line-height: 24px;
}

.cms-body img {
	max-width: 100%;
	height: auto; /* FIX D-REN-01: the /distributie map no longer overflows */
}

.cms-body table {
	max-width: 100%;
}

.cms-body h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
}

/* ul.leaf: the legacy 15x13 check.png bullet (only /despre-noi, SPEC 1.9, 4.3).
   A CSS-drawn checkmark was tried here first, but it only reproduced the
   check stroke, not the bordered-square look of the real icon (found by
   fresh side-by-side comparison against baseline/screenshots/1366x768/
   ro__despre-noi.png) - list-style-image with the real file is exact. */
ul.leaf {
	list-style-image: url('../img/check.png');
}

ul.leaf2 {
	list-style: none;
	padding-left: 22px;
}

/* the 9 category tiles of /despre-noi: 4 per row, 160px cells, 15px padding */
table.prod-wrap {
	border-collapse: collapse;
}

.prod-wrap td {
	box-sizing: content-box;
	width: 160px;
	border: 1px solid var(--c-white);
	padding: 15px;
	text-align: center;
	vertical-align: top;
}

.prod-wrap td img {
	width: 70px;
	height: 96px;
	/* Third instance of the almost-standards-mode descender (see #LinkHome img and
	   .clip6 img). Here the image is followed by <br> and the tile caption inside the
	   same line box, so it has to stay inline: `vertical-align:bottom` drops the
	   descender without turning it into a block, which would add a line of its own.
	   Each tile was 8px taller than legacy's, i.e. 24px over the three-row table. */
	vertical-align: bottom;
}

.class-a a {
	color: var(--c-green);
}

.prod-img {
	border: 1px solid var(--c-border);
	padding: 16px;
	text-align: center;
}

/* ===== 4.12 Distribution (SPEC 4.12) =================================== */
.distribution {
	max-width: 100%;
}

/* ===== 4.13 Legal pages (SPEC 4.13) ==================================== */
.legal-updated {
	font-size: 12px;
	color: var(--c-breadcrumb);
	line-height: 24px;
	margin-top: 20px;
}

/* ===== 4.10 Careers job list (new; SPEC 4.10 had no rows to render) =====
   Card language borrowed from .prod-box / .clip6: white, 1px #ccc, Roboto
   body text, green accents. */
.job-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.job-list__item {
	background: var(--c-white);
	border: 1px solid var(--c-border);
	padding: 15px 20px;
	margin-bottom: 20px;
}

.job-list__title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 24px;
	margin: 0 0 5px;
	color: var(--c-text);
}

.job-list__title a {
	color: var(--c-text);
}

.job-list__title a:hover {
	color: var(--c-green-link);
	text-decoration: underline;
}

.job-list__meta {
	font-size: 12px;
	line-height: 19px;
	color: var(--c-breadcrumb);
	margin: 0 0 10px;
}

.job-list__item a.job-apply,
.job-list__item .job-list__apply {
	color: var(--c-green);
}

/* D-12: the "no open positions" state. Same bordered white card as the catalog page's own
   empty state (.catalog-viewer__empty) so the site has ONE empty-state look rather than two -
   no new colour, no new token, both built from --c-border/--c-white/--c-text. The 20px top
   margin is the gap .job-list itself uses under the intro text, so the block sits where the
   first job posting would. */
/* The careers column is full-width content, declared rather than inferred - the same rule, for
   the same reason, as the article archive's. #mainContent is a shrink-to-fit float (docs/BUILD.md
   13.1), so on /en/cariere - where D-13 leaves the body empty and this card is the only child -
   it collapsed to the width of one sentence: a 440px box at x=250 between 960 and 1049px, against
   1024px at x=0 on the Romanian twin. A `width: var(--container)` on the CARD did not fix that,
   because in the 960-1049 band --container is `100%`, and a percentage width resolved against a
   shrink-to-fit parent is treated as auto - the exact trap CLAUDE.md R44 describes. Scoped to the
   careers body class, so no other template's shell changes; the Romanian page already computed
   these numbers. */
body.arovit-template-careers #mainContent {
	width: 100%;
}

.job-list__empty {
	margin-top: 20px;
	border: 1px solid var(--c-border);
	background: var(--c-white);
	padding: 30px 20px;
	text-align: center;
	font-size: 13px;
	line-height: 24px;
	color: var(--c-text);
	box-sizing: border-box;
}

.job-list__empty p {
	margin: 0;
}

/* D-CE-02: "Cerințe"/"Cum se aplică" now render (page-careers.php) - same
   13px/24px body-text rhythm as every other CMS text block on this site. */
.job-list__requirements,
.job-list__how-to-apply {
	margin-top: 15px;
	font-size: 13px;
	line-height: 24px;
	color: var(--c-text);
}

.job-list__requirements h3,
.job-list__how-to-apply h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0 0 5px;
}

/* ===== PDF catalog page (Part 1, catalog/rich-text session) =============
   New content, no legacy equivalent (D-02 does not apply - there is no
   baseline to be 1:1 with), built from the site's own existing tokens/
   spacing so it looks native rather than bolted on. */
.catalog-viewer {
	margin-top: 20px;
}

.catalog-viewer__frame-wrap {
	/* An explicit width, not 100%: #mainContent is a shrink-to-fit float (the legacy
	   column mechanic, docs/BUILD.md 13.1), and a percentage width contributes nothing
	   to its preferred width - the viewer collapsed to 375px beside the empty sidebar
	   instead of filling the column. This page has no legacy counterpart, so it takes
	   the full container width like a prose page does. */
	width: var(--container);
	max-width: 100%;
	height: 80vh;
	min-height: 500px;
	border: 1px solid var(--c-border);
	box-sizing: border-box;
}

.catalog-viewer__frame {
	width: 100%;
	height: 100%;
	border: 0;
}

.catalog-viewer__mobile-cta {
	display: none;
}

.catalog-viewer__download {
	margin-top: 15px;
}

.catalog-viewer__empty {
	max-width: var(--container);
	border: 1px solid var(--c-border);
	background: var(--c-white);
	padding: 30px 20px;
	text-align: center;
	font-size: 13px;
	line-height: 24px;
	color: var(--c-text);
	box-sizing: border-box;
}

/* Embedded PDF viewers are a common source of mobile-specific breakage
   (inconsistent inline rendering across mobile browsers) - below 767px
   (this project's existing mobile breakpoint, SPEC 3.1) the iframe is
   hidden and a prominent "open in a new tab" button takes its place,
   handing off to the platform's own, reliable PDF handling instead. */
@media only screen and (max-width: 767px) {
	.catalog-viewer__frame-wrap {
		display: none;
	}

	.catalog-viewer__mobile-cta {
		display: block;
	}
}

/* =============================================================================
   3.1 Media queries - the legacy inventory (S1-S3 skeleton, M1-M4
   MasterStyle, C1-C3 cookieconsent) at the very same pixel values, followed
   by the 7.1 fixes. Order matters: skeleton loaded after MasterStyle, and
   the fixes must win over both.
   ========================================================================== */

/* ----- S1 (SK:79) container 740, column margins 15 ----------------------- */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	:root { --container: 740px; }

	.container { width: 740px; }

	.column,
	.columns { margin-left: 15px; margin-right: 15px; }

	.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
	.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
	.alpha.omega { margin-left: 0; margin-right: 0; }

	.one.column,
	.one.columns      { width: 28px; }
	.two.columns      { width: 76px; }
	.three.columns    { width: 155px; }
	.four.columns     { width: 172px; }
	.five.columns     { width: 220px; }
	.six.columns      { width: 268px; }
	.seven.columns    { width: 316px; }
	.eight.columns    { width: 364px; }
	.nine.columns     { width: 412px; }
	.ten.columns      { width: 460px; }
	.eleven.columns   { width: 508px; }
	.twelve.columns   { width: 556px; }
	.thirteen.columns { width: 604px; }
	.fourteen.columns { width: 652px; }
	.fifteen.columns  { width: 700px; }
	.sixteen.columns  { width: 748px; }
}

/* ----- S2 (SK:132) container 300, every column 300, no margins ---------- */
@media only screen and (max-width: 767px) {
	:root { --container: 300px; }

	.container { width: 300px; }

	.columns,
	.column { margin: 0; }

	.one.column,
	.one.columns,
	.two.columns,
	.three.columns,
	.four.columns,
	.five.columns,
	.six.columns,
	.seven.columns,
	.eight.columns,
	.nine.columns,
	.ten.columns,
	.eleven.columns,
	.twelve.columns,
	.thirteen.columns,
	.fourteen.columns,
	.fifteen.columns,
	.sixteen.columns { width: 300px; }
}

/* ----- S3 (SK:182) container 420, every column 420 --------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	:root { --container: 420px; }

	.container { width: 420px; }

	.columns,
	.column { margin: 0; }

	.one.column,
	.one.columns,
	.two.columns,
	.three.columns,
	.four.columns,
	.five.columns,
	.six.columns,
	.seven.columns,
	.eight.columns,
	.nine.columns,
	.ten.columns,
	.eleven.columns,
	.twelve.columns,
	.thirteen.columns,
	.fourteen.columns,
	.fifteen.columns,
	.sixteen.columns { width: 420px; }
}

/* ----- M1 (MS:1323) <= 959: mobile menu on, desktop menu off ------------ */
@media only screen and (max-width: 959px) {
	/* The bar is prepended to the page in the legacy DOM (SlickNav
	   prependTo:"body"), i.e. above the header band, and the flags sit in
	   the 50px white strip above it. Source order here is header-then-bar,
	   so the bar is re-ordered instead of moved. */
	body {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.mobile-menu-bar {
		order: -1;
		display: block;
		width: 100%;
		margin-top: 50px;      /* the white strip that holds the flags */
		padding: 20px 0 30px;  /* 20 + 46 + 30 = 96px bar */
		background: var(--c-mobile-bar);
		font-size: 16px;
	}

	/* the header band and #header must not create a containing block or clip,
	   so the absolutely positioned flags and mobile logo reach the page top */
	.headerbg { position: static; }
	.headerbg .container { position: static; }
	#header { position: static; }

	#navigation ul { display: none; }

	/* 75x49 box at the top right of the white strip (SPEC 5.3) */
	.flagsMobile { display: block; position: absolute; top: 0; right: 4px; padding: 12px 10px; }
	.flagsMobile a { float: left; }
	.flagsMobile img { display: block; width: 25px; height: 25px; }
	.flagsMobile a + a img { margin-left: 5px; }
	.language { display: none; }
	#LinkHome { display: none; }

	.mobile-logo-link,
	.logoMobile {
		display: block;
		position: absolute;
		top: 67px;
		left: 11px;
	}

	.mobile-logo-link img,
	img.logoMobile {
		display: block;
		width: 100px;
		height: 51px;
	}

	#tinynav1,
	.tinynav,
	#category-select { display: block; width: 300px; }

	.ca-menu { display: none; }
}

/* ----- M2 (MS:1338) 768-959 -------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#mainContent,
	.wrapCont,
	.prod-zone { width: 100%; }

	.content-wrap { width: 60%; }
	.marginFooterMenu { margin-left: 30px; }
	.cont-head { margin-left: 0; }
	.certdiv img { margin-right: 12px !important; }

	/* FIX D-REN-03: the legacy added height:150px here, which made the items
	   overlap each other and the footer. Everything else is unchanged.
	   Dropping that height had one side effect worth correcting: with unequal
	   heights the floats stop filling row by row, and the list read 1, 2, 3 down
	   the RIGHT column before coming back to the left - legacy's own order at this
	   width is strictly left, right, left, right (its fixed height made the floats
	   look like a grid). A two-column grid restores that order and keeps the
	   natural heights; the item boxes stay 333px wide at x=14 and x=377. */
	.blog-list {
		display: grid;
		grid-template-columns: repeat(2, 45%);
		column-gap: 30px;
		/* D-14: `align-items: start` was here, and it is exactly what kept the two cards of a
		   row at their own heights in this band (grid's default is `stretch`). Removing it is
		   what makes them equal; the bottom-pinned .blog-foot then lines the buttons up too. */
	}

	.blog-wrap { width: auto; height: auto; }
	.blog-img { margin-right: 10px; } /* legacy's own gap in this band - see .blog-img above */
	.clip2, .clip2 img { width: 140px; }

	.distribution { width: 80% !important; height: auto !important; float: none !important; }

	.clip5 img { width: 200px; clip: rect(10px, 171px, 133px, 10px); }
	.clip5 { width: 160px; }

	#sideBar { width: 40%; }
	#tinynav1, .tinynav, #category-select { width: 300px; }

	/* Session 12: was `.prod-box`'s own margin-right (zeroed every 4th box, which no longer
	   lined up with anything once auto-fill starts placing 3 per row here instead of 4 - see
	   5.13 above). auto-fill recomputes the column count itself from the new 65px gutter;
	   measured unchanged at 768px: cards at x=14/259/504, i.e. the same 245px pitch as before. */
	.prod-grid { column-gap: 65px; }

	.art-tab { margin-left: 24px; margin-right: 15px; }

	.art-home .art-tab:nth-child(4),
	.art-home .art-tab:last-child { margin-left: 207px; margin-right: 15px; }

	/* carousel: slick switches to 1 slide without arrows below 959; the CSS
	   still forces 180px slides, so the strip shows from the left (SPEC 3.5) */
	.prod-carousel__arrow { display: none; }
	.prod-carousel__track { justify-content: flex-start; }
}

/* ----- M3 (MS:1363) 480-767 -------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#LinkHome { display: none; }

	/* SPEC 3.2: the header band disappears below 768. It is collapsed rather
	   than removed, because the mobile flags live inside it in this markup. */
	.headerbg { background: none; height: 0; }
	#header { padding-top: 0; height: 0; }
	#header .four.columns,
	.cont-head,
	#navigation { display: none; }
	.table-pad img,
	.table-pad .flourish,
	.tablenone { display: none; }

	.bgbanner { background: none; }
	.containerSlides { height: 300px; }

	/* ResponsiveSlides look: one 420x280 image, 0.5s cross-fade */
	/* ResponsiveSlides' own container is position:absolute with top:-10px and
	   width:100% (MasterStyle.css:695-700, .rslides_container) on top of the inline
	   40px top margin, so the banner starts 10px ABOVE #slides. Kept in flow, that
	   40px margin instead pushed the whole phone banner 40px down and ate 30px of the
	   white gap between it and the intro column. */
	.home-slider { height: 280px; margin-top: 40px; position: absolute; top: -10px; left: 0; width: 100%; }
	.home-slider__slide,
	.home-slider__slide.is-active,
	.home-slider__slide.is-prev,
	.home-slider__slide.is-next,
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:first-child,
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:nth-child(2),
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:last-child:not(:nth-child(-n+2)) {
		top: 0;
		left: 0;
		right: auto;
		margin-left: 0;
		width: 100%;
		border: 0;
		opacity: 0;
		z-index: 0;
	}

	.home-slider__slide.is-active,
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:first-child {
		opacity: 1;
		z-index: 3;
	}

	.home-slider__slide img,
	.home-slider__slide.is-prev img,
	.home-slider__slide.is-next img,
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:nth-child(2) img,
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:last-child:not(:nth-child(-n+2)) img {
		width: 100%;
		height: auto;
	}

	/* arrows of responsiveslides.css: 78x100 sprite, top 48%, opacity .7 */
	.home-slider__arrow {
		display: block;
		top: 48%;
		margin-top: -50px;
		width: 78px;
		height: 100px;
		opacity: .7;
		background-image: url(../img/arrows2.png);
	}

	.home-slider__arrow--prev { left: 0; background-position: 0 0; }
	.home-slider__arrow--next { right: 0; background-position: -78px 0; }
	.home-slider__arrow:active { opacity: 1; }

	.content-wrap,
	.wrapCont,
	.prod-box,
	.prod-zone,
	#galleria-wrap,
	.lb-image,
	.captchaWrap,
	#mainContent,
	#sideBar ul { width: 100%; }

	.wrapper { margin: 0; text-align: justify; }
	.poll-wrap { margin: 20px 60px; }

	.prod-carousel__arrow { display: none; }
	/* Legacy below 768 is slick in centerMode with slidesToShow:1 and centerPadding:40px:
	   ONE card sits centred in the 300px column with its neighbours peeking. Centring the
	   flex TRACK instead centred the whole 2170px strip, so the 300px window landed in the
	   middle of it and showed two half-cards and no whole one. Padding the scroll container
	   by half the leftover width (minus the slide's own 15px margin) puts the current card
	   in the middle at scrollLeft 0 and keeps it there for every subsequent card. */
	/* One card centred in the column with its neighbours peeking, like slick's
	   centerMode/centerPadding below 768. The exact inset depends on the slide's own
	   left margin, which differs per band, so carousel.js measures it and sets the
	   scroll container's padding - see its centreSingleSlide(). Centring the flex
	   TRACK instead (what this used to do) centred the whole 2170px strip, so the
	   300px window landed mid-strip and showed two half-cards and no whole one. */
	.prod-carousel__track {
		justify-content: flex-start;
	}
	.prod-carousel__slide { margin-right: 10px !important; margin-left: 27px !important; }

	.art-tab { width: 260px; min-height: 330px; height: auto; margin-right: 0; margin-left: 63px; }
	.art-home .art-tab:nth-child(4),
	.art-home .art-tab:last-child { margin-left: 63px; margin-right: 0; }
	.clip, .clip .img, .tableAdlist { width: 255px; }

	.marginFooterMenu { margin-left: 0; }
	.footerbg { background: url(../img/footermobile.jpg) repeat scroll center top transparent; height: 430px; }
	.MenuBottomL1 li { width: 100%; text-align: center; border: 0; padding: 0; }  /* legacy keeps float:left here (MasterStyle.css:1380/:1428); un-floating collapsed the shrink-to-fit ul to the widest label (106px) instead of the full 300px column */

	.certdiv { display: block; }
	.certdiv img { margin: 0 auto; display: block; padding: 0 !important; margin-bottom: 20px; margin-right: 100px !important; }

	.lb-frame, .distribution { width: 100% !important; height: auto !important; }

	#mainContent ul { margin-left: -10px; }

	.BoxW { width: 94% !important; }
	.inputBox2 { width: 100%; }  /* legacy measures 300px here, the full column */
	.btnW { width: 135px; }
	.btnCaptcha { margin: 20px auto; float: none; }
	.validation { top: -13px; left: 5px; }
	.captchaWrap .validation { left: 0; width: 186px !important; top: 60px; }

	#sideBar { width: 100%; margin-right: 0; margin-bottom: 20px; }
	.clip6 { display: block; margin: 0 auto; }
	.btnTop { margin-top: 20px; float: none; }
	.btns2, .socials { margin: 0 auto; }
	#galleria, .galleria-container { width: 99% !important; }

	.clip5 { margin: 10px auto; width: 240px; height: 150px; }
	.clip5 img { width: 250px; clip: rect(10px, 250px, 161px, 10px); }

	h1 { text-align: center; display: block; }

	/* D-14: one column here, so nothing has to line up with anything - but the card keeps the
	   same flex column and bottom-pinned button as the two-column bands, so the DETALII button
	   still sits on the card's bottom edge. `height:130px; overflow:hidden` on .blog-desc used
	   to live on this line: it was legacy's own rule and it cut the teaser mid-line with no
	   ellipsis, and swallowed it whole behind a 3-line title. A 4-line clamp on the teaser
	   alone replaces it - narrower column, so fewer lines than the 6 the desktop band uses. */
	.blog-list { display: block; }
	.blog-wrap { width: 100%; height: auto; }
	.blog-img { margin-right: 18px; } /* legacy's own gap in this band - see .blog-img above */
	/* Session 12, same shape as .blog-list above: one column, so the grid earns nothing here -
	   .prod-box's own `width:100%` (below) is what actually centres one full-width card per
	   row, exactly as FRONTEND-SPEC 5.13 describes for <768px. */
	.prod-grid { display: block; }
	.blog-desc > span { -webkit-line-clamp: 4; line-clamp: 4; }

	.btnW2 { float: none; margin-left: 0; }
	.btnM { margin: 0 auto; display: block; }
	.prodDesp { display: none; }
}

/* ----- M4 (MS:1410) <= 479 --------------------------------------------- */
@media only screen and (max-width: 479px) {
	#LinkHome { display: none; }

	.headerbg { background: none; height: 0; }
	#header { padding-top: 0; height: 0; }
	#header .four.columns,
	.cont-head,
	#navigation { display: none; }
	.table-pad img,
	.table-pad .flourish,
	.tablenone { display: none; }

	.bgbanner { background: none; }
	.containerSlides { height: 200px; }

	/* ResponsiveSlides look: one 300x200 image */
	/* ResponsiveSlides' own container is position:absolute with top:-10px and
	   width:100% (MasterStyle.css:695-700, .rslides_container) on top of the inline
	   40px top margin, so the banner starts 10px ABOVE #slides. Kept in flow, that
	   40px margin instead pushed the whole phone banner 40px down and ate 30px of the
	   white gap between it and the intro column. */
	.home-slider { height: 200px; margin-top: 40px; position: absolute; top: -10px; left: 0; width: 100%; }
	.home-slider__slide,
	.home-slider__slide.is-active,
	.home-slider__slide.is-prev,
	.home-slider__slide.is-next,
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:first-child,
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:nth-child(2),
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:last-child:not(:nth-child(-n+2)) {
		top: 0;
		left: 0;
		right: auto;
		margin-left: 0;
		width: 100%;
		border: 0;
		opacity: 0;
		z-index: 0;
	}

	.home-slider__slide.is-active,
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:first-child {
		opacity: 1;
		z-index: 3;
	}

	.home-slider__slide img,
	.home-slider__slide.is-prev img,
	.home-slider__slide.is-next img,
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:nth-child(2) img,
	.home-slider__track:not(:has(.is-active)) .home-slider__slide:last-child:not(:nth-child(-n+2)) img {
		width: 100%;
		height: auto;
	}

	.home-slider__arrow {
		display: block;
		top: 48%;
		margin-top: -50px;
		width: 78px;
		height: 100px;
		opacity: .7;
		background-image: url(../img/arrows2.png);
	}

	.home-slider__arrow--prev { left: 0; background-position: 0 0; }
	.home-slider__arrow--next { right: 0; background-position: -78px 0; }
	.home-slider__arrow:active { opacity: 1; }

	.content-wrap,
	.wrapCont,
	.prod-box,
	.prod-zone,
	#galleria-wrap,
	.lb-image,
	.captchaWrap,
	#mainContent,
	#sideBar ul { width: 100%; }

	.wrapper { margin: 0; text-align: justify; }
	.poll-wrap { margin: 20px auto; }

	.prod-carousel__arrow { display: none; }
	/* Legacy below 768 is slick in centerMode with slidesToShow:1 and centerPadding:40px:
	   ONE card sits centred in the 300px column with its neighbours peeking. Centring the
	   flex TRACK instead centred the whole 2170px strip, so the 300px window landed in the
	   middle of it and showed two half-cards and no whole one. Padding the scroll container
	   by half the leftover width (minus the slide's own 15px margin) puts the current card
	   in the middle at scrollLeft 0 and keeps it there for every subsequent card. */
	/* One card centred in the column with its neighbours peeking, like slick's
	   centerMode/centerPadding below 768. The exact inset depends on the slide's own
	   left margin, which differs per band, so carousel.js measures it and sets the
	   scroll container's padding - see its centreSingleSlide(). Centring the flex
	   TRACK instead (what this used to do) centred the whole 2170px strip, so the
	   300px window landed mid-strip and showed two half-cards and no whole one. */
	.prod-carousel__track {
		justify-content: flex-start;
	}
	.prod-carousel__slide { margin-right: 10px !important; margin-left: 27px !important; }

	.art-tab { width: 260px; min-height: 330px; height: auto; margin-right: 0; }
	.art-home .art-tab:nth-child(4),
	.art-home .art-tab:last-child { margin-left: 0; margin-right: 0; }
	.clip, .clip .img, .tableAdlist { width: 255px; }

	.marginFooterMenu { margin-left: 0; }
	.footerbg { background: url(../img/footermobile.jpg) repeat scroll center top transparent; height: 430px; }
	.MenuBottomL1 li { width: 100%; text-align: center; border: 0; padding: 0; }  /* legacy keeps float:left here (MasterStyle.css:1380/:1428); un-floating collapsed the shrink-to-fit ul to the widest label (106px) instead of the full 300px column */

	.certdiv { display: block; }
	.certdiv img { margin: 0 auto; display: block; padding: 0 !important; margin-bottom: 20px; }

	.lb-frame, .distribution { width: 100% !important; height: auto !important; }

	#mainContent ul { margin-left: -10px; }

	.BoxW { width: 94% !important; }
	.inputBox2 { width: 100%; }  /* legacy measures 300px here, the full column */
	.btnW { width: 135px; }
	.btnCaptcha { margin: 20px auto; float: none; }
	.validation { top: -13px; left: 5px; }
	.captchaWrap .validation { left: 0; width: 186px !important; top: 60px; }

	#sideBar { width: 100%; margin-right: 0; margin-bottom: 20px; }
	.clip6 { display: block; margin: 0 auto; }
	.btnTop { margin-top: 20px; float: none; }
	.btns2, .socials { margin: 0 auto; }
	#galleria, .galleria-container { width: 99% !important; }

	.clip5 { margin: 10px auto; width: 240px; height: 150px; }
	.clip5 img { width: 250px; clip: rect(10px, 250px, 161px, 10px); }

	h1 { text-align: center; display: block; }

	/* D-14: same as the 480-767 band - single column, teaser clamped to 4 lines instead of the
	   old `height:130px; overflow:hidden` mid-line cut. */
	.blog-list { display: block; }
	.blog-wrap { width: 100%; height: auto; }
	.blog-desc > span { -webkit-line-clamp: 4; line-clamp: 4; }
	.prod-grid { display: block; } /* session 12 - see the 480-767 band above */

	.btnW2 { float: none; margin-left: 0; }
	.btnM { margin: 0 auto; display: block; }
	.prodDesp { display: none; }
}

/* ----- C1-C3 cookie banner (CC:4) -------------------------------------- */
@media screen and (max-width: 900px) {
	.cookie-banner__accept { white-space: normal; }
}

@media screen and (max-width: 414px) and (orientation: portrait),
       screen and (max-width: 736px) and (orientation: landscape) {
	.cookie-banner {
		left: 0;
		right: 0;
		bottom: 0;
		max-width: none;
	}
}

@media print {
	.cookie-banner { display: none; }
}

/* =============================================================================
   7.1 fixes that need their own band
   ========================================================================== */

/* FIX D-REN-04: between 960 and 1049 the legacy kept the 1050px container, so
   every page was 90px wider than the viewport. The container (and the two
   fixed-width inner columns that depend on it) follow the viewport in that
   band; every other value is unchanged, and nothing changes at >= 1050. */
@media only screen and (min-width: 960px) and (max-width: 1049px) {
	:root { --container: 100%; }

	.container { width: 100%; }

	/* The header row is 200 (logo) + 30 + 720 (contact zone) + 55 (flags) = 1005px of
	   content, and legacy fits it on one line by letting the flags hang past the viewport
	   on its fixed 1050px container. With the container following the viewport the flags
	   were 1px short of fitting and wrapped onto a line of their own, which pushed the
	   whole navigation down 79px - a visible header change at one width, for one pixel.
	   Taking the flags out of the float row keeps legacy's single-row header; they sit at
	   the same 54px from the top that `.language`'s own margin gives them everywhere else. */
	#header { position: relative; }

	/* Three 327px article cards with legacy's 34px gutter need 1049px, which fits inside its
	   fixed 1050px container and not inside a 1024px viewport - so the third card wrapped onto
	   a row of its own and made the home page 553px longer than the original. 21px of gutter
	   puts the same three cards on one row at 1024 (0, 348, 696 - the last ending at 1023).
	   Only the gutter changes; the cards keep their 287+2x20 width. */
	.art-tab { margin-right: 21px; }

	.language {
		position: absolute;
		right: 0;
		top: 84px; /* 30px of #header padding + the 54px margin .language carries elsewhere */
		margin-top: 0;
		float: none;
	}

	/* 800px, like legacy and like the base rule - not `auto`. #mainContent is a shrink-to-fit
	   float, so an `auto` .wrapCont collapsed onto its own content: the two categories with
	   only two or three products (/sosuri, /diverse) drew a 412px and a 618px content column
	   against legacy's 800, which moved their heading and their cards left. `max-width:100%`
	   keeps the guarantee the `auto` was there for, that nothing exceeds the viewport. */
	.wrapCont,
	.prod-zone { width: 800px; max-width: 100%; }

	/* With a sidebar the row is 220 + 30 + 800 = 1050px, so at 1024 the content column
	   dropped BELOW the sidebar - every product, category and article page rendered its
	   body a full sidebar height lower than the original. The 26px comes out of the gutter
	   rather than out of the content column, because the column's own 800px is what puts
	   four product cards on a row the way legacy does; taking it out of the column instead
	   left room for three and made a category page 338px longer.
	   (The rules that used to live here targeted `.wrapCont`/`.prod-zone` as SIBLINGS of
	   #sideBar, which they stopped being when the page shell was corrected to put them
	   inside #mainContent - they had quietly become dead selectors.) */
	#sideBar:not(:empty) { margin-right: 4px; }

	/* FIX D-REN-48 (session 10): the rule above is 26px of arithmetic that comes out exactly
	   at 1024 - and 1024 is a Phase 0 viewport, which is the only width anybody had measured.
	   220 + 4 + 800 = 1024, so at 1023 and below the row still did not fit and the content
	   column dropped BELOW the sidebar again, for the 64 widths from 960 to 1023, on every
	   category page, every product page and the products root, in both languages. Measured on
	   /produse-arovit/tomate at 960 (tools/browser/_probe_band_boxes_s10.js): #mainContent
	   0,734 800x834 here against legacy's 250,236 800x836, and the document 1,584px tall
	   against legacy's 1,366.

	   This is R48 arriving a second time: session 8 swept the band for OVERFLOW and found
	   D-REN-39/43/44, session 9 swept it again for overflow and found D-REN-45/46/47 - and a
	   column that moves to a different row changes no document width at all, so neither sweep
	   could see it. What found it was sweeping the band for BOX POSITIONS.

	   The fix lets the column shrink instead of wrapping, which is what the viewport is
	   actually asking for. `min()` keeps >= 1024 at exactly the 800px it has today, so nothing
	   moves at any width anyone has ever measured; below it the column takes what is left and
	   the product grid drops from four cards a row to three - the same thing it does below
	   960. Re-measured at 960: 1,364px tall against legacy's 1,366, i.e. the 218px this
	   removes is the whole of the difference. Three templates render a non-empty #sideBar
	   (taxonomy-arovit_category.php, single-arovit_product.php, page-products.php) and the
	   adjacent-sibling selector matches those three and nothing else - checked against the
	   rendered DOM of every page type, not inferred (CLAUDE.md R41). */
	#sideBar:not(:empty) + #mainContent { width: min(800px, calc(100% - 224px)); }

	/* FIX D-REN-49 (session 10): the same defect on /distributie, where the sidebar is EMPTY
	   and therefore keeps its own 30px margin - 220 + 30 + 760 = 1010, so the content column
	   wrapped below it from 960 to 1009. Legacy keeps it beside at every one of those widths
	   (250,236 760x1003). `min()` again, so >= 1010 is untouched. */
	body.arovit-template-distribution #mainContent { width: min(760px, calc(100% - 250px)); }

	/* FIX D-REN-51 (session 10): the PDF catalog viewer collapsed to a 377px box for the whole
	   of this band - on a page whose only content is that viewer.

	   `.catalog-viewer__frame-wrap` carries `width: var(--container)`, and its own comment says
	   why: "An explicit width, not 100%: #mainContent is a shrink-to-fit float ... and a
	   percentage width contributes nothing to its preferred width - the viewer collapsed to
	   375px beside the empty sidebar". Correct, and `--container` is redefined to `100%` at the
	   top of this very band (main.css 5.1), so inside it the rule IS the percentage it was
	   written to avoid. Measured at 960, 980, 1000, 1024 and 1049: frame-wrap 250,336 377x640
	   in Romanian and 302x640 in English, against 1050 wide at every width above the band.

	   This is D-REN-41 for the third time - the careers empty-state card hit it in session 7,
	   which is where CLAUDE.md R44's own note about this band comes from - and the answer is
	   the same one that worked there: scope the COLUMN, not the box, so the percentage has a
	   definite basis. After: the viewer is the full viewport width at every width in the band,
	   with no overflow, and >= 1050 is untouched. */
	body.arovit-template-catalog #mainContent { width: 100%; }

	/* Same arithmetic as the article cards: a gallery row is five 190px cells on a 210px
	   pitch, which needs 1041px - inside legacy's 1050px container and outside a 1024px
	   viewport, so the fifth photo dropped to a row of its own and made a 53-photo gallery
	   435px longer than the original. 7px of gutter instead of 10 puts the same five cells
	   on one row (10, 214, 418, 622, 826 - the last ending at 1017). */
	.gallery .three.columns { margin-left: 7px; margin-right: 7px; }

	/* An English-only `padding-right: 11px` override used to live here. It existed purely to
	   absorb the 60px that KD-04's Romanian fallback added to the English menu by labelling
	   the ninth item "Cariere" - without it the row wrapped at 1024px and pushed every page
	   42px down. D-13 removed that fallback, so the item is now the empty one legacy itself
	   renders, the English menu is narrower than the Romanian one again, and the rule had
	   become a selector with nothing left to correct (CLAUDE.md R41 - a CSS rule that no
	   longer has a reason is as invisible as one that no longer matches). Re-measured across
	   the whole band after removing it (tools/browser/_probe_nav960.js, both languages, both
	   sites): at 1024 and 1049 the English menu is one row, .MenuTop is 50px tall and
	   #navigation sits at y=152 - the same numbers as the Romanian menu and as legacy's, in
	   both languages - and the widest English item is 980px against the Romanian 1007px, i.e.
	   the English menu is now the NARROWER of the two, which is exactly why the override no
	   longer has anything to absorb. The separate problem it exposed - that below 1007px the
	   Romanian menu wraps to two rows where legacy keeps one and overflows the viewport
	   instead - is D-REN-39, and it is resolved by the band below rather than by a padding
	   value. */

	/* FIX D-REN-47 (session 9): an article's text column dropped BELOW its photo column.
	   `.seven.columns` (380, the gallery) + `.eleven.columns` (630, the text) plus the grid's
	   four 10px gutters is exactly 1050 - the container this band no longer has - so the text
	   wrapped onto its own row and every article detail page ran 348px longer than legacy's,
	   with its H1 at x=10,y=644 instead of legacy's x=410,y=296. Measured on both instances at
	   1024 (tools/browser/measure_boxes.js): document 1463px on legacy against 1811 here.

	   Hidden since session 7 by the classifier rule above this one, which tested only the WIDTH
	   delta and therefore explained a box of the right width sitting 400px away. That rule is
	   now bounded by position too (CLAUDE.md R55), which is what surfaced this.

	   The 26px comes out of the TEXT COLUMN, not out of a gutter, because that is the choice
	   that leaves every other box exactly where legacy puts it: 10 + 380 + 10 + 10 + 604 + 10 =
	   1024, so the gallery still starts at x=10, the gutter is still 20px, and the text column
	   still starts at x=410 - legacy's own number. The only difference from legacy is 26px of
	   text width, which is the same 26px legacy spends on a horizontal scrollbar instead.
	   `.eleven.columns` is used by exactly one template, single-arovit_article.php. */
	.eleven.columns { width: 604px; }

	/* FIX D-REN-45 (session 9): the contact form was the one page type where D-REN-04's
	   container fix did not reach the content.

	   `.sixteen.columns` is 1030px plus its two 10px gutters = exactly 1050, the width of the
	   container this band no longer has. `#mainContent` is a shrink-to-fit float, so that
	   1050 became its PREFERRED MINIMUM width and the float was sized to 1050 inside a 1024px
	   viewport - measured: document 1050px at every width from 960 to 1048, in both
	   languages, i.e. a horizontal scrollbar on /contact and /en/contact across the whole
	   band. Nothing else on the site uses `.sixteen.columns` (only
	   template-parts/page-contact.php's closing full-width row), so the fix is scoped to what
	   it actually affects. A percentage contributes nothing to a shrink-to-fit parent's
	   intrinsic width, which is precisely why it is the right unit here: the column still
	   fills the form, and the form stops dictating the column's width.

	   Invisible at >= 1050, where the rule does not apply and the column is 1030px as before. */
	.sixteen.columns { width: calc(100% - 20px); }
}

/* FIX D-REN-50 (session 10): the last horizontal scrollbar on the site, and it is legacy's own
   content rather than this build's markup.

   The ENGLISH body of /distributie carries `<table border="0" cellpadding="1" cellspacing="1"
   style="width: 1000px">` typed into the legacy CMS - one row, one cell, `&nbsp;`, i.e. an
   empty 1000px spacer left behind by an editor. The Romanian body has no table at all. A
   table with a specified width takes that width as its MINIMUM content width, so it became
   `#mainContent`'s preferred minimum, the shrink-to-fit float was sized to 1000 inside a
   960px viewport, and the document overflowed at every width from 960 to 998
   (evidence/session10-distributie-before.txt). `docs/FIDELITY.md` 11.2b recorded it and left
   it as a content edit for marketing; this session's brief asks for the technical fix, which
   is better anyway: a stored edit would be undone by the next `wp arovit migrate pages`
   (R40/R49), and the rule below covers any future table of the same shape rather than this
   one instance.

   Two declarations, and BOTH are needed - which was measured rather than reasoned, because
   the obvious one alone does nothing (tools/browser/_probe_distributie_table_s10.js):

   - `max-width: 100%` on its own leaves the overflow exactly where it was, at all 39 widths.
     A percentage max-width contributes NOTHING to an ancestor's intrinsic width, so the
     shrink-to-fit `#mainContent` still takes the table's 1000px and the table then fills it.
     This is R44's mechanic, and it is why `.sixteen.columns` above is a percentage.
   - so the COLUMN is given a definite width first. `:has()` keys the rule on the cause - a
     migrated body containing a fixed-width table - rather than on the page or the language
     (CLAUDE.md R55): the Romanian twin has no such table and is untouched, and if marketing
     ever deletes the table the rule stops applying on its own.

   Scoped to <= 1049 deliberately. At >= 1050 the container is a fixed 1050px, the 1000px
   table fits inside it, and BOTH sites render `#mainContent` 1000px wide below the sidebar -
   parity that has held since session 6 and that a wider scope would have broken to fix a
   band artefact. Re-swept 320 to 1090 one pixel at a time afterwards: zero overflow on either
   language, and `/en/distributie` sits below the sidebar at every width, exactly as legacy
   does. */
@media only screen and (max-width: 1049px) {
	.cms-body table { max-width: 100%; }
	#mainContent:has(.cms-body table[style*="width"]) { width: 100%; }
}

/* FIX D-REN-46 (session 9): the home page's poll box hung 11px past the container.

   `.poll-wrap` is a right-floated 281px box with `margin-right: -11px`, and that -11px is
   real: legacy's own poll sits at x=938 in a container that starts at 158 and ends at 1208,
   i.e. legacy hangs its poll 11px past its own container too (FRONTEND-SPEC 5.8). At >= 1072
   that overhang lands inside the viewport and nobody can tell. Below it, it is the ONLY thing
   pushing the document past the viewport - measured one width at a time
   (tools/browser/_probe_band_s9.js): the home page's document was 11px wider than the
   viewport at every width from 960 to 1071, in both languages, on `/`, `/acasa`, `/en` and
   `/en/acasa`.

   The upper bound is arithmetic rather than a round number: the container is a centred 1050px
   above 1049, so the free margin is (viewport - 1050) / 2 and it only reaches 11px at a 1072px
   viewport. Hence 1071 - the last width at which the overhang still escapes.

   This is D-REN-02/D-REN-04's own decision applied to the one box that had escaped it: legacy
   overflows horizontally across this whole band and this build does not. The cost is that the
   poll sits 11px further left than legacy's between 960 and 1071px, at widths where legacy is
   handing the visitor a horizontal scrollbar anyway. */
@media only screen and (min-width: 960px) and (max-width: 1071px) {
	.poll-wrap { margin-right: 0; }
}

/* FIX D-REN-39 (owner decision D-16): 960-1006px, the only band where the nine-item row
   does not fit and the mobile bar has not yet taken over.

   Measured, not assumed (tools/browser/_probe_nav_breakpoint.js sweeps 940-1060 one pixel at
   a time on both sites): the nine items are 1007px wide in Romanian and 980px in English, the
   Romanian row is on one line at >= 1007 and on two at <= 1006, the English row at >= 981 and
   <= 980. ONE breakpoint is used for both languages, the wider of the two (1007px), so the
   header has the same structure in Romanian and in English at every width - a menu that
   collapsed at a different width per language would be a worse answer than the 26px of
   English headroom it would buy.

   Only the menu row collapses. The header band above it is 200 (logo) + 30 + 720 (contact
   zone) + 55 (flags) = 1005px of content and still fits here, so logo, phone/e-mail and flags
   stay exactly where the rest of this band already puts them; swapping the whole header for
   the <= 959px mobile bar would have changed far more than the one thing that was broken. */
@media only screen and (min-width: 960px) and (max-width: 1006px) {
	/* The panel below is positioned against #navigation, which section 5.1 already declares
	   `position: relative` unconditionally - so there is deliberately no rule for it here
	   (R41: a rule that repeats one it cannot change is dead weight). #navigation is a
	   shrink-to-fit float, so it wraps the button and the panel hangs past its right edge;
	   nothing clips it, because only #header has overflow:hidden and #navigation sits
	   outside it - that nesting is legacy's own (BUILD 13.1). */
	.nav-compact-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 40px;
		margin: 5px 0;
		padding: 0 14px;
		border: 0;
		border-radius: 4px;
		background: var(--c-mobile-bar);
		cursor: pointer;
		font-family: 'Roboto Slab', serif;
		font-size: 13.6px;
		font-weight: bold;
		text-transform: uppercase;
		color: var(--c-brown);
		line-height: 40px;
	}

	.nav-compact-toggle__bars {
		display: block;
		width: 24px;
	}

	.nav-compact-toggle__bars span {
		display: block;
		width: 24px;
		height: 4px;
		border-radius: 6px;
		background-color: var(--c-hamburger);
	}

	.nav-compact-toggle__bars span + span {
		margin-top: 3px;
	}

	/* The panel. Collapsed by default; menu.js adds .is-open to #navigation. Using a class
	   rather than the [hidden] attribute the mobile list uses is deliberate: [hidden] is
	   viewport-independent, so it would also hide the horizontal row at >= 1007px, where
	   there is no button to bring it back. */
	#navigation .MenuTop ul.level1 {
		display: none;
		position: absolute;
		top: 50px;
		left: 0;
		z-index: 30;
		float: none;
		width: 300px;
		background: var(--c-white);
		border: 1px solid var(--c-border);
	}

	#navigation.is-open .MenuTop ul.level1 {
		display: block;
	}

	/* The panel hangs 370px below a .headerbg that is itself a stacking context at
	   z-index:10, so the cookie banner (position:fixed, z-index:9999) painted OVER it: at
	   1000x800 the ninth item was unreachable and at 1000x640 five of the nine were
	   (tools/browser/_probe_navcookie.js, elementFromPoint on each item's own centre). The
	   <= 959px mobile list never had this problem - it is in normal flow above the page, and
	   the banner sits below it - so this is specific to a panel that overlays.

	   The lift is scoped to the open state via a body class rather than applied to the band
	   unconditionally, because the lightbox overlay is also z-index:9999 and covers the whole
	   viewport including the header: a permanently-raised header band would paint on top of
	   an open lightbox. The two can never be open at once (clicking a gallery photo is a
	   click outside the panel, which menu.js closes it on), and that is asserted in
	   tools/browser/verify_interactive.js. */
	body.nav-menu-open .headerbg {
		z-index: 10000;
	}

	#navigation .MenuTop ul.level1 li {
		float: none;
		display: block;
	}

	#navigation .MenuTop ul.level1 li + li a.level1.MenuTopL1 {
		border-top: 1px solid var(--c-border);
	}

	/* Same type, same colour, same cross bullet as the horizontal row - only the box changes
	   from a 50px-tall float to a full-width 40px line. height:auto with an explicit
	   line-height, because the row rule's fixed 40px height plus 5px padding is what makes
	   the horizontal item 50px tall and that is too loose for nine stacked rows. */
	#navigation .MenuTop ul.level1 li a.level1.MenuTopL1 {
		display: block;
		width: auto;
		height: auto;
		line-height: 24px;
		padding: 8px 14px 8px 20px;
		text-align: left;
	}

	/* D-13 leaves the ninth English item with no label at all, which in a vertical panel
	   would be an 8px-tall clickable sliver rather than the empty cell it is in a row. It
	   keeps its accessible name from arovit_link_aria(), so it stays a real, reachable link
	   with the same height as the others instead of collapsing. */
	#navigation .MenuTop ul.level1 li a.level1.MenuTopL1:empty::after {
		content: "";
		/* block, not inline-block: an inline-block sits on the baseline and gains the
		   line box's descender space under it, which measured the empty English item 48px
		   tall against the 41px of the other eight. Same cause and same fix as R43. */
		display: block;
		height: 24px;
	}
}

/* FIX D-REN-43: found while testing the edges of the band above
   (tools/browser/_probe_headerwrap.js, 960-1060 one pixel at a time on both sites).
   Between 960 and 969px the HEADER row itself stops fitting and the contact zone wraps
   under the logo, which makes #header 254px tall instead of 152 and pushes #navigation -
   and with it every page's whole body - 102px down. Legacy never does this: its container
   is a fixed 1050px and it simply overflows the viewport. A separate defect from the menu
   wrap, in the same band, invisible to every previous pass for the same reason (no Phase 0
   viewport lands between 960 and 1006).

   The arithmetic, measured rather than guessed: the float row is .four.columns
   200 + 10 + 10 (skeleton's own gutters) + .cont-head's 30px margin + its 720px table
   = exactly 970px. Ten of those pixels come out of the contact zone's left margin, and
   only below 970 - at 970-1006 it keeps legacy's own x=250. Nothing else moves: the 720px
   table, the 200px logo box and the absolutely-positioned flags are untouched. */
@media only screen and (min-width: 960px) and (max-width: 969px) {
	.cont-head {
		margin-left: 20px;
	}
}

/* FIX D-REN-02: the product-carousel arrows keep their -130px position, but
   only from the width where it stays inside the viewport (1050 container +
   2 x 130). Below that they sit on the container edge instead of adding a
   horizontal scroll bar (the legacy kept one up to 1309px). The home slider
   has no arrows at this width at all (.home-slider__arrow is display:none
   at >= 768, SPEC 5.6), so it has no positioning rule here any more. */
@media only screen and (min-width: 1310px) {
	.prod-carousel__arrow--prev { left: -130px; }

	.prod-carousel__arrow--next { right: -130px; }
}