/*
Theme Name: Beaute
Theme URI: https://8beaute.com
Description: Custom B2B haircare wholesale theme
Author: No Mess Studio
Version: 1.0.0
Text Domain: beaute
*/

/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════ */
:root {
	/* Colours */
	--c-primary:     #1f364d;
	--c-accent:      #b8cfe6;
	--c-card-bg:     #eef6ff;
	--c-light-grey:  #f5f5f5;
	--c-border:      #d9d9d9;
	--c-white:       #ffffff;
	--c-text:        #1f364d;
	--c-text-muted:  #6b7a8d;
	--c-muted:       #888888;
	--c-star:        #f4c842;
	--c-discount:    #e63946;

	/* Typography */
	--font:          'General Sans', Arial, sans-serif;
	--fs-xs:         0.875rem;    /* 14px */
	--fs-sm:         0.9375rem;   /* 15px */
	--fs-base:       1.0625rem;   /* 17px */
	--fs-md:         1.25rem;     /* 20px */
	--fs-lg:         2.1875rem;   /* 35px */
	--fs-xl:         3.125rem;    /* 50px */

	/* Spacing */
	--sp-xs:   0.5rem;
	--sp-sm:   1rem;
	--sp-md:   1.5rem;
	--sp-lg:   2rem;
	--sp-xl:   3rem;
	--sp-2xl:  7rem;

	/* Layout */
	--container-max:     1440px;
	--container-pad:     5.5rem;   /* 120px each side */

	/* Radii */
	--r-sm:   0.625rem;   /* 10px  — cards */
	--r-md:   0.9375rem;  /* 15px  — notices, mid-size elements */
	--r-lg:   1.375rem;   /* 22px  — hero panels */
	--r-pill: 6.25rem;    /* 100px — buttons, inputs */

	/* Transitions */
	--t: 0.2s ease;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-text);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; margin: 0; padding: 0; }

p { margin: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: 1.2; }

button { cursor: pointer; font-family: inherit; }

/* ═══════════════════════════════════════════════════════
   LAYOUT UTILITIES
═══════════════════════════════════════════════════════ */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

@media (max-width: 700px) {
	.container { padding-inline: 1.5rem; }
}

/* 4-column responsive grid — reused across home, catalog, brand pages */
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.grid-4 { grid-template-columns: 1fr; }

	/* Product card grids stay 2-up on mobile */
	.hot-products__grid,
	.product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════ */

/* Heading scale — 50px / 35px / base */
h1 { font-size: var(--fs-xl); }   /* 50px */
h2 { font-size: var(--fs-lg); }   /* 35px */

/* Italic em inside headings — e.g. hero "tobulų plaukų formulė" */
h1 em, h2 em { font-style: italic; font-weight: 500; }

/* Lead paragraph — 20px subtitle/body text */
.text-lead {
	font-size: var(--fs-md);
	line-height: 1.5;
}

/* Small nav/category label — 12px uppercase */
.text-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-text-muted);
}

.section-title {
	font-size: var(--fs-lg);
	font-weight: 500;
	color: var(--c-primary);
}

/* ─── .entry-content — rich text (page.php, single.php, WC descriptions) ─── */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-top: 2rem;
	margin-bottom: 0.5em;
}

.entry-content h1 { margin-bottom: 0.5em; }

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content table,
.entry-content form {
	margin-bottom: 1.5rem;
}

.entry-content p { line-height: 1.7; }

.entry-content ul { list-style: disc;    padding-left: 2.5rem; }
.entry-content ol { list-style: decimal; padding-left: 2.5rem; }

.entry-content blockquote {
	font-style: italic;
	padding-left: 1.25rem;
	border-left: 3px solid var(--c-accent);
	color: var(--c-text-muted);
}

.entry-content a {
	color: var(--c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--c-accent);
}

.entry-content a:hover { text-decoration-color: var(--c-primary); }

/* ─── Page template layout ─── */
.page-article {
	padding-block: 3.5rem 6rem;
}

.page-article__title {
	margin-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
   All buttons are pill-shaped. Two variants:
   .btn-primary  — dark navy fill
   .btn-secondary — outlined, transparent
═══════════════════════════════════════════════════════ */
.btn-primary,
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3rem;               /* 48px */
	padding-inline: 1.75rem;
	border-radius: var(--r-pill);
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: 500;
	white-space: nowrap;
	transition: opacity var(--t), background var(--t);
	border: none;
	text-decoration: none;
}

.btn-primary {
	background: var(--c-primary);
	color: var(--c-white);
}

.btn-primary:hover { opacity: 0.85; }

.btn-secondary {
	background: transparent;
	color: var(--c-primary);
	border: 1.5px solid var(--c-primary);
}

.btn-secondary:hover { background: var(--c-primary); color: var(--c-white); }

/* ═══════════════════════════════════════════════════════
   GLOBAL FORM STYLES
   Defined here once; minor overrides applied per page.
   Source: registration form + Asortimentas selects.
═══════════════════════════════════════════════════════ */
label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-primary);
	margin-bottom: 0.375rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea {
	width: 100%;
	height: 3rem;
	padding-inline: 1.25rem;
	background: var(--c-white);
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-pill);
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-primary);
	outline: none;
	transition: border-color var(--t);
	appearance: none;
}

textarea {
	height: auto;
	min-height: 8rem;
	padding-block: 0.875rem;
	border-radius: var(--r-sm);
	resize: vertical;
}

input::placeholder,
textarea::placeholder { color: #b9b9b9; font-weight: 400; }

input:focus,
textarea:focus { border-color: var(--c-primary); }

/* Password field wrapper */
.input-password {
	position: relative;
}

.input-password input { padding-right: 3rem; }

.input-password__toggle {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	color: var(--c-text-muted);
	display: flex;
	align-items: center;
}

.input-password__toggle:hover { color: var(--c-primary); }

.input-password__toggle svg { width: 20px; height: 20px; stroke-width: 1.5; }

/* Select — pill-shaped, custom chevron */
select {
	width: 100%;
	height: 3rem;
	padding-inline: 1.25rem 2.5rem;
	background: var(--c-white) 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='%231f364d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 1rem center;
	background-size: 16px;
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-pill);
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-primary);
	outline: none;
	appearance: none;
	cursor: pointer;
	transition: border-color var(--t);
}

select:focus { border-color: var(--c-primary); }

/* Checkbox */
input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--c-primary);
	cursor: pointer;
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-sm);
	cursor: pointer;
}

/* File upload area */
.file-upload {
	border: 1.5px dashed var(--c-border);
	border-radius: var(--r-sm);
	padding: 2rem;
	text-align: center;
	background: var(--c-white);
	cursor: pointer;
	transition: border-color var(--t);
}

.file-upload:hover { border-color: var(--c-primary); }

.file-upload__icon { margin-inline: auto; margin-bottom: 0.75rem; color: var(--c-text-muted); }

.file-upload__label { font-size: var(--fs-sm); color: var(--c-text-muted); }

.file-upload__hint { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 0.25rem; }

/* Uploaded file item */
.file-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 1rem;
	background: var(--c-card-bg);
	border-radius: var(--r-sm);
	margin-top: 0.5rem;
}

.file-item__name { flex: 1; font-size: var(--fs-sm); }

.file-item__remove {
	background: none;
	border: none;
	padding: 0;
	color: var(--c-text-muted);
	line-height: 1;
}

.file-item__remove:hover { color: var(--c-primary); }

/* Phone prefix picker */
.input-phone {
	display: flex;
	gap: 0.5rem;
}

.input-phone__prefix {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	height: 3rem;
	padding-inline: 1rem;
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-pill);
	font-size: var(--fs-base);
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.input-phone__number { flex: 1; }

/* ═══════════════════════════════════════════════════════
   WC STORE NOTICE (promo bar)
═══════════════════════════════════════════════════════ */
.woocommerce-store-notice,
p.demo_store {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	background: var(--c-accent);
	color: var(--c-primary);
	font-size: var(--fs-md);
	font-weight: 500;
	text-align: center;
	padding: 0.75rem 3rem;
	margin: 0;
}

.woocommerce-store-notice a.woocommerce-store-notice__dismiss-link,
p.demo_store a {
	display: none; /* Hide WC dismiss link — promo bar is purely decorative */
}

/* ─── WooCommerce notices (message / info / error) ─── */

.woocommerce-message,
.woocommerce-info {
	background: var(--c-accent);
	color: var(--c-primary);
	font-size: var(--fs-base);
	font-weight: 500;
	padding: 0.75rem 1.5rem;
	margin: 0 0 1.5rem;
	border: none;
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	gap: 1rem;
	list-style: none;
	border-left: 4px solid var(--c-primary);
}

.woocommerce-error {
	background: #fff0f0;
	color: #c0392b;
	font-size: var(--fs-base);
	font-weight: 500;
	padding: 0.75rem 1.5rem;
	margin: 0 0 1.5rem;
	border: none;
	border-radius: var(--r-md);
	list-style: none;
}

/* "View cart" / action link inside the notice */
.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
	flex-shrink: 0;
	height: 2.25rem;
	padding-inline: 1.25rem;
	background: var(--c-primary);
	color: var(--c-white);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════
   SITE HEADER
═══════════════════════════════════════════════════════ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--c-white);
}

/* Store notice inside header pushes header down */
.site-header .woocommerce-store-notice,
.site-header p.demo_store {
	position: static;
}

.header-nav {
	display: flex;
	align-items: center;
	height: 7.5rem; /* ~88px */
	gap: 2rem;
}

/* Logo */
.custom-logo-link { display: flex; align-items: center; }
.custom-logo { width: 192px; height: auto; }

/* Primary nav */
.primary-nav { margin-left: auto; height: 100%; display: flex; align-items: stretch; }

.nav-menu {
	display: flex;
	align-items: stretch; /* items fill full nav height — closes gap to mega panel */
	gap: 2rem;
	height: 100%;
}

.nav-menu > .menu-item {
	display: flex;
	align-items: center;
}

.nav-menu > .menu-item > .menu-link {
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-primary);
	position: relative;
	padding-bottom: 2px;
}

/* Active underline */
.nav-menu > .menu-item.current-menu-item > .menu-link::after,
.nav-menu > .menu-item.current-menu-ancestor > .menu-link::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--c-accent);
	border-radius: 2px;
}

/* ─── Mega menu panel ─── */

/* position: static so the panel's containing block is .site-header (full width) */
.nav-menu > .menu-item-has-children {
	position: static;
}

.mega-panel {
	position: absolute;
	top: 100%;      /* bottom of .site-header */
	left: 0;
	width: 100%;
	background: var(--c-white);
	box-shadow: 0 8px 24px rgba(31, 54, 77, 0.10);
	border-top: 1px solid var(--c-border);
	padding-block: 1.75rem;
	z-index: 200;

	/* Opacity transition instead of display:none — allows mouse to cross gap
	   without closing the panel (0.15s delay on hide) */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	transition-delay: 0.15s;
}

.nav-menu > .menu-item-has-children:hover > .mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;  /* show immediately */
}

.mega-columns {
	display: flex;
	gap: 2.5rem;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.mega-columns > li { flex: 1; min-width: 0; }

.mega-column__title {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--c-border);
}

.mega-columns li ul { display: flex; flex-direction: column; gap: 0.375rem; }

.mega-columns li ul a {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	transition: color var(--t);
}

.mega-columns li ul a:hover { color: var(--c-primary); }

/* Header icons */
.header-icons {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--c-primary);
}

.header-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.header-icon:hover { opacity: 0.7; }

/* Cart / wishlist counter badge */
.header-icon__count {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	background: var(--c-primary);
	color: var(--c-white);
	font-size: 0.625rem;
	font-weight: 600;
	border-radius: var(--r-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 3px;
	line-height: 1;
}

/* Mobile nav — hidden by default on all screen sizes */
.mobile-nav { display: none; }

/* Hamburger — hidden on desktop */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2rem;
	height: 2rem;
	background: none;
	border: none;
	padding: 0;
	margin-left: auto;
	color: var(--c-primary);
}

.hamburger svg { width: 24px; height: 24px; stroke-width: 1.5; }

/* ─── Mobile nav ─── */
@media (max-width: 1024px) {
	.primary-nav { display: none; }

	/* Mobile header: hamburger left | logo center | icons right */
	.hamburger {
		display: flex;
		order: 1;
		margin-left: 0;
	}

	.header-nav > .custom-logo-link {
		order: 2;
		flex: 1;
		justify-content: center;
	}

	.header-icons {
		order: 3;
	}

	/* Mobile nav overlay */
	.mobile-nav {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 300;
		background: var(--c-white);
		overflow-y: auto;
		flex-direction: column;
	}

	.mobile-nav.is-open { display: flex; }

	.mobile-nav__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1.5rem var(--container-pad);
		border-bottom: 1px solid var(--c-border);
	}

	.mobile-nav__close {
		background: none;
		border: none;
		padding: 0;
		color: var(--c-primary);
	}

	.mobile-nav__close svg { width: 24px; height: 24px; stroke-width: 1.5; }

	.mobile-menu {
		padding: 1rem 0;
	}

	.mobile-menu > .menu-item > .menu-link {
		display: block;
		padding: 0.875rem var(--container-pad);
		font-size: var(--fs-md);
		font-weight: 500;
		color: var(--c-primary);
		border-bottom: 1px solid var(--c-light-grey);
	}

	/* Mobile mega accordion toggle */
	.mobile-menu > .menu-item-has-children > .menu-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mobile-menu > .menu-item-has-children > .menu-link::after {
		content: '';
		display: block;
		width: 20px;
		height: 20px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231f364d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
		transition: transform var(--t);
		flex-shrink: 0;
	}

	.mobile-menu > .menu-item-has-children.is-open > .menu-link::after {
		transform: rotate(180deg);
	}

	/* Mobile mega panel — stacked accordion */
	.mobile-menu .mega-panel {
		display: none;
		/* Reset desktop opacity/visibility transition values */
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: none;
		/* Layout reset */
		position: static;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		padding: 0;
		min-width: 0;
		background: var(--c-light-grey);
	}

	.mobile-menu .mega-panel.is-open { display: block; }

	.mobile-menu .mega-columns { flex-direction: column; gap: 0; }

	.mobile-menu .mega-columns > li { border-bottom: 1px solid var(--c-border); }

	.mobile-menu .mega-column__title {
		display: block;
		padding: 0.75rem var(--container-pad);
		border-bottom: none;
		margin-bottom: 0;
	}

	.mobile-menu .mega-columns li ul {
		padding: 0 var(--container-pad) 0.75rem;
		gap: 0.25rem;
	}

	.mobile-menu .mega-columns li ul a {
		display: block;
		padding: 0.375rem 0;
	}
}

@media (max-width: 768px) {
	.container { padding-inline: 1.5rem; }
	.header-nav { height: 5rem; }
}

@media (max-width: 460px) {
	/* Logo own row, centered; hamburger + icons share second row */
	.header-nav {
		flex-wrap: wrap;
		height: auto;
		padding-block: 0.75rem 0.625rem;
		gap: 0.5rem;
	}

	.header-nav > .custom-logo-link {
		order: 1;
		flex: 0 0 100%;      /* full first row */
		justify-content: center;
	}

	.hamburger {
		order: 2;
	}

	.header-icons {
		order: 3;
		margin-left: auto;   /* push icons to the right */
	}
}

/* ═══════════════════════════════════════════════════════
   SITE FOOTER
═══════════════════════════════════════════════════════ */
.site-footer {
	background: var(--c-primary);
	color: var(--c-white);
	padding-block: 3.5rem 2rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1fr;
	gap: 2rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	margin-bottom: 2rem;
}

/* White logo via CSS filter */
.footer-logo .custom-logo-link { display: inline-flex; }
.footer-logo .custom-logo { filter: brightness(0) invert(1); }

.footer-tagline {
	font-size: var(--fs-base);
	color: rgba(255,255,255,0.75);
	margin-top: 1rem;
	line-height: 1.6;
}

.footer-col__title {
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--c-white);
	margin-bottom: 1rem;
}

/* Footer nav menus */
.footer-menu { display: flex; flex-direction: column; gap: 0.625rem; }

.footer-menu a {
	font-size: var(--fs-base);
	color: rgba(255,255,255,0.75);
	transition: color var(--t);
}

.footer-menu a:hover { color: var(--c-white); }

.footer-contact { display: flex; flex-direction: column; gap: 0.625rem; }

.footer-contact a {
	font-size: var(--fs-base);
	color: rgba(255,255,255,0.75);
	transition: color var(--t);
}

.footer-contact a:hover { color: var(--c-white); }

.footer-bottom {
	font-size: var(--fs-sm);
	color: rgba(255,255,255,0.5);
}

/* Footer mobile */
@media (max-width: 1024px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem 1.5rem;
	}
}

/* Mobile footer — hidden on desktop, replaces grid at <600px */
.footer-mobile { display: none; }

@media (max-width: 600px) {
	.footer-grid { display: none; }
	.footer-mobile { display: block; margin-bottom: 2rem; }

	/* Logo */
	.footer-mobile .footer-logo { margin-bottom: 0.75rem; }
	.footer-mobile .footer-logo .custom-logo { filter: brightness(0) invert(1); }

	/* Tagline */
	.footer-mobile .footer-tagline {
		font-size: 0.9375rem;
		color: rgba(255,255,255,0.75);
		line-height: 1.6;
		margin-bottom: 1.5rem;
	}

	/* Accordion rows */

	.footer-accordion__toggle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 1rem 0;
		background: none;
		border: none;
		color: var(--c-white);
		font-family: var(--font);
		font-size: 0.9375rem;
		font-weight: 500;
		text-align: left;
		cursor: pointer;
	}

	.footer-accordion__toggle svg {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
		transition: transform var(--t);
	}

	.footer-accordion__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* Accordion content — hidden until JS adds .is-open */
	.footer-accordion__content {
		display: none;
		padding-bottom: 1rem;
	}

	.footer-accordion__content.is-open { display: block; }

	/* Contact links inside accordion */
	.footer-mobile .footer-contact { gap: 0.5rem; }

	.footer-mobile .footer-contact a,
	.footer-mobile .footer-menu a {
		font-size: 0.9375rem;
		color: rgba(255,255,255,0.75);
	}

	.footer-mobile .footer-contact a:hover,
	.footer-mobile .footer-menu a:hover { color: var(--c-white); }

	/* Legal menu inside accordion */
	.footer-mobile .footer-menu {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	/* Divider */
	.footer-mobile__divider {
		border: none;
		border-top: 1px solid rgba(255,255,255,0.12);
		margin: 1.25rem 0;
	}

	/* Social icons row */
	.footer-social-icons {
		display: flex;
		gap: 1.25rem;
		align-items: center;
	}

	.footer-social-icon {
		display: flex;
		align-items: center;
		color: var(--c-white);
		transition: opacity var(--t);
	}

	.footer-social-icon:hover { opacity: 0.7; }

	.footer-social-icon svg {
		width: 20px;
		height: 20px;
	}
}

/* ═══════════════════════════════════════════════════════
   PRODUCT CARD  (template-parts/product-card)
═══════════════════════════════════════════════════════ */
.product-card {
	display: flex;
	flex-direction: column;
}

.product-card__image-wrap {
	position: relative;
	border-radius: var(--r-sm);
	overflow: hidden;
	aspect-ratio: 237 / 294;   /* from Figma: 237×294px */
	background: var(--c-light-grey);
	margin-bottom: 0.75rem;
}

.product-card__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Badges */
.product-card__badges {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Akcija / Naujiena badge — dark navy, diagonal radius (TL+BR), flush to image corner */
.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.9375rem;        /* 31px */
	padding-inline: 1.5rem;
	font-size: 1rem;       /* 12px */
	font-weight: 500;
	border-radius: 10px 0 10px 0; /* TL + BR rounded, TR + BL square — tag shape */
}

.badge--sale {
	background: var(--c-primary);
	color: var(--c-white);
}
.badge--new {
	background: var(--c-white);
	border: 1px solid var(--c-primary);
	color: var(--c-primary);
}
.bottom-badge {
	border-radius: 0 10px 10px 0;
}

/* Discount % badge — white pill, top-right of image */
.badge--discount {
	background: var(--c-white);
	color: var(--c-primary);
	border-radius: var(--r-pill);
	height: 1.5625rem; /* 25px */
	padding-inline: 0.5rem;
	position: absolute;
	top: 0.375rem;
	right: 0.375rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Wishlist icon on card — bottom-right, white 38×38px rounded box */
.product-card__wishlist {
	position: absolute;
	bottom: 0.625rem;
	right: 0.625rem;
	background: var(--c-white);
	border: none;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: var(--r-sm);
	color: var(--c-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	transition: background var(--t), color var(--t), opacity var(--t);
}

.product-card__wishlist:hover { opacity: 0.75; }

.product-card__wishlist.is-active {
	background: var(--c-primary);
	color: var(--c-white);
	opacity: 1;
}
.product-card__wishlist.is-active svg path { fill: currentColor; }
.product-card__wishlist.is-active:hover { opacity: 0.85; }

.product-card__wishlist svg { width: 20px; height: 20px; stroke-width: 1.5; }

.product-card__name {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-primary);
	margin-bottom: 0.375rem;
	line-height: 1.4;
	text-decoration: none;
}

.product-card__name:hover { opacity: 0.75; }

.product-card__price {
	font-size: 1rem;
	font-weight: 600;
	color: var(--c-primary);
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.product-card__price del {
	font-weight: 400;
	color: var(--c-text-muted);
	text-decoration: line-through;
}

/* ═══════════════════════════════════════════════════════
   BRAND LOGO CARD  (template-parts/brand-logo-card)
═══════════════════════════════════════════════════════ */
.brand-card {
	position: relative;
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	aspect-ratio: 321 / 208;
	overflow: hidden;
	transition: background var(--t), border-color var(--t);
}

.brand-card:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
}

.brand-card__logo {
	max-height: 100px;
	width: 200px;
	object-fit: contain;
	transition: opacity var(--t);
}

.brand-card:hover .brand-card__logo { opacity: 0; }

.brand-card__name {
	font-weight: 600;
	color: var(--c-primary);
	transition: opacity var(--t);
}

.brand-card:hover .brand-card__name { opacity: 0; }

.brand-card__tagline {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	font-size: 1rem;
	line-height: 1.5;
	text-align: center;
	color: #fff;
	opacity: 0;
	transition: opacity var(--t);
}

.brand-card:hover .brand-card__tagline { opacity: 1; }

@media (max-width: 600px) {
	.brand-card {
		aspect-ratio: 321 / 146;
		padding: 1rem;
	}
	.brand-card__tagline { padding: 1rem; }
}

/* ═══════════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════════ */

/* ─── Hero ─── */
.hero { padding-block: 0 var(--sp-2xl); }

.hero__card {
	position: relative;
	background: var(--c-accent);
	border-radius: var(--r-lg);
	overflow: hidden;
	min-height: 546px;
	display: flex;
	align-items: center;
}

.hero__image-wrap {
	position: absolute;
	inset: 0;
	right: 0;
}

/* .hero__image-wrap parent raises specificity past .woocommerce-page img (0,1,1) */
.hero__image-wrap .hero__image,
.hero__image-wrap .hero__image-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top right;
}

.hero__image-placeholder { background: var(--c-accent); }

.hero__content {
	position: relative;
	z-index: 1;
	max-width: 520px;
	padding: var(--sp-xl) var(--sp-xl) var(--sp-xl) var(--container-pad);
}

.hero__title {
	font-size: var(--fs-xl);
	font-weight: 500;
	color: var(--c-white);
	line-height: 1.15;
	margin-bottom: 1.25rem;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.hero__title em {
	font-style: italic;
	font-weight: 500;
}

.hero__text {
	font-size: var(--fs-md);
	color: var(--c-white);
	margin-bottom: 2rem;
	line-height: 1.5;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

@media (max-width: 900px) {
	.hero__content {
		padding-left: var(--sp-xl);
		max-width: 360px;
	}
	.hero__title { font-size: var(--fs-lg); }
	.hero__text  { font-size: var(--fs-base); }
}

@media (max-width: 700px) {
	.hero { padding-bottom: 2.5rem; }
	.hero__card {
		flex-direction: column;
		align-items: stretch;
		min-height: auto;
		background: transparent;
		overflow: visible;
	}
	.hero__image-wrap {
		position: relative;
		inset: auto;
		width: 100%;
		height: 300px;
		flex-shrink: 0;
		border-radius: var(--r-lg);
		overflow: hidden;
	}
	.hero__content {
		position: relative;
		max-width: none;
		padding: 2rem 0;
	}
	.hero__title,
	.hero__text {
		color: var(--c-primary);
		text-shadow: none;
	}
}

/* ─── Benefits ─── */
.benefits { padding-block: 0 var(--sp-2xl); }

.benefits__title { margin-bottom: 2.5rem; }

.benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

@media (max-width: 768px) {
	.benefits__grid { grid-template-columns: 1fr; }
}

.benefit-card {
	background: var(--c-card-bg);
	border-radius: var(--r-sm);
	padding: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 170px;
}

.benefit-card__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	color: var(--c-primary);
}

.benefit-card__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }

.benefit-card__text {
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--c-primary);
	line-height: 1.4;
	text-align: center;
}

/* ─── Brands ─── */
.brands { padding-block: 0 var(--sp-2xl); }

.brands__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2.5rem;
}

.brands__grid {
	display: grid;
	gap: 1rem;
}

/* Brand logo placeholders — remove in PHP phase */
.brand-card__logo-placeholder {
	width: 100%;
	height: 70px;
	background: var(--c-border);
	border-radius: 4px;
}

/* ─── Hot products ─── */
.hot-products { padding-block: 0 var(--sp-2xl); }

.hot-products__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2.5rem;
}

.hot-products__grid {
	display: grid;
	gap: 1rem;
}

/* Hot products scroll progress bar */
.hot-products__progress {
	position: relative;
	height: 3px;
	background: var(--c-light-grey);
	margin-top: 2rem;
	border-radius: var(--r-pill);
}

.hot-products__progress-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 50%;
	background: var(--c-border);
	border-radius: var(--r-pill);
}

/* ─── Partners CTA ─── */
/*
 * All positions and sizes are % of the Figma card (1200 × 554px).
 * card uses aspect-ratio so its height scales with width automatically.
 * container-type: inline-size enables cqw for font sizes.
 * Result: the whole section scales proportionally at every viewport width
 * with no media-query layout switches — elements just get smaller.
 *
 * Centering maths (holds at any card width):
 *   small circle center x  = 55.6% + 24%/2  = 67.6%
 *   "01" center x          = 65.25% + 4.75%/2 = 67.625%  ✓
 *   large arc center x     = 38% + 59.5%/2  = 67.75%
 *   caption center x       = 56.75% + 22%/2 = 67.75%    ✓
 */
.partners-cta { padding-block: 0 var(--sp-2xl); }

.partners-cta__card {
	position: relative;
	background: var(--c-primary);
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 1200 / 554;
	container-type: inline-size;
}

/* ── Left content ── */
.partners-cta__title {
	position: absolute;
	left:  6.58%;   /* 79 / 1200 */
	top:  27.98%;   /* 155 / 554 */
	width: 27.83%;  /* 334 / 1200 */
	margin: 0;
	font-size: clamp(0.8rem, 2.92cqw, var(--fs-lg));
	font-weight: 500;
	color: var(--c-white);
	line-height: 1.3;
}
.partners-cta__title em { font-style: italic; font-weight: 500; }

.partners-cta__btn {
	position: absolute;
	left:   6.58%;
	top:   65.88%;  /* 365 / 554 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width:  13.08%; /* 157 / 1200 */
	height:  8.66%; /* 48 / 554 */
	min-width: 100px;
	min-height: 32px;
	background: var(--c-accent);
	color: var(--c-primary);
	border-radius: var(--r-pill);
	font-size: clamp(0.65rem, 1.42cqw, var(--fs-base));
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity var(--t);
}
.partners-cta__btn:hover { opacity: 0.85; }

/* ── Right visual wrapper ──
 * Occupies the right 62% of the card (arc's leftmost edge = 38% from card left).
 * Children are positioned as % of this wrapper, not the card.
 * cqw font sizes still resolve against the card (container-type is on the card).
 *
 * Centering within wrapper (all ≈ 52% from wrapper right = 48% from wrapper left):
 *   circle  center = 32.94 + 38.71/2 = 52.30%
 *   "01"    center = 48.39 +  7.66/2 = 52.22%  ✓
 *   arc     center =  4.03 + 95.97/2 = 52.02%
 *   caption center = 34.27 + 35.48/2 = 52.01%  ✓
 */
.partners-cta__visual {
	position: absolute;
	right: 0; top: 0;
	width: 62%; height: 100%;
	pointer-events: none;
}

.partners-cta__circle {
	position: absolute;
	right: 32.94%; top: 12.09%; width: 38.71%;
	height: auto; mix-blend-mode: lighten;
	transform-origin: center;
}
.partners-cta__number {
	position: absolute;
	right: 48.39%; top: 29.60%; width: 7.66%;
	font-size: clamp(2.5rem, 4.17cqw, var(--fs-xl));
	font-weight: 500; color: var(--c-white);
	text-align: center; line-height: 1;
}
.partners-cta__arc {
	position: absolute;
	left: 50%;
	margin-left: -48%;   /* ≈ -(95.97% / 2) — centers horizontally */
	top: 50%;
	width: 95.97%;
	height: auto;
	mix-blend-mode: lighten;
	transform-origin: center;
}
.partners-cta__caption {
	position: absolute;
	right: 34.27%; top: 70.22%; width: 35.48%;
	margin: 0; font-size: clamp(1rem, 1.67cqw, var(--fs-md));
	color: var(--c-white); text-align: center;
}
.partners-cta__line {
	position: absolute;
	right: 25.87%; top: 92.78%; width: 52.82%; height: 3px;
	background: #203d59;
}
.partners-cta__dots {
	position: absolute; inset: 0;
}
.partners-cta__dot {
	position: absolute;
	top: 92.06%; width: 10px; height: 10px;
	border-radius: 50%; background: rgba(184, 207, 230, 0.35);
}
.partners-cta__dot:nth-child(1) { right: 77.82%; }
.partners-cta__dot:nth-child(2) { right: 60.34%; }
.partners-cta__dot:nth-child(3) { right: 42.87%; }
.partners-cta__dot:nth-child(4) { right: 25.40%; }
.partners-cta__dot--active { background: var(--c-accent); }

/* Caption + number fade (JS sets opacity; transition makes it smooth) */
.partners-cta__caption,
.partners-cta__number { transition: opacity 0.2s ease; }

/* Continuous spin — speed and starting angles controlled by JS config variables */
.partners-cta__circle { animation: partners-circle-spin 1.5s linear infinite; }
.partners-cta__arc    { animation: partners-arc-spin    1.5s linear infinite; }

@keyframes partners-circle-spin { to { transform: rotate(-360deg); } }
@keyframes partners-arc-spin    { to { transform: rotate(360deg);  } }

/* ≤1024px: freeze the whole visual wrapper as one unit (526 × 392px).
 * Children stay % of wrapper — no individual overrides needed. */
@media (max-width: 1024px) {
	.partners-cta__card { aspect-ratio: auto; height: 392px; }
	.partners-cta__visual { width: 526px; height: 392px; }

	/* Left — freeze px positions */
	.partners-cta__title { left: 56px; top: 110px; width: 236px; font-size: 1.55rem; }
	.partners-cta__btn   { left: 56px; top: 258px; width: 111px; height: 34px; font-size: 0.75rem; }
}

@media (max-width: 700px) {
	.partners-cta__card { height: 540px; }
	.partners-cta__title { top: 25px; }
	.partners-cta__btn   { top: 135px; }

	/* Anchor wrapper to bottom of taller card */
	.partners-cta__visual { top: auto; bottom: 0; }

	/* Individual bottom offsets (relative to 392px wrapper — same values as before) */
	.partners-cta__circle  { top: auto; bottom: 141px; }
	.partners-cta__number  { top: auto; bottom: 241px; font-size: 2.5rem; }
	/* .partners-cta__arc: base top: 50% already matches original arc's top position at this breakpoint */
	.partners-cta__caption { top: auto; bottom: 89px;  font-size: 1rem; }
	.partners-cta__line    { top: auto; bottom: 25px;  }
	.partners-cta__dot     { top: auto; bottom: 23px;  }
}

@media (max-width: 600px) {
	/* Center the frozen visual wrapper horizontally within the card */
	.partners-cta__visual { right: auto; left: 50%; transform: translateX(-50%); }

	/* Reduce gap between dots ~1.5× (from 17.5% to ~12%), group stays centred */
	.partners-cta__dot:nth-child(1) { right: 69%; }
	.partners-cta__dot:nth-child(2) { right: 57%; }
	.partners-cta__dot:nth-child(3) { right: 45%; }
	.partners-cta__dot:nth-child(4) { right: 33%; }

	/* Line spans between centres of dot 1 and dot 4 at new positions */
	.partners-cta__line { right: 34%; width: 36%; }
}

/* ─── Reviews ─── */
.reviews { padding-block: 0 var(--sp-2xl); }

.reviews__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.reviews__stars {
	display: flex;
	gap: 2px;
	color: #f5b942;
}

.reviews__stars svg { width: 20px; height: 20px; }

.reviews__count {
	font-size: var(--fs-md);
	font-weight: 500;
}

.reviews__title { margin-bottom: 2.5rem; }

.reviews__grid {
	display: grid;
	gap: 1rem;
}

.review-photo-placeholder {
	aspect-ratio: 3/4;
	background: var(--c-light-grey);
	border-radius: var(--r-sm);
}

.review-photo {
	aspect-ratio: 3/4;
	object-fit: cover;
	border-radius: var(--r-sm);
	width: 100%;
}

/* ─── Review card — product page + brand page review list ─── */
.review-list {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;          /* 22px — matches card padding */
}

.review-card {
	background: var(--c-card-bg);
	border-radius: var(--r-lg);
	padding: 1.375rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	min-height: 170px;
}

.review-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.review-card__stars {
	display: flex;
	gap: 0.1875rem;         /* 3px — matches Figma 17px star spacing */
	color: var(--c-primary);
}

.review-card__stars svg { width: 13px; height: 13px; }

.review-card__date {
	font-size: var(--fs-base);
	color: var(--c-primary);
	white-space: nowrap;
}

.review-card__text {
	flex: 1;
	font-size: var(--fs-base);
	color: var(--c-primary);
	line-height: 1.5;
}

.review-card__footer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.review-card__avatar {
	width: 23px;
	height: 23px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.review-card__author { font-size: var(--fs-base); }

/* "Daugiau atsiliepimų" link — right-aligned below list */
.review-list__more {
	text-align: right;
	margin-top: 0.75rem;
}

.review-list__more a {
	font-size: var(--fs-base);
	color: var(--c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.review-list__more a:hover { opacity: 0.75; }


/* ═══════════════════════════════════════════════════════
   WooCommerce — breadcrumbs
═══════════════════════════════════════════════════════ */
/* Shared breadcrumb wrapper — handles all vertical spacing site-wide */
.page-breadcrumbs { margin-block: 2rem; }

.site-main .woocommerce-breadcrumb {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.site-main .woocommerce-breadcrumb a { color: var(--c-text-muted); }
.site-main .woocommerce-breadcrumb a:hover { color: var(--c-primary); }

/* ═══════════════════════════════════════════════════════
   CATALOG PAGE — archive-product.php
   Measurements from Figma (1282px canvas, 120px side padding):
   Sidebar: 209px · Gap: ~92px · Products: 3-col, 237px each, 16px gap
═══════════════════════════════════════════════════════ */

/* ─── Catalog brands hero (no brand selected) ─── */
.catalog-brands-hero {
	padding-block: var(--sp-lg) var(--sp-xl);
}

.brands-hero__grid {
	display: grid;
	gap: 1rem;
}

/* ─── Catalog hero banner (used by taxonomy-product_brand.php) ─── */
.catalog-hero { padding-block: var(--sp-xl); }

.catalog-hero__card {
	position: relative;
	border-radius: var(--r-lg);   /* 22px — from Figma node 138:2759 */
	overflow: hidden;
	min-height: 446px;            /* from Figma height */
	display: flex;
	align-items: center;
	background: var(--c-accent);  /* fallback colour while image loads */
}

.catalog-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

.catalog-hero__content {
	position: relative;
	z-index: 1;
	max-width: 572px;             /* text block width from Figma */
	padding: var(--sp-xl) var(--container-pad);
}

.catalog-hero__title {
	font-size: var(--fs-lg);     /* 35px */
	font-weight: 500;
	color: var(--c-white);
	line-height: 1.2;
	margin-bottom: 1rem;
}

.catalog-hero__text {
	font-size: var(--fs-md);     /* 20px */
	color: var(--c-white);
	line-height: 1.5;
	margin-bottom: 2rem;
}

/* White CTA button — for use on dark/image backgrounds */
.btn-primary--white {
	background: var(--c-white);
	color: var(--c-primary);
}

.btn-primary--white:hover { opacity: 0.9; }

/* Carousel dots (reused in catalog hero) */
.catalog-hero__dots {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
}

/* ─── Two-column catalog layout ─── */
.catalog-layout {
	display: grid;
	grid-template-columns: 209px 1fr;  /* sidebar 209px — Figma measurement */
	gap: 5.75rem;                      /* 92px gap — Figma measurement */
	align-items: start;
	padding-bottom: var(--sp-2xl);
}

/* ─── Sidebar ─── */
.catalog-sidebar__title {
	font-size: var(--fs-lg);    /* 35px — "Kategorijos" heading */
	font-weight: 500;
	color: var(--c-primary);
	margin-bottom: 1.5rem;
}

/* Filter groups */
.filter-group {
	border-bottom: 1px solid var(--c-border);
}

.filter-group__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-block: 0.875rem;
	background: none;
	border: none;
	font-family: var(--font);
	font-size: var(--fs-base);   /* 17px */
	font-weight: 500;
	color: var(--c-primary);
	cursor: pointer;
	text-align: left;
}

.filter-group__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	stroke-width: 2;
	transition: transform var(--t);
}

.filter-group.is-open .filter-group__chevron { transform: rotate(180deg); }

.filter-group__list {
	display: none;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0 0 0.875rem 0.625rem;
}

.filter-group.is-open .filter-group__list { display: flex; }

.filter-group__item a {
	font-size: var(--fs-sm);     /* 15px */
	font-weight: 500;
	color: var(--c-primary);
	transition: opacity var(--t);
}

.filter-group__item a:hover { opacity: 0.65; }

.filter-group__item.is-active a { font-weight: 600; opacity: 1; }
.filter-group__item.is-active a:hover { opacity: 0.75; }

.filter-group__count {
	font-weight: 400;
	color: var(--c-muted);
	margin-left: 0.2em;
}

/* ─── Filter bar ─── */
.filter-bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding-bottom: 1rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid var(--c-border);
}

.filter-bar__dropdowns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

/* Pill-shaped filter dropdown — matches Figma: 48px tall, white, border, radius 100px */
.filter-dropdown {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 48px;
	padding-inline: 1.25rem;
	background: var(--c-white);
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-pill);
	font-family: var(--font);
	font-size: var(--fs-base);  /* 17px */
	font-weight: 500;
	color: var(--c-primary);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color var(--t);
}

.filter-dropdown:hover { border-color: var(--c-primary); }

.filter-dropdown--wide { min-width: 154px; }  /* "Tūris/svoris" — 154px from Figma */

.filter-dropdown__chevron {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	stroke-width: 2;
	transition: transform 0.2s;
}

.filter-dropdown.is-open .filter-dropdown__chevron { transform: rotate(180deg); }

.filter-dropdown.is-active {
	background: var(--c-card-bg);
	border-color: var(--c-accent);
}

/* Wrapper — relative so panel positions correctly */
.filter-dropdown-wrap { position: relative; }

/* Dropdown panel */
.filter-dropdown__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	z-index: 200;
	min-width: 220px;
	background: var(--c-white);
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-sm);
	box-shadow: 0 4px 16px rgba(31,54,77,.12);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* [hidden] hides the panel when JS hasn't opened it */
.filter-dropdown__panel[hidden] { display: none; }

.filter-panel__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.filter-panel__label {
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--c-primary);
	flex-shrink: 0;
	width: 2.5rem;
}

.filter-panel__select {
	flex: 1;
	height: 40px;
	padding-inline: 0.875rem 2rem;
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-pill);
	font-family: var(--font);
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--c-primary);
	background: var(--c-white)
	            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f364d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
	            no-repeat right 0.75rem center / 12px 12px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.filter-panel__select:focus { outline: none; border-color: var(--c-primary); }

.filter-panel__apply {
	width: 100%;
	height: 40px;
	background: var(--c-primary);
	color: var(--c-white);
	border: none;
	border-radius: var(--r-pill);
	font-family: var(--font);
	font-size: var(--fs-xs);
	font-weight: 500;
	cursor: pointer;
	transition: opacity var(--t);
}

.filter-panel__apply:hover { opacity: 0.85; }

/* Active filter tag — #b8cfe6 pill, 48px tall, with × remove button */
.filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	height: 48px;
	padding-inline: 1.25rem;
	background: var(--c-accent); /* #b8cfe6 */
	border-radius: var(--r-pill);
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-primary);
	white-space: nowrap;
}

.filter-tag__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--c-primary);
	transition: opacity var(--t);
}

.filter-tag__remove:hover { opacity: 0.6; }

.filter-tag__remove svg {
	width: 14px;
	height: 14px;
	stroke-width: 2;
}

/* "Išvalyti filtrą" — 12px, right side of bar */
.filter-bar__clear {
	align-self: center;
	font-size: var(--fs-xs);   /* 12px */
	font-weight: 500;
	color: var(--c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity var(--t);
}

.filter-bar__clear:hover { opacity: 0.65; }

/* ─── Results bar: count + sort ─── */
.results-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

/* WC result count — 12px from Figma ("Rasta 52 prekių") */
.woocommerce-result-count {
	font-size: var(--fs-xs);  /* 12px */
	color: var(--c-primary);
	margin: 0;
}

/* WC sort dropdown — "Rikiuoti pagal", 174px from Figma */
.woocommerce-ordering { margin: 0; }

.woocommerce-ordering select {
	width: auto;
	min-width: 174px;
	height: 48px;
}

/* ─── Product grid — 3 columns in catalog context ─── */
.product-grid {
	display: grid;
	gap: 1rem;                     /* 16px gap between cards — from Figma */
}

.product-grid--catalog {
	grid-template-columns: repeat(3, 1fr);
}

.catalog-no-results {
	font-size: var(--fs-md);
	color: var(--c-text-muted);
	padding-block: 3rem;
	text-align: center;
}

/* ─── Pagination ─── */
.catalog-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--c-border);
}

.catalog-pagination__nav {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* "1 Iš 3" current/total page info — 15px from Figma */
.catalog-pagination__page,
.catalog-pagination__of {
	font-size: var(--fs-sm);   /* 15px */
	color: var(--c-primary);
	font-weight: 500;
}

/* "Kitas" button uses .btn-primary — 105×48px, pill — already defined */

/* Per-page selector — right side of pagination */
.per-page {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.per-page__label {
	font-size: var(--fs-sm);   /* 15px */
	color: var(--c-primary);
	white-space: nowrap;
}

/* "16" dropdown — 88px wide from Figma */
.per-page__select {
	width: 88px;
	height: 48px;
}

/* ─── WC pagination (woocommerce_pagination) ─── */
.woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-primary);
	transition: background var(--t);
}

.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current {
	background: var(--c-card-bg);
}

.woocommerce-pagination .page-numbers.next,
.woocommerce-pagination .page-numbers.prev {
	background: var(--c-primary);
	color: var(--c-white);
	border-radius: var(--r-pill);
	width: auto;
	padding-inline: 1.25rem;
}

.woocommerce-pagination .page-numbers.next:hover,
.woocommerce-pagination .page-numbers.prev:hover { opacity: 0.85; }

/* ─── Catalog responsive ─── */
@media (max-width: 1200px) {
	.catalog-layout {
		grid-template-columns: 190px 1fr;
		gap: 3rem;
	}
}

@media (max-width: 1024px) {
	.catalog-layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.product-grid--catalog {
		grid-template-columns: repeat(2, 1fr);
	}

	.catalog-hero__content {
		padding-inline: 2rem;
	}
}

@media (max-width: 600px) {
	.catalog-pagination {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.filter-bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ═══════════════════════════════════════════════════════
   TABLE — generic styles for any <table> on the site
   Source: Figma Standartiniai — "Prekių krepšelis"
═══════════════════════════════════════════════════════ */
table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	padding: 0.625rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	overflow: hidden;
}

table th {
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--c-primary);
	padding: 1.125rem 1.375rem;
	text-align: left;
	border-bottom: 1px solid var(--c-border);
}

table td {
	padding: 1.375rem;
	vertical-align: middle;
	font-size: var(--fs-base);
	color: var(--c-primary);
	border-bottom: 1px solid var(--c-border);
}

table tbody tr:last-child td,
table tbody tr:last-child th {
	border-bottom: none;
}

/* Inner corner radius on edge cells — keeps rounded look with table padding */
table tr:first-child th:first-child,
table tr:first-child td:first-child { border-top-left-radius: var(--r-sm); }
table tr:first-child th:last-child,
table tr:first-child td:last-child  { border-top-right-radius: var(--r-sm); }
table tr:last-child td:first-child,
table tr:last-child th:first-child  { border-bottom-left-radius: var(--r-sm); }
table tr:last-child td:last-child,
table tr:last-child th:last-child   { border-bottom-right-radius: var(--r-sm); }

/* ─── .shop_table — WooCommerce-specific column overrides ─── */

/* Cart: card look comes from .woocommerce-cart-form wrapper — strip border from the table itself.
   Scoped to cart so checkout's order_review table keeps its global card styling. */
.woocommerce-cart .shop_table {
	border: none;
	border-radius: 0;
	overflow: visible;
}

/* Thumbnail — width driven by the 163px image inside */
.shop_table .product-thumbnail { padding-right: 0; }

.shop_table .product-thumbnail img {
	width: 163px;
	height: 163px;
	border-radius: var(--r-sm);
	object-fit: cover;
	display: block;
}

/* Wrap gives the wishlist button an absolute anchor */
.cart-item__thumbnail-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
}

/* Reuse product-card__wishlist — override position to bottom-left of image */
.cart-item__thumbnail-wrap .product-card__wishlist {
	position: absolute;
	bottom: 8px;
	left: 8px;
	top: auto;
	right: auto;
}

/* Product name */
.shop_table .product-name a {
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-primary);
	text-decoration: none;
}

/* Volume / variation line */
.shop_table .product-name .variation,
.shop_table .product-name dl,
.shop_table .product-name dt,
.shop_table .product-name dd {
	font-size: var(--fs-base);
	color: var(--c-border);
	margin: 0;
}

/* Quantity stepper — JS wraps input in .qty-wrapper and adds −/+ buttons */
.shop_table .product-quantity .qty-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	width: 117px;
	border: 1.5px solid var(--c-primary);
	border-radius: var(--r-pill);
	padding-inline: 0.875rem;
}

.shop_table .product-quantity .qty-wrapper button {
	background: none;
	border: none;
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-primary);
	padding: 0;
	line-height: 1;
}

.shop_table .product-quantity input[type="number"] {
	width: 30px;
	height: auto;
	min-height: unset;
	border: none;
	border-radius: 0;
	text-align: center;
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-primary);
	background: transparent;
	padding: 0;
	appearance: textfield;
}

.shop_table .product-quantity input[type="number"]::-webkit-inner-spin-button,
.shop_table .product-quantity input[type="number"]::-webkit-outer-spin-button { appearance: none; }

/* Subtotal column — flex column, right-aligned; holds price breakdown + remove link */
.shop_table .product-subtotal {
	text-align: right;
	vertical-align: top;
}

.shop_table .product-subtotal .woocommerce-Price-amount {
	font-size: var(--fs-md);   /* 20px */
	font-weight: 500;
	color: var(--c-primary);
}

/* Subtotal line price */
.cart-item__subtotal {
	display: block;
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--c-primary);
}

/* Strikethrough unit price — all on one line */
.cart-item__original-price {
	display: block;
	font-size: var(--fs-base);
	color: var(--c-border);
	white-space: nowrap;
}

.cart-item__original-price .woocommerce-Price-amount,
.cart-item__original-price .woocommerce-Price-amount.amount,
.cart-item__original-price .amount {
	display: inline;
	font-size: var(--fs-base);
	color: var(--c-border);
	text-decoration: line-through;
}

.cart-item__unit {
	display: inline;
	font-size: var(--fs-base);
	color: var(--c-border);
}

/* Discount % */
.cart-item__discount {
	display: block;
	font-size: var(--fs-base);
	color: #ff7a7a;
	font-weight: 500;
}

.cart-item__weight,
.product-summary__weight {
	display: block;
	font-size: 1.2em;
	color: #b9b9b9;
	margin-bottom: 1rem;
}

/* Remove link — sits below price info inside subtotal cell */
.cart-item__remove {
	margin-top: 3rem;
}

.cart-item__remove a.remove {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--c-primary);
	text-decoration: none;
}

.cart-item__remove a.remove:hover { opacity: 0.7; }

.cart-item__remove a.remove svg {
	width: 27px;
	height: 33px;
	flex-shrink: 0;
}

/* Wishlist icon inside cart row (added via template override) */
.cart-item__wishlist {
	background: none;
	border: none;
	padding: 0;
	color: var(--c-primary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}

.cart-item__wishlist svg { width: 20px; height: 20px; stroke-width: 1.5; }
.cart-item__wishlist:hover { opacity: 0.7; }

/* ─── Basket page — page-specific (.woocommerce-cart body class) ─── */

/* Page heading "Mano krepšelis" */
.woocommerce-cart .page-title { font-size: var(--fs-lg); margin-bottom: 2rem; }

/* Two-column layout: cart form (left, flex 1) + order summary (right, 387px) */
.woocommerce-cart .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2rem;
}

.woocommerce-cart .woocommerce-notices-wrapper { width: 100%; }

/* Cart form — white card with border */
.woocommerce-cart .woocommerce-cart-form {
	flex: 1;
	min-width: 0;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* Right side: order summary + totals */
.woocommerce-cart .cart-collaterals { width: 387px; flex-shrink: 0; }

/* Table inside cart form card strips its own border/radius */
.woocommerce-cart .woocommerce-cart-form .shop_table { border-radius: 0; }

/* Table header row ("Prekė" | "Kaina") */
.woocommerce-cart .shop_table thead th {
	padding: 1.125rem 1.5rem;
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--c-primary);
	border-bottom: 1px solid var(--c-border);
}

/* Cart item rows */
.woocommerce-cart .woocommerce-cart-form .cart_item td {
	padding: 1.375rem 1.5rem;
	border-bottom: 1px solid var(--c-border);
	vertical-align: top;
}

/* No border after last item row */
.woocommerce-cart .woocommerce-cart-form tbody tr.cart_item:last-of-type td {
	border-bottom: none;
}


/* Cart totals card */
.woocommerce-cart .cart_totals {
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: 1.5rem;
}

/* "Užsakymo santrauka" heading — 17px semibold with separator */
.woocommerce-cart .cart_totals h2 {
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--c-primary);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--c-border);
	margin-bottom: 0;
}

.woocommerce-cart .cart_totals .shop_table { border: none; }

/* Totals rows */
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
	padding: 0.875rem 0;
	font-size: var(--fs-base);
	color: var(--c-primary);
}

.woocommerce-cart .cart_totals th { font-weight: 500; text-align: left; }
.woocommerce-cart .cart_totals td { text-align: right; font-weight: 600; }

/* Separator above order total row */
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	border-top: 1px solid var(--c-border);
	padding-top: 1rem;
}

/* Coupon form inside cart totals table */
.cart-totals__coupon-row th,
.cart-totals__coupon-row td { text-align: left !important; padding-top: 0.75rem; }

.cart-totals__coupon-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.cart-totals__coupon-form input[type="text"] {
	flex: 1;
	height: 44px;
	min-height: unset;
	border-radius: var(--r-pill);
	border: 1.5px solid var(--c-border);
	padding-inline: 1rem;
	font-size: var(--fs-sm);
	color: var(--c-primary);
	background: var(--c-white);
}

.cart-totals__coupon-form button {
	flex-shrink: 0;
	height: 44px;
	padding-inline: 1.25rem;
	border-radius: var(--r-pill);
	background: var(--c-primary);
	color: var(--c-white);
	border: none;
	font-size: var(--fs-sm);
	font-weight: 500;
	cursor: pointer;
}

.cart-totals__coupon-form button:hover { opacity: 0.85; }

/* Quantity stepper inside product-name column */
.shop_table .product-name .quantity { margin-top: 3rem; }

/* Checkout / "Pirkti" button */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 3rem;
	padding-inline: 1.75rem;
	border-radius: var(--r-pill);
	background: var(--c-primary);
	color: var(--c-white);
	font-size: var(--fs-base);
	font-weight: 500;
	text-decoration: none;
	border: none;
	transition: opacity var(--t);
	margin-top: 1rem;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { opacity: 0.85; }

/* Cart responsive */
@media (max-width: 1200px) {
	.woocommerce-cart .woocommerce-cart-form .cart_item td { padding: 0.5rem; }
	.shop_table .product-name .quantity { margin-top: 0.5rem; width: 6rem; height: 2rem; }
	.shop_table .product-name .qty-btn { flex: 0 0 1.5rem; font-size: 0.875rem; }
	.shop_table .product-name .input-text.qty { font-size: 0.8125rem; }
	.cart-item__remove { margin-top: 0.5rem; }
	.cart-item__remove a.remove { font-size: var(--fs-sm); }
	.cart-item__remove a.remove svg { width: 18px; height: 22px; }
	.woocommerce-cart .cart_totals { padding: 1rem; }
	.woocommerce-cart .cart_totals th,
	.woocommerce-cart .cart_totals td { padding: 0.5rem 0; }
}

@media (max-width: 1000px) {
	.woocommerce-cart .woocommerce { flex-direction: column; }
	.woocommerce-cart .cart-collaterals { width: 100%; }
	.shop_table .product-name .quantity { margin-top: 1.25rem; }
}

@media (max-width: 768px) {
	.shop_table thead { display: none; }
	.woocommerce-cart .woocommerce-cart-form .cart_item td { padding: 0.5rem 0.2rem; }
	.shop_table .product-thumbnail img { width: 100px; height: 100px; }
	.cart-item__remove { margin-top: 0.5rem; }
	.shop_table .product-name .quantity { margin-top: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE — single-product.php
═══════════════════════════════════════════════════════ */

/* Breadcrumbs */
.product-page .woocommerce-breadcrumb {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.product-page .woocommerce-breadcrumb a {
	color: var(--c-text-muted);
}

.product-page .woocommerce-breadcrumb a:last-of-type {
	color: var(--c-primary);
}

/* ── Two-column product layout ─────────────────────────── */
.product-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 8.625rem; /* 138px gap matching Figma */
	align-items: start;
	margin-bottom: 4rem;
}

/* ── Gallery (left column) ─────────────────────────── */
.product-gallery {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.product-gallery__main {
	position: relative;
	border-radius: var(--r-sm);
	overflow: hidden;
	aspect-ratio: 452 / 453;
}

/* Extra parent class raises specificity to (0,2,0), beating WC's
   .woocommerce img { height: auto } at (0,1,1). No !important needed. */
.product-gallery__main .product-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.4s ease;
}

.product-gallery__main:hover .product-gallery__img {
	transform: scale(1.06);
}

/* Badge: rounded top-left + bottom-right only */
.product-gallery__badges {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}


/* Wishlist on gallery (same style as product-card but positioned on image) */
.product-gallery__wishlist {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
}

/* Thumbnails */
.product-gallery__thumbs {
	display: flex;
	gap: 0.75rem;
}

.product-gallery__thumb {
	width: 98px;
	height: 98px;
	flex-shrink: 0;
	padding: 0;
	background: none;
	border: 2px solid transparent;
	border-radius: var(--r-sm);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--t);
}

.product-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-gallery__thumb.is-active,
.product-gallery__thumb:hover {
	border-color: var(--c-accent);
}

/* Rating progress bar */
.product-rating-bar {
	height: 3px;
	background: var(--c-light-grey);
	border-radius: 2px;
	overflow: hidden;
}

.product-rating-bar__fill {
	height: 100%;
	background: var(--c-border);
	border-radius: 2px;
}

/* Description — direct child of .product-layout grid.
   grid-column:1 pins it to the left column under the gallery on desktop.
   On mobile the grid is 1-col so it appears after .product-summary in DOM order. */
.product-description {
	grid-column: 1;
	margin-top: 2.5rem;
}

.product-description__title {
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--c-primary);
	margin-bottom: 0.875rem;
}

.product-description__body {
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--c-primary);
}

/* ── Product summary (right column) ─────────────────── */
.product-summary {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.product-summary__title {
	font-size: var(--fs-lg); /* 35px */
	font-weight: 500;
	color: var(--c-primary);
	line-height: 1.2;
	margin-bottom: 0.75rem;
}

.product-summary__category {
	margin-bottom: 0.75rem;
	display: block;
}

.product-summary__category a {
	display: inline-block;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-primary);
	background: var(--c-card-bg);
	border: 1px solid var(--c-accent);
	border-radius: var(--r-pill);
	padding: 0.25rem 0.875rem;
	text-decoration: none;
	transition: background var(--t), color var(--t);
}

.product-summary__category a:hover {
	background: var(--c-accent);
}

/* WC rating block */
.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1.75rem;
}

/* WC star-rating: uses a width% trick to show partial fills */
.star-rating {
	position: relative;
	display: inline-block;
	width: 6.5625rem;
	height: 1.09rem;
	overflow: hidden;
	font-size: 0;
}

.star-rating::before {
	content: '\2605\2605\2605\2605\2605';
	position: absolute;
	inset: 0;
	color: var(--c-border);
	font-size: 1.015rem;
	letter-spacing: 0.22rem;
	line-height: 1;
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	height: 100%;
}

.star-rating span::before {
	content: '\2605\2605\2605\2605\2605';
	position: absolute;
	inset: 0;
	color: var(--c-star);
	font-size: 1.015rem;
	letter-spacing: 0.22rem;
	line-height: 1;
}

.star-rating strong { display: none; }

.product-summary__rating-count {
	font-size: 0.75rem; /* 12px */
	color: var(--c-primary);
}

/* Price label */
.product-summary__price-label {
	font-size: var(--fs-base);
	color: var(--c-primary);
	margin-bottom: 0.375rem;
}

/* Price + Qty row → button full width below */
.product-summary__purchase-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

/* Make the WC form transparent to the parent flex container so
   .quantity and the button become direct flex items alongside .price */
.product-summary__purchase-row .cart {
	display: contents;
}

/* WC price */
.product-summary__purchase-row .price {
	display: flex;
	align-items: baseline;
	gap: 0.875rem;
	font-size: var(--fs-lg); /* 35px */
	font-weight: 500;
	color: var(--c-primary);
	flex: 1;
}

.product-summary__purchase-row .price del {
	text-decoration: line-through;
	opacity: 0.7;
}

.product-summary__purchase-row .price ins {
	font-weight: 600;
	text-decoration: none;
}

/* Quantity stepper */
.quantity {
	display: flex;
	align-items: center;
	height: 3rem; /* 48px */
	width: 9.75rem; /* 156px */
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	overflow: hidden;
	flex-shrink: 0;
}

.qty-btn {
	flex: 0 0 2.75rem;
	height: 100%;
	background: none;
	border: none;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--c-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--t);
}

.qty-btn:hover { background: var(--c-light-grey); }

.input-text.qty {
	flex: 1;
	height: 100%;
	border: none;
	outline: none;
	text-align: center;
	font-size: var(--fs-base);
	font-weight: 500;
	font-family: var(--font);
	color: var(--c-primary);
	background: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.input-text.qty::-webkit-inner-spin-button,
.input-text.qty::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Add to cart button — full width in right column.
   Chain all three WC classes to beat .woocommerce .button.alt specificity. */
button.single_add_to_cart_button.button.alt {
	flex: 1 1 100%;
	margin-bottom: 2.5rem;
	background: var(--c-primary);
	color: var(--c-white);
	border: none;
	border-radius: var(--r-pill);
	padding: 0.875rem 2rem;
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: 600;
	cursor: pointer;
	transition: opacity var(--t);
}

button.single_add_to_cart_button.button.alt:hover { background: var(--c-primary); opacity: 0.85; }

/* ── Accordion ─────────────────────────────────────── */
.product-accordions {
	border-top: 1px solid var(--c-border);
}

.accordion-item {
	border-bottom: 1px solid var(--c-border);
}

.accordion-item > summary {
	list-style: none;
}

.accordion-item > summary::-webkit-details-marker { display: none; }

.accordion-item__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.875rem;
	font-size: var(--fs-md); /* 20px */
	font-weight: 500;
	color: var(--c-primary);
	cursor: pointer;
	user-select: none;
}

.accordion-item__chevron {
	width: 1rem;
	height: 1rem;
	stroke: var(--c-primary);
	flex-shrink: 0;
	transition: transform var(--t);
}

details[open] .accordion-item__chevron {
	transform: rotate(180deg);
}

.accordion-item__body {
	padding-bottom: 1rem;
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--c-primary);
}

/* ── Reviews section ─────────────────────────────── */
.product-reviews {
	margin-bottom: 7rem;
}

.product-reviews__title {
	font-size: var(--fs-lg); /* 35px */
	font-weight: 500;
	color: var(--c-primary);
	margin-bottom: 1.5rem;
}

/* Default: reviews list is full-width */
.product-reviews__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
}

/* When form column is present, split 50/50 */
.product-reviews--split .product-reviews__layout {
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
	.product-reviews--split .product-reviews__layout {
		grid-template-columns: 1fr;
	}
}

.review-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.review-card__date {
	font-size: var(--fs-base);
	color: var(--c-primary);
}

.review-card__author {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.review-card__avatar {
	width: 1.4375rem; /* 23px */
	height: 1.4375rem;
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-primary);
	font-size: 0.75rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.review-card__name {
	font-size: var(--fs-base);
	color: var(--c-primary);
}

.product-reviews__more {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 0.75rem;
}

.product-reviews__more-link {
	font-size: var(--fs-base);
	color: var(--c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.product-reviews__pager {
	font-size: 0.875rem;
	color: var(--c-muted);
}

.product-reviews__empty {
	font-size: var(--fs-base);
	color: var(--c-muted);
	padding: 1rem 0;
}

.hot-products__title {
	font-size: var(--fs-lg);
	font-weight: 500;
	color: var(--c-primary);
}

.btn-primary--sm {
	width: auto;
	padding-inline: 2rem;
}

/* ── Zoom icon (bottom-left of main gallery image) ───── */
.product-gallery__zoom {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--t);
}

.product-gallery__zoom:hover { background: var(--c-white); }

.product-gallery__zoom svg {
	width: 1.125rem;
	height: 1.125rem;
	stroke: var(--c-primary);
}

/* ── Lightbox overlay ────────────────────────────────── */
.gallery-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(0, 0, 0, 0.88);
	align-items: center;
	justify-content: center;
}

.gallery-lightbox.is-open { display: flex; }

.gallery-lightbox__img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: var(--r-sm);
	display: block;
}

.gallery-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--t);
}

.gallery-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }

.gallery-lightbox__close svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: var(--c-white);
}

/* ── Review form ─────────────────────────────────────── */
/* .review-form__heading is a <p> — avoids WC's .woocommerce #reviews h3 override */
.review-form__heading {
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--c-primary);
	margin-bottom: 1.5rem;
}

.review-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 640px;
}

.review-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.review-form__label {
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-primary);
}

/* Star picker */
.review-form__stars {
	display: flex;
	gap: 0.25rem;
}

.review-star {
	font-size: 1.75rem;
	line-height: 1;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--c-border);
	padding: 0;
	transition: color 0.1s, transform 0.1s;
}

.review-star:hover,
.review-star.is-hovered,
.review-star.is-selected { color: #f4c842; }

.review-star:hover { transform: scale(1.15); }

/* Review textarea */
.review-form textarea {
	resize: vertical;
	min-height: 8rem;
}

/* ── Product page responsive ─────────────────────── */
@media (max-width: 900px) {
	.product-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem 0;
	}

	.product-gallery__main {
		aspect-ratio: 4 / 3;
	}

	.product-gallery__thumbs {
		flex-wrap: wrap;
	}
}

/* ═══════════════════════════════════════════════════════
   PAGE HERO (shared — Partneriams, Apie mus, Brand)
═══════════════════════════════════════════════════════ */
.page-hero {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	margin-bottom: 4rem;
	background: var(--c-primary);
}

/* Full-bleed background image inside hero — set opacity directly to blend with navy bg */
.page-hero__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
	opacity: 0.5;
	display: block;
	pointer-events: none;
}

.page-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(31, 54, 77, 0.15);
}

.page-hero__overlay--gradient {
	background: linear-gradient(135deg, rgba(31,54,77,0.75) 40%, rgba(31,54,77,0.1));
}

.page-hero__content {
	position: relative;
	z-index: 1;
	padding: 4rem;
	max-width: 680px;
}

.page-hero--partneriams { min-height: 480px; display: flex; align-items: center; }
.page-hero--about       { min-height: 420px; display: flex; align-items: center; }

.page-hero__heading {
	font-size: var(--fs-lg);   /* 50px */
	color: var(--c-white);
	margin-bottom: 1.25rem;
	line-height: 1.15;
}

.page-hero__title {
	font-size: var(--fs-lg);   /* 35px */
	color: var(--c-white);
	margin-bottom: 1.25rem;
	line-height: 1.2;
}

.page-hero__text,
.page-hero__body {
	font-size: var(--fs-md);   /* 20px */
	color: var(--c-white);
	line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════
   CTA BANNER  (template-parts/cta-banner)
═══════════════════════════════════════════════════════ */
.cta-banner {
	margin-bottom: 4rem;
}

.cta-banner__inner {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	min-height: 380px;
	background: var(--c-primary);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cta-banner__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.cta-banner__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(31, 54, 77, 0.55);
}

.cta-banner__content {
	position: relative;
	z-index: 1;
	padding: 3.5rem 4rem;
	max-width: 660px;
}

.cta-banner__title {
	font-size: var(--fs-lg);
	color: var(--c-white);
	margin-bottom: 1rem;
	line-height: 1.25;
}

.cta-banner__subtitle {
	font-size: var(--fs-md);
	color: var(--c-white);
	margin-bottom: 2rem;
	line-height: 1.45;
}

.cta-banner__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 2rem;
	border-radius: var(--r-pill);
	background: var(--c-white);
	color: var(--c-primary);
	font-size: var(--fs-base);
	font-weight: 500;
	transition: opacity var(--t);
}

.cta-banner__btn:hover { opacity: 0.88; }

/* ═══════════════════════════════════════════════════════
   PARTNERIAMS PAGE
═══════════════════════════════════════════════════════ */
.partneriams-benefits__heading {
	font-size: var(--fs-lg);
	margin-top: 0;
	margin-bottom: 2.5rem;
}

.feature-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 3rem;
}

.feature-card {
	background: var(--c-card-bg);
	border-radius: var(--r-sm);
	padding: 3rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	text-align: center;
}

.feature-card__icon {
	width: 140px;
	height: 130px;
	flex-shrink: 0;
}

.feature-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.feature-card__text {
	font-size: var(--fs-md);
	color: var(--c-primary);
	line-height: 1.5;
}

.page-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 4rem;
}

/* ═══════════════════════════════════════════════════════
   APIE MUS PAGE
═══════════════════════════════════════════════════════ */
.about-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-bottom: 4rem;
}

.about-card {
	background: var(--c-card-bg);
	border-radius: var(--r-lg);
	padding: 3.5rem;
	min-height: 400px;
}

.about-card__title {
	font-size: var(--fs-lg);
	color: var(--c-primary);
	margin-bottom: 1.5rem;
	line-height: 1.25;
}

.about-card__text {
	font-size: var(--fs-md);
	color: var(--c-primary);
	line-height: 1.6;
}

.about-philosophy {
	margin-bottom: 4rem;
}

.about-philosophy__title {
	margin-bottom: 1.5rem;
}

.about-philosophy__text {
	font-size: var(--fs-md);
	color: var(--c-primary);
	line-height: 1.65;
	max-width: 820px;
}

/* ═══════════════════════════════════════════════════════
   KONTAKTAI PAGE
═══════════════════════════════════════════════════════ */
.contact-page__title {
	font-size: var(--fs-lg);
	color: var(--c-primary);
	margin-bottom: 2.5rem;
}

.contact-page__content {
	margin-bottom: 2.5rem;
}

.contact-info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 3rem;
}

.contact-info__label {
	display: block;
	font-size: var(--fs-md);
	color: var(--c-text-muted);
	margin-bottom: 0.5rem;
}

.contact-info__value {
	font-size: var(--fs-lg);
	color: var(--c-primary);
	font-weight: 500;
	transition: opacity var(--t);
	display: block;
}

.contact-info__value:hover { opacity: 0.7; }

.contact-page .container {
	max-width: 880px;
}

.contact-form-card {
	background: var(--c-card-bg);
	border-radius: var(--r-lg);
	padding: 8%;
	margin-bottom: 4rem;
}

/* Honeypot — visually hidden but not display:none so bots don't skip it */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form .form-field + .form-field {
	margin-top: 1.5rem;
}

.contact-form-card__title {
	font-size: var(--fs-lg);
	color: var(--c-primary);
	text-align: center;
	margin-bottom: 2.5rem;
}

.contact-form__textarea {
	width: 100%;
	min-height: 148px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	padding: 1rem 1.25rem;
	font-family: var(--font);
	font-size: 1rem;
	color: var(--c-primary);
	background: var(--c-white);
	resize: vertical;
	transition: border-color var(--t);
}

.contact-form__textarea:focus {
	outline: none;
	border-color: var(--c-primary);
}



.contact-form__status {
	min-height: 0;
	font-size: var(--fs-sm);
	border-radius: var(--r-sm);
	transition: padding var(--t), min-height var(--t);
}

.contact-form__status:not(:empty) {
	padding: 0.75rem 1rem;
	min-height: 2.5rem;
	margin-bottom: 1rem;
}

.contact-form__status--success { background: #d4edda; color: #155724; }
.contact-form__status--error   { background: #f8d7da; color: #721c24; }

.contact-form__submit {
	width: 100%;
	margin-top: 1.5rem;
}

.contact-form__submit:disabled { opacity: 0.6; cursor: wait; }

/* ═══════════════════════════════════════════════════════
   SINGLE BRAND PAGE
═══════════════════════════════════════════════════════ */

/* Hero: reduced bottom padding on brand page */
.brand-page__hero { padding-bottom: 3rem; }

/* Hot products → CTA hero gap reduction */
.brand-page .hot-products { padding-bottom: 2.5rem; }

/* Hero logo variant — content area holds brand logo, not text */
.hero__content--logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.brand-hero-logo {
	width: 220px;
	max-width: 80%;
	height: auto;
	display: block;
}

/* Brand description section */
.brand-desc {
	display: grid;
	grid-template-columns: 1fr 177px;
	gap: min(11rem, 14%);
	align-items: center;
	padding: 2rem 5rem;
	padding-bottom: var(--sp-2xl);
}

.brand-desc__title {
	font-size: var(--fs-lg);
	color: var(--c-primary);
	margin-bottom: 1.5rem;
}

.brand-desc__body {
	font-size: var(--fs-md);
	color: var(--c-primary);
	line-height: 1.7;
}

.brand-desc__logo {
	width: 177px;
	height: auto;
	display: block;
}

/* Brand slider */
.brand-slider {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	margin-bottom: var(--sp-2xl);
}

/* Dots nav — centered in right 45% of card, near top */
.brand-slider__nav {
	position: absolute;
	top: 1.5rem;
	/* center of right 45%: 55% + 22.5% = 77.5% from left */
	left: 77.5%;
	transform: translateX(-50%);
	z-index: 2;
	width: 160px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Line spans full nav width underneath the dots */
.brand-slider__nav-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 3px;
	background: rgba(184, 207, 230, 0.1);
}

.brand-slider__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(184, 207, 230, 0.35);
	cursor: pointer;
	padding: 0;
	position: relative;  /* sits above the line */
	z-index: 1;
	flex-shrink: 0;
	transition: background 0.2s;
}

.brand-slider__dot--active { background: var(--c-accent); }

.brand-slider__track { display: contents; }

/* Each slide: full-width, image behind, gradient overlay right half */
.brand-slider__slide {
	display: none;
	position: relative;
	min-height: 480px;
	border-radius: var(--r-lg);
	overflow: hidden;
}

.brand-slider__slide--active { display: block; }

.brand-slider__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Flat dark navy panel covering right 45% of slide */
.brand-slider__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		transparent 55%,
		var(--c-primary) 55%
	);
}

/* Quote text: bottom-right of slide */
.brand-slider__quote {
	position: absolute;
	bottom: 3rem;
	right: 2.5rem;
	width: 38%;
	font-size: var(--fs-md);
	color: var(--c-white);
	line-height: 1.65;
	z-index: 1;
}

/* ═══════════════════════════════════════════════════════
   WISHLIST PAGE
═══════════════════════════════════════════════════════ */
.wishlist-page {
	padding-bottom: var(--sp-2xl);
}

.wishlist-page__title {
	font-size: var(--fs-lg);
	color: var(--c-primary);
	margin-bottom: 2.5rem;
}

.wishlist-empty {
	text-align: center;
	padding: 5rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.wishlist-empty__icon svg { display: block; }

.wishlist-empty__msg {
	font-size: var(--fs-md);
	color: var(--c-text-muted);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — new pages
═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.feature-cards        { grid-template-columns: 1fr; }
	.about-cards          { grid-template-columns: 1fr; }
	.page-hero__content   { padding: 2.5rem; }
	.cta-banner__content  { padding: 2.5rem; }
	.cta-banner__inner    { min-height: 320px; }
	.brand-desc           { grid-template-columns: 1fr; gap: 1.5rem; }
	.brand-desc__logo     { display: none; }
	.brand-slider__slide  { min-height: 360px; }
}

@media (max-width: 768px) {
	.contact-info        { grid-template-columns: 1fr; gap: 1.5rem; }
	.contact-info__value { font-size: 1.75rem; }
	.brand-desc           { padding-right: 0; padding-left: 0; }
	.brand-slider__nav   { left: auto; right: 1.5rem; transform: none; }
	.brand-slider__quote { width: 50%; right: 1.5rem; }
}

@media (max-width: 600px) {
	.page-hero__heading  { font-size: 2.25rem; }
	.page-hero__content  { padding: 2rem; }
	.page-cta-row        { flex-direction: column; }
	.page-cta-row .btn-primary,
	.page-cta-row .btn-secondary { text-align: center; justify-content: center; }
	.about-card          { padding: 2rem; min-height: unset; }
	.cta-banner__content { padding: 2rem; }
	.cta-banner__title   { font-size: 1.5rem; }
	.brand-hero-logo     { width: 140px; }
	.brand-slider__slide { min-height: 300px; }
	.brand-slider__gradient {
		background: linear-gradient(to top, var(--c-primary) 30%, rgba(31,54,77,0.5) 60%, transparent 80%);
	}
	.brand-slider__quote { width: 90%; left: 50%; right: auto; transform: translateX(-50%); bottom: 2rem; }
	.brand-slider__nav   { left: 50%; right: auto; transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════
   AUTH PAGES — login & registration
   Full-page dark-navy shell; white card right side.
   Used by: page-prisijungti.php, page-registracija.php
═══════════════════════════════════════════════════════ */

/* body class set by get_header('auth') */
.auth-body {
	background: var(--c-primary);
	min-height: 100vh;
}

/* ── Outer layout ────────────────────────────────────── */
.auth-layout {
	min-height: 100vh;
	display: flex;
	align-items: stretch;
	padding: 2.5rem 3rem 2.5rem 5.5rem;
	max-width: 1100px;
	margin-inline: auto;
	width: 100%;
	box-sizing: border-box;
}

.auth-layout__left {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-right: 2rem;
	min-width: 0;
}

/* Logo */
.auth-logo-link { display: inline-block; }
.auth-logo {
	height: 40px;
	width: auto;
	filter: brightness(0) invert(1);
	display: block;
}

/* Spacer fills the empty middle area of the left panel (login page) */
.auth-layout__spacer { flex: 1; }

/* ── White card ──────────────────────────────────────── */
.auth-layout__card {
	width: 560px;
	flex-shrink: 0;
	align-self: center;        /* natural height, vertically centred in the dark panel */
	background: var(--c-white);
	border-radius: var(--r-lg);
	padding: 5rem 3.5rem;
	display: flex;
	flex-direction: column;
}

/* ── "Atgal" back link ───────────────────────────────── */
.auth-atgal {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-sm);
	text-decoration: none;
	cursor: pointer;
}

.auth-atgal:hover { color: var(--c-white); }

.auth-atgal__icon {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.auth-atgal__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.auth-atgal__line {
	width: 30px;
	height: 2px;
	background: currentColor;
	opacity: 0.6;
	flex-shrink: 0;
}

/* ── Left panel — registration heading + steps ───────── */
.auth-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 1.5rem;
}

.auth-panel__heading {
	font-size: 2.125rem;
	font-weight: 500;
	color: var(--c-white);
	line-height: 1.15;
	margin-bottom: 2.25rem;
}

/* ── Step indicator ──────────────────────────────────── */
.reg-steps {
	display: flex;
	flex-direction: column;
}

.reg-steps__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	position: relative;
	padding-bottom: 2.5rem;         /* gap through which the connector line passes */
}

.reg-steps__item:last-child { padding-bottom: 0; }

/* Vertical connector line between circles */
.reg-steps__item:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 17px;                     /* horizontal centre of 36px circle */
	top: 36px;
	width: 2px;
	height: 2.5rem;                 /* matches padding-bottom */
	background: rgba(255, 255, 255, 0.2);
	border-radius: 1px;
}

/* Circle */
.reg-steps__circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: var(--fs-xs);
	font-weight: 600;
	/* pending state */
	background: rgba(255, 255, 255, 0.1);
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.45);
}

/* Checkmark/number toggle inside circle */
.reg-steps__check { display: none; color: var(--c-white); line-height: 0; }
.reg-steps__num   { display: block; }

/* Completed / active step */
.reg-steps__item--done .reg-steps__circle {
	background: rgba(184, 207, 230, 0.32);
	border-color: transparent;
	color: var(--c-white);
}

.reg-steps__item--done .reg-steps__check { display: flex; }
.reg-steps__item--done .reg-steps__num   { display: none; }

/* Step label */
.reg-steps__label {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.3;
}

.reg-steps__item--done .reg-steps__label { color: var(--c-white); }

/* ── Login card content ──────────────────────────────── */
.login-card__heading {
	font-size: 2.25rem;
	font-weight: 500;
	color: var(--c-primary);
	text-align: center;
	margin-bottom: 2.25rem;
	margin-top: 1.5rem;
	line-height: 1.15;
}

.login-card__form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.login-card__remember-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.login-card__forgot {
	font-size: var(--fs-sm);
	color: var(--c-primary);
	white-space: nowrap;
}

.login-card__submit {
	width: 100%;
	height: 3.25rem;
	font-size: var(--fs-base);
}

/* Footer (register link row) — auth layout only */
.auth-layout .login-card__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin-top: auto;
	padding-top: 2.5rem;
	font-size: var(--fs-sm);
}

.auth-layout .login-card__footer span { color: var(--c-text-muted); }

.auth-layout .login-card__register {
	font-weight: 600;
	color: var(--c-primary);
}

/* ── Registration card steps ─────────────────────────── */
/* Hidden by default; JS adds .is-active to show the current step.
   Using class-based visibility rather than [hidden] attr to avoid
   specificity battles with display:flex. */
.reg-step           { display: none; flex-direction: column; flex: 1; }
.reg-step.is-active { display: flex; }

/* Inner wrapper — flex column so button always sits at the bottom */
.reg-card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	flex: 1;
}

.reg-card__btn {
	width: 100%;
	height: 3.25rem;
	margin-top: 3rem;
	font-size: var(--fs-base);
}

/* Two-column row (house + flat number on step 2) */
.form-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

/* Phone prefix + number row (step 3) */
.phone-row {
	display: flex;
	gap: 0.75rem;
}

.phone-prefix {
	width: auto;
	flex-shrink: 0;
	padding-inline: 1rem 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231f364d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 14px;
}

.phone-row input[type="tel"] { flex: 1; }

/* File upload zone (step 4) */
.file-upload-zone {
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-sm);
	padding: 1.75rem 1.5rem;
	text-align: center;
	background: var(--c-light-grey);
	cursor: pointer;
	transition: border-color var(--t);
	outline: none;
}

.file-upload-zone:hover,
.file-upload-zone:focus { border-color: var(--c-primary); }

.file-upload-zone.is-drag-over {
	border-color: var(--c-primary);
	background: var(--c-card-bg);
}

.file-upload-zone__icon {
	color: var(--c-text-muted);
	margin-bottom: 0.625rem;
	display: flex;
	justify-content: center;
}

.file-upload-zone__title {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-text-muted);
	margin-bottom: 0.25rem;
}

.file-upload-zone__hint {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

/* Uploaded file list */
.file-list { display: flex; flex-direction: column; gap: 0; }

.file-list__label {
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-primary);
	margin-bottom: 0.5rem;
}

.file-list__items { display: flex; flex-direction: column; gap: 0.5rem; }

/* Instruction text (step 4) */
.reg-docs-intro {
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--c-primary);
	line-height: 1.65;
}

/* ── Step 5: success screen ──────────────────────────── */
.reg-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 1;
	gap: 1.5rem;
	padding-block: 2rem;
}

/* Inline error message on registration step 4 */
.reg-error {
	color: #c0392b;
	background: #fdf2f0;
	border: 1px solid #f0c4be;
	border-radius: var(--r-sm);
	padding: 0.75rem 1rem;
	font-size: var(--fs-sm);
}

.reg-success__heading {
	font-size: 2.25rem;
	font-weight: 500;
	color: var(--c-primary);
	line-height: 1.15;
}

.reg-success__text {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	line-height: 1.7;
	max-width: 380px;
}

.reg-success__btn {
	width: 100%;
	height: 3.25rem;
}

/* ── Auth pages responsive ───────────────────────────── */
@media (max-width: 900px) {
	.auth-layout       { padding: 2rem 2rem 2rem 3rem; }
	.auth-layout__card { width: 480px; padding: 2.5rem 2.5rem; }
}

@media (max-width: 768px) {
	.auth-layout {
		flex-direction: column;
		padding: 1.5rem;
		align-items: stretch;
	}
	.auth-layout__left {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-right: 0;
		flex: unset;
	}
	.auth-panel       { display: none; }   /* step indicator collapses on mobile */
	.auth-layout__spacer { display: none; }
	.auth-atgal       { margin-top: 0; }
	.auth-layout__card { width: 100%; margin-top: 1rem; }
}

@media (max-width: 480px) {
	.auth-layout__card     { padding: 2rem 1.5rem; }
	.login-card__heading   { font-size: 1.75rem; }
	.reg-success__heading  { font-size: 1.75rem; }
	.form-row-2            { grid-template-columns: 1fr; }
	.phone-row             { flex-direction: column; }
	.phone-prefix          { width: 100%; }
}

/* ═══════════════════════════════════════════════════════
   CHECKOUT PAGE — woocommerce-checkout
═══════════════════════════════════════════════════════ */

.woocommerce-checkout .page-title { font-size: var(--fs-lg); margin-bottom: 2rem; }

/* WC wraps each field in <p class="form-row"> */
.woocommerce-checkout .form-row { margin-bottom: 1.25rem; }
.woocommerce-checkout .woocommerce-input-wrapper { display: block; }

/* Section headings */
.woocommerce-checkout h3 {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--c-primary);
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--c-border);
}

/* Coupon toggle notice uses .woocommerce-info — already styled globally */
/* Coupon form button */
.woocommerce-form-coupon .button,
.woocommerce-checkout-form-coupon .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
	padding-inline: 1.75rem;
	border-radius: var(--r-pill);
	background: var(--c-primary);
	color: var(--c-white);
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: 500;
	border: none;
	cursor: pointer;
	transition: opacity var(--t);
}
.woocommerce-form-coupon .button:hover,
.woocommerce-checkout-form-coupon .button:hover { opacity: 0.85; background: var(--c-primary); }

/* ── Customer details — 2-column grid ── */
.woocommerce-checkout #customer_details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

/* ── Select2 — match our native <select> pill style ── */
.select2-container--default .select2-selection--single {
	height: 3rem;
	padding: 0 2.5rem 0 1.25rem;
	background: var(--c-white) 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='%231f364d' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 1rem center;
	background-size: 16px;
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-pill);
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: border-color var(--t);
}
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--c-primary); }
.select2-container--default .select2-selection--single .select2-selection__rendered {
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: 500;
	color: var(--c-primary);
	padding: 0;
	line-height: normal;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #b9b9b9; font-weight: 400; }
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }

/* Select2 dropdown panel */
.select2-dropdown {
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-sm);
	font-family: var(--font);
	font-size: var(--fs-base);
	color: var(--c-primary);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--c-card-bg);
	color: var(--c-primary);
}
.select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--c-light-grey);
	color: var(--c-primary);
}
.select2-search--dropdown .select2-search__field {
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-pill);
	padding: 0.375rem 0.875rem;
	font-family: var(--font);
	outline: none;
}

/* ── Order review table ── */
#order_review_heading {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--c-primary);
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--c-border);
}
/* global table{} already gives it the correct card look */
.woocommerce-checkout-review-order-table tfoot tr td,
.woocommerce-checkout-review-order-table tfoot tr th {
	font-weight: 600;
}
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
	border-top: 1px solid var(--c-border);
}

/* ── Payment section ── */
#payment {
	background: var(--c-card-bg);
	border-radius: var(--r-lg);
	padding: 1.5rem;
	margin-top: 1.5rem;
}
#payment ul.payment_methods {
	margin-bottom: 1.25rem;
}
#payment ul.payment_methods li label {
	display: inline;
	font-size: var(--fs-base);
	font-weight: 500;
}
#payment .payment_box {
	background: var(--c-light-grey);
	border-radius: var(--r-sm);
	padding: 0.875rem 1rem;
	margin-top: 0.75rem;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* ── Place order button — full-width primary CTA ── */
#place_order {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
	padding-inline: 1.75rem;
	border-radius: var(--r-pill);
	background: var(--c-primary);
	color: var(--c-white);
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: 500;
	border: none;
	cursor: pointer;
	transition: opacity var(--t);
	margin-top: 1.25rem;
}
#place_order:hover { opacity: 0.85; }

/* ── Checkout responsive ── */
@media (max-width: 800px) {
	.woocommerce-checkout #customer_details {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════
   MY ACCOUNT — woocommerce-account
═══════════════════════════════════════════════════════ */

/* Two-column layout: nav left, content right — only when logged in */
.woocommerce-account.logged-in .woocommerce {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 220px;
	flex-shrink: 0;
	background: var(--c-card-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: 0.75rem;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1;
	min-width: 0;
}

/* Nav links */
.woocommerce-MyAccount-navigation ul { margin-bottom: 0; }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.625rem 1rem;
	border-radius: var(--r-sm);
	color: var(--c-primary);
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: background var(--t);
}
.woocommerce-MyAccount-navigation li.is-active a { font-weight: 600; }

/* ── Addresses ── */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

/* Title row: heading left, edit pill right */
.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

/* Edit link — small light pill */
a.edit {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.25rem 0.875rem;
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-pill);
	color: var(--c-primary);
	white-space: nowrap;
	transition: border-color var(--t), background var(--t);
}
a.edit:hover { border-color: var(--c-primary); background: var(--c-card-bg); }

/* ── CTA buttons — save address + save account details ── */
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
	padding-inline: 1.75rem;
	border-radius: var(--r-pill);
	background: var(--c-primary);
	color: var(--c-white);
	font-family: var(--font);
	font-size: var(--fs-base);
	font-weight: 500;
	border: none;
	cursor: pointer;
	transition: opacity var(--t);
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button.button[type="submit"]:hover { opacity: 0.85; }

/* ── Show/hide password toggle (injected by WC JS as span.show-password-input) ── */
.woocommerce-account .woocommerce-input-wrapper {
	position: relative;
	display: block;
}
/* Push text away from the toggle icon */
.woocommerce-account .woocommerce-input-wrapper input[type="password"],
.woocommerce-account .woocommerce-input-wrapper input[type="text"] {
	padding-right: 3rem;
}
.woocommerce-account .show-password-input {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--c-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1.125rem;
	line-height: 1;
	transition: color var(--t);
}
.woocommerce-account .show-password-input:hover { color: var(--c-primary); }
/* WC marks the toggle "visible" with this class */
.woocommerce-account .show-password-input.display-password { color: var(--c-primary); }

/* ── Responsive ── */
@media (max-width: 768px) {
	.woocommerce-account.logged-in .woocommerce { flex-direction: column; }
	.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; }
	.woocommerce-Addresses { grid-template-columns: 1fr; }
}