/* =========================================================================
   Product Category Menu – Mobile
   Allt är scopat under .pcm-mobile / .pcm-mobile__*  => ingen kollision med
   den befintliga .pcm-menu. Hela komponenten är display:none över brytpunkten
   => osynlig och inert på desktop. Desktop påverkas aldrig.

   OBS: !important används medvetet på de utseende-avgörande egenskaperna.
   Det behövs för att vinna över temats egna !important-regler (t.ex.
   .global-button och Elementors knappstilar). Allt är scopat till
   .pcm-mobile__* + endast aktivt i mobilvy, så inget annat på sidan påverkas.
   ========================================================================= */

/* Dold som standard (gäller desktop). Visas endast i mobilvy nedan. */
.pcm-mobile {
	display: none !important;
}

@media (max-width: 1024px) {

	.pcm-mobile {
		/* --- Tema-variabler: justera fritt för att matcha ljusproffsen.se ---
		   Vill du matcha sidans guldton istället för orange?
		   Sätt --pcm-accent: #f1bd3a; (och ev. --pcm-accent-strong: #d9a521;) */
		--pcm-accent:        #f08a1e;            /* Varm professionell orange */
		--pcm-accent-strong: #e07d10;
		--pcm-accent-soft:   rgba(240, 138, 30, 0.10);
		--pcm-accent-shadow: rgba(240, 138, 30, 0.28);

		--pcm-off-bg:    #f3f4f5;                /* OFF-läge bakgrund */
		--pcm-off-text:  #5b6066;                /* OFF-läge text */
		--pcm-chip-bg:   #ffffff;
		--pcm-chip-text: #3a4047;
		--pcm-border:    rgba(17, 24, 28, 0.08);
		--pcm-dot:       #cbcfd4;                /* Inaktiv statuspunkt */

		--pcm-radius: 999px;
		--pcm-gap:    10px;
		--pcm-ease:   cubic-bezier(0.4, 0, 0.2, 1);

		display: block !important;
		box-sizing: border-box;
		width: 100%;
		margin: 0 0 22px !important;
		padding: 0 !important;
		font-family: inherit;                    /* Ärver temats typsnitt */
		-webkit-font-smoothing: antialiased;
	}

	.pcm-mobile *,
	.pcm-mobile *::before,
	.pcm-mobile *::after {
		box-sizing: border-box;
	}

	/* ---------- Huvudkategorier (overview): 2 kolumner, lika bredd ---------- */
	.pcm-mobile .pcm-mobile__mains {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: var(--pcm-gap) !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.pcm-mobile .pcm-mobile__main {
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-height: 50px !important;
		margin: 0 !important;
		padding: 13px 34px 13px 18px !important;   /* höger-luft för statuspunkt */
		border: 1px solid var(--pcm-border) !important;
		border-radius: var(--pcm-radius) !important;
		background: var(--pcm-off-bg) !important;
		color: var(--pcm-off-text) !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.25 !important;
		text-align: center !important;
		text-decoration: none !important;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: none !important;
		transition:
			background-color 0.28s var(--pcm-ease),
			color 0.28s var(--pcm-ease),
			border-color 0.28s var(--pcm-ease),
			box-shadow 0.28s var(--pcm-ease),
			transform 0.12s var(--pcm-ease);
	}

	.pcm-mobile .pcm-mobile__main:hover {
		background: var(--pcm-off-bg) !important;
		color: var(--pcm-off-text) !important;
	}

	.pcm-mobile .pcm-mobile__main:active {
		transform: scale(0.985);
	}

	.pcm-mobile .pcm-mobile__main:focus-visible {
		outline: 2px solid var(--pcm-accent);
		outline-offset: 2px;
	}

	/* Statuspunkt – diskret, premium */
	.pcm-mobile .pcm-mobile__dot {
		position: absolute;
		top: 50%;
		right: 16px;
		width: 14px !important;
		height: 14px !important;
		min-width: 14px;
		border: 2px solid var(--pcm-dot) !important;
		border-radius: 50% !important;
		background: transparent !important;
		transform: translateY(-50%);
		transition:
			border-color 0.28s var(--pcm-ease),
			background-color 0.28s var(--pcm-ease);
	}

	/* ---------- Aktivt läge: vald huvudkategori ensam, övriga döljs ---------- */
	.pcm-mobile.is-active .pcm-mobile__main:not(.is-open) {
		display: none !important;
	}

	.pcm-mobile .pcm-mobile__main.is-open {
		grid-column: 1 / -1 !important;
		background: var(--pcm-accent) !important;
		color: #fff !important;
		border-color: transparent !important;
		box-shadow: 0 8px 22px var(--pcm-accent-shadow) !important;
	}

	.pcm-mobile .pcm-mobile__main.is-open:hover {
		background: var(--pcm-accent) !important;
		color: #fff !important;
	}

	.pcm-mobile .pcm-mobile__main.is-open .pcm-mobile__dot {
		border-color: #fff !important;
		background: #fff !important;
	}

	/* Markerad huvudkategori UTAN underkategorier: stannar i rutnätet men
	   lyser upp på samma sätt som en aktiv underkategori (ON). */
	.pcm-mobile .pcm-mobile__main.is-current {
		background: var(--pcm-accent-soft) !important;
		border-color: var(--pcm-accent) !important;
		color: var(--pcm-accent-strong) !important;
	}

	.pcm-mobile .pcm-mobile__main.is-current:hover {
		background: var(--pcm-accent-soft) !important;
		color: var(--pcm-accent-strong) !important;
	}

	.pcm-mobile .pcm-mobile__main.is-current .pcm-mobile__dot {
		border-color: var(--pcm-accent) !important;
		background: var(--pcm-accent) !important;
	}

	/* ---------- Panel (underkategorier) ---------- */
	.pcm-mobile .pcm-mobile__panel[hidden] {
		display: none !important;
	}

	.pcm-mobile .pcm-mobile__panel {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		animation: pcmm-fade-in 0.3s var(--pcm-ease) both;
	}

	.pcm-mobile .pcm-mobile__collapse {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		margin: 12px 0 2px !important;
		padding: 6px !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: rgba(0, 0, 0, 0.4) !important;
		cursor: pointer;
		transition: color 0.2s var(--pcm-ease);
	}

	.pcm-mobile .pcm-mobile__collapse:hover {
		color: var(--pcm-accent-strong) !important;
	}

	.pcm-mobile .pcm-mobile__sublabel {
		margin: 4px 0 16px !important;
		padding: 0 !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: 0.08em !important;
		text-align: center !important;
		text-transform: uppercase !important;
		color: rgba(0, 0, 0, 0.42) !important;
	}

	/* ---------- Underkategorier: chips/taggar som flödar ---------- */
	.pcm-mobile .pcm-mobile__subgroup[hidden] {
		display: none !important;
	}

	.pcm-mobile .pcm-mobile__subgroup {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
		animation: pcmm-fade-in 0.32s var(--pcm-ease) both;
	}

	.pcm-mobile .pcm-mobile__sub {
		display: inline-flex !important;
		align-items: center !important;
		gap: 10px !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 11px 16px !important;
		border: 1px solid var(--pcm-border) !important;
		border-radius: var(--pcm-radius) !important;
		background: var(--pcm-chip-bg) !important;
		color: var(--pcm-chip-text) !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		line-height: 1.25 !important;
		text-decoration: none !important;
		white-space: normal !important;           /* långa namn bryter i chipet, aldrig layouten */
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: none !important;
		transition:
			background-color 0.2s var(--pcm-ease),
			color 0.2s var(--pcm-ease),
			border-color 0.2s var(--pcm-ease),
			transform 0.12s var(--pcm-ease);
	}

	.pcm-mobile .pcm-mobile__sub:hover {
		background: var(--pcm-chip-bg) !important;
		color: var(--pcm-chip-text) !important;
	}

	.pcm-mobile .pcm-mobile__sub:active {
		transform: scale(0.97);
	}

	.pcm-mobile .pcm-mobile__sub:focus-visible {
		outline: 2px solid var(--pcm-accent);
		outline-offset: 2px;
	}

	.pcm-mobile .pcm-mobile__sub .pcm-mobile__dot {
		position: static;
		flex: 0 0 auto;
		transform: none;
	}

	/* Aktiv underkategori (endast en åt gången) */
	.pcm-mobile .pcm-mobile__sub.is-current {
		background: var(--pcm-accent-soft) !important;
		border-color: var(--pcm-accent) !important;
		color: var(--pcm-accent-strong) !important;
		font-weight: 600 !important;
	}

	.pcm-mobile .pcm-mobile__sub.is-current:hover {
		background: var(--pcm-accent-soft) !important;
		color: var(--pcm-accent-strong) !important;
	}

	.pcm-mobile .pcm-mobile__sub.is-current .pcm-mobile__dot {
		border-color: var(--pcm-accent) !important;
		background: var(--pcm-accent) !important;
	}

	/* ---------- Tillbaka-länk ---------- */
	.pcm-mobile .pcm-mobile__back {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100% !important;
		margin: 18px 0 0 !important;
		padding: 10px !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: rgba(0, 0, 0, 0.55) !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		letter-spacing: 0.04em !important;
		text-transform: uppercase !important;
		cursor: pointer;
		transition: color 0.2s var(--pcm-ease);
	}

	.pcm-mobile .pcm-mobile__back:hover {
		color: var(--pcm-accent-strong) !important;
	}

	@keyframes pcmm-fade-in {
		from { opacity: 0; transform: translateY(-4px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* Respektera användarens rörelseinställningar */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	.pcm-mobile .pcm-mobile__panel,
	.pcm-mobile .pcm-mobile__subgroup {
		animation: none;
	}
	.pcm-mobile .pcm-mobile__main,
	.pcm-mobile .pcm-mobile__sub,
	.pcm-mobile .pcm-mobile__dot {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   VALFRITT: om din gamla desktop-lista (.pcm-menu) syns i mobilvy och du vill
   dölja den, avkommentera blocket nedan. Detta påverkar ENDAST mobil (<=1024px)
   och rör aldrig desktop.

   @media (max-width: 1024px) {
       .pcm-menu { display: none !important; }
   }
   ------------------------------------------------------------------------- */