@charset "UTF-8";
/*!
 * Familia Optica – SHOP VIEWS
 * ------------------------------------------------------------------
 * Faithful reproduction of shop.familia.lt (the vendor shop this project
 * replaces). Every number here was read off the captured reference in
 * `design-reference/`, not invented:
 *
 *   pages/akiniai-nuo-saules.html   category page + product cards
 *   pages/krepselis.html            cart / mini-cart
 *   assets/client.bundle.css        the live compiled stylesheet
 *
 * The live shop is Tailwind + React SSR. The classes were resolved against
 * the bundle and reimplemented here in plain CSS on WooCommerce markup.
 * Where a comment says "ref:" it quotes the live utility classes so the next
 * person can check the claim.
 *
 * Shared tokens, resets, typography, buttons and forms live in familia.css.
 * Header/footer/shell live in familia-shell.css. This file owns:
 *
 *   01 Shop tokens          06 Pagination + empty state
 *   02 Breadcrumbs          07 Single product
 *   03 Category header      08 Lens configurator / subscriptions / salons
 *   04 Toolbar + filters    09 Cart + checkout
 *   05 Grid + product card  10 My account
 *
 * Class contracts consumed here (do NOT rename – other streams emit them):
 *   familia-catalog   .familia-badges--loop, .familia-badge--top/--new/--sale,
 *                     .familia-card__alt-image, .familia-swatches,
 *                     .familia-attributes, .familia-delivery, .familia-stock,
 *                     .familia-cta-secondary.familia-try-in-salon,
 *                     form.familia-filters + .familia-facet*
 *   familia-salons    .familia-salons
 *   familia-lenses    .familia-lens* (fl-*)
 *   familia-subscriptions  .familia-sub*
 * See docs/CATALOG-UX.md §4, docs/SALONS.md, docs/SUBSCRIPTIONS.md,
 * docs/DESIGN-SHOP.md.
 */

/* ==================================================================
   01 · SHOP TOKENS
   The live shop's neutral ramp (design-reference/SPEC.md "Colour").
   These are shop-view-local on purpose: familia.css does not define a
   grey ramp yet. If the shell agent promotes them, delete them here.
   ================================================================== */

.familia {
	--fs-white: #ffffff;        /* default-50  */
	--fs-grey-100: #f6f6f6;     /* default-100 – panel / footer ground */
	--fs-grey-200: #f0f0f0;     /* default-200 – borders, dividers     */
	--fs-grey-400: #cdd1d6;     /* default-400 – input borders         */
	--fs-grey-600: #b5bac2;     /* default-600 – muted marks, rules    */
	--fs-muted: #666666;        /* default-900 – secondary text        */

	/* Live shop geometry. ref: max-w-[1440px] px-4 md:px-[90px] */
	--fs-max: 1440px;
	/* One rail site-wide: the shared gutter token (16px, 90px from 1024px –
	   familia.css §04), so shop views line up with the header and footer. */
	--fs-gut: var(--f-gut);

	/* ref: rounded-sm = 0.125rem. The live shop is nearly square-cornered. */
	--fs-r: 0.125rem;

	/* Product card. ref: h-[269px] image box, h-[68px] title box, gap-[30px] */
	--fs-card-media-h: 269px;
	--fs-card-title-h: 68px;
	--fs-grid-gap: 30px;

	/* ref: shadow-xs / shadow-secondary-md */
	--fs-shadow-badge: 0 10px 15px rgb(0 0 0 / 0.1);
	--fs-shadow-pill: 0 4px 30px 0 rgb(0 0 0 / 0.25);
}

/* The shop rail. Storefront's .col-full is narrower than the live shop, so
   shop views get the reference container instead.
   The `#content` in the selector is deliberate: familia.css full-bleeds these
   views with `.familia.familia-full #content > .col-full` (1,3,1), and an ID
   beats any class-only selector we could write. */
.familia.woocommerce-shop #content > .col-full,
.familia.woocommerce-cart #content > .col-full,
.familia.woocommerce-checkout #content > .col-full,
.familia.woocommerce-account #content > .col-full,
.familia.single-product #content > .col-full,
.familia.tax-product_cat #content > .col-full,
.familia.tax-product_tag #content > .col-full,
.familia.tax-product_brand #content > .col-full {
	max-width: var(--fs-max);
	padding-inline: var(--fs-gut);
	margin-inline: auto;
}

/* The live shop runs products full width with an off-canvas filter panel;
   there is no persistent sidebar next to the grid. */
.familia.familia-with-filters .site-content > .col-full { display: block; }
.familia.familia-with-filters #primary { width: 100%; float: none; margin: 0; }

/* ==================================================================
   02 · BREADCRUMBS
   ref: text-[11px] lg:text-13 pb-2 lg:pb-4 text-default-600, "/" separator
   ================================================================== */

.familia .f-crumbs,
.familia .woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 8px 0;                /* ref: wrapper pt-2; trail pb-2 lg:pb-4 */
	font-size: 11px;
	line-height: 20px;
	color: var(--fs-grey-600);     /* ref: text-default-600 */
}
.familia .f-crumbs a,
.familia .woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.familia .f-crumbs a:hover,
.familia .woocommerce-breadcrumb a:hover {
	color: var(--f-red);
	text-decoration: underline;
}
/* Storefront renders the breadcrumb itself with its own args, so the separator
   is `.breadcrumb-separator`, not the `.f-crumbs__sep` our filter asks for.
   Style both. */
.familia .f-crumbs__sep,
.familia .woocommerce-breadcrumb .breadcrumb-separator {
	margin-inline: 4px;
	color: inherit;
}
/* Storefront draws a Font Awesome house before the first link and turns the
   separator into an angle glyph (text-indent + ::after). The legacy trail is
   plain text: "Pradžia / Akiniai". */
.familia .woocommerce-breadcrumb a:first-of-type::before,
.familia .woocommerce-breadcrumb .breadcrumb-separator::after { content: none; display: none; }
.familia .woocommerce-breadcrumb .breadcrumb-separator {
	display: inline;
	position: static;
	padding: 0;
	text-indent: 0;
	white-space: pre;
}

/* the breadcrumb sits outside #content, so give its wrapper the same rail */
.familia.woocommerce-shop .storefront-breadcrumb > .col-full,
.familia.single-product .storefront-breadcrumb > .col-full,
.familia.tax-product_cat .storefront-breadcrumb > .col-full,
.familia.tax-product_tag .storefront-breadcrumb > .col-full,
.familia.tax-product_brand .storefront-breadcrumb > .col-full {
	max-width: var(--fs-max);
	padding-inline: var(--fs-gut);
	margin-inline: auto;
}
.familia .storefront-breadcrumb { margin: 0; padding: 0; border: 0; background: transparent; }

@media (min-width: 1280px) {   /* legacy lg */
	.familia .f-crumbs,
	.familia .woocommerce-breadcrumb { font-size: 13px; padding-bottom: 16px; }
}

/* ==================================================================
   03 · CATEGORY HEADER
   ref: h1 "text-[28px] sm:text-44 font-semibold leading-none",
        description ".semantic-html my-4", then the result count
        "mb-5 text-default-600 font-semibold".
   The live page has no eyebrow, no hero image and no subcategory chips on
   the archive header, so they are hidden rather than styled.
   ================================================================== */

.familia .f-archive {
	display: block;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	background: transparent;
}
.familia .f-archive__media,
.familia .f-archive .f-eyebrow,
.familia .f-archive .f-chips {
	display: none;
}

.familia .f-archive__title,
.familia .woocommerce-products-header__title {
	margin: 0;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;      /* ref: leading-none */
	letter-spacing: 0;
	color: var(--f-ink);
}

/* ref: .semantic-html my-4 – 16px above and below, light body copy */
.familia .f-archive__desc,
.familia .term-description {
	margin: 16px 0;
	max-width: none;               /* the legacy copy runs the full container */
	font-size: 16px;               /* .semantic-html p: text-base font-light leading-snug */
	font-weight: 300;
	line-height: 1.375;
	color: var(--f-ink);
}
.familia .f-archive__desc > *:first-child { margin-top: 0; }
.familia .f-archive__desc > *:last-child { margin-bottom: 0; }
.familia .f-archive__desc p { margin: 0 0 8px; font-size: inherit; line-height: inherit; }
.familia .f-archive__desc a { color: var(--f-red); }

/* "Skaityti daugiau" expander. The captured category has a short description
   and shows no expander; the control only appears when JS finds the copy
   taller than the clamp, so short descriptions render exactly as the
   reference does. */
.familia .f-archive__desc[data-clamp].is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
.familia .f-archive__more {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--f-red);
	font-size: 14px;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
	min-height: 0;
}
.familia .f-archive__more[hidden] { display: none; }
.familia .f-archive__more:hover { text-decoration: none; }

/* result count, its own block above the grid.
   ref: "mb-5 text-default-600 font-semibold" → "2221 prekės" */
.familia .familia-shop-count,
.familia .woocommerce-result-count {
	display: block;
	margin: 0 0 20px;
	font-size: 14px;               /* ref: inherits text-sm */
	line-height: 20px;
	font-weight: 500;
	color: var(--fs-muted);        /* ref: text-default-600 (#b5bac2, 1.9:1 on white – under WCAG AA 4.5:1); default-900 */
}

/* ref: the header row is "mb-1 sm:mb-8" and holds the title, the copy and
   the sort/filter controls; our toolbar is a sibling, so the gap sits under
   the toolbar instead (toolbar margin below). */
.familia .f-archive { margin-bottom: 0; }
@media (min-width: 768px) {
	.familia .f-archive__title,
	.familia .woocommerce-products-header__title { font-size: 44px; }  /* ref: sm:text-44 */
}

/* ---- listing title area (category, list, brand and search pages) – header redesign 2026-09-25:
   lensor.lt's order and scale in the Familia style (docs/design/header-lensor-spec.md §5):
   breadcrumb with a home icon and chevrons · a large regular-weight H1 · the description ·
   the sort row right-aligned above the grid. ---- */
.familia.familia-with-filters .woocommerce-products-header { margin: 0; padding: 0; }   /* WooCommerce's empty archive header: Storefront pads it 4.2em */
.familia.familia-with-filters .woocommerce-breadcrumb {
	gap: 0 10px;
	padding: 24px 0 16px;
	color: var(--f-default-900);
	font-size: 14px;
	line-height: 20px;
}
.familia.familia-with-filters .woocommerce-breadcrumb a { color: var(--f-default-900); }
.familia.familia-with-filters .woocommerce-breadcrumb a:hover { color: var(--f-red); text-decoration: none; }
/* "Pradžia" becomes a house (the word stays the link's accessible name) */
.familia.familia-with-filters .woocommerce-breadcrumb > a:first-child {
	display: inline-flex;
	box-sizing: content-box;
	width: 20px;
	height: 20px;
	margin: -10px;
	padding: 10px;
	overflow: hidden;
	color: var(--f-ink);
	font-size: 0;
}
.familia.familia-with-filters .woocommerce-breadcrumb > a:first-child::before {
	content: "";
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9v11h13V9'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E") center / 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9v11h13V9'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.familia.familia-with-filters .woocommerce-breadcrumb > a:first-child:hover { color: var(--f-red); }
.familia.familia-with-filters .woocommerce-breadcrumb .breadcrumb-separator,
.familia.familia-with-filters .woocommerce-breadcrumb .f-crumbs__sep {
	display: inline-block;
	flex: none;
	width: 7px;
	height: 12px;
	margin: 0;
	overflow: hidden;
	background: var(--f-default-600);
	font-size: 0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 5 5-5 5'/%3E%3C/svg%3E") center / 7px 12px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 5 5-5 5'/%3E%3C/svg%3E") center / 7px 12px no-repeat;
}
.familia.familia-with-filters .f-archive__title,
.familia.familia-with-filters .f-archive .woocommerce-products-header__title {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
}
.familia.familia-with-filters .f-archive__desc { margin: 16px 0 0; font-size: 16px; font-weight: 300; line-height: 1.5; }
@media (min-width: 768px) {
	.familia.familia-with-filters .f-archive__title,
	.familia.familia-with-filters .f-archive .woocommerce-products-header__title { font-size: 32px; }
}
@media (min-width: 1024px) {
	.familia.familia-with-filters .f-toolbar { margin: 16px 0 16px; }
}

/* ==================================================================
   04 · TOOLBAR + FILTERS
   Desktop: the sort control and the "Filtrai" button sit at the right end of
   the header row, separated by a 1px rule. ref:
     "hidden md:flex text-base items-center justify-between w-full
      md:justify-end md:w-auto"
     divider "h-[18px] w-[1px] bg-default-600 mx-5"
   Mobile: the same two controls live in a dark sticky pill above the fold.
   ref: "md:hidden sticky bottom-11 bg-bodyTextColor max-h-[44px]
         max-w-[220px] rounded-sm shadow-secondary-md"
   There is no column-count switcher on the live shop.
   ================================================================== */

.familia .f-toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 0;
	margin: 0 0 32px;              /* ref: header row sm:mb-8 */
	padding: 0;
	border: 0;
	font-size: 16px;
}
.familia .f-toolbar__grid { display: none; }   /* no such control on the live shop */

/* On mobile the toolbar becomes the sticky pill; the count stays in flow. */
.familia .f-toolbar__right {
	display: flex;
	align-items: center;
	margin-left: auto;
}

/* sort. ref: "py-3 md:px-5 md:-mx-5 flex items-center font-semibold space-x-2" */
.familia .f-toolbar .woocommerce-ordering { margin: 0; }
.familia .f-toolbar .woocommerce-ordering select,
.familia .familia-sort__select {
	appearance: none;
	-webkit-appearance: none;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 12px 24px 12px 20px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 20 12' fill='none'%3E%3Cpath fill='%23140e06' stroke='%23140e06' 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'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	box-shadow: none;
	cursor: pointer;
	max-width: none;
}
.familia .f-toolbar .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--f-ink);
	outline-offset: 2px;
}

/* the 1px rule between sort and filters. ref: h-[18px] w-[1px] bg-default-600 mx-5 */
.familia .f-toolbar__right::before {
	content: "";
	flex: 0 0 auto;
	width: 1px;
	height: 18px;
	margin-inline: 20px;
	background: var(--fs-grey-600);
	order: 1;
}
.familia .f-toolbar .woocommerce-ordering { order: 0; }
.familia .f-toolbar__filters { order: 2; }

/* "Filtrai" trigger. ref: 24x19 sliders icon + "pl-3 font-bold" label */
.familia .f-toolbar__filters {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	margin: 0;
	padding: 12px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;              /* the live row is font-semibold */
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}
.familia .f-toolbar__filters:hover { background: transparent; color: var(--f-red); }
.familia .f-toolbar__filters svg { width: 24px; height: 24px; flex: 0 0 auto; }

/* ---- phone + tablet: the dark sticky pill -------------------------
   The desktop row is "hidden md:flex" and the pill "md:hidden" – the legacy
   md is 1024px, so tablets get the pill too. */
@media (max-width: 1023px) {
	.familia .f-archive { margin-bottom: 4px; }   /* ref: mb-1 */
	/* The live shop puts this pill *after* the grid in the DOM, which is what
	   makes `position: sticky; bottom: 11` float it over the list. Our toolbar
	   has to precede the grid (it is the desktop header row), so on mobile it
	   is pinned with `fixed` instead — same floating dark pill, without
	   reordering the markup across WooCommerce hooks. */
	.familia .f-toolbar {
		position: fixed;
		bottom: 44px;                  /* ref: bottom-11 */
		left: 50%;
		transform: translateX(-50%);
		z-index: 500;
		width: max-content;
		max-width: 220px;              /* ref: max-w-[220px] */
		height: 44px;                  /* ref: max-h-[44px] */
		margin: 0;
		padding: 0;
		border-radius: var(--fs-r);
		background: var(--f-ink);      /* ref: bg-bodyTextColor */
		box-shadow: var(--fs-shadow-pill);
		color: var(--fs-white);
		font-size: 14px;
		align-items: center;
		justify-content: center;
	}
	/* mobile order in the reference is Filtrai | rule | Rūšiuoti */
	.familia .f-toolbar__right { margin: 0; }
	.familia .f-toolbar__filters {
		order: 0;
		min-height: 44px;
		padding-inline: 12px;
		color: var(--fs-white);
		font-size: 14px;
		font-weight: 500;
	}
	.familia .f-toolbar__filters:hover { color: var(--fs-white); }
	.familia .f-toolbar__right::before { margin-inline: 12px; }
	.familia .f-toolbar .woocommerce-ordering select {
		padding: 12px 22px 12px 0;
		color: var(--fs-white);
		font-size: 14px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 20 12' fill='none'%3E%3Cpath fill='%23ffffff' stroke='%23ffffff' 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'/%3E%3C/svg%3E");
	}
	.familia .f-toolbar .woocommerce-ordering select:focus-visible {
		outline-color: var(--fs-white);
	}
	.familia .familia-shop-count { font-size: 14px; }
	/* room for the floating pill so it never covers the last row or the
	   load-more button */
	.familia .f-load-more { padding-bottom: 56px; }
}

/* ---- the filter block ------------------------------------------ */
/* The filter block, the "Rūšiuoti" list, the promo row and the sold-out line
   are in assets/css/familia-listing.css (familia-catalog FC_Facets / FC_Sorting /
   FC_Listing markup). */

/* ==================================================================
   05 · GRID + PRODUCT CARD
   ref (grid):  "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-[30px]"
   ref (card):  "bg-default-50 flex flex-col text-sm sm:text-base relative
                 group w-full"  – white, square, borderless, no padding
   ref (media): "relative flex justify-center mb-4 md:mb-0 h-[269px]
                 items-center" – a FIXED 269px box, image contained & centred
   ref (title): "mb-2 flex flex-col justify-end h-[68px]" wrapping
                "line-clamp-2 text-lg md:text-xl font-bold"
   ref (price): "flex flex-wrap" > grow spacer + the price pair, so the price
                is pushed to the right and any meta grows on the left.
   ================================================================== */

.familia ul.products {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fs-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.familia ul.products::before,
.familia ul.products::after { content: none; display: none; }

.familia ul.products li.product {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;              /* ref: square, borderless */
	background: var(--fs-white);   /* ref: bg-default-50 */
	position: relative;            /* ref: relative group */
	display: flex;
	flex-direction: column;
	font-size: 14px;               /* ref: text-sm */
	/* Storefront centres loop text; the live shop is left-aligned throughout. */
	text-align: left;
	overflow: visible;
	float: none;
	clear: none;
}
.familia ul.products li.product::before,
.familia ul.products li.product::after { content: none; display: none; }

/* WooCommerce still floats and percentage-sizes loop items:
     .site-main ul.products.columns-3 li.product { width:29.4118%; float:left }
   is (0,4,2) and beats a plain `.familia ul.products li.product` (0,3,2),
   which leaves every card at 29% of its own grid cell. The attribute selector
   below ties on specificity and wins on order. Keep it in step with the base
   rule above.
   On full-width pages (CMS pages with a [familia_products] grid, e.g.
   /virtualus-akiniu-pasimatavimas/) Storefront adds
     .storefront-full-width-content .site-main ul.products.columns-4 li.product
       { width:21.7391%; margin-right:4.3478% }   (0,5,2)
   which squeezed every card to 86px of its 393px cell (image, title and
   prices in a sliver, "Metalinis" one letter per line) – the third selector
   ties with it and wins on order. */
.familia ul.products[class*="columns-"] li.product,
.familia .site-main ul.products li.product,
.familia .site-main ul.products[class*="columns-"] li.product {
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
}
.familia ul.products[class*="columns-"] li.product.first,
.familia ul.products[class*="columns-"] li.product.last { clear: none; }

/* The product link wraps media + title + meta + price. A named grid gives the
   reference's layout without restructuring WooCommerce's hook output. */
.familia ul.products li.product > a.woocommerce-LoopProduct-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"media media"
		"title title"
		"meta  price";
	align-content: start;
	text-decoration: none;
	color: inherit;
}

/* ---- media ------------------------------------------------------- */
.familia ul.products li.product .familia-card__media {
	grid-area: media;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--fs-card-media-h);
	margin: 0 0 16px;              /* ref: mb-4 md:mb-0 */
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: hidden;
	aspect-ratio: auto;            /* the reference uses a fixed height */
}
.familia ul.products li.product .familia-card__media img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	margin: 0;
	object-fit: contain;
	border-radius: 0;
	mix-blend-mode: normal;
	transition: opacity 200ms var(--f-ease);
}

/* Hover swap to the second photo, Friends & Frames style (client 2026-09-26, evening: "when I hover on an item it
   changes the thumbnail picture, everywhere in the shop"). The earlier complaint ("užvedus ant akinių dingsta foto")
   came from a swap to a photo that was missing or still loading, so the swap only happens once the second photo has
   really loaded: familia.js marks it `.is-loaded`, and only then does the main photo give way. Until then – or when
   a card has no second photo – hovering changes nothing. Pointer devices from 768px only; phones never download it.
   NB: the `img` in the selectors beats the (0,4,3) `.familia-card__media img` rule. */
.familia ul.products li.product .familia-card__media img.familia-card__img--alt,
.familia ul.products li.product .familia-card__media img.familia-card__alt-image {
	display: none;
}

@media (min-width: 768px) {    /* legacy sm */
	.familia ul.products li.product { font-size: 16px; }   /* ref: sm:text-base */
	.familia ul.products li.product:hover .familia-card__media img { transform: none; }
}
@media (min-width: 768px) and (hover: hover) {
	.familia ul.products li.product .familia-card__media img.familia-card__img--alt,
	.familia ul.products li.product .familia-card__media img.familia-card__alt-image {
		display: block;               /* laid out (so the lazy image loads as the card scrolls in), invisible */
		position: absolute;
		inset: 0;
		margin: auto;
		opacity: 0;
		pointer-events: none;
	}
	.familia ul.products li.product:hover .familia-card__media img.is-loaded:is(.familia-card__img--alt, .familia-card__alt-image) { opacity: 1; }
	.familia ul.products li.product:hover .familia-card__media:has(img.is-loaded:is(.familia-card__img--alt, .familia-card__alt-image)) img:not(.familia-card__img--alt):not(.familia-card__alt-image) { opacity: 0; }
}

/* ---- title ------------------------------------------------------- */
.familia ul.products li.product .woocommerce-loop-product__title {
	grid-area: title;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;     /* ref: flex flex-col justify-end */
	min-height: var(--fs-card-title-h);
	margin: 0 0 8px;               /* ref: mb-2 */
	padding: 0;
	font-family: inherit;
	font-size: 18px;               /* ref: text-lg */
	font-weight: 400;              /* ref: font-bold */
	line-height: 28px;             /* ref: text-lg / text-xl line height 1.75rem */
	letter-spacing: 0;
	color: var(--f-ink);           /* ref: text-bodyTextColor */
	overflow: hidden;
}
/* two-line clamp on the text itself. ref: line-clamp-2 */
.familia ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
@supports (display: flex) {
	/* keep the bottom alignment where -webkit-box would drop it */
	.familia ul.products li.product .woocommerce-loop-product__title {
		align-content: end;
	}
}

/* The card title already carries the brand ("Polaroid PLD6148"), exactly as
   the live shop does, so a separate brand line would duplicate it. */
.familia ul.products li.product .familia-card__brand { display: none; }

/* ---- meta slot (left of the price, grows) ------------------------ */
.familia ul.products li.product .familia-card__material,
.familia ul.products li.product .familia-card__meta {
	grid-area: meta;
	align-self: start;
	display: block;
	margin: 0 0 8px;               /* ref: "font-light mb-2 mr-2 text-bodyTextColor" */
	padding: 0 8px 0 0;
	font-size: inherit;            /* text-sm, text-base from sm */
	font-weight: 300;
	line-height: 1.5;
	color: var(--f-ink);
}
.familia ul.products li.product .familia-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- price ------------------------------------------------------- */
.familia ul.products li.product .price {
	grid-area: price;
	justify-self: end;
	align-self: start;
	display: flex;
	flex-wrap: nowrap;             /* client 2026-09-25: a price never wraps – old + new price stay on one line */
	align-items: baseline;
	gap: 0;
	margin: 0;
	padding: 0 0 8px;              /* the legacy price row is 32px: 24px text + the meta's mb-2 */
	font-size: inherit;
	font-weight: 400;
	line-height: 1.5;
	color: var(--f-ink);
	white-space: nowrap;
}
/* old price. ref: "line-through whitespace-nowrap" – plain body colour */
.familia ul.products li.product .price del,
.familia ul.products li.product .price del .amount {
	order: 0;
	margin: 0;
	color: var(--f-ink);
	font-weight: 400;
	text-decoration: line-through;
	opacity: 1;
}
/* current price. ref: "ml-2 text-primary font-bold" and --primaryColor is
   the ink 20 14 6, NOT the red: the sale price is bold ink, not red. */
.familia ul.products li.product .price ins,
.familia ul.products li.product .price ins .amount {
	order: 1;
	margin-left: 8px;              /* ref: ml-2 */
	background: none;
	color: var(--f-ink);
	font-weight: 500;
	text-decoration: none;
}
/* ref: the price is bold only next to an old price (`priceOld != null && "text-primary font-bold"`) */
.familia ul.products li.product .price > .amount { font-weight: 400; }
.familia ul.products li.product .price ins bdi { font-weight: 500; }
.familia ul.products li.product .price del bdi { font-weight: 400; }
.familia ul.products li.product .price del ~ ins { margin-left: 8px; }
.familia ul.products li.product .price .from,
.familia ul.products li.product .price small { font-size: 13px; font-weight: 400; color: var(--fs-muted); }

/* ---- badges ------------------------------------------------------ */
/* ref: container "absolute top-1 sm:top-5 w-[85%] overflow-hidden", inner
        "flex text-default-50 text-xs uppercase font-bold", chip
        "bg-secondary flex items-center h-8 px-4 sm:px-2.5 shadow-xs".
   --secondaryColor is the sky 141 201 247, so the discount chip is sky with
   white type and square corners. */
.familia .familia-badges--card,
.familia .familia-badges--loop {
	position: absolute;
	top: 4px;                      /* ref: top-1 */
	left: 0;
	z-index: 2;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	width: 85%;                    /* ref: w-[85%] */
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
	font-size: 12px;               /* ref: text-xs */
	line-height: 1;
}
.familia .familia-badges--card .familia-badge,
.familia .familia-badges--loop .familia-badge {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 32px;                  /* ref: h-8 */
	padding-inline: 16px;          /* ref: px-4 */
	border: 0;
	border-radius: 0;              /* square, as on the live shop */
	background: var(--f-sky);      /* ref: bg-secondary */
	color: var(--fs-white);        /* ref: text-default-50 */
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;             /* text-xs */
	letter-spacing: 0;
	text-transform: none;
	box-shadow: var(--fs-shadow-badge);   /* ref: shadow-xs */
	white-space: nowrap;
}
/* Label colours of the legacy card: `"top" → bg-accent`, `"recommended" → bg-primary`, every
   other label (NAUJIENA, REKOMENDUOJAME, promo texts) `bg-[#8CBBFF]`; the discount chip stays
   `bg-secondary`. Scoped like the chip rule above so they win over its sky ground. */
.familia .familia-badges--card .familia-badge--top,
.familia .familia-badges--loop .familia-badge--top { background: var(--f-red-text); }
.familia .familia-badges--card .familia-badge--recommended,
.familia .familia-badges--loop .familia-badge--recommended { background: var(--f-ink); }
.familia .familia-badges--card .familia-badge:not(.familia-badge--sale):not(.familia-badge--top):not(.familia-badge--recommended),
.familia .familia-badges--loop .familia-badge:not(.familia-badge--sale):not(.familia-badge--top):not(.familia-badge--recommended) { background: #8cbbff; }
/* Ink, not white, on the two light-blue grounds: white on the sky is 1.8:1 and on #8cbbff 2.0:1 (WCAG AA wants 4.5:1
   for this 12 px text); ink gives 10.8 and 9.7 – the same dark-on-sky pairing as the sky buttons. */
.familia .familia-badges--card .familia-badge:not(.familia-badge--top):not(.familia-badge--recommended),
.familia .familia-badges--loop .familia-badge:not(.familia-badge--top):not(.familia-badge--recommended) { color: var(--f-ink); }

@media (min-width: 768px) {    /* legacy sm */
	.familia .familia-badges--card,
	.familia .familia-badges--loop { top: 20px; }            /* ref: sm:top-5 */
	.familia .familia-badges--card .familia-badge,
	.familia .familia-badges--loop .familia-badge { padding-inline: 10px; }  /* ref: sm:px-2.5 */
}

/* ---- wishlist (familia-wishlist) ---------------------------------- */
/* ref `wi`: "w-10 !h-10 !bg-default-100 border-0 hover:text-accent p-1.5
   rounded-full", the glyph `hn` (outline) in text-default-600, `vn` (filled)
   "transition-all text-accent" once the card is on the list; the card slot is
   "block absolute right-0 md:right-3 md:top-3". */
.familia ul.products li.product .familia-card__wish {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	margin: 0;
	line-height: 0;
}
.familia .familia-wish {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: 9999px;
	background: var(--f-default-100);
	box-shadow: none;
	color: var(--f-default-600);
	font-size: 0;
	line-height: 0;
	text-transform: none;
	cursor: pointer;
	transition: color 150ms var(--f-ease);
}
.familia .familia-wish:hover,
.familia .familia-wish:focus-visible { border: 0; background: var(--f-default-100); color: var(--f-red); }
.familia .familia-wish:active { transform: none; }
.familia .familia-wish:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; }
.familia .familia-wish svg { flex: none; width: 24px; height: 24px; transition: all 150ms var(--f-ease); }
.familia .familia-wish .familia-wish__on,
.familia .familia-wish.is-on .familia-wish__off { display: none; }
.familia .familia-wish.is-on .familia-wish__on { display: block; color: var(--f-red); }
/* the "added to the basket" dialog's cards carry no heart (legacy
   hideWishlistIconOnDesktop + hideWishlistIconOnMobile) */
.familia .familia-added .familia-card__wish { display: none; }

/* the list's own page (legacy block `wishlist`): no title; "{count} prekės"
   over the catalogue grid, "pb-36 md:pb-52"; empty: "mt-20 md:mb-96", the
   illustration (a link home, h-12), "text-26 lg:text-32 font-extrabold
   leading-snug" + "text-lg md:text-xl font-light leading-snug mt-5", the
   primary button "h-16 md:w-80 uppercase" – fixed to the bottom on phones
   ("fixed bottom-0 … bg-default-50 pt-4 px-4 pb-7 md:static"). */
.familia .familia-wishlist { padding-bottom: 144px; }
/* a plain page is full width: Storefront's ".storefront-full-width-content
   .site-main ul.products.columns-3 li.product" (30.43 %, margin-right) must not
   shrink the cards inside the grid */
.familia.storefront-full-width-content .familia-wishlist ul.products[class*="columns-"] li.product { float: none; width: 100%; margin: 0; }
.familia .familia-wishlist__body[aria-busy="true"] { min-height: 100vh; }
.familia .familia-wishlist.is-empty { padding-bottom: 0; }
.familia .familia-wishlist-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 80px auto 0;
	text-align: center;
}
.familia .familia-wishlist-empty__art { display: flex; align-items: center; justify-content: center; height: 48px; color: var(--f-ink); }
.familia .familia-wishlist-empty__art svg { flex: none; width: 62px; height: 60px; }
.familia .familia-wishlist-empty__text { display: flex; flex-direction: column; margin: 32px 0 88px; }
.familia .familia-wishlist .familia-wishlist-empty__title {
	margin: 0;
	color: var(--f-ink);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.375;
	letter-spacing: 0;
}
.familia .familia-wishlist-empty__hint { margin: 20px 0 0; font-size: 18px; font-weight: 300; line-height: 1.375; }
.familia .familia-wishlist-empty__actions {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px 16px 28px;
	background: var(--f-default-50);
}
.familia .familia-wishlist .familia-wishlist-empty__button { width: 100%; min-height: 64px; height: 64px; box-shadow: none; text-decoration: none; }
.familia .familia-wishlist .familia-wishlist-empty__button:hover { text-decoration: none; }
@media (min-width: 1024px) {
	.familia .familia-wishlist { padding-bottom: 208px; }
	.familia .familia-wishlist-empty { width: 548px; margin-bottom: 384px; }
	.familia .familia-wishlist-empty__text { margin-bottom: 32px; }
	.familia .familia-wishlist-empty__hint { font-size: 20px; line-height: 28px; }   /* md:text-xl brings its own 1.75rem */
	.familia .familia-wishlist-empty__actions { position: static; padding: 0; background: transparent; }
	.familia .familia-wishlist .familia-wishlist-empty__button { width: 320px; }
}
@media (min-width: 1280px) {                                                     /* legacy lg */
	.familia .familia-wishlist .familia-wishlist-empty__title { font-size: 32px; }
}

/* header counter: legacy `animate-vertical-shake-high` (2 s, class kept 500 ms) */
@keyframes familia-wish-shake {
	0%, 60% { transform: translateY(0); }
	10% { transform: translateY(-20px); }
	30% { transform: translateY(3px); }
	40% { transform: translateY(-3px); }
	50% { transform: translateY(1px); }
}
.familia .f-action__count.is-shaking { animation: familia-wish-shake 2s ease; }
.familia .f-action__count[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
	.familia .f-action__count.is-shaking { animation: none; }
}

/* The live card has no add-to-cart button and no star rating. */
.familia ul.products li.product .add_to_cart_button,
.familia ul.products li.product .added_to_cart,
.familia ul.products li.product .star-rating,
.familia ul.products li.product .familia-try { display: none; }

/* ---- breakpoints. ref: sm:grid-cols-2 md:grid-cols-3 (4-up from 1280: see below) ----
   Legacy sm = 768px, md = 1024px. */
@media (min-width: 768px) {
	.familia ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.familia ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* ref: md:mb-0 on the media, md:text-xl on the title */
	.familia ul.products li.product .familia-card__media { margin-bottom: 0; }
	.familia ul.products li.product .woocommerce-loop-product__title { font-size: 20px; }
	.familia ul.products li.product .familia-card__wish { top: 12px; right: 12px; }  /* ref: md:right-3 md:top-3 */
}
/* Four cards to a row from 1280px (client 2026-09-25: "now only 3 fit in one row, can we make size so 4 would
   fit"): 252px cards at 1280, 292px at 1440. The photo box drops to 220px and the text goes one column – title,
   material, price – so the old + new price pair keeps its one line (as in the home page rows). The home rows
   (.familia-hs) size their own cards and keep their carousel. */
@media (min-width: 1280px) {
	.familia ul.products:not(.familia-hs ul.products) {
		--fs-card-media-h: 220px;
		--fs-card-title-h: 56px;
	}
	/* the grid pages only – the product page's "Rekomenduojame" carousel keeps its sliding row (4 in view there) */
	.familia ul.products:not(.familia-hs ul.products):not(.familia-carousel ul.products) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.familia ul.products:not(.familia-hs ul.products) li.product > a.woocommerce-LoopProduct-link {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "title" "meta" "price";
	}
	.familia ul.products:not(.familia-hs ul.products) li.product .woocommerce-loop-product__title { padding-inline: 16px; font-size: 18px; line-height: 28px; }
	.familia ul.products:not(.familia-hs ul.products) li.product :is(.familia-card__material, .familia-card__meta) { padding-inline: 16px; }
	.familia ul.products:not(.familia-hs ul.products) li.product .price { justify-self: start; padding-inline: 16px; }
}

/* "Mažiausia kaina per 30 dienų" belongs under the product page's own price (familia-promotions adds it to every
   price rendered on a product page, the recommendation cards included) */
.familia ul.products li.product .familia-omnibus { display: none; }

/* ref: md:px-5 on the text block – below md the text sits flush with the photo
   (white card on the white page). */
@media (min-width: 1024px) {
	.familia ul.products li.product .woocommerce-loop-product__title { padding-inline: 20px; }
	.familia ul.products li.product .familia-card__material,
	.familia ul.products li.product .familia-card__meta { padding-left: 20px; padding-right: 8px; }
	.familia ul.products li.product .price { padding-right: 20px; }
}

/* Related / upsell / cross-sell strips reuse the card but sit 4-up. */
.familia .related ul.products,
.familia .up-sells ul.products,
.familia .cross-sells ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
@media (min-width: 768px) {
	.familia .related ul.products,
	.familia .up-sells ul.products,
	.familia .cross-sells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fs-grid-gap); }
}

/* ==================================================================
   06 · PAGINATION + EMPTY STATE
   ref: "text-sm text-default-600 text-center mt-20 mb-2" for the progress
        line, then a "Rodyti daugiau" button:
        "mb-16 sm:mb-10 mx-auto w-[262px] md:w-48 h-12 rounded-sm border-2
         bg-secondaryButtonColor font-bold uppercase"
   The live shop pages with load-more, not numbered pagination.
   ================================================================== */

.familia .f-load-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	text-align: center;
}
.familia .f-load-more__progress,
.familia .f-load-more p[role="status"] {
	order: -1;
	margin: 80px 0 8px;           /* ref: mt-20 mb-2 */
	font-size: 14px;
	line-height: 20px;
	color: var(--fs-muted);        /* ref: text-default-600 (1.9:1 on white – under WCAG AA 4.5:1); default-900 */
}
.familia .f-load-more p[role="status"]:empty { margin: 0; }
/* QA 2026-09-28 #21: "Pridėta prekių: 24" is for screen readers only (it pushed the button down); a failed load is shown */
.familia .f-load-more p[role="status"]:not(.is-error) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.familia .f-load-more p[role="status"].is-error { order: 0; margin: 0 0 12px; color: var(--f-err); }
.familia .f-load-more__progress { margin-top: 40px; }   /* counter + button closer to the last row (was 80px) */

.familia .f-load-more .button,
.familia .f-load-more [data-load-products] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 262px;                  /* ref: w-[262px] */
	max-width: 100%;
	min-width: 0;
	height: 48px;                  /* ref: h-12 */
	margin: 0 0 64px;              /* ref: mb-16 */
	padding: 0 16px;
	border: 2px solid var(--f-sky);
	border-radius: var(--fs-r);
	background: var(--f-sky);
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	white-space: nowrap;
}
.familia .f-load-more .button:hover,
.familia .f-load-more [data-load-products]:hover {
	border-color: var(--f-sky-deep);
	background: var(--f-sky-deep);
	color: var(--f-ink);
}
.familia .f-load-more [data-load-products][aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
.familia .f-load-more [hidden] { display: none; }

@media (min-width: 768px) {
	.familia .f-load-more .button,
	.familia .f-load-more [data-load-products] { margin-bottom: 40px; }  /* ref: sm:mb-10 */
}
@media (min-width: 1024px) {
	.familia .f-load-more .button,
	.familia .f-load-more [data-load-products] { width: 192px; }  /* ref: md:w-48 */
}

/* numbered pagination stays as the no-JS fallback */
.familia .f-pagination-fallback[hidden] { display: none; }
.familia .woocommerce-pagination { margin: 0 0 40px; text-align: center; }
.familia .woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.familia .woocommerce-pagination li { margin: 0; border: 0; }
.familia .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	background: var(--fs-white);
	color: var(--f-ink);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.familia .woocommerce-pagination .page-numbers:hover { border-color: var(--f-ink); }
.familia .woocommerce-pagination .page-numbers.current {
	border-color: var(--f-ink);
	background: var(--f-ink);
	color: var(--fs-white);
}

/* ---- empty state: "Produktų nerasta." ---------------------------- */
.familia .woocommerce-info.woocommerce-no-products-found,
.familia .woocommerce-no-products-found .woocommerce-info,
.familia .familia-empty {
	margin: 0 0 64px;
	padding: 40px 24px;
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	background: var(--fs-grey-100);
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	text-align: center;
}
.familia .woocommerce-no-products-found .woocommerce-info::before,
.familia .woocommerce-info.woocommerce-no-products-found::before { content: none; display: none; }
.familia .familia-empty__title { margin: 0; font-size: 18px; font-weight: 400; }
.familia .familia-empty__hint {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--fs-muted);
}
.familia .familia-empty__actions { margin: 20px 0 0; }
.familia .familia-empty__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--f-sky);
	border-radius: var(--fs-r);
	background: var(--f-sky);
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	text-transform: none;
	text-decoration: none;
}
.familia .familia-empty__reset:hover { border-color: var(--f-sky-deep); background: var(--f-sky-deep); color: var(--f-ink); }

/* ==================================================================
   07 · SINGLE PRODUCT
   The captured pages do not include a product detail page, so this section
   follows the live shop's shared vocabulary instead: white panels, square
   corners, 28/44px semibold headings, bold ink prices with a struck-through
   old price, sky uppercase buttons, red links.
   ================================================================== */

.familia.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 16px 0 0;
	position: relative;
}
.familia.single-product div.product::before,
.familia.single-product div.product::after { content: none; display: none; }

@media (min-width: 1024px) {   /* legacy md; familia-product.css sets the real columns */
	.familia.single-product div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}
	.familia.single-product div.product > .woocommerce-product-gallery { grid-column: 1; }
	.familia.single-product div.product > .summary { grid-column: 2; }
	.familia.single-product div.product > .woocommerce-tabs,
	.familia.single-product div.product > .related,
	.familia.single-product div.product > .up-sells,
	.familia.single-product div.product > .familia-tabs { grid-column: 1 / -1; }
}

/* ---- gallery ----------------------------------------------------- */
.familia.single-product div.product .woocommerce-product-gallery {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--fs-white);
	position: relative;
}
.familia .woocommerce-product-gallery__wrapper { margin: 0; }
.familia .woocommerce-product-gallery__image,
.familia .woocommerce-product-gallery__image a {
	display: block;
	background: var(--fs-white);
}
.familia .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
	border-radius: 0;
}
.familia .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
/* flexslider sizes each thumb li as a percentage of the gallery (25 %, 20 %…),
   which leaves dead space beside a fixed-size thumbnail. Let the flex row size
   the items from their content instead. */
.familia .woocommerce-product-gallery ol.flex-control-thumbs li,
.familia .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}
.familia .woocommerce-product-gallery .flex-control-thumbs img {
	width: 72px;
	height: 72px;
	padding: 4px;
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	background: var(--fs-white);
	object-fit: contain;
	opacity: 1;
	cursor: pointer;
}
.familia .woocommerce-product-gallery .flex-control-thumbs img:hover,
.familia .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	border-color: var(--f-ink);
}
.familia .woocommerce-product-gallery__trigger {
	top: 12px;
	right: 12px;
	background: var(--fs-grey-100);
	color: var(--f-ink);
	border-radius: 50%;
}

/* badges on the detail page reuse the card chip, pinned to the gallery */
.familia.single-product div.product > .familia-badges--single,
.familia .familia-badges--single {
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 2;
	display: flex;
	gap: 0;
	width: 85%;
	overflow: hidden;
	pointer-events: none;
}
.familia .familia-badges--single .familia-badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding-inline: 10px;
	border: 0;
	border-radius: 0;
	background: var(--f-sky);
	color: var(--fs-white);
	font-size: 12px;
	font-weight: 500;
	text-transform: none;
	box-shadow: var(--fs-shadow-badge);
}

/* ---- summary ----------------------------------------------------- */
.familia.single-product div.product > .summary {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* brand above the title. The theme emits <a class="familia-brand"> while
   familia-catalog emits <div class="familia-brand"> with a
   span.familia-brand__logo and an a|span.familia-brand-link – style both. */
.familia .familia-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fs-muted);
	text-decoration: none;
}
a.familia-brand:hover,
.familia .familia-brand-link:hover { color: var(--f-red); }
.familia .familia-brand-link { color: inherit; text-decoration: none; }
.familia .familia-brand__logo { display: inline-flex; max-height: 28px; width: auto; }
.familia .familia-brand__logo img { max-height: 28px; width: auto; }

/* brand archive header (FC_Brands) */
.familia .familia-brand-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 20px;
}
.familia .familia-brand-header__logo img { max-height: 56px; width: auto; }
.familia .familia-brand-header__text { font-size: 14px; font-weight: 300; line-height: 1.6; }

/* A–Z brand index (FC_Brands) */
.familia .familia-brands__letters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 24px;
}
.familia .familia-brands__letters a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	color: var(--f-ink);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.familia .familia-brands__letters a:hover { border-color: var(--f-ink); }
.familia .familia-brands__group { margin: 0 0 24px; scroll-margin-top: 24px; }
.familia .familia-brands__letter {
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--fs-grey-200);
	font-size: 18px;
	font-weight: 500;
}
.familia ul.familia-brands__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 4px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.familia .familia-brands__item { margin: 0; padding: 0; list-style: none; }
.familia .familia-brands__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	color: var(--f-ink);
	font-size: 14px;
	text-decoration: none;
}
.familia .familia-brands__link:hover { color: var(--f-red); }
.familia .familia-brands__logo { max-height: 24px; width: auto; }
.familia .familia-brands__count { margin-left: auto; color: var(--fs-muted); font-size: 12px; }

.familia .product_title {
	margin: 0 0 12px;
	font-family: inherit;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--f-ink);
}
@media (min-width: 640px) { .familia .product_title { font-size: 32px; font-weight: 400; line-height: 1.25; } }
.familia .familia-product-subtitle { margin: 0 0 24px; color: var(--fs-muted); font-size: 16px; }
.familia .familia-product-details { margin-top: 28px; }
.familia .familia-product-details table { background: #fff; }

/* price block: struck-through old price then bold ink current price */
.familia.single-product div.product > .summary p.price,
.familia.single-product div.product > .summary .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--f-ink);
}
.familia.single-product .summary .price del {
	order: 0;
	margin: 0;
	color: var(--f-ink);
	font-size: 18px;
	font-weight: 400;
	text-decoration: line-through;
	opacity: 1;
}
.familia.single-product .summary .price ins {
	order: 1;
	margin-left: 10px;
	background: none;
	color: var(--f-ink);
	font-weight: 500;
	text-decoration: none;
}
.familia.single-product .summary .woocommerce-price-suffix,
.familia.single-product .summary .price small {
	order: 2;
	width: 100%;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	color: var(--fs-muted);
}

.familia.single-product .woocommerce-product-details__short-description {
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--f-ink);
}

/* ---- stock + delivery (familia-catalog FC_Stock) ------------------ */
/* Real markup on the product page:
     p.familia-delivery.familia-delivery--instock|--backorder|--outofstock
       > span.familia-stock.familia-stock--<same state>
       > span.familia-delivery__text
   In the cart item meta the SAME class appears on a bare <span> with no
   children, so .familia-delivery must not assume a block context. */
.familia p.familia-delivery {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 0;
	border-radius: var(--fs-r);
	background: var(--fs-grey-100);
	font-size: 13px;
	line-height: 1.5;
	color: var(--f-ink);
}
.familia span.familia-delivery {          /* the cart / mini-cart variant */
	display: inline;
	padding: 0;
	background: none;
	font-size: 12px;
	color: var(--fs-muted);
}
.familia .familia-delivery__text { color: var(--f-ink); }
.familia span.familia-delivery .familia-delivery__text { color: inherit; }
.familia .familia-delivery strong { font-weight: 700; }

.familia .familia-stock,
.familia.single-product .stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
}
.familia.single-product .stock { margin-bottom: 12px; font-size: 14px; font-weight: 500; }
/* familia-catalog's .familia-delivery already states availability; WooCommerce's
   own <p class="stock"> right below it repeats the same fact. */
.familia.single-product .summary:has(.familia-delivery) > .stock { display: none; }
/* state tokens are instock / backorder / outofstock */
.familia .familia-stock--instock,
.familia .familia-delivery--instock .familia-stock,
.familia.single-product .stock.in-stock { color: var(--f-ok); }
.familia .familia-stock--backorder,
.familia .familia-delivery--backorder .familia-stock { color: var(--f-warn); }
.familia .familia-stock--outofstock,
.familia .familia-delivery--outofstock .familia-stock,
.familia.single-product .stock.out-of-stock { color: var(--f-err); }

/* ---- swatches (familia-catalog FC_Swatches) ----------------------- */
/* Real markup:
     .familia-swatches[data-attribute][data-count]
       > span.familia-swatches__label
       > ul.familia-swatches__list
           > li.familia-swatch[--light|--out-of-stock|--photo]
               > button.familia-swatch__button[aria-pressed]
               > span.familia-swatch__label
   Loop variant adds .familia-swatches--compact plus __more and __count.
   The selected state is aria-pressed on the BUTTON – there is no .is-active. */
.familia .familia-swatches {
	margin: 0 0 20px;
	padding: 0;
}
.familia .familia-swatches__label {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fs-muted);
}
.familia .familia-swatches__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.familia .familia-swatch {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.familia .familia-swatch__button {
	display: block;
	width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	border: 1px solid var(--fs-grey-400);
	border-radius: 50%;
	background-color: var(--fs-grey-100);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	overflow: hidden;
	box-shadow: none;
}
.familia .familia-swatch__button img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.familia .familia-swatch__button:hover { border-color: var(--f-ink); }
.familia .familia-swatch__button[aria-pressed="true"] {
	border-color: var(--f-ink);
	box-shadow: 0 0 0 2px var(--f-ink);
}
.familia .familia-swatch__button:focus-visible {
	outline: 2px solid var(--f-ink);
	outline-offset: 2px;
}
/* a light colour needs a visible rim of its own */
.familia .familia-swatch--light .familia-swatch__button { border-color: var(--fs-grey-600); }
.familia .familia-swatch--out-of-stock .familia-swatch__button { opacity: 0.45; }
.familia .familia-swatch--out-of-stock .familia-swatch__button::after {
	content: "";
	position: absolute;
	inset: 0;
}
.familia .familia-swatch__label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.2;
	color: var(--fs-muted);
}

/* compact (loop) variant: dots only, with a "+2" overflow mark */
.familia .familia-swatches--compact {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.familia .familia-swatches--compact .familia-swatches__list { gap: 4px; }
.familia .familia-swatches--compact .familia-swatch__button {
	width: 16px;
	height: 16px;
	min-height: 16px;
	border-width: 1px;
	cursor: default;
}
.familia .familia-swatches--compact .familia-swatch__label { display: none; }
.familia .familia-swatches--compact .familia-swatches__more,
.familia .familia-swatches--compact .familia-swatches__count {
	font-size: 12px;
	color: var(--fs-muted);
	white-space: nowrap;
}

/* attribute tooltip bubble injected by catalog.js for [data-familia-tip] */
.familia .familia-tip-bubble {
	position: absolute;
	z-index: 1200;
	max-width: 240px;
	padding: 6px 10px;
	border-radius: var(--fs-r);
	background: var(--f-ink);
	color: var(--fs-white);
	font-size: 12px;
	line-height: 1.4;
	pointer-events: none;
}

/* ---- variations + add to cart ------------------------------------ */
.familia.single-product form.cart,
.familia.single-product .familia-lens-form { margin: 0 0 20px; }
.familia table.variations { width: 100%; margin: 0 0 16px; border: 0; }
.familia table.variations tr { border: 0; }
.familia table.variations th,
.familia table.variations td { padding: 0 0 10px; border: 0; background: none; }
.familia table.variations th.label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fs-muted);
}
.familia .woocommerce-variation-price { margin: 0 0 12px; }

.familia.single-product form.cart .quantity { margin: 0 8px 0 0; }
.familia.single-product form.cart .quantity input.qty {
	width: 72px;
	height: 48px;
	min-height: 48px;
	border: 1px solid var(--fs-grey-400);
	border-radius: var(--fs-r);
	text-align: center;
	font-weight: 500;
}
.familia.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.familia.single-product form.cart.variations_form,
.familia.single-product form.cart.grouped_form { display: block; }
.familia.single-product form.cart.variations_form .woocommerce-variation-add-to-cart,
.familia.single-product form.cart.grouped_form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* primary CTA. ref (cart "Užsakymas"): h-12 rounded-sm border-2 uppercase
   font-bold on the sky primaryButtonColor with ink text. */
.familia.single-product .single_add_to_cart_button,
.familia .familia-cta-primary {
	flex: 1 1 200px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--f-sky);
	border-radius: var(--fs-r);
	background: var(--f-sky);
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}
.familia.single-product .single_add_to_cart_button:hover,
.familia .familia-cta-primary:hover {
	border-color: var(--f-sky-deep);
	background: var(--f-sky-deep);
	color: var(--f-ink);
}
.familia.single-product .single_add_to_cart_button:disabled,
.familia.single-product .single_add_to_cart_button.disabled { opacity: 0.5; }

/* secondary CTA: "Pasimatuoti optikoje".
   familia-catalog emits `.familia-cta-secondary.familia-try-in-salon.button`
   ; the theme emits `.familia-try`. Both are the
   outlined counterpart of the primary CTA. The `.button` class means
   Storefront also styles these, so keep the selector specific enough. */
.familia a.familia-cta-secondary,
.familia .familia-cta-secondary,
.familia .familia-try-in-salon,
.familia.single-product .familia-single__after .familia-try {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	margin: 8px 0 0;
	padding: 0 24px;
	border: 2px solid var(--f-ink);
	border-radius: var(--fs-r);
	background: transparent;
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
}
.familia a.familia-cta-secondary:hover,
.familia .familia-cta-secondary:hover,
.familia .familia-try-in-salon:hover,
.familia.single-product .familia-single__after .familia-try:hover {
	border-color: var(--f-ink);
	background: var(--f-ink);
	color: var(--fs-white);
}
.familia .familia-cta-secondary svg,
.familia .familia-try-in-salon svg { width: 18px; height: 18px; flex: 0 0 auto; }

.familia .familia-single__after { margin: 0 0 20px; }

/* ---- salon availability (familia-salons) ------------------------- */
/* Real markup (docs/SALONS.md §6):
     .familia-salons[data-mode][data-state][data-sku]
       > h3.familia-salons__title
       > .familia-salons__body
            p.familia-salons__empty[.--pending|.--loading]
            p.familia-salons__summary
            .familia-salons__city > .familia-salons__city-name
                                  + ul.familia-salons__list
                                      > li.familia-salons__salon[.is-open]
                                          > .familia-salons__name
                                          + .familia-salons__hours
                                          + .familia-salons__qty
       > .familia-salons__actions > a.familia-salons__cta + a.familia-salons__locator

   familia-catalog ALSO prints an empty <div class="familia-salons"> on
   `woocommerce_after_add_to_cart_form`, so a second, contentless card would
   appear. Hide the one with no title until the plugins de-duplicate (see
   docs/DESIGN-SHOP.md and the hand-off note). */
.familia .familia-salons {
	margin: 0 0 20px;
	padding: 14px;
	border: 0;
	border-radius: var(--fs-r);
	background: var(--fs-grey-100);
	font-size: 13px;
	line-height: 1.5;
}
.familia .familia-salons:empty,
.familia .familia-salons:not(:has(.familia-salons__title)):not(:has(.familia-salons__teaser)) {
	display: none;
}
.familia .familia-salons__title {
	margin: 0 0 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--f-ink);
}
.familia .familia-salons__empty,
.familia .familia-salons__summary { margin: 0; color: var(--fs-muted); }
.familia .familia-salons__summary { font-weight: 500; color: var(--f-ink); }

.familia .familia-salons__city { margin-top: 10px; }
.familia .familia-salons__city-name {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fs-muted);
}
.familia .familia-salons__list {
	display: grid;
	gap: 0;
	max-height: 280px;
	margin: 4px 0 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}
.familia .familia-salons__salon {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--fs-grey-200);
	list-style: none;
}
.familia .familia-salons__salon:last-child { border-bottom: 0; }
.familia .familia-salons__name { font-weight: 400; }
.familia .familia-salons__hours { color: var(--fs-muted); font-size: 12px; }
.familia .familia-salons__salon.is-open .familia-salons__hours { color: var(--f-ok); }
.familia .familia-salons__qty {
	margin-left: auto;
	color: var(--f-brand);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}
.familia .familia-salons__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 12px;
}
/* the salon CTA is the same outlined control as "Pasimatuoti optikoje" */
.familia .familia-salons__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid var(--f-ink);
	border-radius: var(--fs-r);
	background: transparent;
	color: var(--f-ink);
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
}
.familia .familia-salons__cta:hover { background: var(--f-ink); color: var(--fs-white); }
.familia .familia-salons__locator { color: var(--f-red); font-weight: 500; font-size: 13px; }

/* the theme's own fallback teaser (used when familia-salons is inactive) */
.familia .familia-salons__teaser {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
}
.familia .familia-salons__teaser svg { flex: 0 0 auto; margin-top: 2px; }
.familia .familia-salons__teaser strong { display: block; margin-bottom: 2px; font-weight: 700; }
.familia .familia-salons__teaser a { color: var(--f-red); }

/* ---- USP list ---------------------------------------------------- */
.familia .familia-usps {
	margin: 20px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--fs-grey-200);
	list-style: none;
	display: grid;
	gap: 8px;
}
.familia .familia-usps li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
	list-style: none;
}
.familia .familia-usps svg { flex: 0 0 auto; margin-top: 2px; color: var(--fs-muted); }

/* ---- attribute table -------------------------------------------- */
/* familia-catalog emits .familia-attributes; WooCommerce emits
   table.shop_attributes in the "Specifikacija" tab. Both read the same. */
.familia .familia-attributes,
.familia table.shop_attributes {
	width: 100%;
	margin: 0 0 20px;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
}
.familia .familia-attributes tr,
.familia table.shop_attributes tr { border: 0; }
.familia .familia-attributes th,
.familia .familia-attributes td,
.familia table.shop_attributes th,
.familia table.shop_attributes td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--fs-grey-200);
	background: none;
	font-style: normal;
	line-height: 1.5;
	vertical-align: top;
}
.familia .familia-attributes th,
.familia table.shop_attributes th {
	width: 45%;
	color: var(--fs-muted);
	font-weight: 400;
	text-align: left;
}
.familia .familia-attributes td,
.familia table.shop_attributes td { font-weight: 500; color: var(--f-ink); }
.familia .familia-attributes td p,
.familia table.shop_attributes td p { margin: 0; padding: 0; }
.familia .familia-attributes tr:last-child th,
.familia .familia-attributes tr:last-child td,
.familia table.shop_attributes tr:last-child th,
.familia table.shop_attributes tr:last-child td { border-bottom: 0; }

/* FC_Attributes value cells: icon + value spans joined by a " · " separator,
   with an optional tooltip trigger and a size-guide <details>. */
.familia .familia-attr-value {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.familia .familia-attr-value a { color: var(--f-ink); text-decoration: underline; }
.familia .familia-attr-value a:hover { color: var(--f-red); }
.familia .familia-attr-icon {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	object-fit: contain;
	vertical-align: middle;
}
.familia .familia-attr-sep { color: var(--fs-grey-600); font-weight: 400; }
.familia .familia-attr-tip {
	position: relative;
	border-bottom: 1px dotted var(--fs-grey-600);
	cursor: help;
}
.familia .familia-attr-tip:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; }

.familia .familia-size-guide {
	margin: 12px 0 0;
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	background: var(--fs-white);
	font-size: 13px;
}
.familia .familia-size-guide > summary {
	padding: 10px 12px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.familia .familia-size-guide > summary::-webkit-details-marker { display: none; }
.familia .familia-size-guide dl {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 12px;
	margin: 0;
	padding: 0 12px 12px;
}
.familia .familia-size-guide dt { font-weight: 500; }
.familia .familia-size-guide dd { margin: 0; color: var(--fs-muted); }

/* ---- tabs -------------------------------------------------------- */
/* ref (the category FAQ accordion, the live shop's only tab-like pattern):
   "rounded-sm bg-default-100 mb-2.5 px-4 sm:px-7 py-3 sm:py-5" */
.familia .woocommerce-tabs { margin: 40px 0 0; padding: 0; }
.familia .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--fs-grey-200);
	list-style: none;
}
.familia .woocommerce-tabs ul.tabs::before,
.familia .woocommerce-tabs ul.tabs::after { content: none; display: none; }
.familia .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.familia .woocommerce-tabs ul.tabs li::before,
.familia .woocommerce-tabs ul.tabs li::after { content: none; display: none; }
.familia .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 16px;
	border-bottom: 2px solid transparent;
	color: var(--fs-muted);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}
.familia .woocommerce-tabs ul.tabs li a:hover { color: var(--f-ink); }
.familia .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--f-ink);
	color: var(--f-ink);
}
.familia .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.7;
}
.familia .woocommerce-tabs .panel > h2:first-child { display: none; }

/* ---- reviews ----------------------------------------------------- */
.familia #reviews .commentlist { margin: 0; padding: 0; list-style: none; }
.familia #reviews .comment_container {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 16px 0;
	border: 0;
	border-bottom: 1px solid var(--fs-grey-200);
	background: none;
}
.familia #reviews .comment_container img.avatar {
	position: static;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
}
.familia #reviews .comment-text { margin: 0; padding: 0; border: 0; border-radius: 0; }
.familia #reviews .woocommerce-review__author { font-weight: 500; }
.familia #reviews .woocommerce-review__published-date { color: var(--fs-muted); font-size: 13px; }
.familia .star-rating { color: var(--f-ink); }

/* ---- related / upsells headings ---------------------------------- */
.familia .related,
.familia .up-sells,
.familia .cross-sells,
.familia .familia-recommended,
.familia .familia-product-list { margin: 48px 0 0; padding: 0; border: 0; }
.familia .related > h2,
.familia .up-sells > h2,
.familia .cross-sells > h2,
.familia .familia-recommended__title,
.familia .familia-product-list__title {
	margin: 0 0 20px;
	font-family: inherit;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--f-ink);
}
@media (min-width: 640px) {
	.familia .related > h2,
	.familia .up-sells > h2,
	.familia .cross-sells > h2,
	.familia .familia-recommended__title,
	.familia .familia-product-list__title { font-size: 28px; }
}
.familia .familia-recommended ul.products,
.familia .familia-product-list ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
@media (min-width: 768px) {
	.familia .familia-recommended ul.products,
	.familia .familia-product-list ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fs-grid-gap); }
}

/* ---- phone order bar ------------------------------------------------
   ref (dy): below md the order button itself is "fixed bottom-0 … w-full" in a
   white bar "bg-default-50 pt-4 px-4 pb-7", the button "h-16 w-full shadow-sm"
   – no price in it. The theme shows the bar once the in-page button has
   scrolled away. */
.familia .familia-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 16px 28px;
	background: var(--fs-white);
	box-shadow: 0 -4px 30px 0 rgb(0 0 0 / .1);
	transform: translateY(100%);
	transition: transform 200ms var(--f-ease);
}
.familia .familia-sticky__price { display: none; }
.familia .familia-sticky[hidden] { display: none; }
.familia .familia-sticky.is-visible { transform: none; }
.familia .familia-sticky__price {
	color: var(--fs-white);
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
}
.familia .familia-sticky__price del { color: var(--fs-white); font-weight: 400; opacity: 0.7; }
.familia .familia-sticky__price ins { background: none; color: var(--fs-white); text-decoration: none; }
.familia .familia-sticky__btn {
	flex: 1 1 auto;
	min-height: 64px;
	padding: 0 20px;
	border: 2px solid var(--f-sky);
	border-radius: var(--fs-r);
	background: var(--f-sky);
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	text-transform: none;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.familia .familia-sticky__btn:hover { border-color: var(--f-sky-deep); background: var(--f-sky-deep); }
@media (min-width: 1024px) {   /* legacy "md:relative" */
	.familia .familia-sticky { display: none; }
}

/* ==================================================================
   08 · LENS CONFIGURATOR / SUBSCRIPTIONS
   Markup from the familia-lenses and familia-subscriptions mu-plugins.
   Retuned to the live shop's shapes (square corners, grey-100 panels,
   uppercase micro labels) – the vocabulary itself is ours, since the live
   shop has no equivalent screen in the capture.
   ================================================================== */

/* ref (legacy lens selector): no panel around the selector – the toggle row
   ("mb-5 lg:mb-8", 42×24 track, "text-default-600 ml-4 text-lg"), then the two
   eyes as white cards "rounded-sm bg-default-50 px-2.5 pt-6 pb-1 mb-5" side by
   side from md (1024px), stacked below with their two fields in one row. */
.familia.single-product form.familia-lens-form { display: block; }   /* the generic flex form row squeezed the selector to 380px */
.familia .familia-lens {
	position: relative;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.familia .familia-lens::before { content: none; display: none; }
.familia .familia-lens .fl-toggle { min-height: 40px; margin: 0 0 12px; gap: 16px; color: var(--f-default-900); font-size: 18px; }   /* 40px row: 20px margin less the extra height */
.familia .familia-lens .fl-toggle-track { width: 42px; height: 24px; background: var(--f-default-400); }
.familia .familia-lens .fl-toggle input:checked + .fl-toggle-track { background: var(--f-sky); }   /* brandbook: "on" in sky, not black */
@media (min-width: 1280px) { .familia .familia-lens .fl-toggle { margin-bottom: 24px; } }
.familia .familia-lens.fl-loading { opacity: 0.55; }

.familia .familia-lens .fl-rx {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--fs-grey-200);
	font-size: 13px;
}
.familia .familia-lens .fl-rx label { display: grid; gap: 4px; font-weight: 500; }
.familia .familia-lens .fl-rx-select {
	min-height: 44px;
	border: 1px solid var(--fs-grey-400);
	border-radius: var(--fs-r);
	background: var(--fs-white);
	font-weight: 500;
}
.familia .familia-lens .fl-rx-hint { border-bottom: 0; padding-bottom: 0; color: var(--fs-muted); }
.familia .familia-lens .fl-rx-hint a { color: var(--f-red); }

.familia .familia-lens .fl-shared {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
.familia .familia-lens .fl-eyes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 20px;
}
@media (min-width: 1024px) { .familia .familia-lens .fl-eyes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.familia .familia-lens.fl-equal-eyes .fl-eyes { grid-template-columns: minmax(0, 1fr); }

.familia .familia-lens .fl-eye {
	min-width: 0;
	margin: 0 0 20px;
	padding: 24px 10px 4px;
	border: 0;
	border-radius: var(--f-r-sm);
	background: var(--fs-white);
}
.familia .familia-lens .fl-eye legend,
.familia .familia-lens .fl-eye .fl-eye-title {
	float: left;
	width: 100%;
	margin: 0 0 32px;
	padding: 0 10px;
	font-family: inherit;
	font-size: 20px;
	font-weight: 400;
	color: var(--f-ink);
}
@media (min-width: 1024px) {
	.familia .familia-lens .fl-eye legend,
	.familia .familia-lens .fl-eye .fl-eye-title { margin-bottom: 16px; padding: 0; font-size: 18px; font-weight: 400; }
}
.familia .familia-lens .fl-eye legend label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: inherit;
	cursor: pointer;
}
.familia .familia-lens .fl-eye-on {
	width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	accent-color: var(--f-ink);
}
.familia .familia-lens .fl-eye.fl-eye-off { background: var(--fs-grey-100); }
.familia .familia-lens .fl-eye.fl-eye-off .fl-fields,
.familia .familia-lens .fl-eye.fl-eye-off .fl-result { opacity: 0.4; }

.familia .familia-lens .fl-fields {
	clear: both;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));   /* phone/tablet: "w-1/2 px-2.5" */
	gap: 0;
	margin: 0;
}
@media (min-width: 1024px) { .familia .familia-lens .fl-fields { grid-template-columns: minmax(0, 1fr); } }  /* md:flex-col */
.familia .familia-lens .fl-field { display: grid; gap: 8px; min-width: 0; margin: 0 0 16px; padding: 0 10px; }
@media (min-width: 1024px) { .familia .familia-lens .fl-field { padding: 0; } }
.familia .familia-lens .fl-field > span {
	font-size: 14px;                /* ref: "mb-2 font-bold uppercase text-sm" */
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.43;
	color: var(--f-ink);
}
.familia .familia-lens .fl-field select,
.familia .familia-lens .fl-field input {
	height: 48px;                   /* ref: "h-12 text-lg rounded-sm" */
	min-height: 48px;
	padding: 0 40px 0 16px;
	border: 2px solid var(--f-default-300);
	border-radius: var(--f-r-sm);
	background-color: var(--fs-white);
	color: var(--f-ink);
	font-size: 18px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}
.familia .familia-lens .fl-field select:focus { border-color: var(--f-default-500); }
.familia .familia-lens .fl-field-single select { background-color: var(--fs-grey-100); }
/* ref: "−" / "+" circled icons in 48px buttons (default-600) round a bare number */
.familia .familia-lens .fl-qty {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 0 0 8px;
	padding: 20px 16px;
}
@media (max-width: 1023px) { .familia .familia-lens .fl-qty input { flex: 1 1 auto; } }   /* the number takes the row, the buttons sit at its ends */
@media (min-width: 1024px) { .familia .familia-lens .fl-qty { justify-content: flex-start; padding: 0; } }
.familia .familia-lens .fl-qty button {
	width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0;
	border: 2px solid var(--f-default-600);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--f-default-900);
	font-size: 22px;
	font-weight: 400;
}
.familia .familia-lens .fl-qty button:hover { border-color: var(--f-ink); color: var(--f-ink); background: transparent; }
.familia .familia-lens .fl-qty input {
	width: 56px;
	height: 48px;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--f-ink);
	font-size: 18px;
	font-weight: 500;
	text-align: center;
}

.familia .familia-lens .fl-result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	min-height: 1.6em;
	margin-top: 12px;
	padding-top: 8px;
	border-top: 1px solid var(--fs-grey-200);
	font-size: 13px;
}
.familia .familia-lens .fl-price {
	font-size: 16px;
	font-weight: 500;
	color: var(--f-ink);
	font-variant-numeric: tabular-nums;
}
.familia .familia-lens .fl-stock { font-weight: 500; }
.familia .familia-lens .fl-stock.in { color: var(--f-ok); }
.familia .familia-lens .fl-stock.back { color: var(--f-warn); }
.familia .familia-lens .fl-stock.out { color: var(--f-err); }
.familia .familia-lens .fl-code { color: var(--fs-muted); font-size: 12px; }
.familia .familia-lens .fl-hint { margin: 8px 0 0; color: var(--fs-muted); font-size: 12px; }
.familia .familia-lens .fl-error { margin: 8px 0 0; color: var(--f-err); font-size: 13px; font-weight: 500; }
.familia .familia-lens .fl-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--fs-grey-200);
	font-size: 18px;
	font-weight: 500;
}
.familia .familia-lens-empty { color: var(--fs-muted); font-size: 14px; }
.familia .familia-lens-form .single_add_to_cart_button { width: 100%; }

/* prescription reading helper */
.familia .familia-rx-help {
	margin: 12px 0 0;
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	background: var(--fs-white);
}
.familia .familia-rx-help > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.familia .familia-rx-help > summary::-webkit-details-marker { display: none; }
.familia .familia-rx-help[open] .familia-rx-help__chev { transform: rotate(180deg); }
.familia .familia-rx-help__body {
	padding: 0 14px 14px;
	font-size: 13px;
	line-height: 1.6;
}
.familia .familia-rx-help__body dl { margin: 0; display: grid; gap: 8px; }
.familia .familia-rx-help__body dt { font-weight: 500; }
.familia .familia-rx-help__body dd { margin: 0; color: var(--fs-muted); }
.familia .familia-rx-help__body a { color: var(--f-red); }
.familia .familia-rx-help__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 20px 0 4px; padding: 16px; border-radius: 8px; background: var(--f-brand-wash, #e5f5ff); }
.familia .familia-rx-help__cta p { margin: 0; flex: 1 1 220px; color: var(--f-ink); }
.familia .familia-rx-help__cta strong { font-weight: 500; }
.familia .familia-rx-help__body a.familia-rx-help__btn { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 6px; background: var(--f-sky); color: var(--f-ink); font-weight: 500; text-decoration: none; }
.familia .familia-rx-help__body a.familia-rx-help__btn:hover { background: var(--f-sky-deep); color: #fff; }

/* my-account "Receptai" page (class-familia-lens-prescriptions.php) */
.familia .familia-rx { margin: 0; }
.familia .familia-rx-form { margin: 16px 0 0; }
.familia .familia-rx-table,
.familia .familia-rx-grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.familia .familia-rx-table th,
.familia .familia-rx-table td,
.familia .familia-rx-grid th {
	padding: 8px;
	border: 1px solid var(--fs-grey-200);
	text-align: left;
}
.familia .familia-rx-grid th { background: var(--fs-grey-100); font-weight: 500; }
.familia .familia-rx-grid input { min-height: 40px; }

/* ---- spectacle-lens picker (familia-glasses, `fg-*`) -------------- */
/* The picker's own glasses.css carries the legacy `ey` layout. Only the theme's generic button rules need taming here: they gave
   the dialog's back/close controls an uppercase sky box and the order button
   the 48px default height. */
.familia .fg-open,
.familia .fg-confirm {
	width: 100%;
	min-height: 64px;              /* legacy order button h-16 */
	border: 2px solid var(--f-sky);
	border-radius: var(--fs-r);
	background: var(--f-sky);
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	text-transform: none;
	box-shadow: 0 10px 30px 4px rgb(0 0 0 / .15);   /* the live order button's shadow */
}
.familia .fg-confirm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.familia .fg-open:hover,
.familia .fg-confirm:hover { border-color: var(--f-sky-deep); background: var(--f-sky-deep); color: var(--f-ink); }
.familia .fg-dialog::backdrop { background: rgb(0 0 0 / 0.66); }
.familia .fg-dialog button.fg-back,
.familia .fg-dialog button.fg-close {
	min-height: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
}

.familia .fg-rx > label,
.familia .fg-rx-grid fieldset {
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	background: var(--fs-white);
}
.familia .fg-rx-grid input,
.familia .fg-single-pd input {
	min-height: 44px;
	border: 1px solid var(--fs-grey-400);
	border-radius: var(--fs-r);
	background: var(--fs-white);
}
.familia .fg-error { color: var(--f-err); font-weight: 500; }
.familia .fg-order-rx { border-radius: var(--fs-r); background: var(--fs-grey-100); }

/* ---- subscriptions (familia-subscriptions) ----------------------- */
/* Real markup on the product page (class-familia-subs-frontend.php):
     .familia-sub#familia-sub[data-login]        (+ .fs-subscribing when active)
       > .fs-modes[role=radiogroup]
           > label.fs-mode.fs-mode-one  > input + span.fs-mode-t
           > label.fs-mode.fs-mode-sub  > input + span.fs-mode-t + span.fs-badge
       > .fs-sub-box[hidden]
           > label.fs-interval > span + select
           > ul.fs-usp > li
           > p.fs-login
           > p.fs-note
   The `fs-*` children are unnamespaced, so they are always scoped by
   `.familia-sub`. Account-side classes use the `familia-sub-*` prefix. */
.familia .familia-sub {
	/* ref (legacy product block, lenses): two framed choices, the chosen one
	   with a sky frame; radio, light 18px title, the price at the right end;
	   a rule, then light grey selling points; "Geriausia vertė" as a sky pill
	   sitting on the subscription frame. Markup: class-familia-subs-frontend.php
	   (.fs-mode > label.fs-head + .fs-sublabel); base rules in the plugin's
	   subscriptions.css – the old grey panel of this file is gone. */
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: transparent;
}
.familia .familia-sub .fs-modes { gap: 36px; padding-top: 0; }
.familia .familia-sub .fs-mode {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--f-default-300);
	border-radius: var(--f-r-sm);
	background: var(--fs-white);
}
.familia .familia-sub .fs-mode.is-checked,
.familia .familia-sub .fs-mode:has(input:checked) { border-color: var(--f-sky); }
.familia .familia-sub .fs-head { flex: 1 1 auto; min-width: 0; gap: 12px; padding: 4px 0 10px; font-size: 18px; }
.familia .familia-sub .fs-info { order: 1; flex: none; margin: 8px 0 0 10px; }
.familia .familia-sub .fs-sublabel { order: 2; flex: 0 0 100%; }
/* the old shop's radio: an empty 22px ring (default-300), chosen = an orange dot
   (#DA7F48) on a peach disc (#FFE8DA); label "ml-2 md:ml-5", title default-800 */
.familia .familia-sub .fs-head input {
	flex: none;
	width: 22px;
	height: 22px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--f-default-300);
	border-radius: 50%;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.familia .familia-sub .fs-head input:checked { border: 0; background: radial-gradient(circle, var(--f-sky-deep) 0 7px, var(--f-brand-wash) 7.5px); }
@media (min-width: 1024px) { .familia .familia-sub .fs-head { gap: 20px; } }
.familia .familia-sub .fs-title { color: #838993; font-weight: 300; }
.familia .familia-sub .fs-price-one,
.familia .familia-sub .fs-prices { margin-left: auto; color: var(--f-ink); font-weight: 500; }
.familia .familia-sub .fs-price-original { color: var(--f-ink); font-weight: 400; }
.familia .familia-sub .fs-price-subscription { color: var(--f-sky); font-weight: 500; }   /* legacy text-secondary */
.familia .familia-sub .fs-best {
	top: -14px;
	left: 10px;
	padding: 4px 16px;
	border-radius: var(--f-r-lg);
	background: var(--f-sky);
	color: var(--fs-white);
	font-size: 12px;
	font-weight: 500;
	line-height: 20px;
}
.familia .familia-sub .fs-sublabel {
	margin-top: 0;
	border-top: 1px solid var(--f-default-300);
	color: var(--f-default-900);
	font-size: 14px;
	font-weight: 300;
}
.familia .familia-sub .fs-sublabel p { margin: 12px 0 0; }

/* account side */
.familia .familia-sub-due { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.familia .familia-sub-items { display: grid; gap: 8px; margin: 0 0 12px; }
.familia .familia-sub-item {
	padding: 12px;
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	background: var(--fs-white);
	font-size: 14px;
	line-height: 1.6;
}
.familia .familia-sub-rx { color: var(--f-ink); font-weight: 500; }
.familia .familia-sub-sku { color: var(--fs-muted); font-size: 12px; }
.familia .familia-sub-pay {
	min-height: 48px;
	border: 2px solid var(--f-sky);
	border-radius: var(--fs-r);
	background: var(--f-sky);
	color: var(--f-ink);
	font-weight: 500;
	text-transform: none;
}
.familia .familia-sub-change { margin: 24px 0 0; }
.familia .familia-sub-change h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
}
.familia .familia-sub-note { margin: 8px 0 0; font-size: 12px; color: var(--fs-muted); }
.familia .familia-sub-form select { min-height: 48px; border: 1px solid var(--fs-grey-400); border-radius: var(--fs-r); }

/* ==================================================================
   09 · CART + CHECKOUT
   ref (krepselis.html): panel heading "font-bold uppercase text-xs mb-5
   pb-2.5 border-b", total rows "flex justify-between mb-4", primary action
   "h-12 rounded-sm border-2 uppercase font-bold w-full" on the sky ground,
   and the red link "Nemokamas prekių atsiėmimas optikos salonuose".
   ================================================================== */

.familia.woocommerce-cart .entry-header,
.familia.woocommerce-checkout .entry-header { margin-bottom: 20px; }
/* `#main` in the selector is needed to beat shop-brand.css's
   `body.familia #main h1 { font-weight:400; font-size:40px }` (1,1,2), which
   also centres these titles through Storefront. */
.familia.woocommerce-cart #main .entry-title,
.familia.woocommerce-checkout #main .entry-title,
.familia.woocommerce-account #main .entry-title {
	margin: 0;
	font-family: inherit;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	text-align: left;
	color: var(--f-ink);
}
@media (min-width: 640px) {
	.familia.woocommerce-cart #main .entry-title,
	.familia.woocommerce-checkout #main .entry-title,
	.familia.woocommerce-account #main .entry-title { font-size: 44px; }
}

/* ---- block cart / checkout --------------------------------------- */
.familia .wc-block-cart,
.familia .wc-block-checkout { margin: 0; }
.familia .wc-block-components-main { padding-right: 0; }

.familia .wc-block-cart-items,
.familia .wc-block-cart__submit-container { background: var(--fs-white); border-radius: 0; }
.familia .wc-block-cart-items th {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--fs-grey-200);
	color: var(--fs-muted);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}
.familia .wc-block-cart-items__row { border-bottom: 1px solid var(--fs-grey-200); }
.familia .wc-block-cart-item__image img,
.familia .wc-block-components-product-image img {
	width: 100%;
	height: auto;
	border-radius: 0;
	object-fit: contain;
	background: var(--fs-white);
}
.familia .wc-block-components-product-name,
.familia .wc-block-cart-item__product .wc-block-components-product-name,
.familia .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}
.familia .wc-block-cart-item__product .wc-block-components-product-name:hover { color: var(--f-red); text-decoration: underline; }
.familia .wc-block-components-product-metadata { font-size: 13px; color: var(--fs-muted); }

/* prices: struck-through old price, bold ink current price */
.familia .wc-block-components-product-price__regular {
	color: var(--f-ink);
	font-weight: 400;
	text-decoration: line-through;
	opacity: 1;
}
.familia .wc-block-components-product-price__value,
.familia .wc-block-components-product-price__value.is-discounted {
	color: var(--f-ink);
	font-weight: 500;
}

/* summary sidebar. ref: the mini-cart panel's uppercase micro heading. */
.familia .wc-block-components-sidebar,
.familia .wc-block-components-order-summary {
	padding: 20px;
	border: 0;
	border-radius: 0;
	background: var(--fs-grey-100);
}
.familia .wc-block-components-totals-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 16px;             /* ref: flex justify-between mb-4 */
	font-size: 14px;
}
.familia .wc-block-components-totals-footer-item {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--fs-grey-400);
	font-size: 18px;
	font-weight: 500;
}
.familia .wc-block-components-order-summary__content,
.familia .wc-block-components-panel__button {
	font-size: 14px;
	color: var(--f-ink);
}
.familia .wc-block-components-panel__button {
	font-weight: 500;
	text-transform: none;
}
.familia .wc-block-components-order-summary-item__quantity {
	border: 1px solid var(--fs-grey-400);
	border-radius: var(--fs-r);
	background: var(--fs-white);
	color: var(--f-ink);
	font-size: 12px;
}

/* the primary block button. ref: "h-12 rounded-sm border-2 uppercase
   font-bold w-full" on the sky primaryButtonColor with ink text. */
.familia .wc-block-components-button:not(.is-link) {
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--f-sky);
	border-radius: var(--fs-r);
	background: var(--f-sky);
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}
.familia .wc-block-components-button:not(.is-link):hover {
	border-color: var(--f-sky-deep);
	background: var(--f-sky-deep);
	color: var(--f-ink);
}
.familia .wc-block-components-button.is-link { color: var(--f-red); }
.familia .wc-block-cart__submit-button,
.familia .wc-block-components-checkout-place-order-button { width: 100%; }

/* checkout steps */
.familia .wc-block-checkout__form .wc-block-components-checkout-step {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--fs-grey-200);
	padding-bottom: 24px;
}
.familia .wc-block-components-checkout-step__title,
.familia .wc-block-components-checkout-step__heading {
	margin: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--f-ink);
}
.familia .wc-block-components-checkout-step__description { font-size: 13px; color: var(--fs-muted); }

.familia .wc-block-components-text-input input,
.familia .wc-blocks-components-select__select,
.familia .wc-block-components-textarea {
	min-height: 48px;
	border: 1px solid var(--fs-grey-400);
	border-radius: var(--fs-r);
	background: var(--fs-white);
	color: var(--f-ink);
	font-size: 16px;
}
.familia .wc-block-components-text-input label,
.familia .wc-block-components-text-input.is-active label { color: var(--fs-muted); font-size: 14px; }
.familia .wc-block-components-text-input input:focus,
.familia .wc-blocks-components-select__select:focus {
	border-color: var(--f-ink);
	outline: 2px solid var(--f-ink);
	outline-offset: 1px;
	box-shadow: none;
}
.familia .wc-block-components-checkbox__input:checked { accent-color: var(--f-ink); }

/* shipping / payment option rows */
.familia .wc-block-components-radio-control-accordion-option,
.familia .wc-block-components-shipping-rates-control__package,
.familia .wc-block-components-local-pickup-select {
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	background: var(--fs-white);
}
.familia .wc-block-components-radio-control-accordion-option:has(input:checked) { border-color: var(--f-ink); }
.familia .wc-block-components-express-payment { border-color: var(--fs-grey-200); }

.familia .wc-block-components-notice-banner {
	border-radius: var(--fs-r);
	font-size: 14px;
}

/* ---- classic cart / checkout fallback --------------------------- */
.familia .woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-size: 14px;
}
.familia .woocommerce table.shop_table th {
	padding: 10px 8px;
	border: 0;
	border-bottom: 1px solid var(--fs-grey-200);
	color: var(--fs-muted);
	font-size: 12px;
	font-weight: 500;
	text-transform: none;
}
.familia .woocommerce table.shop_table td {
	padding: 14px 8px;
	border: 0;
	border-bottom: 1px solid var(--fs-grey-200);
}
.familia .cart_totals table.shop_table tr:last-child td { border-bottom: 0; font-size: 18px; font-weight: 500; }
.familia .cart-collaterals { margin-top: 32px; }
.familia .cart_totals { padding: 20px; background: var(--fs-grey-100); }
.familia .cart-collaterals .cross-sells { margin-top: 40px; }
.familia .coupon { display: flex; gap: 8px; flex-wrap: wrap; }
.familia .coupon input[type="text"] {
	min-height: 48px;
	border: 1px solid var(--fs-grey-400);
	border-radius: var(--fs-r);
}
.familia #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}
.familia #payment ul.payment_methods li {
	margin: 0;
	padding: 12px;
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	background: var(--fs-white);
	list-style: none;
}
.familia #payment div.payment_box {
	margin: 8px 0 0;
	padding: 12px;
	border-radius: var(--fs-r);
	background: var(--fs-grey-100);
	color: var(--f-ink);
	font-size: 13px;
}
.familia #payment div.payment_box::before { content: none; display: none; }
.familia .col2-set, .familia .u-columns.col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	width: 100%;
}
.familia .col2-set::after { content: none; display: none; }
/* `#customer_login` is needed: WooCommerce floats these at 41.18 % with
   `.col2-set#customer_login .col-1` (1,2,0), which no class-only selector can
   beat, and inside our grid that leaves each form at 40 % of its track. */
.familia .col2-set .col-1,
.familia .col2-set .col-2,
.familia .col2-set#customer_login .col-1,
.familia .col2-set#customer_login .col-2 {
	width: 100%;
	float: none;
	margin-right: 0;
}
@media (min-width: 768px) {
	.familia .col2-set, .familia .u-columns.col2-set { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}
.familia .col2-set h2 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
}

/* the salon-pickup reminder. ref: "font-semibold text-base text-link" */
.familia .familia-pickup-link {
	display: inline-block;
	margin: 0 0 40px;
	color: var(--f-red);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}
.familia .familia-pickup-link:hover { text-decoration: underline; }

/* ==================================================================
   10 · MY ACCOUNT
   ================================================================== */

/* Two-column account layout, but ONLY when the endpoint navigation is really
   there. Logged out, `.woocommerce` holds the login/register `.col2-set`
   instead, and turning it into a 240px+1fr grid squeezes those forms into the
   240px track. `:has()` keeps the two cases apart. */
.familia.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}
@media (min-width: 768px) {
	.familia.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}
}
.familia.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100%;
	float: none;
	margin: 0;
	padding: 16px;
	background: var(--fs-grey-100);
}
.familia.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}
.familia.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.familia .f-account__item > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--fs-r);
	color: var(--f-ink);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.familia .f-account__item > a:hover { background: var(--fs-white); color: var(--f-red); }
.familia .f-account__item.is-active > a,
.familia .f-account__item.woocommerce-MyAccount-navigation-link--is-active > a {
	background: var(--f-ink);
	color: var(--fs-white);
}
.familia .f-account__item svg { flex: 0 0 auto; }
.familia.woocommerce-account .woocommerce-MyAccount-content {
	width: 100%;
	float: none;
	margin: 0;
	font-size: 14px;
}
.familia .woocommerce-MyAccount-content h2,
.familia .woocommerce-MyAccount-content h3 {
	margin: 0 0 16px;
	font-family: inherit;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0;
}
.familia .woocommerce-address-fields__field-wrapper,
.familia .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 16px;
}
.familia .woocommerce-address-fields__field-wrapper > .form-row-wide,
.familia .woocommerce-billing-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }
.familia .woocommerce-MyAccount-content .button,
.familia .woocommerce-form-login .button,
.familia .woocommerce-form-register .button {
	min-height: 48px;
	border: 2px solid var(--f-sky);
	border-radius: var(--fs-r);
	background: var(--f-sky);
	color: var(--f-ink);
	font-weight: 500;
	text-transform: none;
	box-shadow: none;
}
.familia .woocommerce-MyAccount-content .button:hover { border-color: var(--f-sky-deep); background: var(--f-sky-deep); }

/* login / register */
.familia .woocommerce-form-login,
.familia .woocommerce-form-register {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--fs-grey-200);
	border-radius: var(--fs-r);
	background: var(--fs-white);
}
.familia .f-auth-divider {
	position: relative;
	margin: 20px 0;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	text-transform: none;
	color: var(--fs-muted);
}
.familia .password-input { position: relative; display: block; }
.familia .show-password-input {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--fs-muted);
}
.familia .show-password-input:hover { color: var(--f-ink); }

/* notices */
.familia .woocommerce-message,
.familia .woocommerce-info,
.familia .woocommerce-error {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 0;
	border-left: 3px solid var(--f-ink);
	border-radius: var(--fs-r);
	background: var(--fs-grey-100);
	color: var(--f-ink);
	font-size: 14px;
	list-style: none;
}
.familia .woocommerce-message { border-left-color: var(--f-ok); }
.familia .woocommerce-error { border-left-color: var(--f-err); }
.familia .woocommerce-message::before,
.familia .woocommerce-info::before,
.familia .woocommerce-error::before { content: none; display: none; }
.familia .woocommerce-message .button,
.familia .woocommerce-info .button {
	min-height: 40px;
	border: 2px solid var(--f-ink);
	border-radius: var(--fs-r);
	background: transparent;
	color: var(--f-ink);
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
}

/* select2 (WooCommerce country/state pickers) */
.familia .select2-container--default .select2-selection--single {
	height: 48px;
	border: 1px solid var(--fs-grey-400);
	border-radius: var(--fs-r);
	background: var(--fs-white);
}
.familia .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 46px;
	padding-left: 12px;
	color: var(--f-ink);
}
.familia .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }

/* Turnstile */
.familia .cf-turnstile:empty { display: none; }

/* ==================================================================
   MOTION + PRINT
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.familia ul.products li.product .familia-card__media img,
	.familia .familia-card__img--alt,
	.familia .familia-card__alt-image,
	.familia #secondary.f-filters,
	.familia.familia-with-filters #secondary,
	.familia .familia-sticky {
		transition: none;
	}
}

@media print {
	.familia .f-toolbar,
	.familia .familia-sticky,
	.familia #secondary,
	.familia .f-load-more,
	.familia .familia-card__wish { display: none !important; }
}

/* ==================================================================
   LIGHTER, AIRIER CARDS (client 2026-09-26: "I like the minimal feel [of Friends & Frames] … slight adjustments
   only"): more air between the rows, a smaller regular-weight title, the material line quiet grey, the heart without
   its grey disc, a smaller flat discount chip. Layout, colours and the white page stay as they are.
   ================================================================== */
.familia ul.products { row-gap: 56px; }
.familia ul.products li.product .woocommerce-loop-product__title,
.familia ul.products:not(.familia-hs ul.products) li.product .woocommerce-loop-product__title { font-size: 16px; line-height: 24px; }
.familia ul.products li.product .familia-card__material,
.familia ul.products li.product .familia-card__meta { color: var(--f-quiet, #736e69); font-size: 14px; }
.familia ul.products li.product .familia-wish,
.familia ul.products li.product .familia-wish:hover,
.familia ul.products li.product .familia-wish:focus-visible { background: transparent; }
.familia ul.products li.product .familia-wish svg { width: 22px; height: 22px; }
.familia .familia-badges--card .familia-badge,
.familia .familia-badges--loop .familia-badge { height: 24px; padding-inline: 8px; box-shadow: none; }
@media (min-width: 1024px) {
	.familia ul.products li.product .woocommerce-loop-product__title { font-size: 17px; line-height: 26px; }
}
@media (min-width: 1280px) {
	.familia ul.products:not(.familia-hs ul.products) li.product .woocommerce-loop-product__title { font-size: 16px; line-height: 24px; }
}


/* Card text centred under the photo, one line each – name, material, price (client 2026-09-26: "yes center the card
   text too", the Friends & Frames card). Every card: listings, home rows, "Rekomenduojame". The paired selectors
   match the specificity of the 1280px grid rules above so these win everywhere. */
.familia ul.products li.product,
.familia ul.products:not(.familia-hs ul.products) li.product { text-align: center; }
.familia ul.products li.product > a.woocommerce-LoopProduct-link,
.familia ul.products:not(.familia-hs ul.products) li.product > a.woocommerce-LoopProduct-link {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "media" "title" "meta" "price";
}
.familia ul.products li.product .woocommerce-loop-product__title,
.familia ul.products:not(.familia-hs ul.products) li.product .woocommerce-loop-product__title { padding-inline: 8px; text-align: center; }
.familia ul.products li.product :is(.familia-card__material, .familia-card__meta),
.familia ul.products:not(.familia-hs ul.products) li.product :is(.familia-card__material, .familia-card__meta) { justify-self: center; margin-bottom: 4px; padding-inline: 8px; text-align: center; }
.familia ul.products li.product .familia-card__meta { justify-content: center; }
.familia ul.products li.product .price,
.familia ul.products:not(.familia-hs ul.products) li.product .price { justify-self: center; justify-content: center; padding-inline: 8px; }
.familia ul.products li.product .familia-swatches { justify-content: center; }
.familia ul.products li.product .familia-swatches__list { justify-content: center; }

/* salon list: the 4 nearest first, then "Visi salonai (72)" / "Rodyti artimiausius" (client 2026-09-28) */
.familia .familia-salons__short .familia-salons__city-name { margin-top: 4px; }
.familia .familia-salons__more { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 10px 0 0; }
.familia .familia-salons__all-toggle,
.familia .familia-salons__near { padding: 0; border: 0; background: none; color: var(--f-ink); font: inherit; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.familia .familia-salons__near { color: var(--f-sky-deep); font-weight: 400; }
.familia .familia-salons__all-toggle:hover,
.familia .familia-salons__near:hover { color: var(--f-red); }
.familia .familia-salons__all[hidden],
.familia .familia-salons__short[hidden] { display: none; }

/* lens pages: the date lines by the button are quieter – the badge above the name carries the delivery (2026-09-28) */
.familia .familia-lens .fl-status .fl-delivery,
.familia .familia-sub .fs-delivery { color: var(--f-muted, #676767); font-size: 13px; font-weight: 400; }

/* prices: the crossed-out one grey and a step smaller, so the price to pay stands out (client 2026-09-28: "everything
   looks the same weight") – cards, product page, home rows */
.familia ul.products li.product .price del,
.familia ul.products li.product .price del .amount,
.familia ul.products li.product .price del bdi,
.familia.single-product .summary .price del,
.familia.single-product .summary .price del .amount,
.familia.single-product .summary .price del bdi { color: var(--f-quiet, #736e69); font-weight: 400; }
.familia ul.products li.product .price del { font-size: .9em; text-decoration-color: #b5b0aa; }
.familia.single-product .summary .price del { font-size: .82em; text-decoration-color: #b5b0aa; }

/* phones, one card per row: no room kept for a second title line or an empty material line – the name sits just
   under the photo and the price just under the name ("too big gaps between the name and the prices") */
@media (max-width: 767px) {
	.familia ul.products li.product .familia-card__media { margin-bottom: 8px; }
	.familia ul.products li.product .woocommerce-loop-product__title,
	.familia ul.products:not(.familia-hs ul.products) li.product .woocommerce-loop-product__title { min-height: 0; margin-bottom: 2px; }
	.familia ul.products li.product :is(.familia-card__material, .familia-card__meta):empty { display: none; }
	.familia ul.products li.product .price { padding-bottom: 0; }
	.familia ul.products { row-gap: 40px; }
}

/* cart "Rekomenduojame": one sliding row (the product page carousel's rules, familia-product.css is not loaded here) */
.familia .familia-cart-recommended .familia-carousel { position: relative; }
.familia .familia-cart-recommended .familia-carousel .woocommerce { margin: 0; }
.familia .familia-cart-recommended .familia-carousel ul.products { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; grid-template-columns: none; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; }
.familia .familia-cart-recommended .familia-carousel ul.products::-webkit-scrollbar { display: none; }
.familia .familia-cart-recommended .familia-carousel ul.products li.product,
.familia .familia-cart-recommended .familia-carousel ul.products[class*="columns-"] li.product { width: auto; max-width: none; margin: 0; float: none; scroll-snap-align: start; }
.familia .familia-cart-recommended .familia-carousel__prev,
.familia .familia-cart-recommended .familia-carousel__next { position: absolute; top: -52px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; box-shadow: none; color: var(--f-ink); cursor: pointer; }
.familia .familia-cart-recommended .familia-carousel__prev { right: 50px; }
.familia .familia-cart-recommended .familia-carousel__next { right: 0; }
.familia .familia-cart-recommended .familia-carousel__prev::before { content: '‹'; font-size: 24px; line-height: 1; }
.familia .familia-cart-recommended .familia-carousel__next::before { content: '›'; font-size: 24px; line-height: 1; }
.familia .familia-cart-recommended .familia-carousel__prev:disabled,
.familia .familia-cart-recommended .familia-carousel__next:disabled { color: var(--f-default-600); cursor: default; }
.familia .familia-cart-recommended .familia-carousel__prev[hidden],
.familia .familia-cart-recommended .familia-carousel__next[hidden] { display: none; }
@media (min-width: 768px) { .familia .familia-cart-recommended .familia-carousel ul.products { grid-auto-columns: calc(50% - 15px); } }
@media (min-width: 1024px) { .familia .familia-cart-recommended .familia-carousel ul.products { grid-auto-columns: calc((100% - 60px) / 3); } }
@media (min-width: 1280px) { .familia .familia-cart-recommended .familia-carousel ul.products { grid-auto-columns: calc((100% - 90px) / 4); } }

/* QA 2026-09-28 #27: bigger product names, prices and category titles ("then the overall design looks better") –
   a step back from the 16px of the minimal pass */
.familia ul.products li.product .woocommerce-loop-product__title,
.familia ul.products:not(.familia-hs ul.products) li.product .woocommerce-loop-product__title { font-size: 18px; line-height: 26px; }
.familia ul.products li.product .price,
.familia ul.products:not(.familia-hs ul.products) li.product .price { font-size: 18px; }
.familia ul.products li.product .price ins,
.familia ul.products li.product .price ins .amount { font-weight: 500; }
.familia ul.products li.product .price del { font-size: 15px; }
.familia .familia-hs ul.products li.product .woocommerce-loop-product__title { font-size: 18px; line-height: 26px; }
.familia .familia-hs ul.products li.product .price { font-size: 17px; }
@media (max-width: 767px) {
	.familia ul.products li.product .woocommerce-loop-product__title,
	.familia ul.products:not(.familia-hs ul.products) li.product .woocommerce-loop-product__title { font-size: 17px; line-height: 24px; }
	.familia ul.products li.product .price { font-size: 17px; }
	.familia .familia-hs ul.products li.product .woocommerce-loop-product__title { font-size: 16px; line-height: 22px; }
	.familia .familia-hs ul.products li.product .price { font-size: 15px; }
}
.familia.familia-with-filters .f-archive .f-archive__title,
.familia.familia-with-filters .f-archive .woocommerce-products-header__title { font-size: 30px; line-height: 1.2; }
@media (min-width: 1024px) {
	.familia.familia-with-filters .f-archive .f-archive__title,
	.familia.familia-with-filters .f-archive .woocommerce-products-header__title { font-size: 40px; }
}

/* phones, lens form (QA 2026-09-28 #34 "align"): the eye boxes lose their 10px inner padding so the eye title, labels,
   fields and "Kiekis" share the page's left edge with the name and the toggle; the side-by-side fields get 16px text
   and tighter padding so "Pasirinkite…" is not cut */
@media (max-width: 1023px) {
	.familia .familia-lens .fl-eye { padding: 16px 0 4px; }
	.familia .familia-lens .fl-eye legend,
	.familia .familia-lens .fl-eye .fl-eye-title { margin-bottom: 16px; padding: 0; font-size: 18px; }
	.familia .familia-lens .fl-fields { column-gap: 12px; }
	.familia .familia-lens .fl-field { padding-inline: 0; }
	.familia .familia-lens .fl-field select { padding: 0 30px 0 12px; font-size: 16px; background-position: right 10px center; }
}

/* phones, purchase type (QA 2026-09-28 #36 "align everything and compress so the subscription info fits the screen"):
   one tight row per choice – radio · name (15px, two lines at most) · prices stacked right (old small above new);
   the ⓘ in the box's corner; the benefits as short grey lines with a sky ✓; the badge on the box edge */
@media (max-width: 767px) {
	body.familia .familia-sub .fs-modes { gap: 14px; }
	body.familia .familia-sub .fs-mode { position: relative; margin: 0; padding: 12px 12px 10px; }
	body.familia .familia-sub .fs-mode-sub { margin-top: 10px; }
	body.familia .familia-sub .fs-head { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; padding: 0; }
	body.familia .familia-sub .fs-head input[type="radio"] { margin: 0; }
	body.familia .familia-sub .fs-title { font-size: 15px; line-height: 1.3; }
	body.familia .familia-sub .fs-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 0; white-space: nowrap; }
	body.familia .familia-sub .fs-mode-sub .fs-prices { padding-right: 22px; }
	body.familia .familia-sub .fs-prices del { font-size: 12px; line-height: 1.2; }
	body.familia .familia-sub .fs-prices strong,
	body.familia .familia-sub .fs-price-one { font-size: 16px; line-height: 1.3; }
	body.familia .familia-sub .fs-info { position: absolute; top: 12px; right: 12px; margin: 0; }
	body.familia .familia-sub .fs-best { position: absolute; top: -10px; left: 12px; margin: 0; padding: 2px 8px; font-size: 11px; line-height: 16px; }
	body.familia .familia-sub .fs-sublabel { min-width: 0; max-width: calc(100% - 30px); margin: 8px 0 0 30px; padding: 8px 0 0; border-top: 1px solid #ebebeb; }
	body.familia .familia-sub .fs-sublabel p { white-space: normal; overflow-wrap: anywhere; }
	body.familia .familia-sub .fs-sublabel p { position: relative; margin: 0; padding: 2px 0 2px 16px; border: 0; color: var(--f-muted, #676767); font-size: 13px; line-height: 1.35; }
	body.familia .familia-sub .fs-sublabel p::before { content: "✓"; position: absolute; left: 0; top: 2px; color: var(--f-sky-deep, #6293b4); font-weight: 600; }
	body.familia .familia-sub .fs-freq { margin: 0 0 8px; }
}

/* client 2026-09-28: "headings, brands (the names) and the price – bigger still" */
.familia ul.products li.product .woocommerce-loop-product__title,
.familia ul.products:not(.familia-hs ul.products) li.product .woocommerce-loop-product__title,
.familia .familia-hs ul.products li.product .woocommerce-loop-product__title { font-size: 20px; line-height: 28px; }
.familia ul.products li.product .price,
.familia ul.products:not(.familia-hs ul.products) li.product .price,
.familia .familia-hs ul.products li.product .price { font-size: 20px; }
.familia ul.products li.product .price del { font-size: 16px; }
.familia .familia-hs.familia-hs h2.familia-hs__title { font-size: 26px; }
.familia.familia-with-filters .f-archive .f-archive__title,
.familia.familia-with-filters .f-archive .woocommerce-products-header__title { font-size: 34px; }
@media (min-width: 1024px) {
	.familia .familia-hs.familia-hs h2.familia-hs__title { font-size: 32px; }
	.familia.familia-with-filters .f-archive .f-archive__title,
	.familia.familia-with-filters .f-archive .woocommerce-products-header__title { font-size: 46px; }
}
@media (max-width: 767px) {
	.familia ul.products li.product .woocommerce-loop-product__title,
	.familia ul.products:not(.familia-hs ul.products) li.product .woocommerce-loop-product__title { font-size: 19px; line-height: 26px; }
	.familia ul.products li.product .price,
	.familia ul.products:not(.familia-hs ul.products) li.product .price { font-size: 19px; }
	.familia .familia-hs ul.products li.product .woocommerce-loop-product__title { font-size: 17px; line-height: 24px; }
	.familia .familia-hs ul.products li.product .price { font-size: 17px; }
	.familia ul.products li.product .price del { font-size: 14px; }
}

/* QA 2026-09-28 #41 "align when the names are longer – sometimes they don't fit": the card fills its row's height, the
   name takes up to three lines under the photo, and material + price sit at the card's bottom – so the prices of one
   row line up whatever the name's length */
.familia ul.products li.product > a.woocommerce-LoopProduct-link,
.familia ul.products:not(.familia-hs ul.products) li.product > a.woocommerce-LoopProduct-link {
	flex: 1 1 auto;
	grid-template-rows: auto 1fr auto auto;
}
.familia ul.products li.product .woocommerce-loop-product__title,
.familia ul.products:not(.familia-hs ul.products) li.product .woocommerce-loop-product__title,
.familia .familia-hs ul.products li.product .woocommerce-loop-product__title {
	align-self: start;
	min-height: 0;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}
.familia ul.products li.product :is(.familia-card__material, .familia-card__meta) { align-self: end; }