/* Sitewide header + footer — loaded on every page (see
   includes/class-astra-chrome-override.php), not just the Homepage v2
   template. Self-contained: does not rely on the .lsv-homepage-v2 body
   class that only the homepage template adds, since these rules must work
   on every Astra-rendered page too. */

.lsv-header,
.lsv-footer {
	font-family: 'Roboto', Arial, sans-serif;
}
.lsv-header a,
.lsv-footer a {
	text-decoration: none;
	color: inherit;
}
.lsv-header img,
.lsv-footer img {
	max-width: 100%;
	display: block;
}

/* ---- Header ---- */
.lsv-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.lsv-topbar {
	background: #1A5E63;
	color: #fff;
	font-size: 13px;
}
.lsv-topbar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 6px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
.lsv-topbar-contact a,
.lsv-topbar-contact span {
	color: #fff;
	margin-right: 16px;
}
.lsv-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 19px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.lsv-logo {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.lsv-header .lsv-logo-img {
	height: 48px;
	width: auto;
}
.lsv-mainnav {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	flex: 1;
}
.lsv-mainnav > a {
	font-weight: 600;
	color: #222;
}
.lsv-mainnav > a:hover {
	color: #1A5E63;
}
.lsv-search {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
}
.lsv-search input {
	border: none;
	padding: 8px 12px;
	width: 220px;
	font-family: inherit;
}
.lsv-search button {
	border: none;
	background: none;
	padding: 8px 12px;
	cursor: pointer;
}
.lsv-nav-icons {
	display: flex;
	gap: 16px;
	align-items: center;
	font-size: 20px;
}
.lsv-cart {
	position: relative;
}
.lsv-cart-count {
	position: absolute;
	top: -6px;
	right: -10px;
	background: #E08D79;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 50%;
	width: 17px;
	height: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---- Mobile menu toggle (hidden on desktop) ---- */
.lsv-menu-toggle,
.lsv-mainnav-contact {
	display: none;
}

/* ---- Footer ---- */
.lsv-footer {
	background: #12363a;
	color: #cfe4e2;
}
.lsv-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 20px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
}
/* The "Produkti" column (originally track 2) was removed - keep Uzņēmums and
   Kontakti in their original tracks (3 and 4) instead of letting the grid
   pull them left, so the rest of the footer's layout is unchanged. */
.lsv-footer-inner > .lsv-footer-col:nth-child(2) {
	grid-column: 3;
}
.lsv-footer-inner > .lsv-footer-col:nth-child(3) {
	grid-column: 4;
}
/* White-lettered copy of the header logo (labi-svari-logo-light.png) - the
   dark-teal original disappears on the footer's dark green. */
.lsv-footer .lsv-footer-logo {
	width: 220px;
	height: auto;
	margin-bottom: 14px;
}
.lsv-footer-col h4 {
	color: #fff;
	font-size: 14px;
	margin-bottom: 12px;
}
.lsv-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
}
.lsv-footer-col a:hover {
	color: #fff;
}
.lsv-footer-bottom {
	border-top: 1px solid rgba(255,255,255,.15);
	padding: 16px 20px;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	font-size: 13px;
}

/* ---- WooCommerce archive banner (shop/category/tag) ----
   Astra's own banner (.ast-archive-entry-banner), customized via the
   Customizer with a hardcoded background-color - overridden here to match
   the footer's dark green instead of editing theme mod DB values, and its
   breadcrumb ("Home » Galda svari") hidden per the "match footer color,
   drop the breadcrumb" request. Scoped to [data-post-type="product"] only,
   not blog/page banners, which keep Astra's defaults. */
.ast-archive-entry-banner[data-post-type="product"][data-banner-background-type="custom"] {
	background-color: #12363a !important;
}
.ast-archive-entry-banner[data-post-type="product"] .ast-breadcrumbs-wrapper {
	display: none;
}

/* Same banner on our own page templates (includes/page-banner.php) - Astra
   only prints its .ast-archive-entry-banner[data-post-type="product"]
   rules on product archives, so the ones that matter are repeated here. */
.lsv-page-banner {
	background: #12363a;
	/* Astra only prints the banner's flex rules on some views (not on 404). */
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	min-height: 134px;
}
.lsv-page-banner .ast-container {
	width: 100%;
}
/* Satura lapa: title lined up with its 800px reading column
   (content-page.css .lsv-content-page: 840px box, 20px gutters). */
.lsv-page-banner-narrow .ast-container {
	max-width: 840px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
/* Product archives: Astra zeroes the banner container's side padding
   (`.ast-archive-entry-banner[data-post-type="product"] .ast-container`), so
   below 1240px the title touched the screen edge (0px on phones) while our
   page banners and the content keep a 20px gutter. Same box as
   .ast-container everywhere else: 1240px with 20px padding. */
.ast-archive-entry-banner[data-post-type="product"] .ast-container {
	max-width: 1240px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
.lsv-page-banner h1 {
	color: #fff;
	font-weight: 600;
	font-size: 36px;
	font-size: 2.25rem;
	line-height: 1.4em;
	margin: 0;
}

/* Astra's default #primary top/bottom spacing (64px, meant for blog/page
   content) leaves an oversized gap between this banner and the toolbar row
   below it - tightened only where the banner appears, so blog/page spacing
   elsewhere is untouched. */
.ast-archive-entry-banner[data-post-type="product"] + #content #primary {
	margin-top: 24px;
}

/* An Astra Addon customizer stylesheet caps the shop "sort by" dropdown at
   max-width:160px, sized for short English option labels ("Default
   sorting") - too narrow for our longer Latvian ones, so the custom arrow
   icon overlaps the option text. Let it size to its content instead. */
.woocommerce-ordering select.orderby {
	max-width: none !important;
	width: auto !important;
}

/* ---- Responsive ---- */
/* Below ~1050px the logo + links + search + icons no longer fit one row and
   used to wrap into 3-4 rows (a 335px sticky header on phones). Instead:
   row 1 = hamburger | logo | account + cart, row 2 = full-width search,
   links in a panel the hamburger opens. The topbar's phone/e-mail move
   into that panel. */
@media (max-width: 1024px) {
	.lsv-topbar {
		display: none;
	}
	.lsv-nav-inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"toggle logo icons"
			"search search search"
			"nav nav nav";
		align-items: center;
		gap: 10px 14px;
		padding: 14px 16px 10px;
	}
	.lsv-menu-toggle {
		grid-area: toggle;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 8px;
		margin: 0;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}
	/* Astra styles every <button> (blue fill on hover/focus, shadow). */
	.lsv-header .lsv-menu-toggle,
	.lsv-header .lsv-menu-toggle:hover,
	.lsv-header .lsv-menu-toggle:focus,
	.lsv-header .lsv-menu-toggle:active {
		background: transparent;
		box-shadow: none;
		color: inherit;
	}
	.lsv-header .lsv-menu-toggle:focus-visible {
		outline: 2px solid #1A5E63;
		outline-offset: 2px;
	}
	.lsv-menu-toggle span {
		display: block;
		height: 2px;
		width: 100%;
		background: #1A5E63;
		border-radius: 2px;
		transition: transform .2s, opacity .2s;
	}
	.lsv-menu-open .lsv-menu-toggle span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.lsv-menu-open .lsv-menu-toggle span:nth-child(2) {
		opacity: 0;
	}
	.lsv-menu-open .lsv-menu-toggle span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
	.lsv-logo {
		grid-area: logo;
	}
	.lsv-header .lsv-logo-img {
		height: 36px;
	}
	.lsv-nav-icons {
		grid-area: icons;
	}
	.lsv-search {
		grid-area: search;
	}
	.lsv-search input {
		width: 100%;
		min-width: 0;
		flex: 1;
	}
	.lsv-mainnav {
		grid-area: nav;
		display: none;
		flex-direction: column;
		gap: 0;
		border-top: 1px solid #eee;
		margin: 0 -16px -10px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}
	.lsv-menu-open .lsv-mainnav {
		display: flex;
	}
	.lsv-mainnav > a {
		padding: 14px 16px;
		border-bottom: 1px solid #eee;
		font-size: 16px;
	}
	.lsv-mainnav-contact {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 14px 16px;
		background: #f4f8f8;
		font-size: 14px;
	}
	.lsv-mainnav-contact a {
		color: #1A5E63;
	}
}

@media (max-width: 900px) {
	.lsv-footer-inner {
		grid-template-columns: 1fr 1fr;
	}
	.lsv-footer-inner > .lsv-footer-col:nth-child(2),
	.lsv-footer-inner > .lsv-footer-col:nth-child(3) {
		grid-column: auto;
	}
}

@media (max-width: 560px) {
	.lsv-footer-inner {
		grid-template-columns: 1fr;
	}
	.lsv-footer-inner > .lsv-footer-col:nth-child(2),
	.lsv-footer-inner > .lsv-footer-col:nth-child(3) {
		grid-column: auto;
	}
}

/* Country field (checkout, My Account addresses). The shop sells to Latvia
   only, so WooCommerce renders a one-option native select. Astra's floating
   label styles pad it 23.2px from the top like the text inputs, but its label
   sits above the box, not inside, and a select clips its text to the content
   box: "Latvija" showed as a row of dots. Centre it instead. With nothing to
   choose, drop the arrow and the click too.
   Prefix copied from Astra Pro's woo-modern-input.min.css, plus one more
   class to outrank its .form-row.ast-animate-input select rule. */
body:not(.cartflows-canvas):not(.cartflows-default):not(.cartflows-instant-checkout) .woocommerce form .form-row select.country_to_state.country_to_state--single {
	padding-top: 0;
	padding-bottom: 0;
	background-image: none;
	pointer-events: none;
}

/* VAT number field hint "Piemēram, LV40001234567" (checkout-vat-field.php) -
   a quiet note under the field, not body text. */
.woocommerce form .form-row#billing_vat_number_field .description {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: #64748b;
}

/* WooCommerce notices on our own templates (lsv_shop_notices(),
   includes/shop-pages.php) - in the 1200px content column. */
.lsv-notices {
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 24px auto 0;
	padding: 0 20px;
}
.lsv-content-page .lsv-notices,
.lsv-finder .lsv-notices {
	margin: 0 0 24px;
	padding: 0;
	max-width: none;
}

/* WooCommerce notices sitewide (add to cart, errors, info) in site colours
   instead of Astra's orange top rule and global blue button. No outline when
   WooCommerce moves focus to the notice for screen readers - it's a
   programmatic focus, not keyboard navigation. `body` outranks WooCommerce's
   inline accent colour, which is printed after this stylesheet. */
body .woocommerce-message,
body .woocommerce-info {
	border-top-color: #2B716B;
}
body .woocommerce-message::before,
body .woocommerce-info::before {
	color: #2B716B;
}
.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info):focus,
.woocommerce-notices-wrapper:focus {
	outline: none;
}
body .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
	background-color: #2B716B;
	border: 1px solid #2B716B;
	border-radius: 6px;
	color: #fff;
}
body .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:is(:hover, :focus) {
	background-color: #235D58;
	border-color: #235D58;
	color: #fff;
}

/* Product search results (includes/product-search.php): same gap under the
   title banner as the category archives (Astra gives those 24px, search
   pages its plain-container 64px). */
body.search.woocommerce.ast-plain-container.ast-no-sidebar #primary {
	margin-top: 24px;
}

/* Astra's "back to top" button: bottom-left instead of bottom-right, clear
   of the tawk.to chat bubble in the right corner, and styled like that
   bubble - a 48px teal circle, 20px from the edges, with a soft shadow and
   a white up-chevron (Astra's own arrow icon, already rotated to point up).
   Astra shows/hides it with an inline display, so the icon is centred with
   line-height rather than flexbox. */
#ast-scroll-top.ast-scroll-to-top-right {
	right: auto;
	left: 20px;
	bottom: 20px;
	width: 48px;
	height: 48px;
	line-height: 48px;
	border-radius: 50%;
	background-color: #2B716B;
	color: #fff;
	font-size: 18px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: background-color 0.15s ease, transform 0.15s ease;
}
#ast-scroll-top.ast-scroll-to-top-right:hover {
	background-color: #235D58;
	transform: translateY(-2px);
}
#ast-scroll-top.ast-scroll-to-top-right .ast-icon.icon-arrow svg {
	width: 18px;
	height: auto;
	fill: currentColor;
	transform: translate(0, -2px) rotate(180deg);
}