/**
 * Listare mobile (≤767px) — vezi class-cioco-listing-mobile.php.
 * Toate regulile sub media query + gardate de .cioco-mlist (pusă de JS doar când
 * pagina are piesele de listare) → desktopul și restul paginilor rămân neatinse.
 */
@media ( max-width: 767px ) {

	/* ---------- Titlu + descriere ---------- */

	.cioco-mlist .cioco-mlist-title {
		font-size: 18px !important;
		line-height: 24px !important;
		font-weight: 400 !important;
		margin-bottom: 0;
	}
	/* „Afișez toate cele N rezultate" / „N de produse" — loc pierdut pe mobil */
	.cioco-mlist .brxe-woocommerce-products-total-results,
	.cioco-mlist .woocommerce-result-count {
		display: none !important;
	}
	/* coloana de produse e flex cu row-gap 20 (Bricks) → strâns pe mobil */
	.cioco-mlist .cioco-mlist-products {
		row-gap: 6px !important;
	}

	/* descrierea: 1 rând + „citește mai mult" */
	.cioco-mlist .cioco-mlist-desc {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 14px;
		line-height: 20px;
	}
	.cioco-mlist .cioco-mlist-desc.is-open {
		-webkit-line-clamp: unset;
		display: block;
	}
	.cioco-mlist-readmore {
		background: none;
		border: 0;
		padding: 2px 0 0;
		color: #072457;
		font-size: 13px;
		font-weight: 700;
		text-decoration: underline;
		cursor: pointer;
	}

	/* ---------- Chips categorii (mutate sub descriere de JS) ---------- */

	.cioco-mlist-chips .cioco-cat-box {
		background: none;
		padding: 10px 0;
		margin: 0;
	}
	.cioco-mlist-chips .cioco-cat-title {
		display: none;
	}
	.cioco-mlist-chips .cioco-cat-list {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.cioco-mlist-chips .cioco-cat-list::-webkit-scrollbar {
		display: none;
	}
	.cioco-mlist-chips .cioco-cat-item {
		flex: 0 0 auto;
		font-size: 13px;
		line-height: 1;
	}
	.cioco-mlist-chips .cioco-cat-name {
		display: inline-block;
		padding: 9px 14px;
		background: #fff;
		border: 1px solid rgba(7, 36, 87, 0.35);
		border-radius: 999px;
		white-space: nowrap;
	}
	.cioco-mlist-chips .cioco-cat-item.is-current .cioco-cat-name {
		background: #072457;
		color: #fff;
		border-color: #072457;
	}
	.cioco-mlist-chips .cioco-cat-count {
		display: none;
	}

	/* ---------- Bara Filtrează + Sortare ---------- */

	.cioco-mlist-toolbar {
		position: sticky;
		top: 0;
		z-index: 90;
		display: flex;
		gap: 10px;
		align-items: stretch;
		padding: 8px 0;
		margin-bottom: 12px;
		background: #f6f6f6; /* fundalul secțiunii de listare */
	}
	.cioco-mlist-filter-btn {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 11px 12px;
		background: #072457;
		color: #fff;
		border: 0;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
	}
	.cioco-mlist-badge[hidden] {
		display: none;
	}
	.cioco-mlist-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		background: #fff;
		color: #072457;
		border-radius: 999px;
		font-size: 12px;
	}
	.cioco-mlist-toolbar .woocommerce-ordering {
		flex: 1;
		margin: 0;
	}
	.cioco-mlist-toolbar .woocommerce-ordering select {
		width: 100%;
		height: 100%;
		font-size: 13px;
	}

	/* ---------- Drawer filtre ---------- */

	.cioco-mlist-drawer {
		position: fixed !important;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 100000;
		width: min(84vw, 340px) !important; /* Bricks pune width:100% pe id la mobil */
		background: #f6f6f6;
		overflow-y: auto;
		padding: 0 16px 24px;
		transform: translateX(-105%);
		transition: transform 0.25s ease;
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
		/* block, nu flex-ul Bricks al sidebarului — altfel headerul nu se întinde */
		display: block !important;
	}
	.cioco-drawer-open .cioco-mlist-drawer {
		transform: translateX(0);
	}
	.cioco-mlist-drawer-hidden {
		display: none !important;
	}
	.cioco-mlist-drawer-head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 -16px 12px;
		padding: 14px 16px;
		background: #fff;
		border-bottom: 1px solid rgba(30, 30, 30, 0.1);
		font-size: 16px;
	}
	.cioco-mlist-drawer-close {
		background: none;
		border: 0;
		font-size: 28px;
		line-height: 1;
		color: #1e1e1e;
		cursor: pointer;
		padding: 0 4px;
	}

	.cioco-mlist-overlay {
		position: fixed;
		inset: 0;
		z-index: 99999;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}
	.cioco-drawer-open .cioco-mlist-overlay {
		opacity: 1;
		pointer-events: auto;
	}
	.cioco-drawer-open,
	.cioco-drawer-open body {
		overflow: hidden;
	}

	/* Grupurile pliate — stare PROPRIE (.cioco-open, toggle în JS), nu brx-open:
	   Bricks re-inițializează accordion-ul după fiecare AJAX și re-deschide totul
	   (setarea „expanded" e globală și desktopul o vrea așa). */
	.cioco-mlist-drawer .brxe-accordion-nested > .brxe-block:not(.cioco-open) .brxe-filter-checkbox {
		display: none;
	}
	/* wrapperul de conținut: mereu „deschis" din perspectiva Bricks — noi decidem prin ul */
	.cioco-mlist-drawer .accordion-content-wrapper {
		display: block !important;
		padding: 0;
		margin: 0;
	}
	/* pliat = compact: fără golul de sub titlu. Selectorii repetă :has(...) din
	   style.css (bricks-child) ca să câștige la specificitate. */
	.cioco-mlist-drawer .brxe-accordion-nested:has(.brxe-filter-checkbox) > .brxe-block {
		padding: 18px 16px 18px 20px;
		margin-bottom: 12px;
	}
	.cioco-mlist-drawer .brxe-accordion-nested:has(.brxe-filter-checkbox) > .brxe-block:not(.cioco-open) .accordion-title-wrapper {
		margin-bottom: 0;
	}
	/* chevron: doar rotația noastră — o anulăm pe a lui Bricks (brx-open rămâne pe toate).
	   Iconița de bază e „>" → închis = în jos (90°), deschis = în sus (-90°). */
	.cioco-mlist-drawer .accordion-title-wrapper .brxe-icon {
		transition: transform 0.2s ease;
		transform: rotate(90deg) !important;
	}
	.cioco-mlist-drawer .brxe-block.cioco-open .accordion-title-wrapper .brxe-icon {
		transform: rotate(-90deg) !important;
	}

	/* breadcrumb: nav flex nowrap + aliniere dreapta → începutul ieșea din ecran */
	.cioco-mlist .brxe-woocommerce-breadcrumbs,
	.cioco-mlist .brxe-woocommerce-breadcrumbs * {
		white-space: normal !important;
	}
	.cioco-mlist .brxe-woocommerce-breadcrumbs nav {
		display: flex;
		flex-wrap: wrap !important;
		width: 100% !important;
		row-gap: 2px;
	}
	.cioco-mlist .brxe-woocommerce-breadcrumbs {
		font-size: 12px;
		line-height: 18px;
	}

	/* ---------- Spațieri strânse + paginarea de sus ---------- */

	/* blocul de sus sort+paginare: sortarea a plecat în toolbar, paginarea dublează
	   pe cea de jos → tot blocul dispare pe mobil */
	.cioco-mlist .cioco-mlist-topsort {
		display: none !important;
	}
	/* secțiunea listării avea margini mari (inline Bricks: 40/40 la ≤478) */
	.cioco-mlist .cioco-mlist-section {
		margin-top: 0 !important;
		margin-bottom: 24px !important;
	}
	.cioco-mlist .cioco-mlist-chips .cioco-cat-box {
		padding: 4px 0 0;
	}
	.cioco-mlist .cioco-mlist-toolbar {
		margin-bottom: 2px;
		padding: 4px 0;
	}
	/* descrierea (mutată jos, sub produse) */
	.cioco-mlist .cioco-mlist-desc {
		margin: 8px 0 0;
	}
	/* gridul: gap mai mic → carduri mai late (170px în loc de 165) + fără gaura de 60px jos.
	   minmax(0,1fr) obligatoriu — track-urile mobile din postmeta sunt `repeat(2, 1fr)`
	   gol, iar min-content-ul cardului (CTA nowrap) le-ar umfla peste viewport
	   (aceeași buclă circulară ca overflow-ul de pe desktop, vezi journal). */
	.cioco-mlist .brx-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px 4px !important; /* lateral minim → carduri cât mai late (173px) */
		margin-bottom: 24px !important;
	}

	/* ---------- Card compact (2 pe rând fără să pară strivite) ---------- */

	/* lățimile fixe din template (165px) lasă cardul să umple track-ul */
	.cioco-mlist .brx-grid .brxe-904546 {
		max-width: unset;
		padding-bottom: 56px; /* CTA 40px + 8 jos + aer */
		gap: 8px !important;
	}
	/* titlu produs */
	.cioco-mlist .brx-grid .brxe-102519 {
		font-size: 14px;
		line-height: 18px;
		padding-top: 0;
	}
	/* nota de livrare: un singur rând, discretă */
	.cioco-mlist .brx-grid .cioco-delivery-cutoff {
		font-size: 10px;
		line-height: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* prețuri */
	.cioco-mlist .brx-grid .brxe-e6147f,
	.cioco-mlist .brx-grid .brxe-a81d21 {
		font-size: 17px;
	}
	.cioco-mlist .brx-grid .brxe-7ff347 {
		font-size: 12px;
	}
	/* CTA: absolut cu ancore left/right în card (butonul are ID `pfs_add_to_cart` →
	   totul cu !important, altfel regulile pe id din temă câștigă).
	   width:auto → lățimea vine din ancore; width:100% ar ignora `right` și ar ieși. */
	.cioco-mlist .brx-grid .pfs_add_to_cart {
		font-size: 11px !important;
		letter-spacing: 0.02em !important;
		width: auto !important;
		left: 8px !important;
		right: 8px !important;
		bottom: 8px !important;
		height: 40px !important;
		line-height: 40px !important;
		padding: 0 40px 0 0 !important;
	}
	/* pătratul navy cu sacoșa (::after al butonului): 40px, cât înălțimea nouă */
	.cioco-mlist .brx-grid .pfs_add_to_cart::after {
		width: 40px !important;
		height: 40px !important;
	}

	/* butonul de reset — full width în drawer, deasupra grupurilor */
	.cioco-mlist-drawer .cioco-filter-reset {
		margin: 0 0 16px;
	}
}