/*
Theme Name: Kitsepea
Theme URI: https://kitsepea.ee
Author: Kitsepea
Description: Block theme for Kitsepea. Light, minimal, Botiga-inspired visual system: white canvas, generous whitespace, pill-shaped buttons, soft flat shadows and generously rounded surfaces.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 2.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webshop-theme
Tags: e-commerce, block-theme, full-site-editing
*/

/* ==========================================================================
   Kitsepea theme — rebuilt from scratch, then restyled toward a Botiga-
   inspired visual language.

   Botiga (athemes.com WooCommerce theme) leans further into minimalism
   than the earlier Stripe-derived system: fully rounded (pill) buttons
   everywhere, looser whitespace, flatter product cards with quiet neutral
   shadows instead of layered blue-tinted depth, and a plainer type scale.
   The colour palette, type families and layout rhythm inherited from the
   previous system are kept — only shape language (radius, shadow) and
   button treatment changed, so this is a restyle, not a rebuild.

   Design tokens live in theme.json so the block editor offers the same
   palette, type scale and spacing the front end uses. This file holds only
   what theme.json cannot express: component styling, WooCommerce surfaces,
   and layout behaviour.

   Specificity note: WooCommerce scopes many of its rules through a parent
   class, e.g. `.wc-block-components-order-summary .wc-...__description`,
   which is (0,2,0). A single-class selector loses silently. Where a rule
   below repeats a class (.foo.foo) it is deliberately matching that
   weight — the repeat count was derived per selector from WooCommerce's
   own compiled CSS, not guessed.
   ========================================================================== */

:root {
	/* Surfaces */
	--base: #ffffff;
	--surface: #f6f9fc;
	--surface-2: #eef4fa;

	/* Ink scale. Stripe's key move is that "black" is a very dark navy —
	   it reads warmer than #000 and ties the text to the brand. */
	--ink: #0a2540;
	--body: #425466;
	--muted: #697386;

	--line: #e3e8ee;
	--line-strong: #cfd7e0;

	/* Accent. --brand is a surface/fill colour; --brand-ink is the text
	   variant, darkened so it passes AA on both white and the tinted
	   surface. Using the fill colour for text is the most common way this
	   palette fails an audit. */
	--brand: #635bff;
	--brand-ink: #544cea;
	--brand-deep: #4b44d6;
	--brand-tint: #f5f4ff;
	--accent: #00d4ff;

	--positive: #0e7c5a;
	--warning: #bb5504;

	--wash: linear-gradient(101deg, #635bff 0%, #8b5cf6 48%, #00d4ff 100%);

	/* Botiga-style rounding: fully rounded (pill) buttons everywhere, and
	   generously rounded cards/surfaces. The previous system used
	   conservative geometric rounding (Stripe); this one leans into soft,
	   friendly shapes, which is the signature of the Botiga reference. */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-full: 999px;

	/* Flat, quiet shadows — Botiga relies on whitespace and flat colour for
	   depth, not layered shadow. Kept neutral-grey rather than blue-tinted. */
	--shadow-xs: 0 1px 2px rgba(20, 20, 30, 0.05);
	--shadow-sm: 0 1px 3px rgba(20, 20, 30, 0.06);
	--shadow-md: 0 6px 16px -4px rgba(20, 20, 30, 0.10);
	--shadow-lg: 0 16px 32px -8px rgba(20, 20, 30, 0.14);

	--ease: cubic-bezier(0.2, 0, 0.2, 1);
	--t-fast: 130ms;
	--t-base: 220ms;

	--header-h: 72px;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Prices, quantities and totals align in columns when digits share a width. */
.wc-block-components-formatted-money-amount,
.woocommerce-Price-amount,
.wp-block-woocommerce-product-price,
.wc-block-components-totals-item__value {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

::selection {
	background: var(--brand);
	color: #fff;
}

/* One focus treatment for the whole interface, keyboard-only. */
:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 24px);
}

img {
	max-width: 100%;
	height: auto;
}

a,
button,
input,
select,
textarea,
.wp-block-button__link,
.wc-block-components-button.wc-block-components-button {
	transition:
		color var(--t-fast) var(--ease),
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		box-shadow var(--t-base) var(--ease),
		transform var(--t-base) var(--ease);
}

.screen-reader-text {
	/* !important is required here: this must win against any block or
	   plugin style, or the link becomes visible for sighted users. */
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap !important;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip-path: none;
	border-radius: var(--r-sm);
	background: var(--ink);
	color: #fff;
	box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Buttons

   Three tiers, and the hierarchy is enforced by restraint: the gradient
   appears once per page at most, on the primary action in the buying flow.
   Everything else is ink, outline or link. A page where every button is
   the loudest button has no hierarchy at all.
   ========================================================================== */

.wp-block-button__link,
button,
input[type="submit"] {
	border-radius: var(--r-full);
	font-weight: 600;
	letter-spacing: -0.006em;
	cursor: pointer;
}

/* Primary: solid ink. The workhorse. */
.wp-block-button:not(.is-style-outline):not(.is-style-brand) .wp-block-button__link {
	background: var(--ink);
	border: 1px solid var(--ink);
	color: #fff;
	box-shadow: var(--shadow-xs);
}

.wp-block-button:not(.is-style-outline):not(.is-style-brand) .wp-block-button__link:hover {
	background: #0e3355;
	border-color: #0e3355;
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

/* Brand: violet fill, for the moment that matters most on a page. */
.wp-block-button.is-style-brand .wp-block-button__link {
	background: var(--brand);
	border: 1px solid var(--brand);
	color: #fff;
	box-shadow: var(--shadow-xs);
}

.wp-block-button.is-style-brand .wp-block-button__link:hover {
	background: var(--brand-deep);
	border-color: var(--brand-deep);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

/* Outline: secondary actions, repeated elements like product cards. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: #fff;
	border: 1px solid var(--line-strong);
	color: var(--ink);
	box-shadow: var(--shadow-xs);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--brand);
	color: var(--brand-ink);
	box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Header

   Sticky, translucent, with a hairline that only appears once the page has
   scrolled — a detail every reference storefront shares, because a border
   under a header sitting on its own hero looks like a seam.
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	/* backdrop-filter on the element itself creates a new containing block for
	   position:fixed children — the Navigation overlay ends up clipped inside
	   the header rather than covering the full viewport.
	   Fix: move the blur to a ::before pseudo-element so the element itself has
	   no backdrop-filter and fixed descendants escape to the viewport. */
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
	contain: none;
	isolation: auto;
}

/* The frosted-glass background lives on ::before so it never becomes a
   containing block for fixed children. */
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	pointer-events: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	min-height: var(--header-h);
	max-width: min(1180px, 92vw);
	margin-inline: auto;
	flex-wrap: nowrap;
}

.site-header .wp-block-site-title {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.site-header .wp-block-site-title a {
	color: var(--ink);
	text-decoration: none;
}

.site-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.site-header__nav .wp-block-navigation__container {
	gap: clamp(14px, 1.8vw, 30px);
}

.site-header__nav .wp-block-navigation-item__content {
	color: var(--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
}

.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .current-menu-item .wp-block-navigation-item__content {
	color: var(--ink);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	margin-left: auto;
}

/* Mobile menu overlay.
   The Navigation block renders the overlay with position:fixed. backdrop-filter
   on any ancestor creates a new containing block for fixed descendants
   (CSS spec §9.3), so the overlay was clipped inside the header.
   The real fix is moving backdrop-filter to .site-header::before (above).
   These rules just ensure correct stacking and full-screen coverage. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	z-index: 10000 !important;
	padding: clamp(24px, 6vw, 48px);
	background: #fff;
	overflow-y: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--ink);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--ink);
	min-width: 44px;
	min-height: 44px;
}

/* Mini cart in the header */
.site-header .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 12px;
	border-radius: var(--r-full);
	color: var(--ink);
}

.site-header .wc-block-mini-cart__button:hover {
	background: var(--surface);
}

.site-header .wc-block-mini-cart__badge {
	background: var(--brand);
	color: #fff;
	font-weight: 700;
}

/* Language switcher (Polylang) in the header, styled to match the
   pill-button / minimal conventions used across the rest of the header. */
.lang-switcher.wp-block-polylang-language-switcher {
	display: flex;
	align-items: center;
}

.lang-switcher ul.pll-parent-menu-item,
.lang-switcher ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 4px;
	border-radius: var(--r-full);
	background: var(--surface);
}

.lang-switcher .lang-item a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: var(--r-full);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.lang-switcher .lang-item a:hover {
	background: #fff;
}

.lang-switcher .lang-item.current-lang a {
	background: var(--brand);
	color: #fff;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	margin-top: clamp(4rem, 9vw, 7.5rem);
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--line);
	background: var(--surface);
}

.site-footer__inner {
	max-width: min(1180px, 92vw);
	margin-inline: auto;
}

.site-footer a {
	color: var(--body);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--ink);
}

.site-footer__legal {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ==========================================================================
   Hero

   A soft tinted wash rather than a hard colour block. The gradient sits at
   low opacity behind the content so the page still reads as white — the
   colour is atmosphere, not a panel.
   ========================================================================== */

.hero {
	position: relative;
	padding: clamp(3.5rem, 9vw, 7.5rem) 0 clamp(3rem, 7vw, 6rem);
	overflow: hidden;
	isolation: isolate;
}

.hero::before {
	position: absolute;
	inset: -30% -10% auto -10%;
	z-index: -1;
	height: 620px;
	background: radial-gradient(60% 60% at 50% 0%, rgba(99, 91, 255, 0.14) 0%, rgba(99, 91, 255, 0) 70%);
	content: "";
}

.hero__eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	background: #fff;
	box-shadow: var(--shadow-xs);
	color: var(--brand-ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.hero h1 {
	max-width: 18ch;
	margin: 0 0 20px;
}

.hero__lead {
	max-width: 56ch;
	margin: 0 0 32px;
	color: var(--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   Section furniture
   ========================================================================== */

.section {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.section--tinted {
	background: var(--surface);
	border-block: 1px solid var(--line);
}

.section__label {
	margin: 0 0 10px;
	color: var(--brand-ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.section__lead {
	max-width: 58ch;
	color: var(--body);
	font-size: var(--wp--preset--font-size--large);
}

/* ==========================================================================
   Product grids

   Intrinsic, not breakpoint-driven: the browser fits as many columns as the
   width allows, so one rule covers a phone and an ultrawide. The card
   states its minimum; the container decides how many fit.
   ========================================================================== */

.product-grid .wp-block-woocommerce-product-template,
.wp-block-woocommerce-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
	gap: clamp(18px, 2.2vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-woocommerce-product-template li {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	overflow: hidden;
	text-align: left;
	transition:
		transform var(--t-base) var(--ease),
		border-color var(--t-base) var(--ease),
		box-shadow var(--t-base) var(--ease);
}

.wp-block-woocommerce-product-template li:hover {
	transform: translateY(-2px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-sm);
}

.wp-block-woocommerce-product-image {
	margin: 0;
	background: var(--surface);
	overflow: hidden;
}

.wp-block-woocommerce-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}

/* The image moves, not the card. Slow, so it reads as looking closer at
   the product rather than the interface twitching. */
.wp-block-woocommerce-product-template li:hover .wp-block-woocommerce-product-image img {
	transform: scale(1.035);
}

.wp-block-woocommerce-product-template .wp-block-post-title {
	margin: 18px 18px 6px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.008em;
}

.wp-block-woocommerce-product-template .wp-block-post-title a {
	color: var(--ink);
	text-decoration: none;
}

/* Whole card is the target, not just the title. */
.wp-block-woocommerce-product-template .wp-block-post-title a::after {
	position: absolute;
	inset: 0;
	content: "";
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price {
	margin: 0 18px;
	color: var(--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button {
	position: relative;
	z-index: 1;
	margin: 16px 18px 18px;
	padding-top: 0;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button .wp-block-button__link {
	display: flex;
	width: 100%;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	background: #fff;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	box-shadow: none;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button .wp-block-button__link:hover {
	border-color: var(--brand);
	color: var(--brand-ink);
	box-shadow: var(--shadow-sm);
}

.wc-block-components-product-sale-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	border-radius: var(--r-full);
	background: var(--ink);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	padding: 4px 10px;
}

/* ==========================================================================
   Shop archive
   ========================================================================== */

.shop-main {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.shop-header {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.shop-header h1 {
	margin: 0 0 12px;
}

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--wp--preset--font-size--small);
}

.shop-empty {
	padding: clamp(3rem, 7vw, 5rem) 0;
	text-align: center;
}

.shop-empty p {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--body);
}

.wp-block-query-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
	gap: 8px;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	min-width: 40px;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	background: #fff;
	color: var(--body);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers:hover {
	border-color: var(--line-strong);
	color: var(--ink);
}

.wp-block-query-pagination .page-numbers.current {
	border-color: var(--ink);
	background: var(--ink);
	color: #fff;
}

/* ==========================================================================
   Product page
   ========================================================================== */

.product-main {
	padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
}

.product-layout {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 64px);
	align-items: flex-start;
}

.product-layout > .wp-block-column:first-child {
	flex: 1 1 clamp(320px, 48%, 640px);
	min-width: min(320px, 100%);
}

.product-summary {
	flex: 1 1 34ch;
	min-width: min(320px, 100%);
}

.woocommerce-product-gallery img,
.wp-block-woocommerce-product-image-gallery img {
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	box-shadow: none;
}

.product-summary h1 {
	margin: 0 0 14px;
	font-size: var(--wp--preset--font-size--xx-large);
}

.product-price {
	margin-bottom: 8px;
	color: var(--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.product-excerpt {
	max-width: 52ch;
	margin-bottom: 8px;
	color: var(--body);
}

/* Buy box: everything transactional in one panel, the pattern every
   high-converting storefront shares. */
.product-main form.cart {
	margin-top: 24px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: none;
}

.product-main form.cart .quantity {
	margin-bottom: 14px;
}

.product-main form.cart .quantity input {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	color: var(--ink);
}

.product-main button[type="submit"].single_add_to_cart_button {
	display: flex;
	width: 100%;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--brand);
	border-radius: var(--r-full);
	background: var(--brand);
	color: #fff;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	box-shadow: none;
}

.product-main button[type="submit"].single_add_to_cart_button:hover {
	background: var(--brand-deep);
	border-color: var(--brand-deep);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

/* Trust signals sit beside the buy button, where the customer is deciding —
   not in a footer link. */
.product-trust {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 12px;
	list-style: none;
	padding-left: 0;
}

.product-trust li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	color: var(--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.product-trust li::before {
	color: var(--positive);
	content: "✓";
	flex-shrink: 0;
	font-weight: 700;
}

/* Stock state. WooCommerce only emits .stock when stock management is on;
   these rules are dormant until it is, and exist so that day does not
   produce an unstyled line. */
.product-main .stock.in-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	color: var(--positive);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.product-main .stock.in-stock::before {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--positive);
	content: "";
}

.product-main .stock.out-of-stock {
	color: var(--warning);
	font-weight: 600;
}

.wp-block-woocommerce-breadcrumbs {
	color: var(--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-woocommerce-breadcrumbs a {
	color: var(--muted);
}

.wp-block-woocommerce-breadcrumbs a:hover {
	color: var(--ink);
}

/* ==========================================================================
   Cart and checkout

   These are React blocks. WooCommerce ships light-theme defaults, which for
   once agree with this design — so the work here is fitting them to the
   type scale and spacing rather than repainting every surface.
   ========================================================================== */

.cart-main,
.checkout-main {
	padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem);
}

.cart-main h1,
.checkout-main h1 {
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.wc-block-components-sidebar,
.wc-block-cart__sidebar.wc-block-cart__sidebar.wc-block-cart__sidebar.wc-block-cart__sidebar,
.wc-block-checkout__sidebar.wc-block-checkout__sidebar {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	padding: 22px;
}

@media (min-width: 783px) {
	.wc-block-checkout__sidebar.wc-block-checkout__sidebar {
		position: sticky;
		top: calc(var(--header-h) + 16px);
	}
}

/* Checkout steps as cards. WooCommerce's default is a flat run of sections
   divided by hairlines, which reads as one undifferentiated column. */
.wc-block-components-checkout-step.wc-block-components-checkout-step {
	margin-bottom: 18px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: none;
}

.wc-block-components-checkout-step__title {
	color: var(--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}

.wc-block-components-checkout-step__description {
	color: var(--muted);
}

/* Form controls */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select__select.wc-blocks-components-select__select.wc-blocks-components-select__select {
	min-height: 48px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--ink);
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select.wc-blocks-components-select__select:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18);
	outline: none;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label.wc-blocks-components-select__label.wc-blocks-components-select__label {
	color: var(--muted);
}

.wc-block-components-text-input.is-active label {
	color: var(--brand-ink);
}

.wc-block-components-validation-error.wc-block-components-validation-error {
	color: #b3093c;
	font-weight: 600;
}

/* The control customers touch most on a phone. */
.wc-block-components-quantity-selector {
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	background: #fff;
}

.wc-block-components-quantity-selector__input.wc-block-components-quantity-selector__input {
	min-height: 44px;
	background: transparent;
	color: var(--ink);
}

.wc-block-components-quantity-selector__button.wc-block-components-quantity-selector__button {
	min-width: 40px;
	min-height: 44px;
	color: var(--brand-ink);
}

/* Selected shipping/payment option must be unmistakable — it decides what
   the customer is charged. */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option {
	margin-bottom: 10px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: #fff;
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--brand);
	background: var(--brand-tint);
	box-shadow: 0 0 0 1px var(--brand);
}

.wc-block-components-radio-control__label.wc-block-components-radio-control__label {
	color: var(--ink);
	font-weight: 600;
}

.wc-block-components-radio-control__input {
	accent-color: var(--brand);
}

/* Order summary line items. WooCommerce sets word-break: break-word on
   product names inside a flex column, which lets the column collapse and
   wrap the name one letter per line. These selectors match its own
   two-class weight so they actually apply. */
.wc-block-components-order-summary .wc-block-components-order-summary-item {
	align-items: flex-start;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	flex: 1 1 auto;
	min-width: 0;
	word-break: normal;
	overflow-wrap: break-word;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
	flex: 0 0 48px;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	flex: 0 0 auto;
	max-width: 45%;
	color: var(--ink);
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	display: block;
	min-width: 0;
	color: var(--ink);
	font-weight: 600;
	overflow-wrap: break-word;
	word-break: normal;
}

.wc-block-components-product-name.wc-block-components-product-name.wc-block-components-product-name.wc-block-components-product-name {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	word-break: normal;
	overflow-wrap: break-word;
}

/* Shipping method names are the same long compound nouns in Estonian
   ("Pakiautomaat", "Kuller kojutoomisega") that break-word mangles. */
.wc-block-components-shipping-rates-control__package-item,
.wc-block-components-title.wc-block-components-title {
	overflow-wrap: break-word;
	word-break: normal;
}

/* Totals */
.wc-block-components-totals-item__label {
	color: var(--muted);
}

.wc-block-components-totals-item__value.wc-block-components-totals-item__value {
	color: var(--ink);
	font-weight: 600;
}

.wc-block-components-totals-footer-item {
	border-top: 1px solid var(--line);
	padding-top: 16px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--ink);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Primary checkout actions */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	min-height: 52px;
	border: 0;
	border-radius: var(--r-full);
	background: var(--brand);
	color: #fff;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	box-shadow: none;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--brand-deep);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.wc-block-components-button.wc-block-components-button.wc-block-components-button.is-link {
	color: var(--brand-ink);
}

.wc-block-cart-items__header {
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wc-block-cart-items__row.wc-block-cart-items__row.wc-block-cart-items__row.wc-block-cart-items__row {
	border-bottom: 1px solid var(--line);
}

.wc-block-cart-item__image img {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.wc-block-components-notice-banner {
	border-radius: var(--r-md);
}

.wc-block-components-panel__button.wc-block-components-panel__button.wc-block-components-panel__button.wc-block-components-panel__button {
	color: var(--brand-ink);
	font-weight: 600;
}

/* Clear cart.

   A destructive action, so it is deliberately quiet: a text button under
   the line items, not a filled button competing with "Proceed to
   checkout". Given equal weight the two are easy to confuse, and one of
   them throws away the customer's basket.

   The plugin previously rendered this with WooCommerce's legacy
   `class="button"`, which this theme does not style — so it inherited
   nothing and rendered as the browser default. It now carries its own
   class. */
.webshop-clear-cart {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
}

.webshop-clear-cart__button {
	padding: 6px 2px;
	border: 0;
	background: none;
	color: var(--muted);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--line-strong);
	cursor: pointer;
}

.webshop-clear-cart__button:hover {
	color: #b3093c;
	text-decoration-color: currentColor;
}

/* ==========================================================================
   404
   ========================================================================== */

.error-main {
	padding-block: clamp(3rem, 8vw, 6rem);
	text-align: center;
}

.error-code {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--brand-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 700;
	letter-spacing: -0.04em;
}

.error-main p {
	max-width: 48ch;
	margin-inline: auto;
	color: var(--body);
}

.error-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
}

/* ==========================================================================
   Search
   ========================================================================== */

.wc-block-product-search__field.wc-block-product-search__field,
.wp-block-search__input {
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--ink);
}

.wc-block-product-search__field:focus,
.wp-block-search__input:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18);
	outline: none;
}

.wc-block-product-search__button,
.wp-block-search__button {
	min-height: 48px;
	border: 0;
	border-radius: var(--r-full);
	background: var(--ink);
	color: #fff;
	font-weight: 600;
}

/* ==========================================================================
   Feature cards (home page)
   ========================================================================== */

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.feature-card {
	padding: clamp(20px, 2.5vw, 28px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: none;
	transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.feature-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.feature-card h3 {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--large);
}

.feature-card p {
	margin: 0;
	color: var(--body);
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Motion

   Every decorative transition and transform is disabled here, not merely
   shortened. Scroll behaviour is reset too — smooth scrolling is a motion
   effect and triggers the same discomfort.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.wp-block-woocommerce-product-template li:hover,
	.feature-card:hover,
	.wp-block-button__link:hover {
		transform: none !important;
	}

	.wp-block-woocommerce-product-template li:hover .wp-block-woocommerce-product-image img {
		transform: none !important;
	}
}

/* ==========================================================================
   Narrow viewports
   ========================================================================== */

@media (max-width: 782px) {
	.site-header__nav .wp-block-navigation__container {
		gap: 12px;
	}

	.wc-block-components-checkout-step.wc-block-components-checkout-step {
		padding: 18px 16px;
	}

	/* Order summary above the form: the customer should see what they are
	   paying before scrolling through address fields. */
	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		margin-bottom: 22px;
	}
}

@media (max-width: 600px) {
	.hero h1 {
		max-width: 100%;
	}

	.product-main form.cart {
		padding: 18px;
	}
}

/* ==========================================================================
   Cookie consent banner

   Same pill/minimal language as the rest of the site: a flat elevated card
   anchored to the bottom of the viewport, --r-lg surface radius, --r-full
   pill buttons. "Accept all" and "Reject all" are styled identically (same
   size, same weight) — a deliberate choice, not an oversight: a dark
   pattern where one action is visually louder than the other is exactly
   what this banner exists to avoid.
   ========================================================================== */

.cookie-consent {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 1000;
	max-width: 640px;
	margin: 0 auto;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	padding: 22px 24px;
}

.cookie-consent[hidden] {
	display: none;
}

.cookie-consent__text {
	margin: 0 0 16px;
	color: var(--body);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.cookie-consent__text a {
	color: var(--brand);
	text-decoration: underline;
}

.cookie-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Accept / Reject share one class: identical size, weight, padding — only
   the fill differs (ink = primary workhorse, outline = equally reachable
   secondary), same tiers already used for every other button on the site. */
.cookie-consent__btn {
	appearance: none;
	border-radius: var(--r-full);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: -0.006em;
	padding: 11px 20px;
	cursor: pointer;
	flex: 1 1 auto;
	min-width: 140px;
	text-align: center;
}

.cookie-consent__btn--accept {
	background: var(--ink);
	border: 1px solid var(--ink);
	color: #fff;
	box-shadow: var(--shadow-xs);
}

.cookie-consent__btn--accept:hover {
	background: #0e3355;
	border-color: #0e3355;
}

.cookie-consent__btn--reject {
	background: #fff;
	border: 1px solid var(--line-strong);
	color: var(--ink);
	box-shadow: var(--shadow-xs);
}

.cookie-consent__btn--reject:hover {
	border-color: var(--brand);
	color: var(--brand-ink);
}

.cookie-consent__btn--link {
	background: transparent;
	border: 1px solid transparent;
	color: var(--muted);
	text-decoration: underline;
	box-shadow: none;
	flex: 0 0 auto;
	min-width: 0;
}

.cookie-consent__btn--link:hover {
	color: var(--ink);
}

.cookie-consent__panel {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.cookie-consent__panel[hidden] {
	display: none;
}

.cookie-consent__category {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
}

.cookie-consent__category + .cookie-consent__category {
	border-top: 1px solid var(--line);
}

.cookie-consent__category-title {
	font-weight: 600;
	color: var(--ink);
	font-size: 0.9375rem;
	margin: 0 0 2px;
}

.cookie-consent__category-desc {
	margin: 0;
	color: var(--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.cookie-consent__category input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var(--brand);
	margin-top: 2px;
}

.cookie-consent__save-row {
	margin-top: 14px;
	display: flex;
	justify-content: flex-end;
}

/* Footer "Cookie settings" link — reopens the banner, the same reachable
   text-link treatment as the rest of the footer legal row. */
.footer-cookie-settings {
	background: none;
	border: none;
	padding: 0;
	color: var(--muted);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}

.footer-cookie-settings:hover {
	color: var(--ink);
}

@media (max-width: 600px) {
	.cookie-consent {
		left: 8px;
		right: 8px;
		bottom: 8px;
		padding: 18px;
	}

	.cookie-consent__btn {
		min-width: 0;
		flex: 1 1 45%;
	}
}