/*
 * Mobilni sustav — sticky donja traka i bottom sheet filtera.
 * Odgovara design/Mobilno.dc.html.
 *
 * Sve u ovoj datoteci vrijedi ISKLJUČIVO ispod 768px. Na desktopu su ove
 * komponente nevidljive i ne zauzimaju prostor — zato je sve unutar jednog
 * media querya, a ne raspršeno po modulima.
 */

/* Traka i sheet postoje u DOM-u i na desktopu (renderira ih PHP), pa se
   moraju izričito sakriti — inače bi se pojavile na širokom ekranu. */
.ep-mobar,
.ep-shop__mobile-bar,
.ep-shop__side-head,
.ep-shop__side-foot,
.ep-sheet-backdrop {
	display: none;
}

@media (max-width: 767px) {

	/* — Sticky donja traka ————————————————————————— */

	.ep-mobar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		display: flex;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--ep-surface);
		border-top: 1px solid var(--ep-hair);
	}

	/*
	 * Prostor ispod sadržaja. `env(safe-area-inset-bottom)` je zbog iPhonea s
	 * home indikatorom — bez njega traka sjedi na gestu za zatvaranje aplikacije.
	 */
	.ep-has-mobar .ep-footer {
		padding-bottom: calc(84px + env(safe-area-inset-bottom));
	}

	.ep-mobar__info {
		flex: 1;
		min-width: 0;
	}

	.ep-mobar__price {
		font-size: 26px;
		line-height: 1;
		color: var(--ep-ink);
	}

	.ep-mobar__price del {
		display: none;
	}

	.ep-mobar__cta {
		flex: 1;
		min-height: 50px;
	}

	.ep-mobar__row {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		margin-bottom: 10px;
	}

	.ep-mobar__total {
		font-size: 26px;
		color: var(--ep-ink);
	}

	.ep-mobar__sub {
		width: 100%;
		margin-top: 8px;
		text-align: center;
		font-size: 10px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ep-muted-purple);
	}

	.ep-mobar__status {
		font-size: 11.5px;
		line-height: 1.45;
		color: var(--ep-ink-70);
	}

	.ep-mobar__status strong {
		color: var(--ep-brand);
	}

	.ep-mobar__hint {
		color: var(--ep-muted);
	}

	.ep-mobar__note {
		font-size: 11px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--ep-muted);
	}

	/*
	 * Katalog je namjerno mirniji od ostalih ekrana (vidi handoff, mobilni
	 * ekran 04): traka je informativna, gumb tih.
	 */
	.ep-btn--soft {
		background: var(--ep-brand-tint-2);
		border-color: var(--ep-brand-line);
		color: var(--ep-brand-dark);
		font-weight: 500;
		letter-spacing: 0.1em;
	}

	.ep-btn--soft:hover {
		background: var(--ep-brand-tint);
		color: var(--ep-brand-dark);
	}

	/* — Gumb „Filteri" ————————————————————————————— */

	.ep-shop__mobile-bar {
		display: flex;
		gap: 8px;
		align-items: center;
		margin-bottom: 14px;
	}

	.ep-filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: var(--ep-tap);
		padding: 0 14px;
		border: 1px solid var(--ep-brand-line);
		border-radius: var(--ep-radius-control);
		background: var(--ep-surface);
		color: var(--ep-brand-dark);
		font-family: var(--ep-font-body);
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.ep-filter-toggle__count {
		font-size: 15px;
		color: var(--ep-brand);
	}

	/* — Bottom sheet filtera ———————————————————————— */

	/*
	 * Sidebar filtera i sheet su ISTI element — mijenja se samo pozicioniranje.
	 * Duplicirani markup bi značio dva mjesta na kojima se filter dodaje.
	 */
	.ep-shop__side {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		max-height: 86vh;
		overflow-y: auto;
		border: none;
		border-top: 1px solid var(--ep-brand-line);
		transform: translateY(100%);
		transition: transform var(--ep-ease);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.ep-shop__side[data-open="true"] {
		transform: translateY(0);
	}

	/* Bez JS-a nema ni gumba za otvaranje — sidebar tada ostaje u toku
	   stranice, iznad mreže, kakav je i bio prije. */
	html:not(.ep-js) .ep-shop__side {
		position: static;
		transform: none;
		max-height: none;
	}

	.ep-shop__side-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 16px 18px;
		border-bottom: 1px solid var(--ep-hair);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--ep-ink);
		position: sticky;
		top: 0;
		background: var(--ep-surface);
		z-index: 1;
	}

	.ep-shop__side-close {
		width: var(--ep-tap);
		height: var(--ep-tap);
		margin: -10px -10px -10px 0;
		border: none;
		background: none;
		color: var(--ep-brand);
		font-size: 16px;
		cursor: pointer;
	}

	.ep-shop__side-foot {
		display: grid;
		grid-template-columns: 1fr 1.4fr;
		gap: 10px;
		padding: 12px 18px 16px;
		border-top: 1px solid var(--ep-hair);
		position: sticky;
		bottom: 0;
		background: var(--ep-surface);
	}

	.ep-shop__side-foot .ep-btn {
		min-height: 50px;
	}

	.ep-sheet-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 70;
		background: rgba(30, 8, 66, 0.55);
		backdrop-filter: blur(2px);
	}

	.ep-sheet-backdrop[hidden] {
		display: none;
	}

	/* Dok je sheet otvoren, pozadina se ne smije skrolati ispod njega. */
	body.ep-sheet-open {
		overflow: hidden;
	}

	/* Chipovi kategorija u sheetu — dizajn traži chipove, ne listu. */
	.ep-shop__side .ep-filter__list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.ep-shop__side .ep-filter__list li {
		margin: 0;
	}

	.ep-shop__side .ep-filter__list a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: var(--ep-tap);
		padding: 0 13px;
		border: 1px solid var(--ep-hair);
		border-radius: var(--ep-radius-control);
		font-size: 10.5px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.ep-shop__side .ep-filter__list a.is-active {
		background: var(--ep-brand-tint-2);
		border-color: #B7A8DE;
		color: var(--ep-brand);
	}

	.ep-shop__side .ep-filter__sub {
		width: 100%;
	}
}