/*!
Theme Name:   Ecoleas
Theme URI:    https://ecoleas.com/
Author:       Ecoleas
Author URI:   https://ecoleas.com/
Description:  Editorial couture theme for Ecoleas — a contemporary occasionwear label cutting statement pieces to measure in Jaipur. Built to the Ecoleas design system: two typefaces, one accent, soft corners, no shadows. WooCommerce-ready.
Version:      1.15.4
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ecoleas
Tags:         e-commerce, editorial, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks

Ecoleas WordPress Theme, (C) 2026 Ecoleas
Ecoleas is distributed under the terms of the GNU GPL v2 or later.

================================================================================
 TABLE OF CONTENTS
================================================================================
  01  Design tokens .............. the values the whole system is built from
  02  Fonts ...................... Bricolage Grotesque + Instrument Sans
  03  Reset & document ........... normalize, box model, page ground
  04  Typography scale ........... display / body / label / caption roles
  05  Layout primitives .......... shell, gutter, section rhythm
  06  Buttons & links ............ primary, secondary, quiet
  07  Section heads .............. the two heading treatments
  08  Media ...................... image tiles, ratios, hover zoom
  09  Forms ...................... fields, selects, validation states
  10  Motion & reveal ............ scroll reveal, reduced-motion opt-out
  11  Announcement bar
  12  Header, primary nav, mega menu
  13  Footer ..................... site-wide, taken from the About page
  14  WordPress core classes ..... alignments, captions, gallery, screen-reader
  15  Content templates .......... archive, single, comments, 404
  16  Responsive layer ........... everything below the 1440px artboard

  Page-specific rules live beside this file:
    assets/css/home.css          the Home artboard
    assets/css/about.css         the About artboard
    assets/css/woocommerce.css   WooCommerce overrides

  DESIGN LAWS (from the Ecoleas design system — do not break these)
    · Body and label text hold 4.5:1; interactive borders hold 3:1.
      #DFCFBD is the lightest border allowed.
    · Every interactive target is at least 44px on its smallest axis.
    · Hover changes ink or border colour only — never size, never position.
    · Plum (#3A172B) is the single accent. A second accent breaks the system.
    · Captions sit beneath photographs, never over them.
    · Use the shared soft-corner token; do not introduce one-off corner radii.
    · Never: gradients or a third typeface.
================================================================================
*/

/* =============================================================================
   01  DESIGN TOKENS
   Every value below is read from the built Home and About pages, not invented.
   ============================================================================= */

:root {
	/* --- Colour -------------------------------------------------------------
	   Eleven values, no more. Counts in the comments are occurrences in the
	   source designs (home / about) and record how load-bearing each one is. */
	--ec-ink:            #151515; /* home 43 · about 34 — primary type, primary button ground, structural rules */
	--ec-ink-muted:      #544B50; /* home 19 · about 23 — body copy, captions, legal. 7.4:1 on cream */
	--ec-plum:           #3A172B; /* home  9 · about 26 — THE accent. hover ink, current-page marker, 44px rule */
	--ec-cream:          #FFF8EC; /* home 21 · about  5 — type and icons on black or plum grounds */
	--ec-hairline:       #F2E8DF; /* home 11 · about 13 — dividers, card borders, image placeholder ground */
	--ec-ivory:          #FAF3EB; /* home 14 · about  3 — banded sections and mega-menu panel */
	--ec-page:           #FFFFFF; /* home 11 · about  4 — default page and header ground, form fills */
	--ec-label-brown:    #6B5A48; /* about  5 — uppercase labels on warm grounds. 5.5:1 */
	--ec-black:          #000000; /* home  3 — announcement bar, cut-to-order band, Home footer */
	--ec-footer-cream:   #F5F0EC; /* warm neutral ground from the new site-wide footer */
	--ec-sand:           #C9A88B; /* about  2 — decorative only: quote mark, link underline on hover */

	/* Supporting hairlines. Used once or twice each; never as body text. */
	--ec-rule-warm:      #E4D5C4;
	--ec-rule-field:     #DFCFBD; /* the lightest border allowed — holds 3:1 */
	--ec-rule-frame:     #E7D9C9;
	--ec-rule-faint:     #EFE7DF;
	--ec-rule-pale:      #F7EDE3;

	/* Status. Form feedback only. */
	--ec-success:        #1F6B3F;
	--ec-error:          #B3261E;

	/* Ink on dark grounds, at the opacities the designs use. */
	--ec-cream-88:       rgba(255, 248, 236, .88);
	--ec-cream-82:       rgba(255, 248, 236, .82);
	--ec-cream-70:       rgba(255, 248, 236, .7);
	--ec-cream-62:       rgba(255, 248, 236, .62);
	--ec-cream-24:       rgba(255, 248, 236, .24);
	--ec-cream-18:       rgba(255, 248, 236, .18);

	/* --- Type ---------------------------------------------------------------
	   Two families. A third typeface breaks the system. */
	--ec-font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ec-font-text:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ec-font-wordmark: Didot, 'Bodoni MT', 'Bodoni 72', 'Times New Roman', serif;

	/* The type roles. Sizes are the artboard values; the clamp() floors are
	   the ones the About page already used, so nothing new is invented here. */
	--ec-display-xl:  clamp(38px, 5.4vw, 66px);  /* page H1 only          — 300, -.035em, /1.04 */
	--ec-display-l:   clamp(28px, 3.8vw, 46px);  /* section headline, CTA — 300, -.03em,  /1.2  */
	--ec-display-m:   clamp(17px, 1.9vw, 22px);  /* pull quote, lead      — 400, -.02em,  /1.45 */
	--ec-wordmark:    clamp(27px, 3.1vw, 36px);  /* wordmark              — 400 uppercase, .28-.34em */
	--ec-body:        clamp(15px, 1.5vw, 17px);  /* body                  — 400, /1.62, max 44ch */
	--ec-body-s:      clamp(14px, 1.4vw, 16px);  /* footer text, notes    — 400, /1.6  */

	/* Tracking. Positive on every uppercase label, negative on every display. */
	--ec-track-display: -.035em;
	--ec-track-label:   .22em;
	--ec-track-head:    .28em;
	--ec-track-caption: .12em;

	/* --- Space --------------------------------------------------------------
	   The gutter resolves to exactly 56px at the 1440px artboard width and
	   steps down from there. Section padding follows the same shape. */
	--ec-gutter:       clamp(20px, 4vw, 56px);
	--ec-gutter-wide:  clamp(24px, 5vw, 72px); /* footer only */
	--ec-section-y:    clamp(64px, 9vw, 116px);
	--ec-section-y-sm: clamp(56px, 8vw, 96px);
	--ec-section-y-lg: clamp(72px, 10vw, 124px);
	--ec-col-gap:      clamp(32px, 5vw, 72px);

	/* Stack gaps inside a block. Four values, nothing between them. */
	--ec-stack-xs: 10px;
	--ec-stack-s:  14px;
	--ec-stack-m:  22px;
	--ec-stack-l:  26px;

	/* --- Grid --------------------------------------------------------------- */
	--ec-max: 1440px;

	/* --- Motion -------------------------------------------------------------
	   Three durations. Everything is `ease`. */
	--ec-dur-hover:  300ms; /* links, buttons, borders */
	--ec-dur-fade:   350ms; /* larger cross-fades      */
	--ec-dur-reveal: 600ms; /* scroll reveal, image zoom */
	--ec-reveal-rise: 16px; /* reveal travel, paired with a fade */

	/* --- Shape --------------------------------------------------------------
	   One restrained, touch-friendly radius keeps controls and content tiles
	   soft without turning the editorial layout into a bubble interface. */
	--ec-radius: 12px;
	--ec-shadow: none;
}

/* =============================================================================
   02  FONTS
   Self-hosted so the design renders identically offline and on first paint.
   Bricolage ships 300–500 and Instrument 400–500 as variable ranges, which is
   exactly the set of weights the two designs call for.
   ============================================================================= */

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 300 500;
	font-stretch: 100%;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 300 500;
	font-stretch: 100%;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 300 500;
	font-stretch: 100%;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 500;
	font-stretch: 100%;
	font-display: swap;
	src: url('assets/fonts/instrument-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 500;
	font-stretch: 100%;
	font-display: swap;
	src: url('assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* =============================================================================
   03  RESET & DOCUMENT
   ============================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

/* No blue flash when tapping links and buttons on phones. Keyboard focus
   outlines are separate and stay as they are. */
*,
*::before,
*::after { -webkit-tap-highlight-color: transparent; }

body {
	margin: 0;
	padding: 0;
	background: var(--ec-page);
	color: var(--ec-ink);
	font: 400 var(--ec-body) / 1.62 var(--ec-font-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden; /* fallback for browsers without overflow: clip */
	overflow-x: clip;   /* transformed reveals never create a scroll range */
}

/* The sticky header has to clear the admin bar when one is present. */
body.admin-bar .ec-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .ec-header { top: 46px; }
}

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

img { height: auto; border: 0; }

a {
	color: var(--ec-ink);
	transition: color var(--ec-dur-hover) ease;
}
a:hover,
a:focus { color: var(--ec-plum); }

button { font-family: inherit; }

/* Focus is visible everywhere and never removed. The offset keeps the ring
   clear of the square edges the system insists on. */
:focus-visible {
	outline: 2px solid var(--ec-plum);
	outline-offset: 4px;
}
:focus:not(:focus-visible) { outline: none; }

hr {
	border: 0;
	border-top: 1px solid var(--ec-hairline);
	margin: var(--ec-stack-l) 0;
}

/* =============================================================================
   04  TYPOGRAPHY SCALE
   The type roles from the design system, as classes. Prefer these over
   ad-hoc font shorthands so the scale stays auditable.
   ============================================================================= */

.ec-display-xl {
	font: 300 var(--ec-display-xl) / 1.04 var(--ec-font-display);
	letter-spacing: var(--ec-track-display);
	margin: 0;
}
.ec-display-l {
	font: 300 var(--ec-display-l) / 1.2 var(--ec-font-display);
	letter-spacing: -.03em;
	margin: 0;
}
.ec-display-m {
	font: 400 var(--ec-display-m) / 1.45 var(--ec-font-display);
	letter-spacing: -.02em;
	margin: 0;
}
.ec-body {
	font: 400 var(--ec-body) / 1.62 var(--ec-font-text);
	color: var(--ec-ink-muted);
	margin: 0;
	max-width: 44ch;      /* the measure the system fixes */
	text-wrap: pretty;
}
.ec-body-s {
	font: 400 var(--ec-body-s) / 1.6 var(--ec-font-text);
	color: var(--ec-ink-muted);
	margin: 0;
	text-wrap: pretty;
}
.ec-label {
	font: 400 11px / 16px var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	margin: 0;
}
.ec-caption {
	font: 400 10px / 15px var(--ec-font-text);
	letter-spacing: var(--ec-track-caption);
	text-transform: uppercase;
	color: var(--ec-ink-muted);
	margin: 0;
}

/* Editorial defaults for post and page content, on the same scale. */
.ec-prose h1 { font: 300 var(--ec-display-xl) / 1.04 var(--ec-font-display); letter-spacing: var(--ec-track-display); margin: 0 0 var(--ec-stack-l); text-wrap: balance; }
.ec-prose h2 { font: 300 var(--ec-display-l)  / 1.2  var(--ec-font-display); letter-spacing: -.03em; margin: 2.2em 0 var(--ec-stack-m); text-wrap: balance; }
.ec-prose h3 { font: 400 var(--ec-display-m)  / 1.45 var(--ec-font-display); letter-spacing: -.02em; margin: 2em 0 var(--ec-stack-s); }
.ec-prose h4,
.ec-prose h5,
.ec-prose h6 {
	font: 400 13px / 18px var(--ec-font-text);
	letter-spacing: var(--ec-track-head);
	text-transform: uppercase;
	margin: 2em 0 var(--ec-stack-s);
}
.ec-prose p,
.ec-prose ul,
.ec-prose ol {
	font: 400 var(--ec-body) / 1.62 var(--ec-font-text);
	color: var(--ec-ink-muted);
	margin: 0 0 var(--ec-stack-m);
	text-wrap: pretty;
}
.ec-prose li { margin-bottom: var(--ec-stack-xs); }
.ec-prose a { color: var(--ec-ink); text-decoration: underline; text-underline-offset: 4px; }
.ec-prose a:hover { color: var(--ec-plum); }
.ec-prose strong { font-weight: 500; color: var(--ec-ink); }
.ec-prose blockquote {
	margin: var(--ec-section-y-sm) 0;
	padding-left: clamp(20px, 3vw, 34px);
	border-left: 1px solid var(--ec-plum);
	font: 400 var(--ec-display-m) / 1.45 var(--ec-font-display);
	letter-spacing: -.02em;
	color: var(--ec-ink);
}
.ec-prose blockquote p { font: inherit; color: inherit; }
.ec-prose figure { margin: var(--ec-section-y-sm) 0; }
.ec-prose figcaption {
	font: 400 10px / 15px var(--ec-font-text);
	letter-spacing: var(--ec-track-caption);
	text-transform: uppercase;
	color: var(--ec-ink-muted);
	margin-top: var(--ec-stack-xs);
}
.ec-prose code,
.ec-prose kbd,
.ec-prose pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.ec-prose pre {
	background: var(--ec-ivory);
	border: 1px solid var(--ec-hairline);
	padding: clamp(16px, 2vw, 24px);
	overflow-x: auto;
}
.ec-prose table { width: 100%; border-collapse: collapse; font-size: var(--ec-body-s); }
.ec-prose th,
.ec-prose td { padding: 12px 14px; border-bottom: 1px solid var(--ec-hairline); text-align: left; }
.ec-prose th {
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-size: 11px;
	color: var(--ec-label-brown);
}

/* =============================================================================
   05  LAYOUT PRIMITIVES
   ============================================================================= */

/* The artboard. Full viewport width, with section-level content gutters. */
.ec-shell {
	width: 100%;
	background: var(--ec-page);
	color: var(--ec-ink);
	position: relative;
}

/* A short editorial page reveal replaces hard navigation cuts without
   changing history, link semantics or document height. */
@keyframes ec-page-arrive {
	from {
		opacity: 0;
		clip-path: inset(0 0 3% 0);
		transform: translate3d(0, 12px, 0);
	}
	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: none;
	}
}
.js .ec-shell {
	animation: ec-page-arrive 360ms cubic-bezier(.76, 0, .24, 1);
}
body.ec-page-leaving .ec-shell {
	animation: none;
	opacity: .05;
	clip-path: inset(0 0 3% 0);
	transform: translate3d(0, -10px, 0);
	transition:
		opacity 160ms cubic-bezier(.76, 0, .24, 1),
		clip-path 160ms cubic-bezier(.76, 0, .24, 1),
		transform 160ms cubic-bezier(.76, 0, .24, 1);
}

/* The page gutter. 56px at the artboard width. */
.ec-gutter { padding-inline: var(--ec-gutter); }

.ec-section { padding-block: var(--ec-section-y); }
.ec-section--sm { padding-block: var(--ec-section-y-sm); }
.ec-section--lg { padding-block: var(--ec-section-y-lg); }

/* Ground changes. The only source of depth in the system. */
.ec-ground-ivory {
	background: var(--ec-ivory);
	border-top: 1px solid var(--ec-hairline);
	border-bottom: 1px solid var(--ec-hairline);
}
.ec-ground-black { background: var(--ec-black); color: var(--ec-cream); }

/* A content measure for editorial templates. */
.ec-measure { max-width: 74ch; }

/* Skip link. Off-canvas until focused, then it lands on the gutter. */
.ec-skip {
	position: absolute;
	top: 0;
	left: var(--ec-gutter);
	z-index: 80;
	background: var(--ec-ink);
	color: var(--ec-cream);
	font: 500 11px / 1 var(--ec-font-text);
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 15px 22px;
	text-decoration: none;
	opacity: 0;
	transform: translateY(-100%);
	transition: transform var(--ec-dur-hover) ease, opacity var(--ec-dur-hover) ease;
}
.ec-skip:focus {
	opacity: 1;
	transform: translateY(0);
	color: var(--ec-cream);
}

/* =============================================================================
   06  BUTTONS & LINKS
   Square corners, 52px tall (48px in the Home artboard), 11px/500 label at
   .22em. Hover moves ink to plum over 300ms. Never a radius, never a shadow.
   ============================================================================= */

.ec-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 30px;
	background: var(--ec-ink);
	color: var(--ec-cream);
	border: 0;
	border-radius: var(--ec-radius);
	font: 500 11px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--ec-dur-hover) ease, color var(--ec-dur-hover) ease;
}
.ec-btn:hover,
.ec-btn:focus {
	background: var(--ec-plum);
	color: var(--ec-cream);
}

/* Outline. Same box, inverted on hover. */
.ec-btn--secondary {
	background: none;
	border: 1px solid var(--ec-ink);
	color: var(--ec-ink);
	padding: 0 26px;
}
.ec-btn--secondary:hover,
.ec-btn--secondary:focus {
	background: var(--ec-ink);
	color: var(--ec-cream);
}

/* On a photograph: white ground, ink label. Used by the Home hero. */
.ec-btn--light {
	background: var(--ec-page);
	color: var(--ec-ink);
}
.ec-btn--light:hover,
.ec-btn--light:focus {
	background: var(--ec-ivory);
	color: var(--ec-ink);
}

/* The Home artboard's shorter button. */
.ec-btn--compact { min-height: 48px; height: 48px; padding: 0 28px; }

/* A link that reads as a link. The third and last button-ish thing. */
.ec-link-quiet {
	display: inline-block;
	font: 400 11px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	color: var(--ec-ink);
	text-decoration: underline;
	text-underline-offset: 5px;
	padding: 8px 0;
	white-space: nowrap;
	transition: color var(--ec-dur-hover) ease;
}
.ec-link-quiet:hover,
.ec-link-quiet:focus { color: var(--ec-plum); }

.ec-btn svg,
.ec-link-quiet svg { flex: 0 0 auto; }

/* Square icon button — rail arrows, dismissals. 42px box + 2px focus ring. */
.ec-iconbtn {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: none;
	border: 1px solid var(--ec-ink-muted);
	border-radius: var(--ec-radius);
	color: var(--ec-ink);
	cursor: pointer;
	transition: background var(--ec-dur-hover) ease, color var(--ec-dur-hover) ease, border-color var(--ec-dur-hover) ease;
}
.ec-iconbtn:hover,
.ec-iconbtn:focus {
	background: var(--ec-ink);
	color: var(--ec-cream);
	border-color: var(--ec-ink);
}
.ec-iconbtn[disabled] { opacity: .35; cursor: default; }
.ec-iconbtn[disabled]:hover {
	background: none;
	color: var(--ec-ink);
	border-color: var(--ec-ink-muted);
}

/* =============================================================================
   07  SECTION HEADS
   Two treatments, and only two.
     .ec-sechead  — About: 13px label at .28em over a 44px plum rule.
     .ec-rowhead  — Home:  the same label with an action on the right.
   ============================================================================= */

.ec-sechead {
	display: inline-flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}
.ec-sechead__label {
	font: 400 13px / 18px var(--ec-font-text);
	letter-spacing: var(--ec-track-head);
	text-transform: uppercase;
	color: var(--ec-ink);
	margin: 0;
}
.ec-sechead__rule {
	display: block;
	width: 44px;
	height: 1px;
	background: var(--ec-plum);
}
.ec-sechead--center {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ec-sechead--center .ec-sechead__label { text-align: center; }

.ec-rowhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}
.ec-rowhead__label {
	font: 400 13px / 18px var(--ec-font-text);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ec-ink);
	margin: 0;
}
.ec-rowhead__actions {
	display: flex;
	align-items: center;
	gap: 22px;
}

/* An eyebrow above a display headline. */
.ec-eyebrow {
	font: 400 10px / 14px var(--ec-font-text);
	letter-spacing: var(--ec-track-head);
	text-transform: uppercase;
	color: var(--ec-ink-muted);
	margin: 0 0 20px;
}
.ec-eyebrow--onDark { color: var(--ec-cream-70); }

/* =============================================================================
   08  MEDIA
   Square corners, hairline placeholder ground, per-image object-position,
   1.04 scale on hover over 600ms. Captions sit beneath, never over.
   ============================================================================= */

.ec-media {
	position: relative;
	display: block;
	background: var(--ec-hairline);
	overflow: hidden;
}
.ec-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%; /* per-image value arrives as a style attribute */
}

/* The ratios the system allows. */
.ec-media--2-3   { aspect-ratio: 2 / 3; }   /* product portrait */
.ec-media--3-4   { aspect-ratio: 3 / 4; }   /* editorial portrait */
.ec-media--4-5   { aspect-ratio: 4 / 5; }   /* lifestyle    */
.ec-media--1-1   { aspect-ratio: 1 / 1; }   /* process tile */
.ec-media--16-11 { aspect-ratio: 16 / 11; } /* editorial    */
.ec-media--4-3   { aspect-ratio: 4 / 3; }
.ec-media--16-10 { aspect-ratio: 16 / 10; }

/* Hover zoom. Scale only — never a move, never a shadow. */
.ec-media--zoom > img { transition: transform var(--ec-dur-reveal) ease; }
.ec-media--zoom:hover > img,
a:hover .ec-media--zoom > img,
a:focus-visible .ec-media--zoom > img { transform: scale(1.04); }

.ec-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ec-stack-xs);
}
.ec-figure figcaption {
	font: 400 10px / 15px var(--ec-font-text);
	letter-spacing: var(--ec-track-caption);
	text-transform: uppercase;
	color: var(--ec-ink-muted);
	text-wrap: balance;
}

/* A frame for artwork that has not been supplied yet. */
.ec-media-pending {
	position: relative;
	display: grid;
	place-items: center;
	background: var(--ec-hairline);
	border: 1px solid var(--ec-rule-frame);
	padding: 20px;
	text-align: center;
	font: 400 10px / 16px var(--ec-font-text);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ec-ink-muted);
}

/* =============================================================================
   09  FORMS
   Fields are underlines, not boxes. A native select is the one exception,
   because it needs its own edge to read as a control.
   ============================================================================= */

.ec-field {
	flex: 1;
	height: 46px;
	padding: 0 2px;
	border: 0;
	border-bottom: 1px solid var(--ec-field-line, var(--ec-ink-muted));
	background: none;
	font: 400 16px / 24px var(--ec-font-text); /* 16px keeps iOS from zooming */
	color: var(--ec-ink);
	outline-offset: 6px;
	border-radius: var(--ec-radius);
	transition: border-color var(--ec-dur-hover) ease;
}
.ec-field::placeholder { color: var(--ec-ink-muted); opacity: 1; }
.ec-field:focus { border-bottom-color: var(--ec-plum); }
.ec-field[aria-invalid='true'] { --ec-field-line: var(--ec-error); }

.ec-field-label {
	display: block;
	font: 400 11px / 16px var(--ec-font-text);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ec-ink-muted);
	margin-bottom: 12px;
}
.ec-field-label.is-error { color: var(--ec-error); }

.ec-select {
	min-height: 44px;
	padding: 0 14px;
	background: var(--ec-page);
	color: var(--ec-ink);
	border: 1px solid var(--ec-rule-field); /* the lightest border allowed */
	border-radius: var(--ec-radius);
	font: 400 13px / 1 var(--ec-font-text);
	cursor: pointer;
}
.ec-select--dark {
	background: var(--ec-ink);
	color: var(--ec-cream);
	border-color: var(--ec-cream-18);
	height: 42px;
	min-height: 42px;
	padding: 0 12px;
}

.ec-form-error {
	font: 400 13px / 20px var(--ec-font-text);
	color: var(--ec-error);
	margin: 12px 0 0;
}
.ec-form-success {
	font: 400 16px / 24px var(--ec-font-text);
	color: var(--ec-success);
	margin: 0;
}

.ec-searchform {
	display: flex;
	gap: 16px;
	align-items: flex-end;
	max-width: 520px;
}
.ec-searchform .ec-btn { flex: 0 0 auto; }

/* =============================================================================
   10  MOTION & REVEAL
   16px rise plus fade, 80ms stagger, once per element. All of it skipped
   under prefers-reduced-motion.
   ============================================================================= */

/* Content is visible by DEFAULT and only hidden once <html> carries `js`.
   Written this way round on purpose: if JavaScript is off, or the script
   fails to load, the page still reads as a finished page instead of a blank
   one. The `js` class is set inline at the top of <head>, so a scripted
   visitor never sees the un-hidden state flash. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(var(--ec-reveal-rise));
	transition:
		opacity   var(--ec-dur-reveal) ease var(--ec-reveal-delay, 0ms),
		transform var(--ec-dur-reveal) ease var(--ec-reveal-delay, 0ms);
}
.js [data-reveal][data-shown] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.js [data-reveal] { opacity: 1; transform: none; }
	.ec-media--zoom:hover > img { transform: none; }
	.js .ec-shell { animation: none; }
	body.ec-page-leaving .ec-shell {
		opacity: 1;
		clip-path: none;
		transform: none;
	}
}

/* =============================================================================
   11  ANNOUNCEMENT BAR
   Black ground, cream type, one rotating message, dismissible.
   ============================================================================= */

.ec-announce {
	background: var(--ec-ink);
	min-height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	position: relative;
	padding: 0 56px;
}
.ec-announce[hidden] { display: none; }
.ec-announce__dot {
	width: 16px;
	height: 16px;
	border: 1px solid var(--ec-cream-70);
	border-radius: 50%; /* the one round thing in the system: it is a dot */
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.ec-announce__dot::after {
	content: '';
	width: 4px;
	height: 4px;
	background: var(--ec-cream);
	border-radius: 50%;
}
.ec-announce__msg {
	font: 400 10px / 14px var(--ec-font-text);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ec-cream);
	margin: 0;
	text-align: center;
}
.ec-announce__close {
	position: absolute;
	right: 12px;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--ec-cream-70);
	cursor: pointer;
	transition: color var(--ec-dur-hover) ease;
}
.ec-announce__close:hover,
.ec-announce__close:focus { color: var(--ec-cream); }

/* =============================================================================
   12  HEADER, PRIMARY NAV, MEGA MENU
   Sticky white bar, hairline underneath. Three columns at desktop: nav,
   wordmark, actions. The current page carries plum ink and a 1px underline;
   every other item holds a transparent border so nothing shifts on hover.
   ============================================================================= */

.ec-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ec-page);
	border-bottom: 1px solid var(--ec-hairline);
}

/* On pages that open with a photographic hero, the masthead occupies the
   hero's top edge instead of adding a solid strip above it. Absolute
   positioning keeps the announcement bar in normal flow and automatically
   follows it when it is shown or dismissed. */
body.ec-has-hero-header .ec-header {
	position: absolute;
	top: auto;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: transparent;
	color: var(--ec-cream);
	text-shadow: 0 1px 18px rgba(0, 0, 0, .34);
}
body.admin-bar.ec-has-hero-header .ec-header { top: auto; }
body.ec-has-hero-header .ec-header .ec-brand,
body.ec-has-hero-header .ec-header .ec-brand:hover,
body.ec-has-hero-header .ec-header .ec-brand__tag,
body.ec-has-hero-header .ec-header .ec-nav__link,
body.ec-has-hero-header .ec-header .ec-action,
body.ec-has-hero-header .ec-header .ec-action__count,
body.ec-has-hero-header .ec-header .ec-navtoggle {
	color: var(--ec-cream);
}
body.ec-has-hero-header .ec-header .ec-nav__link:hover,
body.ec-has-hero-header .ec-header .ec-nav__link:focus-visible,
body.ec-has-hero-header .ec-header .ec-nav__item.is-open > .ec-nav__link,
body.ec-has-hero-header .ec-header .ec-action:hover,
body.ec-has-hero-header .ec-header .ec-action:focus,
body.ec-has-hero-header .ec-header .ec-navtoggle:hover,
body.ec-has-hero-header .ec-header .ec-navtoggle:focus {
	color: var(--ec-cream);
	opacity: .78;
}
body.ec-has-hero-header .ec-header .ec-nav__item.current-menu-item > .ec-nav__link,
body.ec-has-hero-header .ec-header .ec-nav__item.current-menu-ancestor > .ec-nav__link,
body.ec-has-hero-header .ec-header .ec-nav__item.current-menu-parent > .ec-nav__link,
body.ec-has-hero-header .ec-header .ec-nav__item.current_page_item > .ec-nav__link,
body.ec-has-hero-header .ec-header .ec-nav__link[aria-current='page'] {
	color: var(--ec-cream);
}
.ec-header__inner {
	position: relative;
	min-height: 78px;
	padding: 12px var(--ec-gutter);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px 24px;
}

/* --- Wordmark --- */
.ec-brand {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-decoration: none;
	color: var(--ec-ink);
	text-align: center;
}
.ec-brand:hover { color: var(--ec-ink); }
.ec-brand__mark {
	position: relative;
	display: block;
	width: 205px;
	max-width: 100%;
	aspect-ratio: 911 / 105;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}

/* The SVG has a tight viewbox around the supplied Ecoleas artwork, so no
   letter is clipped while its original thin strokes and spacing stay sharp. */
.ec-brand__mark::before,
.ec-footer__display-wordmark::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 911 / 105;
	background: url('assets/images/ecoleas-wordmark-vector.svg') center / 100% 100% no-repeat;
	filter: none;
	mix-blend-mode: normal;
	pointer-events: none;
}
body.ec-has-hero-header .ec-brand__mark::before {
	filter: brightness(0) invert(1);
}
body.ec-has-hero-header .ec-header.is-scrolled .ec-brand__mark::before {
	filter: none;
}
.ec-brand__tag {
	font: 400 10px / 1 var(--ec-font-text);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ec-ink-muted);
}
.ec-brand img { display: block; max-height: 48px; width: auto; }

/* --- Primary nav --- */
.ec-nav {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	display: flex;
	flex-wrap: wrap;
	gap: 14px clamp(13px, 1.5vw, 22px);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ec-nav__item { position: static; }
.ec-nav__link {
	position: relative;
	display: inline-block;
	background: none;
	border: 0;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	padding: 14px 0;   /* 44px target with the 16px line box */
	font: 400 11px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	color: var(--ec-ink);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--ec-dur-hover) ease;
}
.ec-nav__link::after {
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	height: 1px;
	content: '';
	pointer-events: none;
	background: currentColor;
	border-radius: 0;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--ec-dur-hover) ease;
}
.ec-nav__link:hover,
.ec-nav__link:focus-visible,
.ec-nav__item.is-open > .ec-nav__link {
	color: var(--ec-plum);
}
.ec-nav__link:hover::after,
.ec-nav__link:focus-visible::after,
.ec-nav__item.is-open > .ec-nav__link::after {
	transform: scaleX(1);
	transform-origin: left center;
}
/* Current page. Plum ink, plum rule — the marker, not a hover state. */
.ec-nav__item.current-menu-item > .ec-nav__link,
.ec-nav__item.current-menu-ancestor > .ec-nav__link,
.ec-nav__item.current-menu-parent > .ec-nav__link,
.ec-nav__item.current_page_item > .ec-nav__link,
.ec-nav__link[aria-current='page'] {
	color: var(--ec-plum);
}
.ec-nav__item.current-menu-item > .ec-nav__link::after,
.ec-nav__item.current-menu-ancestor > .ec-nav__link::after,
.ec-nav__item.current-menu-parent > .ec-nav__link::after,
.ec-nav__item.current_page_item > .ec-nav__link::after,
.ec-nav__link[aria-current='page']::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* --- Header actions: wishlist, search, cart --- */
.ec-actions {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(10px, 1.2vw, 18px);
	justify-content: flex-end;
	align-items: center;
}
.ec-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 44px;
	font: 400 11px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	color: var(--ec-ink);
	text-decoration: none;
	padding: 0;
	white-space: nowrap;
	transition: color var(--ec-dur-hover) ease;
}
.ec-action:hover,
.ec-action:focus { color: var(--ec-plum); }
.ec-action__count { color: var(--ec-ink-muted); }
.ec-action svg {
	display: block;
	flex: 0 0 auto;
}

/* --- Mega menu ---
   One ivory panel spanning the header, opened on hover or keyboard focus of
   a top-level item. Closed by leaving the header or pressing Escape. */
.ec-mega {
	border-top: 1px solid var(--ec-hairline);
	background: var(--ec-ivory);
	padding: 36px var(--ec-gutter) 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
}
.ec-mega[hidden] { display: none; }
.ec-mega__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ec-mega__title {
	font: 400 11px / 16px var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	color: var(--ec-ink-muted);
}
.ec-mega__link {
	font: 400 14px / 22px var(--ec-font-text);
	color: var(--ec-ink);
	text-decoration: none;
	align-self: flex-start;
	transition: color var(--ec-dur-hover) ease;
}
.ec-mega__link:hover,
.ec-mega__link:focus { color: var(--ec-plum); }
.ec-mega__feature {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ec-mega__feature-title {
	font: 400 14px / 20px var(--ec-font-display);
	color: var(--ec-ink);
}

/* --- Mobile nav toggle. Hidden until the responsive layer needs it. --- */
.ec-navtoggle {
	display: none;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	padding: 14px 0;
	min-height: 44px;
	font: 400 11px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	color: var(--ec-ink);
	cursor: pointer;
	transition: color var(--ec-dur-hover) ease;
}
.ec-navtoggle:hover,
.ec-navtoggle:focus { color: var(--ec-plum); }

/* =============================================================================
   13  FOOTER
   Shared editorial footer: four columns, centred star rule, oversized wordmark
   and a compact legal row on a warm neutral ground.
   ============================================================================= */

.ec-footer {
	position: relative;
	overflow: hidden;
	background: var(--ec-footer-cream);
	color: var(--ec-ink);
}
.ec-footer__inner {
	width: min(100%, 1536px);
	margin-inline: auto;
	padding: clamp(34px, 3.3vw, 50px) clamp(32px, 7.8vw, 120px) clamp(30px, 2.6vw, 40px);
}
.ec-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(42px, 5vw, 68px) clamp(40px, 9vw, 140px);
}

/* Link columns. */
.ec-footer__col {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ec-footer__title {
	font: 500 clamp(12px, .95vw, 15px) / 1.2 var(--ec-font-text);
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--ec-ink);
	margin-bottom: 10px;
}
.ec-footer__title::after,
.ec-footer__currency label::after {
	content: '';
	display: block;
	width: 34px;
	height: 1px;
	margin-top: 18px;
	background: #BDB3AC;
}
.ec-footer__link {
	font: 400 clamp(14px, 1.12vw, 17px) / 1.55 var(--ec-font-text);
	color: var(--ec-ink);
	text-decoration: none;
	align-self: flex-start;
	border-bottom: 1px solid transparent; /* held so hover never shifts the row */
	transition:
		color var(--ec-dur-hover) ease,
		border-color var(--ec-dur-hover) ease,
		transform 400ms cubic-bezier(.22, 1, .36, 1);
}
.ec-footer__link:hover,
.ec-footer__link:focus {
	color: var(--ec-plum);
	border-bottom-color: var(--ec-sand);
	transform: translate3d(2px, 0, 0);
}

/* Social. */
.ec-footer__socialrow {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.ec-footer__socialicons {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.6vw, 32px);
}
.ec-social-link {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ec-ink);
	text-decoration: none;
	transition: color var(--ec-dur-hover) ease, opacity var(--ec-dur-hover) ease;
}
.ec-social-link:hover,
.ec-social-link:focus {
	color: var(--ec-plum);
	opacity: .7;
}

/* Currency column. */
.ec-footer__currency {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ec-footer__currency label {
	font: 500 clamp(12px, .95vw, 15px) / 1.2 var(--ec-font-text);
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--ec-ink);
	margin-bottom: 0;
}
.ec-footer__utility {
	display: flex;
	flex-direction: column;
	gap: clamp(34px, 3.2vw, 48px);
}
.ec-footer .ec-select {
	width: 100%;
	min-height: 54px;
	padding-inline: 21px;
	background: transparent;
	border-color: #C7BDB5;
	font-size: clamp(14px, 1.1vw, 17px);
}

/* The fine rule and four-point couture mark. */
.ec-footer__divider {
	display: flex;
	align-items: center;
	gap: 25px;
	margin-top: clamp(46px, 4vw, 62px);
	color: #3B2D24;
	font-size: 17px;
	line-height: 1;
}

.ec-footer__divider::before,
.ec-footer__divider::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: #BDB3AC;
}

/* Oversized editorial brand signature, preserving the supplied artwork's
 * original typography while the SVG keeps it crisp at every zoom. */
.ec-footer__display-wordmark {
	display: block;
	position: relative;
	width: min(84vw, 1200px);
	max-width: 100%;
	aspect-ratio: 1385 / 156;
	overflow: hidden;
	margin: clamp(38px, 3.5vw, 54px) auto clamp(32px, 3vw, 46px);
	color: #33251D;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
}
.ec-footer__display-wordmark:hover,
.ec-footer__display-wordmark:focus { color: #33251D; }
.ec-footer__display-wordmark::before {
	/* User-supplied footer artwork, with only its empty canvas removed. */
	background-image: url('assets/images/ecoleas-footer-wordmark-cutout.png');
	background-size: 100% 100%;
	background-position: center;
	background-color: transparent;
	background-blend-mode: normal;
	aspect-ratio: auto;
	height: 100%;
	mix-blend-mode: normal;
}

/* Bottom legal row. */
.ec-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px clamp(20px, 2.4vw, 34px);
	background: transparent;
	text-align: center;
}
.ec-footer__copy {
	font: 400 clamp(11px, .9vw, 13px) / 18px var(--ec-font-text);
	color: var(--ec-ink);
}
.ec-footer__legal-divider,
.ec-legal li + li::before {
	display: block;
	width: 1px;
	height: 18px;
	background: #4A4039;
	content: '';
}
.ec-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px clamp(20px, 2.4vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ec-legal li {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.4vw, 34px);
}
.ec-legal a {
	font: 400 clamp(11px, .9vw, 13px) / 18px var(--ec-font-text);
	color: var(--ec-ink);
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--ec-dur-hover) ease,
		transform 400ms cubic-bezier(.22, 1, .36, 1);
}
.ec-legal a:hover,
.ec-legal a:focus {
	color: var(--ec-ink);
	transform: translate3d(2px, 0, 0);
}

/* The same restrained footer entrance is used on every template. Attributes
   are added by the global theme script, so content remains visible if script
   execution is unavailable. */
.js [data-footer-motion] {
	opacity: 0;
	transition:
		opacity 900ms cubic-bezier(.22, 1, .36, 1),
		transform 1s cubic-bezier(.22, 1, .36, 1),
		clip-path 1s cubic-bezier(.22, 1, .36, 1);
}
.js [data-footer-motion='line'] { transform: scaleX(.94); }
.js [data-footer-motion='wordmark'] {
	clip-path: inset(100% 0 0 0);
	transform: translate3d(0, 28px, 0);
}
.js [data-footer-motion='legal'] { transform: translate3d(0, 14px, 0); }
.js [data-footer-motion].is-footer-visible {
	opacity: 1;
	clip-path: inset(0 0 0 0);
	transform: none;
}

/* =============================================================================
   14  WORDPRESS CORE CLASSES
   Required for theme-check and for anything the block editor emits.
   ============================================================================= */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--ec-ink);
	clip-path: none;
	color: var(--ec-cream);
	display: block;
	font: 500 11px / 1 var(--ec-font-text);
	letter-spacing: .2em;
	text-transform: uppercase;
	height: auto;
	left: var(--ec-gutter);
	padding: 15px 22px;
	text-decoration: none;
	top: 0;
	width: auto;
	z-index: 100000;
}

.alignleft {
	float: left;
	margin-right: var(--ec-stack-l);
	margin-bottom: var(--ec-stack-m);
}
.alignright {
	float: right;
	margin-left: var(--ec-stack-l);
	margin-bottom: var(--ec-stack-m);
}
.aligncenter {
	clear: both;
	display: block;
	margin-inline: auto;
	margin-bottom: var(--ec-stack-m);
}
.alignwide  { max-width: min(100%, 1100px); margin-inline: auto; }
.alignfull  { max-width: none; width: 100%; margin-inline: 0; }

.wp-caption { max-width: 100%; margin-bottom: var(--ec-stack-m); }
.wp-caption img { display: block; }
.wp-caption-text,
.wp-element-caption {
	font: 400 10px / 15px var(--ec-font-text);
	letter-spacing: var(--ec-track-caption);
	text-transform: uppercase;
	color: var(--ec-ink-muted);
	margin-top: var(--ec-stack-xs);
}

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.gallery-item { margin: 0; }
.gallery-icon img { display: block; width: 100%; }

.sticky .ec-entry__title::after {
	content: ' · ' attr(data-sticky-label);
	font: 400 10px / 15px var(--ec-font-text);
	letter-spacing: var(--ec-track-caption);
	text-transform: uppercase;
	color: var(--ec-plum);
}

.bypostauthor > .ec-comment__body { border-left: 1px solid var(--ec-plum); padding-left: 18px; }

/* Block editor colour + font-size classes, so palette picks render on front. */
.has-ink-color            { color: var(--ec-ink); }
.has-ink-muted-color      { color: var(--ec-ink-muted); }
.has-plum-color           { color: var(--ec-plum); }
.has-cream-color          { color: var(--ec-cream); }
.has-label-brown-color    { color: var(--ec-label-brown); }
.has-ink-background-color         { background-color: var(--ec-ink); }
.has-plum-background-color        { background-color: var(--ec-plum); }
.has-ivory-background-color       { background-color: var(--ec-ivory); }
.has-hairline-background-color    { background-color: var(--ec-hairline); }
.has-cream-background-color       { background-color: var(--ec-cream); }
.has-footer-cream-background-color { background-color: var(--ec-footer-cream); }
.has-black-background-color       { background-color: var(--ec-black); }
.has-page-background-color        { background-color: var(--ec-page); }

/* =============================================================================
   15  CONTENT TEMPLATES
   Blog index, single post, page, search, 404, comments. These are not in the
   supplied artboards, so they are composed from the system's own parts.
   ============================================================================= */

.ec-pagehead {
	padding: clamp(48px, 6vw, 84px) var(--ec-gutter) clamp(30px, 4vw, 48px);
	border-bottom: 1px solid var(--ec-hairline);
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.4vw, 26px);
}
.ec-pagehead__title { max-width: 20ch; text-wrap: balance; }
.ec-pagehead__intro { max-width: 56ch; }

.ec-entries {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(32px, 4vw, 56px);
	padding: clamp(48px, 6vw, 80px) var(--ec-gutter);
}
.ec-entry {
	display: flex;
	flex-direction: column;
	gap: var(--ec-stack-s);
}
.ec-entry__meta {
	font: 400 10px / 15px var(--ec-font-text);
	letter-spacing: var(--ec-track-caption);
	text-transform: uppercase;
	color: var(--ec-ink-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.ec-entry__title {
	font: 400 clamp(19px, 2vw, 24px) / 1.25 var(--ec-font-display);
	letter-spacing: -.02em;
	margin: 0;
	text-wrap: balance;
}
.ec-entry__title a { text-decoration: none; }
.ec-entry__title a:hover { text-decoration: underline; text-underline-offset: 5px; }
.ec-entry__excerpt { max-width: 44ch; }

/* Single post / page. */
.ec-single { padding: 0 0 clamp(56px, 7vw, 96px); }
.ec-single__hero { margin-bottom: clamp(32px, 4vw, 56px); }
.ec-single__body { padding-inline: var(--ec-gutter); }
.ec-single__footer {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: var(--ec-stack-l);
	border-top: 1px solid var(--ec-hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	align-items: baseline;
}
.ec-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ec-taglist a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--ec-rule-field);
	font: 400 10px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-caption);
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--ec-dur-hover) ease, color var(--ec-dur-hover) ease;
}
.ec-taglist a:hover { border-color: var(--ec-plum); color: var(--ec-plum); }

/* Pagination and post navigation. */
.ec-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 var(--ec-gutter) clamp(56px, 7vw, 88px);
}
.ec-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ec-rule-field);
	font: 400 11px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--ec-dur-hover) ease, color var(--ec-dur-hover) ease, border-color var(--ec-dur-hover) ease;
}
.ec-pagination .page-numbers:hover,
.ec-pagination .page-numbers:focus {
	background: var(--ec-ink);
	color: var(--ec-cream);
	border-color: var(--ec-ink);
}
.ec-pagination .page-numbers.current {
	background: var(--ec-plum);
	color: var(--ec-cream);
	border-color: var(--ec-plum);
}

.ec-postnav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(20px, 3vw, 40px);
	padding: clamp(32px, 4vw, 52px) var(--ec-gutter);
	border-top: 1px solid var(--ec-hairline);
}
.ec-postnav a { text-decoration: none; display: flex; flex-direction: column; gap: var(--ec-stack-xs); }
.ec-postnav .ec-caption { color: var(--ec-label-brown); }

/* Comments. */
.ec-comments {
	padding: clamp(40px, 5vw, 72px) var(--ec-gutter);
	border-top: 1px solid var(--ec-hairline);
}
.ec-comments__title { margin-bottom: clamp(24px, 3vw, 36px); }
.ec-commentlist { list-style: none; margin: 0; padding: 0; }
.ec-commentlist ol.children { list-style: none; margin: 0 0 0 clamp(18px, 3vw, 40px); padding: 0; }
.ec-comment { padding: var(--ec-stack-l) 0; border-bottom: 1px solid var(--ec-hairline); }
.ec-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-bottom: var(--ec-stack-s);
}
.ec-comment__author { font: 400 14px / 20px var(--ec-font-display); }
.ec-comment__date {
	font: 400 10px / 15px var(--ec-font-text);
	letter-spacing: var(--ec-track-caption);
	text-transform: uppercase;
	color: var(--ec-ink-muted);
}
.ec-comment__body p { font: 400 var(--ec-body-s) / 1.6 var(--ec-font-text); color: var(--ec-ink-muted); margin: 0 0 var(--ec-stack-s); }
.comment-respond { margin-top: clamp(32px, 4vw, 52px); }
.comment-reply-title { font: 400 13px / 18px var(--ec-font-text); letter-spacing: var(--ec-track-head); text-transform: uppercase; margin: 0 0 var(--ec-stack-m); }
.comment-form { display: flex; flex-direction: column; gap: var(--ec-stack-m); max-width: 620px; }
.comment-form p { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.comment-form label {
	font: 400 11px / 16px var(--ec-font-text);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ec-ink-muted);
}
.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ec-rule-field);
	border-radius: var(--ec-radius);
	background: var(--ec-page);
	font: 400 16px / 24px var(--ec-font-text);
	color: var(--ec-ink);
}
.comment-form textarea { min-height: 160px; resize: vertical; }
.comment-form .submit {
	align-self: flex-start;
	min-height: 52px;
	padding: 0 30px;
	background: var(--ec-ink);
	color: var(--ec-cream);
	border: 0;
	border-radius: var(--ec-radius);
	font: 500 11px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--ec-dur-hover) ease;
}
.comment-form .submit:hover { background: var(--ec-plum); }
.comment-form .comment-form-cookies-consent { flex-direction: row; align-items: center; gap: 10px; }

/* 404 and no-results. */
.ec-blank {
	padding: clamp(72px, 10vw, 140px) var(--ec-gutter);
	display: flex;
	flex-direction: column;
	gap: clamp(22px, 3vw, 32px);
	align-items: flex-start;
	max-width: 62ch;
}

/* Sidebar / widget column, when a template uses one. */
.ec-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(40px, 5vw, 72px);
	padding-inline: var(--ec-gutter);
}
.ec-sidebar .widget { margin-bottom: clamp(32px, 4vw, 48px); }
.ec-sidebar .widget-title {
	font: 400 11px / 16px var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	color: var(--ec-label-brown);
	margin: 0 0 var(--ec-stack-s);
}
.ec-sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ec-sidebar a { font: 400 14px / 22px var(--ec-font-text); text-decoration: none; }

@media (min-width: 1000px) {
	.ec-with-sidebar { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* =============================================================================
   16  RESPONSIVE LAYER
   The About artboard is fluid by construction, so most of the work here is
   for the Home artboard, whose values were authored at a fixed 1440px. The
   rules below only ever apply BELOW that width — at 1440px and above the
   design renders exactly as drawn.
   ============================================================================= */

/* Header: the wordmark takes its own row under 1180px. */
@media (min-width: 861px) {
	/* Keep the mega menu out of the navigation flex row. It is a header
	   overlay, so opening Shop or Collections must never change header height
	   or push the logo/actions out of their single-row alignment. */
	.ec-mega {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 80;
		max-height: min(72svh, 640px);
		overflow: auto;
	}
}

@media (max-width: 1180px) {
	.ec-header__inner {
		grid-template-columns: 1fr auto;
		gap: 12px 20px;
	}
	.ec-brand {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: center;
	}
	.ec-nav    { grid-column: 1; grid-row: 2; }
	.ec-actions { grid-column: 2; grid-row: 2; }
}

/* Under 860px the primary nav collapses behind a toggle. Opened, it becomes
   a stacked list under the bar — same ink, same targets, no new components. */
@media (max-width: 860px) {
	.ec-navtoggle { display: inline-flex; }

	.ec-nav {
		display: none;
		grid-column: 1 / -1;
		grid-row: 3;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		border-top: 1px solid var(--ec-hairline);
		margin-top: 4px;
		padding-top: 4px;
	}
	.ec-nav.is-expanded { display: flex; }
	body.ec-has-hero-header .ec-nav.is-expanded {
		background: rgba(21, 21, 21, .94);
		border-top-color: rgba(255, 248, 236, .28);
		margin-inline: calc(var(--ec-gutter) * -1);
		padding-inline: var(--ec-gutter);
	}
	body.ec-has-hero-header .ec-nav.is-expanded .ec-nav__link {
		border-bottom-color: transparent;
	}
	.ec-nav__link {
		display: block;
		width: 100%;
		text-align: left;
		padding: 15px 0;
		border: 0;
	}
	.ec-nav__link::after {
		display: block;
		right: auto;
		width: min(58px, 20%);
		bottom: 7px;
	}
	.ec-nav__item.current-menu-item > .ec-nav__link,
	.ec-nav__link[aria-current='page'] { border-bottom-color: transparent; }

	/* The mega panel stacks rather than opening as an overlay. */
	.ec-mega { grid-template-columns: 1fr; gap: 28px; padding-block: 28px 32px; }

	/* Action labels give way to their icons; the aria-label carries the name.
	   The link keeps a 44px box so the target does not shrink to the width of
	   the 15px icon — the design system's minimum applies to what a finger
	   hits, not to what is drawn inside it. */
	.ec-actions { gap: 10px 4px; }
	.ec-action {
		gap: 6px;
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}
	.ec-action__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

@media (max-width: 899px) {
	.ec-footer__inner { padding-inline: clamp(24px, 7vw, 52px); }
	.ec-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 58px clamp(30px, 9vw, 72px);
	}
	.ec-footer__utility {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: flex-start;
		gap: clamp(48px, 12vw, 90px);
	}
	.ec-footer__currency,
	.ec-footer__socialrow { flex: 1 1 0; }
	.ec-footer__display-wordmark {
		width: min(86vw, 900px);
	}
	.ec-footer__bottom,
	.ec-legal {
		justify-content: center;
		text-align: center;
	}
}

/* All three header regions stack under 600px, per the design system. */
@media (max-width: 600px) {
	.ec-header__inner { grid-template-columns: 1fr auto; }
	.ec-announce { padding: 8px 48px; }
	.ec-announce__msg { letter-spacing: .2em; }
	.ec-footer__inner { padding-top: 32px; padding-bottom: 28px; }
	/* Two columns all the way down, not one. Collapsing to a single column
	   stacked fifteen links, the currency picker and the social row into one
	   strip roughly 1,550px tall — most of a phone's footer spent scrolling
	   past it. Two columns hold at 320px and halve that. */
	.ec-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px clamp(18px, 6vw, 30px); }
	.ec-footer__utility {
		grid-column: auto;
		flex-direction: column;
		gap: 34px;
	}

	/* All four icons stay on one line inside the narrow utility column.
	   The column is 150px at 375px wide and 126px at 320px, so the icons are
	   sized from the viewport to fit four across with their gaps rather than
	   wrapping WhatsApp onto a row of its own. */
	.ec-footer__socialicons {
		flex-wrap: nowrap;
		gap: clamp(4px, 2.2vw, 14px);
	}


	.ec-footer__divider { margin-top: 42px; gap: 16px; }
	.ec-footer__display-wordmark {
		margin-block: 36px 32px;
		width: 100%;
	}
	.ec-brand__mark { width: 190px; }
	.ec-footer__bottom,
	.ec-legal {
		flex-direction: column;
		gap: 12px;
	}
	.ec-footer__legal-divider,
	.ec-legal li + li::before { display: none; }
	.ec-legal li { gap: 0; }
}

/* Touch targets.
   The artboards were drawn for a mouse, and a few controls sit under the 44px
   the design system asks for — a quiet link is 27px tall, a social icon 34px
   square. Those sizes are kept exactly as drawn on pointer devices; on a touch
   screen the hit area is padded out to 44px WITHOUT changing what is drawn, so
   the design is preserved and the law is still met where it matters. */
@media (hover: none) and (pointer: coarse) {
	/* min-height rather than padding: it reaches 44px whatever the line box
	   works out to, so the guarantee does not depend on the type metrics. */
	.ec-link-quiet,
	.ec-footer__link,
	.ec-legal a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.ec-social-link {
		width: 44px;
		height: 44px;
		margin: -5px; /* keeps the row's optical spacing unchanged */
	}

	.ec-footer__socialicons { gap: 16px; }

	/* The columns tighten so the taller rows do not stretch the footer. */
	.ec-footer__col { gap: 4px; }
	.ec-legal { gap: 0 clamp(16px, 2.2vw, 26px); }
}

/* =============================================================================
   Four social icons, one line, inside the footer's narrow utility column
   -----------------------------------------------------------------------------
   Stated after the coarse-pointer block above, which sizes these to a 44px
   square everywhere else and would otherwise win on source order.

   The column they sit in is 150px wide at a 375px viewport and 126px at 320px.
   Four 44px squares plus their gaps need about 184px, so WhatsApp was being
   pushed onto a line of its own. The icons are sized from the viewport instead
   so all four fit across, and the full 44px height is kept — the target
   narrows, it does not shrink in both directions.
   ============================================================================= */

@media (max-width: 600px) {
	.ec-social-link {
		width: clamp(26px, 7.4vw, 30px);
		height: 44px;
		margin: 0;
	}

	/* Restated here for the same reason as the width: the block above sets a
	   fixed 16px, which alone is wider than the room four icons leave. */
	.ec-footer__socialicons { gap: clamp(4px, 2vw, 12px); }
}

/* =============================================================================
   Phone footer — folded link rows, one social line, a compact sign-off
   -----------------------------------------------------------------------------
   Phones only (640px, the breakpoint the page-specific footer rules already
   use). Desktop and tablet are untouched. Scoped through `body` + two footer
   classes so it outranks the per-template 640px footer rules in linen.css,
   partywear.css, home-worlds.css, orders.css and partywear-checkout.css,
   giving every theme the same phone footer.

   The folding is added by initFooterAccordion() in theme.js; without script
   the three columns simply stay open as a single stacked list.
   ============================================================================= */

@media (max-width: 640px) {
	body .ec-footer.ec-footer--compact .ec-footer__inner {
		padding: 8px 20px 28px;
	}

	body .ec-footer.ec-footer--compact .ec-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Link sections as full-width rows divided by hairlines. */
	body .ec-footer.ec-footer--compact .ec-footer__col {
		gap: 0;
		padding-block: 6px 16px;
		border-bottom: 1px solid #D6CCC4;
	}

	body .ec-footer.ec-footer--compact .ec-footer__col .ec-footer__title {
		margin: 0;
		padding-block: 14px 8px;
		font-size: 13px;
		letter-spacing: .22em;
	}

	body .ec-footer.ec-footer--compact .ec-footer__col .ec-footer__title::after { display: none; }

	body .ec-footer.ec-footer--compact .ec-footer__link {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		font-size: 15px;
	}

	/* Folded state (script present). */
	body .ec-footer.ec-footer--compact.is-accordion .ec-footer__col { padding-block: 0; }
	body .ec-footer.ec-footer--compact.is-accordion .ec-footer__col .ec-footer__title { padding: 0; }
	body .ec-footer.ec-footer--compact.is-accordion .ec-footer__col:not(.is-open) > li:not(.ec-footer__title) { display: none; }
	body .ec-footer.ec-footer--compact.is-accordion .ec-footer__col.is-open { padding-bottom: 14px; }

	body .ec-footer.ec-footer--compact .ec-footer__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 58px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		text-align: left;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/* Plus that turns into a minus. */
	body .ec-footer.ec-footer--compact .ec-footer__toggle::after {
		content: '';
		flex: 0 0 auto;
		width: 12px;
		height: 12px;
		margin-left: 16px;
		background:
			linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
			linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
		transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
	}

	body .ec-footer.ec-footer--compact .ec-footer__toggle[aria-expanded="true"]::after {
		background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat;
		transform: rotate(180deg);
	}

	body .ec-footer.ec-footer--compact .ec-footer__toggle:focus-visible {
		outline: 1px solid currentColor;
		outline-offset: 4px;
	}

	/* The currency picker changes nothing at checkout, so phones skip it. */
	body .ec-footer.ec-footer--compact .ec-footer__currency { display: none; }

	body .ec-footer.ec-footer--compact .ec-footer__utility {
		grid-column: auto;
		grid-row: auto;
		width: 100%;
		align-items: center;
		gap: 0;
		padding-top: 30px;
	}

	/* Social: centred title, one row of 44px round icons. */
	body .ec-footer.ec-footer--compact .ec-footer__socialrow {
		align-items: center;
		width: 100%;
		gap: 16px;
	}

	body .ec-footer.ec-footer--compact .ec-footer__socialrow .ec-footer__title {
		margin: 0;
		font-size: 12px;
	}

	body .ec-footer.ec-footer--compact .ec-footer__socialrow .ec-footer__title::after { display: none; }

	body .ec-footer.ec-footer--compact .ec-footer__socialicons {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
	}

	body .ec-footer.ec-footer--compact .ec-social-link {
		width: 44px;
		height: 44px;
		margin: 0;
		border: 1px solid #C7BDB5;
		border-radius: 50%;
	}

	body .ec-footer.ec-footer--compact .ec-social-link:hover,
	body .ec-footer.ec-footer--compact .ec-social-link:focus {
		border-color: currentColor;
		opacity: 1;
	}

	/* Sign-off: smaller divider and wordmark. */
	body .ec-footer.ec-footer--compact .ec-footer__divider {
		margin-top: 30px;
		gap: 14px;
		font-size: 13px;
	}

	body .ec-footer.ec-footer--compact .ec-footer__display-wordmark {
		width: 78%;
		margin-block: 26px 22px;
	}

	/* Legal links on wrapped lines with dot separators, copyright under them. */
	body .ec-footer.ec-footer--compact .ec-footer__bottom {
		flex-direction: column-reverse;
		gap: 12px;
	}

	body .ec-footer.ec-footer--compact .ec-footer__legal-divider { display: none; }

	body .ec-footer.ec-footer--compact .ec-legal {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0;
	}

	body .ec-footer.ec-footer--compact .ec-legal li { gap: 0; }

	body .ec-footer.ec-footer--compact .ec-legal li + li::before {
		display: block;
		width: 3px;
		height: 3px;
		margin-inline: 10px;
		border-radius: 50%;
		background: #8C8078;
		content: '';
	}

	body .ec-footer.ec-footer--compact .ec-legal a {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
		font-size: 12px;
	}

	body .ec-footer.ec-footer--compact .ec-footer__copy {
		font-size: 11px;
		color: #6F645C;
	}
}