/* ==========================================================================
   Pagini de catalog (categorie, producator, tag, cautare) - stil unitar
   Aliniat cu product-details.css: aceiasi tokeni, aceleasi carduri, pastile
   si butoane. Toate regulile sunt limitate la .html-catalog-page (clasa pusa
   din view-urile de catalog) ca sa nu afecteze restul site-ului.
   ========================================================================== */

.html-catalog-page {
	--pd-brand: #a71e06;
	--pd-brand-600: #8a1905;
	--pd-brand-50: #fdf3f1;
	--pd-brand-100: #f9e1dc;
	--pd-ink: #112a46;
	--pd-text: #3a4250;
	--pd-muted: #6b7280;
	--pd-line: #e6e8ec;
	--pd-soft: #f6f7f9;
	--pd-blue: #2b71b8;
	--pd-ok: #13703a;
	--pd-ok-bg: #eaf7ef;
	--pd-radius: 12px;
	--pd-radius-lg: 16px;
	--pd-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
	--pd-shadow-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 10px 28px rgba(16, 24, 40, .10);
}

/* --------------------------------------------------------------------------
   Breadcrumb + titlu
   -------------------------------------------------------------------------- */

.html-catalog-page .breadcrumb {
	border-bottom: 1px solid var(--pd-line);
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.html-catalog-page .breadcrumb ul {
	border: 0;
	padding-bottom: 0;
}

.html-catalog-page .breadcrumb a {
	color: var(--pd-ink);
	font-weight: 700;
	transition: color .2s ease;
}

.html-catalog-page .breadcrumb strong {
	color: var(--pd-text);
	font-weight: 700;
}

.html-catalog-page .breadcrumb a:hover {
	color: var(--pd-brand);
}

.html-catalog-page .page-title {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: none;
}

.html-catalog-page .page-title h1 {
	color: var(--pd-ink);
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   Descriere (sus si jos) - acelasi card ca sectiunile de pe pagina de produs
   -------------------------------------------------------------------------- */

.html-catalog-page .category-description,
.html-catalog-page .manufacturer-description {
	background: #fff;
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius-lg);
	box-shadow: var(--pd-shadow);
	padding: 20px 24px;
	margin: 0 0 20px;
	color: var(--pd-text);
	font-size: 14px;
	line-height: 1.65;
}

.html-catalog-page .category-description p,
.html-catalog-page .manufacturer-description p {
	margin: 0 0 10px;
}

.html-catalog-page .category-description p:last-child,
.html-catalog-page .manufacturer-description p:last-child {
	margin-bottom: 0;
}

.html-catalog-page .category-description strong,
.html-catalog-page .manufacturer-description strong,
.html-catalog-page .category-description h2,
.html-catalog-page .category-description h3,
.html-catalog-page .manufacturer-description h2,
.html-catalog-page .manufacturer-description h3 {
	color: var(--pd-ink);
}

.html-catalog-page .category-description a,
.html-catalog-page .manufacturer-description a {
	color: var(--pd-brand);
}

.html-catalog-page .category-description img,
.html-catalog-page .manufacturer-description img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pd-radius);
}

/* descrierea de jos vine dupa lista de produse */
.html-catalog-page .products-container ~ .category-description {
	margin-top: 30px;
}

.html-catalog-page .displayButton {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pd-brand);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.html-catalog-page .displayButton:hover {
	color: var(--pd-brand-600);
}

/* --------------------------------------------------------------------------
   Subcategorii
   -------------------------------------------------------------------------- */

.html-catalog-page .sub-category-grid {
	margin-bottom: 24px;
}

.html-catalog-page .sub-category-grid .item-box {
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	background: #fff;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.html-catalog-page .sub-category-grid .item-box:hover {
	border-color: var(--pd-brand-100);
	box-shadow: var(--pd-shadow-hover);
	transform: translateY(-2px);
}

.html-catalog-page .sub-category-grid .item-box .title {
	margin-top: 0;
}

.html-catalog-page .sub-category-grid .item-box .title a {
	padding: 10px 10px 12px;
	color: var(--pd-ink);
	font-weight: 700;
	letter-spacing: 0;
	text-align: center;
	transition: color .2s ease;
}

.html-catalog-page .sub-category-grid .item-box:hover .title a {
	color: var(--pd-brand);
}

/* subcategoriile ca tile-uri pe randuri, 6 pe rand (acelasi markup ca pe promotii,
   .promo-nav, dar fara derulare; pe paginile de promotii stilul vine din promo.css) */
.html-catalog-page:not(.html-promo-page) .promo-nav {
	margin: 0 0 24px;
}

.html-catalog-page:not(.html-promo-page) .promo-nav-list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 4px 0 0;
	list-style: none;
}

.html-catalog-page:not(.html-promo-page) .promo-tile {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius-lg);
	background: #fff;
	color: var(--pd-ink);
	box-shadow: var(--pd-shadow);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.html-catalog-page:not(.html-promo-page) .promo-tile-img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff;
}

.html-catalog-page:not(.html-promo-page) .promo-tile-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.html-catalog-page:not(.html-promo-page) .promo-tile-name {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 0 auto;
	min-height: 2.6em;
	padding: 10px 10px 12px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	transition: color .2s ease;
}

.html-catalog-page:not(.html-promo-page) .promo-tile:hover {
	transform: translateY(-3px);
	border-color: var(--pd-brand-100);
	box-shadow: var(--pd-shadow-hover);
}

.html-catalog-page:not(.html-promo-page) .promo-tile:hover .promo-tile-name {
	color: var(--pd-brand);
}

.html-catalog-page:not(.html-promo-page) .promo-tile:hover .promo-tile-img img {
	transform: scale(1.06);
}

.html-catalog-page:not(.html-promo-page) .promo-tile:focus-visible {
	outline: 3px solid var(--pd-brand);
	outline-offset: 2px;
}

@media (max-width: 1000px) {
	.html-catalog-page:not(.html-promo-page) .promo-nav-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.html-catalog-page:not(.html-promo-page) .promo-nav-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.html-catalog-page:not(.html-promo-page) .promo-tile-name {
		font-size: 12px;
		padding: 8px 6px 10px;
	}
}

@media (hover: none) {
	.html-catalog-page:not(.html-promo-page) .promo-tile:hover {
		transform: none;
	}
}

/* bloc de linkuri catre subcategorii adaugat din continut (ex. #hue-subcats) -
   are stiluri inline, de aceea !important */
.html-catalog-page .page-body > section[id$="-subcats"] > div {
	padding: 20px 24px !important;
	background: #fff !important;
	border: 1px solid var(--pd-line) !important;
	border-radius: var(--pd-radius-lg) !important;
	box-shadow: var(--pd-shadow) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.html-catalog-page .page-body > section[id$="-subcats"] h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--pd-ink) !important;
	font-size: 18px !important;
	font-weight: 700;
}

.html-catalog-page .page-body > section[id$="-subcats"] h2::before {
	content: "";
	flex: 0 0 4px;
	width: 4px;
	height: 20px;
	border-radius: 4px;
	background: var(--pd-brand);
}

.html-catalog-page .page-body > section[id$="-subcats"] a {
	min-height: 0 !important;
	padding: 8px 14px !important;
	background: var(--pd-soft) !important;
	border: 1px solid var(--pd-line) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	color: var(--pd-ink) !important;
	font-size: 13px;
	font-weight: 500;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease !important;
}

.html-catalog-page .page-body > section[id$="-subcats"] a:hover {
	background: var(--pd-brand-50) !important;
	border-color: var(--pd-brand) !important;
	color: var(--pd-brand) !important;
}

/* --------------------------------------------------------------------------
   Filtre + sortare - aceeasi bara ca navigarea de pe pagina de produs
   -------------------------------------------------------------------------- */

.html-catalog-page .container-filter {
	border-radius: var(--pd-radius);
	box-shadow: none;
}

.html-catalog-page .horizontal-filter {
	gap: 8px;
	padding: 8px;
	background: var(--pd-soft);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
}

.html-catalog-page .filter-group {
	margin-right: 0;
}

.html-catalog-page .filter-toggle,
.html-catalog-page .show-all-btn {
	padding: 8px 14px;
	background: #fff;
	border: 1px solid var(--pd-line);
	border-radius: 8px;
	color: var(--pd-text);
	font-size: 13px;
	font-weight: 600;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.html-catalog-page .filter-toggle:hover,
.html-catalog-page .show-all-btn:hover {
	background: var(--pd-brand-50);
	border-color: var(--pd-brand-100);
	color: var(--pd-brand);
}

.html-catalog-page .filter-group.active .filter-toggle {
	background: var(--pd-brand);
	border-color: var(--pd-brand);
	color: #fff;
	box-shadow: 0 4px 12px rgba(167, 30, 6, .25);
}

.html-catalog-page .filter-options {
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	box-shadow: var(--pd-shadow-hover);
	margin-top: 6px;
	color: var(--pd-text);
	font-weight: 500;
}

.html-catalog-page .filter-options input[type="checkbox"] {
	accent-color: var(--pd-brand);
}

.html-catalog-page .active-filter {
	background: var(--pd-brand-50);
	border: 1px solid var(--pd-brand-100);
	border-radius: 999px;
	color: var(--pd-brand);
	font-weight: 600;
}

.html-catalog-page .container-filter .filter-total {
	margin: 10px 2px 0;
	color: var(--pd-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.html-catalog-page .product-sorting > span {
	color: var(--pd-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.html-catalog-page .product-sorting select {
	border: 1px solid var(--pd-line);
	border-radius: 10px;
	background-color: #fff;
	color: var(--pd-ink);
	font-weight: 600;
	transition: border-color .2s ease;
}

.html-catalog-page .product-sorting select:hover,
.html-catalog-page .product-sorting select:focus {
	border-color: var(--pd-brand);
	outline: none;
}

/* Tableta / mobil: eticheta deasupra, selectul pe toata latimea */
@media all and (max-width: 1024px) {
	.html-catalog-page .product-selectors .product-sorting {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		width: 100%;
		box-sizing: border-box;
		margin: 8px 0 0;
		text-align: left;
	}

	.html-catalog-page .product-selectors .product-sorting > span {
		white-space: nowrap;
	}

	.html-catalog-page .product-selectors .product-sorting select {
		width: 100%;
		min-width: 0;
		margin: 0;
	}
}

/* --------------------------------------------------------------------------
   Cardul de produs
   -------------------------------------------------------------------------- */

.html-catalog-page .product-grid .item-box,
.html-catalog-page .product-list .item-box {
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	background: #fff;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.html-catalog-page .product-grid .item-box:hover,
.html-catalog-page .product-list .item-box:hover {
	border-color: #d5d9e0;
	box-shadow: var(--pd-shadow-hover);
	transform: translateY(-2px);
}

/* ribbon-urile se pozitioneaza fata de imagine (pe mobil tema le lasa relative la card) */
.html-catalog-page .item-box .picture {
	position: relative;
}

/* in loc de voalul gri al temei, imaginea se mareste usor */
.html-catalog-page .product-grid .item-box .picture > a:after {
	content: none;
	display: none;
}

.html-catalog-page .item-box .picture > a img {
	transition: transform .35s ease;
}

.html-catalog-page .item-box:hover .picture > a img {
	transform: translate(-50%, -50%) scale(1.04);
}

/* ribbon reducere - acelasi badge ca pe pagina de produs */
.html-catalog-page .item-box .ribbon-discount {
	top: 10px;
	left: 10px;
	width: auto;
	padding: 4px 10px;
	overflow: hidden;
	border-radius: 8px;
	background: linear-gradient(135deg, #e0360f 0%, var(--pd-brand) 60%, var(--pd-brand-600) 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .02em;
	text-shadow: none;
	box-shadow: 0 6px 16px rgba(167, 30, 6, .35);
}

.html-catalog-page .item-box .cat-ribbon {
	top: 8px;
	right: 8px;
	width: 50px;
	height: 50px;
	padding: 4px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 14px rgba(16, 24, 40, .14);
}

.html-catalog-page .item-box .cat-ribbon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Super Pret + Top favorite - pastile in coltul stanga-jos */
.html-catalog-page .item-box .badge-black,
.html-catalog-page .item-box .recomandareETBM {
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-shadow: none;
	box-shadow: 0 6px 16px rgba(16, 24, 40, .18);
}

.html-catalog-page .item-box .badge-black {
	bottom: 10px;
	padding: 3px 3px 3px 10px;
	background: rgba(17, 24, 39, .92);
	color: #fff;
}

.html-catalog-page .item-box .badge-black > span:first-child {
	margin-right: 0 !important;
}

.html-catalog-page .item-box .badge-black .into-friday {
	margin: 0;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--pd-brand);
	color: #fff;
}

.html-catalog-page .item-box .recomandareETBM {
	bottom: 40px;
	padding: 5px 10px;
	background: linear-gradient(135deg, #fcd34d, #f59e0b);
	color: #3d2400;
}

.html-catalog-page .item-box .recomandareETBM::before {
	content: "\2605";
	font-size: 12px;
}

.html-catalog-page .item-box .picture:not(:has(.badge-black)) .recomandareETBM {
	bottom: 10px;
}

/* compara + favorite peste imagine */
.html-catalog-page .item-box .btn-wrapper .button-2 {
	background: #fff !important;
	border: 1px solid var(--pd-line);
	box-shadow: 0 4px 12px rgba(16, 24, 40, .12);
	transition: background-color .2s ease, border-color .2s ease;
}

.html-catalog-page .item-box .btn-wrapper button:before {
	color: var(--pd-muted);
}

.html-catalog-page .item-box .btn-wrapper .add-to-compare-list-button:hover {
	background: var(--pd-blue) !important;
	border-color: var(--pd-blue);
}

.html-catalog-page .item-box .btn-wrapper .add-to-wishlist-button:hover {
	background: var(--pd-brand) !important;
	border-color: var(--pd-brand);
}

.html-catalog-page .item-box .btn-wrapper button:hover:before {
	color: #fff;
}

/* detalii */
.html-catalog-page .item-box .details {
	padding: 12px;
}

.html-catalog-page .item-box .product-title {
	color: var(--pd-ink);
	font-weight: 600;
	line-height: 1.3em;
	height: 5.2em;
}

.html-catalog-page .item-box .product-title a {
	color: inherit;
	transition: color .2s ease;
}

.html-catalog-page .item-box .product-title a:hover {
	color: var(--pd-brand);
}

/* DIY / Rezidential - ca pe pagina de produs */
.html-catalog-page .item-box .shortBenefit {
	background: var(--pd-soft);
	border: 0;
	border-radius: 8px;
	color: var(--pd-ink);
	font-weight: 600;
	font-size: 11px;
}

.html-catalog-page .item-box .shortBenefitsIcon {
	color: var(--pd-brand);
	text-shadow: none;
}

/* beneficii: fiecare text centrat in jumatatea lui (stanga / dreapta fata de bec) */
.html-catalog-page .item-box .shortBenefit .benefit-half,
.html-catalog-page .item-box .shortBenefit .benefit-half:last-child {
	text-align: center;
}

.html-catalog-page .item-box .description {
	color: var(--pd-muted);
}

/* pret */
.html-catalog-page .item-box .old-price {
	color: var(--pd-muted);
}

.html-catalog-page .item-box .actual-price {
	color: var(--pd-brand);
	font-weight: 800;
	letter-spacing: -.01em;
}

/* adauga in cos - aceeasi animatie ca pe pagina de produs */
.html-catalog-page .item-box .product-box-add-to-cart-button {
	padding-left: 52px;
	padding-right: 12px;
	background: var(--pd-brand) !important;
	border-radius: 10px;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0;
	box-shadow: 0 6px 16px rgba(167, 30, 6, .25);
	transition: transform .2s ease, box-shadow .2s ease;
}

.html-catalog-page .item-box .product-box-add-to-cart-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(167, 30, 6, .35);
}

.html-catalog-page .item-box .product-box-add-to-cart-button:active {
	transform: translateY(0) scale(.98);
}

.html-catalog-page .item-box .product-box-add-to-cart-button .cartIcon {
	width: 44px;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pd-brand-600);
	border-radius: 10px 22px 22px 10px;
	text-shadow: none;
	transition: width .35s cubic-bezier(.4, 0, .2, 1), border-radius .35s ease;
}

.html-catalog-page .item-box .product-box-add-to-cart-button .cartIcon:before {
	display: inline-block;
	transition: transform .35s ease;
}

.html-catalog-page .item-box .product-box-add-to-cart-button:hover .cartIcon {
	width: 100%;
	border-radius: 10px;
}

.html-catalog-page .item-box .product-box-add-to-cart-button:hover .cartIcon:before {
	animation: ct-cart-ride .6s ease;
	transform: scale(1.15);
}

@keyframes ct-cart-ride {
	0% { transform: translateX(-30px) scale(1); }
	60% { transform: translateX(6px) scale(1.15); }
	100% { transform: translateX(0) scale(1.15); }
}

/* stoc - pastila in interiorul cardului, ca pe pagina de produs */
.html-catalog-page .item-box .stockAvailabilityMain {
	box-sizing: border-box;
	width: auto;
	margin: 0 12px 12px;
	padding: 6px 10px;
	border: 1px solid var(--pd-line);
	border-radius: 8px;
	background: var(--pd-soft);
	color: var(--pd-text);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
}

.html-catalog-page .item-box .stockAvailabilityMain.stock-instock {
	background: var(--pd-ok-bg);
	border-color: #cfead9;
	color: var(--pd-ok);
}

.html-catalog-page .item-box .stockAvailabilityMain.stock-preorder {
	background: #eef4fb;
	border-color: #c9dcf1;
	color: var(--pd-blue);
}

.html-catalog-page .item-box .stockAvailabilityMain.stock-lowstock {
	background: #fff6e8;
	border-color: #fbdcaa;
	color: #9a5b00;
}

.html-catalog-page .item-box .stockAvailabilityMain.stock-onestock {
	background: var(--pd-brand-50);
	border-color: var(--pd-brand-100);
	color: var(--pd-brand);
}

/* --------------------------------------------------------------------------
   Produse recomandate - titlu de sectiune ca pe pagina de produs
   -------------------------------------------------------------------------- */

.html-catalog-page .featured-product-grid .title {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.html-catalog-page .featured-product-grid .title strong {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--pd-ink);
	font-size: 20px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.html-catalog-page .featured-product-grid .title strong::before {
	content: "";
	flex: 0 0 4px;
	width: 4px;
	height: 20px;
	border-radius: 4px;
	background: var(--pd-brand);
}

/* --------------------------------------------------------------------------
   Paginare
   -------------------------------------------------------------------------- */

.html-catalog-page .pager li a,
.html-catalog-page .pager li span {
	min-width: 38px;
	border: 1px solid var(--pd-line);
	border-radius: 10px;
	background: #fff;
	color: var(--pd-ink);
	font-weight: 600;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.html-catalog-page .pager li a:hover {
	background: var(--pd-brand-50);
	border-color: var(--pd-brand);
	color: var(--pd-brand);
}

.html-catalog-page .pager li.current-page span {
	background: var(--pd-brand);
	border-color: var(--pd-brand);
	color: #fff;
	box-shadow: 0 4px 12px rgba(167, 30, 6, .25);
}

.html-catalog-page .pager li.previous-page a,
.html-catalog-page .pager li.next-page a,
.html-catalog-page .pager li.first-page a,
.html-catalog-page .pager li.last-page a {
	width: auto;
	padding: 0 14px;
}

.html-catalog-page .no-result {
	padding: 20px 24px;
	background: var(--pd-soft);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	color: var(--pd-text);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Mobil / tableta
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
	.html-catalog-page .page-title h1 {
		font-size: 20px;
	}

	.html-catalog-page .category-description,
	.html-catalog-page .manufacturer-description,
	.html-catalog-page .page-body > section[id$="-subcats"] > div {
		padding: 16px !important;
		border-radius: var(--pd-radius) !important;
	}
}

@media (hover: none) {
	.html-catalog-page .product-grid .item-box:hover,
	.html-catalog-page .sub-category-grid .item-box:hover {
		transform: none;
	}
}