@charset "UTF-8";
/*!
 * Familia Optica – LISTING (category, product list and search pages)
 * ------------------------------------------------------------------
 * The legacy listing controls, rebuilt one to one – layout and look (client
 * decision 2026-09-23: the old shop's white page, grey filter band, red price
 * slider, square controls; no familia.lt styling). Markup: familia-catalog FC_Sorting::control(), FC_Facets::render(),
 * FC_Listing (promo row, sold-out line, content after the list); behaviour:
 * familia-catalog/assets/listing.js. Where a comment says "ref:" it quotes the
 * legacy client.bundle.js utility classes.
 *
 *   L1 Sort control ("Rūšiuoti")         L5 Filter panel – phones
 *   L2 "Filtrai" trigger (phones)         L6 Price range
 *   L3 Filter row – desktop               L7 Promo row, sold-out line, badges
 *   L4 Options inside a group             L8 Content after the list, search header
 */

/* ==================================================================
   L1 · SORT CONTROL
   ref (Sv): button "py-3 md:px-5 md:-mx-5 flex items-center font-semibold
        space-x-2" = "Rūšiuoti" + chevron; list "absolute md:-left-4 md:top-14
        bg-default-50 shadow-md z-10 py-5 rounded-sm min-w-[220px]", option
        "px-8 py-2.5 whitespace-nowrap hover:text-accent", current "font-bold".
   ================================================================== */

.familia .familia-sort { position: relative; order: 0; margin: 0; }
.familia .familia-sort__button {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 0;
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	list-style: none;
	cursor: pointer;
	user-select: none;
}
.familia .familia-sort__button::-webkit-details-marker { display: none; }
/* the legacy chevron (10×6, stroked), not a filled triangle */
.familia .familia-sort__button::after {
	content: "";
	width: 10px;
	height: 6px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M10.35 10.66 18.66 2.33a.7.7 0 0 0-.99-.99L9.86 9.17 2.05 1.34a.7.7 0 0 0-.99.99l8.3 8.33a.7.7 0 0 0 .99 0Z' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M10.35 10.66 18.66 2.33a.7.7 0 0 0-.99-.99L9.86 9.17 2.05 1.34a.7.7 0 0 0-.99.99l8.3 8.33a.7.7 0 0 0 .99 0Z' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 150ms var(--f-ease);
}
.familia .familia-sort[open] > .familia-sort__button::after { transform: rotate(180deg); }
.familia .familia-sort__button:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; border-radius: var(--f-r-sm); }
.familia .familia-sort__list {
	position: absolute;
	top: 56px;
	left: -16px;
	z-index: 60;
	min-width: 220px;
	margin: 0;
	padding: 20px 0;
	border-radius: var(--f-r-sm);
	background: var(--f-default-50);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
	list-style: none;
}
.familia .familia-sort__list li { margin: 0; padding: 0; list-style: none; }
.familia .familia-sort__option {
	display: block;
	padding: 10px 32px;
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 400;
	white-space: nowrap;
	text-decoration: none;
	transition: color 150ms var(--f-ease);
}
.familia .familia-sort__option:hover,
.familia .familia-sort__option:focus-visible { color: var(--f-red); }
.familia .familia-sort__option.is-current { font-weight: 500; }

/* ==================================================================
   L2 · "FILTRAI" TRIGGER
   ref (ug): "pl-3 font-bold relative" + "(n)" + a 6px primary dot at the top
        left of the label when filters are active.
   ================================================================== */

.familia a.f-toolbar__filters { text-decoration: none; }
.familia .f-toolbar__filters > span { position: relative; }
.familia .f-toolbar__count { font-weight: 500; }
.familia .f-toolbar__dot {
	position: absolute;
	top: -4px;
	left: -8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--f-ink);      /* --primaryColor is the ink */
	box-shadow: 0 1px 2px rgb(0 0 0 / .2);
}

@media (max-width: 1023px) {
	/* the floating dark pill: white label and list above it */
	.familia .f-toolbar .familia-sort { order: 2; }
	.familia .f-toolbar .familia-sort__button { min-height: 44px; padding: 12px 12px 12px 0; color: var(--fs-white); font-size: 14px; }
	.familia .f-toolbar .familia-sort__list { top: auto; bottom: 56px; left: auto; right: -12px; font-size: 16px; }
	.familia .f-toolbar .familia-sort__button:focus-visible { outline-color: var(--fs-white); }
}

/* ==================================================================
   L3 · FILTER ROW – DESKTOP (≥1024)
   Client 2026-09-25: "work on filters, to be more convenient, take up
   less space". One row of compact buttons (a group each, "Nerodyti
   išparduotų", "Rūšiuoti" at the end); a button opens its group as a
   small panel over the list; the choices are applied in one go ("Rodyti"
   or a click elsewhere). Active choices: removable tags under the row.
   familia.lt shapes: 40px controls, pill buttons, 10px panel corners.
   ================================================================== */

.familia .familia-filters { margin: 24px 0 16px; }   /* clear of the category text above (client 2026-09-25: "seems like it is glued") */
.familia .familia-filters fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.familia .familia-filters__groups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.familia .familia-filters__none { margin: 0; color: var(--f-default-900); }
.familia .familia-facet { position: relative; }

/* the group button: a 40px pill; with choices an ink frame and the number */
.familia .familia-facet__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0 14px 0 16px;
	border: 1px solid #e6e6e6;       /* lighter pills (2026-09-26, the minimal pass) */
	border-radius: 20px;
	background: #fff;
	box-shadow: none;
	color: var(--f-ink);
	font: 400 14px/1 var(--f-text);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--f-fast) var(--f-ease);
}
.familia .familia-facet__toggle:hover,
.familia .familia-facet.is-open > .familia-facet__toggle,
.familia .familia-facet.has-value > .familia-facet__toggle { border-color: var(--f-ink); background: #fff; color: var(--f-ink); }
.familia .familia-facet__toggle:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; }
.familia .familia-facet__badge {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--f-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
}
.familia .familia-facet__badge[hidden] { display: none; }
.familia .familia-facet__summary { display: none; }
.familia .familia-facet__chevron {
	width: 10px;
	height: 6px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M10.35 10.66 18.66 2.33a.7.7 0 0 0-.99-.99L9.86 9.17 2.05 1.34a.7.7 0 0 0-.99.99l8.3 8.33a.7.7 0 0 0 .99 0Z' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M10.35 10.66 18.66 2.33a.7.7 0 0 0-.99-.99L9.86 9.17 2.05 1.34a.7.7 0 0 0-.99.99l8.3 8.33a.7.7 0 0 0 .99 0Z' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--f-fast) var(--f-ease);
}
.familia .familia-facet.is-open .familia-facet__chevron,
.familia .familia-facet.is-expanded .familia-facet__chevron { transform: rotate(180deg); }

/* the panel: over the list, under its button (flipped to the right edge near the window's) */
.familia .familia-facet__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 80;
	display: none;
	width: max-content;
	min-width: 280px;
	max-width: min(680px, calc(100vw - 48px));
	padding: 16px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 0 10px rgb(102 105 107 / .1), 0 16px 32px -12px rgb(var(--f-ink-rgb) / .24);
}
.familia .familia-facet.is-open > .familia-facet__panel { display: block; }
.familia .familia-facet.is-flip > .familia-facet__panel { left: auto; right: 0; }
.familia:not(.f-js) .familia-facet:focus-within > .familia-facet__panel { display: block; }   /* no JS: keyboard still reaches it */
.familia .familia-facet__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--f-default-200);
}
.familia .familia-facet__reset {
	min-height: 0;
	padding: 8px 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--f-default-900, #676767);
	font: 400 14px/1 var(--f-text);
	text-transform: none;
	cursor: pointer;
}
.familia .familia-facet__reset:hover { background: none; color: var(--f-red); }
.familia .familia-facet__apply {
	height: 36px;
	min-height: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 5px;
	background: var(--f-sky, #8dc9f7);
	box-shadow: none;
	color: var(--f-ink);
	font: 400 14px/1 var(--f-text);
	text-transform: none;
	cursor: pointer;
}
.familia .familia-facet__apply:hover { background: var(--f-sky-deep, #6293b4); color: var(--f-ink); }

/* "Nerodyti išparduotų" and "Rūšiuoti" at the row's end */
.familia .familia-filters__stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin: 0 0 0 8px;
	color: var(--f-ink);
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}
.familia .familia-filters__sort { margin-left: auto; }
.familia .familia-filters__sort .familia-sort__button { min-height: 40px; padding: 8px 0; font-size: 14px; font-weight: 400; }
.familia .familia-filters__sort .familia-sort__list { top: 48px; left: auto; right: 0; border-radius: 10px; }

/* the active choices: removable tags + "Išvalyti filtrus" */
.familia .familia-filters__active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 16px; }
.familia .familia-filters__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	min-height: 0;
	padding: 0 10px 0 12px;
	border: 0;
	border-radius: 16px;
	background: var(--f-default-100, #f6f6f6);
	box-shadow: none;
	color: var(--f-ink);
	font: 400 13px/1 var(--f-text);
	text-transform: none;
	cursor: pointer;
}
.familia .familia-filters__tag span { font-size: 16px; line-height: 1; color: var(--f-default-900, #676767); }
.familia .familia-filters__tag:hover { background: var(--f-default-200); color: var(--f-ink); }
.familia .familia-filters__tag:hover span { color: var(--f-red); }
.familia .familia-filters__reset-all { margin-left: 4px; color: var(--f-ink); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.familia .familia-filters__reset-all:hover { color: var(--f-red); }

/* the phone panel's parts stay out of the desktop row */
.familia .familia-filters__bar,
.familia .familia-filters__foot { display: none; }

@media (min-width: 1024px) {
	.familia .f-toolbar { display: none; }   /* the row has its own "Rūšiuoti"; the toolbar is the phones' pill */
}

/* ==================================================================
   L4 · OPTIONS INSIDE A GROUP
   Compact rows (checkbox · swatch / picture · name), in columns; the
   width descriptions of "Akinių plotis" under their names; a searchable
   group (brands) scrolls inside the panel.
   ================================================================== */

.familia .familia-facet__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(150px, 1fr));
	gap: 2px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.familia .familia-facet--style-icon .familia-facet__list,
.familia .familia-facet__search ~ .familia-facet__list { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.familia .familia-facet__search ~ .familia-facet__list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.familia .familia-facet__list:has(.familia-facet__desc) { grid-template-columns: minmax(0, 360px); gap: 4px; }
.familia .familia-facet__item { margin: 0; padding: 0; list-style: none; }
.familia .familia-facet__item[hidden] { display: none; }
.familia .familia-facet__option {
	display: grid;
	grid-template-columns: 18px auto minmax(0, 1fr);
	align-items: center;
	column-gap: 10px;
	min-height: 36px;
	margin: 0;
	padding: 6px 8px;
	border-radius: 6px;
	color: var(--f-ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color var(--f-fast) var(--f-ease);
}
.familia .familia-facet__option:hover { background: var(--f-default-100, #f6f6f6); }
.familia .familia-facet__option:focus-within { outline: 2px solid var(--f-ink); outline-offset: -2px; }
.familia .familia-facet__option:not(:has(.familia-facet__icon, .familia-facet__color)) { grid-template-columns: 18px minmax(0, 1fr); }
.familia .familia-facet__item.is-active .familia-facet__label { font-weight: 500; }
/* the shop's checkbox: 18px, ink when ticked */
.familia .familia-filters input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--f-default-400, #b9b9b9);
	border-radius: 4px;
	background: #fff center / 12px no-repeat;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.familia .familia-filters input[type="checkbox"]:checked {
	border-color: var(--f-ink);
	background-color: var(--f-ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E");
}
.familia .familia-filters input[type="checkbox"]:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; }
.familia .familia-facet__label { min-width: 0; overflow-wrap: anywhere; }
.familia .familia-facet__desc { grid-column: 2 / -1; color: var(--f-default-900, #676767); font-size: 12px; line-height: 1.4; }
.familia .familia-facet__option:has(.familia-facet__desc) { align-items: start; padding-block: 8px; }
.familia .familia-facet__option:has(.familia-facet__desc) input { margin-top: 1px; }
.familia .familia-facet__color { display: block; width: 18px; height: 18px; border-radius: 50%; }
.familia .familia-facet__color--light { box-shadow: inset 0 0 0 1px var(--f-default-400, #b9b9b9); }
.familia .familia-facet__icon { display: block; width: 40px; height: 32px; object-fit: contain; }
.familia .familia-facet--style-icon .familia-facet__icon { width: 18px; height: 18px; border-radius: 50%; }
/* a colour without a swatch keeps its name in line with the others */
.familia .familia-facet--style-icon .familia-facet__option,
.familia .familia-facet--style-icon .familia-facet__option:not(:has(.familia-facet__icon, .familia-facet__color)) { grid-template-columns: 18px 18px minmax(0, 1fr); }
.familia .familia-facet--style-icon .familia-facet__label { grid-column: 3; }
/* the search box of a long group (brands) */
.familia .familia-filters input.familia-facet__search {
	display: block;
	width: 100%;
	height: 40px;
	min-height: 0;
	margin: 0 0 10px;
	padding: 0 16px 0 40px;
	border: 0;
	border-radius: 20px;
	background: var(--f-default-100, #f6f6f6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23140e06' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center / 18px no-repeat;
	box-shadow: none;
	color: var(--f-ink);
	font-size: 14px;
}
/* the price group: the slider at a panel's width */
.familia .familia-facet--price .familia-facet__panel { width: 360px; }
.familia .familia-facet--price .familia-range { max-width: none; padding: 12px 0 0; }
.familia .familia-facet--price .familia-range__values { font-size: 14px; line-height: 20px; }

/* ==================================================================
   L5 · FILTER PANEL – PHONES (<1024)
   "Filtrai" (the toolbar pill) opens the panel over the page: the groups
   as one-line rows (name · what is chosen · chevron) that open in place,
   "Nerodyti išparduotų", and at the bottom "Išvalyti filtrus" +
   "Pritaikyti {n} filtrus".
   ================================================================== */

@media (max-width: 1023px) {
	.familia .familia-filters { display: none; margin: 0; }
	.familia .familia-filters.is-open,
	.familia .familia-filters:target {
		position: fixed;
		inset: 0;
		z-index: 1200;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
	}
	.familia.familia-filters-open { overflow: hidden; }
	.familia .familia-filters__bar {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		padding: 0 8px 0 16px;
		border-bottom: 1px solid var(--f-default-200);
		background: #fff;
	}
	.familia .familia-filters__heading { margin: 0; font-size: 20px; font-weight: 400; }
	.familia .familia-filters__close {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		min-height: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		color: var(--f-ink);
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
	}
	.familia .familia-filters__groups { display: block; flex: 1 0 auto; padding: 0 16px; }
	.familia .familia-facet { border-bottom: 1px solid var(--f-default-200); }
	.familia .familia-facet__toggle,
	.familia .familia-facet__toggle:hover,
	.familia .familia-facet.has-value > .familia-facet__toggle {
		display: flex;
		width: 100%;
		height: 56px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		font-size: 16px;
	}
	.familia .familia-facet__name { flex: none; }
	.familia .familia-facet__summary {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		color: var(--f-default-900, #676767);
		font-size: 13px;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.familia .familia-facet__badge { display: none; }
	.familia .familia-facet__chevron { flex: none; }
	.familia .familia-facet__panel,
	.familia .familia-facet.is-open > .familia-facet__panel {
		position: static;
		display: none;
		width: auto;
		min-width: 0;
		max-width: none;
		padding: 0 0 16px;
		border-radius: 0;
		box-shadow: none;
	}
	.familia .familia-facet.is-expanded > .familia-facet__panel { display: block; }
	.familia .familia-facet__actions { display: none; }
	.familia .familia-facet__list,
	.familia .familia-facet--style-icon .familia-facet__list,
	.familia .familia-facet__search ~ .familia-facet__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.familia .familia-facet__list:has(.familia-facet__desc) { grid-template-columns: minmax(0, 1fr); }
	.familia .familia-facet__option { min-height: 44px; }
	.familia .familia-facet--price .familia-facet__panel { width: auto; }
	.familia .familia-filters__stock { display: flex; height: 56px; margin: 0; }
	.familia .familia-filters__sort { display: none; }
	.familia .familia-filters__foot {
		position: sticky;
		bottom: 0;
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--f-default-200);
		background: #fff;
	}
	.familia .familia-filters__clear { flex: none; color: var(--f-ink); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
	.familia .familia-filters__apply,
	.familia .familia-filters__apply.button {
		flex: 1 1 auto;
		height: 48px;
		min-height: 0;
		border: 0;
		border-radius: 5px;
		background: var(--f-sky, #8dc9f7);
		box-shadow: none;
		color: var(--f-ink);
		font: 400 15px/1 var(--f-text);
		text-transform: none;
	}
	.familia .familia-filters__active { margin: 0 0 12px; }
}

/* ==================================================================
   L6 · PRICE RANGE
   ref (lg): a draggable two-thumb slider (step 0.01), under it
        "Nuo: 10,00 €" … "Iki: 398,05 €" – "font-light" label, "font-semibold" value.
   ================================================================== */

/* ref: react-input-range as the old shop themed it – a 5px rounded track
   (rgba(225,225,227,.79)), the chosen part red (--accentColor), 24px red
   thumbs with a soft glow; the slider box is 16px high inside `my-4`. */
.familia .familia-range { --from: 0%; --to: 100%; max-width: 945px; padding: 16px 0 0; }
.familia .familia-range__track {
	position: relative;
	height: 16px;
	margin: 0 12px;
}
.familia .familia-range__track::before,
.familia .familia-range__track::after {
	content: "";
	position: absolute;
	top: 5.6px;
	height: 4.8px;
	border-radius: 4.8px;
}
.familia .familia-range__track::before { left: -12px; right: -12px; background: rgb(225 225 227 / .79); }
.familia .familia-range__track::after { left: var(--from); right: calc(100% - var(--to)); background: var(--f-red); }
.familia .familia-range__input {
	position: absolute;
	top: -4px;
	left: -12px;
	z-index: 1;
	width: calc(100% + 24px);
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}
.familia .familia-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 50%;
	background: var(--f-red);
	box-shadow: 0 2px 15px rgb(199 49 156 / .51);
	cursor: grab;
	pointer-events: auto;
}
.familia .familia-range__input::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border: 0;
	border-radius: 50%;
	background: var(--f-red);
	box-shadow: 0 2px 15px rgb(199 49 156 / .51);
	cursor: grab;
	pointer-events: auto;
}
.familia .familia-range__input::-webkit-slider-runnable-track { background: none; }
.familia .familia-range__input::-moz-range-track { background: none; }
.familia .familia-range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--f-ink); outline-offset: 2px; }
.familia .familia-range__values {
	display: flex;
	justify-content: space-between;
	margin: 16px 0 0;              /* ref: slider my-4, then the row pt-2 */
	padding: 8px 0 0;
	font-size: 16px;
	line-height: 24px;
}
.familia .familia-range__label { margin-right: 4px; font-weight: 300; }
.familia .familia-range__values strong { font-weight: 600; }
@media (min-width: 768px) { .familia .familia-range__values { font-size: 18px; line-height: 28px; } }
@media (max-width: 1023px) {
	/* phone panel: read-outs above the slider (L5), no desktop offsets */
	.familia .familia-range { padding-top: 0; }
	.familia .familia-range__values { margin: 0; padding: 0; }
}

/* ==================================================================
   L7 · PROMO ROW, SOLD-OUT LINE, BADGES
   ref (kp): after every 15th card "w-full flex flex-col sm:col-start-1
        sm:col-end-3 md:col-end-4 items-center py-[70px] sm:py-20" with an
        "h2-small" text and a "font-bold text-lg text-link" link.
   ref (Ep): "text-[14px] text-error font-bold h-4" + a 7px primary dot:
        "Prekė išparduota". Badges: discount "bg-secondary", label `top`
        "bg-accent", `recommended` "bg-primary", any other "bg-[#8CBBFF]".
   ================================================================== */

/* client 2026-09-25: the link "Registracija" as the home page's sky button; the row as a compact familia.lt card
   (light grey, 10px corners) – text on the left, the button on the right; stacked and centred on phones */
.familia ul.products > li.familia-listing-promo,
.familia .familia-listing-promo {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	text-align: center;
}
.familia .familia-listing-promo__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 24px 20px;
	border-radius: 10px;
	background: #f5f5f5;
}
.familia .familia-listing-promo__text {
	margin: 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--f-ink);
}
.familia .familia-listing-promo__link,
.familia a.familia-listing-promo__link:visited {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 40px;
	padding: 0 22px;
	border-radius: 5px;
	background: var(--f-sky, #8dc9f7);
	color: var(--f-ink);
	font-size: 15px;
	font-weight: 400;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--f-fast) var(--f-ease);
}
.familia .familia-listing-promo__link:hover { background: var(--f-sky-deep, #6293b4); color: var(--f-ink); text-decoration: none; }
@media (min-width: 768px) {
	.familia .familia-listing-promo__in { flex-direction: row; justify-content: space-between; gap: 32px; padding: 24px 32px; text-align: left; }
	.familia .familia-listing-promo__text { font-size: 24px; }
	.familia .familia-listing-promo__text br { display: none; }
}

.familia ul.products li.product .familia-card__soldout {
	grid-area: title;
	align-self: start;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 16px;
	margin: -4px 0 0;
	color: var(--f-red);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}
.familia ul.products li.product .familia-card__soldout::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--f-ink);
}

.familia .familia-badge--sale { background: var(--f-sky); }
.familia .familia-badge--top { background: var(--f-red-text); }
.familia .familia-badge--recommended { background: var(--f-ink); }
.familia .familia-badge--promo,
.familia .familia-badge--new { background: #8cbbff; }

/* ==================================================================
   L8 · CONTENT AFTER THE LIST, SEARCH HEADER
   ================================================================== */

.familia .familia-listing-after { margin: 40px 0 0; }
/* the old category FAQ runs the full container (1260px at 1440), same accordion as the CMS pages */
.familia .familia-listing-after .familia-faq { max-width: none; }
.familia .f-archive__results { margin: 8px 0 0; color: var(--f-default-900); font-size: 16px; font-weight: 500; }
.familia .familia-empty__actions { margin: 16px 0 0; }