@charset "UTF-8";
/*!
 * FAMILIA OPTICA · SHELL + CONTENT  (familia-shell.css)
 * ==================================================================
 * Header, footer and the CMS content blocks (home page and every CMS
 * page), reproducing shop.familia.lt one to one – layout AND look
 * (client decision 2026-09-23: white page, ink #140e06 – face Geologica from 2026-09-25,
 * grey bands where the old shop has them; familia.lt's brown /
 * pale-grey styling is not used).
 *
 * Ground truth, in this order:
 *   https://shop.familia.lt (read 2026-09-23, 375 / 768 / 1440 px)
 *   .legacy-ref/client.bundle.js + client.bundle.css   (the storefront)
 *   design-reference/pages/*.html                      (captures)
 *
 * The numbers in the comments are the legacy Tailwind utilities. The
 * legacy breakpoints are NOT Tailwind's defaults – they are:
 *     xs 375 · sm 768 · md 1024 · lg 1280 · xl 1440
 * so `sm:` below means ≥768px and `md:` ≥1024px everywhere in this file.
 * The one container is `max-w-[1440px] px-4 md:px-[90px]` = .f-container
 * (familia.css §04: 16px gutter, 90px from 1024px).
 *
 * Colours follow the old shop, greys included (the client asked for the
 * look to be identical). Kept for accessibility, invisible in the drawing:
 * focus is always visible; panels and drawer are real buttons/dialogs.
 *
 * Sections:
 *   01–05 Header: moved to familia-header.css (2026-09-25, lensor.lt layout
 *         principles in the Familia style – docs/design/header-lensor-spec.md)
 *   06 Footer (familia.lt layout)     09 CMS content (home + pages)
 *   08 Phone button, to-top           10 Motion / forced colours
 */

/* ==================================================================
   06 · FOOTER (familia.lt layout, client 2026-09-25)
   ------------------------------------------------------------------
   familia.lt's `.footer`: light grey #f5f5f5 all the way down, then the
   light-blue bottom bar. Markup: inc/footer.php.
     newsletter   title 44px (28px phones) left · text, 55px field
                  (2px ink frame, 8px corners), full-width sky button
     columns      22px titles, 16px grey #676767 links, 1px #676767
                  hairlines above and below, 40px / 60px padding
     info         20px help line · grey contact links · social marks
     bottom bar   #e5f5ff, 14px grey: © line · legal links
   ================================================================== */

.familia .site-footer,
.familia.woocommerce-active .site-footer {
	position: relative;              /* the back-to-top circle sits on its top edge */
	margin: 0;
	padding: 0;
	border: 0;
	background: #f5f5f5;
	color: var(--f-ink);
	font-size: 16px;
}
.familia .site-footer > .col-full { display: block; max-width: none; margin: 0; padding: 0; }
.familia .site-footer a { color: var(--f-ink); text-decoration: none; }
.familia .site-footer a:hover { color: var(--f-red); text-decoration: none; }
:where(.familia .site-footer) p { margin: 0; }

/* ---- 1 · newsletter ---- */
.familia .f-news { padding: 40px 0; }
.familia .f-news__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.familia .site-footer .f-news__title { margin: 0; color: var(--f-ink); font-size: 28px; font-weight: 400; line-height: 1.1; }
.familia .f-news__text { margin: 0 0 16px; font-size: 16px; line-height: 24px; }
.familia .f-news__form { position: relative; display: grid; gap: 12px; margin: 0; }
.familia input.f-news__input {
	width: 100%;
	height: 55px;
	margin: 0;
	padding: 0 16px;
	border: 2px solid var(--f-ink);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: var(--f-ink);
	font-size: 16px;
}
.familia input.f-news__input::placeholder { color: var(--f-default-600); opacity: 1; }
.familia .f-news__form .f-btn,
.familia .f-news__form button[type="submit"] {
	width: 100%;
	height: 51px;
	min-height: 0;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 8px;
	background: var(--f-sky, #8dc9f7);
	box-shadow: none;
	color: var(--f-ink);
	font-size: 16px;
	font-weight: 500;
	text-transform: none;
	cursor: pointer;
}
.familia .f-news__form .f-btn:hover,
.familia .f-news__form button[type="submit"]:hover { background: var(--f-sky-deep, #6293b4); color: var(--f-ink); }
.familia .f-news__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; }
.familia .f-news__consent input { flex: none; width: 1rem; height: 1rem; min-height: 0; margin-top: .15em; }
.familia .f-news__consent a { text-decoration: underline; }
.familia .f-news__msg:empty { display: none; }
.familia .f-news__msg { font-size: 14px; }
@media (min-width: 1024px) {
	.familia .f-news { padding: 60px 0; }
	.familia .f-news__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
	.familia .site-footer .f-news__title { max-width: 560px; font-size: 44px; line-height: 1; }
	.familia .f-news__body { max-width: 536px; margin-left: auto; width: 100%; }
}

/* ---- 2 · columns ---- */
.familia .f-foot { position: relative; }
.familia .f-foot__menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 20px;                   /* phones: "Apie mus" / "Kontaktai" as a tight list (28px from 768) */
	margin: 0;
	padding: 32px 0 40px;
	border-top: 1px solid #676767;
	border-bottom: 1px solid #676767;
	list-style: none;
}
.familia .f-foot__item { margin: 0; min-width: 0; }
.familia .f-foot__item.is-desktop { display: none; }
.familia .f-foot__item--single { grid-column: 1 / -1; }
.familia .f-foot__col--marks { grid-column: 1 / -1; margin-top: 20px; }
.familia .site-footer .f-foot__title,
.familia .site-footer .f-foot__top { display: block; margin: 0 0 16px; color: var(--f-ink); font-size: 20px; font-weight: 400; line-height: 1.3; }
.familia .f-foot__item--single .f-foot__top { margin: 0; font-size: 18px; }
.familia .f-foot__entry { margin: 0 0 10px; }
.familia .site-footer .f-foot__link { color: #676767; font-size: 16px; line-height: 1.3; }
.familia .site-footer .f-foot__link:hover { color: var(--f-red); }
.familia .site-footer .f-foot__sub { margin: 16px 0 6px; color: var(--f-ink); font-size: 16px; font-weight: 500; }
.familia .f-foot__entry.is-desktop { display: none; }
@media (min-width: 768px) {
	.familia .f-foot__menu { row-gap: 28px; }
	.familia .f-foot__col--marks { margin-top: 0; }
	.familia .f-foot__item.is-desktop,
	.familia .f-foot__entry.is-desktop { display: block; }
	.familia .f-foot__item.is-phone,
	.familia .f-foot__entry.is-phone { display: none; }
}
@media (min-width: 1024px) {
	.familia .f-foot__menu { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); padding: 40px 0 60px; }
	.familia .f-foot__col--marks { grid-column: auto; }
	.familia .site-footer .f-foot__title { margin-bottom: 20px; font-size: 22px; }
}

/* payment and delivery marks (the last column) */
.familia .f-marks { display: grid; gap: 20px; }
.familia .site-footer .f-marks__label { margin: 0 0 12px; font-size: 20px; font-weight: 400; line-height: 1.3; }
.familia .f-marks__list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.familia .f-mark { margin: 0; }
.familia .f-mark img { display: block; width: auto; height: 28px; }
.familia .f-marks__group--delivery .f-mark img { height: 24px; }
.familia .f-mark--artea img { height: 22px; }   /* a full-bleed wordmark: optically the size of the others */
.familia .f-mark--text { padding: 4px 8px; border: 1px solid var(--f-default-300); border-radius: 5px; font-size: 12px; }
@media (min-width: 1024px) {
	.familia .site-footer .f-marks__label { font-size: 22px; margin-bottom: 16px; }
}

/* ---- 3 · info row ---- */
.familia .f-info__in { display: flex; flex-direction: column; gap: 16px; padding-block: 24px; }
.familia .f-info__text { font-size: 18px; line-height: 1.3; }
.familia .f-info__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.familia .f-info__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.familia .site-footer .f-info__links a { color: #676767; }
.familia .site-footer .f-info__links a:hover { color: var(--f-red); }
/* the social marks as familia.lt's: plain glyphs, no circle */
.familia .f-social { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.familia .f-social li { margin: 0; }
.familia .f-social a { position: relative; display: grid; place-items: center; width: 24px; height: 24px; color: var(--f-ink); }
.familia .f-social a::before { content: ""; position: absolute; inset: -8px; }   /* 40px touch target */
.familia .f-social .f-icon--social { width: 36px; height: 36px; margin: -6px; }
.familia .f-social .f-icon--social circle { display: none; }
.familia .f-social .f-icon:not(.f-icon--social) { width: 20px; height: 20px; }
@media (min-width: 1024px) {
	.familia .f-info__in { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
	.familia .f-info__text { font-size: 20px; }
}

/* ---- 4 · bottom bar ---- */
.familia .f-legal { margin: 0; padding: 0; background: #e5f5ff; color: #676767; }
.familia .f-legal__in { display: flex; flex-direction: column; gap: 8px; padding-block: 15px; font-size: 14px; line-height: 1.3; }
.familia .f-legal__copy { margin: 0; color: #676767; font-size: 14px; }
.familia .f-legal__links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.familia .f-legal__links li { margin: 0; }
.familia .f-legal__links li.is-desktop { display: none; }
.familia .site-footer .f-legal__links a { color: #676767; font-size: 14px; }
.familia .site-footer .f-legal__links a:hover { color: var(--f-red); }
@media (min-width: 768px) {
	.familia .f-legal__in { flex-direction: row; align-items: center; justify-content: space-between; }
	.familia .f-legal__links li.is-desktop { display: list-item; }
	.familia .f-legal__links li.is-phone { display: none; }
}

/* ==================================================================
   08 · PHONE APPOINTMENT BUTTON, BACK TO TOP
   ================================================================== */

/* phones and tablets (< 1024): the full-width appointment button under the footer, the sky button */
.familia .f-appointment {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 64px;
	background: var(--f-sky);
	color: var(--f-ink);
	font-size: 17px;
	font-weight: 400;
	text-transform: none;
	text-decoration: none;
}
.familia .f-appointment:hover { background: var(--f-sky-deep); color: var(--f-ink); }
@media (min-width: 1024px) {
	.familia .f-appointment { display: none; }
}

/* back to top: a 48px circle on the footer's top edge, fades in after scrolling */
.familia .f-totop {
	position: absolute;
	top: -24px;
	right: 16px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px rgb(102 105 107 / .15);
	color: var(--f-ink);
	opacity: 0;
	transition: opacity .3s;
}
.familia .f-totop[hidden] { display: none; }
.familia .f-totop.is-visible { opacity: 1; }
.familia .f-totop:hover { background: #fff; color: var(--f-red); }
@media (min-width: 1024px) {
	.familia .f-totop { right: 90px; }
}

/* ==================================================================
   09 · CMS CONTENT (home page and every CMS page)
   ------------------------------------------------------------------
   The legacy page is a stack of CMS blocks, each in the one container.
   Block → markup here (familia-content, docs/CONTENT.md):
     text           .familia-text           `.textblock` band
     textWithImage  .familia-media-text     photo + text, 575px columns
     FAQ            .familia-faq            open rows between thin rules, line icons (F&F)
     images         .familia-gallery        tiles, or the carousel
     giftVoucher    .familia-giftcard
   Typography is `.semantic-html`: h1/h2 32→44px (≥1024) 600 lh 1.375
   mb 1.75rem; h3 22→26px 700; p and lists 16px light lh 1.375.
   ================================================================== */

/* one container for every content block */
.familia .familia-home,
.familia.familia-legacy-page .entry-content,
.familia.page:not(.woocommerce-page) .entry-content {
	max-width: none;
	padding: 0;
	color: var(--f-ink);
	font-size: var(--f-t-base);
}
.familia .familia-home > *,
.familia.page:not(.woocommerce-page) .entry-content > * {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--f-max);
	margin-inline: auto;
	padding-inline: var(--f-gut);
}
.familia.page:not(.woocommerce-page) #primary > .site-main > article { max-width: none; margin-bottom: 0; padding-inline: 0; }
/* Storefront's full-width "alignwide" rule (margin calc(25% - 25vw), padding
   1.4em, 0,5,0) pulled wide groups out of the rail – the Kontaktai text sat
   23px from the edge instead of 90px. */
.familia.storefront-align-wide .hentry .entry-content > .alignwide,
.familia.storefront-align-wide .hentry .entry-content > .alignfull {
	width: 100%;
	max-width: var(--f-max);
	margin-inline: auto;
	padding-inline: var(--f-gut);
}
.familia.page:not(.woocommerce-page) #primary > .site-main > article .entry-header {
	max-width: var(--f-max);
	margin: 0 auto 20px;
	padding: 24px var(--f-gut) 16px;
}
/* pages end 56px above the footer (QA 2026-09-28 #18: the back-to-top circle, which sits across the footer's top edge,
   covered the last FAQ row's chevron when the page ran right into the footer); Storefront's 4.2em .hentry margin is gone */
.familia.page:not(.woocommerce-page) .entry-content { padding-bottom: 56px; }
.familia .familia-home { padding-bottom: 56px; }
.familia .familia-listing-after:has(.familia-faq:last-child) { padding-bottom: 56px; }
.familia .familia-home > .wp-block-group__inner-container,
.familia .familia-home .wp-block-group__inner-container { max-width: none; }

/* page breadcrumbs: `max-w-[1440px] px-4 md:px-[90px] pt-2`, row
   `text-[11px] lg:text-13 pb-2 lg:pb-4 text-default-600`, "/" separators */
.familia .f-crumbs--page {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: var(--f-max);
	margin: 0 auto;
	padding: 8px var(--f-gut) 8px;
	color: var(--f-default-600);
	font-size: var(--f-t-11);
}
.familia .f-crumbs--page a { color: var(--f-default-600); text-decoration: none; }
.familia .f-crumbs--page a:hover { color: var(--f-red); }
.familia .f-crumbs--page .f-crumbs__sep { margin-inline: 4px; }
@media (min-width: 1280px) {
	.familia .f-crumbs--page { padding-bottom: 16px; font-size: var(--f-t-13); }
}

/* ---- typography inside content blocks ---- */
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :where(h1, h2) {
	margin: 0 0 1.75rem;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.375;
}
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :where(h3, h4) {
	margin: 0 0 .5rem;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.375;
}
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :where(h5, h6) {
	margin: 0 0 .25rem;
	font-size: var(--f-t-xs);
	font-weight: 500;
	line-height: 1.375;
	text-transform: none;
}
@media (min-width: 1024px) {
	:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :where(h1, h2) { font-size: 44px; }
	:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) h3 { font-size: 26px; }
}
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) p {
	margin: 0 0 .5rem;
	font-size: var(--f-t-base);
	font-weight: 300;
	line-height: 1.375;
}
/* Lists and text links, but not a product grid ([familia_products] → ul.products
   li.product): the list indent, 300 weight and the red bold link style made the
   cards differ from the category-page card (red "Metalinis", red sale badge). */
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :where(ul:not(.products), ol) {
	margin: 0 0 1rem 1.25rem;
	padding: 0;
	font-size: var(--f-t-base);
	font-weight: 300;
	line-height: 1.375;
}
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :where(ul:not(.products), ol) li { margin-bottom: 1.25rem; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :where(ul:not(.products), ol) li::marker { color: var(--f-default-400); font-size: 1.125rem; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) strong { font-weight: 500; }
/* the old editor's text styles (client.bundle.css `.semantic-html .body-text` …), kept as block classes by
   familia-content ≥ 1.3.0. The legacy "500" is its Regular face (Open Sans Regular was declared at 500). */
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :is(p, h1, h2, h3, h4, li).body-text { font-size: 20px; font-weight: 300; line-height: 1.375; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :is(p, h1, h2, h3, h4, li).small-paragraph { font-size: 18px; font-weight: 400; line-height: 1.75rem; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :is(p, h1, h2, h3, h4, li).large-paragraph { font-size: 28px; font-weight: 400; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :is(p, h1, h2, h3, h4, li).description-text { font-size: 14px; font-weight: 300; line-height: 1.375; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :is(p, h1, h2, h3, h4).banner-subtitle { font-size: 16px; line-height: 1.5rem; text-transform: none; }
@media (min-width: 768px) {
	:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :is(p, h1, h2, h3, h4, li).body-text { font-size: 22px; }
	:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :is(p, h1, h2, h3, h4, li).small-paragraph { font-size: 20px; line-height: 1.375; }
	:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :is(p, h1, h2, h3, h4, li).large-paragraph { font-size: 48px; line-height: 1.375; }
}
@media (min-width: 1024px) {
	:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :is(p, h1, h2, h3, h4).banner-subtitle { font-size: 20px; line-height: 1.75rem; }
}
/* an empty line of the old editor keeps its height (one line of its text style); `.body-text` lines were
   <div>s there (no paragraph margin); `familia-mb-0` = the editor's inline "margin-bottom: 0" */
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :is(p.familia-blank, p.body-text, .familia-mb-0) { margin-bottom: 0; }
/* links in text: bold red (`--linkColor`), `hover:underline` */
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :where(p, li:not(.product), td) a:not(.wp-block-button__link) { color: var(--f-red); font-weight: 500; text-decoration: none; }
/* Storefront rules a line over an h3 that follows an h2 (`h2 + h3`); the old pages have none */
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) h2 + h3 { padding-top: 0; border-top: 0; }
/* `.textblock.semantic-html h1…h6 { mb-10 lg:mb-7 }` – headings in text blocks sit further from the text */
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .familia-text :is(h1, h2, h3, h4, h5, h6):not(.familia-mb-0) { margin-bottom: 2.5rem; }
@media (min-width: 1024px) {
	:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .familia-text :is(h1, h2, h3, h4, h5, h6):not(.familia-mb-0) { margin-bottom: 1.75rem; }
}
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :where(p, li:not(.product), td) a:not(.wp-block-button__link):hover,
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) a.familia-underline { text-decoration: underline; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) a:where(:not(.woocommerce-LoopProduct-link)) :is(strong, b, em, span) { color: inherit; }
/* list rows: the old 18px/28px marker makes each first line 26px high */
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) :where(ul:not(.products), ol) li::marker { line-height: 1.75rem; }

/* ---- buttons: `.semantic-html .btn` ----
   h-16, px-6, bold uppercase 16px (18px ≥768), tracking .025em,
   rounded-sm, sky, shadow `0 10px 30px 4px rgba(0,0,0,.15)`, my-8,
   full width on phones, content width from 768. */
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .wp-block-buttons { gap: 8px 12px; margin: 0; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .wp-block-button { width: 100%; margin: 0; }
@media (min-width: 768px) {
	:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .wp-block-button { width: auto; }
}
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 64px;
	margin-block: 2rem;
	padding: 0 24px;
	border: 2px solid var(--f-sky);
	border-radius: var(--f-r-xs);
	background: var(--f-sky);
	box-shadow: 0 10px 30px 4px rgb(0 0 0 / .15);
	color: var(--f-ink);
	font-size: var(--f-t-base);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}
@media (min-width: 768px) {
	:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .wp-block-button__link { width: auto; font-size: var(--f-t-18); }
}
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .wp-block-button__link:hover { border-color: var(--f-sky-deep); background: var(--f-sky-deep); color: var(--f-ink); }
/* legacy `btn-secondary` = the secondary button colours, which Familia set to the same sky:
   a filled button without the shadow, not an outline */
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	border-color: var(--f-sky);
	background: var(--f-sky);
	box-shadow: none;
	color: var(--f-ink);
}
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { border-color: var(--f-sky-deep); background: var(--f-sky-deep); }
/* (the old `.btn` keeps its my-8 at the end of a block too) */

/* ---- text block: `py-2.5 lg:py-8 bg-default-50 lg:mb-5` ---- */
.familia .familia-text { padding-block: 10px; }
/* the block runs the full container: WordPress's constrained layout capped its headings/paragraphs at the
   theme content width (a centred h2 wrapped at ~700px where the old one runs 1260px) */
.familia .familia-text > *,
.familia .familia-text.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: none; margin-inline: 0; }
/* no 24px block gap from WordPress's constrained layout: the old text flows by its own margins */
.familia .familia-text.is-layout-constrained > * { margin-block-start: 0; }
.familia .familia-text > .has-text-align-center { margin-inline: auto; }
@media (min-width: 1280px) {
	.familia .familia-text { padding-block: 32px; margin-bottom: 20px; }
}

/* ---- call-to-action card (group class `familia-cta`, e.g. the home page's "Pasirūpinkite savo akimis!"):
   client 2026-09-25 "too big, too big gaps, not falling into overall design" → a compact familia.lt card:
   light grey, 10px corners, heading 24–28px regular, one paragraph, the small sky button ---- */
.familia .wp-block-group.familia-cta {
	max-width: none;              /* the page's full width, as the FAQ under it */
	margin: 24px 0;
	padding: 28px 20px;
	border-radius: 10px;
	background: #f5f5f5;
	text-align: center;
}
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .familia-cta h2 { margin: 0 0 10px; font-size: 24px; font-weight: 400; line-height: 1.25; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .familia-cta p { max-width: 640px; margin: 0 auto 16px; font-size: 16px; font-weight: 400; line-height: 1.5; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .familia-cta .wp-block-buttons { justify-content: center; margin: 0; }
:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .familia-cta .wp-block-button__link {
	width: auto;
	min-height: 40px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 5px;
	box-shadow: none;
	font-size: 15px;
	font-weight: 400;
}
@media (min-width: 768px) {
	.familia .wp-block-group.familia-cta { padding: 32px 40px; }
	:is(.familia .familia-home, .familia.page:not(.woocommerce-page) .entry-content) .familia-cta h2 { font-size: 28px; }
}
.familia .familia-text.has-background { padding-inline: var(--f-gut); }
.familia .familia-text > :last-child { margin-bottom: 0; }

/* ---- the old editor's layout tables (icon + heading + text cells, e.g. "Kodėl verta rinktis
   kontaktinių lęšių prenumeratą?"), imported as columns (familia-content ≥ 1.3.0): equal cells with
   the table's 1px white border + 10px padding, min 320px high, the picture at half the cell width ---- */
.familia .wp-block-columns.familia-layout-table { gap: 0; margin: 0; flex-wrap: nowrap; }
/* the old table never stacks: its phone copy simply has two cells per row (WordPress stacks columns < 782px) */
.familia .wp-block-columns.familia-layout-table > .wp-block-column { flex-basis: 0 !important; }
/* (Storefront pads .hentry .entry-content columns sideways at ≥768 – outranked) */
body.familia .hentry .entry-content .wp-block-columns.familia-layout-table > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 320px; margin: 0; padding: 10px 10px 10px 11px; }
body.familia .hentry .entry-content .familia-layout-table .wp-block-image { width: 50%; margin: 0; }
.familia .familia-layout-table .wp-block-image img { width: 100%; height: auto; }

/* ---- text with image: `pt-7 pb-7 sm:pt-16 sm:pb-16`, container
   `flex flex-col sm:flex-row items-center justify-between`, both columns
   `sm:w-1/2 w-full max-w-[575px]`; the photo comes first on phones
   (`order-first mb-7`), 56px from the text from 768. */
.familia .wp-block-media-text.familia-media-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	padding-block: 28px;
	background: transparent;
}
@media (min-width: 768px) {
	.familia .wp-block-media-text.familia-media-text { flex-direction: row; padding-block: 64px; }
}
.familia .familia-media-text > .wp-block-media-text__media,
.familia .familia-media-text > .wp-block-media-text__content {
	width: 100%;
	max-width: 575px;
	margin: 0;
	padding: 0;
}
.familia .familia-media-text > .wp-block-media-text__media {
	order: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
}
.familia .familia-media-text > .wp-block-media-text__media img { width: auto; max-width: 100%; height: auto; border-radius: 0; }
.familia .familia-media-text > .wp-block-media-text__content { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) {
	.familia .familia-media-text > .wp-block-media-text__media,
	.familia .familia-media-text > .wp-block-media-text__content { width: 50%; }
	.familia .familia-media-text > .wp-block-media-text__media { order: 0; margin: 0 56px 0 0; }
	.familia .familia-media-text.has-media-on-the-right > .wp-block-media-text__media { order: 2; margin: 0 0 0 56px; }
}
.familia .familia-media-text.has-background { padding-inline: var(--f-gut); }

/* ---- FAQ in the Friends & Frames manner (client 2026-09-26: "the faq part is nice, please make same in ours"):
   a large light centred title, then open rows between thin rules – a line icon (chosen from the question's words,
   familia_faq_markup()), the question in regular weight, a thin chevron on the right that turns while open; no grey
   boxes. The answer lines up with the question's text. Same accordion on the home page, CMS pages and under the
   category listings. */
.familia .familia-faq { padding-block: 0; }
.familia .familia-faq .wp-block-group__inner-container { max-width: none; }
.familia .familia-faq > h2,
.familia .familia-faq > h3 { margin-bottom: 20px; }
.familia :is(.entry-content, .familia-home) .familia-faq > .wp-block-group__inner-container > .wp-block-heading:has(+ .wp-block-details) { margin-bottom: 24px; }
.familia .familia-faq .wp-block-group__inner-container > h2.familia-faq__title,
.familia :is(.entry-content, .familia-home) .familia-faq .wp-block-heading:has(+ .wp-block-details) {
	margin: 0 0 32px;
	color: var(--f-ink);
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
}
.familia .wp-block-details.familia-faq__item,
.familia .familia-faq .wp-block-details {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid #e2e2e2;
	border-radius: 0;
	background: transparent;
}
.familia .wp-block-details.familia-faq__item:last-child,
.familia .familia-faq .wp-block-details:last-child { border-bottom: 1px solid #e2e2e2; }
.familia .familia-faq .wp-block-details summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 40px 18px 0;
	color: var(--f-ink);
	font-family: var(--f-text);
	font-size: var(--f-t-base);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .01em;
	list-style: none;
	cursor: pointer;
}
.familia .familia-faq .wp-block-details[open] summary { font-weight: 400; }
.familia .familia-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.familia .familia-faq .wp-block-details summary:hover { color: var(--f-default-900, #4a4a4a); }
.familia .familia-faq .familia-faq__icon { display: flex; flex: none; color: var(--f-ink); }
.familia .familia-faq .familia-faq__icon svg { width: 26px; height: 26px; stroke-width: 1.2; }
.familia .familia-faq .wp-block-details summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
	transition: transform var(--f-fast, 150ms) var(--f-ease, ease);
}
.familia .familia-faq .wp-block-details[open] summary::after { transform: rotate(180deg); }
.familia .familia-faq .wp-block-details > :not(summary) { margin: 0; padding-inline: 0 40px; font-size: var(--f-t-base); font-weight: 300; line-height: 1.5; cursor: default; }
.familia .familia-faq .wp-block-details:has(.familia-faq__icon) > :not(summary) { padding-left: 42px; }   /* under the question's text */
.familia .familia-faq .wp-block-details > p:not(:last-child) { margin-bottom: 8px; }
.familia .familia-faq .wp-block-details > :not(summary):last-child { padding-bottom: 22px; }
@media (min-width: 768px) {
	.familia .familia-faq .wp-block-details summary { padding-block: 22px; font-size: var(--f-t-18); }
	.familia .familia-faq .familia-faq__icon svg { width: 28px; height: 28px; }
	.familia .familia-faq .wp-block-details:has(.familia-faq__icon) > :not(summary) { padding-left: 44px; }
}

/* ---- images: tiles `grid gap-2.5 lg:gap-5`, 1–3 columns, not cropped ---- */
.familia .familia-gallery.wp-block-gallery { gap: 10px; margin-block: 0 20px; }
@media (min-width: 1280px) {
	.familia .familia-gallery.wp-block-gallery { gap: 20px; }
}
.familia .familia-gallery.wp-block-gallery.is-cropped .wp-block-image img { height: auto; object-fit: initial; }

/* ---- the carousel (`images`, displayType carousel) ----
   slides `snap-start overflow-hidden min-h-[220px] max-h-[878px]`, one per
   view; arrows `absolute bottom-7 left-4 md:left-[90px]` (the second
   `ml-5`), the previous one faded while on the first slide; dots
   `absolute bottom-0 … mb-11`, active `bg-secondary w-3`, others
   `bg-default-400 w-1.5`, all `h-1.5 rounded-full mx-1`. */
.familia .f-campaign { position: relative; margin: 0 auto; }
.familia .familia-home > .f-campaign,
.familia .entry-content > .f-campaign { padding-inline: var(--f-gut); }
.familia .f-campaign__track {
	display: grid;
	grid-auto-columns: 100%;
	grid-auto-flow: column;
	column-gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.familia .f-campaign__track::-webkit-scrollbar { display: none; }
.familia .f-campaign__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	max-height: 878px;
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.familia .f-campaign__link { display: block; }
.familia .f-campaign__img { display: block; width: auto; max-width: 100%; height: auto; max-height: 878px; }
.familia .f-campaign__arrows {
	position: absolute;
	bottom: 28px;
	left: calc(var(--f-gut) + 16px);
	display: none;
	gap: 20px;
}
@media (min-width: 768px) {
	.familia .f-campaign__arrows { display: flex; }
}
.familia .f-campaign__arrows button {
	display: grid;
	place-items: center;
	width: 40px;
	height: 48px;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--f-ink);
	cursor: pointer;
}
.familia .f-campaign__arrows button:disabled { opacity: .5; cursor: default; }
.familia .f-campaign__arrows button:hover:not(:disabled) { background: transparent; color: var(--f-red); }
.familia .f-campaign__dots {
	position: absolute;
	right: 0;
	bottom: 35px;                  /* 44px to the old 6px dots; the 24px buttons keep the drawn dot where it was */
	left: 0;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
/* 24 × 24 buttons (WCAG 2.5.8 / Lighthouse target-size counts the button box, not a pseudo-element hit area);
   the drawn 6 px dot (12 px sky pill when current) is the ::after */
.familia .f-campaign__dot {
	position: relative;
	width: 24px;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--f-r-pill);
	background: transparent;
	box-shadow: none;
	pointer-events: auto;
}
.familia .f-campaign__dot::after {
	content: "";
	display: block;               /* Storefront hides every button::after */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: var(--f-r-pill);
	background: var(--f-default-400);
	transform: translate(-50%, -50%);
	transition: width var(--f-mid) var(--f-ease), background-color var(--f-mid) var(--f-ease);
}
.familia .f-campaign__dot[aria-current="true"]::after { width: 12px; background: var(--f-sky); }

/* ---- block editor only: the front page's gallery shows each image's place
   in the home mosaic ("Vieta mozaikoje", familia-editor-mosaic.js). On the
   site the gallery is re-rendered (Familia_Content_Render), so these figures
   never reach a visitor. ---- */
.familia-campaign .wp-block-image:is(.familia-tile-main, .familia-tile-side) { position: relative; }
.familia-campaign .wp-block-image:is(.familia-tile-main, .familia-tile-side)::before {
	content: "Karuselė";
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 2px 8px;
	border-radius: 2px;
	background: #140e06;
	color: #fff;
	font: 500 12px/18px var(--f-text);
	pointer-events: none;
}
.familia-campaign .wp-block-image.familia-tile-side::before { content: "Šoninė plytelė"; background: #ff0000; }

/* ---- the pre-parity carousel markup (`.f-campaign__controls`, still stored
   in an unrefreshed home page until familia-content re-imports it): drawn
   like the legacy row – plain arrows, dots between, no sky boxes ---- */
.familia .f-campaign__controls { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0; }
.familia .f-campaign__controls .f-campaign__prev,
.familia .f-campaign__controls .f-campaign__next {
	min-width: 40px; min-height: 40px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--f-ink); font-size: 20px;
}
.familia .f-campaign__controls .f-campaign__prev:disabled { opacity: .5; }

/* ---- block platform (legacy `platform: phone | desktop` → "sm:hidden" /
   "hidden sm:block"); familia-content wraps such blocks in these groups, which
   had no rule, so pages showed both copies one after the other ---- */
.familia .familia-only-desktop { display: none; }
@media (min-width: 768px) {
	.familia .familia-only-desktop { display: block; }
	.familia .familia-only-phone { display: none; }
}
/* A "wide" block inside such a wrapper (images `wide` + platform desktop:
   "Kodėl verta išbandyti?" / "Kaip tai veikia?" on /virtualus-akiniu-
   pasimatavimas/): the wrapper already sits in the 90px rail, but Storefront's
   `.storefront-align-wide.storefront-full-width-content .hentry .entry-content
   .alignwide` (margin calc(25% - 25vw), padding 1.4em; 0,5,0) pulled it out
   to x=68 / 1305px. The legacy block is `px-4 md:px-[90px]`: 90 / 1260. */
.familia :is(.entry-content, .familia-home) :is(.familia-only-desktop, .familia-only-phone) > .wp-block-group__inner-container > :is(.alignwide, .alignfull) {
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}
/* a titled images block: the legacy title is `semantic-html no-bottom-spacing mb-2` */
.familia :is(.entry-content, .familia-home) .familia-gallery-wrap > .wp-block-group__inner-container > .wp-block-heading:has(+ .f-campaign, + .wp-block-gallery) { margin-bottom: 8px; }

/* ---- gift card (giftVoucher): layout and form in familia-giftcard.css (loaded on that page only) ---- */

/* ---- touch targets ------------------------------------------------
   The header icon buttons keep the legacy 36×48 (client: identical header).
   The footer/legal/crumb links are bare 17–20px lines: their hit areas grow
   to 40px while the drawn layout does not move (negative margins give the
   extra padding back). */
.familia .f-logo__link { min-height: 40px; }
/* legal links: 24 px tall boxes (4 px + the 17 px line + 4 px) on a 25 px row pitch – the earlier ±12 px boxes
   overlapped the next wrapped row on phones, which Lighthouse target-size reports as "partially obscured" */
.familia .f-legal__links { row-gap: 8px; }
.familia .f-legal__links a { display: inline-block; padding-block: 4px; margin-block: -4px; }
.familia a.f-foot__top { padding-block: 10px; margin-top: -10px; margin-bottom: 10px; }
@media (min-width: 768px) { .familia a.f-foot__top { margin-bottom: 18px; } }
.familia .woocommerce-breadcrumb a,
.familia .f-crumbs--page a { display: inline-block; padding-block: 10px; margin-block: -10px; }

/* ==================================================================
   10 · MOTION / FORCED COLOURS
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.familia .f-totop,
	.familia .f-campaign__dot::after { transition: none; }
	.familia .f-campaign__track { scroll-behavior: auto; }
}

@media (forced-colors: active) {
	.familia .f-social a,
	.familia .f-mark--text,
	.familia .f-campaign__dot::after { border: 1px solid CanvasText; }
}

/* ==================================================================
   FOOTER, LIGHTER (client 2026-09-26: "maybe the footer is also a bit lighter, more minimalistic / smaller" –
   the Friends & Frames pass). Same sections and links; a paler ground, a smaller light newsletter title with the
   e-mail field and button on one line, small column titles and links, soft hairlines instead of the dark ones,
   smaller payment marks, and the bottom bar as a plain line instead of the blue strip. ~780px → ~500px at 1440.
   ================================================================== */
.familia .site-footer,
.familia.woocommerce-active .site-footer { background: #fafafa; font-size: 14px; }

.familia .f-news { padding: 32px 0 28px; }
.familia .site-footer .f-news__title { font-size: 24px; font-weight: 300; line-height: 1.2; }
.familia .f-news__text { margin-bottom: 12px; color: #5f5a55; font-size: 14px; line-height: 1.5; }
.familia input.f-news__input { height: 44px; border-width: 1px; border-color: #cfcfcf; border-radius: 6px; font-size: 15px; }
.familia input.f-news__input:focus { border-color: var(--f-ink); }
.familia .f-news__form .f-btn,
.familia .f-news__form button[type="submit"] { height: 44px; border-radius: 6px; font-size: 15px; }
.familia .f-news__consent { font-size: 12px; color: var(--f-quiet, #736e69); }
@media (min-width: 768px) {
	.familia .f-news { padding: 40px 0 32px; }
	.familia .f-news__in { align-items: center; }
	.familia .site-footer .f-news__title { font-size: 30px; line-height: 1.15; }
	.familia .f-news__form { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
	.familia .f-news__form > :not(.f-news__input):not(button[type="submit"]):not(.f-btn) { grid-column: 1 / -1; }
	.familia .f-news__form .f-btn,
	.familia .f-news__form button[type="submit"] { width: auto; padding-inline: 28px; }
}

/* As familia.lt's footer (QA 2026-10-01): the two-line "Prisijunkite prie „Familia“ bendruomenės" on the left and the
   Omnisend embedded sign-up (familia-newsletter.php footer_form) on the right with no white card – Omnisend's section
   background / padding off, its intro sentence (our own .f-news__text is not printed then) in Geologica, familia.lt's
   55px ink-bordered field and 51px sky "Prenumeruoti" stacked full width. Omnisend's per-form rules are ID + class:
   !important on what we take over. Height is reserved while the box is still empty (Omnisend fills it after load) so
   the footer does not jump; Omnisend's subscribed / success screens render in the same box. */
@media (min-width: 1024px) {
	.familia .f-news__in { align-items: start; }
	.familia .site-footer .f-news__title { max-width: 560px; font-size: 44px; font-weight: 400; line-height: 1.1; }
}
.familia .f-news__omnisend { color: var(--f-ink); }
.familia .f-news__omnisend:empty { min-height: 202px; }
.familia .f-news__omnisend [class*="-section-"],
.familia .f-news__omnisend [class*="-column-"] { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.familia .f-news__omnisend [class$="-opacity-layer"] { display: none !important; }
.familia .f-news__omnisend [class*="-content"],
.familia .f-news__omnisend form { width: 100% !important; max-width: none !important; background: transparent !important; }
.familia .f-news__omnisend [class*="-text-"] { padding: 0 0 12px !important; }
.familia .f-news__omnisend [class*="-text-"],
.familia .f-news__omnisend [class*="-text-"] * { color: var(--f-ink) !important; font-family: var(--f-text) !important; }
.familia .f-news__omnisend [class*="-text-"] p { font-size: 16px !important; line-height: 24px !important; }
.familia .f-news__omnisend [class*="-field-container"],
.familia .f-news__omnisend [class*="-action-container"] { padding: 0 !important; }
.familia .f-news__omnisend [class*="-field-container-wrapper"] { margin-bottom: 12px !important; }
.familia .f-news__omnisend input:is([type="email"], [type="text"], [type="tel"]) {
	flex: none !important;
	width: 100% !important;
	height: 55px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 2px solid var(--f-ink) !important;
	border-radius: 8px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--f-ink) !important;
	font-family: var(--f-text) !important;
	font-size: 16px !important;
	line-height: normal !important;
}
.familia .f-news__omnisend button[type="submit"] {
	width: 100% !important;
	height: 51px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--f-sky, #8dc9f7) !important;
	box-shadow: none !important;
	color: var(--f-ink) !important;
	font-family: var(--f-text) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: lowercase !important;   /* the shop form's label is typed "PRENUMERUOTI"; familia.lt: "Prenumeruoti" */
	cursor: pointer;
}
.familia .f-news__omnisend button[type="submit"]::first-letter { text-transform: uppercase; }
.familia .f-news__omnisend button[type="submit"]:hover { background: var(--f-sky-deep, #6293b4) !important; }
@media (min-width: 576px) {
	.familia .f-news__omnisend:empty { min-height: 178px; }
}

.familia .f-foot__menu { padding: 28px 0 32px; border-top-color: #e2e2e2; border-bottom-color: #e2e2e2; }
.familia .site-footer .f-foot__title,
.familia .site-footer .f-foot__top { margin-bottom: 12px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.familia .f-foot__item--single .f-foot__top { font-size: 15px; }
.familia .f-foot__entry { margin-bottom: 6px; }
.familia .site-footer .f-foot__link { color: var(--f-quiet, #736e69); font-size: 14px; line-height: 1.5; }
.familia .site-footer .f-foot__sub { margin: 12px 0 4px; font-size: 13px; font-weight: 500; }
.familia .site-footer .f-marks__label { margin-bottom: 10px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.familia .f-marks { gap: 16px; }
.familia .f-marks__list { gap: 8px 12px; }
.familia .f-mark img { height: 22px; }
.familia .f-marks__group--delivery .f-mark img { height: 20px; }
.familia .f-mark--artea img { height: 18px; }
@media (min-width: 1024px) {
	.familia .f-foot__menu { padding: 32px 0 36px; }
	.familia .site-footer .f-foot__title,
	.familia .site-footer .f-marks__label { margin-bottom: 12px; font-size: 15px; }
}
.familia a.f-foot__top { margin-bottom: 2px; }
@media (min-width: 768px) { .familia a.f-foot__top { margin-bottom: 2px; } }

.familia .f-info__in { gap: 12px; padding-block: 18px; }
.familia .f-info__text { font-size: 15px; }
.familia .site-footer .f-info__links a { font-size: 14px; }
.familia .f-social { gap: 12px; }
.familia .f-social .f-icon:not(.f-icon--social) { width: 18px; height: 18px; }
.familia .f-social .f-icon--social { width: 32px; height: 32px; }
@media (min-width: 1024px) { .familia .f-info__text { font-size: 15px; } }

.familia .f-legal { border-top: 1px solid #e2e2e2; background: transparent; }
.familia .f-legal__in { padding-block: 14px; font-size: 13px; }
.familia .f-legal__copy,
.familia .site-footer .f-legal__links a { color: var(--f-quiet, #736e69); font-size: 13px; }

/* long FAQs folded to their first questions (inc/patterns.php, familia.js) */
.familia .familia-faq.is-folded .familia-faq__item:nth-of-type(n+4) { display: none; }
.familia .familia-faq__more { margin: 16px 0 0; text-align: center; }
.familia .familia-faq__more[hidden] { display: none; }
.familia .familia-faq__toggle {
	min-height: 40px; padding: 8px 20px; border: 1px solid var(--f-ink, #1d1d1b); border-radius: 4px;
	background: transparent; color: var(--f-ink, #1d1d1b); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.familia .familia-faq__toggle:hover { background: var(--f-ink, #1d1d1b); color: #fff; }