@charset "UTF-8";
/*!
 * Familia Optica – design system (Storefront child theme)
 * ------------------------------------------------------------------
 * Hand-written, no build step. One file, loaded after Storefront's own
 * stylesheets so it can correct them. Sections:
 *
 *   01 Fonts              06 Badges / chips / rules   11 Single product
 *   02 Tokens             07 Header                   12 Lens configurator
 *   03 Base + Storefront  08 Footer                   13 Cart / checkout
 *   04 Layout             09 Home patterns            14 Account / forms
 *   05 Buttons + forms    10 Shop archive             15 Pages, 404, misc
 *
 * Reference for look AND layout: shop.familia.lt (client decision 2026-09-23 – white page, ink #140e06,
 * 2 px radii). From 2026-09-25 the face is familia.lt's Geologica and the header / home mosaic follow
 * familia.lt's layout; the page stays white (product photos sit on white).
 *
 * Class contract with other streams – see docs/DESIGN.md.
 */

/* familia.lt's face (client 2026-09-25: "maybe it's even worth taking the fonts from familia.lt, for the whole
   site"): Geologica, variable 100–900, self-hosted (the same files familia.lt loads from Google Fonts: latin +
   latin-ext, which carries ą č ę ė į š ų ū ž). No italic face (synthesised). */
@font-face {
  font-family: 'Geologica'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/geologica-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geologica'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/geologica-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Until the woff2 arrives (slow phone networks: font-display swap paints the fallback first) the text is set in a
   local Arial/Roboto scaled to Geologica's metrics, so the swap does not re-wrap lines and push the page down
   (PageSpeed 2026-10-01, CLS). Measured with fontTools on these files: Geologica 400 is 7.5 % wider than Arial on
   Lithuanian shop copy; ascent 0.975 / descent 0.275 / gap 0 em, expressed relative to the adjusted size. */
@font-face {
  font-family: 'Geologica Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto');
  size-adjust: 107.5%;
  ascent-override: 90.7%;
  descent-override: 25.6%;
  line-gap-override: 0%;
}

/* ==================================================================
   02 · TOKENS
   ================================================================== */

:root {
	/* -- brand (from the live shop's :root, rgb triplets converted) -- */
	--f-ink: #140e06;          /* --bodyTextColor / --primaryColor     */
	--f-ink-rgb: 20 14 6;
	--f-sky: #8dc9f7;          /* --secondaryColor, primary button     */
	--f-sky-rgb: 141 201 247;
	--f-sky-deep: #6293b4;     /* --primaryButtonHoverColor            */
	--f-sky-wash: #eef7fe;
	--f-red: #f00f00;          /* brandbook red (familia.lt --c-accent; the old shop's #ff0000) */
	--f-red-rgb: 240 15 0;
	/* the same red a shade darker for red TEXT on white / the #f6f6f6 bar and for white text on red: #f00f00 gives
	   4.1:1 and 4.4:1 there, under the WCAG AA 4.5:1 that Lighthouse checks; #e00e00 gives 4.6–5.0:1 */
	--f-red-text: #e00e00;
	/* warm "quiet grey" for secondary copy (old prices, material line, legal row): the lightest shade of the earlier
	   #77716b / #8a857f / #8f8a84 that still reaches 4.5:1 on white, #fafafa and the #e5f5ff home band */
	--f-quiet: #736e69;
	/* -- brandbook (client 2026-09-28: "we have brandbook colours – use them systematically"); values as familia.lt
	   ships them (familia-web docs/spec/01-templates.md §1.1). Controls, states and marks take these, not ad-hoc hues. */
	--f-brand: #3d291d;        /* brand brown: logo, icons, marks       */
	--f-brand-wash: #e5f5ff;   /* light blue ground                     */
	--f-muted: #676767;        /* secondary copy                        */

	/* -- neutrals: the live `default` scale ------------------------- *
	 * default-50 …-600 are read straight out of client.bundle.css;
	 * they are cool greys, not warm paper. Do not "improve" them.     */
	--f-default-50: #ffffff;   /* footer bottom bar, masthead, nav     */
	--f-default-100: #f6f6f6;  /* promo bar, search field, panels      */
	--f-default-200: #f0f0f0;  /* footer ground, separators            */
	--f-default-300: #e8eaed;
	--f-default-400: #cdd1d6;  /* input borders                        */
	--f-default-500: #b8bdc5;
	--f-default-600: #b5bac2;  /* muted marks                          */
	--f-default-900: #666666;  /* secondary text                       */

	/* Legacy aliases kept so merged work in familia-content /
	   familia-catalog / familia-salons keeps resolving. */
	--f-paper: var(--f-default-50);
	--f-paper-2: var(--f-default-100);
	--f-paper-3: var(--f-default-200);

	--f-ink-2: var(--f-default-900);          /* secondary copy       */
	--f-ink-3: var(--f-default-900);          /* meta                 */
	--f-ink-4: var(--f-default-600);          /* placeholder / muted  */
	--f-line: var(--f-default-200);           /* hairline / divider   */
	--f-line-2: var(--f-default-100);
	--f-ok: var(--f-sky-deep);   /* "open now", positive states – brand steel blue, no off-palette green */
	--f-warn: #9a6700;
	--f-err: var(--f-red);

	/* -- type: one face, the live shop's own stack ------------------ */
	--f-text: "Geologica", "Geologica Fallback", Arial, sans-serif;
	--f-display: var(--f-text);   /* no separate display face         */
	--f-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

	/* Tailwind's scale as the live shop uses it, plus its custom 13px
	   step (`.text-13`). Fixed px, not clamped: the reference is fixed. */
	--f-t-11: .6875rem;    /* 11 – copyright on mobile             */
	--f-t-xs: .75rem;      /* 12 – text-xs, legal row              */
	--f-t-13: .8125rem;    /* 13 – text-13, the custom step        */
	--f-t-sm: .875rem;     /* 14 – text-sm, body + footer headings */
	--f-t-base: 1rem;      /* 16 – text-base, nav, inputs          */
	--f-t-18: 1.125rem;    /* 18 – text-lg                         */
	--f-t-20: 1.25rem;     /* 20 – text-xl, mega panel tiles       */

	--f-t-md: var(--f-t-sm);   /* alias: body copy is 14px here     */
	--f-t-lg: var(--f-t-18);
	--f-t-h4: var(--f-t-base);
	--f-t-h3: var(--f-t-18);
	--f-t-h2: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	--f-t-h1: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
	--f-t-hero: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);

	/* -- space (4px base) ------------------------------------------ */
	--f-1: .25rem;
	--f-2: .5rem;
	--f-3: .75rem;
	--f-4: 1rem;
	--f-5: 1.5rem;
	--f-6: 2rem;
	--f-7: 3rem;
	--f-8: 4rem;
	--f-9: 6rem;
	/* Page gutter: 16px, rising to 90px from the legacy `md` (1024px) –
	   see §04. The legacy breakpoints are xs 375 · sm 768 · md 1024 ·
	   lg 1280 · xl 1440, not Tailwind's defaults.                      */
	--f-gut: 1rem;
	--f-sec: clamp(2.25rem, 1.6rem + 3vw, 4rem); /* section rhythm    */

	/* -- shape: the live shop is `rounded-sm` = .125rem nearly ------ *
	 * everywhere; `rounded` = .25rem and `rounded-lg` = .5rem appear
	 * on panels. Pills only on badges.                                */
	--f-r-xs: 2px;   /* 2px  – rounded-sm, buttons and inputs     */
	--f-r-sm: 2px;   /* 2px  – alias, same value                  */
	--f-r: .25rem;       /* 4px  – rounded                            */
	--f-r-md: .3rem;     /* 4.8px – SPEC.md's figure, kept as a token */
	--f-r-lg: .5rem;     /* 8px  – rounded-lg                         */
	--f-r-pill: 999px;
	--f-max: 1440px;
	--f-read: 68ch;

	/* -- depth: the live shop's shadows are faint and neutral ------- */
	--f-shadow-1: 0 1px 2px rgb(var(--f-ink-rgb) / .05), 0 2px 8px rgb(var(--f-ink-rgb) / .04);
	--f-shadow-2: 0 2px 6px rgb(var(--f-ink-rgb) / .06), 0 14px 32px -12px rgb(var(--f-ink-rgb) / .14);
	--f-shadow-3: 0 24px 60px -24px rgb(var(--f-ink-rgb) / .24);

	/* -- motion ---------------------------------------------------- */
	--f-fast: 120ms;
	--f-mid: 220ms;
	--f-slow: 420ms;
	--f-ease: cubic-bezier(.22, .61, .36, 1);

	/* -- component ------------------------------------------------- */
	--f-header-h: 64px;
	--f-focus: var(--f-ink);
	--f-ticks: repeating-linear-gradient(90deg, var(--f-line) 0 1px, transparent 1px 8px);
}

/* ==================================================================
   03 · BASE  (+ corrections to Storefront)
   ================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
}

/* Familia typography with the shop's compact text scale. */
body.familia {
	font-family: var(--f-text);
	font-size: var(--f-t-sm);
	line-height: 1.4286;          /* 20px at 14px, as in the reference */
	color: var(--f-ink);
	background-color: #fff;       /* the old shop's page is white */
	-webkit-font-smoothing: auto;         /* the old shop leaves it at auto: antialiased draws thinner on macOS */
	-moz-osx-font-smoothing: auto;
	-webkit-tap-highlight-color: transparent;
	overflow-wrap: break-word;
}

/* form controls: Storefront gives button/input/select/textarea its own "Source Sans Pro" stack */
.familia :is(button, input, select, textarea, optgroup) { font-family: var(--f-text); }

.familia h1,
.familia h2,
.familia h3,
.familia h4,
.familia h5,
.familia h6,
.familia .f-display {
	font-family: var(--f-text);   /* one face only – no display serif */
	font-weight: 400;
	color: var(--f-ink);
	line-height: 1.25;
	letter-spacing: 0;
	text-wrap: balance;
	margin: 0 0 var(--f-3);
}

.familia h1 { font-size: var(--f-t-h1); }
.familia h2 { font-size: var(--f-t-h2); }
.familia h3 { font-size: var(--f-t-h3); font-weight: 400; }
.familia h4 { font-size: var(--f-t-h4); }
.familia h5,
.familia h6 {
	font-size: var(--f-t-sm);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
}

/* The invented "one italic word per headline" gesture is gone: the live shop
   has no italic display accent. <em> stays a plain italic. */
.familia h1 em,
.familia h2 em,
.familia h3 em,
.familia .f-display em {
	font-style: italic;
	font-weight: inherit;
	letter-spacing: 0;
}

/* Core group blocks may wrap children in an inner container; keep the rail working either way. */
.familia .wp-block-group__inner-container { min-width: 0; }

.familia p { margin: 0 0 var(--f-4); }
.familia p:last-child { margin-bottom: 0; }

.familia a {
	color: var(--f-ink);
	text-decoration-color: rgb(var(--f-ink-rgb) / .35);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--f-fast) var(--f-ease), text-decoration-color var(--f-fast) var(--f-ease);
}
/* `hover:text-accent` in the reference: links go red on hover, not blue. */
.familia a:hover { color: var(--f-red); text-decoration-color: currentColor; }

.familia strong, .familia b { font-weight: 700; color: var(--f-ink); }
.familia small { font-size: var(--f-t-sm); }
.familia hr {
	height: 1px;
	border: 0;
	background: var(--f-line);
	margin: var(--f-6) 0;
}
.familia img { max-width: 100%; height: auto; }
.familia figure { margin: 0; }
.familia ::selection { background: var(--f-sky); color: var(--f-ink); }

.familia blockquote {
	margin: var(--f-5) 0;
	padding: var(--f-1) 0 var(--f-1) var(--f-5);
	border-left: 2px solid var(--f-sky);
	font-size: var(--f-t-base);
	color: var(--f-ink);
}

.familia code, .familia kbd, .familia pre { font-family: var(--f-mono); font-size: .9em; }

/* focus – always visible, never removed */
.familia :focus { outline: none; }
.familia :focus-visible {
	outline: 2px solid var(--f-focus);
	outline-offset: 2px;
	border-radius: var(--f-r-xs);
}
/* sky focus only on dark grounds; the promo bar and footer are light grey */
.familia .f-on-ink :focus-visible {
	--f-focus: var(--f-sky);
}

.familia .skip-link {
	position: fixed;
	top: -100px;
	left: var(--f-4);
	z-index: 1000;
	padding: var(--f-2) var(--f-4);
	background: var(--f-ink);
	color: #fff;
	border-radius: 0 0 var(--f-r-sm) var(--f-r-sm);
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	transition: top var(--f-mid) var(--f-ease);
}
.familia .skip-link:focus { top: 0; }

.familia .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Storefront resets we always want */
.familia .site-header,
.familia .site-footer,
.familia #content {
	padding: 0;
}
.familia .site-header,
.familia.woocommerce-active .site-header,
.familia.storefront-full-width-content .site-header {
	background: var(--f-paper);
	border: 0;
	margin: 0;
	padding: 0;
}
.familia .site-content { padding-top: 0; }
/* Storefront/WooCommerce leave empty wrappers above the content; they must not add height. */
.familia .woocommerce-breadcrumb:empty,
.familia .storefront-breadcrumb:empty,
.familia .woocommerce-notices-wrapper:empty,
.familia #content > .col-full > div.woocommerce:empty,
.familia div.woocommerce:empty {
	display: none;
	margin: 0;
	padding: 0;
}
.familia #primary,
.familia .site-main { margin: 0; }
.familia .col-full { box-sizing: border-box; max-width: none; padding: 0; margin: 0; }   /* Storefront's content-box made every 1440px rail 180px wider than the header's */
.familia .storefront-breadcrumb { margin: 0; padding: 0; background: transparent; }
.familia .site-header-cart,
.familia .storefront-handheld-footer-bar,
.familia .site-search,
.familia .site-branding .site-description,
.familia .handheld-navigation { display: none; }
/* Storefront appends a caret to every parent item (`ul.menu li.menu-item-has-children > a::after`);
   the theme uses its own toggle button instead. */
.familia .f-nav .f-mega .f-mega__title::after,
.familia .f-nav .f-mega .f-mega__link::after,
.familia .f-drawer .f-mega .f-mega__title::after,
.familia .f-drawer .f-mega .f-mega__link::after,
.familia .f-nav .f-nav__list .menu-item-has-children > a:not(.f-nav__link)::after,
.familia .f-drawer .f-nav__list .menu-item-has-children > a:not(.f-nav__link)::after { content: none; display: none; }

/* ==================================================================
   04 · LAYOUT
   ================================================================== */

/* The live shop's one container: `w-full mx-auto max-w-[1440px] px-4 md:px-[90px]`.
   16px of side padding below 1024px, 90px from the legacy `md` (1024px) up.
   (It was 768px here before: at tablet widths that left 588px of content
   between 90px gutters – the "not centred / scattered" look the client saw.)
   Every band – header, content blocks, shop views, footer – uses this one
   rail, so their left and right edges line up at every width. */
.f-container {
	width: 100%;
	max-width: var(--f-max);
	margin-inline: auto;
	padding-inline: var(--f-gut);
}

@media (min-width: 1024px) {
	:root { --f-gut: 90px; }
}

/* Main content rail. #content keeps full-bleed ability for patterns. */
.familia #content > .col-full {
	display: block;
}

.familia #primary,
.familia #secondary {
	float: none;
	width: auto;
	margin: 0;
}

.familia.familia-full #primary {
	width: 100%;
}

/* The live shop uses full-width products and an off-canvas filter panel. */
/* No top padding: the legacy title follows the breadcrumb's own pb-2 lg:pb-4. */
.familia.familia-with-filters #content > .col-full {
	max-width: var(--f-max);
	margin-inline: auto;
	padding: 0 var(--f-gut) 56px;
	display: block;
}


/* Full-width views: the page/product content gets its own rail */
.familia.familia-full #content > .col-full {
	max-width: none;
	padding: 0;
}
.familia.familia-full #primary > .site-main > :where(article, .woocommerce-notices-wrapper, .page-header, .entry-content, .comments-area, .not-found, .error-404) {
	width: 100%;
	max-width: var(--f-max);
	margin-inline: auto;
	padding-inline: var(--f-gut);
}

/* generic section wrapper for patterns & templates */
.f-section { padding-block: var(--f-sec); }
.f-section--tint { background: var(--f-paper-2); }
.f-section--ink { background: var(--f-ink); color: rgb(255 255 255 / .82); }

.f-stack > * + * { margin-top: var(--f-4); }
.f-prose { max-width: var(--f-read); }

/* ==================================================================
   05 · BUTTONS, FORMS
   ================================================================== */

.familia .f-btn,
.familia .button,
.familia button,
.familia input[type="button"],
.familia input[type="reset"],
.familia input[type="submit"],
.familia .wp-block-button__link,
.familia .wp-element-button,
.familia .added_to_cart,
.familia .wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--f-2);
	/* The live shop's primary button: h-12, border-2, sky fill, ink label,
	   font-bold, uppercase, rounded-sm, shadow-sm. */
	min-height: 48px;
	padding: .6rem 1.25rem;
	border: 2px solid var(--f-sky);
	border-radius: var(--f-r-xs);
	background: var(--f-sky);
	color: var(--f-ink);
	font-family: var(--f-text);
	font-size: var(--f-t-base);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: 0 1px 2px 0 rgb(var(--f-ink-rgb) / .05);
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition: background-color var(--f-fast) var(--f-ease), color var(--f-fast) var(--f-ease),
		border-color var(--f-fast) var(--f-ease), transform var(--f-fast) var(--f-ease),
		box-shadow var(--f-fast) var(--f-ease);
}
.familia .f-btn:hover,
.familia .button:hover,
.familia button:hover,
.familia input[type="submit"]:hover,
.familia .wp-block-button__link:hover,
.familia .wp-element-button:hover,
.familia .added_to_cart:hover,
.familia .wc-block-components-button:hover {
	/* --primaryButtonHoverColor with --primaryButtonTextHoverColor: the label
	   stays ink on hover in the reference, it does not turn white. */
	background: var(--f-sky-deep);
	border-color: var(--f-sky-deep);
	color: var(--f-ink);
}
.familia .f-btn:active,
.familia .button:active,
.familia button:active { transform: translateY(1px); }

.familia .f-btn[disabled],
.familia .button[disabled],
.familia button[disabled],
.familia .f-btn.disabled {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

/* ink (primary action: add to cart, place order) */
.familia .f-btn--ink,
.familia .button.alt,
.familia .single_add_to_cart_button,
.familia .wp-block-button.is-style-ink .wp-block-button__link,
.familia .wc-block-components-checkout-place-order-button,
.familia .wc-block-cart__submit-button,
.familia .woocommerce-form-login .button,
.familia .woocommerce-form-register .button,
.familia .checkout-button {
	background: var(--f-ink);
	border-color: var(--f-ink);
	color: #fff;
}
.familia .f-btn--ink:hover,
.familia .button.alt:hover,
.familia .single_add_to_cart_button:hover,
.familia .wp-block-button.is-style-ink .wp-block-button__link:hover,
.familia .wc-block-components-checkout-place-order-button:hover,
.familia .wc-block-cart__submit-button:hover,
.familia .woocommerce-form-login .button:hover,
.familia .woocommerce-form-register .button:hover,
.familia .checkout-button:hover {
	background: #2f2416;
	border-color: #2f2416;
	color: #fff;
}

/* sky (marketing CTA) */
.familia .f-btn--sky,
.familia .wp-block-button.is-style-sky .wp-block-button__link {
	background: var(--f-sky);
	border-color: var(--f-sky);
	color: var(--f-ink);
}
.familia .f-btn--sky:hover,
.familia .wp-block-button.is-style-sky .wp-block-button__link:hover {
	background: var(--f-sky-deep);
	border-color: var(--f-sky-deep);
	color: #fff;
}

/* ghost */
.familia .f-btn--ghost,
.familia .wp-block-button.is-style-ghost .wp-block-button__link,
.familia .button.wc-backward,
.familia .woocommerce-message .button,
.familia .woocommerce-info .button {
	background: transparent;
	border-color: var(--f-ink);
	color: var(--f-ink);
}
.familia .f-btn--ghost:hover,
.familia .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.familia .button.wc-backward:hover,
.familia .woocommerce-message .button:hover,
.familia .woocommerce-info .button:hover {
	background: var(--f-ink);
	border-color: var(--f-ink);
	color: #fff;
}
/* Storefront gives notice buttons a faint left border with !important and no padding (made for its green notices):
   our outlined notice button needs all four sides in ink and its own padding. */
.familia .woocommerce-message .button,
.familia .woocommerce-info .button,
.familia .woocommerce-error .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 2px solid var(--f-ink);
	border-left-color: var(--f-ink) !important;
	line-height: 1.2;
}
.familia .woocommerce-message .button.wc-forward::after,
.familia .woocommerce-info .button.wc-forward::after { margin-left: 0; }

/* ghost on dark */
.familia .f-btn--ghost-light,
.familia .wp-block-button.is-style-ghost-light .wp-block-button__link {
	background: transparent;
	border-color: rgb(255 255 255 / .45);
	color: #fff;
}
.familia .f-btn--ghost-light:hover,
.familia .wp-block-button.is-style-ghost-light .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--f-ink);
}

/* quiet text button */
.familia .f-btn--quiet {
	min-height: 0;
	padding: var(--f-1) 0;
	border: 0;
	background: none;
	color: var(--f-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--f-line);
	text-underline-offset: .2em;
}
.familia .f-btn--quiet:hover { background: none; color: var(--f-sky-deep); text-decoration-color: currentColor; }

.familia .f-btn--sm { min-height: 38px; padding: .4rem .85rem; font-size: var(--f-t-sm); }
.familia .f-btn--lg { min-height: 54px; padding: .9rem 1.8rem; font-size: var(--f-t-lg); }
.familia .f-btn--block { width: 100%; }

/* icon-only button */
.familia .f-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--f-r-pill);
	background: transparent;
	color: var(--f-ink);
}
.familia .f-iconbtn:hover { background: var(--f-paper-3); color: var(--f-ink); border-color: transparent; }

.f-icon { flex: none; vertical-align: middle; }

/* ---- form controls ---- */
.familia input[type="text"],
.familia input[type="email"],
.familia input[type="url"],
.familia input[type="password"],
.familia input[type="search"],
.familia input[type="number"],
.familia input[type="tel"],
.familia input[type="date"],
.familia textarea,
.familia select,
.familia .wc-block-components-text-input input,
.familia .wc-blocks-components-select__container {
	/* Reference control: h-12, border-2 border-default-400, rounded-sm,
	   text-base, pl-3, transparent ground. */
	width: 100%;
	min-height: 48px;
	padding: .6rem .75rem;
	border: 2px solid var(--f-default-400);
	border-radius: var(--f-r-xs);
	background-color: transparent;
	box-shadow: none;
	color: var(--f-ink);
	font-family: var(--f-text);
	font-size: var(--f-t-base);
	line-height: 1.4;
	transition: border-color var(--f-fast) var(--f-ease), box-shadow var(--f-fast) var(--f-ease);
	-webkit-appearance: none;
	appearance: none;
}
.familia textarea { min-height: 9rem; }
.familia input::placeholder,
.familia textarea::placeholder { color: var(--f-ink-4); opacity: 1; }

.familia input:focus,
.familia textarea:focus,
.familia select:focus {
	border-color: var(--f-ink);
	box-shadow: 0 0 0 3px rgb(var(--f-sky-rgb) / .45);
	outline: none;
}

.familia select,
.familia .wc-blocks-components-select__select {
	padding-right: 2.2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23140e06' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
}
.familia select[disabled] { background-color: var(--f-paper-2); color: var(--f-ink-4); cursor: not-allowed; }

.familia input[type="checkbox"],
.familia input[type="radio"] {
	width: 1.15rem;
	height: 1.15rem;
	min-height: 0;
	margin: 0;
	border: 1px solid var(--f-ink-3);
	border-radius: var(--f-r-xs);
	background: var(--f-paper);
	accent-color: var(--f-ink);
	-webkit-appearance: auto;
	appearance: auto;
	padding: 0;
	vertical-align: -.15em;
}
.familia input[type="radio"] { border-radius: 50%; }

.familia label { font-size: var(--f-t-base); color: var(--f-ink); }
.familia .form-row label,
.familia .woocommerce-form-row label { display: block; margin-bottom: var(--f-1); font-weight: 500; }
.familia .required { color: var(--f-red); text-decoration: none; border: 0; }

.familia .quantity input.qty {
	width: 5.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ==================================================================
   06 · EYEBROWS, RULES, BADGES, CHIPS, RINGS
   ================================================================== */

.f-eyebrow {
	margin: 0 0 var(--f-2);
	font-family: var(--f-text);
	font-size: var(--f-t-xs);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--f-ink-3);
}
.f-eyebrow--light { color: rgb(255 255 255 / .6); }

/* hairline with a mm-tick run-in: the "measuring" motif */
.f-rule {
	height: 1px;
	background: var(--f-line);
	border: 0;
}
.f-rule--ticks {
	height: 8px;
	background: var(--f-ticks);
	background-position: bottom left;
	border-bottom: 1px solid var(--f-line);
}

.familia-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--f-1);
	pointer-events: none;
}

.familia-badge {
	display: inline-flex;
	align-items: center;
	gap: .25em;
	padding: .3em .55em;
	border-radius: var(--f-r-xs);
	background: var(--f-ink);
	color: #fff;
	font-family: var(--f-text);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.familia-badge--sale { background: var(--f-red-text); color: #fff; }
.familia-badge--new { background: var(--f-sky); color: var(--f-ink); }
.familia-badge--top { background: var(--f-paper); color: var(--f-ink); box-shadow: inset 0 0 0 1px var(--f-ink); }
.familia-badge--out { background: var(--f-paper-3); color: var(--f-ink-3); }
.familia-badge--rx { background: var(--f-ink); color: var(--f-sky); }

/* WooCommerce's own flash, if a plugin prints it */
.familia span.onsale,
.familia .wc-block-components-product-sale-badge {
	position: static;
	min-height: 0;
	min-width: 0;
	padding: .3em .55em;
	border-radius: var(--f-r-xs);
	background: var(--f-red);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
}

.f-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--f-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.f-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--f-1);
	padding: .35rem .8rem;
	border: 1px solid var(--f-line);
	border-radius: var(--f-r-pill);
	background: var(--f-paper);
	color: var(--f-ink);
	font-size: var(--f-t-sm);
	font-weight: 500;
	text-decoration: none;
}
.f-chip:hover { border-color: var(--f-ink); background: var(--f-ink); color: #fff; }
.f-chip[aria-current="page"],
.f-chip.is-active { border-color: var(--f-ink); background: var(--f-ink); color: #fff; }

/* concentric lens ring – decorative motif */
.f-ring {
	position: relative;
	aspect-ratio: 1;
	width: min(320px, 70%);
	border: 1px solid rgb(var(--f-ink-rgb) / .25);
	border-radius: 50%;
}
.f-ring::before,
.f-ring::after {
	content: "";
	position: absolute;
	inset: 12%;
	border: 1px solid rgb(var(--f-ink-rgb) / .18);
	border-radius: 50%;
}
.f-ring::after {
	inset: 30%;
	border-color: transparent;
	background: radial-gradient(circle at 35% 30%, rgb(var(--f-sky-rgb) / .65), rgb(var(--f-sky-rgb) / .12) 70%);
}
.f-on-ink .f-ring { border-color: rgb(255 255 255 / .28); }
.f-on-ink .f-ring::before { border-color: rgb(255 255 255 / .18); }

/* price presentation, shared by cards, single, cart */
.familia .price,
.familia .woocommerce-Price-amount {
	font-family: var(--f-text);
	font-variant-numeric: tabular-nums;
	color: var(--f-ink);
}
.familia .price del,
.familia .wc-block-components-product-price del {
	margin-right: .35em;
	color: var(--f-ink-4);
	font-weight: 400;
	text-decoration: line-through;
}
.familia .price ins,
.familia .wc-block-components-product-price ins {
	background: none;
	color: var(--f-red);
	font-weight: 500;
	text-decoration: none;
}
.familia .price .woocommerce-price-suffix { color: var(--f-ink-3); font-size: var(--f-t-sm); }

/* ==================================================================
   09 · CONTENT BLOCKS
   ------------------------------------------------------------------
   The home page and CMS pages are the legacy CMS blocks (text, text with
   image, FAQ, images/carousel, product lists) – styled in
   familia-shell.css §09. The invented home patterns of the first theme
   pass (hero, tiles, USP strip, brand strip, CTA, salons teaser) were
   removed on 2026-09-23: the old shop has none of them.
   ================================================================== */

/* block editor alignment inside our full-width rail */
.familia .entry-content > .alignwide,
.familia .site-main > .alignwide,
.familia .familia-home > .alignwide {
	max-width: var(--f-max);
	margin-inline: auto;
	padding-inline: var(--f-gut);
}
.familia .entry-content > .alignfull,
.familia .familia-home > .alignfull { max-width: none; margin-inline: 0; }
.familia .wp-block-columns { gap: var(--f-5); margin-bottom: 0; }

/* legacy productListBanner → [familia_products]. The legacy block is
   `max-w-[1440px] px-4 md:px-[90px] pb-4 lg:pb-20` with the heading in
   `semantic-html no-bottom-spacing mb-16`; the cards are the standard
   product card and grid of familia-shop.css (as on category pages). */
.familia .familia-products { padding-block: 0 16px; }
@media (min-width: 1024px) { .familia .familia-products { padding-bottom: 80px; } }
.familia :is(.entry-content, .familia-home) .familia-products > .wp-block-group__inner-container > .wp-block-heading { margin-bottom: 64px; }
.familia .familia-products .woocommerce { margin: 0; }
.familia-products .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--f-5) var(--f-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 720px) { .familia-products .wc-block-grid__products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.familia-products .wc-block-grid__product {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
}
.familia-products .wc-block-grid__product-image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--f-paper-2);
	border-radius: var(--f-r);
	padding: var(--f-3);
}
.familia-products .wc-block-grid__product-title {
	font-family: var(--f-display);
	font-size: var(--f-t-base);
	font-weight: 400;
	color: var(--f-ink);
	margin-block: var(--f-2) var(--f-1);
}
.familia-products .wc-block-grid__product-price { font-size: var(--f-t-base); font-weight: 500; }

/* ==================================================================
   10-14 · SHOP VIEWS  →  assets/css/familia-shop.css
   ------------------------------------------------------------------
   Shop archive, product card, single product, lens configurator, cart,
   checkout and my-account rules moved out of this file so that the shop
   views can be rebuilt against design-reference/ without touching the
   shared layer. familia.css keeps tokens, resets, typography, buttons and
   forms; familia-shell.css keeps the header and footer.
   ================================================================== */

/* ==================================================================
   15 · PAGES, SEARCH, 404, WIDGETS, MOTION, PRINT
   ================================================================== */

.familia.single-post .entry-header,
.familia.search-results .page-header,
.familia.archive .page-header {
	margin-bottom: var(--f-5);
	padding-bottom: var(--f-4);
	border-bottom: 1px solid var(--f-line);
}
.familia.page .entry-title,
.familia.single-post .entry-title,
.familia .page-header .page-title { font-size: var(--f-t-h1); margin: 0; }
/* CMS pages use the full container like the legacy CMS blocks (familia-shell.css §09);
   only blog posts keep a reading column. */
.familia.single-post .entry-content {
	max-width: var(--f-read);
	padding-bottom: var(--f-8);
	font-size: var(--f-t-md);
	color: var(--f-ink-2);
}
/* WooCommerce block pages (cart, checkout) are full width; Storefront's alignwide negative
   margins are relative to a narrow reading column and would push them off-canvas. */
.familia.woocommerce-page .entry-content { max-width: none; padding-bottom: var(--f-8); }
.familia.woocommerce-page .entry-content > .alignwide,
.familia.woocommerce-page .entry-content > .alignfull,
.familia.woocommerce-page .entry-content > .wp-block-woocommerce-cart,
.familia.woocommerce-page .entry-content > .wp-block-woocommerce-checkout {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	width: auto;
}
.familia.page .entry-content > h2,
.familia.single-post .entry-content > h2 { margin-top: var(--f-6); }
.familia.page .entry-content > h3 { margin-top: var(--f-5); }
.familia .entry-content ul,
.familia .entry-content ol { padding-left: 1.2em; margin-bottom: var(--f-4); }
.familia .entry-content li { margin-bottom: var(--f-1); }
.familia .entry-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--f-4); }
.familia .entry-content th,
.familia .entry-content td { padding: .6rem var(--f-2); border-bottom: 1px solid var(--f-line-2); text-align: left; }
.familia .entry-content img { border-radius: var(--f-r); }
.familia.page-template-template-fullwidth .entry-content { max-width: none; }

/* frequently used on CMS pages: FAQ accordions from core details blocks */
.familia .wp-block-details {
	padding: var(--f-3) var(--f-4);
	border: 1px solid var(--f-line);
	border-radius: var(--f-r);
	margin-bottom: var(--f-2);
	background: var(--f-paper);
}
.familia .wp-block-details summary { font-family: var(--f-display); font-size: var(--f-t-h4); font-weight: 500; color: var(--f-ink); cursor: pointer; }

/* posts list / search results */
.familia.search-results article,
.familia.archive article,
.familia.blog article {
	padding-bottom: var(--f-5);
	margin-bottom: var(--f-5);
	border-bottom: 1px solid var(--f-line-2);
}
.familia article .entry-title { font-size: var(--f-t-h3); }
.familia .entry-meta { font-size: var(--f-t-sm); color: var(--f-ink-3); }
.familia .nav-links { display: flex; justify-content: space-between; gap: var(--f-3); font-weight: 500; }

/* 404 – legacy: `flex flex-col items-center mt-20 lg:mt-18`, h1 `text-32 lg:text-44 font-semibold
   leading-none`; the search field and home link under it are the only additions. */
.f-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: 80px 96px;
	text-align: center;
}
@media (min-width: 1280px) { .f-404 { padding-top: 72px; } }
.familia .f-404__title { margin: 0 0 32px; font-size: 32px; font-weight: 400; line-height: 1; }
@media (min-width: 1280px) { .familia .f-404__title { font-size: 44px; } }
.familia .f-404 .f-404__search { width: 100%; max-width: 360px; margin: 0 0 16px; }   /* the shell's .f-search__form margin reset won before */
.familia .f-404__search input.f-search__input { border: 0; background: var(--f-default-100); }   /* the grey filled field of the header search */
.f-404__home { margin: 0; font-weight: 500; }
.familia .f-404__home a { display: inline-block; padding: 10px 4px; }   /* 40px touch target */

/* generic widgets (footer/sidebar on plain pages) */
.familia .widget { margin-bottom: var(--f-5); font-size: var(--f-t-base); }
.familia .widget_shopping_cart_content .total { border-top: 1px solid var(--f-line); padding-top: var(--f-2); }
.familia .widget ul.product_list_widget li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--f-2); padding: var(--f-2) 0; border-bottom: 1px solid var(--f-line-2); }
.familia .widget ul.product_list_widget li img { width: 56px; margin: 0; border-radius: var(--f-r-sm); background: var(--f-paper-2); }
.familia .widget ul.product_list_widget li a { font-weight: 500; color: var(--f-ink); text-decoration: none; }

/* loading state used by the theme's JS */
.familia [data-loading="true"] { opacity: .55; pointer-events: none; }

.f-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* reduced motion – kill transforms and transitions, keep opacity */
@media (prefers-reduced-motion: reduce) {
	.familia *,
	.familia *::before,
	.familia *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.familia .familia-tile:hover .familia-tile__media img,
	.familia ul.products li.product:hover .familia-card__media img { transform: none; }
	.f-drawer__panel,
	.familia.familia-with-filters #secondary { transition: none; }
}

/* contrast / forced colors */
@media (forced-colors: active) {
	.familia .f-btn,
	.familia .button { border: 1px solid ButtonText; }
	.familia-badge { border: 1px solid CanvasText; }
}

@media print {
	.familia .site-header,
	.familia .site-footer,
	.familia .f-drawer,
	.familia .familia-sticky,
	.familia #secondary,
	.familia .f-toolbar,
	.familia .related,
	.familia .up-sells { display: none !important; }
	.familia { background: #fff; }
	.familia a { text-decoration: underline; }
}

/* Omnisend pop-ups (the "Laimės ratas" wheel, Familia_Tracking::wheel()): the theme's generic button look (2px sky
   border, 48px height, padding) must not reach Omnisend's own close "×" – it stays the plain cross it is on familia.lt */
.familia [id^="omnisend-form-"] button[class$="-close-action"] {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}