/* ================================================================
   style.css — combined stylesheet for eo.eoo.ro
   Merged from styleHome.css (navy palette) + styleNew.css (legacy).
   Shared rules resolved to the styleHome version.

   Breakpoints (desktop-first except where noted):
     (min-width: 1100px)  wide desktop — product grid min card width
     (min-width:  900px)  desktop      — 2-col hero, bigger graph labels
     (max-width: 1024px)  tablet       — cards shrink to 310px
     (max-width:  768px)  tablet/phone — compact nav, search, spec table
     (max-width:  600px)  phone        — full-bleed cards, 1-col hero
     (max-width:  450px)  small phone  — borderless cards, 1-col cat grid
   ================================================================ */

:root{
	--navy:       #2E4271;
	--navy-2:     #1C2A4A;
	--navy-3:     #0F1A33;
	--navy-soft:  #5A6B99;
	--navy-tint:  #E3E8F3;
	--accent:     #2E4271;
	--accent-2:   #1C2A4A;
	--accent-hi:  #7F91B8;
	--cream:      #F5F7FB;
	--cream-2:    #E9EDF5;
	--ink:        #1A1F2E;
	--muted:      #6B7593;
	--line:       #D9DEEA;
	--pop:        #882255;
	--pop-2:      #5a1638;
	/* legacy aliases so older rules pick up the new palette */
	--magenta:    var(--navy-2);
	--magenta-2:  var(--accent-2);
	--rose:       var(--accent-hi);
}

*{box-sizing:border-box;padding:0;margin:0}

html,body{
	background:var(--cream);
	color:var(--ink);
	font-family:'Pragati Narrow','Helvetica Neue',Arial,sans-serif;
	font-size:16px;
	line-height:1.45;
	-webkit-font-smoothing:antialiased;
	overflow-x:clip;
}

a{color:var(--navy);text-decoration:none}
a:hover{color:var(--magenta)}
img{max-width:100%;display:block}

/* ---------- base typography (legacy) ---------- */
h2{margin:.2em;line-height:1.6rem}
hr{border-top:1px solid var(--navy);border-bottom:0}
ul{list-style-type:none;padding:0;margin:0}
li{list-style-position:inside;text-align:left}
li::marker{font-size:1.8em;background-color:#e1e1e1}

/* legacy .content-scoped h1 — avoids clobbering .hero h1 on the home page */
.content h1,#content h1{
	color:var(--navy);
	margin-bottom:1rem;
	background-color:#e1e4eb;
	display:inline-block;
	padding:1rem;
	border-radius:4px;
	line-height:2.5rem;
}

/* ---------- layout ---------- */
.wrap{max-width:1600px;margin:0 auto;padding:0 1.25rem}
.content{margin:auto;width:90%}
#content{width:90%;margin:auto}

/* ---------- header / nav ---------- */
.topbar{
	background:#fff;
	border-bottom:1px solid var(--line);
	position:sticky;top:0;z-index:50;
}
.topbar > .wrap{
	display:flex;align-items:center;gap:1.5rem;
	padding-top:.75rem;padding-bottom:.75rem;
}
.logo{
	display:inline-flex;align-items:center;justify-content:center;
	flex-shrink:0;
	height:56px;width:56px;
	background:#fff;
	border-radius:14px;
	box-shadow:0 4px 14px rgba(46,66,113,.18),0 1px 0 rgba(46,66,113,.04);
}
.logo img{height:38px;width:auto;display:block}

.search{
	flex:1 1 0;min-width:0;max-width:560px;
	display:flex;align-items:center;gap:.6rem;
	background:var(--cream-2);
	border:1px solid transparent;
	border-radius:999px;
	padding:.55rem 1.1rem;
	color:var(--muted);
}
.search input{min-width:0;width:100%}
.search-icon{flex-shrink:0;color:var(--muted)}
.search:focus-within{border-color:transparent;background:var(--cream-2);outline:none}
.search input:focus,#q:focus{outline:none;box-shadow:none}
.search input{
	flex:1;background:transparent;border:0;outline:0;
	font:inherit;color:var(--ink);
}
.search input::placeholder{color:var(--muted)}

/* ---------- hamburger ---------- */
.burger{
	flex-shrink:0;
	height:48px;width:48px;
	display:inline-flex;flex-direction:column;
	align-items:center;justify-content:center;gap:5px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:12px;
	cursor:pointer;
	transition:border-color .15s,background .15s;
}
.burger span{
	display:block;width:22px;height:2px;
	background:var(--navy);border-radius:2px;
	transition:transform .2s ease,opacity .15s ease;
	transform-origin:center;
}
.burger:hover{border-color:var(--magenta)}
.burger:hover span{background:var(--magenta)}
.burger.open{background:var(--navy);border-color:var(--navy)}
.burger.open span{background:#fff}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- category menu panel ----------
   position:fixed (not flowed inside .topbar) so it always opens
   at the top of the viewport regardless of scroll position. JS
   sets top/max-height to the actual topbar bottom on open;
   the CSS values below are a sensible fallback per breakpoint. */
.cat-menu{
	position:fixed;
	top:80px;left:0;right:0;
	z-index:45;
	background:var(--cream);
	border-top:1px solid var(--line);
	border-bottom:3px solid var(--magenta);
	box-shadow:0 12px 28px rgba(46,66,113,.12);
	padding:1.75rem 0 2.5rem;
	animation:catSlide .18s ease-out;
	max-height:calc(100vh - 80px);
	overflow-y:auto;
}
@media (max-width:768px){
	.cat-menu{top:72px;max-height:calc(100vh - 72px)}
}
@media (max-width:450px){
	.cat-menu{top:68px;max-height:calc(100vh - 68px)}
}
@keyframes catSlide{
	from{opacity:0;transform:translateY(-8px)}
	to  {opacity:1;transform:translateY(0)}
}

.cat-menu-head{
	display:flex;align-items:baseline;gap:1rem;
	margin-bottom:1.25rem;
}
.cat-menu-head h2,
.cat-menu-head .cat-menu-title{
	font-size:1.35rem;font-weight:700;color:var(--navy-2);
	letter-spacing:-.01em;
}
.cat-menu-head span{color:var(--muted);font-size:.9rem}

/* In-panel filter for the 155 categories. Sticks to the top of the
   scrolling .cat-menu so the user can keep typing while the grid below
   filters in place. js.js wires the input + clear button + 'cat-menu:reset'
   event the burger toggle dispatches on close. */
.cat-menu-search{
	display:flex;align-items:center;gap:.6rem;
	background:#fff;border:1px solid var(--line);
	border-radius:999px;
	padding:.55rem 1.1rem;
	margin:0 0 1.25rem;
	color:var(--muted);
	position:sticky;top:0;z-index:2;
	box-shadow:0 4px 12px rgba(46,66,113,.06);
}
.cat-menu-search:focus-within{
	border-color:var(--magenta);
	box-shadow:0 4px 14px rgba(230,57,127,.18);
}
.cat-menu-search .search-icon{flex-shrink:0;color:var(--muted)}
.cat-menu-search:focus-within .search-icon{color:var(--magenta)}
.cat-menu-search input{
	flex:1;min-width:0;
	background:transparent;border:0;outline:0;
	color:var(--ink);font:inherit;font-size:1rem;
	min-height:2.2rem;
}
.cat-menu-search input::placeholder{color:var(--muted)}
.cat-menu-search-clear{
	flex-shrink:0;
	background:transparent;border:0;cursor:pointer;
	width:28px;height:28px;border-radius:999px;
	color:var(--muted);font-size:1.4rem;line-height:1;
	display:inline-flex;align-items:center;justify-content:center;
	padding:0;
}
.cat-menu-search-clear:hover{background:var(--cream-2);color:var(--navy-2)}

@media screen and (max-width:600px){
	.cat-menu-search{padding:.5rem .9rem}
	.cat-menu-search input{font-size:1rem;min-height:2.4rem}
}

.cat-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:1rem;
}

.cat-card{
	background:#fff;
	border:1px solid var(--line);
	border-radius:12px;
	padding:.9rem 1rem 1rem;
	transition:border-color .15s,box-shadow .15s,transform .15s;
	min-width:0;
}
.cat-card:hover{
	border-color:var(--magenta);
	box-shadow:0 6px 18px rgba(46,66,113,.10);
	transform:translateY(-1px);
}

.cat-card-head{
	display:flex;align-items:center;gap:.6rem;
	padding-bottom:.6rem;margin-bottom:.5rem;
	border-bottom:1px solid var(--cream-2);
}
.cat-card-ico{
	display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;border-radius:9px;flex-shrink:0;
	background:linear-gradient(135deg,var(--magenta) 0%,var(--magenta-2) 100%);
	color:#fff;
	box-shadow:0 2px 6px rgba(46,66,113,.28);
}
.cat-card-ico .gi{display:block}
.cat-card-head h3,
.cat-card-head .cat-card-title{
	font-size:.9rem;font-weight:700;color:var(--navy-2);
	text-transform:uppercase;letter-spacing:.04em;
	line-height:1.15;min-width:0;
}

.cat-list{list-style:none;padding:0;margin:0}
.cat-list li{margin:0;padding:0}
.cat-list a{
	display:flex;align-items:center;gap:.55rem;
	padding:.38rem .5rem;
	color:var(--navy);
	font-size:.92rem;
	border-radius:6px;
	line-height:1.2;
	text-decoration:none;
	min-width:0;
}
.cat-list a > span{
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
	min-width:0;flex:1;
}
.cat-list .ci{
	flex-shrink:0;
	color:var(--navy-soft);
	transition:color .15s,transform .15s;
}
.cat-list a:hover{
	background:var(--cream-2);
	color:var(--magenta);
}
.cat-list a:hover .ci{
	color:var(--magenta);
	transform:scale(1.08);
}

.cat-backdrop{
	position:fixed;inset:0;
	background:rgba(28,42,74,.25);
	z-index:40;
	-webkit-backdrop-filter:blur(2px);
	backdrop-filter:blur(2px);
}
body.menu-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{
	padding:2rem 0 1.5rem;
	background:
		radial-gradient(1200px 400px at 90% -10%, rgba(46,66,113,.12), transparent 60%),
		radial-gradient(900px 500px at 10% 10%, rgba(46,66,113,.06), transparent 60%);
}
.hero .wrap{
	display:grid;
	grid-template-columns:1fr;
	gap:1rem;
}
.hero h1{
	font-size:clamp(2rem,4vw,3.2rem);
	font-weight:700;color:var(--navy-2);
	letter-spacing:-.02em;line-height:1.05;
	max-width:720px;
	background:transparent;padding:0;
}
.hero h1 em{
	color:var(--navy-2);font-style:normal;
	background:linear-gradient(transparent 65%,var(--pop) 65%,var(--pop) 92%,transparent 92%);
	padding:0 .15em;
}
.hero p.lede{
	margin-top:0;font-size:1.15rem;color:var(--muted);
	max-width:640px;
}
.hero-stats{
	display:flex;gap:2.5rem;flex-wrap:wrap;
	margin-top:1rem;padding-top:1.25rem;
	border-top:1px dashed var(--line);
}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats strong{
	font-size:2.8rem;color:var(--navy);font-weight:700;
	line-height:1;
	font-variant-numeric:tabular-nums;
}
.hero-stats > div:first-child strong{color:var(--pop)}
.hero-stats span{color:var(--muted);font-size:1.05rem;margin-top:.35rem}

@media screen and (min-width:900px){
	.hero{padding:0.5rem 0 2rem}
	.hero .wrap{
		grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
		gap:1.5rem 3rem;
		align-items:center;
	}
	.hero h1{grid-column:1;grid-row:1;max-width:none}
	.hero p.lede{grid-column:1;grid-row:2;max-width:none}
	.hero-stats{
		grid-column:2;grid-row:1/3;
		margin-top:0;padding-top:0;border-top:0;
		flex-direction:column;align-items:flex-start;
		gap:0.25rem;
		border-left:1px dashed var(--line);
		padding-left:2.5rem;
	}
	.hero-stats strong{font-size:3.2rem}
	.val,.date{font-size:1.2rem}
}

/* ---------- section titles ---------- */
.section{padding:0.75rem 0}
.section + .section{border-top:1px solid var(--line)}
.section-head{
	display:flex;align-items:baseline;gap:1rem;
	/*margin-bottom:1.75rem;*/
}
.section-head h2{
	font-size:1.75rem;font-weight:700;color:var(--navy-2);
	letter-spacing:-.01em;
}
.section-head .tag{
	background:var(--magenta);color:#fff;
	padding:.15rem .6rem;border-radius:4px;
	font-size:.8rem;font-weight:700;
	text-transform:uppercase;letter-spacing:.05em;
}
.section-head .muted{color:var(--muted);font-size:.95rem;margin-left:auto}

/* ---------- discount bucket banner ---------- */
.bucket{
	background:linear-gradient(90deg,var(--navy) 0%,var(--navy-2) 100%);
	color:#fff;
	padding:1rem 1.4rem;
	border-radius:8px;
	margin:2rem 0 1.25rem;
	display:flex;align-items:center;gap:1rem;
	font-size:1.15rem;
}
.bucket .pct{
	background:var(--pop);color:#fff;
	padding:.35rem .75rem;border-radius:4px;
	font-weight:700;font-size:1.4rem;
	line-height:1;
	box-shadow:0 2px 6px rgba(136,34,85,.35);
}

/* ---------- SEO link cloud ----------
   Renders just above the footer on category pages: every filter URL for the
   category as muted middot-separated anchors. Real <a href> for Googlebot;
   visually a quiet single-line block so it doesn't compete with the brand
   chips, recomandare pills, or product grid. */
.seo-cloud{
	font-size:.78rem;color:var(--navy-soft);
	margin:1.5rem 0 0;line-height:1.7;
}
.seo-cloud .wrap{padding-top:.6rem;border-top:1px solid var(--line)}
.seo-cloud a{color:inherit;text-decoration:none}
.seo-cloud a:hover{color:var(--navy-2)}

/* ---------- footer ---------- */
.footer{
	background:var(--navy-2);color:#cfd5e4;
	padding:2.5rem 0;margin-top:3rem;
	font-size:.95rem;
}
.footer a{color:#fff}
.footer a:hover{color:var(--rose)}
.footer .wrap{display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between}

/* ================================================================
   PRICE-CARD (.p1) BLOCK
   ================================================================ */

.prodList{
	display:flex;
	justify-content:center;
	gap:1.25rem;
	flex-direction:row;
	flex-wrap:wrap;
}
/* Each card sizes to its own content. Without this, expanding "Arată grafic"
   on one card stretches its row neighbours to match (flex default), and
   the un-expanded card shows a tall empty whitespace block. Letting cards
   align-self:flex-start gives a slightly staggered row but no empty boxes. */
.prodList :is(.card,.card--slim,.p1,.p1slim){align-self:flex-start}
.prodList :is(.card,.p1) > :is(a.btn-outbound,a.linkA){
	display:block;
	margin:.5rem auto 0;
	width:fit-content;
}
@media screen and (min-width:1100px){
	.prodList :is(.card,.p1){min-width:360px}
}

:is(.card,.card--slim,.p1,.p1slim){
	margin:0;
	background-color:#fff;
	padding:.75rem 1rem 1rem;
	border-radius:12px;
	border:1px solid rgba(46,66,113,.06);
	box-shadow:0 1px 2px rgba(46,66,113,.04),0 4px 12px rgba(46,66,113,.06);
	position:relative;
	transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease;
	overflow:hidden;
}
:is(.card,.p1){max-width:360px}
:is(.card--slim,.p1slim){
	width:310px;
	display:flex;
	flex-direction:column;
}
:is(.card,.card--slim,.p1,.p1slim):hover{
	transform:translateY(-3px);
	box-shadow:0 2px 4px rgba(46,66,113,.06),0 14px 28px rgba(46,66,113,.14);
	border-color:rgba(136,34,85,.2);
}
.card--big,.p1Big{width:95%;max-width:600px}
.imgBig{margin:auto}
.thumb-sm,.imgs3{max-width:90px;height:90px}
.thumb-md,.imgs4{max-width:120px;height:120px}

.card-title,.tit2{
	overflow-wrap:break-word;
	max-height:100px;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:4;
	line-clamp:4;
	-webkit-box-orient:vertical;
	text-align:left;
	font-size:1.3rem;
	line-height:1.4rem;
	color:var(--navy);
}
.chip-price .lei,.red .lei{color:inherit;font-size:.8em;display:inline}

.card-media,.titImg{
	display:flex;
	margin:0 0 .5rem 0;
	gap:.5rem;
	width:85%;
}
.card-media--slim,.titImgSlim{
	display:flex;
	flex-direction:column;
	margin:0 0 .5rem 0;
	gap:.5rem;
	height:90%;
}
.card-media--big,.titImgBig{
	display:flex;
	margin:0 0 .5rem 0;
	gap:.5rem;
}

.chip-price,.red{
	position:absolute;
	right:0;top:0;
	padding:.55rem .65rem;
	background:linear-gradient(135deg,#17856d 0%,#0f5f4d 100%);
	color:#fff;
	border-radius:0 12px 0 12px;
	font-size:1.4rem;
	font-weight:700;
	min-width:50px;
	box-shadow:0 4px 12px rgba(19,116,95,.3);
	text-align:center;
}
.chip-price .chip-pct,
.chip-price .p2,
.red .chip-pct,
.red .p2{
	display:block;
	width:fit-content;
	margin-left:auto;margin-right:auto;
}
.chip-pct,.p2{
	font-size:.78em;
	line-height:1.5;
	margin-top:.35rem;
	background-color:#825;
	border-radius:3px;
	padding:0 .4rem;
}
/* When red >= 0 the current price is at or above the year-low — i.e. NOT
   a discount. Renderers append .pretP to the chip wrapper so the green
   "good price" pill flips to red, matching the +X% sign. Without this,
   user sees +46% inside a green pill on prodEmag and reads "good deal"
   when the data says the opposite. */
.chip-price.pretP, .red.pretP {
	background:linear-gradient(135deg,#9d1c2c 0%,#741322 100%);
	box-shadow:0 4px 12px rgba(157,28,44,.3);
}
/* Catch both layouts: .chip-pct nested inside .chip-price (homepage cards
   via getGraf3) and .chip-pct as a sibling of .chip-price (buybox-price).
   The renderers stamp .pretP on both nodes, so target it directly here. */
.chip-price.pretP .chip-pct,
.chip-price.pretP .p2,
.red.pretP .chip-pct,
.red.pretP .p2,
.chip-pct.pretP,
.p2.pretP {
	background-color:#4d1018;
}
.gl{
	display:flex;
	flex-direction:row;
	align-items:center;
	margin-top:1rem;
}
.grafHD,a.grafHD:link,a.grafHD:visited,a.grafHD:hover{
	display:none;
	background-color:var(--pop);
	font-size:1rem;
	border-radius:3px;
	color:#fff;
	line-height:1.5rem;
	padding:0 .75rem;
	margin:1rem auto 0;
	text-align:center;
}
.grafNote{font-size:1.1rem;font-style:italic;margin-top:1rem;text-align:center}

/* ---------- product graph ---------- */
.graf{
	max-width:600px;margin:auto;
	display:flex;justify-content:center;
	gap:3px;
	padding:0 .25rem;
}
.bar{
	width:25px;
	flex:0 0 25px;
	height:200px;
	font-size:1.1rem;
}
.barFull{height:100%}
.barFill{
	background-color:#825;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.barFill.barDate{background-color:#882255d6}
.bar.barLast{font-weight:bold}
.bar.barLast .barFill{background-color:#13745f}
.bar.barLast .barFill.barDate{background-color:#13745fd6}
.bar.barLast .date,
.bar.barLast .val{font-size:1.2rem}
.date,.val{
	writing-mode:vertical-rl;
	transform:rotate(180deg);
	font-size:1.1rem;
	line-height:1;
	color:#fff;
	text-align:center;
	padding:6px 0;
}
.val{align-self:flex-start}
.leiGraf{color:#fff;margin-top:4px;font-size:.8em}
/* ================================================================
   LEGACY RULES (spec tables, grids, rec, compare, breadcrumbs, links)
   pulled from styleNew.css
   ================================================================ */

.descTit{
	font-size:1.6rem;
	line-height:1.6rem;
	background-color:#e1e4eb;
	border-radius:4px;
	display:inline-block;
	padding:.4rem 2rem;
}
.keyProp{
	font-weight:bold;
	margin-right:.5rem;
	background-color:#e1e4eb;
	padding:0 4px;
	line-height:2.1rem;
	border-radius:4px;
}
.specD{width:900px;margin:auto}
.specGrup{text-align:left;color:#aaa;line-height:.8em}
.specDen2{
	color:#7786A9;
	display:inline-block;
	text-align:right;
	white-space:nowrap;
	overflow:hidden;
	max-width:30%;
}
.specVal2{
	color:#162955;
	display:inline-block;
	text-align:left;
	white-space:nowrap;
	overflow:hidden;
	max-width:100%;
}
.gLine{width:100%;overflow:hidden;height:1.1em}
.alteGrup{display:none}

.pdLink3{
	padding:2px 5px;background-color:#ddd;font-style:italic;
	font-size:1rem;margin:3px;border:3px solid #fff;line-height:2.6rem;
}
.fLink{max-height:0;transition:max-height .15s ease-out}
.show{max-height:500px;transition:max-height .25s ease-in}
.noBorder{border:0;cursor:pointer}
.borderB{border-bottom:1px solid #ddd}
.center{text-align:center}

.imgP{height:200px;border:1px solid #ddd;margin:2px;padding:2px}
.imgs{max-height:150px;max-width:150px;margin:2px;padding:2px}
.imgs2{max-height:800px;max-width:800px;margin:2px;padding:2px}

.pret,.pret a:link,.pret a:visited{
	color:#4E618D;font-size:1.2em;font-weight:bold;
	display:inline-block;
}
.lei{display:inline-block;color:#7786A9;font-size:.8em}
.leiVal{color:#B425C4;display:inline-block;font-size:1.5em;margin:0 2px}
.over1{
	position:absolute;text-align:center;
	height:40px;line-height:40px;vertical-align:middle;
	width:100%;opacity:.7;z-index:20;
	background-color:#000;display:none;
}
.over1 a:link,.over1 a:visited{color:#fff}

#compDiv{display:none}
.compara{display:none}
.compBut{position:absolute;z-index:100;top:1px;right:1px;cursor:pointer;zoom:2}
.comp{font-size:.8em;margin:auto}
.comp td{
	max-width:120px;max-height:20px;
	overflow:hidden;word-wrap:break-word;white-space:nowrap;
}

.gridProd{
	display:inline-block;
	width:220px;height:220px;
	border:1px solid #ddd;
	margin-right:3px;margin-top:3px;
	overflow:hidden;
}
.gridProd a{font-size:.8em;color:var(--navy)}
.gridProd1{
	display:inline-block;
	width:250px;font-size:.8em;
	border:1px solid #ddd;
	overflow:hidden;position:relative;
	box-sizing:border-box;
}

#q{
	width:300px;box-sizing:border-box;
	border:0;border-radius:4px;
	font-size:16px;background-color:white;
}

.pBrand{}
.grid-itemB{
	background:#818181;border-radius:8px;
	border:2px solid #fff;margin:auto;
}
.grid-itemB a:link,.grid-itemB a:visited,.grid-itemB a:hover{color:#fff}
.grid-itemB a:hover{color:#4b4b4b}
.grid-item{
	background:#818181;border-radius:8px;
	border:1px solid #fff;display:inline-block;
	overflow:hidden;padding:5px 8px;margin:5px;
}
.grid-item a:link,.grid-item a:visited,.grid-item a:hover{
	color:#fff;height:100%;width:100%;
	transition:color 1s;display:inline-block;
}

.bread{font-size:.95rem;color:var(--navy);padding:1.25rem 0 1.75rem}
.bread a:link,.bread a:visited{
	color:var(--navy);
	background:var(--cream-2);
	border:1px solid var(--line);
	padding:.35rem .85rem;
	border-radius:999px;
	font-weight:500;
	display:inline-block;
	margin:.18rem;
	transition:background .15s, color .15s, border-color .15s, transform .1s;
}
.bread a:hover{
	background:var(--navy);
	border-color:var(--navy);
	color:#fff;
	transform:translateY(-1px);
}
/* the brand link is the hero of the bread row — heavier weight, navy tint */
.bread > a:first-of-type:link,
.bread > a:first-of-type:visited{
	background:var(--navy-tint);
	border-color:var(--navy-soft);
	color:var(--navy-2);
	font-weight:700;
	font-size:1.02rem;
	padding:.45rem 1rem;
	margin-bottom:.6rem;
}

/* ---------- category-brand page (categ.php) ---------- */
.page-head{padding:.5rem 0 1rem}
.page-head h1{
	font-size:clamp(1.6rem,3vw,2.4rem);
	font-weight:700;color:var(--navy-2);
	letter-spacing:-.02em;line-height:1.1;
	background:transparent;padding:0;margin:0;
}
.page-head h2{
	margin:.5rem 0 0;
	font-size:clamp(1rem,1.3vw,1.1rem);
	font-weight:400;color:var(--ink);
	line-height:1.35;
}
.page-head .page-lede{
	margin-top:.4rem;color:var(--muted);font-size:.95rem;
}
.page-head .page-intro{
	margin-top:.65rem;max-width:62rem;color:var(--navy-2);
	font-size:1.02rem;line-height:1.5;
}

/* ---------- product-detail hero (prodEmag.php) ---------- */
.prod-hero{padding:1rem 0 1.25rem}
.prod-hero .wrap{display:flex;flex-direction:column;gap:.75rem}
.prod-hero .hero-head{min-width:0;flex:1 1 auto}
.prod-hero .hero-head h1{
	font-size:clamp(1.6rem,3vw,2.4rem);
	font-weight:700;color:var(--navy-2);
	letter-spacing:-.02em;line-height:1.1;
	padding:0;margin:0;background:transparent;
}
.prod-hero .hero-head h2{
	margin:.4rem 0 0;
	font-size:clamp(1rem,1.3vw,1.1rem);
	font-weight:400;color:var(--ink);
	line-height:1.35;max-width:720px;
}
/* Stats row: always horizontal, wraps on narrow screens. Last tile (Actualizat)
   is deprioritised in color/size so price stats dominate the eye scan. */
.prod-hero .hero-stats{
	display:flex;flex-direction:row;align-items:stretch;gap:1.25rem 2.25rem;flex-wrap:wrap;
	margin-top:.5rem;padding-top:.75rem;
	border-top:1px dashed var(--line);
}
.prod-hero .hero-stats > div{display:flex;flex-direction:column;justify-content:space-between;min-width:0;align-self:stretch}
.prod-hero .hero-stats strong{
	font-size:2rem;color:var(--navy);font-weight:700;
	line-height:1;font-variant-numeric:tabular-nums;
}
.prod-hero .hero-stats > div:first-child strong{color:var(--pop)}
.prod-hero .hero-stats strong.stat-date{font-size:1.6rem;letter-spacing:-.01em}
.prod-hero .hero-stats strong .u{
	font-size:.55em;color:var(--muted);
	font-weight:400;margin-left:.2em;
	letter-spacing:.02em;
}
.prod-hero .hero-stats > div > span{
	color:var(--muted);font-size:.9rem;margin-top:.4rem;
}
.prod-hero .hero-stats > div:last-child strong{color:var(--muted)}
.prod-hero .hero-stats > div:last-child strong.stat-date{font-weight:600}

/* ≥900px: inline the stats next to the head — head on the left, stats stack
   to the right with a vertical dashed divider. Wraps below on narrower widths. */
@media screen and (min-width:900px){
	.prod-hero{padding:1.25rem 0 1.5rem}
	.prod-hero .wrap{flex-direction:row;align-items:center;gap:1.5rem 2.5rem;flex-wrap:wrap}
	.prod-hero .hero-stats{
		margin-top:0;padding-top:0;padding-left:0;border-top:0;
		border-left:1px dashed var(--line);
		gap:1.5rem 2.5rem;
	}
	.prod-hero .hero-stats strong{font-size:2.2rem}
	.prod-hero .hero-stats strong.stat-date{font-size:1.8rem}
}

@media screen and (max-width:600px){
	.prod-hero .hero-stats{gap:.9rem 1.25rem}
	.prod-hero .hero-stats strong{font-size:1.55rem}
	.prod-hero .hero-stats strong.stat-date{font-size:1.3rem}
	.prod-hero .hero-stats > div:last-child strong.stat-date{font-size:1.1rem}
	.prod-hero .hero-stats > div > span{font-size:.82rem;margin-top:.25rem}
}

.crumbs{background:transparent;padding:.5rem 0 0}
.crumbs .wrap{
	display:flex;align-items:center;gap:.4rem;
	font-size:.9rem;color:var(--muted);
	flex-wrap:wrap;
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--navy)}
.crumbs .sep{color:var(--line)}
.crumbs [aria-current]{color:var(--navy-2);font-weight:700}

/* brand chip row — lives at the top of the brand bucket section */
.brand-jump{
	display:flex;flex-wrap:wrap;gap:.5rem;
	margin:.5rem 0 1.25rem;
}
.brand-jump .brand-chip{
	display:inline-flex;align-items:center;gap:.5rem;
	min-height:40px;
	padding:.5rem .9rem;margin:0;
	background:#fff;border:1px solid var(--line);
	border-radius:999px;overflow:visible;
	color:var(--navy);font-weight:700;font-size:.95rem;
	transition:border-color .15s, background .15s, color .15s, transform .15s;
}
.brand-jump .brand-chip:hover{
	border-color:var(--navy);background:var(--navy);color:#fff;
	transform:translateY(-1px);
}
.brand-jump .brand-chip.is-active{
	background:var(--navy-2);color:#fff;border-color:var(--navy-2);
}
.brand-jump .brand-chip.is-active .brand-chip-count{
	background:rgba(255,255,255,.18);color:#fff;
}
.reco-jump .reco-chip.is-active{
	background:var(--pop);color:#fff;border-color:var(--pop-2);
}
.brand-jump .brand-chip-name{color:inherit}
.brand-jump .brand-chip-count{
	font-weight:400;font-size:.82em;color:var(--muted);
	background:var(--cream-2);border-radius:999px;
	padding:.05em .55em;line-height:1.4;
}
.brand-jump .brand-chip:hover .brand-chip-count{
	background:rgba(255,255,255,.18);color:#fff;
}

/* brand buckets reuse .bucket from home.php — anchor offset for sticky topbar */
.bucket[id]{scroll-margin-top:88px}

/* "Sari la produse" jump on filtered listings — gets the buyer past the
   brand-tips preamble (motive + prop) without losing the SEO copy. The
   anchor target is rendered just before the bucket loop with the same
   scroll-margin so it lands cleanly under the topbar. */
.anchor-produse{display:block;height:0;scroll-margin-top:88px}
.page-lede-jump{
	display:inline-flex;align-items:center;gap:.4rem;
	margin-top:.6rem;padding:.55rem 1rem;min-height:40px;
	background:var(--navy-tint);border:1px solid transparent;border-radius:999px;
	color:var(--navy-2);font-weight:700;font-size:.95rem;
	transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.page-lede-jump:hover{background:var(--navy-2);color:#fff;border-color:var(--navy-2);transform:translateY(-1px)}
.page-lede-jump .arrow{font-weight:400}
.bucket .bucket-link{
	margin-left:auto;color:#fff;
	font-weight:700;font-size:.95rem;
	border-bottom:1px dashed rgba(255,255,255,.45);
	padding-bottom:1px;
}
.bucket .bucket-link:hover{
	color:#fff;border-bottom-color:#fff;
}

.pBrand{
	display:flex;flex-wrap:wrap;gap:.4rem .5rem;
	margin-bottom:1.25rem;
}

@media screen and (max-width:600px){
	/* keep bucket on one line at all widths — tighten everything to fit */
	.bucket{
		flex-wrap:nowrap;gap:.5rem;
		padding:.55rem .65rem;font-size:.95rem;
		border-radius:6px;
	}
	.bucket .pct{
		padding:.2rem .5rem;font-size:1.05rem;
		flex-shrink:0;
	}
	.bucket > span:nth-of-type(2){
		min-width:0;flex:1 1 auto;
		white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	}
	.bucket .bucket-link{
		margin-left:auto;width:auto;flex-shrink:0;
		font-size:.85rem;white-space:nowrap;
	}
}

/* Recomandare pills — SEO-friendly curated phrases */
.reco-jump{
	display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
	margin:.5rem 0 .5rem;
}
.reco-jump .reco-label{
	font-size:.9rem;color:var(--muted);margin-right:.25rem;
}
.reco-jump .reco-chip{
	display:inline-flex;align-items:center;margin:0;
	min-height:40px;padding:.5rem .95rem;
	background:var(--navy-tint);border:1px solid transparent;
	border-radius:999px;color:var(--navy-2);
	font-weight:700;font-size:.95rem;
	transition:background .15s, color .15s, border-color .15s;
}
.reco-jump .reco-chip:hover{
	background:var(--pop);color:#fff;border-color:var(--pop-2);
}

/* buying-tips block (.descTit + ordered list, redesigned as a grid) */
.tips-section{padding-top:1.25rem;padding-bottom:1.5rem}
.tips-section .section-head h2 em{
	color:var(--navy-2);font-style:normal;
	background:linear-gradient(transparent 65%,var(--navy-tint) 65%,var(--navy-tint) 92%,transparent 92%);
	padding:0 .15em;
}
.tips-section .descTit{
	display:block;
	font-size:.95rem;line-height:1.45;
	background:transparent;color:var(--muted);
	border-radius:0;padding:0;margin:.25rem 0 .7rem;
	display:block;
}
.tips-section .descTit b{color:var(--navy-2)}
.tips-section .descTit-lead{
	font-size:1.05rem;line-height:1.5;color:var(--navy-2);
	margin:.25rem 0 .6rem;
}
.tips-section .descTit-lead b{color:inherit}

.buy-tips{
	list-style:none;
	counter-reset:tip;
	display:grid;grid-template-columns:1fr;gap:.6rem;
	margin:0;padding:0;width:100%;
}
.buy-tips li{
	counter-increment:tip;
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap:.9rem;row-gap:.15rem;
	align-items:start;
	padding:.85rem 1rem;
	background:#fff;border:1px solid var(--line);
	border-radius:12px;
	transition:border-color .15s, box-shadow .15s, transform .15s;
}
.buy-tips li::before{
	content:counter(tip);
	grid-row:1 / span 2;
	display:inline-flex;align-items:center;justify-content:center;
	width:36px;height:36px;
	background:var(--navy);color:#fff;
	border-radius:50%;
	font-weight:700;font-size:1.05rem;line-height:1;
	font-variant-numeric:tabular-nums;
	box-shadow:0 2px 6px rgba(46,66,113,.18);
}
.buy-tips li:hover{
	border-color:var(--navy);
	box-shadow:0 4px 14px rgba(46,66,113,.08);
	transform:translateY(-1px);
}
.buy-tips .tip-title{
	display:block;color:var(--navy-2);
	font-size:1.05rem;line-height:1.2;
	letter-spacing:-.01em;
}
.buy-tips .tip-text{
	display:block;color:var(--ink);
	font-size:.95rem;line-height:1.45;
}

@media screen and (min-width:700px){
	.buy-tips{grid-template-columns:1fr 1fr;gap:.75rem 1.25rem}
}
@media screen and (min-width:1200px){
	.buy-tips li{padding:1rem 1.1rem}
}
@media screen and (max-width:600px){
	.tips-section .descTit{font-size:.9rem}
	.buy-tips li{padding:.7rem .85rem}
	.buy-tips li::before{width:30px;height:30px;font-size:.95rem}
	.buy-tips .tip-title{font-size:1rem}
	.buy-tips .tip-text{font-size:.9rem}
}

#showRec hr{display:none}

.rec{
	cursor:pointer;color:#2e2e2e;font-size:1.2em;
	border:2px solid #2e2e2e;border-radius:7px;margin:auto;
	background-color:#ffff00;padding:5px;
	transition:color 1.5s;display:table;
}
.rec:hover{
	background-color:#2e2e2e;color:#ffff00;
	border:2px solid #ffff00;cursor:pointer;
}
.rArr{
	display:block;font-size:1em;
	animation:blinker2 .6s linear infinite;
	font-weight:bold;
}
@keyframes blinker2{50%{opacity:.55}}
.recTxt{vertical-align:middle;padding:15px;cursor:pointer}

/* ---------- link styles ---------- */
a.btn-outbound:link,a.btn-outbound:visited,a.btn-outbound:hover,
a.linkA:link,a.linkA:visited,a.linkA:hover{
	color:#162955;
	background-color:#ffff01;
	border:1px solid #162955;
	font-size:1.2rem;
	font-weight:600;
	padding:11px 22px;
	line-height:1.25;
	border-radius:10px;
	text-decoration:none;
	display:inline-block;
}
a.btn-outbound:hover,a.linkA:hover{background-color:#fff}

a.pLink:link,a.pLink:visited,a.pLink:hover{
	color:#fff;border:1px solid #fff;background-color:#444;
	transition:color 1s;border-radius:5px;padding:0 15px;
}
a.pLink:hover{color:#000;background-color:#fff;border:1px solid #d1d1d1}

a.card-title-link:link,a.card-title-link:visited,
a.pLink2:link,a.pLink2:visited{color:var(--navy);text-decoration:none}
a.card-title-link:hover,a.pLink2:hover{text-decoration:underline}

a.pdLink:link,a.pdLink:visited{
	color:#fff;display:block;white-space:nowrap;
	overflow:hidden;text-overflow:clip;
	margin:0 5px 3px 5px;
	border:1px solid #7786A9;background-color:var(--navy);
	border-radius:3px;text-decoration:none;padding:0 3px;
}
a.pdLink:hover{color:var(--navy);border:1px solid #7786A9;background-color:#fff}

a.pdLink2:link,a.pdLink2:visited{
	color:#fff;display:block;white-space:nowrap;
	width:200px;overflow:hidden;text-overflow:clip;
	margin:auto;background-color:#bbb;
	border-radius:3px;padding:2px;
}
a.pdLink2:hover{color:#bbb;border:1px solid #bbb;background-color:#fff}

a.goo:link,a.goo:visited,a.goo:hover{
	color:#fff;border:1px solid #fff;background-color:#444;
	transition:color 1s;border-radius:5px;padding:0 15px;
}
a.goo:hover{color:#000;background-color:#fff;border:1px solid #d1d1d1}

.arrow{
	padding-left:10px;
	animation:arrowBlink 1s linear infinite;
	position:relative;top:1px;
	font-size:1.2em;
}
@keyframes arrowBlink{50%{opacity:0}}

/* ================================================================
   responsive
   ================================================================ */

@media screen and (max-width:1024px){
	.card,.p1{max-width:310px}
	.content{width:100%}
}

@media screen and (max-width:768px){
	.hero{padding:2.25rem 0 1.5rem}
	.hero-stats{gap:1.5rem}
	.section{padding:2rem 0}
	.graf{max-width:400px}
	.logo{height:48px;width:48px;border-radius:12px}
	.logo img{height:32px}
	.burger{height:44px;width:44px}
	.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

	.specD{width:95%}
	.imgs2,.imgG5,.imgG6,.imgG7,.imgG8,.imgG9,.imgG10,.imgG11,.imgG12,.imgG13,.imgG14,.imgG15,.imgG16,.imgG17,.imgG18,.imgG19,.imgG20,.imgG21,.imgG22,.imgG23,.imgG24,.imgG25,.imgG26,.imgG27,.imgG28,.imgG29,.imgG30,.imgG31,.imgG32,.imgG33,.imgG34{display:none}
	#content{width:100%}
	.compBut{top:0;right:0;cursor:pointer;zoom:1.5}
	.content h1,#content h1{line-height:1.8rem;font-size:2rem;padding:.5rem}
	.gridProd1{font-size:1.1em;line-height:.9em;color:var(--navy);width:49%;box-sizing:border-box}
	.grid{width:100%}
	.grid-item a:link,.grid-item a:visited,.grid-item a:hover{border-radius:10px;font-size:1.2em;line-height:1.2em}
	.imgP{max-width:150px;max-height:150px}
	.gridProd{width:135px}
	.imgs{width:130px;margin:0;padding:0}
	.specGrup{font-size:.6em}
	#q{width:240px;padding:0}
	.gLine{overflow:hidden;width:99%}
	a.pLink:link,a.pLink:visited,a.pLink:hover{font-size:.8em;line-height:.8em}
	a.btn-outbound:link,a.btn-outbound:visited,a.btn-outbound:hover,
	a.linkA:link,a.linkA:visited,a.linkA:hover{font-size:1.5em;line-height:1.2em;}
	.bread{font-size:1.2em;line-height:1.2em}
	.rec{width:90%}
	a.pdLink:link{display:none}
}

@media screen and (max-width:600px){
	.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.graf{
		max-width:100%;
		overflow-x:hidden;
		justify-content:center;
		padding:0 .25rem;
	}
	/* bars shrink to fit inside .graf instead of overflowing */
	.bar{flex:1 1 0;min-width:0;max-width:25px}
	/* burger on the left so it's thumb-reachable; logo/home anchored right so
	   a stray tap doesn't reset the page the user is browsing. Intentional. */
	.topbar > .wrap{gap:.6rem;padding-left:.75rem;padding-right:.75rem}
	.topbar .logo{order:3;margin-left:auto}
	/* cards reclaim the edge gutter and drop the desktop width cap */
	.card,.card--slim,.p1,.p1slim{padding:.5rem .5rem .75rem;max-width:none;width:auto;align-self:stretch}
	/* tighter hero so the lede doesn't eat half the first screen */
	.hero{padding:.75rem 0 .75rem}
	.hero .wrap{gap:.5rem}
	.hero p.lede{font-size:1rem;line-height:1.3}
	/* 3 stats, always one row, trimmed typography so they fit at 320px */
	.hero-stats{flex-wrap:nowrap;gap:.9rem;margin-top:.5rem;padding-top:.6rem}
	.hero-stats strong{font-size:2rem}
	.hero-stats span{font-size:.85rem}
	/* bucket banners span the full viewport, no rounded corners */
	.bucket{
		border-radius:0;
		margin:1rem -1.25rem;
		padding:.75rem 1.25rem;
	}
	/* card grid keeps inside the content gutter — the -1rem bleed used to
	   push graph SVGs past the viewport on narrow phones. */
	.prodList{margin:0;padding:0;gap:.75rem;max-width:100%}

	/* ---------- tap-target bump for touch (≥44px height) ---------- */
	.crumbs a,.crumbs [aria-current]{padding:.5rem .35rem;display:inline-block;line-height:1.6;min-height:40px;box-sizing:border-box}
	.bread a:link,.bread a:visited{padding:.5rem .8rem;display:inline-block;line-height:1.2}
	a.btn-outbound:link,a.btn-outbound:visited,a.btn-outbound:hover,
	a.linkA:link,a.linkA:visited,a.linkA:hover{padding:.65rem 1.1rem;line-height:1.2}
	/* iOS won't auto-zoom on focus while font-size:16px is on the input;
	   the height bump (~38px box, 40px hit area with .search padding) lifts
	   the search field out of the sub-30px slim band the audit flagged. */
	.search{padding:.5rem .75rem;gap:.5rem}
	.search input{min-height:2.4rem;font-size:1rem}
}

@media screen and (max-width:450px){
	.card,.p1{border:0}
	.logo{height:44px;width:44px}
	.logo img{height:28px}
	.cat-grid{grid-template-columns:1fr}
}

/* ================================================================
   compara.php — head-to-head /compara/{slugA}-vs-{slugB}/ pages.
   Moved out of compara.php's inline <style> (per-page override of
   .wrap{max-width:1280px} stays inline since the global .wrap is 1600
   for home/category and only product/compara pages narrow it).
   ================================================================ */

/* Hero — two product cards side-by-side, hard split visually so the eye reads
   them as a pair. The "vs" badge sits between on desktop, above on mobile. */
.cmp-hero{padding:1.25rem 0 .5rem}
.cmp-hero .wrap{position:relative}
.cmp-hero h1{font-size:1.6rem;line-height:1.25;margin:0 0 .25rem;color:#2E4271;text-align:center;font-weight:500}
.cmp-hero h1 b,.cmp-card .ttl b,.cmp-rev-card h3 b,.cmp-detail .for-card h3 b,.cmp-specs thead th b{font-weight:800;color:#1a3268}
.cmp-card .ttl,.cmp-rev-card h3,.cmp-detail .for-card h3{font-weight:500}
.cmp-specs thead th{font-weight:500}
.cmp-hero .sub{text-align:center;color:#606f93;font-size:.95rem;margin-bottom:1rem}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:stretch;position:relative}
.cmp-grid::before{
  content:"vs";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:#2E4271;color:#fff;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:.95rem;letter-spacing:.05em;box-shadow:0 2px 8px rgba(46,66,113,.25);z-index:2;
}
.cmp-card{background:#fff;border:1px solid #e3e7f1;border-radius:8px;padding:1rem;display:flex;flex-direction:column}
.cmp-card .ttl{font-size:1rem;font-weight:600;color:#2E4271;margin:0 0 .5rem;min-height:2.5em}
.cmp-card .ttl a{color:inherit;text-decoration:none}
.cmp-card .ttl a:hover{text-decoration:underline}
.cmp-card .grafNote{text-align:center}
/* Beat a.btn-outbound:link's specificity (0,2,1) by adding the type 'a' so
   our display:block wins and margin:auto can center it. */
.cmp-card a.btn-outbound,.cmp-card a.linkA{display:block;width:fit-content;margin:.5rem auto;text-align:center}

/* Verdict callout — the data-driven sentence is the differentiator that takes
   the page out of "thin auto-generated" territory. Make it visually anchor. */
.cmp-verdict{background:#f7f9fd;border-left:4px solid #2E4271;padding:1rem 1.25rem;margin:1.5rem 0;border-radius:4px;line-height:1.55;color:#2E4271}
.cmp-verdict strong{color:#000}
.cmp-verdict .pct{display:inline-block;background:#2E4271;color:#fff;padding:.1rem .5rem;border-radius:3px;font-weight:600;font-size:.95em}

/* Buyer-review block — concise AI-summary of real eMAG reviews per product.
   Two columns when both have reviews; one full-width column when only one does;
   skipped entirely when neither has reviews. Pros/cons trimmed to 3 each so the
   block stays scannable; the per-product page has the full list anyway. */
.cmp-rev{max-width:1100px;margin:1.5rem auto;padding:0 1rem}
.cmp-rev h2{font-size:1.5rem;color:#2E4271;margin:0 0 .25rem;text-align:left}
.cmp-rev .cmp-rev-note{color:#606f93;font-size:.92rem;margin:0 0 1rem;font-style:italic}
.cmp-rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cmp-rev-grid.solo{grid-template-columns:1fr;max-width:680px;margin:0 auto}
.cmp-rev-card{background:#fff;border:1px solid #e3e7f1;border-radius:8px;padding:1rem 1.25rem}
.cmp-rev-card h3{font-size:1.05rem;color:#2E4271;margin:0 0 .5rem;line-height:1.3}
.cmp-rev-card .desc{font-size:.95rem;line-height:1.55;color:#33384a;margin:0 0 .75rem}
.cmp-rev-card .pros,.cmp-rev-card .cons{margin:.5rem 0 0;padding:.6rem .8rem;border-radius:6px;font-size:.92rem;line-height:1.45}
.cmp-rev-card .pros{background:#eaf6ec;color:#1d4023}
.cmp-rev-card .cons{background:#fdecec;color:#5a1f1f;margin-top:.5rem}
.cmp-rev-card .pros b,.cmp-rev-card .cons b{display:block;margin-bottom:.25rem;font-weight:600}
.cmp-rev-card ul{margin:0;padding-left:1.1rem}
.cmp-rev-card li{margin:.15rem 0}
.cmp-rev-empty{font-size:.92rem;color:#606f93;font-style:italic;margin:.5rem 0 0}
@media (max-width:720px){
  .cmp-rev-grid{grid-template-columns:1fr;gap:1rem}
}

/* Detailed comparison block — handcrafted Romanian copy from copilotCompara.
   Sits above the spec table, gives the page real depth for "X vs Y" queries
   instead of being a thin auto-generated specs dump. */
.cmp-detail{max-width:980px;margin:2rem auto;padding:0 1rem;color:#2E4271;line-height:1.65}
.cmp-detail h2{font-size:1.45rem;color:#2E4271;margin:1.75rem 0 .6rem}
.cmp-detail .lead{background:#f7f9fd;border-left:4px solid #2E4271;padding:1rem 1.25rem;margin:0 0 1.5rem;border-radius:4px;font-size:1.05rem}
.cmp-detail .lead strong{color:#000}
.cmp-detail p{margin:.7rem 0}
.cmp-detail .for-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.cmp-detail .for-card{background:#fff;border:1px solid #e3e7f1;border-radius:8px;padding:1rem 1.25rem}
.cmp-detail .for-card h3{font-size:1.05rem;color:#2E4271;margin:0 0 .5rem;line-height:1.3}
.cmp-detail .for-card ul{margin:.25rem 0 0 1.1rem;padding:0}
.cmp-detail .for-card li{margin:.25rem 0}
.cmp-detail .faq dt{font-weight:600;color:#2E4271;margin:1rem 0 .25rem}
.cmp-detail .faq dd{margin:0 0 .5rem;color:#33384a}

/* Spec table — grouped sections, each with a label header. Differing rows get
   a soft blue band so the eye lands on them quickly without the harsh yellow. */
.cmp-specs-wrap{max-width:1100px;margin:1.5rem auto;padding:0 1rem}
.cmp-specs-wrap h2{font-size:1.5rem;color:#2E4271;margin:0 0 1rem;text-align:left}
.cmp-specs{width:100%;border-collapse:separate;border-spacing:0;font-size:.98rem}
.cmp-specs thead th{padding:.85rem .9rem;font-weight:600;color:#fff;background:#2E4271;font-size:.95rem;text-align:left}
.cmp-specs thead th:first-child{border-top-left-radius:6px}
.cmp-specs thead th:last-child{border-top-right-radius:6px}
.cmp-specs th.section{font-size:1rem;color:#2E4271;background:#eef2fa;padding:.6rem .9rem;text-align:left;font-weight:600;border-top:1px solid #c8d3eb;border-bottom:1px solid #c8d3eb;letter-spacing:.01em}
.cmp-specs td{padding:.55rem .9rem;vertical-align:top;line-height:1.45;border-bottom:1px solid #eef1f7}
.cmp-specs td.cmp-den{width:28%;color:#606f93;font-size:.92rem}
.cmp-specs td.cmp-val{width:36%;color:#2E4271}
.cmp-specs tr.diff td{background:#f3f7fd}
.cmp-specs tr.diff td.cmp-val{font-weight:600;color:#1a3268}
.cmp-specs tr.diff td.cmp-den{color:#2E4271}
.cmp-specs td.miss{color:#a9b3c8;font-style:italic;font-weight:400}
.cmp-specs tr:hover td{background:#fafbfd}
.cmp-specs tr.diff:hover td{background:#e9f0fa}
/* Spec-header column titles ("LG H12S1P …", "Toyotomi-Japan …") wrap the
   brand prefix in <b>, which the shared `.cmp-* b` rule above paints
   #1a3268 — invisible on the navy thead background. Force white inside the
   header row only; everywhere else the dark-blue prefix on white still pops. */
.cmp-specs thead th b{color:#fff}

@media (max-width:720px){
  .cmp-detail .for-grid{grid-template-columns:1fr}
  .cmp-specs td.cmp-den{width:34%;font-size:.85rem;padding:.5rem .55rem}
  .cmp-specs td.cmp-val{width:33%;font-size:.92rem;padding:.5rem .55rem}
  .cmp-specs thead th{font-size:.88rem;padding:.6rem .55rem}
  .cmp-specs th.section{font-size:.92rem;padding:.5rem .55rem}
}

/* Other-comparisons strip — chip pills, same look as the brand-pill bar. */
.cmp-more{margin:2rem 0}
.cmp-more h2{font-size:1.2rem;color:#2E4271;margin:0 0 .75rem;text-align:center}
.cmp-more .pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.cmp-more .pills a{display:inline-block;padding:.4rem .85rem;background:#fff;border:1px solid #c8d0e3;border-radius:999px;color:#2E4271;text-decoration:none;font-size:.92rem;line-height:1.2;font-weight:500}
.cmp-more .pills a b{font-weight:800;color:#1a3268}
.cmp-more .pills a:hover{border-color:#2E4271;background:#f3f6fc}
.cmp-more .pills a:hover b{color:#1a3268}

@media (max-width:720px){
  /* Stacked cards with the "vs" badge between them, not floating above
     both. Grid auto-placement puts the ::before in row 1 by default —
     pin each item to an explicit row so the reading order is
     card-A → vs → card-B. */
  .cmp-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:1rem}
  .cmp-grid::before{position:static;transform:none;justify-self:center;grid-row:2;margin:.25rem 0;display:flex}
  .cmp-grid > .cmp-card:first-of-type{grid-row:1}
  .cmp-grid > .cmp-card:last-of-type{grid-row:3}
  .cmp-hero h1{font-size:1.25rem}
  .cmp-specs td.cmp-den{width:30%;font-size:.82rem}
  .cmp-specs td.cmp-val{width:35%;font-size:.92rem}
  /* Grid-cell flex items default to min-width:auto (content-based), which
     lets a wide inner card or absolute-positioned price chip push past the
     viewport. Force the cell to actually shrink to grid-track width and
     clip overflow to the card border — the +51% chip and the right edge of
     the price-history bars stay inside .cmp-card instead of disappearing
     past the viewport edge. */
  .cmp-card{min-width:0;box-sizing:border-box;overflow:hidden}
  .cmp-card .card,.cmp-card .p1,.cmp-card .p1Big{max-width:100%;min-width:0}
}

/* ---------- mobile sticky CTA bar (product detail page) ----------
   Hidden by default. On phones, pin to the bottom so the outbound
   "Vezi oferta" stays one tap away while the user scrolls through
   the price chart, AI review summary, specs and similar products.
   Suppressed when the burger panel is open so the bar doesn't cover
   the bottom rows of the category list (body.menu-open is toggled
   by the cat-menu open/close handler in each page's footer JS). */
.cta-stick{display:none}
/* !important needed because the @media (max-width:768px) block below sets
   display:flex; without this override, the sticky bar covers the open
   burger panel on mobile (388×844 audit caught this). */
body.menu-open .cta-stick{display:none !important}
@media screen and (max-width:768px){
	.cta-stick{
		display:flex;
		position:fixed;
		left:0;right:0;bottom:0;
		z-index:50;
		align-items:center;
		justify-content:space-between;
		gap:.75rem;
		padding:.55rem .9rem;
		padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));
		background:#fff;
		border-top:1px solid rgba(46,66,113,.12);
		box-shadow:0 -4px 14px rgba(46,66,113,.10);
	}
	/* price block mirrors the .chip-price/.red green gradient pill used on
	   product cards — same gradient, weight, asymmetric border-radius, lei
	   suffix sizing, and magenta .p2 sub-chip. */
	.cta-stick-price{
		padding:.45rem .65rem;
		background:linear-gradient(135deg,#17856d 0%,#0f5f4d 100%);
		color:#fff;
		border-radius:0 12px 0 12px;
		font-size:1.4rem;
		font-weight:700;
		min-width:50px;
		box-shadow:0 4px 12px rgba(19,116,95,.3);
		text-align:center;
		line-height:1.05;
	}
	.cta-stick-price .lei{font-size:.8em;display:inline;color:inherit}
	.cta-stick-price .p2{
		display:block;
		width:fit-content;
		margin:.3rem auto 0;
		font-size:.7em;
		line-height:1.4;
		background-color:#825;
		color:#fff;
		border-radius:3px;
		padding:0 .4rem;
		font-weight:400;
	}
	a.cta-stick-btn:link,
	a.cta-stick-btn:visited,
	a.cta-stick-btn:hover{
		flex:0 0 auto;
		font-size:1.1rem;
		font-weight:700;
		padding:.7rem 1.1rem;
		line-height:1.1;
	}
	/* keep the last bit of page content reachable above the fixed bar */
	body:has(.cta-stick){padding-bottom:80px}
}

/* ================================================================
   wide screens: product detail page polish (≥1100px)
   ================================================================ */
@media screen and (min-width:1100px){
	/* hero: head left, stats right side-by-side. Without this, the h1
	   greedily fills the row and stats wrap below — wasteful at 1280px+. */
	.prod-hero .wrap{
		display:grid;
		grid-template-columns:minmax(0,1fr) auto;
		align-items:center;
		gap:1.5rem 3rem;
	}
	.prod-hero .hero-head{flex:initial;min-width:0}
	.prod-hero .hero-stats{flex-wrap:nowrap;gap:1.5rem 2.5rem}

	/* main product card: widen so the price-history graph and image
	   read at a useful size on wide screens. Also cap the .prodList
	   wrapper to the card width so the centered card doesn't sit in a
	   1300px-wide flex container with 200px of empty rails on each side. */
	.content > .prodList:first-of-type{max-width:880px;margin:0 auto}
	.content > .prodList .p1Big,
	.content > .prodList .card--big{max-width:880px;width:100%;padding:1.5rem 2rem 1.75rem}
	.content > .prodList .p1Big .imgBig{max-width:420px;height:auto}
	.content > .prodList .p1Big .graf,
	.content > .prodList .card--big .graf{max-width:none}

	/* spec table: 2-column grid layout. With 60+ rows the previous
	   single-column stack ran ~2600px tall on desktop. Switching to
	   display:grid on tbody flows rows into two visual columns and the
	   colspan="2" heading row spans both via grid-column:1/-1. */
	table.det{display:block;max-width:1180px;margin:0 auto;width:100%}
	table.det tbody{
		display:grid;
		grid-template-columns:1fr 1fr;
		column-gap:2.5rem;
		row-gap:0;
	}
	table.det tr{
		display:flex;
		align-items:baseline;
		gap:.75rem;
		padding:.45rem 0;
		border-bottom:1px solid var(--cream-2);
	}
	table.det tr:first-child{
		grid-column:1 / -1;
		display:block;
		padding:.5rem 0 .85rem;
		margin-bottom:.5rem;
		border-bottom:1px solid var(--line);
	}
	table.det tr td{padding:0;line-height:1.4}
	table.det tr td.td1{flex:0 0 38%;text-align:right;color:#606f93;font-size:.92rem}
	table.det tr td.td2{flex:1 1 62%;text-align:left;font-size:1rem;color:var(--ink)}

	/* similar products: tighten container so cards fill the visual row
	   instead of trailing left when only 3 fit at default 360px. */
	section.similar .wrap{max-width:1280px}
}

/* Everything below the spec table — the standalone outbound CTA, the
   similar-products heading, and the brand/related-categories bread —
   sits centered so the page tail reads as a single column instead of
   the CTA hugging the left edge while the table is centered. */
.content > table.det ~ a.linkA{display:block;margin:.75rem auto;width:fit-content}
.content > table.det ~ section.similar .section-head{justify-content:center}
.content > table.det ~ .bread{text-align:center}

/* ================================================================
   product detail polish — zebra specs, accent heading, prouder price
   ================================================================ */

/* spec table: zebra rows + hover so 60+-row tables stay scannable.
   Skip the first row (the "Specificații" heading) so its border
   treatment isn't tinted. The :nth-child counts apply both to the
   default table layout (≤1099px) and to the grid layout above. */
table.det tr:not(:first-child):nth-child(even){
	background:rgba(46,66,113,.035);
}
table.det tr:not(:first-child):hover{
	background:rgba(46,66,113,.085);
}

/* spec table heading row: weightier, with a stronger underline so the
   "Specificații" label doesn't blend into the first data row */
table.det tr:first-child td{
	font-weight:700;
	color:var(--navy-2);
	border-bottom:2px solid var(--navy);
	padding-bottom:.55rem;
	letter-spacing:-.01em;
}

/* spec values can be long unbroken tokens (memory speeds like
   "4600(O.C)/4400(O.C)/4000(O.C.)/3866(O.C.)/..." with slashes but no
   spaces). Without this they extend past the cell on narrow columns. */
table.det td.td2,
table.det td.td1{
	overflow-wrap:anywhere;
	word-break:break-word;
}

/* similar section: subtle accent underline below the centered h2 so
   the section reads as deliberate instead of a stray heading */
section.similar .section-head{
	margin-bottom:1.5rem;
	flex-direction:column;
	align-items:center;
}
section.similar .section-head h2{
	position:relative;
	padding-bottom:.6rem;
	text-align:center;
}
section.similar .section-head h2::after{
	content:'';
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	width:64px;
	height:3px;
	background:var(--navy);
	border-radius:2px;
}

/* mobile main card: bump padding from 8px so the price chip and image
   actually breathe on phones */
@media screen and (max-width:600px){
	.content > .prodList .p1Big,
	.content > .prodList .card--big{padding:.85rem .9rem 1rem}
}

/* wide screens: the price chip on the main card gets a size bump so it
   reads as the primary numeric anchor on an 880px-wide card */
@media screen and (min-width:1100px){
	.content > .prodList .p1Big .chip-price.red,
	.content > .prodList .p1Big .red{
		font-size:1.65rem;
		padding:.7rem .85rem;
		min-width:90px;
	}
	.content > .prodList .p1Big .chip-price .p2,
	.content > .prodList .p1Big .red .p2{
		font-size:.78em;
	}
}