body{
	padding: 0px;
	margin: 0px;
	background: url(images/bg2.png) 50% 0px no-repeat; /* Asigură-te că imaginea bg.png există */
    background-position: center top; 
    background-attachment: fixed; /* Presupunând că vrei să păstrezi fundalul fixat */	
	background-color: black;
	font-family: Tahoma,Verdana,Segoe,sans-serif; /* Poți ajusta font-ul */
	cursor: url(https://sonymt2.ro/sv/img/cursor.gif), auto; /* Asigură-te că imaginea cursor.gif există */
	animation: fadeInUp 0.6s ease-out;	
}

body a{
cursor: url(https://sonymt2.ro/sv/img/cursor_click.gif), auto; /* Asigură-te că imaginea cursor_click.gif există */
}
body input{
cursor: url(https://sonymt2.ro/sv/img/cursor.gif), auto; /* Asigură-te că imaginea cursor.gif există */
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#logo {
	opacity: 0.8;
	filter: alpha(opacity=80); /* For IE8 and earlier */
	margin-top: 30px;
	margin-bottom: -130px; /* Păstrează marginea de jos setată de tine */

    /* --- ACTUALIZEAZĂ TRANZIȚIA pentru a include opacity, transform și box-shadow --- */
	/* Asigură-te că proprietățile 'transform' și 'box-shadow' sunt în lista de tranziție */
	-webkit-transition: opacity .15s ease-in-out, transform .3s ease-in-out, box-shadow .3s ease-in-out;
	-moz-transition: opacity .15s ease-in-out, transform .3s ease-in-out, box-shadow .3s ease-in-out;
	-ms-transition: opacity .15s ease-in-out, transform .3s ease-in-out, box-shadow .3s ease-in-out;
	-o-transition: opacity .15s ease-in-out, transform .3s ease-in-out, box-shadow .3s ease-in-out;
	transition: opacity .15s ease-in-out, transform .3s ease-in-out, box-shadow .3s ease-in-out; /* Adaugă transform și box-shadow */
	text-align: center; /* Centrează conținutul inline/inline-block din interior (inclusiv link-ul si imaginea) */
	

    /* Poți seta starea inițială implicită (transform: scale(1), box-shadow: none), dar acestea sunt de obicei implicite */
    /* transform: scale(1); */
    /* box-shadow: none; */
	animation: fadeInUp 0.6s ease-out;		
}

#logo:hover {
	opacity: 1.0;
	filter: alpha(opacity=100); /* For IE8 and earlier */

    /* --- Efectul la Hover: Mărire Ușoară + Umbră Subtilă --- */
    transform: scale(1.05); /* Mărește logo-ul cu 5% */

    /* Asigură-te că nu există alte transformări nedorite din alte reguli, de ex. */
    /* transform: scale(1.05) translateY(0); */
}

/* Site Structure / Layout (păstrat din CSS-ul tău) */

.tablebg {
    background:
        url(../images/new/corner_top_left.png) left top no-repeat,
        url(../images/new/corner_top_right.png) right top no-repeat,
        url(../images/new/corner_bot_left.png) left bottom no-repeat,
        url(../images/new/corner_bot_right.png) right bottom no-repeat,

        url(../images/new/margin_left.png) left repeat-y,
        url(../images/new/margin_right.png) right repeat-y,
        url(../images/new/margin_top.png) top repeat-x,
        url(../images/new/margin_bot.png) bottom repeat-x,
        url(../images/new/content.png) repeat;
	padding: 20px;
	width: auto;

	/* --- AJUSTEAZĂ ACEASTĂ VALOARE PENTRU A FACE CHENARUL MAI LAT --- */
	max-width: 950px; /* <-- Mărește valoarea (ex: 800px, 900px, 1000px etc.) */
	/* Poți încerca și max-width: 90%; dacă vrei să se ajusteze la lățimea ecranului, dar cu o limită procentuală */

	margin: 0 auto; /* Păstrează asta pentru a-l centra pe orizontală */
	box-sizing: border-box;
}
#page-top{
	background-image: url("images/top.png"); /* Asigură-te că imaginea top.png există */
	width: 1030px;
	height: 57px;
	margin-top: 160px; /* Ajustează această margine dacă vrei să micșorezi spațiul de deasupra #page-top */
		animation: fadeInUp 0.6s ease-out;	
}

#page-mid{
	background-image: url("images/mid.png"); /* Asigură-te că imaginea mid.png există */
	width: 1030px;
		animation: fadeInUp 0.6s ease-out;	
}

#page-bot{
	background-image: url("images/bottom.png"); /* Asigură-te că imaginea bottom.png există */
	width: 1030px;
	min-height: 57px;
		animation: fadeInUp 0.6s ease-out;	
}

/* Ajustări pentru ecrane mai mici (Mobile Responsive) */


/* --- NEW FOOTER STYLES (based on your style.css) --- */

/* Container pentru footer */
/* Container pentru footer - păstrat */
.site-footer {
	padding: 20px 10px;
	text-align: center;
	margin-top: 30px;
	box-sizing: border-box;
	width: 100%;
    align-self: auto; /* Aceasta este valoarea implicită și respectă align-items al părintelui. N-ar trebui să pui aici altceva gen flex-start. */
    text-align: center; /* Pentru a centra conținutul DIN interior (imaginea) */
		animation: fadeInUp 0.6s ease-out;	
}

/* --- Stiluri pentru imaginea din footer cu NOU Efect de Hover --- */
.site-footer img {
	max-width: 100%;
	height: auto;
	opacity: 0.7; /* Păstrează opacitatea inițială */


    /* Adaugă/Actualizează Tranziția pentru noile efecte */
	transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Tranziție pentru opacitate, mărire (transform) și umbră (box-shadow) */

    /* Definește starea inițială pentru noile efecte (util pentru a avea de unde porni tranziția) */
    transform: scale(1); /* Pornește de la mărimea normală (100%) */
    box-shadow: none; /* Pornește fără umbră */

}

.site-footer img:hover {
	opacity: 1; /* Devine complet vizibilă la hover */

    /* --- Noile Efecte de Hover --- */
    transform: scale(1.03); /* Se mărește cu 3% la hover */
    
    /* Ajustează culoarea și mărimea umbrei (0 0 20px = fără offset, rază blur 20px) */

    /* Nu este nevoie să repeți cursor: pointer; aici dacă l-ai setat mai sus */
}

/* Stiluri pentru containerul secțiunii de căutare */

.item-search-form {
    flex: 1; /* Allow to grow/shrink */
    min-width: 280px; /* Minimum width before wrapping */
    border: 1px solid #3a312a;
    border-radius: 5px;
    padding: 20px; /* More padding */
    background-color: #2e2720;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Stiluri pentru Titlul H3 al blocului combinat */
.item-search-form h3 {
    color: #ffcc66;
    margin-top: 0;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    background-color: rgba(46, 39, 32, 0.7); /* Ușor mai puțin transparent */
    padding: 10px 15px;
    padding-bottom: 8px;

    border-bottom: 1px dotted rgba(160, 138, 106, 0.5);
    border-top: 1px solid rgba(160, 138, 106, 0.5);
    border-radius: 4px;

    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;

    /* ADĂUGAT: Umbră la blocul titlului pentru proeminență */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}


/* Stiluri pentru iconița din titlu */
.item-search-form h3 .fas {
    margin-right: 8px;
    color: #a08a6a; /* Culoare iconiță titlu */
}

/* Stiluri pentru formularul propriu-zis */
.item-search-form form {
    display: flex; /* Aranjează input-ul și butonul pe o singură linie */
    gap: 10px; /* Spațiu între input și buton */
    /* Ajustează align-items dacă vrei ca input-ul și butonul să aibă înălțimi diferite */
    align-items: stretch; /* Face ca input-ul și butonul să aibă aceeași înălțime */
}

.item-search-form input[type="text"] {
    flex-grow: 1; /* Face input-ul să ocupe tot spațiul disponibil rămas */
    padding: 8px 10px;
    border: 1px solid #d4c0a0; /* Bordură, ajustează culoarea */
    border-radius: 4px;
	font-size: 0.9em; /* Mărime mică */
	text-align: left; /* Aliniază la stânga */		
	color: #a0988a; /* Culoare text generală */
	background-color: #221c17; /* Fundal ușor diferit */
	border: 1px solid #3a312a; /* Bordură subtilă */
    /* Stiluri pentru placeholder (textul din interior înainte de scriere) */
    &::placeholder { /* S-ar putea să necesite prefixe vendor (-webkit-input-placeholder etc.) pentru compatibilitate mai bună */
	opacity: 1; /* Asigură vizibilitatea placeholder-ului */	
    }
   }



.item-search-form button[type="submit"] {
    display: flex; /* Păstrează display: flex; pentru a centra iconița și textul în interior */
    align-items: center; /* Păstrează pentru centrarea verticală a conținutului */
    justify-content: center; /* Păstrează pentru centrarea orizontală a conținutului */
    flex-shrink: 0; /* Asigură că butonul nu se micșorează în Flexbox */	
    background: linear-gradient(to bottom, #4a4035, #3a312a); /* Fundal gradient mai închis */
    color: #ffebcd; /* Text mai deschis inițial */
    padding: 10px 12px; /* Padding ajustat */
    text-align: center; /* Poate fi necesar dacă nu folosești justify-content (dar flexbox e mai bun) */
    text-decoration: none; /* Fără subliniere */
    border-radius: 20px; /* Formă tip "pill" sau colțuri foarte rotunjite */
    border: 1px solid #a08a6a; /* Bordură subtilă */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Umbră */
    transition: all 0.3s ease; /* Tranziție mai lentă la hover/active */
    font-weight: normal; /* Font normal */
    font-size: 0.9em; /* Mărime font puțin mai mică */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* Stiluri vizuale de la .category-button-new:hover */
.item-search-form button[type="submit"]:hover {
    /* --- Proprietăți Vizuale la Hover (pe care le poți copia la .item-button:hover) --- */
	background: linear-gradient(to bottom, #ffcc66, #d4af37); /* Gradient de fundal la hover */
	color: #28221c; /* Culoarea textului la hover */
	border-color: #fff5e7; /* Culoarea bordurii la hover */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Umbra la hover */
	text-shadow: none; /* Elimină umbra textului la hover */
    /* Opțional: adaugă și transform: translateY(-2px); pentru un mic efect de ridicare */
    /* --- Sfârșit Proprietăți Vizuale la Hover --- */
}

/* Stiluri pentru iconița din buton */
.item-search-form button[type="submit"] .fas {
    margin-right: 5px; /* Spațiu între iconiță și textul butonului (dacă ai text) */
    /* Dacă butonul are DOAR iconiță, elimină margin-right și ajustează padding-ul butonului */
    color: #ffcc66; /* Culoare iconiță titlu */	
}

/* --- Stiluri pentru Blocurile Metodelor de Plată/Donație --- */
.payment-method-block {
    /* Stiluri de bloc similare cu panel-urile existente */
    margin-top: 20px; /* Spațiu deasupra blocului */
    margin-bottom: 20px; /* Spațiu sub bloc */
    border: 1px solid #a08a6a; /* Bordură */
    border-radius: 8px; /* Colțuri rotunjite */
    padding: 20px; /* Padding interior pentru întregul bloc */
    background: linear-gradient(to bottom, #2c251e, #1e1813); /* Fundal gradient similar */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6); /* Umbră exterioară */
    box-sizing: border-box;
    overflow: hidden;
}

/* Stil pentru titlurile H4 din interiorul blocurilor */
.payment-method-block h4 {
    color: #ffcc66; /* Culoare accent Albastru */
    border-bottom: 1px solid #555; /* Linie subtilă sub titlu */
    padding-bottom: 10px;
    margin-top: 0; /* Fara margine deasupra primului element din bloc */
    margin-bottom: 15px; /* Spațiu sub titlu */
    font-weight: bold;
    font-size: 1.3em;
}

/* Stil pentru paragrafe în blocuri */
.payment-method-block p {
    color: #eee; /* Text deschis */
    margin-bottom: 15px; /* Spațiu sub paragrafe */
    line-height: 1.6;
}

/* Stil pentru liste în blocuri */
.payment-method-block ul {
    padding-left: 25px; /* Indentație mai mare pentru liste */
    margin-top: 10px;
    margin-bottom: 15px;
    list-style: disc; /* Bullet points */
    color: #eee; /* Culoarea textului listei */
}

.payment-method-block li {
    margin-bottom: 10px; /* Spațiu între elementele listei */
    line-height: 1.5;
}

/* Stil pentru textul strong (important) în blocuri */
.payment-method-block strong {
    color: #a08a6a; /* Culoare accent Verde pentru textul important */
    font-weight: bold;
}

/* Stil pentru blocurile de cod inline (IBAN, coduri, contacte) */
.payment-method-block code {
	font-size: 0.98em;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;	
	color: #ffcc66; /* Culoare text generală */
	margin-bottom: 15px; /* Spațiu redus sub breadcrumb */
	background-color: #221c17; /* Fundal ușor diferit */
	border: 1px solid #3a312a; /* Bordură subtilă */
	border-radius: 4px;
	white-space: nowrap; /* Nu rupe rândul pentru cod */
	overflow-x: auto; /* Adaugă scroll orizontal dacă e prea lung */
	display: inline-block; /* Permite padding și margine */
	vertical-align: middle; /* Aliniază pe verticală */ 
    padding: 4px 7px;	
}

/* Stil pentru iconițe (Font Awesome) în blocuri */
.payment-method-block .fas,
.payment-method-block .fab { /* Include si brand icons */
    margin-right: 10px; /* Spațiu între iconiță și text */
    color: #a08a6a; /* Culoare accent Albastru (poți folosi si #2ecc71 verde dacă vrei alta culoare accent) */
    font-size: 1.1em; /* Mărime iconiță puțin mai mare */
}

/* Stil specific pentru link-urile din blocuri */
.payment-method-block a {
    color: #a08a6a; /* Culoare link similară cu accentul */
    text-decoration: none;
    transition: color 0.2s ease;
}

.payment-method-block a:hover {
    color: #ffeb3b; /* Culoare mai închisă la hover */
    text-decoration: underline;
}

/* Stil pentru textul final de mulțumire (dacă e cazul) */
.panel-body > p:last-child strong {
    color: #2ecc71; /* Text de mulțumire cu accent Verde */
}

/* Stiluri pentru separator (hr) dacă îl folosești */
.item-search-form + .panel-divider {
     margin-top: 20px; /* Spațiu deasupra separatorului dacă e plasat după formular */
}

/* --- END: New Hover Effect on Footer Image --- */


/* Ajustări pentru ecrane mai mici (Mobile Responsive) */

/* Media Query pentru lățimi sub 768px */
@media (max-width: 768px) {
    .site-footer {
        padding: 15px 10px; /* Redu puțin padding-ul pe verticală */
        margin-top: 20px; /* Redu spațiul de deasupra */
    }

    .site-footer img {
        max-width: 90%; /* Poți reduce lățimea maximă a imaginii pe tablete/telefoane */
    }
}

/* Media Query pentru lățimi sub 400px */
@media (max-width: 400px) {
    .site-footer {
         padding: 10px 5px; /* Redu padding-ul și mai mult */
         margin-top: 15px;
    }

     .site-footer img {
         max-width: 80%; /* Redu lățimea maximă a imaginii pe ecrane mici */
     }
}

/* --- END NEW FOOTER STYLES --- */

#content{
	width: 900px; /* Asigură-te că această lățime este compatibilă cu panelul itemshop */
		animation: fadeInUp 0.6s ease-out;	
}

/* General Element Styles (păstrat din CSS-ul tău) */
small{
	color: #ffb15e; /* Culoarea textului small */
	font-size: 13px;
}

a{
	font-size: 13px;
	text-decoration: none;
	color: #ff4200; /* Culoarea link-urilor generale */
}

a:hover{
	color: #ff2400; /* Culoarea link-urilor generale la hover */
}

/* Old Itemshop Specific Styles (ELIMINATE - înlocuite de noul design)
#category, #category a, #category a:hover, #item_box, .icon, .name, .main_info, #info_button, #info_button:hover, #info_image, #info_image img, #info_text, #info_items, #info_name, #info_val, .legend_topic, .tablebg, .tablebg2
*/

/* Page Specific Title (păstrat din CSS-ul tău) */
/* Noul Stil pentru Titlul Categoriei (#page_name) */
#page_name {
 /* Eliminăm stilurile vechi bazate pe imagine de fundal și poziționare absolută */
 position: static; /* Resetează poziționarea */
 top: auto; /* Resetează top */
 left: auto; /* Resetează left */
 background-image: none; /* Elimină imaginea de fundal */
 width: auto; /* Lățime automată */
 height: auto; /* Înălțime automată */
 line-height: normal; /* Line height normal */
 padding: 0; /* Elimină padding-ul vechi */

 /* Noul stil de titlu */
 font-size: 1.6em; /* Mărime font mai mare */
 color: #ffcc66; /* Culoare accent */
 text-align: center; /* Centrează textul */
 margin-top: 0; /* Fără spațiu de deasupra */
 margin-bottom: 20px; /* Spațiu sub titlu, înainte de grila de iteme */
 font-family: 'Arial', sans-serif; /* Folosește font-ul panelului, sau un font specific temei */
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Umbră text */
}

/* Social Buttons (păstrat din CSS-ul tău) */
#social_buttons
{
	padding-top: 255px; /* Ajustează acest padding dacă vrei să schimbi spațiul deasupra butoanelor sociale */
	padding-left: 0px;
	width: 940px;
}

#youtube_button /* Asigură-te că imaginile youtube.png și youtube_hover.png există */
{
	background-image: url("images/youtube.png");
	background-position: bottom;
	width: 80px;
	height: 64px;
	float: left;
	-webkit-transition: background-image 0.2s ease-in-out;
	-moz-transition: background-image 0.2s ease-in-out;
	-ms-transition: background-image 0.2s ease-in-out;
	-o-transition: background-image 0.2s ease-in-out;
	transition: background-image 0.2s ease-in-out;
}

#youtube_button:hover
{
	background-image: url("images/youtube_hover.png");
}

#facebook_button /* Asigură-te că imaginile facebook.png și facebook_hover.png există */
{
	background-image: url("images/facebook.png");
	width: 70px;
	height: 56px;
	float: right;
	background-position: bottom;
	margin-top: 10px;
	-webkit-transition: background-image 0.2s ease-in-out;
	-moz-transition: background-image 0.2s ease-in-out;
	-ms-transition: background-image 0.2s ease-in-out;
	-o-transition: background-image 0.2s ease-in-out;
	transition: background-image 0.2s ease-in-out;
}

#facebook_button:hover
{
	background-image: url("images/facebook_hover.png");
}


/* --- START: NEW IMPROVED ITEMSHOP PANEL STYLES --- */

/* Stiluri generale pentru container (Panelul îmbunătățit) */
.itemshop-panel {
 max-width: 600px; /* Lățime maximă redusă considerabil */
 margin: 0 auto; /* Centrare orizontală, spațiu 0 sus/jos */
 background: linear-gradient(to bottom, #2c251e, #1e1813);
 border: 1px solid #a08a6a; /* Bordură mai subțire */
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6); /* Umbră ajustată */
 font-family: 'Arial', sans-serif; /* Folosește un font specific site-ului tău */
 color: #e0d8cc;
 position: relative;
 box-sizing: border-box;
}

/* Adaugă un element pseudo pentru un efect de bordură interioară */
.itemshop-panel::before {
 content: '';
 position: absolute;
 top: 5px; /* Ajustează poziția */
 left: 5px; /* Ajustează poziția */
 right: 5px; /* Ajustează poziția */
 bottom: 5px; /* Ajustează poziția */
 border: 1px solid rgba(255, 204, 102, 0.2); /* Bordură interioară subțire, semi-transparentă */
 border-radius: 5px;
 pointer-events: none; /* Asigură că nu interferează cu click-urile */
}


/* Stiluri pentru antetul panelului */
.panel-header {
    background-color: #3a312a;
    color: #ffcc66;
    padding: 15px 20px; /* Ajustează padding-ul dacă e necesar */
    /* text-align: center; */ /* Eliminat dacă folosești flexbox header */
	border-bottom: 1px solid #4a4035; /* Asigură-te că această linie există și e corectă */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    /* Adaugă display: flex; justify-content: center; align-items: center; dacă vrei să centrezi conținutul h2/alte elemente cu flexbox */
    display: flex; /* Activează Flexbox pentru a centra H2 */
    justify-content: center; /* Centrează conținutul (H2) pe orizontală */
    align-items: center; /* Centrează conținutul (H2) pe verticală */
	transition: background 0.3s ease, box-shadow 0.3s ease, border-bottom-color 0.3s ease;	
}
.panel-header h2 {
    margin: 0; /* Elimină marginile implicite ale H2 */
    font-size: 1.3em; /* Mărime font H2 */
    color: inherit; /* Moștenește culoarea din .panel-header */
    font-weight: bold;
    /* text-align: center; */ /* Nu mai este necesar dacă părintele (.panel-header) folosește justify-content: center; */
}

.category-buttons a {
    /* Existing styles */
    display: flex; /* Folosește Flexbox pentru a alinia iconița și textul */
    align-items: center; /* Centrează vertical iconița și textul în buton */
    justify-content: center; /* Centrează conținutul (iconiță + text) în buton */
    padding: 12px 15px; /* Poți ajusta padding-ul dacă iconița necesită mai mult spațiu */
    /* Existing border, background, etc. */
}

/* Stiluri pentru corpul panelului */
.panel-body {
 padding: 15px; /* Padding interior redus */
 box-sizing: border-box;
	overflow: hidden; /* <-- ADĂUGĂ DIN NOU ACEASTĂ LINIE */
}

/* Stiluri pentru secțiunea de informații */
.info-block {
	margin-bottom: 20px; /* Poți ajusta și aici */
    text-align: left; /* Aliniere standard la stânga */
    padding: 15px 20px; /* Exemplu: 15px sus/jos, 20px stânga/dreapta */
    flex: 1; /* Allow to grow/shrink */
    min-width: 280px; /* Minimum width before wrapping */
    border: 1px solid #3a312a;
    border-radius: 5px;
    background-color: #2e2720;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);	
	
}

/* Stiluri pentru Blocul de Informații Importante - Titlu (Îmbunătățit - Mai Pronunțat) */
.info-block h3 {
    color: #ffcc66;
    margin-top: 0;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    background-color: rgba(46, 39, 32, 0.7); /* Ușor mai puțin transparent */
    padding: 10px 15px;
    padding-bottom: 8px;

    border-bottom: 1px dotted rgba(160, 138, 106, 0.5);
    border-top: 1px solid rgba(160, 138, 106, 0.5);
    border-radius: 4px;

    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;

    /* ADĂUGAT: Umbră la blocul titlului pentru proeminență */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.info-block h3 i {
    margin-right: 8px;
    color: #a08a6a;
}

.info-block p {
	line-height: 1.7; /* Spațiere mai mare între rânduri */
	font-size: 0.95em;
	margin-bottom: 15px; /* Adaugă spațiu sub fiecare paragraf (ajustează valoarea) */
    margin-top: 0; /* Elimină marginea de sus implicită dacă nu ai nevoie de ea */
    line-height: 1.6; /* Mărește spațiul dintre rânduri (1.6 - 1.8 sunt valori comune pentru lizibilitate) */
    color: inherit; /* Moștenește culoarea de la părinte (.main-panel-wrapper) */	
}


/* Elimină marginea de jos de la ultimul paragraf pentru a nu lăsa spațiu suplimentar la sfârșitul blocului */
.info-block p:last-child {
    margin-bottom: 0;
}nt-size: 0.95em;
}

/* Stiluri pentru lista de contact */
.contact-list {
 list-style: none;
 padding: 0;
 margin: 20px 0 0 0; /* Spațiu deasupra listei de contact */
}

.contact-list li {
 display: flex;
 align-items: center;
 margin-bottom: 10px; /* Spațiu între itemele listei */
 background-color: #332c25; /* Fundal ușor mai închis */
 padding: 10px 15px; /* Padding ajustat */
 border-radius: 5px;
 border: 1px solid #4a4035;
 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); /* Umbră interioară subtilă */
}

/* Stil pentru iconițele din lista de contact */
.contact-list li i {
 color: #ffcc66;
 margin-right: 12px; /* Spațiu ajustat */
 font-size: 1.3em; /* Mărime iconiță ajustată */
 width: 25px; /* Lățime fixă pentru iconițe */
 text-align: center;
}
/* Stil pentru imaginile din lista de contact (dacă nu folosești Font Awesome) */
.contact-list li img {
 width: 25px; /* Ajustează mărimea imaginilor */
 height: auto;
 margin-right: 12px;
}


.contact-list li span {
 color: #e0d8cc;
 font-size: 1em;
 flex-grow: 1;
}

.contact-list li small {
color: #a0988a;
font-size: 0.85em;
margin-left: 10px;
}

/* Stiluri pentru linia separatoare */
.panel-divider {
 border: none;
 height: 2px; /* Linie mai groasă */
 background: linear-gradient(to right, transparent, #ffcc66, transparent); /* Gradient auriu mai pronunțat */
 margin: 20px 0; /* Poți ajusta și aici */
 width: 100%;
}

.panel-divider2 {
    border: none; /* Elimină bordurile implicite ale elementului HR */
    /* background: none; */ /* Elimină fundalul gradient */
    /* height: auto; */ /* Elimină înălțimea fixă, înălțimea va fi dată de bordură și margin */

    /* NOU STIL: Bordură punctată */
    /* Adăugăm o bordură punctată la bază. Ajustează grosimea (1px/2px) și culoarea dacă vrei. */
	border-bottom: 1px solid #3a312a; /* Separator line below primary section */
    /*border-bottom: 1px dotted rgba(160, 138, 106, 0.7);*/ /* Linie punctată, culoare din temă, puțin mai vizibilă */
    /* Opțional, o culoare mai accentuată: */
    /* border-bottom: 1px dotted #ffcc66; */

    height: 1px; /* Dăm o înălțime mică elementului în sine, chiar dacă bordura este 1px, pentru a asigura că ocupă spațiu și că marginea se aplică corect dedesubt */

    margin: 20px 0; /* Spațiu deasupra și dedesubtul liniei */
    width: 100%; /* Asigură că se întinde pe toată lățimea */
    box-sizing: border-box; /* Asigură că padding/border nu adaugă la lățime */
}

/* Stiluri pentru secțiunea de categorii */
.category-nav {
 margin-bottom: 20px; /* Spațiu sub secțiunea categorii */
}

/* Stiluri pentru secțiunea de categorii - Titlu (Îmbunătățit - Mai Pronunțat) */
.category-nav h3 {
    color: #ffcc66;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    background-color: rgba(46, 39, 32, 0.7); /* Ușor mai puțin transparent */
    padding: 10px 15px;
    padding-bottom: 8px;

    border-bottom: 1px dotted rgba(160, 138, 106, 0.5);
    border-top: 1px solid rgba(160, 138, 106, 0.5);
    border-radius: 4px;

    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;

    /* ADĂUGAT: Umbră la blocul titlului pentru proeminență */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.category-nav h3 i {
    margin-right: 8px;
    color: #a08a6a;
}

.category-buttons a {
 display: block;
 /* Noul fundal: culoare solidă sau un gradient foarte subtil */
 background-color: #3a312a;
 /* background: linear-gradient(to bottom, #3a312a, #2e2720); */ /* Opțional: un gradient discret */

 color: #ffcc66; /* Culoarea textului */
 padding: 12px 15px; /* Padding */
 text-align: center;
 text-decoration: none;
 border-radius: 4px; /* Colțuri ușor mai puțin rotunjite */

 /* Bordură mai complexă */
 border: 1px solid #a08a6a; /* Bordură principală */
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.1), /* Umbră interioară pentru efect de lumină */
  0 1px 3px rgba(0, 0, 0, 0.4); /* Umbră exterioară subtilă */


 transition: all 0.2s ease-in-out; /* Tranziție mai rapidă */
 font-weight: bold;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
 font-size: 1em; /* Mărime font */
}

.category-buttons a:hover {
 /* Starea la hover */
 background-color: #ffcc66; /* Schimbă fundalul la culoarea accent */
 color: #1a1a1a; /* Text închis la hover */
 border-color: #ffebcd; /* Bordură mai deschisă la hover */
 box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.3), /* Umbră interioară ajustată */
  0 2px 5px rgba(0, 0, 0, 0.6); /* Umbră exterioară mai vizibilă */
 transform: translateY(-1px); /* Efect subtil de ridicare */
 text-shadow: none; /* Elimină umbra textului la hover */
}
}

.additional-links {
 margin-top: 20px; /* Spațiu deasupra secțiunii de link-uri (păstrat) */
}

.additional-links ul {
 list-style: none;
 padding: 0;
 margin: 0;
 border: 1px solid #4a4035; /* Adaugă o bordură în jurul întregii liste */
 border-radius: 5px;
 overflow: hidden; /* Ascunde ce depășește bordura rotunjită */
 background-color: #332c25; /* Fundal general pentru listă */
 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); /* Umbră interioară subtilă */
}

.additional-links li {
 display: flex;
 align-items: center;
 /* margin-bottom: 10px; ELIMINĂ margin-bottom de aici */
 padding: 10px 15px; /* Padding în interiorul fiecărui element */
 border-bottom: 1px solid #4a4035; /* Linie separatoare între elemente */
 transition: background-color 0.2s ease; /* Tranziție la hover */
}

/* Elimină bordura de jos de la ultimul element */
.additional-links li:last-child {
 border-bottom: none;
}

.additional-links li:hover {
 background-color: #4a4035; /* Schimbă fundalul la hover */
}

/* Stiluri pentru iconițe (păstrate sau ajustate minor) */
.additional-links li i {
 color: #ffcc66;
 margin-right: 10px;
 font-size: 1.1em;
 width: 20px;
 text-align: center;
}
/* Stil pentru imaginile iconițe (dacă nu folosești Font Awesome) */
.additional-links li img {
 width: 20px;
 height: auto;
 margin-right: 10px;
}

/* Stiluri pentru link (păstrate) */
.additional-links li a {
 color: #e0d8cc;
 text-decoration: none;
 font-size: 1em;
 flex-grow: 1; /* Permite link-ului să ocupe spațiul rămas */
 transition: color 0.3s ease;
}

.additional-links li a:hover {
 color: #ffcc66;
 text-decoration: underline;
}

/* Container pentru Grila de Iteme */
.items-grid {
 display: grid;
 /* Creează coloane flexibile: minim 180px, se extind egal (1fr) */
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 20px; /* Spațiul dintre iteme (și pe orizontală, și pe verticală) */
 padding: 25px; /* Spațiu în jurul grilei */
 justify-content: center; /* Centrează itemele în grilă dacă nu umplu toată lățimea */
 align-items: start; /* Aliniază itemele la începutul celulei lor */
 margin-top: 20px; /* Spațiu deasupra grilei */
}

.item-grid-layout {
    display: grid; /* Activează modul grid */
    /* Poți defini coloane explicite aici, de exemplu, pentru o coloană stânga și una dreapta */
    /* grid-template-columns: 1fr 1fr; */ /* Două coloane de lățime egală */
    /* grid-template-columns: 1fr 300px; */ /* O coloană flexibilă și o coloană de 300px */
    gap: 20px; /* Spațiu între coloane */
    /* Alte stiluri de padding, margine etc. */
    width: 100%;
    box-sizing: border-box;
}

.item-list-container {
    /* Adaugă spațiu în interiorul acestui container, în jurul grilei de iteme */
    padding: 10px 0; /* Exemplu: 10px padding sus/jos, 0 stânga/dreapta */
    /* Adaugă spațiu în afara acestui container, între el și alte elemente */
    margin-top: 20px; /* Exemplu: Spațiu deasupra listei de iteme */
    /* Alte stiluri vizuale pentru zona listei de iteme */
    /* background-color: #332b23; */ /* Exemplu: Un fundal diferit pentru zona listei */
    /* border: 1px solid #a08a6a; */ /* Exemplu: O bordură în jurul zonei listei */
    /* border-radius: 8px; */ /* Exemplu: Colțuri rotunjite */
    /* overflow: hidden; */ /* Poate fi util dacă elementele din interior ies din container */

    width: 100%; /* Asigură că ocupă lățimea disponibilă */
    box-sizing: border-box; /* Include padding-ul și bordura în lățimea elementului */
}

/* Stiluri pentru fiecare Item Box */
/* Stiluri pentru fiecare Item Box */
.item-box {
	background-color: #2e2720;
	border: 1px solid #4a4035;
	border-radius: 8px;
	padding: 25px;
	text-align: center; /* Centrează textul inline, dar align-items centrează blocuri în flex */

	/* --- Proprietăți Flexbox pentru a aranja copiii pe coloană --- */
	display: flex;
	flex-direction: column; /* Copiii (nume, icon, info, buton) sunt aranjați pe verticală */

	/* --- Centrează copiii Flexbox PE ORIZONTALĂ (axa transversală în coloană) --- */
	align-items: center; /* ACEASTĂ PROPRIETATE CENTREAZĂ BUTONUL <a> PE ORIZONTALĂ ÎN ITEM-BOX */

	justify-content: space-between; /* Spațiu între elemente pe verticală (dacă vrei asta) */
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* --- Efectul de Hover pe .item-box --- */
/* --- Efectul de Hover pe .item-box (CORECTAT) --- */

/* Stiluri pentru Numele Item-ului */
.item-name {
	font-size: 0.95em;
	color: #ffcc66;
	margin-bottom: 8px;
	font-weight: bold;
	min-height: 1.1em;
 /* Adaugă overflow-wrap pentru nume lungi fără spații */
 overflow-wrap: break-word;
 word-wrap: break-word;
 hyphens: auto;
}

/* Stiluri pentru containerul Iconiței Item-ului */
.item-icon {
 margin-bottom: 10px; /* Spațiu sub iconiță */
 background-color: #3a312a; /* Fundal ușor diferit pentru zona iconiței */
 padding: 5px;
 border-radius: 4px;
 border: 1px dashed #4a4035; /* Bordură punctată */
 display: flex; /* Folosim flexbox pentru a centra imaginea */
 justify-content: center;
 align-items: center;
 min-height: 80px; /* Înălțime minimă pentru zonă iconiță */
}

.item-iconx {
	background-image: url("images/item_box.png");
	width: 138px;
	height: 200px;
	display: inline-block;
	margin-bottom: 27px;
	margin-left: 17px;
	margin-right: 15px;
}

.item-icon img {
 max-width: 100%; /* Asigură că imaginea nu depășește containerul */
 height: auto; /* Păstrează aspect ratio */
 max-height: 90px; /* Limitează înălțimea imaginii */
 display: block; /* Elimină spațiul de sub imagine */
}

.item-iconx img {
	padding-top: 3px;
}

/* Stiluri pentru Informațiile Item-ului (Preț) */
.item-info {
 font-size: 0.9em;
 color: #e0d8cc;
 margin-bottom: 15px; /* Spațiu înainte de buton */
}

.item-info b {
 color: #ffcc66; /* Culoare accent pentru textul bold (ex: "Pret:") */
}

/* --- START: Updated Item Button Styles (Similar to New Category Buttons) --- */

.item-button { /* Aplicăm stilurile la clasa .item-button */
    /* Proprietăți de Layout pentru centrarea conținutului INTERN (iconiță + text) */
    display: flex; /* Păstrează display: flex; pentru a centra iconița și textul în interior */
    align-items: center; /* Păstrează pentru centrarea verticală a conținutului */
    justify-content: center; /* Păstrează pentru centrarea orizontală a conținutului */
    flex-shrink: 0; /* Asigură că butonul nu se micșorează în Flexbox */

    /* --- Proprietăți Vizuale (Copiate de la .category-buttons li a.category-button-new) --- */
    background: linear-gradient(to bottom, #4a4035, #3a312a); /* Fundal gradient mai închis */
    color: #ffebcd; /* Text mai deschis inițial */
    padding: 10px 12px; /* Padding ajustat */
    text-align: center; /* Poate fi necesar dacă nu folosești justify-content (dar flexbox e mai bun) */
    text-decoration: none; /* Fără subliniere */
    border-radius: 20px; /* Formă tip "pill" sau colțuri foarte rotunjite */
    border: 1px solid #a08a6a; /* Bordură subtilă */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Umbră */
    transition: all 0.3s ease; /* Tranziție mai lentă la hover/active */
    font-weight: normal; /* Font normal */
    font-size: 0.9em; /* Mărime font puțin mai mică */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    /* Proprietățile position: relative; și overflow: hidden; sunt specifice layout-ului butoanelor de categorii și probabil nu sunt necesare aici. */
    /* position: relative; */
    /* overflow: hidden; */
    /* --- Sfârșit Proprietăți Vizuale --- */

    /* Asigură ca butonul să ocupe lățimea necesară pentru conținut, dar nu mai mult */
    width: auto;
    /* Poți seta o lățime minimă dacă vrei ca toate butoanele să aibă o anumită lățime */
    /* min-width: 120px; */
}

/* Stiluri pentru iconița din interiorul butonului .item-button */
.item-button i { /* Adaptăm selectorul pentru iconița din .item-button */
    margin-right: 6px; /* Spațiu între iconiță și text */
    color: #ffcc66; /* Culoarea iconiței */
    transition: color 0.3s ease;
}


/* Stiluri pentru Butonul .item-button la HOVER */
.item-button:hover { /* Aplicăm stilurile la :hover pentru .item-button */
    /* --- Proprietăți Vizuale la Hover (Copiate de la .category-buttons li a.category-button-new:hover) --- */
    background: linear-gradient(to bottom, #ffcc66, #d4af37); /* Gradient galben la hover */
    color: #1a1a1a; /* Text închis la hover */
    border-color: #fff5e7; /* Bordură deschisă la hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px); /* Ușoară ridicare */
    text-shadow: none; /* Fără umbră text la hover */
    /* --- Sfârșit Proprietăți Vizuale la Hover --- */
}

/* Stiluri pentru iconița din .item-button la HOVER */
.item-button:hover i { /* Adaptăm selectorul pentru iconița din .item-button:hover */
    color: #28221c; /* Culoare iconiță închisă la hover */
}

/* Container pentru conținutul antetului */
.header-content {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%; /* Ocupă toată lățimea header-ului */
 flex-wrap: wrap; /* Permite elementelor să treacă pe rândul următor pe ecrane mici */
}

/* --- Stiluri Actualizate pentru Antetul Panel-ului (Consistent cu Stilul Simplu și Curat) --- */
.panel-header {
 /* Fundal: Folosește același fundal ca și panel-ul principal (simplu și curat) */
 background-color: #2e2720; /* Culoare solidă de la panel/item box */
    /* Sau gradientul subtil dacă l-ai folosit pe panel: background: linear-gradient(to bottom, #302922, #2e2720); */

 color: #ffcc66; /* Păstrează culoarea textului (auriu) */
 padding: 15px 20px; /* Păstrează padding-ul */

 /* Bordură de Jos: Folosește culoarea și stilul bordurii de pe panel/item box, aplicată doar jos */
 border-bottom: 1px solid #4a4035; /* Consistență cu bordura .main-panel-wrapper / .item-box */
    /* Această bordură separă vizual antetul de conținutul panel-ului */

 display: flex;
 justify-content: center; /* Centrarea conținutului (text/titlu) pe orizontală */
 align-items: center; /* Centrarea conținutului pe verticală */

 /* Colțuri Rotunjite: Păstrează rotunjirea doar sus, pentru a se potrivi cu partea de sus a panel-ului principal */
 border-radius: 8px 8px 0 0; /* Rotunjire la colțurile de sus (stânga și dreapta) */
    /* Ajustează 8px dacă ai schimbat valoarea border-radius pe .main-panel-wrapper */

 position: relative;
 overflow: hidden;

 /* Umbră: Adaugă o umbră subtilă sub antet */
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* O umbră discretă sub antet */
    /* Sau o umbră similară cu cea de pe panel/item box, dar mai puțin răspândită: box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */


 /* Tranziție: Păstrează proprietățile de tranziție dacă ai efecte hover pe antet */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* --- END: Stiluri Actualizate Panel Header --- */

/* Stiluri pentru Titlul H2 din antet (păstrate) */
.panel-header h2 {
    margin: 0;
    font-size: 2.4em;
    color: #d4af37;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 #5a4d40,
                 -1px -1px 0 #ffebcd,
                 1px 1px 5px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    /* Opțional: adaugă tranziție și la H2 dacă vrei ca și textul să aibă un efect la hover pe părinte */
    /* transition: color 0.3s ease, text-shadow 0.3s ease; */
}

/* ADĂUGAT: Stiluri pentru efectul de hover pe antetul panelului */
/* --- Stiluri Actualizate pentru Antetul Panel-ului la HOVER (Stil Simplu și Curat) --- */
.panel-header:hover {
	/* Fundal: O schimbare subtilă a fundalului la hover - o nuanță puțin diferită */
    /* Alege o culoare/gradient care se potrivește temei, puțin diferită de fundalul normal */
	background-color: #3a312a; /* O nuanță închisă puțin diferită */
    /* Alternativ, dacă folosești gradient, poți folosi un gradient subtil diferit: background: linear-gradient(to bottom, #352d26, #28221d); */


	/* Umbră: O umbră puțin mai vizibilă la hover, pentru a da o senzație de interactivitate/ridicare */
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); /* O umbră mai pronunțată decât în starea normală, dar nu masivă */
    /* Ajustează valorile dacă vrei o umbră mai mare sau mai mică la hover */


	/* Bordura de Jos: Schimbă culoarea bordurii de jos la hover pentru feedback vizual */
	border-bottom-color: #ffcc66; /* Schimbă culoarea bordurii de jos la culoarea accent (auriu) */

    /* Dacă ai alte stiluri aici care trebuie să se schimbe la hover, adaugă-le */
    /* Ex: color: #fff; */ /* Schimbă culoarea textului la hover */
}

/* Opțional: Stiluri pentru H2 când părintele (.panel-header) este la hover (păstrează dacă vrei ca și titlul H2 să se schimbe) */
/* .panel-header:hover h2 { ... } */

/* --- END: Stiluri Actualizate Panel Header Hover --- */
.panel-header:hover h2 {
    /* color: #ffebcd; */ /* O culoare mai deschisă */
    /* text-shadow: 1px 1px 0 #41382e, -1px -1px 0 #fff, 1px 1px 8px rgba(0,0,0,0.6); */ /* O altă umbră */
}

/* Păstrează ajustările responsive pentru .panel-header și .panel-header h2 */
/* Asigură-te că media query-urile nu anulează stilurile :hover dacă nu dorești asta */

/* Ajustări responsive (păstrate sau ajustate minor) */

@media (max-width: 768px) {
    .panel-header {
        padding: 15px; /* Redu padding-ul pe mobil */
         border-bottom-width: 1px; /* Păstrează grosimea consistentă pe mobil */
    }
    .panel-header h2 {
        font-size: 1.8em; /* Redu mărimea fontului pe mobil */
        letter-spacing: 1px;
    }
    /* Asigură-te că nu există pseudo-elementul ::after activ aici dacă l-ai eliminat din baza */
}

@media (max-width: 400px) {
    .panel-header {
        padding: 10px; /* Redu și mai mult padding-ul */
         border-bottom-width: 1px;
    }
     .panel-header h2 {
         font-size: 1.4em;
         letter-spacing: 0;
     }
     /* Asigură-te că nu există pseudo-elementul ::after activ aici */
}

/* Stiluri pentru mini-navigație îmbunătățită */
.mini-nav {
 font-size: 0.9em;
 text-align: right;
 white-space: nowrap;
 /* Ajustăm marginile și padding-ul dacă este necesar pentru aliniere */
 /* margin-top: 5px; */ /* Exemplu dacă e nevoie de un mic spațiu sus pe mobil */
}

.mini-nav a {
 color: #a0988a; /* O culoare mai ștearsă pentru link-urile inactive */
 text-decoration: none;
 transition: color 0.2s ease;
 padding: 2px 0; /* Un mic padding vertical */
 border-bottom: 1px dotted transparent; /* Adăugăm o bordură punctată transparentă */
}

.mini-nav a:hover {
 color: #ffcc66; /* Culoare accent la hover */
 text-decoration: none; /* Fără subliniere implicită */
 border-bottom-color: #ffcc66; /* Bordura punctată apare la hover */
}

/* Stil pentru separator */
.mini-nav span {
 color: #a08a8a; /* Culoarea separatorului */
 margin: 0 8px; /* Spațiu în jurul separatorului */
 /* Poți înlocui span-ul cu ::before în CSS dacă vrei un punct */
}


/* --- END: NEW IMPROVED ITEMSHOP PANEL STYLES --- */

/* Stiluri pentru noul element Breadcrumb/Titlu Categorie */
.breadcrumb {
 font-size: 0.9em; /* Mărime mică */
 color: #a0988a; /* Culoare text generală */
 margin-bottom: 15px; /* Spațiu redus sub breadcrumb */
 padding: 8px 10px; /* Padding interior redus */
 background-color: #221c17; /* Fundal ușor diferit */
 border: 1px solid #3a312a; /* Bordură subtilă */
 border-radius: 5px;
 text-align: left; /* Aliniază la stânga */
}

/* --- Stiluri pentru secțiunea Imagini Slideshow în Panoul Admin --- */

.slideshow-image-input-group {
    display: flex; /* Aranjează input-ul și butonul unul lângă altul */
    gap: 5px; /* Spațiu între input și buton */
    margin-bottom: 5px; /* Spațiu între rândurile cu input-uri pentru imagini */
    align-items: center; /* Aliniază vertical elementele */
}

.slideshow-image-input-group input[type="text"] {
    flex-grow: 1; /* Permite input-ului să ocupe spațiul disponibil */
    padding: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Include padding-ul și bordura în lățimea totală */
}

.slideshow-image-input-group .remove-slideshow-image-btn {
    padding: 8px 12px;
    background-color: #dc3545; /* Culoare roșie pentru butonul de ștergere */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0; /* Împiedică butonul să se micșoreze */
    line-height: 1; /* Ajustează înălțimea liniei pentru a centra textul */
}

.slideshow-image-input-group .remove-slideshow-image-btn:hover {
    background-color: #c82333;
}

#add-slideshow-image-btn {
    padding: 8px 12px;
    background-color: #28a745; /* Culoare verde pentru butonul de adăugare */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 5px; /* Spațiu deasupra butonului de adăugare */
    line-height: 1; /* Ajustează înălțimea liniei pentru a centra textul */
}

#add-slideshow-image-btn:hover {
    background-color: #218838;
}

/* Stil pentru textul mic de sub butonul de adăugare */
.form-group small {
    display: block; /* Asigură-te că este pe un rând separat */
    color: #666;
    margin-top: 5px;
    font-size: 0.8em;
}

.breadcrumb a {
 color: #e0d8cc; /* Culoarea link-urilor din breadcrumb */
 text-decoration: none;
 transition: color 0.2s ease;
}

.breadcrumb i {
    margin-right: 5px; /* Adaugă puțin spațiu la dreapta iconiței */
    /* Poți ajusta și culoarea iconițelor dacă vrei */
    color: #ffcc66;
}


/* --- Nouă Clasă CSS pentru Butonul "Mergi înapoi" Subtil în Breadcrumb --- */

/* Stilul pentru butonul în starea normală (.breadcrumb-back-button) */
.breadcrumb-back-button {
    /* Proprietăți de layout pentru a-l integra în fluxul breadcrumb (similar cu elementele inline) */
    display: inline-flex; /* Folosim inline-flex pentru a sta pe aceeași linie cu celelalte elemente din breadcrumb */
    align-items: center; /* Centrează vertical conținutul (iconiță + text) */
    justify-content: center; /* Centrează orizontal conținutul */
    flex-shrink: 0; /* Împiedică butonul să se micșoreze excesiv */

    text-decoration: none; /* Fără subliniere */
    border-radius: 5px; /* Colțuri ușor rotunjite, dar mai puțin decât butoanele de item */
    padding: 5px 10px; /* Padding interior mai mic */
    font-size: 0.85em; /* Mărime font puțin mai mică decât textul normal din breadcrumb */
    font-weight: normal; /* Greutate normală a fontului */
    transition: all 0.2s ease; /* Tranziție rapidă pentru efectele de hover */

    /* --- Design Vizual Subtil --- */
    background-color: #3a312a; /* Un fundal mai închis, similar cu antetul panelului */
    color: #e0d8cc; /* O culoare mai deschisă, discretă, pentru text */
    border: 1px solid #4a4035; /* O bordură subtilă, închisă */
    box-shadow: none; /* Fără umbră în starea normală */
    text-shadow: none; /* Fără umbră pe text */
}

/* Stilul pentru iconița din interiorul butonului .breadcrumb-back-button */
.breadcrumb-back-button i {
    margin-right: 5px; /* Spațiu între iconiță și text */
    color: #ffcc66; /* Culoarea accent (aurie) pentru iconiță */
    transition: color 0.2s ease;
}

/* Stilul pentru butonul .breadcrumb-back-button în starea HOVER */
.breadcrumb-back-button:hover {
    background-color: #4a4035; /* Un fundal puțin mai deschis la hover */
    color: #ffcc66; /* Culoare accent (aurie) pentru text la hover */
    border-color: #ffcc66; /* Culoare accent (aurie) pentru bordură la hover */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Umbră mică la hover */
    transform: none; /* Fără efect de ridicare (translateY) la hover */
    text-shadow: none; /* Fără umbră text la hover */
}

/* Stilul pentru iconița din butonul .breadcrumb-back-button la HOVER */
.breadcrumb-back-button:hover i {
    color: #ffcc66; /* Culoarea accent (aurie) pentru iconiță la hover */
}


/* --- Ajustare Spațiu în Breadcrumb --- */
/* Adaugă un mic spațiu la dreapta butonului pentru a nu sta lipit de separatorul de după el */
/* Folosim ID-ul pentru a viza exact butonul din breadcrumb */
#breadcrumb-back {
    margin-right: 10px; /* Spațiu la dreapta butonului */
}
/* Alternativ, poți adăuga margin-left separatorului de după buton: */

#breadcrumb-back + .separator { margin-left: 10px; }

#page_name3{
	position:relative;
	top: -37px;
    left: 345px;
	background-image: url("images/title.png");
	font-size: 19px;
	color: #fff4ca;
	text-align: center;
	width: 222px;
	height: 50px;
	line-height:28px;
	font-family: Nina,Verdana,Segoe,sans-serif;
}

/* --- Stiluri pentru lista de atribute a itemului --- */

/* --- Stiluri pentru Containerul Principal al Panel-ului ItemShop --- */

.itemshop-reimagined-panel {
    /* Dimensiune și Centrare pe Pagină */
    width: 95%; /* Panel-ul ocupă 95% din lățimea părintelui său (de obicei body) */
    max-width: 800px; /* Dar nu depășește 800px pe ecrane mari */
    margin: 30px auto; /* Centrează panel-ul pe orizontală (marginile stânga/dreapta auto) și adaugă 30px spațiu sus și jos */

    /* Spațiu Interior */
    padding: 20px; /* Spațiu între bordura panel-ului și conținutul din interior (antet, conținut principal) */

    /* Aspect Vizual (Fundal, Bordură, Umbră) */
    background-color: #28221c; /* Culoarea de fundal principală a panel-ului (un maro/gri închis) */
    /* Opțional: poți folosi o imagine de fundal sau un gradient */
    /* background: url('images/calea/catre/textura_panel.png') repeat; */
    /* background: linear-gradient(to bottom, #28221c, #1e1814); */

    border: 1px solid #4a4035; /* O bordură subțire într-o culoare închisă, similară cu tema */
    border-radius: 12px; /* Colțuri rotunjite pentru întregul panel, pentru un aspect mai "moale" */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); /* O umbră mai pronunțată care dă impresia că panel-ul iese în evidență de pe fundal */

    /* Modelul de casetă (asigură că padding-ul nu mărește lățimea/înălțimea peste măsură) */
    box-sizing: border-box;

    /* Layoutul copiilor directi (Optional - dacă vrei ca header-ul, titlul dinamic și panel-content să fie aranjate de flex/grid aici) */
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 15px; */ /* Adaugă spațiu între antet, titlu dinamic și corpul principal */
    align-items: center; /* Aceasta va centra panel-header, panel-content, și site-footer (dacă e copil direct) */
    display: flex;
    flex-direction: column;	
}

/* --- END: Stiluri pentru Containerul Principal --- */

/* --- CSS pentru Animația la Scroll (Animate On Scroll) --- */

/* Clasa de bază: Aplică această clasă (.animate-on-scroll) tuturor elementelor pe care vrei să le animezi la scroll.
   Definește starea inițială comună (invizibil) și proprietățile tranziției. */
.animate-on-scroll {
    opacity: 0; /* Elementul începe complet transparent (invizibil) */
    /* Definește tranziția: durata (0.6s), funcția de timp (ease-out) și proprietățile animate (opacity, transform) */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Poți ajusta durata și funcția de timp după preferințe */
}

/* Clasa adăugată de scriptul JavaScript atunci când elementul devine vizibil în viewport.
   Definește starea FINALĂ a elementului (vizibil, în poziția normală). */
.animate-on-scroll.is-visible {
    opacity: 1; /* Elementul devine complet opac (vizibil) */
    transform: translateY(0); /* Revine la poziția sa verticală normală (nu este mutat sus/jos) */
}

/* --- Clase specifice pentru diferite tipuri de animații (Adaugă-le *alături de* .animate-on-scroll în tag-urile HTML) ---
   Aceste clase modifică doar starea INIȚIALĂ a elementului, înainte ca .is-visible să fie adăugată. */

/* Ex: Animație Slide Up: Elementul începe puțin mai jos și "glisează" în sus pe măsură ce devine vizibil. */
/* Adaugă clasa "slide-up" în HTML, pe lângă "animate-on-scroll". Ex: <div class="animate-on-scroll slide-up"> */
.animate-on-scroll.slide-up {
     transform: translateY(0px); /* Setează poziția inițială: elementul începe cu 30px mai jos fața de unde ar trebui să fie în mod normal */
     /* opacity: 0; (este deja setat de clasa .animate-on-scroll de bază) */
     /* transition: ... (este deja setat de clasa .animate-on-scroll de bază) */
}

/* Ex: Animație Fade In (simplu, fără mișcare): Elementul doar apare lin. */
/* De obicei, clasa .animate-on-scroll de bază este suficientă pentru un simplu fade in, dacă nu are un transform inițial implicit setat acolo.
   Dacă dorești doar fade in și ai un transform implicit în .animate-on-scroll, poți reseta transformarea inițială pentru clasa specifică fade-in. */
/* Adaugă clasa "fade-in" în HTML, pe lângă "animate-on-scroll". Ex: <div class="animate-on-scroll fade-in"> */
.animate-on-scroll.fade-in {
     /* Dacă vrei să te asiguri că nu există nicio transformare inițială, setează transform la valoarea implicită */
     transform: none; /* Anulează orice transformare inițială care ar putea veni de la .animate-on-scroll (dacă .animate-on-scroll ar avea default transform) */
     /* opacity: 0; (este deja setat de clasa .animate-on-scroll de bază) */
     /* transition: ... (este deja setat de clasa .animate-on-scroll de bază) */
}


/* Poți crea și alte animații similare: fade-left (apare din stânga), rotate-in (apare rotindu-se) etc. */
/* Exemplu: .animate-on-scroll.fade-left { opacity: 0; transform: translateX(-50px); } */


.item-box:hover {
    transform: translateY(-7px); /* Efectul de ridicare */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
	/* cursor: pointer; */ /* Aceasta linie este comentată corect acum */
	/* Poți adăuga și alte modificări de stil aici, de ex. border-color */
	border-color: #ffcc66; /* <-- Sintaxa este CORECTĂ acum */
}

/* --- END: CSS pentru Animația la Scroll --- */

/* Stiluri pentru fiecare rând de atribut (dacă nu le ai deja) */
.item-attribute-list .attribute-row {
    display: flex; /* Folosim flexbox pentru a aranja numele și valoarea */
    justify-content: space-between; /* Spațiu între nume și valoare */
    align-items: center; /* Centrează vertical elementele în rând */
    padding: 8px 0; /* Spațiu sus/jos pentru fiecare rând */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Linie sub fiecare rând (opțional) */
}

/* Elimină linia de sub ultimul rând */
.item-attribute-list .attribute-row:last-child {
    border-bottom: none;
}

/* Stiluri pentru span-ul care conține numele atributului */
.item-attribute-list .attribute-row .attribute-name {
    /* Asigură un spațiu la stânga pentru iconița pe care o vom adăuga cu ::before */
    padding-left: 20px; /* Ajustează această valoare dacă vrei mai mult/puțin spațiu */
    color: #e0d8cc; /* Culoarea textului pentru numele atributului */
    font-weight: normal; /* Poți ajusta greutatea fontului */
    /* Asigură o bază de poziționare dacă folosești position: absolute pe ::before */
    position: relative;
}

/* Stiluri pentru span-ul care conține valoarea atributului */
.item-attribute-list .attribute-row .attribute-value {
    color: #ffcc66; /* Culoarea textului pentru valoarea atributului (accent) */
    font-weight: bold; /* Greutate font mai mare pentru valoare */
}

/* --- CREAREA ICONIȚEI/BULLET POINT-ULUI CU PSEUDO-ELEMENTUL ::before --- */

.item-attribute-list .attribute-row .attribute-name::before {
    /* Conținutul pseudo-elementului: o iconiță Font Awesome */
    /* Codul "\f111" este pentru iconița "circle-dot" din Font Awesome 6 Solid (fas) */
    /* Poți folosi și alte coduri Font Awesome sau un simplu punct: content: "•"; */
    content: "\f111";

    /* Specificăm fontul și greutatea pentru a afișa iconița Font Awesome */
    font-family: "Font Awesome 6 Free"; /* Numele corect al fontului */
    font-weight: 900; /* Greutatea pentru iconițele Solid (fas) */

    /* Spațiu între iconiță și text */
    margin-right: 8px; /* Ajustează spațiul dintre iconiță și textul numelui atributului */

    /* Culoarea iconiței (folosește o culoare accent) */
    color: #ffcc66; /* Culoarea accent, similară cu butoanele */

    /* Poziționarea iconiței */
    /* Folosim absolute positioning relativ la părintele .attribute-name (care are position: relative) */
    position: absolute;
    left: 0; /* Plasează iconița la începutul spațiului liber creat de padding-left */
    top: 50%; /* Centrează vertical iconița în rând */
    transform: translateY(-50%); /* Ajustează vertical iconița pentru o centrare perfectă */

    /* Mărimea iconiței (opțional) */
    font-size: 0.6em; /* Ajustează mărimea iconiței față de mărimea fontului rândului */

    /* Asigură că pseudo-elementul se afișează corect */
    display: inline-block;
}

/* --- SFÂRȘIT Stiluri lista de atribute --- */

.breadcrumb a:hover {
 color: #ffcc66; /* Culoarea link-urilor la hover */
 text-decoration: underline;
}

.breadcrumb .separator {
 margin: 0 5px; /* Spațiu în jurul separatorului */
 color: #a08a8a; /* Culoarea separatorului */
}

.breadcrumb .current-category {
 color: #ffcc66; /* Culoare accent pentru categoria actuală */
 font-weight: bold;
}

/* Stil optional pentru link-ul "Înapoi" dacă îl adaugi */

.breadcrumb .go-back-link {
 margin-left: 15px;
 font-size: 0.9em;
 color: #a0988a;
 text-decoration: none;
}
.breadcrumb .go-back-link:hover {
 color: #ffcc66;
 text-decoration: underline;
}


/* Stiluri pentru ecrane mai mici (Responsive) */
/* Ajustează aceste media queries pentru a forța mai puține coloane pe ecrane mici */
@media (max-width: 992px) { /* Ajustează breakpoint-ul */
 .items-grid {
  grid-template-columns: repeat(4, 1fr); /* 4 coloane pe lățimi mai mici */
  gap: 10px; /* Spațiu redus */
 }
.itemshop-panel { max-width: 800px; } /* Poate fi necesar să mărești lățimea panelului */
}

@media (max-width: 768px) { /* Ajustează breakpoint-ul */
 .items-grid {
  grid-template-columns: repeat(3, 1fr); /* 3 coloane pe tablete */
  gap: 10px;
 }
 .itemshop-panel { max-width: 600px; } /* Revine la lățimea inițială sau ajustată */
}

@media (max-width: 600px) { /* Ajustează breakpoint-ul */
 .items-grid {
  grid-template-columns: repeat(2, 1fr); /* 2 coloane pe majoritatea telefoanelor */
  gap: 10px;
  padding: 10px;
  margin-top: 10px;
 }
.itemshop-panel { margin: 10px; max-width: none; width: calc(100% - 20px);} /* Panel flexibil pe lățimea ecranului */
.panel-body { padding: 10px; }
.breadcrumb { margin-bottom: 10px; padding: 5px 8px; }
 .item-box { padding: 8px; }
 .item-name { font-size: 0.9em; margin-bottom: 5px; }
 .item-icon { min-height: 60px; margin-bottom: 5px; }
 .item-icon img { max-height: 70px; }
 .item-info { font-size: 0.8em; margin-bottom: 8px; }
 .item-button { padding: 6px 8px; font-size: 0.85em; }
 .item-button i { margin-right: 3px; }
}

@media (max-width: 400px) {
 .items-grid {
  grid-template-columns: repeat(1, 1fr); /* 1 coloană pe telefoane foarte mici */
  gap: 10px;
 }
.item-box { padding: 8px; }
.item-name { font-size: 1em; margin-bottom: 8px;}
.item-icon { min-height: 80px; margin-bottom: 8px;}
.item-icon img { max-height: 90px;}
.item-info { font-size: 0.9em; margin-bottom: 10px;}
.item-button { padding: 10px 15px; font-size: 0.95em;}
}

/* --- START: NEW ITEM PRESENTATION STYLES --- */

/* Stiluri pentru Breadcrumb (dacă îl folosești pe pagina de item) */
/* Folosește stilurile .breadcrumb definite anterior în CSS-ul tău */


/* Container Principal pentru Layout Imagine + Info */
.item-presentation-container {
    flex-direction: column; /* Pe mobil, așează elementele pe verticală */
    gap: 30px; /* Spațiu între secțiuni (vertical pe mobil, orizontal pe desktop) */
    padding: 20px; /* Padding în interiorul containerului */
    background-color: #221c17; /* Fundal ușor diferit pentru secțiunea de prezentare */
    border-radius: 6px;
    border: 1px solid #3a312a;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Stiluri pentru Secțiunea Imagine Item */
.item-image-section {
    flex: 1 1 400px; /* Permite secțiunii să crească, să se micșoreze (până la o bază de 400px) */
    max-width: 100%; /* Asigură că nu depășește containerul părinte pe mobil */
    /* Ajustează lățimea maximă dacă vrei ca imaginea să nu fie prea mare pe desktop */
    /* max-width: 500px; */
    margin: 0 auto; /* Centrează imaginea pe mobil dacă secțiunea nu ocupă toată lățimea */
    /* Stiluri pentru slider ar trebui să vină de la Nivo Slider theme */
}

/* Stiluri pentru Secțiunea Informații Item */
.item-info-section {
    flex: 1 1 300px; /* Permite secțiunii să crească, să se micșoreze (până la o bază de 300px) */
    max-width: 100%; /* Asigură că nu depășește containerul părinte pe mobil */
}

/* Stiluri pentru Titlul Itemului (în secțiunea de info) */
.item-title {
    font-size: 1.8em; /* Mărime font mai mare */
    color: #ffcc66;
    /* text-align: center; */ /* Alinierea textului va fi gestionată în media queries */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

    /* --- Adăugări pentru îmbunătățire --- */
    padding: 10px 15px; /* Spațiu interior (sus/jos 10px, stânga/dreapta 15px) */
    margin-bottom: 25px; /* Spațiu sub bordura de jos (ajustat) */
    border-bottom: 2px solid #a08a6a; /* O linie solidă sub titlu, cu o culoare similară bordurilor panelului */
    background-color: rgba(58, 49, 42, 0.5); /* Fundal subtil semi-transparent (opțional, ajustează opacitatea 0.5 dacă vrei mai transparent) */
    border-radius: 4px 4px 0 0; /* Colțuri rotunjite doar sus (pentru a se potrivi cu bordura de jos) */
    display: block; /* Asigură că fundalul și bordura se întind pe toată lățimea disponibilă */
    width: 100%; /* Asigură că elementul ocupă lățimea containerului */
    box-sizing: border-box; /* Include padding și border în lățimea elementului */
    /* --- Sfârșit adăugări --- */
}

/* --- ALTERNATIVE SOCIAL MEDIA GRID BUTTONS STYLES --- */

/* Container principal pentru blocul Social Media (Grilă) */
.social-buttons-grid-block {
    /* Similar cu .info-block, .contact-info-block etc. */
    margin-top: 20px; /* Spațiu deasupra blocului */
    border: 1px solid #3a312a; /* Bordură */
    border-radius: 5px; /* Colțuri rotunjite */
    padding: 15px; /* Padding interior */
    background-color: #2e2720; /* Fundal */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); /* Umbră interioară */
}

/* Stiluri pentru Titlul Social Media (H3) în blocul grilă */
.social-buttons-grid-block h3 {
    /* Similar cu celelalte titluri H3 stilizate recent */
    color: #ffcc66;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    background-color: rgba(46, 39, 32, 0.7); /* Fundal semi-transparent */
    padding: 10px 15px;
    padding-bottom: 8px;
    border-bottom: 1px dotted rgba(160, 138, 106, 0.5); /* Bordură jos */
    border-top: 1px solid rgba(160, 138, 106, 0.5); /* Bordură sus (opțional) */
    border-radius: 4px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0; /* Elimină marginile de sus */
    margin-bottom: 15px; /* Spațiu sub titlu */
     /* Poți adăuga box-shadow aici dacă vrei ca titlul să fie și mai proeminent */
     /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); */
}

/* Stil pentru iconița din titlul H3 Social Media (Grilă) */
.social-buttons-grid-block h3 i {
    margin-right: 8px;
    color: #a08a6a; /* Culoare iconiță titlu */
}


/* Container pentru grila de iconițe/butoane - Centrat */
.social-icons-grid {
    /* Păstrăm display: grid, grid-template-columns, gap pentru aranjarea butoanelor interne */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); /* Ajustează 40px dacă mărimea butonului este altă */
    gap: 10px;

    /* Eliminăm marginile de centrare de sus/jos și margin-bottom vertical */
    margin: 0;
    margin-bottom: 0;

    /* justify-content: center; (Centrează itemii în grilă) - Păstrează dacă vrei */
    justify-content: center;

     /* NU adăuga max-width și margin: auto AICI dacă Flexbox-ul părintelui (combined-links-content)
        gestionează lățimea coloanei pe desktop. */
}

/* Stiluri pentru fiecare buton iconiță socială */
.social-icon-button {
    /* Face butonul pătrat */
    width: 40px; /* Lățimea fixă (ajustează, trebuie să fie egală cu înălțimea) */
    height: 40px; /* Înălțimea fixă (ajustează, trebuie să fie egală cu lățimea) */

    display: flex; /* Folosim Flexbox pentru a centra iconița în buton */
    justify-content: center; /* Centrează orizontal */
    align-items: center; /* Centrează vertical */

    /* Stiluri vizuale similare cu alte butoane/elemente */
    background-color: #3a312a; /* Fundal similar */
    border: 1px solid #a08a6a; /* Bordură */
    border-radius: 5px; /* Colțuri rotunjite */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Umbră subtilă */
    transition: all 0.2s ease; /* Tranziție pentru hover */
    text-decoration: none; /* Fără subliniere */
    color: #ffcc66; /* Culoarea iconiței implicite (dacă nu e setată pe <i>) */
}

/* Efect la hover pe buton */
.social-icon-button:hover {
    background-color: #ffcc66; /* Schimbă fundalul la hover (culoare accent) */
    border-color: #ffebcd; /* Bordură mai deschisă */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Umbră mai vizibilă */
    transform: translateY(-2px); /* Efect subtil de ridicare */
    color: #28221c; /* Schimbă culoarea iconiței la hover (dacă nu e setată pe <i>) */
}

/* Stiluri pentru iconițele Font Awesome din butoane */
.social-icon-button i {
    font-size: 1.6em; /* Mărimea iconiței (ajustează pentru a încape bine în buton) */
    color: inherit; /* Moștenește culoarea din .social-icon-button sau :hover */
    /* display: block; */ /* Uneori ajută la aliniere */
}

/* Stiluri pentru imaginile iconițe (dacă folosești <img src="...">) */
.social-icon-button img {
    width: 70%; /* Lățimea imaginii iconiță (procent din buton) */
    height: auto;
    max-width: 100%; /* Asigură că nu depășește */
    max-height: 100%;
    display: block;
}

/* --- Ajustări Responsive pentru Layout (Aranjarea Coloanelor) --- */
/* Definește cum se aranjează COLOANELE (.left-column, .right-column) în .main-layout-area */

/* Layout pe Desktop (2 Coloane) */
@media (min-width: 768px) { /* Ajustează breakpoint-ul */
    .main-layout-area {
        flex-direction: row; /* Aranjează COLOANELE pe orizontală */
        flex-wrap: wrap; /* Permite COLOANELOR să treacă pe rândul următor */
        gap: 30px; /* Spațiul orizontal și vertical ÎNTRE COLOANE */
        align-items: flex-start; /* Aliniază COLOANELE la vârf */
    }

    /* Definește cum împart spațiul COLOANELE pe desktop */
    .left-column,
    .right-column {
        flex: 1; /* Ambele coloane ocupă spațiu liber egal */
        min-width: 0; /* Permite micșorarea */
        margin: 0; /* Elimină marginile */
        /* Spațiul vertical ÎNTRE blocurile DIN COLOANĂ este dat de gap-ul de pe .layout-column */
    }

    /* Opțional: Lățimi preferate pentru coloane (dacă nu vrei să împartă spațiu egal) */
    /* .left-column { flex: 1 1 400px; } */ /* Bază 400px, apoi crește/scade */
    /* .right-column { flex: 1 1 300px; } */ /* Bază 300px, apoi crește/scade */
}

/* Layout pe Mobil (1 Coloană) */
@media (max-width: 767px) { /* Ajustează breakpoint-ul */
    .main-layout-area {
        flex-direction: column; /* Asigură stivuirea COLOANELOR pe mobil */
        gap: 20px; /* Spațiul vertical ÎNTRE COLOANE */
    }

    /* Pe mobil, COLOANELE ocupă lățimea completă */
    .left-column,
    .right-column {
         width: 100%;
         margin: 0;
    }
}

/* Ajustări pentru padding-ul panel-content pe ecrane mici */
@media (max-width: 600px) {
    .panel-content { padding: 15px; }
    /* Ajustează padding-ul intern al blocurilor (.info-block etc.) dacă este necesar în media query-urile lor specifice */
}
@media (max-width: 400px) {
     .panel-content { padding: 10px; }
}

/* --- END: COMBINED LAYOUT AND ORIGINAL DESIGN STYLES --- */


/* Ajustări responsive pentru grila de butoane sociale */
@media (max-width: 768px) {
    .social-buttons-grid-block {
        padding: 10px; /* Redu padding-ul blocului */
    }
    .social-buttons-grid-block h3 {
        font-size: 1.1em; /* Redu mărimea titlului */
        padding: 8px 10px;
        margin-bottom: 10px;
    }
    .social-icons-grid {
        gap: 8px;
        grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
        max-width: 250px; /* Ajustează max-width pe mobil */
        margin-top: 10px;
    }
    .social-icon-button {
        width: 35px; /* Ajustează lățimea butonului */
        height: 35px; /* Ajustează înălțimea butonului */
        border-radius: 4px; /* Ajustează rotunjirea */
    }
    .social-icon-button i {
        font-size: 1.4em; /* Ajustează mărimea iconiței */
    }
}

@media (max-width: 400px) {
    .social-icons-grid {
         gap: 6px;
         grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
         max-width: 200px; /* Ajustează max-width pe telefoane mici */
         margin-top: 8px;
    }
     .social-icon-button {
         width: 30px;
         height: 30px;
         border-radius: 3px;
     }
      .social-icon-button i {
         font-size: 1.2em;
      }
}


/* --- NEW UNIFIED LINKS BLOCK STYLES --- */

/* Container Principal pentru Social Media și Linkuri Utile Unificate */
.unified-links-block {
    /* Stiluri de bloc similare cu panel-urile existente (bordură, fundal, umbră) */
    margin-top: 20px; /* Spațiu deasupra blocului unificat */
    margin-bottom: 20px; /* Spațiu sub blocul unificat */
    border: 1px solid #a08a6a; /* Bordură similară cu panelul principal */
    border-radius: 8px; /* Colțuri rotunjite */
    padding: 20px; /* Padding interior pentru întregul bloc (spațiu între bordură și conținut) */
    background: linear-gradient(to bottom, #2c251e, #1e1813); /* Fundal gradient similar */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6); /* Umbră exterioară */
    box-sizing: border-box;
    overflow: hidden; /* Ajută la gestionarea colțurilor rotunjite */
}

/* Ajustări pentru blocurile existente CÂND SE AFLĂ ÎN INTERIORUL BLOCULUI UNIFICAT */

/* Ajustări pentru Blocul Social Media în interiorul .unified-links-block */
.unified-links-block .social-buttons-grid-block {
    /* Eliminăm stilurile de container exterior care acum sunt aplicate pe .unified-links-block */
    border: none; /* Elimină bordura exterioară a blocului social */
    border-radius: 0; /* Elimină rotunjirea blocului social */
    background-color: transparent; /* Elimină fundalul blocului social */
    box-shadow: none; /* Elimină umbra exterioară a blocului social */
    margin: 0; /* Elimină marginile de sus/jos ale blocului social */
    padding: 0; /* Elimină padding-ul exterior al blocului social */
    /* Adaugăm spațiu la bază pentru a separa de secțiunea Linkuri Utile de dedesubt */
    margin-bottom: 20px; /* Spațiu între secțiunea Social Media și Linkuri Utile */
}

/* Ajustări pentru Secțiunea Linkuri Utile în interiorul .unified-links-block */
.unified-links-block .additional-links {
    /* Similar cu blocul social, eliminăm stilurile de container exterior duplicate */
    border: none; /* Elimină bordura exterioară a secțiunii Linkuri Utile */
    border-radius: 0; /* Elimină rotunjirea secțiunii Linkuri Utile */
    background-color: transparent; /* Elimină fundalul secțiunii Linkuri Utile */
    box-shadow: none; /* Elimină umbra exterioară a secțiunii Linkuri Utile */
    margin: 0; /* Elimină marginile de sus/jos ale secțiunii Linkuri Utile */
    padding: 0; /* Elimină padding-ul exterior al secțiunii Linkuri Utile */
     /* Nu este nevoie de margin-bottom aici, deoarece este ultimul element din blocul unificat */
}

/* Opțional: Stil pentru o linie separatoare între secțiuni (dacă adaugi <hr class="section-separator"> în HTML) */

.unified-links-block .section-separator {
    border: none;
    height: 1px;
    background-color: rgba(160, 138, 106, 0.5); // O linie simplă, subtilă
    margin: 20px 0; // Spațiu deasupra și dedesubt
    width: 100%;
}



/* Stilurile pentru TITLURI (h3) în interiorul secțiunilor (Urmărește-ne! și Linkuri Utile) RĂMÂN ACELEAȘI pe care le-am îmbunătățit anterior */
/* .unified-links-block .social-buttons-grid-block h3 { ... } */
/* .unified-links-block .additional-links h3 { ... } */

/* Stilurile pentru grila de butoane sociale (.social-icons-grid) și butoanele individuale (.social-icon-button) RĂMÂN ACELEAȘI */
/* Ambele vor fi centrate în spațiul disponibil din blocul unificat */
/* .unified-links-block .social-icons-grid { ... } */
/* .unified-links-block .social-icon-button { ... } */
/* ... etc. ... */

/* Stilurile pentru lista de linkuri utile (ul) și elementele individuale (li, a, i/img) RĂMÂN ACELEAȘI */
/* .unified-links-block .additional-links ul { ... } */
/* .unified-links-block .additional-links li { ... } */
/* .unified-links-block .additional-links li a { ... } */
/* .unified-links-block .additional-links li i { ... } */
/* .unified-links-block .additional-links li img { ... } */
/* ... etc. ... */


/* Asigură-te că ajustările responsive pentru blocurile interne funcționează în continuare corect în noul container */
@media (max-width: 768px) {
    .unified-links-block {
        padding: 15px; /* Redu padding-ul blocului unificat pe mobil */
    }
     /* Stilurile responsive pentru titluri, grid social, butoane social, linkuri utile
        rămân cele definite anterior și ar trebui să funcționeze în interiorul blocului unificat. */
}

/* --- END NEW UNIFIED LINKS BLOCK STYLES --- */

/* --- END ALTERNATIVE SOCIAL MEDIA GRID BUTTONS STYLES --- */

/* --- NEW IMPROVED COMBINED LINKS BLOCK STYLES --- */

/* Container principal pentru blocul Social Media și Linkuri Utile (Îmbunătățit) */
.combined-links-block {
    /* Stiluri de bloc similare cu panel-urile existente */
    margin-top: 20px; /* Spațiu deasupra blocului */
    margin-bottom: 20px; /* Spațiu sub bloc */
    border: 1px solid #a08a6a; /* Bordură */
    border-radius: 8px; /* Colțuri rotunjite */
    padding: 20px; /* Padding interior pentru întregul bloc */
    background: linear-gradient(to bottom, #2c251e, #1e1813); /* Fundal gradient similar */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6); /* Umbră exterioară */
    box-sizing: border-box;
    overflow: hidden;
}

.combined-links-block2 {
    /* Stiluri de bloc similare cu panel-urile existente */
    margin-top: 20px; /* Spațiu deasupra blocului */
    margin-bottom: 20px; /* Spațiu sub bloc */
    border: 1px solid #a08a6a; /* Bordură */
    border-radius: 8px; /* Colțuri rotunjite */
    padding: 20px; /* Padding interior pentru întregul bloc */
    background: linear-gradient(to bottom, #2c251e, #1e1813); /* Fundal gradient similar */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6); /* Umbră exterioară */
    box-sizing: border-box;
    overflow: hidden;
}

/* Stiluri pentru Titlul H3 al blocului combinat */
.combined-links-block h3 {
    color: #ffcc66;
    margin-top: 0;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    background-color: rgba(46, 39, 32, 0.7); /* Ușor mai puțin transparent */
    padding: 10px 15px;
    padding-bottom: 8px;

    border-bottom: 1px dotted rgba(160, 138, 106, 0.5);
    border-top: 1px solid rgba(160, 138, 106, 0.5);
    border-radius: 4px;

    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;

    /* ADĂUGAT: Umbră la blocul titlului pentru proeminență */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* Stil pentru iconița din titlul H3 combinat */
.combined-links-block h3 i {
    margin-right: 8px;
    color: #a08a6a; /* Culoare iconiță titlu */
}

/* Container care aranjează grila socială și lista linkurilor utile */
.combined-links-content {
    display: flex; /* Activează Flexbox */
    flex-direction: column; /* Implicit, le stivuiește pe verticală (pe mobil) */
    gap: 20px; /* Spațiu între secțiuni pe verticală (pe mobil) */
     /* text-align: center; */ /* Nu este necesar aici */

    /* Pe desktop, le aranjăm altfel - vezi media query */
}

/* Stilurile pentru grila de butoane sociale (din interiorul noului bloc) */
/* Păstrăm stilurile pentru .social-icons-grid, dar ajustăm marginile */
.social-icons-grid {
    /* Păstrăm display: grid, grid-template-columns, gap pentru aranjarea butoanelor interne */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); /* Ajustează 40px dacă mărimea butonului este altă */
    gap: 10px;

    /* Eliminăm marginile de centrare de sus/jos și margin-bottom vertical */
    margin: 0;
    margin-bottom: 0;

    /* justify-content: center; (Centrează itemii în grilă) - Păstrează dacă vrei */
    justify-content: center;

     /* NU adăuga max-width și margin: auto AICI dacă Flexbox-ul părintelui (combined-links-content)
        gestionează lățimea coloanei pe desktop. */
}

/* Stilurile pentru butoanele iconiță socială (.social-icon-button) RĂMÂN ACELEAȘI */
/* .social-icon-button { ... } */
/* .social-icon-button:hover { ... } */
/* .social-icon-button i { ... } */
/* .social-icon-button img { ... } */


/* Stiluri pentru LISTA (UL) de linkuri utile (acum cu clasa .useful-links-list) */
.useful-links-list {
    list-style: none;
    padding: 0;
    margin: 0; /* Elimină marginile implicite */
    /* border: 1px solid #4a4035; */ /* Opțional: bordură în jurul întregii liste */
    /* border-radius: 5px; */
    /* overflow: hidden; */
    /* background-color: #332c25; */ /* Opțional: fundal pentru listă */
    /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
}

/* Stiluri pentru FIECARE ITEM (LI) din lista de linkuri utile (.useful-link-item) */
.useful-links-list .useful-link-item {
    display: flex; align-items: center; margin-bottom: 10px;
    background-color: #332c25; padding: 10px 15px; border-radius: 5px;
    border: 1px solid #4a4035; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease, border-left-color 0.2s ease;
    border-left: 3px solid transparent;
}
.useful-links-list .useful-link-item:last-child { margin-bottom: 0; border-bottom: none; }
.useful-links-list .useful-link-item:hover { background-color: #4a4035; border-left-color: #ffcc66; }
.useful-links-list .useful-link-item i { color: #ffcc66; margin-right: 12px; font-size: 1.3em; width: 25px; text-align: center; flex-shrink: 0; }
.useful-links-list .useful-link-item a { color: #e0d8cc; text-decoration: none; font-size: 1em; flex-grow: 1; word-break: break-word; }
.useful-links-list .useful-link-item a:hover { color: #ffcc66; }social-icons-grid

/* Elimină spațiul de sub ultimul item din listă */
.useful-links-list .useful-link-item:last-child {
    margin-bottom: 0;
    border-bottom: none; /* Asigură că nu are bordură dacă folosești */
}

/* Efect la hover pe itemul de listă */
.useful-links-list .useful-link-item:hover {
     background-color: #4a4035; /* Schimbă fundalul */
     border-left-color: #ffcc66; /* Bordura stânga devine vizibilă/culoare accent */
}

/* Stiluri pentru iconițele din linkurile utile */
.useful-links-list .useful-link-item i {
    color: #ffcc66; /* Culoare iconiță (accent) */
    margin-right: 12px; /* Spațiu */
    font-size: 1.1em; /* Mărime */
    width: 20px; /* Lățime fixă pentru aliniere */
    text-align: center;
    flex-shrink: 0;
}
/* Stiluri pentru imaginile iconițe în linkurile utile */
.useful-links-list .useful-link-item img {
     width: 20px;
     height: auto;
     margin-right: 12px;
     vertical-align: middle;
     flex-shrink: 0;
}

/* Stiluri pentru link-ul (ancora <a>) din itemul de listă */
.useful-links-list .useful-link-item a {
     color: #e0d8cc; /* Culoarea textului */
     text-decoration: none;
     font-size: 1em;
     flex-grow: 1; /* Permite textului să ocupe spațiul */
     word-break: break-word;
}

.useful-links-list .useful-link-item a:hover {
    color: #ffcc66; /* Culoarea textului la hover */
    /* text-decoration: underline; */ /* Opțional */
}


/* --- NEW SOCIAL MEDIA BLOCK STYLES --- */

/* Container principal pentru blocul Social Media */
.social-media-block {
    /* Similar cu .info-block, .contact-info-block etc. */
    margin-top: 20px; /* Spațiu deasupra blocului */
    border: 1px solid #3a312a; /* Bordură */
    border-radius: 5px; /* Colțuri rotunjite */
    padding: 15px; /* Padding interior */
    background-color: #2e2720; /* Fundal */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); /* Umbră interioară */
}

/* Stiluri pentru Titlul Social Media (H3) */
.social-media-block h3 {
    /* Similar cu celelalte titluri H3 stilizate recent */
    color: #ffcc66;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    background-color: rgba(46, 39, 32, 0.7); /* Fundal semi-transparent */
    padding: 10px 15px;
    padding-bottom: 8px;
    border-bottom: 1px dotted rgba(160, 138, 106, 0.5); /* Bordură jos */
    border-top: 1px solid rgba(160, 138, 106, 0.5); /* Bordură sus (opțional) */
    border-radius: 4px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0; /* Elimină marginile de sus */
    margin-bottom: 15px; /* Spațiu sub titlu */
     /* Poți adăuga box-shadow aici dacă vrei ca titlul să fie și mai proeminent */
     /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); */
}

/* Stil pentru iconița din titlul H3 Social Media */
.social-media-block h3 i {
    margin-right: 8px;
    color: #a08a6a; /* Culoare iconiță titlu */
}


/* Stiluri pentru lista de linkuri sociale */
.social-links-list {
    list-style: none; /* Elimină bulinele listei */
    padding: 0;
    margin: 0; /* Elimină marginile implicite ale listei */
}

/* Stiluri pentru fiecare element (link) din lista */
.social-links-list .social-link-item {
    /* Similar cu elementele din lista de contact sau linkuri utile */
    margin-bottom: 10px; /* Spațiu între iteme */
    /* border-bottom: 1px solid #4a4035; */ /* Opțional: linie separatoare între iteme */
    /* Dacă vrei linie separatoare, ajustează margin-bottom și padding-bottom */

    /* Folosim flexbox pentru alinierea iconiță | Text */
    display: flex;
    align-items: center;

    /* Stiluri pentru fundal, bordură etc. pe elementul LI */
     background-color: #332c25; /* Fundal ușor mai închis */
     padding: 10px 15px; /* Padding interior */
     border-radius: 5px;
     border: 1px solid #4a4035; /* Bordură */
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); /* Umbră interioară */

     transition: background-color 0.2s ease, border-left-color 0.2s ease; /* Tranziție hover */
     border-left: 3px solid transparent; /* Bordură stânga transparentă pentru efect la hover */
}

/* Elimină spațiul de sub ultimul element */
.social-links-list .social-link-item:last-child {
    margin-bottom: 0;
    border-bottom: none; /* Asigură că nu are bordură dacă folosești */
}

/* Efect la hover pe elementul de listă */
.social-links-list .social-link-item:hover {
     background-color: #4a4035; /* Schimbă fundalul */
     border-left-color: #ffcc66; /* Bordura stânga devine vizibilă/culoare accent */
}


/* Stiluri pentru link-ul (ancora <a>) din interiorul elementului de listă */
.social-links-list .social-link-item a {
     color: #e0d8cc; /* Culoarea textului link-ului */
     text-decoration: none; /* Fără subliniere */
     font-size: 1em;
     flex-grow: 1; /* Permite textului să ocupe spațiul rămas */
     display: flex; /* Folosim flexbox și aici pentru a alinia iconița/imaginea și textul */
     align-items: center;
     /* justify-content: center; */ /* Dacă vrei iconița și textul centrate în LI */
}

.social-links-list .social-link-item a:hover {
    color: #ffcc66; /* Culoarea textului la hover */
    /* text-decoration: underline; */ /* Opțional: adaugă subliniere la hover */
}


/* Stiluri pentru iconițele Font Awesome din linkuri */
.social-links-list .social-link-item i {
    color: #ffcc66; /* Culoarea iconițelor (accent) */
    margin-right: 12px; /* Spațiu între iconiță și text */
    font-size: 1.3em; /* Mărimea iconițelor */
    width: 25px; /* Lățime fixă pentru a alinia iconițele */
    text-align: center; /* Centrează iconița în lățimea fixă */
    flex-shrink: 0; /* Asigură că iconița nu se micșorează */
}

/* Stiluri pentru imaginile iconițe (dacă folosești <img src="...">) */
.social-links-list .social-link-item img {
     width: 25px; /* Mărimea imaginilor iconițe */
     height: auto;
     margin-right: 12px; /* Spațiu între imagine și text */
     vertical-align: middle; /* Aliniază vertical imaginea */
     flex-shrink: 0; /* Asigură că imaginea nu se micșorează */
}


/* Stiluri pentru textul (span) din linkuri (dacă folosești <span>) */
.social-links-list .social-link-item span {
     flex-grow: 1; /* Permite textului să ocupe spațiul */
     word-break: break-word; /* Ajută la ruperea textului lung */
}


/* Ajustări responsive (dacă este necesar) */
@media (max-width: 768px) {
    .social-media-block {
        padding: 10px; /* Redu padding-ul pe mobil */
    }
    .social-media-block h3 {
        font-size: 1.1em; /* Redu mărimea titlului */
        padding: 8px 10px;
        margin-bottom: 10px;
    }
    .social-links-list .social-link-item {
         padding: 8px 10px;
         margin-bottom: 8px;
    }
     .social-links-list .social-link-item i,
     .social-links-list .social-link-item img {
         font-size: 1.1em;
         width: 20px;
         margin-right: 10px;
     }
     .social-links-list .social-link-item a {
         font-size: 0.9em;
     }
}

/* --- END NEW SOCIAL MEDIA BLOCK STYLES --- */


/* --- Ajustări Responsive pentru Blocul Combinat (Layoutul Coloane pe Desktop) --- */
@media (min-width: 768px) {
    .combined-links-content {
        flex-direction: row; /* Aranjează secțiunile una lângă alta pe desktop */
        gap: 30px; /* Spațiu orizontal între coloane pe desktop */
        align-items: flex-start; /* Aliniază secțiunile la vârf */
    }

    /* Controlăm cum împart spațiul cele două secțiuni (grila socială și lista utilă) */
    .social-icons-grid {
         /* Dăm grilei sociale o bază flexibilă, astfel încât să nu se întindă prea mult */
         flex: 0 0 auto; /* Nu crește, nu se micșorează automat sub lățimea conținutului */
         max-width: 300px; /* Limitează lățimea maximă a grilei sociale pe desktop */
         /* margin: 0 auto; */ /* Elimină centrarea orizontală, Flexbox gestionează poziționarea */
         margin: 0; /* Reconfirmă marginile 0 */

         /* ADĂUGAT: Adaugă o bordură verticală subtilă la dreapta grilei sociale pentru separare */
         border-right: 1px solid rgba(160, 138, 106, 0.5); /* Linie verticală */
         padding-right: 30px; /* Spațiu între grilă și linia separatoare */
         margin-right: 0; /* Compensează padding-ul cu margin-ul (nu -30px, ci 0 dacă gap gestionează spațiul) */
    }

    .useful-links-list {
         /* Permite listei de linkuri utile să ocupe spațiul rămas */
         flex: 1; /* Crește și ocupă spațiul rămas */
         min-width: 200px; /* Lățime minimă înainte de a se micșora prea mult */
         margin-top: 0; /* Elimină margin-top vertical (Flexbox aliniază) */
    }
}

@media (max-width: 767px) {
     /* Pe mobil, rămân stivuite - stilurile implicite sunt ok */
     .combined-links-content {
         flex-direction: column;
         gap: 20px;
     }
     /* Elimină bordura verticală pe mobil dacă a fost adăugată */
     .social-icons-grid {
         border-right: none;
         padding-right: 0;
         margin-right: 0;
         /* margin: 0 auto; */ /* Păstrează centrarea orizontală pe mobil dacă dorești */
     }
      .useful-links-list {
         margin-top: 0; /* Gap gestionează spațiul */
     }
}


/* Stiluri pentru Blocul de Statistici */
.item-stats {
    margin-bottom: 25px; /* Spațiu sub blocul de statistici */
    border: 1px solid #3a312a;
    border-radius: 5px;
    padding: 15px;
    background-color: #2e2720;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Stiluri pentru fiecare Linie de Statistică */
.stat-item {
    display: flex; /* Folosește Flexbox pentru nume: valoare */
    justify-content: space-between; /* Spațiază nume și valoare la capete */
    margin-bottom: 10px; /* Spațiu între linii */
    padding-bottom: 8px;
    border-bottom: 1px dotted rgba(160, 138, 106, 0.3); /* Linie punctată între stat-uri */
}

.stat-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none; /* Elimină bordura de la ultima linie */
}

.stat-name {
    font-weight: bold;
    color: #e0d8cc;
    font-size: 1em;
    display: flex;
    align-items: center;
}

.stat-name img {
    width: 18px; /* Mărime iconiță stat */
    height: auto;
    margin-right: 8px; /* Spațiu între iconiță și text */
    vertical-align: middle;
}

.stat-value {
    color: #ffcc66; /* Culoare accent pentru valoare */
    font-size: 1em;
}

/* Stiluri pentru Blocul de Preț */
.item-price-block {
    font-size: 1.3em; /* Mărime font pentru preț */
    color: #ffcc66;
    margin-bottom: 25px; /* Spațiu sub preț */
    text-align: center; /* Centrează prețul */
    font-weight: bold;
    padding: 10px 15px;
    border: 1px dashed #a08a6a; /* Bordură punctată */
    border-radius: 5px;
    background-color: #3a312a;
}

.price-label img {
     width: 22px; /* Mărime iconiță preț */
     height: auto;
     margin-right: 8px;
     vertical-align: middle;
}

.price-value {
    color: #fff5e7; /* Culoare diferită pentru valoarea prețului */
}


/* Stiluri pentru Blocul de Contact */
.contact-info-block {
    margin-top: 20px; /* Spațiu deasupra blocului de contact */
    border: 1px solid #3a312a;
    border-radius: 5px;
    padding: 15px;
    background-color: #2e2720;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Stiluri pentru Blocul de Contact - Titlu (Îmbunătățit - Mai Pronunțat) */
.contact-info-block h3 {
    color: #ffcc66;
    margin-top: 0;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    background-color: rgba(46, 39, 32, 0.7); /* Ușor mai puțin transparent */
    padding: 10px 15px;
    padding-bottom: 8px;

    border-bottom: 1px dotted rgba(160, 138, 106, 0.5);
    border-top: 1px solid rgba(160, 138, 106, 0.5);
    border-radius: 4px;

    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;

    /* ADĂUGAT: Umbră la blocul titlului pentru proeminență */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.contact-info-block h3 i {
    margin-right: 8px;
    color: #a08a6a;
}

.contact-info-block p {
    margin-bottom: 10px;
    display: flex; /* Folosește Flexbox pentru a alinia iconița, textul și small */
    align-items: center;
}

.contact-info-block p:last-child {
    margin-bottom: 0;
}

.contact-info-block p img {
    width: 20px; /* Mărime iconiță contact */
    height: auto;
    margin-right: 10px;
    vertical-align: middle; /* Aliniază imaginea */
    flex-shrink: 0; /* Previne micșorarea iconiței */
}

.contact-info-block p span {
    color: #e0d8cc;
    font-size: 1em;
    flex-grow: 1; /* Permite textului să ocupe spațiul */
    word-break: break-word; /* Ajută la ruperea textului lung */
}

.contact-info-block p small {
    color: #a0988a;
    font-size: 0.85em;
    margin-left: 10px;
    flex-shrink: 0; /* Previne micșorarea textului small */
}

/* Stiluri Responsive pentru Prezentarea Itemului */
@media (min-width: 768px) { /* Pe ecrane mai mari (desktop), așează imaginea și info una lângă alta */
    .item-presentation-container {
        flex-direction: row; /* Elemente pe orizontală */
        gap: 40px; /* Spațiu orizontal mai mare */
    }

    .item-image-section {
        flex-basis: 400px; /* Bază fixă pentru imagine pe desktop */
        flex-grow: 0; /* Nu crește dincolo de bază */
        flex-shrink: 0; /* Nu se micșorează sub bază (până la un punct) */
         margin: 0; /* Elimină centrarea orizontală */
    }

    .item-info-section {
        flex-basis: 0; /* Bază flexibilă pentru info */
        flex-grow: 1; /* Ocupă spațiul rămas */
         min-width: 0; /* Permite micșorarea sub conținut dacă e necesar */
    }

    .item-title {
        text-align: center; /* Centrează titlul pe mobil */
        font-size: 1.6em; /* Mărime font puțin redusă pe mobil */
        margin-bottom: 20px;
        padding: 8px 12px;
    }

    .item-price-block {
        text-align: left; /* Aliniază prețul la stânga pe desktop */
    }
}

@media (max-width: 500px) { /* Ajustări suplimentare pentru telefoane mici */
    .item-presentation-container {
        padding: 15px;
        gap: 20px;
    }
    .item-title {
        font-size: 1.4em;
        margin-bottom: 15px;
        padding: 6px 10px;
    }
     .item-stats { padding: 10px; margin-bottom: 20px; }
     .stat-item { margin-bottom: 8px; padding-bottom: 6px; }
     .stat-name img { width: 16px; margin-right: 6px; }
     .item-price-block { font-size: 1.2em; margin-bottom: 20px; padding: 8px 10px; }
     .price-label img { width: 20px; margin-right: 6px; }
     .contact-info-block { padding: 10px; }
     .contact-info-block h3 { font-size: 1.1em; margin-bottom: 10px; }
     .contact-info-block p { margin-bottom: 8px; }
     .contact-info-block p img { width: 18px; margin-right: 8px; }
     .contact-info-block p small { font-size: 0.8em; margin-left: 8px; }
}

/* --- Stilurile pentru Titlurile Secțiunilor (h3) - Revizuite cu bordura punctată --- */
/* Asigură-te că aceste stiluri le înlocuiesc pe cele vechi */
.info-block h3,
.category-nav h3,
.contact-info-block h3 {
    color: #ffcc66;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif; /* Folosește un font consistent */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    /* Stiluri îmbunătățite */
    background-color: rgba(46, 39, 32, 0.6); /* Fundal semi-transparent */
    padding: 10px 15px; /* Padding interior (sus/dreapta/stanga) */
    padding-bottom: 5px; /* <-- Spațiu la bază, între text și bordura punctată */
    border-left: 3px solid #ffcc66; /* Accent vertical pe stânga */
    /* border-bottom: 1px dotted rgba(160, 138, 106, 0.5); */
    border-radius: 4px; /* Colțuri rotunjite */
    margin-bottom: 15px; /* Spațiu sub bordura punctată și blocul titlului */
    /* text-align este definit individual unde este necesar (ex: category-nav h3) */
}

/* Stil pentru iconițele din titlurile H3 */
.info-block h3 i,
.category-nav h3 i,
.contact-info-block h3 i {
    margin-right: 8px;
    color: #a08a6a; /* Culoarea iconițelor din titluri */
}

/* --- Sfârșit Stiluri Titluri Secțiuni --- */


/* Refine Category Buttons */
.category-buttons a {
	/* Existing styles: display, background, color, padding, text-align, decoration, border, radius, shadow, transition, weight, shadow, size */
    /* Add more distinct hover and active states */
    position: relative; /* Needed for potential ::before/::after effects or indicators */
    overflow: hidden; /* Hide anything outside the rounded corners */
}

.category-buttons a:hover {
    /* Existing hover styles */
    transform: translateY(-2px); /* Slightly less lift on hover */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.6); /* Slightly adjusted shadow */
}

/* Optional: Active state for the current category button */
.category-buttons a.active-category { /* Add a class "active-category" to the link of the currently viewed category */
    background-color: #ffcc66; /* Solid accent color background */
    color: #28221c; /* Dark text */
    border-color: #ffebcd;
    box-shadow:
        inset 0 1px 5px rgba(0, 0, 0, 0.2), /* Inner shadow */
        0 2px 5px rgba(0, 0, 0, 0.3); /* Outer shadow */
    cursor: default; /* Change cursor for active item */
    /* Remove hover effects for active item if desired */
    /* pointer-events: none; */
}

/* Optional: Add a subtle indicator for the active category */
.category-buttons a.active-category::before {
    content: '►'; /* Or a Font Awesome icon like '\f054' */
    font-family: 'Font Awesome 5 Free'; /* Or the font you use for icons */
    font-weight: 900; /* Or the appropriate weight for your icon font */
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #28221c; /* Dark color to contrast with yellow background */
    font-size: 0.8em;
}


/* Refine Additional Links List Items */
.additional-links li {
    /* Existing styles: display, align-items, padding, border-bottom, transition, background-color (on hover) */
     border-left: 3px solid transparent; /* Add a transparent left border */
     transition: background-color 0.2s ease, border-left-color 0.2s ease; /* Add transition for border color */
}

.additional-links li:hover {
    background-color: #4a4035; /* Existing hover background */
    border-left-color: #ffcc66; /* Change left border color on hover */
}

.additional-links li i {
    /* Existing icon styles */
    color: #ffcc66; /* Ensure icon color is consistent */
}

.additional-links li a {
    /* Existing link styles */
     color: #e0d8cc; /* Ensure base link color */
}

.additional-links li a:hover {
    color: #ffcc66; /* Existing hover link color */
}


/* Optional: Alternative style for panel-divider (replace HR) */
/* If you want a more stylized separator */
/*
.panel-divider {
    border: none;
    height: 1px;
    background-color: #4a4035; // A simple solid line matching border color
    margin: 30px 0; // Adjust spacing
    width: 80%; // Make it slightly narrower
    margin-left: auto;
    margin-right: auto;
}
*/


/* Stiluri pentru Blocul de Statistici */
.item-stats {
    margin-bottom: 25px; /* Spațiu sub blocul de statistici */
    border: 1px solid #3a312a;
    border-radius: 5px;
    padding: 15px;
    background-color: #2e2720;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Stiluri pentru fiecare Linie de Statistică */
.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dotted rgba(160, 138, 106, 0.3);
    /* Adaugă padding interior și background subtil */
    padding: 10px 12px; /* Padding interior pentru rând */
    margin: 0 -12px 8px -12px; /* Negative margin to extend background to edges of parent padding */
    border-radius: 4px; /* Colțuri ușor rotunjite */
}

.stat-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Stiluri pentru rânduri alternative în statistici */
.stat-item:nth-child(odd) { /* Aplică stiluri rândurilor impare (1, 3, 5...) */
    background-color: rgba(46, 39, 32, 0.4); /* Fundal ușor mai închis/transparent */
}

.stat-item:nth-child(even) { /* Aplică stiluri rândurilor pare (2, 4, 6...) */
    background-color: rgba(58, 49, 42, 0.4); /* Alt fundal ușor diferit */
}

.stat-name {
    font-weight: bold;
    color: #e0d8cc;
    font-size: 1em;
    display: flex;
    align-items: center;
}

.stat-name img {
    width: 18px;
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}

.stat-value {
    color: #ffcc66;
    font-size: 1em;
    word-break: break-word; /* Ensure long values break */
}

/* Stiluri pentru Blocul de Preț (Revizuite) */
.item-price-block {
    font-size: 1.4em; /* Mărește puțin fontul pentru preț */
    color: #ffcc66; /* Culoarea accent pentru întregul bloc */
    margin-bottom: 25px; /* Spațiu sub preț */
    text-align: center; /* Centrează prețul */
    font-weight: bold;
    padding: 12px 15px; /* Mărește padding-ul */
    border: 1px solid #ffcc66; /* Bordură solidă cu culoare accent */
    border-radius: 5px;
    background-color: #3a312a; /* Fundal consistent */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.price-label img {
     width: 22px;
     height: auto;
     margin-right: 8px;
     vertical-align: middle;
}

.price-value {
    color: #fff5e7; /* Păstrează culoarea foarte deschisă pentru valoarea prețului */
    margin-left: 5px; /* Adaugă un mic spațiu între "Pret:" și valoare */
}

/* Stiluri pentru Blocul de Contact (Păstrate) */
/* ... contact-info-block styles ... */

/* Stiluri de baza pentru containerul de layout */
.panel-content-layout {
    display: flex; /* Activeaza Flexbox */
    flex-wrap: wrap; /* Permite elementelor sa treaca pe randul urmator pe ecrane mici */
    gap: 20px; /* Adauga spatiu intre coloane/randuri */
    /* justify-content: space-between; */ /* Optional: distribuie spatiul pe orizontala */
    /* align-items: flex-start; */ /* Optional: aliniaza elementele de sus */
}

/* Stiluri de baza pentru zonele de layout (coloanele stanga/dreapta) */
.layout-area {
    flex: 1; /* Permite coloanelor sa creasca si sa ocupe spatiul disponibil */
    min-width: 300px; /* Latimea minima pentru fiecare coloana inainte de wrap */
    /* Ajusteaza 300px daca vrei sa fie mai late/inguste implicit */
}

/* Stiluri specifice pentru separatorul dintre Info si Linkuri Utile (in coloana stanga) */
.separator-vertical {
    display: block; /* Afiseaza acest separator */
    width: 100%; /* Ocupa toata latimea coloanei in care se afla */
    margin-top: 20px; /* Spatiu deasupra */
    margin-bottom: 20px; /* Spatiu dedesubt */
    border: none; /* Elimina bordura implicita a HR */
    height: 1px; /* Inaltimea liniei */
    background-color: #ddd; /* Culoarea liniei - ajusteaza dupa design */
}

/* Stiluri specifice pentru separatorul dintre cele doua coloane */
.separator-column {
    display: none; /* Implicit, ascunde separatorul vertical pe ecrane mici */
}


/* Media query pentru ecrane mai mari (de exemplu, desktop) */
/* Seteaza pragul (aici 768px) in functie de breakpoint-urile designului tau */
@media (min-width: 768px) {
    .panel-content-layout {
        flex-direction: row; /* Asaza elementele pe orizontala (ca si coloane) */
        /* Poti ajusta flex-grow/flex-basis pentru a da latimi diferite coloanelor */
        /* Exemplu: coloana stanga mai ingusta, dreapta mai lata */
        /* .left-column.layout-area { flex: 1; } */
        /* .right-column.layout-area { flex: 2; } */ /* Dreapta de 2 ori mai lata */
    }

    .layout-area {
         min-width: 0; /* Reseteaza min-width cand sunt pe aceeasi linie */
    }

    /* Afiseaza separatorul vertical intre coloane pe ecrane mari */
    .separator-column {
        display: block; /* Afiseaza separatorul */
        width: 1px; /* Latimea liniei verticale */
        height: auto; /* Inaltimea sa se intinda cat continutul parintelui */
        background-color: #ccc; /* Culoarea liniei - ajusteaza */
        border: none;
        margin: 0 20px; /* Spatiu stanga-dreapta in jurul separatorului */
        /* Poti ajusta margin-top/bottom daca este necesar */
    }

     /* Poti alege sa ascunzi separatorul vertical din coloana stanga pe desktop */
     .separator-vertical {
         /* display: none; */
     }
}


.category-buttons li a {
    display: block; /* Face ca zona de click sa fie tot elementul LI */
    padding: 10px; /* Adauga spatiu in interiorul butoanelor */
    text-align: center; /* Centreaza textul si iconita */
    text-decoration: none; /* Elimina underline de la link */
    /* Adauga aici stiluri de fundal, bordura, culori text etc. pentru butoane */
}

/* Stiluri de baza pentru listele de contact si linkuri utile */
.contact-list,
.additional-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-list li,
.additional-links li {
    margin-bottom: 10px; /* Spatiu sub fiecare element de lista */
    /* Poti adauga stiluri specifice pentru iconite, text etc. */
}

/* --- NEW ITEM DETAIL STYLES (based on your style.css) --- */

/* Main wrapper for the entire item presentation */
.item-detail-wrapper {
    /* Similar to .itemshop-panel in your original CSS */
    max-width: 900px; /* Adjusted max width for potentially larger image/layout */
    margin: 20px auto; /* Center the block, add some top/bottom margin */
    background: linear-gradient(to bottom, #2c251e, #1e1813);
    border: 1px solid #a08a6a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    font-family: 'Arial', sans-serif; /* Use a font consistent with your theme */
    color: #e0d8cc;
    position: relative;
    box-sizing: border-box;
}

/* Inner border effect */
.item-detail-wrapper::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid rgba(255, 204, 102, 0.2);
    border-radius: 5px;
    pointer-events: none;
}

/* Revertim la stilurile controlate pentru padding-ul corpului panelului */
.detail-body-content {
    /* Păstrăm padding-ul standard pentru a avea spațiu în jurul conținutului */
    padding: 20px; /* Valoarea default pe care o aveam */
    box-sizing: border-box;
    overflow: hidden; /* Păstrăm overflow: hidden */
}

/* Styles for the Breadcrumb navigation */
.detail-nav-path {
    /* Similar to .breadcrumb in your new CSS additions */
    font-size: 0.9em;
    color: #a0988a;
    margin-bottom: 20px; /* More space below breadcrumb */
    padding: 10px 15px;
    background-color: #221c17;
    border: 1px solid #3a312a;
    border-radius: 5px;
    text-align: left;
}

.detail-nav-path a {
    color: #e0d8cc;
    text-decoration: none;
    transition: color 0.2s ease;
}

.detail-nav-path a:hover {
    color: #ffcc66;
    text-decoration: underline;
}

.detail-nav-path .path-separator {
    margin: 0 8px;
    color: #a08a8a;
}

.detail-nav-path .current-item-category {
    color: #ffcc66;
    font-weight: bold;
}

/* Container for the Image and Basic Info (Title, Price) */
.item-primary-section {
    display: flex; /* Arrange image and overview block */
    flex-direction: column; /* Stack on smaller screens */
    gap: 30px; /* Space between image and info */
    margin-bottom: 30px; /* Space below this entire section */
    padding-bottom: 30px; /* Inner space at the bottom */
    border-bottom: 1px solid #3a312a; /* Separator line below primary section */
}

/* Container Vizual (Slideshow) - Dimensiune FIXĂ bazată pe poza originală */
.item-visual-container {
    /* SETEAZĂ LĂȚIMEA ȘI ÎNĂLȚIMEA FIXĂ AICI, ÎN PIXELI */
    width: 520; /* <-- ÎNLOCUIEȘTE XXX cu lățimea originală a pozei (ex: 800px) */
    height: 299; /* <-- ÎNLOCUIEȘTE YYY cu înălțimea originală a pozei (ex: 450px) */

    /* Asigură că dimensiunea rămâne fixă */
    max-width: XXXpx;
    min-width: XXXpx;
    max-height: YYYpx;
    min-height: YYYpx;

    margin: 0 auto; /* Centrează blocul pe orizontală */
    margin-bottom: 30px; /* Spațiu sub slideshow */
    overflow: hidden; /* Ascunde ce iese din borduri */
    border-radius: 8px; /* Rotunjește colțurile containerului */
    background-color: #1e1813; /* Fundal */
    box-sizing: border-box; /* Include padding/border în lățime/înălțime */

    /* Asigură că elementele interne ale sliderului umplu acest container fix */
     .visual-slider-wrapper,
     .nivoSlider {
         width: 100% !important; /* Umple 100% din containerul părinte (.item-visual-container) */
         height: 100% !important; /* Umple 100% din înălțimea containerului părinte */
         margin: 0 !important;
         padding: 0 !important;
         box-sizing: border-box !important;
     }
     /* Asigură că imaginile din slider se scalează PENTRU A SE POTRIVI containerului fix */
     .visual-slider-wrapper img,
     .visual-slider-wrapper .nivo-main-image,
     .nivoSlider img,
     .nivoSlider .nivo-main-image {
        width: 100% !important; /* Lățimea imaginii este 100% din container */
        height: 100% !important; /* Înălțimea imaginii este 100% din container */
        max-width: 100% !important; /* Nu depășește containerul */
        max-height: 100% !important; /* Nu depășește containerul */
        /* FOARTE IMPORTANT: Cum se scalează imaginea în spațiul fix: */
        object-fit: cover; /* Scalează imaginea să acopere spațiul, poate tăia din margini, dar evită deformarea */
        /* SAU: object-fit: contain; /* Scalează imaginea să încapă în spațiu, arată toată imaginea, dar poate lăsa spațiu gol */

        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
     }
}

/* (The Nivo Slider styles will be handled by the theme-default class and nivo-slider.css you already have) */
/* .visual-slider-wrapper {} */


/* Container for Title and Price */
.item-overview-block {
    flex: 1 1 auto; /* Allow to grow/shrink */
     max-width: 100%; /* Ensure it doesn't overflow */
     text-align: center; /* Center text on smaller screens */
}

/* Item Title */
.item-main-title {
	/* Similar to .item-title in your new CSS additions */
	font-size: 2em; /* Larger font size for the main title */
	color: #ffcc66;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	padding: 10px 0; /* Padding above/below */
	margin-bottom: 20px; /* Space below title */
	border-bottom: 2px solid #a08a6a; /* Stronger separator */
	display: inline-block; /* Allow border-bottom to fit content width if needed, or use block for full width */
	padding-bottom: 15px; /* More space below text, above border */
    /* Proprietatea pentru centrare text este deja aici: */
	text-align: center; /* Centrarea textului */
}

/* Price Block */
.item-price-details {
    /* Similar to .item-price-block in your new CSS additions */
    font-size: 1.5em; /* Prominent price font size */
    color: #ffcc66;
    margin-top: 20px; /* Space above price */
    margin-bottom: 20px; /* Space below price */
    text-align: center; /* Center price */
    font-weight: bold;
    padding: 15px 20px;
    border: 1px solid #ffcc66; /* Accent border */
    border-radius: 5px;
    background-color: #3a312a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: inline-block; /* Wrap around content */
     /* Remove display: inline-block; and use text-align: center; on parent if you want it centered but full width */
}

.price-label-text img {
     width: 24px; /* Slightly larger icon for price */
     height: auto;
     margin-right: 10px;
     vertical-align: middle;
}

.price-current-value {
    color: #fff5e7;
    margin-left: 5px;
}

/* Container for Secondary Information (Stats and Contact) */
.item-secondary-section {
    display: flex; /* Arrange stats and contact */
    flex-direction: column; /* Stack on smaller screens */
    gap: 30px; /* Space between stats and contact blocks */
}

/* Item Attribute List (Stats) Block */
.item-attribute-list {
    /* Similar to .item-stats in your new CSS additions */
    flex: 1; /* Allow to grow/shrink */
    min-width: 280px; /* Minimum width before wrapping */
    border: 1px solid #3a312a;
    border-radius: 5px;
    padding: 20px; /* More padding */
    background-color: #2e2720;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Stiluri pentru Blocul de Statistici - Titlu (Îmbunătățit) */
.item-attribute-list h3 {
    color: #ffcc66;
    margin-top: 0;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    background-color: rgba(46, 39, 32, 0.7); /* Ușor mai puțin transparent */
    padding: 10px 15px;
    padding-bottom: 8px;

    border-bottom: 1px dotted rgba(160, 138, 106, 0.5);
    border-top: 1px solid rgba(160, 138, 106, 0.5);
    border-radius: 4px;

    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;

    /* ADĂUGAT: Umbră la blocul titlului pentru proeminență */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* Dacă folosești o iconiță în H3 (de exemplu <i class="fas fa-list"></i> Atribute): */
.item-attribute-list h3 i {
    margin-right: 8px;
    color: #a08a6a;
}


/* Individual Attribute Row (Stat Item) */
.attribute-row {
    display: flex;
    justify-content: space-between; /* Name on left, Value on right */
    align-items: center; /* Vertically align content */
    padding: 10px 0; /* Padding above/below each row */
    border-bottom: 1px dotted rgba(160, 138, 106, 0.3); /* Separator */
}

.attribute-row:last-child {
    border-bottom: none; /* No border after last row */
}

/* Stat Name (Label) */
.attribute-name {
    font-weight: bold;
    color: #e0d8cc;
    font-size: 1em;
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking */
    margin-right: 15px; /* Space between name and value */
}

.attribute-name img {
    width: 18px;
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}

/* Stat Value */
.attribute-value {
    color: #ffcc66;
    font-size: 1em;
    text-align: right; /* Align value to the right */
    word-break: break-word; /* Break long text */
}

/* Item Seller Contact Block */
.item-seller-contact {
    /* Similar to .contact-info-block in your new CSS additions */
    flex: 1; /* Allow to grow/shrink */
    min-width: 280px; /* Minimum width before wrapping */
    border: 1px solid #3a312a;
    border-radius: 5px;
    padding: 20px; /* More padding */
    background-color: #2e2720;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Stiluri pentru Blocul de Contact Vânzător - Titlu (Îmbunătățit) */
.item-seller-contact h3 {
    color: #ffcc66;
    margin-top: 0;
    font-size: 1.2em;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

    background-color: rgba(46, 39, 32, 0.7); /* Ușor mai puțin transparent */
    padding: 10px 15px;
    padding-bottom: 8px;

    border-bottom: 1px dotted rgba(160, 138, 106, 0.5);
    border-top: 1px solid rgba(160, 138, 106, 0.5);
    border-radius: 4px;

    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;

    /* ADĂUGAT: Umbră la blocul titlului pentru proeminență */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* Dacă folosești o iconiță în H3 (de exemplu <i class="fas fa-envelope"></i> Contact): */
.item-seller-contact h3 i {
    margin-right: 8px;
    color: #a08a6a;
}

/* Individual Contact Method */
.seller-contact-method {
    display: flex; /* Arrange icon, value, type */
    align-items: center;
    margin-bottom: 15px; /* Space between methods */
    padding-bottom: 15px;
    border-bottom: 1px dotted rgba(160, 138, 106, 0.3); /* Separator */
}

.seller-contact-method:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.contact-icon-image {
    width: 24px; /* Icon size */
    height: auto;
    margin-right: 15px; /* Space after icon */
    vertical-align: middle;
    flex-shrink: 0;
}

.contact-value-text {
    color: #e0d8cc;
    font-size: 1em;
    flex-grow: 1; /* Allow value text to take up space */
    margin-right: 10px; /* Space before type */
    word-break: break-word; /* Break long text */
}

.contact-method-type {
    color: #a0988a;
    font-size: 0.9em;
    flex-shrink: 0; /* Prevent shrinking */
}


/* --- Încă O Abordare: Stiluri pentru Containerul Principal (Încercare de Integrare Mai Bună) --- */
.main-panel-wrapper {
  /* Layout și Dimensiuni de bază (păstrează sau ajustează) */
  max-width: 900px; /* Lățimea maximă a panelului */
  margin: 20px auto; /* Centrează, spațiu sus/jos */

    /* --- Aspect Vizual Care Încearcă o Integrare Mai Bună (Chenar cu Straturi) --- */

  /* Fundal de bază: O culoare închisă, care poate servi ca stratul cel mai de jos al chenarului */
	background: linear-gradient(to bottom, #2c251e, #1e1813); /* Fundal gradient (din stil original) */
    /* Sau un gradient subtil: background: linear-gradient(to bottom, #251f1b, #1f1a16); */


  /* Bordură: Nu folosim bordură standard. Creăm vizual chenarul exterior cu umbre. */
  border: none;


  /* Umbre Multiple (box-shadow): Simulează un chenar cu mai multe linii și adaugă profunzime */
  box-shadow:
        0 0 0 1px #3a312a, /* Prima linie: contur subțire închis */
        0 0 0 2px #a08a6a, /* A doua linie: contur auriu/accent (similar cu bordura panel-header) */
        0 0 0 3px #3a312a, /* A treia linie: contur subțire închis exterior */
        0 8px 20px rgba(0, 0, 0, 0.8); /* Umbra exterioară principală pentru profunzime (mai intensă) */
        /* Ajustează culorile (#3a312a, #a08a6a) și valorile (spread - al 4-lea număr)
           pentru a schimba grosimea și aspectul liniilor chenarului. */


  /* Colțuri Rotunjite: Consistență */
  border-radius: 10px; /* Ajustează dacă preferi, dar păstrează consistența cu efectul chenarului */


  overflow: hidden;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  color: #e0d8cc;
  position: relative; /* Necesare pentru pseudo-element */
}

/* --- Pseudo-element ::before: Definește Zona Interioară de Conținut --- */
/* Acest element stă deasupra fundalului de bază și a primelor straturi de umbră, definind zona principală vizibilă */
.main-panel-wrapper::before {
 content: '';
 position: absolute;
 /* Poziționează pseudo-elementul puțin în interior față de marginile exterioare */
 /* Distanța ar trebui să fie egală cu grosimea totală a chenarului exterior creat de umbre */
 top: 3px; left: 3px; right: 3px; bottom: 3px; /* Ajustează această distanță (inset) */
       /* Ex: dacă chenarul exterior are 3px grosime (cum e setat mai sus), inset-ul ar trebui să fie 3px */


 /* --- Aspectul Zonei Interioare --- */

     /* Fundalul zonei unde va sta conținutul */
 /*background-color: #2e2720;*/ /* Culoare de fundal similară cu item box-uri */


 /* Bordură pentru zona interioară (opțional, pentru un contur suplimentar) */
 border: 1px solid rgba(74, 64, 53, 0.5); /* O bordură subtilă, semi-transparentă, în culoarea bordurii item-box */
       /* Sau o linie accent aurie: border: 1px solid rgba(255, 204, 102, 0.1); */


 /* Optional: Umbră interioară sau strălucire pe zona interioară */
     /* box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); */


 /* Rotunjimea Colțurilor Pseudo-elementului */
 /* Ar trebui să fie egală cu border-radius-ul părintelui minus valoarea inset-ului (top/left etc.) */
 border-radius: 7px; /* Ex: 10px border-radius parinte - 3px inset = 7px */


 pointer-events: none;
}

/* --- END: Încă O Abordare Stiluri --- */


/* Antetul Panelului */
/* Păstrăm stilurile cu gradient, bordură jos, umbre text etc. (din stil original și îmbunătățiri) */
/* Antetul Panelului */


/* Zona de conținut principală a panelului */
.panel-content {
    padding: 20px; /* Padding interior (din stil original) */
    box-sizing: border-box;
    overflow: hidden;
    position: relative; /* Stabilește un nou context de suprapunere pentru acest element */
    z-index: 1; /* Asigură-te că acest element este plasat deasupra pseudo-elementului ::before */
  	
}

/* Stiluri pentru Breadcrumb */
.breadcrumb {
    font-size: 0.9em;
    color: #a0988a;
    margin-bottom: 20px; /* Spațiu sub breadcrumb */
    text-align: left;
}
.breadcrumb a { color: #e0d8cc; text-decoration: none; transition: color 0.2s ease; }
.breadcrumb a:hover { color: #ffcc66; text-decoration: underline; }
.breadcrumb .separator { margin: 0 5px; color: #a08a8a; }
.breadcrumb .current-item-category { color: #ffcc66; font-weight: bold; } /* Clasă actualizată din HTML */



/* Container Principal pentru aranjarea blocurilor de conținut (Utilizează Flexbox pentru Layout) */
.main-layout-area {
    display: flex; /* Activează Flexbox */
    flex-direction: column; /* Pe mobil, COLOANELE se stivuiesc */
    gap: 20px; /* Spațiul vertical între COLOANE pe mobil și ÎNTRE blocurile din COLOANE */
}


/* --- Stiluri pentru Pagina Cumpără VIP --- */

/* Container pentru grila de pachete VIP (opțional, dacă vrei aranjare pe coloane) */
.vip-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Grilă responsive */
    gap: 20px; /* Spațiu între blocurile VIP */
    margin-top: 20px;
}

.combined-links-block2:hover {
    transform: translateY(-7px); /* Efectul de ridicare */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
	/* cursor: pointer; */ /* Aceasta linie este comentată corect acum */
	/* Poți adăuga și alte modificări de stil aici, de ex. border-color */
	border-color: #ffcc66; /* <-- Sintaxa este CORECTĂ acum */
}


/* Stil de bază pentru fiecare bloc de pachet VIP */
.vip-tier-block {
    background-color: #3a3a3a; /* Fundal similar cu blocurile de donații sau puțin diferit */
    border: 1px solid #555; /* Bordură implicită */
    border-radius: 8px;
    overflow: hidden; /* Asigură ca bordurile și fundalul să fie conținute */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex; /* Folosim flexbox pentru a aranja header, body, footer pe verticală */
    flex-direction: column;
}

/* Stiluri specifice pentru fiecare nivel VIP (culoarea bordurii, poate și a fundalului header-ului) */
.vip-tier-block.bronze {
    border-color: #b87333; /* Culoare bronz */
}
.vip-tier-block.silver {
    border-color: silver; /* Culoare argintiu */
}
.vip-tier-block.gold {
    border-color: gold; /* Culoare aurie */
}


/* Stil pentru secțiunea de antet a blocului VIP (nume tier, preț) */
.vip-tier-header {
    background-color: #4a4a4a; /* Fundal puțin mai închis/deschis decât corpul blocului */
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #555; /* Linie separatoare */
}

.vip-tier-header h4 {
    color: #eee; /* Text deschis */
    margin: 0 0 5px 0;
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: none; /* Eliminăm bordura de heading implicită */
    padding-bottom: 0;
}

/* Culoarea titlului H4 în funcție de nivel (opțional) */
.vip-tier-block.bronze .vip-tier-header h4 { color: #b87333; } /* Bronz */
.vip-tier-block.silver .vip-tier-header h4 { color: silver; } /* Argintiu */
.vip-tier-block.gold .vip-tier-header h4 { color: gold; } /* Auriu */


.vip-tier-header .vip-price {
    color: #2ecc71; /* Culoare Verde pentru preț */
    font-size: 1.2em;
    margin: 5px 0 0 0;
    font-weight: bold;
}

.vip-tier-header .vip-price code {
     background-color: #444; /* Fundal închis pentru codul prețului */
     color: #ffeb3b; /* Culoare accent Galben */
     padding: 3px 6px;
     border-radius: 4px;
     font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}


/* Stil pentru secțiunea principală a blocului VIP (beneficii) */
.vip-tier-body {
    padding: 15px;
    flex-grow: 1; /* Face ca body să ocupe spațiul disponibil și footer-ul să stea jos */
}

.vip-tier-body h5 {
    color: #ddd; /* Culoare text deschis pentru subtitlu beneficii */
    margin: 0 0 10px 0;
    font-size: 1.1em;
    font-weight: bold;
}

.vip-tier-body ul {
    list-style: none; /* Fără bullet points implicite, folosim iconițe */
    padding: 0;
    margin: 0;
}

.vip-tier-body li {
    margin-bottom: 8px;
    color: #eee; /* Text deschis pentru beneficii */
    line-height: 1.5;
}

.vip-tier-body li .fas {
    color: #2ecc71; /* Iconițe de checkmark Verzi */
    margin-right: 8px;
}

.vip-tier-body strong {
    color: #eee; /* Text bold standard, sau poți folosi o culoare accent */
}


/* Stil pentru secțiunea de subsol a blocului VIP (buton cumpărare) */
.vip-tier-footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid #555; /* Linie separatoare */
    background-color: #4a4a4a; /* Fundal similar cu header-ul */
}

/* Stil de bază pentru butoanele de cumpărare VIP */
.buy-vip-button {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Culori specifice pentru butoanele fiecărui nivel VIP */
.buy-vip-button.bronze-button {
    background-color: #b87333; /* Culoare bronz */
}
.buy-vip-button.silver-button {
    background-color: silver; /* Culoare argintiu */
}
.buy-vip-button.gold-button {
    background-color: gold; /* Culoare aurie */
}

/* Efect hover pentru butoane */
.buy-vip-button.bronze-button:hover { background-color: #a5652a; }
.buy-vip-button.silver-button:hover { background-color: #b0b0b0; }
.buy-vip-button.gold-button:hover { background-color: #daa520; }

/* Stil pentru textul Notă de la sfârșitul paginii VIP */
.panel-body > p:last-child strong .fas {
    color: #3498db; /* Culoare Albastră pentru iconița din Notă */
}

/* --- Responsive Adjustments --- */

@media (min-width: 768px) { /* Desktop layout */
    .item-primary-section {
        flex-direction: row; /* Image and overview side-by-side */
        gap: 40px; /* More space between them */
    }

    .item-overview-block {
        flex: 1; /* Allow info block to take remaining space */
         text-align: left; /* Align text to left on desktop */
    }

     .item-main-title {
         text-align: left; /* Align title left on desktop */
         display: block; /* Ensure it takes full width if needed */
     }

     .item-price-details {
         text-align: left; /* Align price left on desktop */
          display: block; /* Ensure it takes full width if needed */
     }


    .item-secondary-section {
        flex-direction: row; /* Stats and Contact side-by-side */
        gap: 40px; /* More space between them */
        margin-top: 30px; /* Space above secondary section */
    }

    .item-attribute-list,
    .item-seller-contact {
         flex: 1; /* Allow both blocks to share space equally */
         min-width: 0; /* Allow shrinking below content if necessary */
    }
}

@media (max-width: 767px) { /* Mobile adjustments */
    .item-detail-wrapper {
        margin: 10px; /* Reduce margin on small screens */
    }

    .detail-body-content {
        padding: 15px; /* Reduce padding */
    }

    .detail-nav-path {
        margin-bottom: 15px;
        padding: 8px 10px;
    }

    .item-primary-section {
        gap: 20px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .item-main-title {
        font-size: 1.6em; /* Smaller title on mobile */
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .item-price-details {
        font-size: 1.3em; /* Smaller price on mobile */
        margin-top: 15px;
        margin-bottom: 15px;
        padding: 10px 15px;
    }

    .price-label-text img {
        width: 20px;
    }

    .item-secondary-section {
         gap: 20px;
         margin-top: 20px;
    }

     .item-attribute-list,
    .item-seller-contact {
         padding: 15px;
    }

    .item-attribute-list h3,
    .item-seller-contact h3 {
         font-size: 1.1em;
         margin-bottom: 10px;
         padding-bottom: 6px;
    }

    .attribute-row,
    .seller-contact-method {
        padding: 8px 0;
        margin-bottom: 10px;
    }

    .attribute-name img {
         width: 16px;
         margin-right: 6px;
    }

    .contact-icon-image {
         width: 20px;
         margin-right: 10px;
    }

     .contact-value-text, .contact-method-type {
         font-size: 0.9em;
     }
}

/* --- END NEW ITEM DETAIL STYLES --- */

/* --- START: Sticky Navbar Styles --- */

.sticky-navbar {
    position: fixed; /* Face navbar-ul să rămână fixat pe ecran */
    top: 0; /* Poziționează navbar-ul în partea de sus */
    left: 0;
    width: 100%; /* Se întinde pe toată lățimea */
    z-index: 1000; /* Asigură că navbar-ul este deasupra altor elemente */
    background-color: rgba(30, 24, 19, 0.9); /* Fundal semi-transparent consistent cu tema */
    border-bottom: 1px solid rgba(160, 138, 106, 0.5); /* Bordură subțire jos */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Umbră sub navbar */
    padding: 10px 20px; /* Spațiu interior */
    box-sizing: border-box;
    transform: translateY(-100%); /* Inițial, ascunde navbar-ul deasupra ecranului */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Tranziție lină la apariție/disparitie */
    opacity: 0; /* Inițial, navbar-ul este transparent */
    pointer-events: none; /* Nu permite click-uri când este invizibil */
    font-family: 'Arial', sans-serif; /* Font consistent */
}

/* Starea vizibilă a navbar-ului (clasa adăugată cu JavaScript) */
.sticky-navbar.visible {
    transform: translateY(0); /* Adus înapoi în vizor */
    opacity: 1; /* Devine complet vizibil */
    pointer-events: auto; /* Permite click-uri */
}

.navbar-container {
    max-width: 960px; /* Limitează lățimea conținutului din navbar (ajustează la lățimea site-ului tău) */
    margin: 0 auto; /* Centrează conținutul */
    display: flex; /* Folosim flexbox pentru a alinia logo/titlu și link-uri */
    justify-content: center; /* Centrează link-urile în container */
    align-items: center;
}

/* Stiluri pentru lista de link-uri */
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Aranjează link-urile pe orizontală */
    gap: 20px; /* Spațiu între link-uri */
}

/* Stiluri pentru fiecare element din listă */
.nav-item {
    margin: 0;
    padding: 0;
}

/* Stiluri pentru link-urile din navbar */
.nav-link {
    color: #e0d8cc; /* Culoarea textului link-ului */
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    padding: 5px 0;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    border-bottom: 2px solid transparent; /* Efect subtil de bordură la hover */
}

.nav-link:hover {
    color: #ffcc66; /* Culoarea accent la hover */
    border-bottom-color: #ffcc66; /* Bordura la hover */
}

/* Stiluri Responsive pentru Navbar */
@media (max-width: 768px) {
    .sticky-navbar {
        padding: 10px; /* Redu padding-ul pe ecrane mici */
    }

    .navbar-container {
        flex-direction: column; /* Stivuiește logo/titlu și link-urile pe verticală */
        gap: 10px; /* Spațiu între ele */
    }

    .nav-links {
        gap: 10px; /* Redu spațiul între link-uri pe mobil */
        justify-content: center; /* Centrează link-urile stivuite */
        flex-wrap: wrap; /* Permite link-urilor să treacă pe rând nou dacă sunt multe */
    }

    .nav-link {
        font-size: 0.9em; /* Redu mărimea fontului pe mobil */
        padding: 2px 5px; /* Redu padding-ul link-urilor */
    }
}

/* --- END: Sticky Navbar Styles --- */


#menubar {
    position: fixed; /* Face bara să rămână fixată sus */
    top: 0; /* O fixează în partea de sus */
    left: 0; /* O aliniază la marginea stângă a viewport-ului */
    width: 100%; /* Se întinde pe toată lățimea viewport-ului */
    /* transform: translateX(-50%); */ /* Nu mai este necesar, left/width acoperă tot */
    height: 57px;
    z-index: 100; /* Asigură că este deasupra altor elemente */
    background: url(images/menubar-top.png) no-repeat center top; /* Centrează imaginea de fundal */
    /* Poți adăuga background-size: cover; dacă vrei ca imaginea de fundal să acopere toată lățimea barei, inclusiv pe ecrane mici */
}

/* Stiluri pentru tabelul din interiorul #menubar */
#menubar table {
	position: relative;
	width: 100%; /* Tabelul ocupă 100% din lățimea părintelui (#menubar) */
    max-width: 1009px; /* Limitează lățimea maximă a tabelului la design-ul original */
	margin: auto; /* Centrează tabelul în interiorul #menubar */
	top: 17px; /* Poziționează tabelul la 17px de susul #menubar */
     /* Asigură că padding-ul celulelor nu cauzează probleme */
     border-collapse: collapse; /* Ajută la controlul spațierii */
}

#menubar a {
	color: #ffffff;
	-webkit-transition: color .15s ease-out;
	-moz-transition: color .15s ease-out;
	-o-transition: color .15s ease-out;
	transition: color .15s ease-out;
	text-shadow: 0px 0px 3px #000000;
    /* Adaugă display: block; și padding la link-uri dacă vrei zone mai mari de click */
    /* ex: display: block; padding: 0 10px; */
}

#menubar a:hover {
	color: #ff723b;
}

/* Adaugă stiluri responsive specifice pentru tabel/link-uri dacă este necesar */
@media (max-width: 1009px) {
    /* De exemplu, poți ajusta spațiul între link-uri sau mărimea textului */
    /* #menubar table { padding: 0 10px; box-sizing: border-box; } */
}

/* Dacă folosești butoane cu imagini de fundal (a#faq, a#search etc.),
   asigură-te că și acelea sunt responsive, de exemplu, setând lățimea/înălțimea în em sau procente */
/* Exemplu pentru a#faq pe mobil:
@media (max-width: 768px) {
    a#faq {
        width: 50px; height: 18px; background-size: contain;
    }
}
*/

/* --- START: New Category Buttons Styles --- */

/* Stiluri pentru containerul listei (opțional, dacă vrei să ajustezi spațierea generală) */
.category-buttons {
    list-style: none;
    padding: 12px; /* Păstrează padding-ul interior */
    margin: 0;
    background-color: rgba(46, 39, 32, 0.5); /* Păstrează fundalul */
   /* border: 1px solid rgba(160, 138, 106, 0.4);*/ /* Păstrează bordura */
    border-radius: 8px; /* Păstrează border-radius */
    box-sizing: border-box;
    overflow: hidden;

    /* --- Layout cu CSS Grid --- */
    display: grid; /* Folosim Grid pentru aranjare */
    gap: 10px; /* Spațiul între elementele din grid (butoane) */

    /* Implicit (pe mobil și ecrane mici): aranjare flexibilă pe coloane */
    /* Elementele vor avea o lățime minimă de 120px și vor ocupa spațiul disponibil */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

    /* Centrează elementele în fiecare celulă a grid-ului */
    justify-items: stretch; /* Elementele se întind pe lățimea coloanei */
    align-items: stretch; /* Elementele se întind pe înălțimea rândului (util dacă au conținut diferit) */

    /* Centrează întreaga grilă de butoane dacă spațiul permite */
    justify-content: center; /* Centrează coloanele dacă spațiul total e mai mic decât containerul */
	align-content: center;  /* Centrează rândurile dacă spațiul total e mai mic decât containerul */

}

.category-buttons li {
     margin: 0;
     padding: 0;
     /* Li-urile devin elemente în grid. Pot necesita ajustări dacă nu vrei ca ele să fie direct elementele din grid */
     /* Dacă vrei ca link-urile a.category-button-new să fie direct elementele din grid, poți aplica display:contents pe li */
     /* display: contents; */
}

/* --- Aranjare pe Desktop (Exemplu: 2 Coloane) --- */
@media (min-width: 768px) { /* Aplică această aranjare pe ecrane mai late de 768px */
    .category-buttons {
        /* Forțează aranjarea pe 2 coloane egale */
        grid-template-columns: repeat(2, 1fr);
        /* Poți ajusta gap-ul pe desktop */
        gap: 15px;
        /* Ajustări opționale de aliniere pe desktop dacă vrei */
        /* justify-items: center; */
        /* align-items: center; */
    }
}

/* Stiluri vizuale de la .category-button-new */
.category-button-new {
    /* Proprietăți de layout pentru centrarea conținutului în interior (păstrează-le și la .item-button) */
	display: flex;
	align-items: center; /* Centrează vertical iconița și textul */
	justify-content: center; /* Centrează orizontal iconița și textul */

    /* --- Proprietăți Vizuale (pe care le poți copia la .item-button) --- */
	background: linear-gradient(to bottom, #4a4035, #3a312a); /* Gradient de fundal */
	color: #ffcc66; /* Culoarea textului */
	padding: 10px 15px; /* Spațiu interior */
	text-decoration: none; /* Fără subliniere */
	border-radius: 10px; /* Colțuri rotunjite */
	border: 1px solid #ffcc66; /* Bordură */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Umbră */
	font-weight: bold; /* Grosimea textului */
	font-size: 0.95em; /* Mărimea textului */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Umbra textului */
    /* --- Sfârșit Proprietăți Vizuale --- */

    /* Proprietate Flexbox (păstrează-o la .item-button) */
	flex-shrink: 0; /* Asigură că butonul nu se micșorează în Flexbox */

    /* Tranziție pentru efectele la hover (păstrează-o la .item-button) */
    transition: all 0.3s ease;
}

/* Stiluri vizuale de la .category-button-new:hover */
.category-button-new:hover {
    /* --- Proprietăți Vizuale la Hover (pe care le poți copia la .item-button:hover) --- */
	background: linear-gradient(to bottom, #ffcc66, #d4af37); /* Gradient de fundal la hover */
	color: #28221c; /* Culoarea textului la hover */
	border-color: #fff5e7; /* Culoarea bordurii la hover */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Umbra la hover */
	text-shadow: none; /* Elimină umbra textului la hover */
    /* Opțional: adaugă și transform: translateY(-2px); pentru un mic efect de ridicare */
    /* --- Sfârșit Proprietăți Vizuale la Hover --- */
}

/* Stilul de bază pentru Noul Buton de Categorie */
.category-buttons li a.category-button-new {
    display: flex; /* Folosim flexbox pentru a centra iconița și textul */
    align-items: center;
    justify-content: center;
    /* Noul Aspect */
    background: linear-gradient(to bottom, #4a4035, #3a312a); /* Fundal gradient mai închis */
    color: #ffebcd; /* Text mai deschis inițial */
    padding: 10px 12px; /* Padding ajustat */
    text-align: center;
    text-decoration: none;
    border-radius: 20px; /* Formă tip "pill" sau colțuri foarte rotunjite */
    border: 1px solid #a08a6a; /* Bordură subtilă */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Umbră */
    transition: all 0.3s ease; /* Tranziție mai lentă la hover/active */
    font-weight: normal; /* Font normal */
    font-size: 0.9em; /* Mărime font puțin mai mică */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

/* Stil pentru iconița din buton */
.category-buttons li a.category-button-new i {
    margin-right: 6px; /* Spațiu între iconiță și text */
    color: #ffcc66; /* Culoarea iconiței */
    transition: color 0.3s ease;
}


/* Stilul Butonului la HOVER */
.category-buttons li a.category-button-new:hover {
    background: linear-gradient(to bottom, #ffcc66, #d4af37); /* Gradient galben la hover */
    color: #1a1a1a; /* Text închis la hover */
    border-color: #fff5e7; /* Bordură deschisă la hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px); /* Ușoară ridicare */
    text-shadow: none; /* Fără umbră text la hover */
}

/* Stil pentru iconița din buton la HOVER */
.category-buttons li a.category-button-new:hover i {
    color: #28221c; /* Culoare iconiță închisă la hover */
}


/* Stilul Butonului ACTIV (clasa adăugată cu JavaScript) */
.category-buttons li a.category-button-new.category-button-active {
    background: linear-gradient(to bottom, #ffcc66, #d4af37); /* Același gradient galben ca la hover */
    color: #28221c; /* Text închis */
    border-color: #fff5e7; /* Bordură deschisă */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); /* Umbră activă */
    cursor: default; /* Cursor implicit */
    text-shadow: none; /* Fără umbră text */
    /* Opțional: Adaugă o bordură mai groasă sau o altă indicație vizuală */
    /* border-bottom: 3px solid #28221c; */
}

/* Stil pentru iconița din butonul ACTIV */
.category-buttons li a.category-button-new.category-button-active i {
    color: #28221c; /* Culoare iconiță închisă */
}


/* --- END: New Category Buttons Styles --- */