/* ==========================================================================
   Gernavo theme stylesheet

   Every visual decision
   is a custom property in :root below, so a design change is made once.
   In WordPress, the global colour tokens will be printed from the main-site
   "Global Store Settings" and override the defaults here.

   Layout rules used throughout:
   - Mobile-first: base styles are for small screens, media queries add.
   - Logical properties only (margin-inline-start, inset-inline-end, …) so
     RTL languages flip automatically with <html dir="rtl">.
   - No fixed heights on text containers: long German/Finnish words and
     taller scripts (Thai, Arabic, Urdu) must be able to grow.
   - Class names follow WooCommerce markup (ul.products, li.product,
     .shop_table, #order_review …) so the CSS carries over to the theme.
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */

:root {
	/* Colour: approved scheme "Teal & Ember". The main site's Global Store
	   Settings can override any of these (printed inline by inc/assets.php).
	   Every text/background pair meets WCAG AA (4.5:1). */
	--color-bg: #ffffff;
	--color-surface: #f6f3ee;         /* warm off-white panels */
	--color-text: #17252a;
	--color-text-muted: #56646a;
	--color-border: #e4ded4;
	--color-border-strong: #b8b0a3;
	--color-primary: #0f4c5c;         /* brand colour: header accents, buttons, prices */
	--color-primary-hover: #0b3a47;
	--color-primary-soft: #e3eef0;    /* tinted backgrounds: hero, page headers */
	--color-on-primary: #ffffff;
	--color-accent: #c2410c;          /* main calls to action (Woo .button.alt), badges */
	--color-accent-hover: #9a3412;
	--color-on-accent: #ffffff;
	--color-link: var(--color-primary);
	--color-price: var(--color-primary);
	--color-topbar-bg: var(--color-primary);
	--color-topbar-text: #ffffff;
	--color-footer-bg: #0b2f38;
	--color-footer-text: #e8eff0;
	--color-footer-muted: #a9bfc4;
	--color-focus: #2350d6;
	--color-error: #b3261e;
	--color-success: #1d6b3a;
	--color-placeholder: #ebe6de;

	/* Typography. System fonts: zero font downloads and good coverage for
	   every script. Per-script stacks are set in section 2. */
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	/* --font-heading is intentionally unset: headings fall back to the
	   per-script --font-sans. Set it only if the brand has a heading font. */
	--line-height: 1.6;
	--line-height-tight: 1.25;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--fs-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem);
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;

	/* Layout */
	--container: 1200px;
	--container-narrow: 760px;
	--gutter: 1rem;
	--header-height: 64px;
	--tap-target: 44px;

	/* Effects */
	--shadow-md: 0 8px 24px rgb(0 0 0 / 0.08);
	--transition: 150ms ease;
}

@media (min-width: 768px) {
	:root {
		--gutter: 1.5rem;
	}
}

/* 2. Per-script font stacks and rhythm
   Any element with a lang attribute re-reads the variables, so a Japanese
   snippet inside an English page still gets the right font.
   ========================================================================== */

[lang] {
	font-family: var(--font-sans);
	line-height: var(--line-height);
}

:lang(ja) {
	--line-height-tight: 1.4;
	--font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
	--line-height: 1.8;
}

:lang(zh) {
	--line-height-tight: 1.4;
	--font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
	--line-height: 1.8;
}

:lang(zh-TW), :lang(zh-HK), :lang(zh-Hant) {
	--font-sans: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}

:lang(ko) {
	--line-height-tight: 1.4;
	--font-sans: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
	--line-height: 1.8;
}

:lang(th) {
	--line-height-tight: 1.6;
	--font-sans: "Leelawadee UI", Thonburi, "Noto Sans Thai", Tahoma, sans-serif;
	--line-height: 1.9;
}

:lang(ar), :lang(fa) {
	--line-height-tight: 1.5;
	--font-sans: "Segoe UI", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;
	--line-height: 1.85;
}

:lang(ur) {
	--line-height-tight: 1.9;
	--font-sans: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Segoe UI", "Noto Sans Arabic", sans-serif;
	--line-height: 2.2;
}

:lang(he) {
	--font-sans: "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", Arial, sans-serif;
}

/* CJK: break lines between characters, but respect punctuation rules. */
:lang(ja), :lang(zh), :lang(ko) {
	line-break: strict;
}

/* Letter-spacing breaks Arabic-script joining; never apply it there. */
:lang(ar) *, :lang(fa) *, :lang(ur) * {
	letter-spacing: normal !important;
}

/* 3. Base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--line-height);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading, var(--font-sans));
	font-weight: var(--fw-semibold);
	line-height: var(--line-height-tight);
	overflow-wrap: break-word;
	hyphens: auto;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p, ul, ol, address, table {
	margin: 0 0 var(--space-4);
}

address {
	font-style: normal;
}

a {
	color: var(--color-link);
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

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

.skip-link:focus {
	position: fixed !important;
	inset-block-start: var(--space-2);
	inset-inline-start: var(--space-2);
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	clip: auto;
	clip-path: none;
	background: var(--color-bg);
	color: var(--color-text);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.muted {
	color: var(--color-text-muted);
}

/* 4. Buttons and forms
   ========================================================================== */

/* .button is the WooCommerce/WordPress button class. Buttons may wrap to
   two lines rather than overflow when a translation is long. */
.button,
button.button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap-target);
	padding: var(--space-2) var(--space-5);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font: inherit;
	font-weight: var(--fw-medium);
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.button:hover,
button.button:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	text-decoration: none;
}

.button--secondary {
	background: transparent;
	color: var(--color-primary);
}

.button--secondary:hover {
	background: var(--color-surface);
	color: var(--color-primary);
}

.button--block {
	width: 100%;
}

/* Woo's main call to action (Add to cart on product page, Proceed to
   checkout, Place order) uses .alt: give it the accent colour. */
.button.alt,
button.button.alt {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-on-accent);
	font-weight: var(--fw-semibold);
}

.button.alt:hover,
button.button.alt:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

.button--large {
	min-height: 52px;
	padding-inline: var(--space-6);
	font-size: var(--fs-md);
}

label {
	display: block;
	margin-block-end: var(--space-1);
	font-weight: var(--fw-medium);
}

.input-text,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
	width: 100%;
	min-height: var(--tap-target);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	line-height: 1.4;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--color-primary);
}

.required {
	color: var(--color-error);
	text-decoration: none;
	border: 0;
}

.optional {
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}

/* Woo form rows. Wrapped in a grid so first/last can sit side by side. */
.form-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
}

.form-row {
	margin: 0;
}

@media (min-width: 600px) {
	.form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.form-row-wide,
	.form-row-full {
		grid-column: 1 / -1;
	}
}

.checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-weight: var(--fw-regular);
}

.checkbox-label input {
	margin-block-start: 0.2em;
}

/* 5. Header
   ========================================================================== */

/* Notice bar above the header. Text comes from Country Settings
   ("notices"); hidden when empty. */
.topbar {
	background: var(--color-topbar-bg);
	color: var(--color-topbar-text);
	font-size: var(--fs-sm);
	text-align: center;
}

.topbar p {
	margin: 0;
	padding-block: var(--space-2);
}

.topbar a {
	color: inherit;
}

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	background: var(--color-bg);
	border-block-end: 1px solid var(--color-border);
}

.header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	min-height: var(--header-height);
}

.site-branding {
	flex: 1 1 auto;
}

/* [LOGO FILE] — text wordmark until the client supplies a logo. The logo is
   always Latin "Gernavo", so letter-spacing is safe here. */
.site-logo {
	display: inline-block;
	color: var(--color-primary);
	font-size: 1.375rem;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

/* Primary navigation: stacked under the header on mobile, inline on desktop. */
.primary-nav {
	order: 3;
	width: 100%;
}

.menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0 0 var(--space-3);
	list-style: none;
}

.menu a {
	display: flex;
	align-items: center;
	min-height: var(--tap-target);
	padding-inline: var(--space-2);
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.menu a:hover {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.menu .current-menu-item > a {
	color: var(--color-primary);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.45em;
}

/* JS hides the mobile menu until the toggle is used. Without JS the menu
   simply stays visible. */
.menu-toggle {
	display: none;
}

.js .menu-toggle {
	display: inline-flex;
}

.js .primary-nav {
	display: none;
}

.js .primary-nav.is-open {
	display: block;
}

@media (min-width: 900px) {
	.site-branding {
		flex: 0 0 auto;
	}

	.primary-nav,
	.js .primary-nav {
		display: block;
		order: 0;
		flex: 1 1 auto;
		width: auto;
	}

	.menu {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 var(--space-2);
		padding: 0;
	}

	.js .menu-toggle {
		display: none;
	}
}

/* Icon buttons in the header (menu toggle, cart, country switcher). */
.icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-width: var(--tap-target);
	min-height: var(--tap-target);
	padding: 0 var(--space-2);
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.icon-button:hover {
	background: var(--color-surface);
}

.header-cart__count {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 2px;
	min-width: 1.25rem;
	height: 1.25rem;
	padding-inline: 0.3rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	line-height: 1.25rem;
	text-align: center;
}

/* Country / language switcher: a native <details> dropdown, no JS needed. */
.country-switcher {
	position: relative;
}

.country-switcher > summary {
	list-style: none;
}

.country-switcher > summary::-webkit-details-marker {
	display: none;
}

.country-switcher__current {
	display: none;
	font-size: var(--fs-sm);
}

@media (min-width: 600px) {
	.country-switcher__current {
		display: inline;
	}
}

.country-switcher__list {
	position: absolute;
	inset-block-start: calc(100% + var(--space-2));
	inset-inline-end: 0;
	z-index: 30;
	width: max-content;
	min-width: 16rem;
	max-width: min(22rem, calc(100vw - 2 * var(--gutter)));
	max-height: 70vh;
	margin: 0;
	padding: var(--space-2);
	overflow-y: auto;
	list-style: none;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.country-switcher__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: var(--tap-target);
	padding: var(--space-1) var(--space-3);
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.country-switcher__list a:hover,
.country-switcher__list a[aria-current="true"] {
	background: var(--color-surface);
}

.country-switcher__list .muted {
	font-size: var(--fs-sm);
}

/* 6. Footer
   ========================================================================== */

.site-footer {
	margin-block-start: var(--space-8);
	padding-block: var(--space-7) var(--space-5);
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	font-size: var(--fs-sm);
}

.site-footer a,
.site-footer .site-logo {
	color: var(--color-footer-text);
}

.site-footer address {
	color: var(--color-footer-muted);
}

.site-footer address strong {
	color: var(--color-footer-text);
	font-weight: var(--fw-semibold);
}

.footer-contact {
	margin-block-start: var(--space-3);
}

.footer-text {
	max-width: 22rem;
	margin-block-start: var(--space-2);
	color: var(--color-footer-muted);
	line-height: 1.6;
}

.company-details {
	line-height: 1.7;
}

.footer-inner {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.footer-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.footer-inner {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
}

.footer-heading {
	margin-block-end: var(--space-3);
	color: #ffffff;
	font-size: var(--fs-base);
}

.footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--color-footer-text);
	text-decoration: none;
}

.footer-menu a:hover {
	text-decoration: underline;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2) var(--space-5);
	margin-block-start: var(--space-6);
	padding-block-start: var(--space-5);
	border-block-start: 1px solid rgb(255 255 255 / 0.15);
	color: var(--color-footer-muted);
}

.footer-bottom p {
	margin: 0;
}

/* 7. Page scaffolding
   ========================================================================== */

.site-main > .container:first-child {
	padding-block-start: var(--space-5);
}

.page-header {
	margin-block-end: var(--space-6);
}

/* Tinted band behind the title of inner pages (Shop, Cart, About, …). */
.page-band {
	margin-block-end: var(--space-7);
	padding-block: var(--space-6);
	background: var(--color-primary-soft);
}

.page-band .page-header {
	margin: 0;
}

.page-band .page-header > :last-child {
	margin-block-end: 0;
}

/* Small label above a heading. */
.eyebrow {
	display: block;
	margin-block-end: var(--space-2);
	/* Darker accent: small text must reach 4.5:1 on tinted panels too. */
	color: var(--color-accent-hover);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.page-header h1 {
	margin-block-end: var(--space-2);
}

/* Woo breadcrumb. The "/" separator is direction-neutral, so it reads
   correctly in RTL without flipping. */
.woocommerce-breadcrumb {
	margin-block-end: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

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

.woocommerce-breadcrumb .sep {
	margin-inline: var(--space-2);
}

.section {
	margin-block-start: var(--space-8);
}

.section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-block-end: var(--space-5);
}

.section-header h2 {
	margin: 0;
}

/* Long-form content: About, legal pages, product description. */
.entry-content {
	max-width: 70ch;
}

.entry-content h2 {
	margin-block-start: var(--space-6);
}

.entry-content img {
	border-radius: var(--radius-lg);
}

/* 8. Home
   ========================================================================== */

/* Hero: brand-coloured panel, text + image. */
.home-hero {
	display: grid;
	gap: var(--space-6);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
	padding: var(--space-6) var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-primary);
	color: var(--color-on-primary);
}

@media (min-width: 900px) {
	.home-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-8);
		padding: var(--space-8) var(--space-7);
	}
}

.home-hero h1 {
	color: var(--color-on-primary);
}

.home-hero .eyebrow {
	color: var(--color-on-primary);
	opacity: 0.85;
}

.home-hero__text p {
	max-width: 50ch;
	color: var(--color-on-primary);
	font-size: var(--fs-md);
	opacity: 0.9;
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: var(--space-5);
}

/* Secondary button on the dark hero: outlined in white. */
.home-hero .button--secondary {
	border-color: var(--color-on-primary);
	color: var(--color-on-primary);
}

.home-hero .button--secondary:hover {
	background: rgb(255 255 255 / 0.12);
}

.home-hero__media img {
	width: 100%;
	border-radius: var(--radius-md);
	background: var(--color-placeholder);
}

/* Three short service points (delivery / returns / payment). Text from
   Country Settings; the row is omitted when empty. */
.usp-list {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: minmax(0, 1fr);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.usp-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

.usp-list li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.usp-list .icon {
	width: 40px;
	height: 40px;
	padding: 9px;
	border-radius: var(--radius-pill);
	background: var(--color-primary-soft);
	color: var(--color-primary);
}

.usp-list strong {
	display: block;
	line-height: var(--line-height-tight);
}

.usp-list span {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

/* About teaser: soft panel. */
.home-about {
	padding: var(--space-6) var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-primary-soft);
}

@media (min-width: 900px) {
	.home-about {
		padding: var(--space-7);
	}
}

.home-about > * {
	max-width: 70ch;
}

/* 9. Product loop (Shop, Home)  →  woocommerce/loop, content-product.php
   ========================================================================== */

.woocommerce-result-count {
	margin-block-end: var(--space-5);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

ul.products {
	display: grid;
	gap: var(--space-6) var(--space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-7) var(--space-5);
	}
}

@media (min-width: 1100px) {
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

li.product {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2);
	color: inherit;
	text-decoration: none;
}

.woocommerce-LoopProduct-link img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-block-end: var(--space-1);
	border-radius: var(--radius-md);
	background: var(--color-placeholder);
	transition: transform 250ms ease, box-shadow 250ms ease;
}

.woocommerce-LoopProduct-link:hover img {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
	text-decoration: underline;
}

.woocommerce-loop-product__title {
	margin: 0;
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	line-height: var(--line-height-tight);
	/* Very long compound words (German, Finnish) must break, not overflow. */
	overflow-wrap: anywhere;
	hyphens: auto;
}

.price {
	display: block;
	color: var(--color-price);
	font-weight: var(--fw-bold);
}

/* Loop "Add to cart": outlined in the brand colour, fills on hover. */
li.product .button {
	width: 100%;
	padding-inline: var(--space-3);
	background: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
	font-size: var(--fs-sm);
}

li.product .button:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

/* 10. Single product  →  single-product.php, content-single-product.php
   ========================================================================== */

.product-single {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.product-single {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-8);
		align-items: start;
	}
}

.woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-lg);
	background: var(--color-placeholder);
}

.flex-control-thumbs {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.flex-control-thumbs button {
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	background: none;
	cursor: pointer;
}

.flex-control-thumbs button[aria-current="true"] {
	border-color: var(--color-primary);
}

.flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: calc(var(--radius-md) - 2px);
	background: var(--color-placeholder);
}

.summary .product_title {
	margin-block-end: var(--space-3);
	overflow-wrap: anywhere;
}

.summary .price {
	margin-block-end: var(--space-5);
	font-size: var(--fs-lg);
}

.price-tax-note {
	display: block;
	margin-block-start: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
}

.woocommerce-product-details__short-description {
	margin-block-end: var(--space-5);
	color: var(--color-text-muted);
}

.stock {
	margin-block-end: var(--space-4);
	font-size: var(--fs-sm);
}

.stock.in-stock {
	color: var(--color-success);
}

form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-end: var(--space-5);
}

form.cart .button {
	flex: 1 1 12rem;
}

.quantity .qty {
	width: 5.5rem;
	text-align: center;
}

/* Short service points under Add to cart (same source as the Home row). */
.product-assurance {
	display: grid;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	padding: var(--space-4);
	list-style: none;
	border-radius: var(--radius-md);
	background: var(--color-primary-soft);
	font-size: var(--fs-sm);
}

.product-assurance li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.product-assurance .icon {
	width: 18px;
	height: 18px;
	color: var(--color-primary);
}

.product_meta {
	padding-block-start: var(--space-4);
	border-block-start: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.product_meta > span {
	display: block;
}

/* Tabs rendered as stacked sections: no tab JS, and nothing is hidden. */
.woocommerce-tabs {
	margin-block-start: var(--space-8);
}

.woocommerce-Tabs-panel {
	padding-block: var(--space-6);
	border-block-start: 1px solid var(--color-border);
}

.woocommerce-product-attributes {
	width: 100%;
	max-width: 40rem;
	border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: var(--space-3) 0;
	border-block-end: 1px solid var(--color-border);
	text-align: start;
	vertical-align: top;
}

.woocommerce-product-attributes th {
	width: 40%;
	padding-inline-end: var(--space-4);
	font-weight: var(--fw-medium);
}

/* 11. Tables shared by Cart and Checkout  →  cart/cart.php, checkout/review-order.php
   ========================================================================== */

.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.shop_table th,
.shop_table td {
	padding: var(--space-4) var(--space-3);
	border-block-end: 1px solid var(--color-border);
	text-align: start;
	vertical-align: middle;
}

.shop_table thead th {
	padding-block: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.shop_table .product-thumbnail img {
	width: 80px;
	border-radius: var(--radius-sm);
	background: var(--color-placeholder);
}

.shop_table .product-name a {
	color: var(--color-text);
	font-weight: var(--fw-medium);
	overflow-wrap: anywhere;
}

.shop_table .product-name a.checkout-remove {
	display: inline-block;
	margin-inline-start: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular, 400);
	text-decoration: underline;
}

.shop_table .product-name a.checkout-remove:hover {
	color: var(--color-text);
}

.shop_table .product-subtotal,
.shop_table tfoot td {
	font-weight: var(--fw-semibold);
}

.shop_table .quantity .qty {
	width: 4.5rem;
}

a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-target);
	height: var(--tap-target);
	border-radius: var(--radius-pill);
	color: var(--color-text-muted);
	font-size: 1.5rem;
	line-height: 1;
	text-decoration: none;
}

a.remove:hover {
	background: var(--color-surface);
	color: var(--color-error);
}

.shop_table td.actions {
	padding-inline: 0;
	text-align: end;
}

/* Responsive cart table: each row becomes a card on small screens.
   Mirrors WooCommerce's own .shop_table_responsive + data-title pattern. */
@media (max-width: 767px) {
	.shop_table_responsive thead {
		display: none;
	}

	.shop_table_responsive tr {
		display: block;
		padding-block: var(--space-3);
		border-block-end: 1px solid var(--color-border);
	}

	.shop_table_responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		padding: var(--space-2) 0;
		border: 0;
		text-align: end;
	}

	.shop_table_responsive td[data-title]::before {
		content: attr(data-title);
		color: var(--color-text-muted);
		font-weight: var(--fw-medium);
		text-align: start;
	}

	.shop_table_responsive .product-remove {
		justify-content: flex-end;
	}

	.shop_table_responsive .product-thumbnail {
		display: none;
	}

	.shop_table_responsive td.actions {
		display: block;
		padding-block-start: var(--space-3);
	}

	.shop_table_responsive td.actions .button {
		width: 100%;
	}
}

/* 12. Cart  →  cart/cart.php, cart/cart-totals.php
   ========================================================================== */

.cart-layout {
	display: grid;
	gap: var(--space-7);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
	.cart-layout {
		grid-template-columns: minmax(0, 1fr) 22rem;
		align-items: start;
	}
}

.cart_totals {
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.cart_totals h2 {
	font-size: var(--fs-lg);
}

.cart_totals .shop_table th,
.cart_totals .shop_table td {
	padding-inline: 0;
	vertical-align: top;
}

.cart_totals .shop_table th {
	font-weight: var(--fw-regular);
}

.cart_totals .shop_table td {
	text-align: end;
}

.order-total th,
.order-total td {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold) !important;
	border-block-end: 0 !important;
}

.woocommerce-shipping-destination {
	margin: var(--space-1) 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
}

.wc-proceed-to-checkout {
	margin-block-start: var(--space-4);
}

.cart-empty-note {
	margin-block-start: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

/* 13. Checkout  →  checkout/form-checkout.php, review-order.php, payment.php
   ========================================================================== */

.checkout-layout {
	display: grid;
	gap: var(--space-7);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
	.checkout-layout {
		grid-template-columns: minmax(0, 1fr) 26rem;
		align-items: start;
	}

	.checkout-review {
		position: sticky;
		inset-block-start: calc(var(--header-height) + var(--space-4));
	}
}

.checkout fieldset {
	margin: 0 0 var(--space-6);
	padding: 0;
	border: 0;
}

.checkout legend,
.checkout-review h2 {
	margin-block-end: var(--space-4);
	padding: 0;
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
}

.checkout-review {
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.checkout-review .wc_payment_methods {
	background: var(--color-bg);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding-inline: 0;
	vertical-align: top;
}

.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child {
	text-align: end;
}

.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table tfoot th {
	font-weight: var(--fw-regular);
}

/* Payment methods */
.wc_payment_methods {
	margin: var(--space-5) 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.wc_payment_method + .wc_payment_method {
	border-block-start: 1px solid var(--color-border);
}

.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap-target);
	margin: 0;
	padding: var(--space-3) var(--space-4);
	cursor: pointer;
}

.payment_box {
	margin: 0 var(--space-4) var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.payment_box p {
	margin: 0;
}

.woocommerce-privacy-policy-text {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.place-order .checkbox-label {
	margin-block-end: var(--space-4);
}

/* 14. Contact
   ========================================================================== */

.contact-layout {
	display: grid;
	gap: var(--space-7);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.contact-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}
}

/* No contact details set: the form takes a single, readable column. */
.contact-layout > .entry-content:only-child {
	grid-column: 1 / -1;
	max-width: 48rem;
}

.contact-details dl {
	margin: 0;
}

.contact-details dt {
	margin-block-start: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.contact-details dd {
	margin: 0;
}

.contact-form .form-grid {
	margin-block-end: var(--space-5);
}

/* 15. Notices (WooCommerce .woocommerce-message / -info / -error)
   ========================================================================== */

.woocommerce-info,
.woocommerce-message {
	margin-block-end: var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-inline-start: 4px solid var(--color-primary);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}

/* 16. WooCommerce live markup
   The mockups used simplified markup; these rules map the same design onto
   the HTML WooCommerce actually outputs (templates we do not override).
   ========================================================================== */

/* Long-form width does not apply to shop pages (cart, checkout, account). */
.entry-content--wide {
	max-width: none;
}

/* Notices */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	list-style: none;
	border-inline-start: 4px solid var(--color-primary);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}

.woocommerce-error {
	display: block;
	border-inline-start-color: var(--color-error);
}

.woocommerce-error li + li {
	margin-block-start: var(--space-1);
}

.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
	min-height: 36px;
	padding-block: var(--space-1);
	font-size: var(--fs-sm);
}

/* Sale badge */
.onsale {
	position: absolute;
	inset-block-start: var(--space-3);
	inset-inline-start: var(--space-3);
	z-index: 2;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

li.product,
.single-product div.product {
	position: relative;
}

/* Prices: struck-through regular price next to a sale price. */
.price del {
	margin-inline-end: var(--space-2);
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}

.price ins {
	text-decoration: none;
}

/* Ratings/reviews are not used (reviews tab removed in inc/woocommerce.php). */
.star-rating,
.woocommerce-product-rating {
	display: none;
}

/* Single product: gallery + summary side by side, tabs full width. */
.single-product div.product {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-8);
		align-items: start;
	}
}

.single-product div.product > .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-block-start: 0;
}

.woocommerce-product-gallery {
	margin: 0;
}

.woocommerce-product-gallery__wrapper {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
}

.woocommerce-product-gallery__image:first-child {
	grid-column: 1 / -1;
}

.woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: var(--color-placeholder);
}

.woocommerce-product-gallery__image:first-child img {
	border-radius: var(--radius-lg);
}

.woocommerce-product-gallery__trigger {
	display: none;
}

.summary .product_title {
	font-size: var(--fs-2xl);
}

/* Add to cart: large accent button next to the quantity. */
.single_add_to_cart_button {
	min-height: 52px;
	padding-inline: var(--space-6);
	font-size: var(--fs-md);
}

/* Variable products */
table.variations {
	width: 100%;
	margin-block-end: var(--space-4);
	border-collapse: collapse;
}

table.variations tr {
	display: block;
	margin-block-end: var(--space-3);
}

table.variations th,
table.variations td {
	display: block;
	padding: 0;
	text-align: start;
}

table.variations th label {
	margin-block-end: var(--space-1);
}

/* Variation buttons (inc/variation-buttons.php). The select stays for
   WooCommerce's script and is only hidden once the button script runs. */
.has-variation-buttons .variation-select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.variation-buttons {
	display: none;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.has-variation-buttons .variation-buttons {
	display: flex;
}

.variation-button {
	min-width: var(--tap-target);
	min-height: var(--tap-target);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-sm);
	line-height: 1.2;
	cursor: pointer;
}

.variation-button:hover {
	border-color: var(--color-primary);
}

.variation-button[aria-pressed="true"] {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #fff;
}

.variation-button.is-unavailable {
	border-style: dashed;
	color: var(--color-text-muted);
	text-decoration: line-through;
}

.reset_variations {
	display: inline-block;
	margin-block-start: var(--space-2);
	font-size: var(--fs-sm);
}

.woocommerce-variation-price {
	margin-block-end: var(--space-3);
}

.woocommerce-variation-price .price {
	font-size: var(--fs-lg);
}

.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.woocommerce-variation-add-to-cart .button {
	flex: 1 1 12rem;
}

.woocommerce-variation-add-to-cart-disabled .button {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Stacked tab panels: WooCommerce prints its own h2 in each panel. */
.woocommerce-Tabs-panel h2 {
	font-size: var(--fs-xl);
}

/* Description inside the summary column (inc/woocommerce.php). */
.summary .woocommerce-tabs {
	margin-block-start: var(--space-6);
}

.summary .woocommerce-Tabs-panel {
	padding-block: var(--space-5) 0;
}

.summary .woocommerce-Tabs-panel h2 {
	font-size: var(--fs-lg);
}

.summary .woocommerce-Tabs-panel img {
	max-width: 100%;
	height: auto;
}

/* Cart page: table + totals side by side. */
.woocommerce-cart .entry-content > .woocommerce {
	display: grid;
	gap: var(--space-7);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
	.woocommerce-cart .entry-content > .woocommerce {
		grid-template-columns: minmax(0, 1fr) 22rem;
		align-items: start;
	}
}

.woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .entry-content > .woocommerce > .cart-empty,
.woocommerce-cart .entry-content > .woocommerce > .return-to-shop,
.woocommerce-cart .entry-content > .woocommerce > .wc-empty-cart-message {
	grid-column: 1 / -1;
}

.cart-collaterals .cross-sells {
	display: none;
}

.shop_table td.actions .coupon {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	float: inline-start;
}

.shop_table td.actions .coupon .input-text {
	width: 12rem;
}

.shop_table td.actions > .button {
	float: inline-end;
}

.shop_table td.actions .button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Grid children may shrink below their content width (tables otherwise
   force the page wider than a 320px screen). */
.woocommerce-cart .entry-content > .woocommerce > * {
	min-width: 0;
}

/* Mobile: coupon field and its button share one full-width row. */
@media (max-width: 767px) {
	/* The cart rows are shown as cards: drop table layout entirely so the
	   table cannot be wider than the screen. */
	.shop_table_responsive,
	.shop_table_responsive tbody {
		display: block;
		width: 100%;
	}

	.shop_table_responsive td > * {
		min-width: 0;
	}

	.shop_table_responsive td a {
		overflow-wrap: anywhere;
	}

	.shop_table td.actions .coupon {
		display: flex;
		flex-wrap: nowrap;
		float: none;
		width: 100%;
		margin-block-end: var(--space-3);
	}

	.shop_table td.actions .coupon .input-text {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.shop_table_responsive td.actions .coupon .button {
		width: auto;
	}

	.shop_table td.actions > .button {
		float: none;
	}
}

.woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shipping-calculator-button {
	font-size: var(--fs-sm);
}

/* Checkout: customer details left, order summary right. */
form.checkout {
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
	form.checkout {
		grid-template-columns: minmax(0, 1fr) 26rem;
		/* The tall form spans rows 2-3; give its extra height to the last
		   row so "Your order" and the summary box stay joined. */
		grid-template-rows: auto auto 1fr;
		column-gap: var(--space-7);
		align-items: start;
	}

	form.checkout > .woocommerce-NoticeGroup {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 2 / span 2;
	}

	form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 2;
	}

	form.checkout > #order_review {
		grid-column: 2;
		grid-row: 3;
	}
}

.col2-set .col-1,
.col2-set .col-2 {
	margin-block-end: var(--space-6);
}

.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3,
#order_review_heading {
	font-size: var(--fs-lg);
}

#order_review_heading {
	margin: 0;
	padding: var(--space-5) var(--space-5) var(--space-3);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--color-surface);
}

#order_review {
	margin-block-end: var(--space-6);
	padding: 0 var(--space-5) var(--space-5);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	background: var(--color-surface);
}

#order_review .wc_payment_methods {
	background: var(--color-bg);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-address-fields__field-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.woocommerce-billing-fields__field-wrapper .form-row:not(.form-row-first):not(.form-row-last),
	.woocommerce-shipping-fields__field-wrapper .form-row:not(.form-row-first):not(.form-row-last),
	.woocommerce-address-fields__field-wrapper .form-row:not(.form-row-first):not(.form-row-last) {
		grid-column: 1 / -1;
	}
}

.woocommerce-input-wrapper {
	display: block;
}

.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid select {
	border-color: var(--color-error);
}

label.checkbox,
.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-weight: var(--fw-regular);
}

label.checkbox input,
.woocommerce-form__label-for-checkbox input {
	margin-block-start: 0.2em;
}

#ship-to-different-address {
	font-size: var(--fs-base);
}

/* Payment methods (WooCommerce: input + label siblings). */
.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
}

.wc_payment_method > label {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.wc_payment_method .payment_box {
	flex-basis: 100%;
	margin: 0;
}

#payment .woocommerce-notice,
#payment .woocommerce-info {
	margin: var(--space-4) 0;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-block-end: var(--space-4);
	font-size: var(--fs-sm);
}

#place_order {
	width: 100%;
	min-height: 52px;
	font-size: var(--fs-md);
}

/* Order received */
ul.order_details {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

ul.order_details li {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-size: var(--fs-sm);
}

ul.order_details li strong {
	display: block;
	font-size: var(--fs-base);
}

/* My account */
.woocommerce-account.logged-in .entry-content > .woocommerce {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.woocommerce-account.logged-in .entry-content > .woocommerce {
		grid-template-columns: 14rem minmax(0, 1fr);
	}
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--tap-target);
	padding-inline: var(--space-3);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover {
	background: var(--color-primary-soft);
	color: var(--color-primary);
	font-weight: var(--fw-semibold);
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-width: 28rem;
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row,
.woocommerce-ResetPassword .form-row {
	margin-block-end: var(--space-4);
}

.u-columns.col2-set {
	display: grid;
	gap: var(--space-7);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.u-columns.col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-Addresses {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.woocommerce-Addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The show-password toggle depends on WooCommerce's own stylesheet. */
.show-password-input {
	display: none;
}

/* Contact form (Fluent Forms). Its visual skin is switched off in
   inc/fluentform.php; inputs/labels use the theme's base form styles. */
.frm-fluent-form .ff-el-group {
	margin-block-end: var(--space-4);
}

.frm-fluent-form .ff-el-input--label label {
	display: inline-block;
	margin-block-end: var(--space-1);
	font-weight: var(--fw-medium);
}

.frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	content: " *";
	color: var(--color-error);
}

.frm-fluent-form .ff-el-form-control {
	width: 100%;
	min-height: var(--tap-target);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	line-height: 1.4;
}

.frm-fluent-form textarea.ff-el-form-control {
	min-height: 8rem;
}

.frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--color-error);
}

.frm-fluent-form .error.text-danger,
.frm-fluent-form .ff-el-is-error .text-danger {
	margin-block-start: var(--space-1);
	color: var(--color-error);
	font-size: var(--fs-sm);
}

.frm-fluent-form .ff-el-tc label,
.frm-fluent-form .ff_gdpr_field + span,
.frm-fluent-form .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-weight: var(--fw-regular);
}

.frm-fluent-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: var(--space-2) var(--space-6);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-md);
	background: var(--color-accent);
	color: var(--color-on-accent);
	font: inherit;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.frm-fluent-form .ff-btn-submit:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

.ff-message-success {
	padding: var(--space-4);
	border-inline-start: 4px solid var(--color-success);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}

/* 17. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}