/**
 * global.css — Estelia Norway AS
 * Location: estelia-child/assets/css/global.css
 * Loads:    every page, after GeneratePress core
 * Depends:  assets/fonts/*.woff2
 *
 * Order: 1 fonts · 2 tokens · 3 reset · 4 base type
 *        5 layout · 6 components · 7 utilities · 8 a11y
 *
 * No section file may redefine a colour, size or space in raw units.
 * Use a token or add one here.
 */

/* ========================================================================
   1. FONTS — self-hosted, latin + latin-ext (carries æ ø å)
   No unicode-range: the files are already subset, and a latin-only
   range would block the Norwegian vowels.
   ======================================================================== */

@font-face {
	font-family: 'Instrument Serif';
	src: url('../fonts/instrumentserif-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Instrument Serif';
	src: url('../fonts/instrumentserif-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* DM Sans variable: two axes, opsz and wght.
   font-optical-sizing on body (section 4) drives opsz automatically. */
@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/dmsans-variable.woff2') format('woff2');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/dmsans-variable-italic.woff2') format('woff2');
	font-weight: 100 1000;
	font-style: italic;
	font-display: swap;
}

/* ========================================================================
   2. DESIGN TOKENS
   ======================================================================== */

:root {

	/* --- Colour: neutrals stay monochrome; --est-accent-* carries the one
	       brand hue (introduced with the 2026 redesign). Red/green still
	       appear only as Woo system states. --- */
	--est-bg: #FFFFFF;
	--est-surface: #EFEFED;
	--est-ink: #131313;
	--est-ink-muted: #6A6A68;
	--est-line: #DFDEDB;
	--est-beige: #EFE7DA;

	--est-accent: #4A1F45;
	--est-accent-dark: #341530;
	--est-accent-tint: #F2E9F0;
	--est-lavender: #F4F1F8;
	--est-lavender-deep: #E7DEEF;
	--est-navy: #17172C;
	--est-navy-soft: #23233C;

	/* --- Type families --- */
	--est-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--est-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	/* --- Type scale: fluid, 360px → 1280px viewport.
	       Sections never override font-size per breakpoint. --- */
	--est-step--2: clamp(0.6875rem, 0.68rem + 0.05vw, 0.75rem);
	--est-step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
	--est-step-0:  clamp(1rem, 0.98rem + 0.11vw, 1.0625rem);
	--est-step-1:  clamp(1.1875rem, 1.11rem + 0.38vw, 1.4375rem);
	--est-step-2:  clamp(1.5rem, 1.3rem + 0.98vw, 2.125rem);
	--est-step-3:  clamp(2.125rem, 1.66rem + 2.28vw, 3.625rem);
	--est-step-4:  clamp(2.75rem, 1.83rem + 4.5vw, 5.625rem);

	/* --- Type detail --- */
	--est-tracking-display: 1px;
	--est-tracking-eyebrow: 0.14em;
	--est-leading-display: 1.06;
	--est-leading-body: 1.65;
	--est-measure: 64ch;

	/* --- Space: one scale, used everywhere --- */
	--est-space-2xs: 0.25rem;
	--est-space-xs: 0.5rem;
	--est-space-s: 0.75rem;
	--est-space-m: 1rem;
	--est-space-l: 1.5rem;
	--est-space-xl: 2.5rem;
	--est-space-2xl: 4rem;
	--est-space-3xl: 6rem;

	/* --- Layout --- */
	--est-container: 1280px;
	--est-container-narrow: 720px;
	--est-gutter: clamp(1rem, 4vw, 2.5rem);
	--est-section-block: clamp(3rem, 8vw, 6rem);
	--est-radius: 0;

	/* --- Motion: fabric, not UI bounce --- */
	--est-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--est-dur: 400ms;
	--est-dur-fast: 200ms;
}

/* Breakpoints used throughout: 48em · 64em · 80em. Mobile-first only. */

/* ========================================================================
   3. RESET
   ======================================================================== */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

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

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

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

:target {
	scroll-margin-block: var(--est-space-2xl);
}

/* ========================================================================
   4. BASE TYPOGRAPHY
   ======================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--est-bg);
	color: var(--est-ink);
	font-family: var(--est-font-body);
	font-size: var(--est-step-0);
	font-weight: 400;
	line-height: var(--est-leading-body);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	font-family: var(--est-font-display);
	font-weight: 400;
	line-height: var(--est-leading-display);
	letter-spacing: var(--est-tracking-display);
	text-wrap: balance;
}

h1 { font-size: var(--est-step-3); }
h2 { font-size: var(--est-step-2); }
h3 { font-size: var(--est-step-1); }

/* h4–h6 are UI-level, not editorial — body face. */
h4, h5, h6 {
	font-family: var(--est-font-body);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
}

h4 { font-size: var(--est-step-0); }
h5,
h6 {
	font-size: var(--est-step--1);
	text-transform: uppercase;
	letter-spacing: var(--est-tracking-eyebrow);
	color: var(--est-ink-muted);
}

p {
	max-width: var(--est-measure);
	text-wrap: pretty;
}

p + p {
	margin-block-start: var(--est-space-m);
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: var(--est-line);
	transition: text-decoration-color var(--est-dur-fast) var(--est-ease);
}

a:hover {
	text-decoration-color: currentColor;
}

strong,
b {
	font-weight: 500;
}

small {
	font-size: var(--est-step--1);
}

blockquote {
	font-family: var(--est-font-display);
	font-size: var(--est-step-1);
	font-style: italic;
	line-height: 1.35;
	max-width: 48ch;
}

hr {
	border: 0;
	border-block-start: 1px solid var(--est-line);
	margin-block: var(--est-space-xl);
}

::selection {
	background-color: var(--est-ink);
	color: var(--est-bg);
}

/* Plain-content vertical rhythm (Kundeservice, Vilkår, Personvernerklæring,
   ...) — pages built straight out of core Gutenberg blocks (heading/
   paragraph/list/separator) with no bespoke section wrapper of their own.
   The reset above zeroes every margin by design, on the assumption that
   each component supplies its own spacing — these pages have no such
   component, so without this every block just butts up against the next
   with zero gap. Scoped to a named list of prose tags (not a blanket
   `* + *`) and to direct children of .entry-content (GeneratePress's
   page-content wrapper): About/Kolleksjon/etc. build their content out of
   full-bleed <section> components (each its own already-self-spaced
   wp:html block, sitting next to a sibling <style> tag from that same
   block) — a blanket child selector would have handed every one of those
   sections an uninvited top margin on top of its own deliberate
   padding-block. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > table,
.entry-content > figure {
	margin-block-start: var(--est-space-m);
}

.entry-content > p:first-child,
.entry-content > ul:first-child,
.entry-content > ol:first-child,
.entry-content > blockquote:first-child,
.entry-content > table:first-child,
.entry-content > figure:first-child {
	margin-block-start: 0;
}

.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
	margin-block-start: var(--est-space-xl);
}

.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > h4:first-child {
	margin-block-start: 0;
}

/* Tight coupling between a heading and the text that answers it. */
.entry-content > h2 + p,
.entry-content > h2 + ul,
.entry-content > h2 + ol,
.entry-content > h3 + p,
.entry-content > h3 + ul,
.entry-content > h3 + ol,
.entry-content > h4 + p,
.entry-content > h4 + ul,
.entry-content > h4 + ol {
	margin-block-start: var(--est-space-s);
}

.entry-content > hr {
	margin-block-start: var(--est-space-xl);
}

.entry-content li + li {
	margin-block-start: var(--est-space-2xs);
}

/* As a bare descendant selector, the rule above also catches li's inside
   flex-laid-out component lists that aren't prose (e.g. the newsletter's
   perks row) — there it added a stray margin-top to every item but the
   first, throwing off their vertical alignment in the row. Higher
   specificity (two classes) wins over the rule above without !important. */
.entry-content .est-newsletter__perks li + li {
	margin-block-start: 0;
}

/* Prose tables (Frakt og levering's rate lists). Core's wp-block-table ships
   a full grid of 1px borders, which reads as a spreadsheet next to the rest
   of the type. Horizontal rules only, header set in the body face, prices
   right-aligned in the last column so they line up as a column of numbers.

   The figure carries the horizontal scroll rather than the page: a 3-column
   rate table does not fit 375px, and without this the whole document scrolls
   sideways. */
.entry-content .wp-block-table {
	/* Same measure as the paragraphs around it (p { max-width: --est-measure }),
	   so the table reads as part of the one text column instead of breaking
	   out 60% wider than every sentence above it. */
	max-width: var(--est-measure);
	overflow-x: auto;
}

.entry-content .wp-block-table table {
	width: 100%;
	/* Core's block library puts a 1px top+left border on the table element
	   itself, on top of the per-cell grid — zeroing only th/td left a stray
	   rule down the left edge and across the top. */
	border: 0;
	border-collapse: collapse;
	font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
	font-size: var(--est-step--1);
	line-height: 1.5;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	border: 0;
	border-block-end: 1px solid var(--est-line, #DFDEDB);
	padding: var(--est-space-s) var(--est-space-s) var(--est-space-s) 0;
	text-align: left;
	vertical-align: top;
}

.entry-content .wp-block-table th {
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: var(--est-step--2);
	color: var(--est-ink-muted, #6A6A68);
	border-block-end-color: var(--est-ink, #131313);
	white-space: nowrap;
}

.entry-content .wp-block-table tr > :last-child {
	padding-inline-end: 0;
	text-align: right;
	white-space: nowrap;
}

.entry-content .wp-block-table tbody tr:last-child th,
.entry-content .wp-block-table tbody tr:last-child td {
	border-block-end: 0;
}

/* ========================================================================
   5. LAYOUT PRIMITIVES
   ======================================================================== */

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

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

.est-container--flush {
	padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Breadcrumb — one shared look site-wide (product page, category archive,
   static pages), so delimiter/color/spacing never drift between templates.
   -------------------------------------------------------------------------- */
/* !important: WooCommerce's own core rule (`.woocommerce .woocommerce-breadcrumb`,
   two classes) otherwise beats this one-class selector on any WooCommerce-flagged
   template (shop/category archives) — the breadcrumb rendered correctly on plain
   pages (no `body.woocommerce`) but silently fell back to WC's own grey/larger
   style on archives, which is exactly the drift this rule exists to prevent. */
.woocommerce-breadcrumb {
	margin: 0 0 .75rem !important;
	padding: 0 !important;
	font-family: var(--est-font-body, "DM Sans", system-ui, sans-serif);
	font-size: .8125rem !important;
	color: var(--est-ink-muted, #6A6A68) !important;
}

.woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* full-width-content templates (About, Kolleksjon, ...) drop the theme's
   boxed .grid-container, so the breadcrumb — injected before the_content()
   via generate_before_page_title — has no padding source left and bleeds
   to the raw viewport edge. Give it the same container + edge padding as
   the header row (.est-announce__inner in header.css) so it lines up with
   the logo instead.
   !important: the base .woocommerce-breadcrumb rule above sets margin/padding
   with !important, which otherwise beats margin-inline/padding-inline here
   regardless of this selector's higher specificity — !important on a
   shorthand always wins over a non-important longhand-equivalent. */
body.full-width-content .woocommerce-breadcrumb {
	max-width: var(--est-container, 1280px) !important;
	margin-inline: auto !important;
	/* Must be the site gutter, not a hardcoded number: the hero sections
	   below (.est-colgrid__inner, .est-abouthero__head) share this same
	   1280px container and pad it with --est-gutter, so a flat 30px left
	   the breadcrumb 10px to the left of the H1 at desktop widths. The
	   sections declare the gutter under local names (--est-cg-pad and
	   friends) that resolve to the identical clamp; pointing all of them at
	   the one token is what keeps the left edge honest at every width. */
	padding-inline: var(--est-gutter) !important;
	/* Same template drops .site-content's padding altogether
	   (GeneratePress: `.full-width-content.one-container .site-content
	   { padding: 0 }`), and the breadcrumb is the first thing in the flow —
	   so on Kolleksjon and Om oss it sat flush against the header, 0px gap,
	   while every boxed page and archive got the container's 40px. Put that
	   offset back on the breadcrumb itself, mirroring GeneratePress's own
	   responsive step below so the two can't drift apart. */
	margin-block-start: 40px !important;
}

@media (max-width: 768px) {
	body.full-width-content .woocommerce-breadcrumb {
		margin-block-start: 30px !important;
	}
}

/* GeneratePress adds a 2em gap between the page header and .entry-content
   by default (`.entry-content:not(:first-child)`), meant for plain boxed
   text pages. About/Kolleksjon open with a full-bleed "hero band" component
   (.est-abouthero / .est-colgrid) that already supplies its own generous
   padding-block — without this the two stack, doubling the visual gap
   under the breadcrumb compared to every other page/archive on the site. */
.entry-content:has(> .est-abouthero:first-of-type),
.entry-content:has(> .est-colgrid:first-of-type) {
	margin-top: 0;
}

/* Those same two heroes open with a generous padding-block of their own
   (80px on .est-colgrid, 72px on .est-abouthero), which pushed the H1 that
   far below the breadcrumb — so the breadcrumb read as belonging to the
   header instead of to the title. On a product archive the title sits 12px
   under the breadcrumb, which is just the breadcrumb's own margin-bottom.
   Drop only the section's leading edge to get the same pairing; its bottom
   padding and every later section are untouched.

   Specificity: the padding is declared as a bare `.est-colgrid` in the
   page's own inline <style>, which sits after this stylesheet in the
   document — a matching one-class selector here would lose on source
   order, so the child + :first-of-type combination is what makes this
   stick without !important. */
.entry-content > .est-abouthero:first-of-type,
.entry-content > .est-colgrid:first-of-type {
	padding-block-start: 0;
}

/* Consistent vertical rhythm between sections. */
.est-section {
	padding-block: var(--est-section-block);
}

.est-section--tight {
	padding-block: calc(var(--est-section-block) / 2);
}

.est-section--surface {
	background-color: var(--est-surface);
}

/* Auto-fitting grid. minmax(0, …) stops wide children blowing out columns. */
.est-grid {
	display: grid;
	gap: var(--est-space-l);
}

.est-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.est-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.est-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }

.est-stack > * + * {
	margin-block-start: var(--est-space-m);
}

.est-stack--l > * + * {
	margin-block-start: var(--est-space-l);
}

/* Editorial media — prevents CLS without needing width/height on every img. */
.est-media {
	position: relative;
	overflow: hidden;
	background-color: var(--est-surface);
}

.est-media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.est-media--portrait { aspect-ratio: 3 / 4; }
.est-media--square   { aspect-ratio: 1 / 1; }
.est-media--wide     { aspect-ratio: 16 / 9; }

/* ========================================================================
   6. SHARED COMPONENTS
   ======================================================================== */

/* --- Eyebrow label --- */
.est-eyebrow {
	display: block;
	font-family: var(--est-font-body);
	font-size: var(--est-step--1);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--est-tracking-eyebrow);
	color: var(--est-ink-muted);
}

/* --- Buttons --- */
.est-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--est-space-xs);
	min-height: 3rem;
	padding-inline: var(--est-space-l);
	padding-block: var(--est-space-s);
	border: 1px solid var(--est-accent);
	border-radius: var(--est-radius);
	background-color: var(--est-accent);
	color: var(--est-bg);
	font-family: var(--est-font-body);
	font-size: var(--est-step--1);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition:
		background-color var(--est-dur-fast) var(--est-ease),
		border-color var(--est-dur-fast) var(--est-ease),
		color var(--est-dur-fast) var(--est-ease);
}

.est-btn:hover {
	background-color: var(--est-accent-dark);
	border-color: var(--est-accent-dark);
	color: var(--est-bg);
}

.est-btn--ghost {
	background-color: transparent;
	border-color: var(--est-ink);
	color: var(--est-ink);
}

.est-btn--ghost:hover {
	background-color: var(--est-ink);
	border-color: var(--est-ink);
	color: var(--est-bg);
}

.est-btn--bare {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--est-ink);
	text-transform: none;
	letter-spacing: 0;
	border-block-end: 1px solid var(--est-line);
}

.est-btn--bare:hover {
	background: none;
	border-block-end-color: var(--est-ink);
}

.est-btn--full {
	width: 100%;
}

.est-btn[disabled],
.est-btn[aria-disabled='true'] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --- Cart's "proceed to checkout" and the checkout's own place-order
   button share the same plum .est-btn treatment. Woo Vipps only relabels
   this button's text when Vipps is selected ("Fortsett med Vipps") — it
   renders no gateway-colored button of its own, so recoloring it here
   doesn't clash with Vipps' brand orange. --- */
.woocommerce a.checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--est-space-xs);
	min-height: 3rem;
	padding-inline: var(--est-space-l);
	border: 1px solid var(--est-accent) !important;
	border-radius: var(--est-radius);
	background-color: var(--est-accent) !important;
	color: var(--est-bg) !important;
	font-family: var(--est-font-body);
	font-size: var(--est-step--1);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--est-dur-fast) var(--est-ease),
		border-color var(--est-dur-fast) var(--est-ease);
}

.woocommerce a.checkout-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--est-accent-dark) !important;
	border-color: var(--est-accent-dark) !important;
	color: var(--est-bg) !important;
}

/* --- Form fields --- */
.est-field {
	display: block;
}

.est-label {
	display: block;
	margin-block-end: var(--est-space-2xs);
	font-size: var(--est-step--1);
	font-weight: 500;
}

.est-input,
.est-select,
.est-textarea {
	width: 100%;
	min-height: 3rem;
	padding: var(--est-space-s) var(--est-space-m);
	border: 1px solid var(--est-line);
	border-radius: var(--est-radius);
	background-color: transparent;
	font-size: var(--est-step-0);
	transition: border-color var(--est-dur-fast) var(--est-ease);
}

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

.est-input:hover,
.est-select:hover,
.est-textarea:hover {
	border-color: var(--est-ink-muted);
}

.est-input::placeholder,
.est-textarea::placeholder {
	color: var(--est-ink-muted);
	opacity: 1;
}

.est-hint {
	margin-block-start: var(--est-space-2xs);
	font-size: var(--est-step--1);
	color: var(--est-ink-muted);
}

/* --- Badge --- */
.est-badge {
	display: inline-block;
	padding: var(--est-space-2xs) var(--est-space-xs);
	border: 1px solid var(--est-ink);
	border-radius: var(--est-radius);
	font-size: var(--est-step--2);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--est-tracking-eyebrow);
	line-height: 1.4;
}

.est-badge--solid {
	background-color: var(--est-ink);
	color: var(--est-bg);
}

.est-badge--accent {
	border-color: var(--est-accent);
	background-color: var(--est-accent);
	color: var(--est-bg);
}

.est-badge--tint {
	border-color: transparent;
	background-color: var(--est-lavender-deep);
	color: var(--est-accent-dark);
}

.est-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--est-space-2xs);
	margin-block-end: var(--est-space-s);
}

.est-card__badges--overlay {
	position: absolute;
	inset-block-start: var(--est-space-s);
	inset-inline-start: var(--est-space-s);
	inset-inline-end: var(--est-space-s);
	z-index: 3;
	margin-block-end: 0;
	pointer-events: none;
}

/* Smaller than the default badge so a full row (Tilbud/Nyhet/Bestselger)
   stays compact and doesn't creep down over the product photo. */
.est-card__badges--overlay .est-badge {
	padding: 0.2em 0.5em;
	font-size: 0.6875rem;
}

/* --- Breadcrumbs --- */
.est-breadcrumb {
	font-size: var(--est-step--1);
	color: var(--est-ink-muted);
}

.est-breadcrumb a {
	text-decoration: none;
}

.est-breadcrumb a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- Trust row (shared by homepage section 05 and the PDP) --- */
.est-trustrow {
	background: var(--est-lavender);
	color: var(--est-ink);
	font-family: var(--est-font-body);
	padding-block: clamp(2rem, 5vw, 3rem);
}

.est-trustrow__list {
	list-style: none;
	margin: 0;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	max-width: 1280px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 48em) {
	.est-trustrow__list { grid-template-columns: repeat(4, 1fr); }
}

.est-trustrow__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--est-space-2xs);
	text-align: center;
}

.est-trustrow__item svg {
	color: var(--est-accent);
}

.est-trustrow__label {
	font-size: var(--est-step--1);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.est-trustrow__sub {
	font-size: var(--est-step--2);
	color: var(--est-ink-muted);
}

/* ========================================================================
   7. UTILITIES
   ======================================================================== */

.est-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.est-text-center { text-align: center; }
.est-text-muted  { color: var(--est-ink-muted); }
.est-measure     { max-width: var(--est-measure); }
.est-no-measure  { max-width: none; }

.est-mbs-0  { margin-block-start: 0; }
.est-mbs-m  { margin-block-start: var(--est-space-m); }
.est-mbs-l  { margin-block-start: var(--est-space-l); }
.est-mbs-xl { margin-block-start: var(--est-space-xl); }

/* Horizontal scroller for lookbook / product rows.
   Replaces a carousel library — see section 8 of PROJECT-STACK. */
.est-scroller {
	display: flex;
	gap: var(--est-space-m);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-inline: var(--est-gutter);
	scroll-padding-inline-start: var(--est-gutter);
}

.est-scroller::-webkit-scrollbar {
	display: none;
}

.est-scroller > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* ========================================================================
   8. ACCESSIBILITY
   ======================================================================== */

:focus-visible {
	outline: 2px solid var(--est-ink);
	outline-offset: 3px;
}

:focus:not(:focus-visible) {
	outline: none;
}

.est-skip-link {
	position: absolute;
	inset-block-start: var(--est-space-xs);
	inset-inline-start: var(--est-space-xs);
	z-index: 999;
	padding: var(--est-space-s) var(--est-space-m);
	background-color: var(--est-ink);
	color: var(--est-bg);
	font-size: var(--est-step--1);
	font-weight: 500;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--est-dur-fast) var(--est-ease);
}

.est-skip-link:focus {
	transform: translateY(0);
}

@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;
	}
}
button,
a,
[role='button'] {
	-webkit-tap-highlight-color: transparent;
}

/* --- WooCommerce notices (added-to-cart, cart/checkout errors, info) --- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--est-space-m);
	margin: 0 0 var(--est-space-l);
	padding: var(--est-space-m) var(--est-space-l);
	list-style: none;
	border: 1px solid var(--est-line);
	border-inline-start: 3px solid var(--est-accent);
	border-radius: var(--est-radius);
	background-color: var(--est-bg);
	font-family: var(--est-font-body);
	font-size: var(--est-step--1);
	color: var(--est-ink);
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	display: none;
}

.woocommerce-error {
	border-inline-start-color: #B3261E;
}

.woocommerce-error li {
	list-style: none;
}

.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward {
	flex: 0 0 auto;
	order: 2;
	font-family: var(--est-font-body);
	font-size: var(--est-step--2);
	font-weight: 500;
	letter-spacing: var(--est-tracking-eyebrow);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--est-bg);
	background-color: var(--est-accent);
	border: 1px solid var(--est-accent);
	border-radius: var(--est-radius);
	padding: var(--est-space-xs) var(--est-space-l);
	transition: background-color var(--est-dur-fast) var(--est-ease),
	            border-color var(--est-dur-fast) var(--est-ease);
}

.woocommerce-message .button.wc-forward:hover,
.woocommerce-message .button.wc-forward:focus-visible,
.woocommerce-info .button.wc-forward:hover,
.woocommerce-info .button.wc-forward:focus-visible {
	background-color: var(--est-accent-dark);
	border-color: var(--est-accent-dark);
}

/* --- Checkout express-payment slot: Stripe's Apple Pay / Google Pay / Link
   buttons are meant to show here (enabled via express_checkout_button_locations).
   Vipps has no such setting — it registers its own "buy now" button into the
   same WooCommerce Blocks slot (.wc-block-components-express-payment)
   unconditionally, which would duplicate the Vipps option already offered
   as a regular payment method below. CSS is the only available lever, so
   only Vipps' own button is hidden; the slot itself (and Stripe's buttons
   in it) stays visible. */
.vipps-express-container {
	display: none !important;
}