/*
 * Cosmetsy's parent style.css hard-codes demo colours on .klbtype-1 blocks
 * (green notification bar, beige/mint sections, pink footer). Point them at the Femmora tokens
 * (femmora-tokens.css) instead. Roles come from the design agent.
 */

.site-global-notification.klbtype-1 {
	color: var(--color-notification-text);
	background-color: var(--color-notification-bar);
}

.module-products.klbtype-1,
.module-posts.klbtype-1 {
	background-color: var(--fm-surface-alt);
}

.site-footer .footer-newsletter.klbtype-1,
.site-footer .footer-widgets.klbtype-1,
.site-footer .subfooter.klbtype-1 {
	background-color: var(--fm-surface-alt);
}

.site-footer .footer-widgets .site-footer--wrapper.klbtype-1,
.site-footer .subfooter .site-footer--wrapper.klbtype-1 {
	border-color: var(--fm-line);
}

@media screen and (min-width: 62rem) {
	.site-footer .footer-instagram.klbtype-1::before {
		background-color: var(--fm-surface-alt);
	}
}

/*
 * Cosmetsy's Elementor page settings print per-page colours with defaults even when unset
 * (uploads/elementor/css/post-N.css: body.elementor-page-N ... black top bar, white footer).
 * These selectors are one step more specific, so the tokens win on every Elementor page.
 */
html body .site-global-notification.site-global-notification {
	color: var(--color-notification-text);
	background-color: var(--color-notification-bar);
}

html body .site-header .site-topbar.site-topbar {
	background-color: var(--color-topbar-background);
}

html body .site-header .site-topbar .site-menu .menu .menu-item a.menu-link,
html body .site-header .site-topbar .site-menu .menu .menu-item > a {
	color: var(--color-topbar-color);
}

html body .site-footer .footer-widgets.footer-widgets,
html body .site-footer .subfooter.subfooter {
	background-color: var(--fm-surface-alt);
}

/*
 * Headings, product names and prices in the brand navy (--fm-text-brand), one colour on every page
 * (Cosmetsy leaves them black and paints page titles with --color-primary).
 * Titles on photos (hero slider, shop header with an image) keep their light text.
 */
h1, h2, h3, h4, h5, h6,
.price,
.shop-page-header.style-2 .container .row .shop-page-header--title .entry-title {
	color: var(--fm-text-brand);
}

/* Every Cosmetsy block that sets white text over a photo (found in base.css). */
.slider-content :is(h1, h2, h3, h4, h5, h6),
.image-text:is(.style-9, .style-10, .style-12) .module-block.text :is(h1, h2, h3, h4, h5, h6),
.image-text.style-9 .comment-box :is(h1, h2, h3, h4, h5, h6),
.banner-item.light :is(h1, h2, h3, h4, h5, h6),
.text-white :is(h1, h2, h3, h4, h5, h6),
.shop-page-header:not(.style-2) :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* Cosmetsy Core prints a fixed pink blog page header (#f9f3f2) inline; match the shop header. */
html body .klb-blog-breadcrumb .container {
	background-color: var(--fm-surface-alt);
}

/*
 * Shop (design review 2026-10-08). Palette roles from femmora-tokens.css.
 */

/* Product page: add to cart is a primary button (#152b56), accent only on hover. */
.single_add_to_cart_button {
	background-color: var(--fm-button);
	color: var(--fm-button-text);
}

.single_add_to_cart_button:hover,
.single_add_to_cart_button:focus-visible {
	background-color: var(--fm-button-hover);
	color: var(--fm-button-text);
}

/* Stock label: no green in the palette. The words carry the meaning; out of stock gets a quiet fill. */
.product-single .product-details .product-price-wrapper .stock {
	color: var(--fm-text-brand);
	border-color: var(--fm-line);
}

.product-single .product-details .product-price-wrapper .stock.out-of-stock {
	color: var(--fm-accent);
	background-color: var(--fm-surface-alt);
}

/* Share and follow buttons in palette colours instead of each network's own colour. */
.site-social ul.style-2 li a[class],
.site-social ul.style-3 li a[class] {
	color: var(--fm-text-brand);
	background-color: var(--fm-surface-alt);
}

.site-social ul.style-2 li a[class]:hover,
.site-social ul.style-3 li a[class]:hover {
	background-color: var(--fm-surface-highlight);
}

/*
 * Product card overlay: Cosmetsy has icon slots only. For products that cannot be added to the cart
 * (out of stock) WooCommerce prints a text button ("Daugiau") that spills over the photo.
 * The photo and the name already open the product, so that button is dropped.
 */
ul.products .product .product-content .product-media .entry-media .product-action a.button:not(.add_to_cart_button) {
	display: none;
}

/* Cart: the coupon button was an unstyled browser button. */
.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr td.actions .actions--wrapper .coupon .button {
	color: var(--fm-text-brand);
	background-color: transparent;
	border: 1px solid var(--fm-text-brand);
}

.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr td.actions .actions--wrapper .coupon .button:hover {
	color: var(--fm-button-text);
	background-color: var(--fm-button);
}

/*
 * Cart on phones and tablets: Cosmetsy hides the price and subtotal columns (display: none !important)
 * and expects a price line its old cart template no longer prints, so a line's amount was nowhere to
 * be seen. Each line becomes a small grid: photo | name, unit price, quantity + line total.
 */
@media screen and (max-width: 62rem) {
	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table,
	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody {
		display: block;
		width: 100%;
	}

	/* The coupon / update row keeps the full width once the table is a block. */
	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr:not(.cart_item),
	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr:not(.cart_item) td {
		display: block;
		width: 100%;
	}

	/* The column headings no longer match the stacked lines; keep them for screen readers only. */
	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr.cart_item {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name remove"
			"thumb price price"
			"thumb qty subtotal";
		column-gap: 12px;
		row-gap: 8px;
		align-items: center;
		padding: 16px 0;
		border-bottom: 1px solid var(--fm-line);
	}

	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr.cart_item td::before {
		content: none;
	}

	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr.cart_item td.product-thumbnail { grid-area: thumb; align-self: start; }
	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr.cart_item td.product-name { grid-area: name; }
	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr.cart_item td.product-quantity { grid-area: qty; }

	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr.cart_item td.product-remove {
		grid-area: remove;
		align-self: start;
		justify-self: end;
	}

	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr.cart_item td.product-remove a {
		position: static;
		margin: 0;
	}

	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr.cart_item td.product-price {
		display: block !important;
		grid-area: price;
		font-size: 0.875rem;
		color: var(--fm-accent);
	}

	.cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table tbody tr.cart_item td.product-subtotal {
		display: block !important;
		grid-area: subtotal;
		font-weight: 600;
		color: var(--fm-text-brand);
		text-align: right;
	}
}

/*
 * Home header (style-4, logo in the middle): the shop mega menu is clamped to the left header
 * column (~770 px), so the 4th column wrapped under the 1st. Let it take the width of its columns.
 */
/* Must beat Cosmetsy's own `.site-header.header-transparent.style-4 … li.mega-menu > .sub-menu { width: 200% }`. */
.site-header.header-transparent.style-4 .primary-menu.horizontal-menu .menu li.mega-menu.mega-menu > .sub-menu {
	width: max-content;
	max-width: calc(100vw - 2 * 6.5rem);
	flex-wrap: nowrap;
}

/*
 * Cosmetsy image-text widgets always print a "5/5" testimonial box. The demo ones were invented
 * (Alice, Daisy) and the client has no reviews yet: never show them.
 */
.elementor-widget-cosmetsy-image-text-2 .comment-box,
.elementor-widget-cosmetsy-image-text-4 .comment-box {
	display: none;
}

/*
 * Pages review after the Lithuanian copy (design agent, 2026-10-08).
 */

/* Header quick links ("Norų sąrašas", "Prisijungti", "Paieška", "Krepšelis") stay on one line. */
.site-header .quick-button,
.site-header .quick-button a {
	white-space: nowrap;
}

/* Home: two sections kept the demo's sand and mint backgrounds; use the palette's quiet surface. */
html body .elementor-34 .elementor-element.elementor-element-248610c:not(.elementor-motion-effects-element-type-background),
html body .elementor-34 .elementor-element.elementor-element-903cd33:not(.elementor-motion-effects-element-type-background) {
	background-color: var(--fm-surface-alt);
}

/*
 * Page headers: no demo photo and no pink, the same quiet block as the cart and news headers.
 * (Wishlist: Elementor breadcrumb with the theme's default photo; Contacts: Elementor pink #f9f3f2.)
 */
html body .shop-page-header.with-background .container {
	background-image: none !important;
	background-color: var(--fm-surface-alt);
}

html body .shop-page-header.with-background .container::before,
html body .shop-page-header.with-background .container::after {
	display: none;
}

/* Cosmetsy paints everything in a photo header white with !important. */
html body .shop-page-header.style-2.with-background .container * {
	color: var(--fm-text-brand) !important;
}

html body .elementor-1190 .elementor-element.elementor-element-3178374 .shop-page-header .container {
	background-color: var(--fm-surface-alt);
}

/* Wishlist table: stock words in palette colours, like on the product page. */
.klbwl-item--stock .stock {
	color: var(--fm-text-brand);
}

.klbwl-item--stock .stock.out-of-stock {
	color: var(--fm-accent);
}

/*
 * Product carousels: Cosmetsy lets the cards run past the content width to the right edge
 * ("overflow-enable"), so the row looked pushed to one side (owner). Keep them inside the centred
 * container like the text above; the arrows still scroll.
 */
.module-products .site-slider.overflow-enable .slick-list {
	overflow: hidden;
}

/*
 * Typography floor (design agent, 2026-10-08): nothing a visitor reads is smaller than 12px.
 * Cosmetsy sets labels, buttons, post meta and badges at 10–11px. Sizes for buttons, product
 * category labels and form fields come from femmora-tokens.css; the rest is fixed here.
 */
.f-size-10,
.f-size-11 {
	font-size: var(--fm-text-min);
}

@media (min-width: 62rem) {
	.df-size-10,
	.df-size-11 {
		font-size: var(--fm-text-min);
	}
}

html body .site-social ul.default li a .social-text,
html body .site-social ul.default li a .social-label,
html body .woocommerce-pagination ul li a.prev.page-numbers,
html body .woocommerce-pagination ul li a.next.page-numbers,
html body .site-pagination ul li .prev,
html body .site-pagination ul li .next,
html body .cart-page-wrapper .cart-form-wrapper .woocommerce-cart-form table thead tr th,
html body .module--slider .slider-item .slider-content .entry-subtitle,
html body .module--category .module--inner .category-list li .category-detail .button-text,
html body .image-text.style-7 .module-block .entry-subtitle,
html body .module-contact .module-block.text .entry-subtitle,
html body .site-post-archive .post.post-single .entry-wrapper .post-tags span,
html body .site-post-archive .post.post-single .entry-wrapper .social-share.bottom ul li a .social-text,
html body .site-footer .footer-newsletter .site-footer--wrapper .site-newsletter .entry-subtitle,
html body .post-comments .comment-list .comment-body .reply a,
html body .klb-product-time-countdown .expired-text,
html body .single-product .cosmetsy-accordion-opener,
html body .comment-box--header .stars,
html body .badge.hot,
html body .site-header .quick-button.mini-cart .woo-mini-cart--body .woocommerce-mini-cart-item .remove,
html body .entry-meta,
html body .entry-meta a,
html body .entry-category a,
html body .site-footer .footer-newsletter .site-footer--wrapper .site-newsletter .entry-subtitle.klbtype-1,
html body .elementor-925 .elementor-element.elementor-element-7d85233 .elementor-heading-title {
	font-size: var(--fm-text-min);
}

/* Cart count: a 12px number needs an 18px circle. */
html body .site-header .quick-button.mini-cart .cart-link .cart-count,
html body .site-header .quick-button.mini-cart .cart-link span.cart-count-icon {
	min-width: 1.125rem;
	height: 1.125rem;
	font-size: var(--fm-text-min);
}

/*
 * Tap targets on phones and tablets: every control a thumb uses is at least 44px high (and icon
 * buttons 44px wide). The look stays the same; only the hit area grows.
 */
@media screen and (max-width: 62rem) {
	/* Header icons (account, search, cart) */
	html body .site-header .quick-button > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* Off-canvas menu lines */
	html body .site-offcanvas .menu .menu-item > a,
	html body .site-offcanvas .sub-menu .menu-item > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* Breadcrumbs */
	html body .woocommerce-breadcrumb a,
	html body .breadcrumb-menu li a {
		display: inline-block;
		padding-block: 6px;
	}

	/* Product card: quick view is a desktop pattern; on a phone the card itself opens the product. */
	html body .products .product .product-content .product-media .entry-media .product-action a.quickview-button {
		display: none;
	}

	html body .products .product .product-content .product-media .entry-media .product-action a {
		flex: none;
		width: 44px;
		height: 44px;
	}

	/* Small links above product names and in post meta */
	html body .entry-category a,
	html body .entry-meta a {
		display: inline-block;
		padding-block: 8px;
	}

	/* Footer menus and text widgets */
	html body .site-footer .menu .menu-item > a {
		display: inline-block;
		padding-block: 12px;
	}

	/* Social links */
	html body .site-social ul.icon li a,
	html body .site-social ul.icon.dark li a,
	html body .product-single .product-details .product-actions .product-share ul li a {
		width: 44px;
		height: 44px;
	}

	html body .site-social ul.default li a {
		min-height: 44px;
	}

	html body .site-social ul.text li a {
		display: inline-block;
		padding-block: 13px;
	}

	/* Product page */
	html body .woocommerce-tabs ul.tabs li a {
		display: inline-block;
		padding-block: 12px;
	}

	html body .product-details .product-actions a.klbwl-btn {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	html body .product_meta a {
		display: inline-block;
		padding-block: 4px;
	}

	html body .quantity input.qty {
		min-width: 44px;
	}

	/* Shop: pagination, price filter, sorting, category filter list */
	html body .woocommerce-pagination ul li > *,
	html body .site-pagination ul li > * {
		min-width: 44px;
		min-height: 44px;
	}

	html body .price_slider_amount .button {
		min-height: 44px;
		padding-inline: 16px;
	}

	html body .woocommerce-ordering select,
	html body .search-form input,
	html body .search-form button {
		min-height: 44px;
	}

	html body .widget .widget-body .widget-checkbox-list ul li a,
	html body .widget.widget_product_status ul li a {
		display: block;
		padding-block: 12px;
	}

	/* Category chips under the shop title */
	html body .shop-page-header--categories ul li a {
		min-height: 44px;
	}

	/* "Į krepšelį" text link under the price in product cards */
	html body ul.products .product-switcher--item a.button {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* Category pages lost the sub-category buttons under the title; the 100px desktop padding was sized for them. */
@media screen and (min-width: 62rem) {
	body.tax-product_cat .shop-page-header.style-2 .container .row {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

/*
 * Shop filter bar on phones: form fields are 16px now, so the sort field needs the room.
 * "Filtrai" takes its own width and the sort field the rest; it may shrink, never push the page wider.
 */
@media screen and (max-width: 62rem) {
	html body .site-shop--filterbar {
		grid-template-columns: auto minmax(0, 1fr);
	}

	html body .site-shop--filterbar .product-result--sort,
	html body .site-shop--filterbar .woocommerce-ordering {
		min-width: 0;
	}

	html body .site-shop--filterbar .woocommerce-ordering select {
		width: 100%;
		max-width: 100%;
		padding-right: 2.25rem;
		text-overflow: ellipsis;
	}
}

/* Notification bar is a link to Kontaktai now: give it the 44px hit area on phones too. */
@media screen and (max-width: 62rem) {
	html body .site-global-notification a {
		display: inline-block;
		padding-block: 4px;
	}
}