/*
 * Kollektionssidor: rubrik + intro + faktarad, filterrad, text under produkterna.
 * Laddas bara på butik/kategori/varumärke/tagg (inc/collections.php).
 *
 * Bygger på sajtens befintliga formspråk (assets/css/tso.css + style.css):
 *   rubrik = .sn-head__title (Inter, versaler) · eyebrow = .sn-slides__eyebrow (Krona One, blå ring)
 *   filterknappar = .sn-nav2__link / .sn-pill--outline · valda filter = .sn-ribbon (lime, som .sn-pc__label)
 *   paneler = kortens rundning och --t-soft · brödtext = .sn-seo2__text
 */

/* ---------- Rubrik ---------- */
.sn-coll__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.sn-coll__head .woocommerce-breadcrumb { margin-bottom: clamp(.75rem, 1.5vw, 1rem); font-size: 13px; color: var(--t-ink-3); }
.sn-coll__head .woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.sn-coll__head .woocommerce-breadcrumb a:hover { color: var(--t-text); }
.sn-coll__title {
	margin: 0 0 clamp(.75rem, 1.5vw, 1rem);
	font-family: Inter, sans-serif; font-weight: 700; text-transform: uppercase;
	font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); line-height: 1.05; letter-spacing: -.01em; color: var(--t-text);
}
.sn-coll__intro { max-width: 62ch; font-size: 15px; line-height: 1.65; color: var(--t-ink-2); }
.sn-coll__intro p { margin: 0 0 1em; }
.sn-coll__intro p:last-child { margin-bottom: 0; }
.sn-coll__intro a, .sn-coll__body a { color: var(--t-text); text-decoration: underline; text-underline-offset: .2em; }
.sn-coll__intro.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.sn-coll__intro.is-clamped p { display: inline; }
.sn-coll__more { margin-top: .5rem; padding: 0; background: none; border: 0; font: 500 14px/1.4 Inter, sans-serif; color: var(--t-text); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }

.sn-coll__eyebrow {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: clamp(1rem, 2vw, 1.25rem) 0 0;
	font-family: "Krona One", sans-serif; font-size: clamp(10.5px, .6rem + .15vw, 12px); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--t-ink-2);
}
.sn-coll__eyebrow::before {
	content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%;
	border: 3px solid var(--t-accent); box-shadow: inset 0 0 0 2px #f1f2f1, inset 0 0 0 6px var(--t-accent);
}
.sn-coll__eyebrow strong { font-weight: inherit; color: var(--t-text); }
.sn-coll__sep { color: var(--t-ink-3); }

/* ---------- Sökresultat – TSO:s sökhuvud (centrerad rubrik, sökfältet under) ---------- */
.sn-coll__head--search { display: grid; justify-items: center; gap: clamp(1.25rem, 2.5vw, 2rem); text-align: center; padding-top: clamp(.5rem, 1.5vw, 1.5rem); }
.sn-coll__head--search .sn-coll__title {
	margin: 0; text-transform: none; letter-spacing: -.03em; line-height: 1;
	font-size: clamp(48.8px, 29.5px + 5.15vw, 102.7px);
}
.sn-search-form { position: relative; width: min(100%, 40rem); }
.sn-search-form input[type="search"] {
	width: 100%; height: 56px; padding: 0 5.5rem 0 1.5rem; border: 0; border-radius: 999px;
	background: var(--t-soft, #f2f2f2); font: 400 16px/1 Inter, sans-serif; color: var(--t-text);
}
.sn-search-form__clear {
	position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%);
	font-size: 13px; color: var(--t-ink-2); text-decoration: none;
}
.sn-search-form__clear:hover { color: var(--t-text); }

/* ---------- Filterrad – som menyns pill-länkar ---------- */
.sn-cf { padding-block: 14px; border-block: 1px solid var(--t-line); }
.sn-cf__form { min-width: 0; margin: 0; }
.sn-cf__groups { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-cf__chip {
	display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px;
	border: 1px solid var(--t-text); border-radius: 60px; background: transparent;
	font: 500 15px/1 Inter, sans-serif; color: var(--t-text); cursor: pointer; user-select: none; list-style: none; white-space: nowrap;
	transition: background .3s var(--t-ease), color .3s var(--t-ease);
}
.sn-cf__chip::-webkit-details-marker { display: none; }
.sn-cf__chip:hover, .sn-cf__group[open] > .sn-cf__chip, .sn-cf__chip.is-active, .sn-cf__group.is-active > .sn-cf__chip { background: var(--t-text); color: #fff; }
.sn-cf__chip:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.sn-cf__caret { width: 12px; height: 12px; transition: transform .3s var(--t-ease); }
.sn-cf__group[open] .sn-cf__caret { transform: rotate(180deg); }
.sn-cf__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px; background: var(--t-signal); color: #000; font-size: 11px; font-weight: 800; }
.sn-cf__toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--t-accent); }

/* Panelen: kortens rundning, mjuk bakgrund på rader, blå markering som "Choose your pack". */
.sn-cf__group { position: relative; }
.sn-cf__panel {
	position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: max-content; min-width: 280px; max-width: min(92vw, 360px);
	display: flex; flex-direction: column; padding: 10px; background: #fff; border: 1px solid var(--t-line); border-radius: 20px;
	box-shadow: 0 24px 60px -20px rgba(11, 18, 40, .35);
}
.sn-cf__panel--wide { max-width: min(92vw, 580px); }
.sn-cf__head { display: none; }
.sn-cf__options { display: grid; gap: 2px; max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; }
/* Långa listor (varumärken) i två spalter, alfabetiskt nedåt. */
.sn-cf__panel--wide .sn-cf__options { display: block; columns: 2 220px; column-gap: 4px; }
.sn-cf__panel--wide .sn-cf__opt { break-inside: avoid; }
.sn-cf__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font: 500 15px/1.3 Inter, sans-serif; color: var(--t-text); }
.sn-cf__opt:hover { background: var(--t-soft); }
.sn-cf__opt:has(input:checked) { background: var(--t-soft); box-shadow: inset 0 0 0 2px var(--t-accent); }
.sn-cf__opt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--t-accent); }
.sn-cf__name { flex: 1; min-width: 0; }
.sn-cf__name small { margin-left: 4px; font-size: 13px; color: var(--t-ink-3); }
.sn-cf__count { font-size: 12px; color: var(--t-ink-3); font-variant-numeric: tabular-nums; }
.sn-cf__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 10px 4px 2px; border-top: 1px solid var(--t-line); }
.sn-cf__reset { padding: 6px 2px; background: none; border: 0; font: 500 14px/1 Inter, sans-serif; color: var(--t-ink-2); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.sn-cf__reset:hover { color: var(--t-text); }
.sn-cf__apply.sn-btn { min-height: 42px; padding: 0 22px; border-radius: 60px; border: 1px solid var(--t-text); background: var(--t-text); color: #fff; font: 500 15px/1 Inter, sans-serif; }
.sn-cf__apply.sn-btn:hover { background: var(--t-accent); border-color: var(--t-accent); }
.sn-cf__x { padding: 4px 8px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--t-text); cursor: pointer; }

/* ---------- Antal, valda filter (lime-ribbons som kortens etiketter), sortering ---------- */
.sn-cf__status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 16px 0 clamp(1.25rem, 2.5vw, 1.75rem); }
.sn-cf__total { margin: 0; font: 500 14px/1.3 Inter, sans-serif; color: var(--t-ink-2); }
.sn-cf__total strong { font-weight: 700; color: var(--t-text); }
.sn-cf__active { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sn-cf__tag { padding: 6px 22px 6px 12px; font-size: 11px; letter-spacing: .08em; color: #000; }
.sn-cf__tag::before { background: var(--t-signal-dark); }
.sn-cf__tag::after { background: var(--t-signal); }
.sn-cf__tag span { font-size: 14px; line-height: .8; }
.sn-cf__clear a { font: 500 13px/1 Inter, sans-serif; color: var(--t-ink-2); text-decoration: underline; text-underline-offset: .25em; }
.sn-cf__clear a:hover { color: var(--t-text); }
.sn-cf__sort { margin-left: auto; }
.sn-cf__sort .woocommerce-ordering { margin: 0; }
.sn-cf__sort select { height: 42px; min-height: 0; padding: 0 40px 0 18px; border: 1px solid var(--t-line); border-radius: 60px; background-color: #fff; font: 500 14px/1 Inter, sans-serif; color: var(--t-text); }

/* ---------- Text under produkterna – som startsidans SEO-block ---------- */
.sn-coll__about { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--t-line); display: grid; gap: 24px; }
@media (min-width: 1024px) { .sn-coll__about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; } }
.sn-coll__about h2 { margin: 0; font-family: Inter, sans-serif; font-weight: 900; font-size: clamp(2rem, 1.5rem + 1.9vw, 3.03rem); line-height: 1.05; letter-spacing: -.02em; color: var(--t-text); }
.sn-coll__body { max-width: 68ch; }
.sn-coll__body p { margin: 0 0 1em; font-size: 15px; line-height: 1.65; color: var(--t-ink-2); }
.sn-coll__body p:last-child { margin-bottom: 0; }
.sn-coll__body strong { color: var(--t-text); }

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
	.sn-cf { padding-block: 10px; margin-inline: calc(var(--sn-page-pad) * -1); }
	.sn-cf__form { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-inline: var(--sn-page-pad); }
	.sn-cf__form::-webkit-scrollbar { display: none; }
	.sn-cf__groups { flex-wrap: nowrap; }
	.sn-cf__chip { height: 40px; padding: 0 16px; font-size: 14px; }
	.sn-cf__group { position: static; }
	/* Antal och sortering på samma rad, valda filter under. */
	.sn-cf__total { order: 1; }
	.sn-cf__sort { order: 2; }
	.sn-cf__active { order: 3; flex-basis: 100%; }
	.sn-cf__sort select { height: 38px; padding: 0 34px 0 14px; font-size: 13px; }

	.sn-cf__panel, .sn-cf__panel--wide {
		position: fixed; inset: auto 0 0 0; top: auto; z-index: 1001; width: auto; max-width: none; min-width: 0; max-height: 80vh;
		padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0;
		box-shadow: 0 -20px 60px rgba(11, 18, 40, .3);
	}
	.sn-cf__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 8px; font: 700 18px/1.2 Inter, sans-serif; text-transform: uppercase; }
	.sn-cf__options, .sn-cf__panel--wide .sn-cf__options { grid-template-columns: 1fr; columns: auto; max-height: 58vh; }
	.sn-cf__apply.sn-btn { flex: 1; }
	.sn-cf__group[open]::before { content: ""; position: fixed; inset: 0; z-index: 1000; background: rgba(11, 18, 40, .45); }
	html.sn-cf-open { overflow: hidden; }
}