/*
Theme Name: MeasureMade
Theme URI: https://steppets.ca/
Author: Steppets
Author URI: https://steppets.ca/
Description: A custom theme built for Steppets — custom pet apparel from Montreal, Canada. Clean-room design that mirrors the store's established look (brand pink #bb5c80, dark top bar, off-canvas shop filters, vertical-thumbnail product gallery) while exposing the header, footer, menus, colours and newsletter popup as native WordPress controls. Classic WooCommerce templates with canonical hooks so the store's plugin systems (product configurator, attribute swatches, gallery, form add-ons, advanced reviews) keep working unchanged.
Version: 0.2.55
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary — built for Steppets Inc.
Text Domain: measuremade
Tags: woocommerce, custom-logo, custom-menu, custom-colors, widget-areas
*/

/* ---------------------------------------------------------------------------
   MeasureMade base stylesheet (original, written for this theme)
   Sections: tokens, base, utilities, top bar, header, navigation,
   off-canvas panels, content, front page sections, blog, sidebar,
   footer, popup, buttons/forms, responsive.
   WooCommerce-specific styling lives in assets/css/woocommerce.css.
--------------------------------------------------------------------------- */

:root {
	--measuremade-primary: #bb5c80;
	--measuremade-primary-dark: #a34c6d;
	/* Round 58 revision: primary ACTION colour — a deep rose in the
	   brand-pink family, darker and richer than the selection pink
	   (--measuremade-primary) so buttons read as their own moment.
	   The owner's phone verdict on the live 0.2.40 popup retired
	   the old Apple-blue action colour site-wide. */
	--measuremade-action: #9c3d63;
	--measuremade-action-dark: #883556;
	/* Frost v2 (round 58 revision): the glass material shared by the
	   newsletter popup and the off-canvas menu — one recipe, tuned
	   here, so the two components stay one system. */
	--measuremade-glass-bg: rgba(255, 255, 255, 0.78);
	--measuremade-glass-filter: blur(26px) saturate(1.8);
	--measuremade-secondary: #8498b0;
	--measuremade-ink: #222222;
	--measuremade-body: #4a4a4a;
	--measuremade-muted: #777777;
	--measuremade-line: #e5e0e2;
	--measuremade-topbar-bg: #bb5c88;
	--measuremade-topbar-text: #f2f2f2;
	--measuremade-sale: #dd3333;
	--measuremade-success: #81d742;
	--measuremade-alert: #d43e3e;
	--measuremade-bg-soft: #faf7f8;
	--measuremade-site-width: 1080px;
	--measuremade-radius: 4px;
	--measuremade-font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--measuremade-font-head: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Type scale (shared token set — see README "Design tokens"). */
	--measuremade-text-sm: 0.85rem;
	--measuremade-text-base: 1rem;
	--measuremade-text-lg: 1.3rem;
	--measuremade-text-xl: 1.6rem;
	--measuremade-text-2xl: 2rem;

	/* Spacing scale (shared token set — see README "Design tokens"). */
	--measuremade-space-1: 0.25rem;
	--measuremade-space-2: 0.5rem;
	--measuremade-space-3: 0.75rem;
	--measuremade-space-4: 1rem;
	--measuremade-space-5: 1.5rem;
	--measuremade-space-6: 2rem;
	--measuremade-space-7: 3rem;
}

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

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

/* Root overflow guard (fix round 65): nothing on the site may widen
   the page past the viewport — on phones an overflowing element
   makes the whole layout render wider than the screen (content cut
   at the right edge until the visitor pinch-zooms out). `clip`, not
   `hidden`: hidden turns the element into a scroll container, which
   can break the sticky header; clip simply forbids the overflow
   from creating scrollable area. */
html,
body {
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--measuremade-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--measuremade-body);
	background: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--measuremade-font-head);
	color: var(--measuremade-ink);
	line-height: 1.25;
	margin: 0 0 0.6em;
	font-weight: 700;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

a {
	color: var(--measuremade-primary);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--measuremade-primary-dark);
	text-decoration: underline;
}

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

ul,
ol {
	margin: 0 0 1em 1.2em;
	padding: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Typography helpers (class names carried over from the previous
   theme's builder markup by the content conversion) ------------------ */

.alt-font {
	font-family: "Dancing Script", "Segoe Script", cursive;
	font-weight: 400;
}

.uppercase {
	text-transform: uppercase;
}

.thin-font {
	font-weight: 300;
}

/* Layout ------------------------------------------------------------------ */

.measuremade-container {
	max-width: var(--measuremade-site-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.site-content {
	padding: 2.5em 0 3em;
}

.content-area {
	min-width: 0;
}

.has-sidebar .site-main-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 2.5em;
}

/* Top bar ----------------------------------------------------------------- */

.measuremade-topbar {
	background: var(--measuremade-topbar-bg);
	color: var(--measuremade-topbar-text);
	font-size: 0.82rem;
	line-height: 1.4;
}

.measuremade-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	min-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}

/* The notice centres in its own area of the bar (fix round 33,
   owner directive 2026-11-05): the message takes the bar's free
   width and centres its text within it — the full bar when no
   top-bar menu is assigned, the space beside the menu when one
   is. The bar's one-row flex structure is unchanged. */
.measuremade-topbar-message {
	flex: 1 1 auto;
	text-align: center;
}

.measuremade-topbar-message p {
	margin: 0;
}

.measuremade-topbar a {
	color: var(--measuremade-topbar-text);
}

.measuremade-topbar-nav ul {
	display: flex;
	gap: 1.1em;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Header ------------------------------------------------------------------ */

.site-header {
	background: #ffffff;
	border-bottom: 1px solid var(--measuremade-line);
	position: sticky;
	top: 0;
	z-index: 900;
}

.measuremade-header-inner {
	display: flex;
	align-items: center;
	/* One row, always (fix round 17): with the header search gone
	   the row holds logo + nav + actions and must never wrap the
	   nav onto a second line — the gaps compress first as the
	   viewport narrows toward the mobile breakpoint. */
	flex-wrap: nowrap;
	gap: clamp(0.75em, 2vw, 1.5em);
	min-height: 100px;
}

.site-branding {
	flex: 0 0 auto;
	line-height: 1;
}

.site-branding .custom-logo,
.site-branding .measuremade-logo-light {
	max-height: 72px;
	max-width: 169px;
	width: auto;
}

/* The white variant only ever appears in the header's light
   (transparent, over-hero) state — see the light-header rules below.
   Everywhere else the regular logo stands alone, as before. */
.site-branding .measuremade-logo-light {
	display: none;
}

.site-title {
	font-size: 1.7rem;
	font-weight: 800;
	margin: 0;
	letter-spacing: 0.02em;
}

.site-title a {
	color: var(--measuremade-ink);
	text-transform: uppercase;
}

.site-title a:hover {
	color: var(--measuremade-primary);
	text-decoration: none;
}

.site-description {
	margin: 0.2em 0 0;
	font-size: 0.85rem;
	color: var(--measuremade-muted);
}

.measuremade-header-nav {
	/* Pushed to the right of the logo, and the one shrinkable
	   track in the row: it may compress (its list gap clamps with
	   the viewport) but it never wraps and never pushes the
	   actions off the row. */
	margin-left: auto;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
}

.measuremade-header-actions {
	display: flex;
	align-items: center;
	gap: 1.1em;
	flex: 0 0 auto;
}

.measuremade-header-actions a {
	color: var(--measuremade-ink);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	position: relative;
}

.measuremade-header-actions a:hover {
	color: var(--measuremade-primary);
	text-decoration: none;
}

/* EN|FR language switcher (i18n R5; placements pinned by the
   owner 2026-11-07) — one renderer, two in-flow instances: the
   mobile off-canvas panel's final element (see the --panel
   variant in the off-canvas section below) and, since Round
   74, the desktop header's actions row (the --header variant
   directly below). Plain in-flow elements, never positioned,
   so no translation UI can stretch the page the way the old
   floating widget did. The current locale is plain text; only
   the other is a link. These base rules style the switcher's
   shared internals (separator, link, current). */
.measuremade-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--measuremade-ink);
	white-space: nowrap;
}

.measuremade-lang-switcher .measuremade-lang-sep {
	color: var(--measuremade-muted);
	font-weight: 400;
}

.measuremade-lang-switcher a.measuremade-lang-link {
	color: var(--measuremade-muted);
}

.measuremade-lang-switcher a.measuremade-lang-link:hover {
	color: var(--measuremade-primary);
	text-decoration: none;
}

/* The switcher's header variant (Round 74; owner decision
   2026-11-07): the same switcher inside the header's actions
   cluster, first in the row, sharing the cluster's flex gap —
   so desktop visitors, who never see the off-canvas panel,
   can switch language too. Desktop-only: the <=900px block
   below hides it, where the panel's instance takes over; the
   two instances never show together. Presentation matches the
   panel variant and the header's own typography: current
   language in brand pink at 600, the other a quiet link.
   Header states follow the header's existing mechanism — over
   the hero (light header, not stuck) the link takes white
   from the .measuremade-header-actions a rule in the light
   section below, the separator follows it (rule beside it),
   and the current language keeps its brand pink in both
   states: it reads on the dark hero and on the solid bar
   alike, and pink is the one colour the header reserves for
   "current" either way. In the stuck/solid bar everything
   falls back to the base rules here — ink, muted, pink. */
.measuremade-lang-switcher--header {
	text-transform: uppercase;
}

.measuremade-lang-switcher--header .measuremade-lang-current {
	color: var(--measuremade-primary);
	font-weight: 600;
}

/* The cart link reserves clear space to the right of the CART
   label for the count badge (fix round 17): the badge used to sit
   at top:-9px/right:-11px of the bare link, which put its left
   edge 7px INTO the word — the digit landed on the T. The
   reserved padding plus the offsets below keep the badge's left
   edge clear of the text's right edge at any plausible count
   (12px clear for one digit at its 18px minimum width, still
   2px clear for a pessimistically wide two-digit badge),
   floating above-right of the label, fully inside the header
   (the container's 15px side padding absorbs the 8px overhang).
   One rule for every width — the mobile bar's cart-only link
   gets the same clearance. */
.measuremade-cart-link {
	padding-right: 22px;
}

.measuremade-cart-count {
	position: absolute;
	top: -11px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--measuremade-primary);
	color: #ffffff;
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	line-height: 1;
	font-size: 0.68rem;
	padding: 0 4px;
}

/* Header — light (transparent) state ----------------------------------------
   Pages using the "Transparent Header - Light Text" template
   (homepage, Fitting Room, About, Ambassador). Mirrors the previous
   theme: the header overlays the hero at the top of the page with
   the white logo variant and white nav; once it sticks on scroll it
   turns solid and the regular logo returns. The --mm-light-header-top
   offset (set from JS in main.js) keeps it clear of the top bar,
   which scrolls away — the previous theme's top bar was not sticky
   either. Once stuck, the offset no longer applies: the stuck rule
   below pins the bar at top: 0 and main.js clears the inline value. The state is page-template + scroll driven, exactly as
   before; it has no viewport-width component. */

.site-header.measuremade-header--light {
	position: fixed;
	top: var(--mm-light-header-top, 0px);
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: transparent;
}

.site-header.measuremade-header--light:not(.is-stuck) .measuremade-logo-default {
	display: none;
}

.site-header.measuremade-header--light:not(.is-stuck) .measuremade-logo-light {
	display: block;
}

.site-header.measuremade-header--light:not(.is-stuck) .main-navigation a,
.site-header.measuremade-header--light:not(.is-stuck) .measuremade-header-actions a,
.site-header.measuremade-header--light:not(.is-stuck) .measuremade-menu-toggle,
.site-header.measuremade-header--light:not(.is-stuck) .site-title a {
	color: #ffffff;
}

.site-header.measuremade-header--light:not(.is-stuck) .main-navigation a:hover,
.site-header.measuremade-header--light:not(.is-stuck) .measuremade-header-actions a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* The header switcher's separator follows the light state's
   white (its link is covered by the actions rule above; the
   current language keeps its brand pink in both states — see
   the --header variant in the header section). */
.site-header.measuremade-header--light:not(.is-stuck) .measuremade-lang-switcher--header .measuremade-lang-sep {
	color: rgba(255, 255, 255, 0.65);
}

.site-header.measuremade-header--light.is-stuck {
	/* Pinned flush to the viewport top. top is declared directly,
	   not left to the variable: main.js sets the variable inline
	   while the header is unstuck, and an inline custom property
	   outranks the zeroed variable below — the stuck bar kept the
	   top-bar offset and the page scrolled behind the gap (owner
	   feedback round 5). main.js also clears the inline value on
	   sticking; this rule keeps the pin regardless. */
	top: 0;
	--mm-light-header-top: 0px;
	background: #ffffff;
	border-bottom: 1px solid var(--measuremade-line);
}

/* The stuck header is slimmer, as the previous theme's sticky
   header was (70px against the full 100px). */
.site-header.measuremade-header--light.is-stuck .measuremade-header-inner {
	min-height: 70px;
}

/* Primary navigation ------------------------------------------------------- */

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em clamp(0.8em, 1.5vw, 1.4em);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The top-level list stays on the header's single row (fix round
   17): no wrapping, and items never break mid-word — the list
   compresses its gaps instead. Submenus are unaffected (they are
   display:none/block, never flex). */
.main-navigation > ul {
	flex-wrap: nowrap;
}

.main-navigation > ul > li > a {
	white-space: nowrap;
}

.main-navigation a {
	display: block;
	color: var(--measuremade-ink);
	font-size: 0.92rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.4em 0;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--measuremade-primary);
	text-decoration: none;
}

.main-navigation ul ul {
	display: none;
	position: absolute;
	background: #ffffff;
	border: 1px solid var(--measuremade-line);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	min-width: 210px;
	padding: 0.5em 0;
	z-index: 950;
}

.main-navigation li {
	position: relative;
}

.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {
	display: block;
}

.main-navigation ul ul a {
	padding: 0.45em 1em;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

/* Mobile header + off-canvas ---------------------------------------------- */

.measuremade-menu-toggle {
	display: none;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--measuremade-ink);
	cursor: pointer;
	padding: 0.5em 0;
}

.measuremade-offcanvas {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(320px, 85vw);
	/* Round 58: frosted Apple material — the same recipe as the
	   round-57 newsletter popup, so the menu and the popup read
	   as one material system. Frost v2 (round 58 revision) comes
	   from the shared glass tokens on :root (--measuremade-glass-*):
	   a lighter 0.78 ground with a stronger blur, so the page
	   visibly shows through while text stays legible. Falls back
	   to the same translucent white where backdrop-filter is
	   unsupported. */
	background: var(--measuremade-glass-bg);
	-webkit-backdrop-filter: var(--measuremade-glass-filter);
	backdrop-filter: var(--measuremade-glass-filter);
	border-radius: 0 20px 20px 0;
	z-index: 1200;
	transform: translateX(-105%);
	transition: transform 0.25s ease;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 2px 0 18px rgba(0, 0, 0, 0.12);
	overflow-y: auto;
	padding: 1.2em;
}

.measuremade-offcanvas.is-open {
	transform: translateX(0);
}

.measuremade-offcanvas-right {
	left: auto;
	right: 0;
	transform: translateX(105%);
	border-radius: 20px 0 0 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), -2px 0 18px rgba(0, 0, 0, 0.12);
}

.measuremade-offcanvas-right.is-open {
	transform: translateX(0);
}

.measuremade-scrim {
	position: fixed;
	inset: 0;
	background: rgba(20, 15, 17, 0.45);
	z-index: 1100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.measuremade-scrim.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* Round 58: the close control is the iOS grey circle chip,
   identical to the round-57 popup close. */
.measuremade-offcanvas-close {
	background: rgba(0, 0, 0, 0.06);
	border: 0;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	font-size: 1.15rem;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--mm-site-grey);
	float: right;
}

.measuremade-offcanvas-close:hover {
	background: rgba(0, 0, 0, 0.12);
	color: var(--mm-site-ink);
}

.mobile-navigation ul {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}

/* Round 58 menu items: 17px medium ink on ~56px rows, one
   hairline under every item (the last item's line is the single
   separator above the account block), pressed/hover state is
   the site grey — no pink text. */
.mobile-navigation a {
	display: block;
	padding: 16px 0;
	font-size: 17px;
	line-height: 1.4;
	color: var(--measuremade-ink);
	font-weight: 500;
	border-bottom: 1px solid var(--measuremade-line);
}

.mobile-navigation a:hover,
.mobile-navigation a:active {
	background: #f5f5f7;
	text-decoration: none;
}

/* The current page is the only colour in the list: brand pink,
   semibold (selection = pink, per the site system). */
.mobile-navigation .current-menu-item > a,
.mobile-navigation .current_page_item > a {
	color: var(--measuremade-primary);
	font-weight: 600;
}

/* The account link inside the off-canvas panel — its mobile home,
   since the mobile header bar is cart-only. Round 58: its own
   utility block. The wrapper's old border-top is gone (it stacked
   with the last menu item's border-bottom into a double line);
   the visible air between that hairline and the ACCOUNT text is
   ~28px = the collapsed margin (max of the list's 16px bottom
   margin and this block's 20px top margin = 20px) + the link's
   0.55em top padding (~8px at its 0.9rem size). */
.measuremade-offcanvas-account {
	margin-top: 20px;
}

.measuremade-offcanvas-account a {
	display: block;
	padding: 0.55em 0;
	color: var(--measuremade-ink);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.9rem;
}

.measuremade-offcanvas-account a:hover,
.measuremade-offcanvas-account a:active {
	background: #f5f5f7;
	text-decoration: none;
}

/* The switcher's off-canvas variant (i18n R5; placement
   pinned by the owner 2026-11-07; a desktop header variant
   joined it in Round 74): the panel's final element, a quiet
   utility row below the Account block in the panel's own
   rhythm. The hairline above it uses the panel's
   line token, like every menu row's separator; the current
   language takes the brand pink + semibold the panel reserves
   for the current page, the other language stays a plain
   link. In-flow at the panel's end — never positioned — so
   the panel scrolls exactly as it did before. */
.measuremade-lang-switcher--panel {
	display: flex;
	margin-top: 14px;
	padding: 14px 0 0.55em;
	border-top: 1px solid var(--measuremade-line);
	font-size: 0.9rem;
	text-transform: uppercase;
}

.measuremade-lang-switcher--panel .measuremade-lang-current {
	color: var(--measuremade-primary);
	font-weight: 600;
}

/* Content ------------------------------------------------------------------ */

.entry-title {
	margin-bottom: 0.4em;
}

.entry-meta {
	font-size: 0.85rem;
	color: var(--measuremade-muted);
	margin-bottom: 1em;
}

.entry-content::after,
.comment-content::after {
	content: "";
	display: table;
	clear: both;
}

.alignleft { float: left; margin: 0.3em 1.2em 1em 0; }
.alignright { float: right; margin: 0.3em 0 1em 1.2em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--measuremade-muted); text-align: center; }

.posts-navigation,
.post-navigation {
	margin: 2em 0;
	font-weight: 700;
}

.page-links { margin: 1em 0; }

/* Front page sections ------------------------------------------------------- */

.measuremade-hero {
	background: var(--measuremade-bg-soft);
	border-bottom: 1px solid var(--measuremade-line);
	padding: 4.5em 0;
	text-align: center;
}

.measuremade-hero h1 {
	font-size: 2.6rem;
	margin-bottom: 0.3em;
}

.measuremade-hero .measuremade-hero-text {
	max-width: 640px;
	margin: 0 auto 1.6em;
	font-size: 1.05rem;
}

.measuremade-hero-actions {
	display: flex;
	gap: 0.8em;
	justify-content: center;
	flex-wrap: wrap;
}

.measuremade-section {
	padding: 3.2em 0;
}

.measuremade-section-alt {
	background: var(--measuremade-bg-soft);
}

.measuremade-section-heading {
	text-align: center;
	margin-bottom: 1.8em;
}

.measuremade-section-heading p {
	color: var(--measuremade-muted);
	margin: 0;
}

/* Live stories section background (neutral light grey). */
.measuremade-stories-section {
	background: #f4f4f4;
}

/* Customer stories — the previous theme's layout: two wide columns
   on the section's grey, split by a thin vertical divider, no card
   chrome; circular author photo at the left of the name with the
   "(verified owner)" note beside it. */
.measuremade-stories {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}

.measuremade-story {
	padding: 0.5em 2.4em;
}

.measuremade-story:first-child {
	padding-left: 0;
}

.measuremade-story:last-child {
	padding-right: 0;
}

.measuremade-story + .measuremade-story {
	border-left: 1px solid #d8d8d8;
}

.measuremade-story blockquote {
	margin: 0 0 1em;
	font-size: 1rem;
}

.measuremade-story .mm-author {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin: 1.2em 0 0;
}

.measuremade-story .mm-author img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.measuremade-story .mm-author figcaption {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	flex-wrap: wrap;
}

.measuremade-story .measuremade-story-name {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--measuremade-ink);
}

.measuremade-story .measuremade-story-badge {
	font-size: 0.85rem;
	color: var(--measuremade-muted);
	font-style: italic;
}

/* Converted homepage sections (mm-* markup from the content conversion) --- */

.mm-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 90px;
}

/* Homepage hero — matches the live banner: full-viewport photo
   under a strong dark gradient, the script headline over the huge
   product name, the black letter-spaced strip, and the pink bevel
   button. The text block sits in the upper part of the banner
   (live text box at 25% height). The photo's object-position is
   the Customizer focal point, printed inline by hero.php (fix
   round 14); the value below is only the no-inline-style fallback
   and mirrors the focal defaults (27% 50% — centres the leaping
   dog of the current mountain photo in portrait crops). */
.mm-hero--home {
	position: relative;
	overflow: hidden;
	text-align: center;
	height: 100vh;
	min-height: 580px;
}

.mm-hero--home .mm-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 27% 50%;
	display: block;
}

/* Dark overlay between photo and text. */
.mm-hero--home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(8, 8, 12, 0.55) 0%, rgba(8, 8, 12, 0.28) 45%, rgba(8, 8, 12, 0.5) 100%);
}

.mm-hero--home .mm-hero-text {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: clamp(96px, 19vh, 190px) 1em 2em;
	color: #ffffff;
}

/* Headings inside hero / banner text blocks render white. (The
   base heading rule colours every h1–h6 with the ink colour,
   which beat the white inherited from these containers — that is
   what rendered the hero strip black-on-black and the tile
   headings dark on staging.) */
.mm-hero-text h1,
.mm-hero-text h2,
.mm-hero-text h3,
.mm-hero-text h4,
.mm-hero-text h5,
.mm-hero-text h6,
.mm-banner-text h1,
.mm-banner-text h2,
.mm-banner-text h3,
.mm-banner-text h4,
.mm-banner-text h5,
.mm-banner-text h6 {
	color: #ffffff;
}

.mm-hero--home .mm-hero-text h1,
.mm-hero--home .mm-hero-text h2,
.mm-hero--home .mm-hero-text h3,
.mm-hero--home .mm-hero-text h5,
.mm-hero--home .mm-hero-text p {
	margin: 0;
}

/* Hero headline stack. Round 54: the headline is the page H1
   (owner-approved tag-only change, 2026-11-06 — same class, same
   declarations, so the rendering is identical). */
.mm-hero--home .mm-hero-text h1.alt-font,
.mm-hero--home .mm-hero-text h2.alt-font {
	font-size: clamp(2.7rem, 6vw, 4.4rem);
	line-height: 1.1;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.mm-hero--home .mm-hero-text h3 {
	font-size: clamp(3rem, 9.5vw, 6.6rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}

.mm-hero--home .mm-hero-text h5 {
	margin-top: 0.9em;
}

.mm-hero--home .mm-hero-text h5 span {
	display: inline-block;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	/* Compensate the trailing letter-space so the strip stays centred. */
	padding: 0.45em 0.7em 0.45em calc(0.7em + 0.32em);
	font-weight: 300;
	font-size: clamp(0.72rem, 1.6vw, 0.95rem);
}

/* Hero call to action — pink bevel button, 10px radius (live
   button: style="bevel" radius="10" icon="icon-angle-right"). */
.mm-hero--home .mm-hero-text .mm-button {
	border-radius: 10px;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	margin-top: 1.4em;
	font-size: 1rem;
	padding: 0.75em 1.9em;
}

.mm-hero--home .mm-hero-text .mm-button::after {
	content: "›";
	margin-left: 0.45em;
	font-weight: 700;
}

/* About page banner — full-bleed dark banner with the centred
   title block (the page body renders inside the centred container,
   so the banner breaks out to the viewport edges). */
.mm-hero--page {
	position: relative;
	overflow: hidden;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 430px;
	display: flex;
}

.mm-hero--page .mm-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mm-hero--page::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(8, 8, 12, 0.5) 0%, rgba(8, 8, 12, 0.3) 55%, rgba(8, 8, 12, 0.5) 100%);
}

.mm-hero--page .mm-hero-text {
	position: relative;
	z-index: 2;
	margin: auto;
	width: 100%;
	text-align: center;
	color: #ffffff;
	padding: 5em 1em;
}

.mm-hero--page .mm-hero-text h4,
.mm-hero--page .mm-hero-text h6,
.mm-hero--page .mm-hero-text p {
	margin: 0 0 0.5em;
}

/* "ABOUT US" title with the blue underline accent. */
.mm-hero--page .mm-hero-text h4:first-child {
	font-size: clamp(1.9rem, 4.5vw, 2.9rem);
	letter-spacing: 0.12em;
}

.fancy-underline {
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--measuremade-secondary);
	text-decoration-thickness: 2px;
	text-underline-offset: 9px;
}

/* Script sub-line and the Canada line. */
.mm-hero--page .mm-hero-text h4.alt-font {
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
}

.mm-hero--page .mm-hero-text h6 {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.85rem;
}

.mm-tiles-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

/* Banner tiles — three equal-height (250px on desktop), gapless,
   full-width; photo cover-cropped at the live banner's per-tile
   focal position under a light dark wash; white text centred. */
.mm-banner--tile {
	position: relative;
	display: block;
	overflow: hidden;
	height: 250px;
}

.mm-banner--tile .mm-banner-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.mm-banner--tile:hover .mm-banner-bg {
	transform: scale(1.05);
}

/* Live focal points (banner bg_pos, converted left to right). */
.mm-tiles-grid .mm-banner--tile:nth-child(1) .mm-banner-bg {
	object-position: 64% 15%;
}

.mm-tiles-grid .mm-banner--tile:nth-child(2) .mm-banner-bg {
	object-position: 70% 80%;
}

.mm-tiles-grid .mm-banner--tile:nth-child(3) .mm-banner-bg {
	object-position: 51% 47%;
}

/* Light dark overlay per tile (live bg_overlay ≈ 0.12–0.2). */
.mm-banner--tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.16);
	pointer-events: none;
}

.mm-banner--tile .mm-banner-text {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1em;
	color: #ffffff;
	text-align: center;
}

.mm-banner--tile .mm-banner-text h4,
.mm-banner--tile .mm-banner-text h2,
.mm-banner--tile .mm-banner-text p {
	margin: 0 0 0.45em;
}

.mm-banner--tile .mm-banner-text h4 {
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.mm-banner--tile .mm-banner-text h2 {
	font-size: 2.1rem;
	text-transform: uppercase;
}

.mm-text-center {
	text-align: center;
}

/* Welcome / intro — live centres a narrow (~600px) paragraph
   column with tight vertical spacing under the tiles. */
.mm-welcome.measuremade-section {
	padding: 2.6em 0 2.1em;
}

.mm-welcome .measuremade-container {
	max-width: 630px;
}

@media (max-width: 900px) {
	.mm-tiles-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.measuremade-instagram-strip {
	text-align: center;
}

/* Section heading with side rules (the live title treatment). */
.measuremade-instagram-strip h2 {
	display: flex;
	align-items: center;
	gap: 1em;
}

.measuremade-instagram-strip h2::before,
.measuremade-instagram-strip h2::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--measuremade-line);
}

.measuremade-instagram-strip a {
	font-weight: 700;
	font-size: 1.3rem;
}

/* Static feed stand-in — six square photos with a light overlay
   and a brand wash on hover (the previous feed plugin is disabled;
   a live feed can replace this grid via the
   measuremade_instagram_feed hook). */
.measuremade-ig-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 4px;
	margin-top: 1.8em;
}

.measuremade-ig-item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.measuremade-ig-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.measuremade-ig-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.12);
	transition: background 0.3s ease;
	pointer-events: none;
}

.measuremade-ig-item:hover img,
.measuremade-ig-item:focus img {
	transform: scale(1.06);
}

.measuremade-ig-item:hover::after,
.measuremade-ig-item:focus::after {
	background: rgba(187, 92, 128, 0.35);
}

@media (max-width: 700px) {
	.measuremade-ig-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.measuremade-newsletter {
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
}

/* Sidebar / widgets ---------------------------------------------------------- */

.widget-area .widget {
	margin-bottom: 2em;
}

.widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--measuremade-primary);
	padding-bottom: 0.4em;
	margin-bottom: 0.8em;
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	padding: 0.25em 0;
}

/* Footer --------------------------------------------------------------------- */

/* Footer — the live treatment: dark grey main area with the
   Mission | Subscribe two-column block, a centred nav row and a
   payment-badge row, over a darker bottom bar. */
.site-footer {
	background: #3d3d3d;
	border-top: none;
	color: #e9e9e9;
	margin-top: 0;
}

.measuremade-footer-main {
	padding: 3em 0 2.4em;
}

.measuremade-footer-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3em;
}

.measuremade-footer-heading {
	color: #ffffff;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 1em;
}

.measuremade-footer-mission p {
	margin: 0 0 0.9em;
	font-size: 0.95rem;
}

.site-footer a {
	color: #eda4c3;
}

.site-footer a:hover {
	color: #ffffff;
}

/* Subscribe column (the footer form itself comes from the
   Customizer shortcode; these rules just dress it on the dark
   ground). */
.measuremade-footer-subscribe input[type="email"],
.measuremade-footer-subscribe input[type="text"] {
	background: #ffffff;
	border-color: transparent;
	color: var(--measuremade-ink);
	width: 100%;
}

.measuremade-footer-subscribe input[type="submit"],
.measuremade-footer-subscribe button {
	border-radius: 4px;
}

/* Footer nav row. */
.measuremade-footer-nav {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: 2.4em;
	padding-top: 1.3em;
}

.footer-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 2.2em;
	flex-wrap: wrap;
}

.footer-navigation a {
	color: #ffffff;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.footer-navigation a:hover {
	color: #eda4c3;
	text-decoration: none;
}

/* Payment badges (text representations — the icon files on the
   old site were the previous theme's own assets, not uploads). */
.measuremade-footer-payments {
	display: flex;
	justify-content: center;
	gap: 0.5em;
	flex-wrap: wrap;
	margin-top: 1.6em;
}

.measuremade-pay-badge {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 0.45em 0.75em;
}

.measuremade-footer-bottom {
	background: #262626;
	border-top: none;
	padding: 1.1em 0;
	font-size: 0.88rem;
	color: #bdbdbd;
}

.measuremade-footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
}

.measuremade-footer-bottom p {
	margin: 0;
}

/* Buttons & forms -------------------------------------------------------------- */

/* Converted-content button family (mm-button — mirrors the previous
   theme's button treatments: filled pink, outline, small, and the
   white underline/pill link used over banner photos). */
.mm-button {
	display: inline-block;
	background: var(--measuremade-primary);
	border: 1px solid var(--measuremade-primary);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.03em;
	line-height: 1.4;
	padding: 0.65em 1.5em;
	border-radius: 10px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.mm-button:hover,
.mm-button:focus {
	background: var(--measuremade-primary-dark);
	border-color: var(--measuremade-primary-dark);
	color: #ffffff;
	text-decoration: none;
}

.mm-button--outline {
	background: transparent;
	color: var(--measuremade-primary);
}

.mm-button--outline:hover,
.mm-button--outline:focus {
	background: var(--measuremade-primary);
	color: #ffffff;
}

.mm-button--small {
	font-size: 0.82rem;
	padding: 0.5em 1.2em;
}

.mm-button--link {
	background: transparent;
	border-color: transparent;
	color: var(--measuremade-primary);
	padding-left: 0;
	padding-right: 0;
}

.mm-button--link:hover,
.mm-button--link:focus {
	background: transparent;
	border-color: transparent;
	color: var(--measuremade-primary-dark);
	text-decoration: underline;
}

/* White pill-outline link shown over the homepage banner tiles
   (previous theme: color="white" style="underline" radius="99"). */
.mm-button--white.mm-button--underline {
	background: transparent;
	border: 2px solid #ffffff;
	border-radius: 999px;
	color: #ffffff;
	padding: 0.5em 1.4em;
}

.mm-button--white.mm-button--underline::after {
	content: "›";
	margin-left: 0.45em;
	font-weight: 700;
}

.mm-button--white.mm-button--underline:hover,
.mm-button--white.mm-button--underline:focus {
	background: rgba(255, 255, 255, 0.18);
	border-color: #ffffff;
	color: #ffffff;
}

.button,
button,
input[type="button"],
input[type="submit"] {
	display: inline-block;
	background: var(--measuremade-primary);
	border: 1px solid var(--measuremade-primary);
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.03em;
	padding: 0.65em 1.5em;
	border-radius: 999px;
	cursor: pointer;
	text-transform: uppercase;
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
	background: var(--measuremade-primary-dark);
	border-color: var(--measuremade-primary-dark);
	color: #ffffff;
	text-decoration: none;
}

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

.button.alt:hover {
	background: var(--measuremade-primary);
	color: #ffffff;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	border: 1px solid var(--measuremade-line);
	border-radius: var(--measuremade-radius);
	padding: 0.55em 0.7em;
	font: inherit;
	font-size: 0.95rem;
	max-width: 100%;
	background: #ffffff;
}

label {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--measuremade-ink);
}

/* Newsletter popup -------------------------------------------------------------- */

.measuremade-popup {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1em;
}

.measuremade-popup.is-open {
	display: flex;
}

.measuremade-popup-backdrop {
	position: absolute;
	inset: 0;
	/* Frost v2 (round 58 revision): dim lightened 0.55 → 0.35 so
	   real page detail survives behind the glass and the popup's
	   translucency is actually visible. */
	background: rgba(29, 29, 31, 0.35);
}

.measuremade-popup-box {
	position: relative;
	/* Round 57: frosted Apple material — translucent white with a
	   backdrop blur, so the page shows through softly and the popup
	   feels integrated while the text stays legible. Frost v2
	   (round 58 revision): recipe now comes from the shared glass
	   tokens on :root (--measuremade-glass-*) — 0.78 ground and a
	   26px blur in place of 0.86 / 22px, after the owner's phone
	   verdict that v1 read as opaque. Falls back to the same
	   translucent white where backdrop-filter is unsupported. */
	background: var(--measuremade-glass-bg);
	-webkit-backdrop-filter: var(--measuremade-glass-filter);
	backdrop-filter: var(--measuremade-glass-filter);
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: var(--mm-site-radius);
	max-width: 440px;
	width: 100%;
	padding: 34px 30px 28px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.measuremade-popup-box h2 {
	margin: 0 0 6px;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--mm-site-ink);
}

.measuremade-popup-box > p {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mm-site-grey);
}

.measuremade-popup-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	border: 0;
	color: var(--mm-site-grey);
	font-size: 1.15rem;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: none;
	cursor: pointer;
}

.measuremade-popup-close:hover {
	background: rgba(0, 0, 0, 0.12);
	color: var(--mm-site-ink);
}

/* Round 57 — the signup form inside the popup follows the same
   system: near-solid white field (legibility first), the primary
   blue pill, and a soft-tinted notification instead of CF7's
   hard-bordered stock box. Scoped to the popup, so the footer
   signup and the Contact form keep their own presentation. */

.measuremade-popup-box .wpcf7 {
	margin-top: 6px;
}

.measuremade-popup-box .wpcf7 p {
	margin: 0 0 12px;
}

.measuremade-popup-box .wpcf7 input[type="email"],
.measuremade-popup-box .wpcf7 input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--mm-site-hair);
	border-radius: 12px;
	padding: 13px 15px;
	font-size: 16px;
	font-family: inherit;
	color: var(--mm-site-ink);
	background: rgba(255, 255, 255, 0.92);
	-webkit-appearance: none;
	appearance: none;
	text-align: center;
}

.measuremade-popup-box .wpcf7 input[type="email"]:focus,
.measuremade-popup-box .wpcf7 input[type="text"]:focus {
	border-color: var(--mm-site-accent);
	box-shadow: 0 0 0 4px rgba(156, 61, 99, .15);
	outline: none;
}

.measuremade-popup-box .wpcf7 input[type="submit"] {
	background: var(--mm-site-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 13px 38px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.measuremade-popup-box .wpcf7 input[type="submit"]:hover {
	background: var(--measuremade-action-dark);
}

.measuremade-popup-box .wpcf7 form .wpcf7-response-output {
	border: 0;
	border-radius: 12px;
	padding: 13px 16px;
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--mm-site-ink);
	background: rgba(0, 0, 0, 0.05);
}

.measuremade-popup-box .wpcf7 form.sent .wpcf7-response-output {
	background: #e6f6ec;
	color: #14532d;
}

.measuremade-popup-box .wpcf7 form.invalid .wpcf7-response-output,
.measuremade-popup-box .wpcf7 form.failed .wpcf7-response-output,
.measuremade-popup-box .wpcf7 form.spam .wpcf7-response-output {
	background: #fdecea;
	color: #8c1d18;
}

.measuremade-popup-box .wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #b3261e;
}

@media (max-width: 560px) {
	.measuremade-popup-box {
		padding: 30px 22px 24px;
	}

	.measuremade-popup-box .wpcf7 input[type="submit"] {
		width: 100%;
	}
}

/* Search / 404 -------------------------------------------------------------------- */

.search-form {
	display: flex;
	gap: 0.5em;
	margin-bottom: 1.5em;
}

.no-results .page-title,
.error-404 .page-title {
	margin-bottom: 0.3em;
}

/* Responsive ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	/* Top bar: live's compact single line — one 30px band, no wrap,
	   no excess padding. */
	.measuremade-topbar {
		font-size: 0.78rem;
		line-height: 1.3;
	}

	.measuremade-topbar-inner {
		min-height: 30px;
	}

	.measuremade-topbar-message {
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Mobile header: ONE compact row under the top bar — menu toggle
	   left, logo centred and contained, cart right. The row can never
	   stack into bands: no flex wrap, and the logo is a normal flex
	   child (centred by its flex track) instead of an absolutely
	   positioned element whose loss would drop it back into the flow
	   and wrap the actions onto a second row. Total height budget:
	   30px top bar + 60px header row (+1px border). */
	.measuremade-header-inner {
		min-height: 60px;
		flex-wrap: nowrap;
		gap: 0.75em;
		padding-top: 0;
		padding-bottom: 0;
	}

	.measuremade-menu-toggle {
		display: block;
		flex: 0 0 auto;
		padding: 0.4em 0;
	}

	/* Logo centred in the space between toggle and cart, and capped
	   well under its desktop size (169px/72px): at most 140px wide
	   (36vw on narrower phones) and 44px tall, both variants alike,
	   so the black <-> white swap never changes the layout. The
	   190x60 native aspect is preserved (140px wide = 44px tall). */
	.site-branding {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.site-branding .custom-logo,
	.site-branding .measuremade-logo-light {
		max-width: min(140px, 36vw);
		max-height: 44px;
		width: auto;
		height: auto;
	}

	/* No ACCOUNT/CART row at mobile: the bar is cart-only and the
	   account link lives in the off-canvas panel (header.php). */
	.measuremade-account-link {
		display: none;
	}

	/* The header's desktop language switcher hides at this
	   width: the off-canvas panel's instance is the one
	   switcher here (Round 74). */
	.measuremade-lang-switcher--header {
		display: none;
	}

	.measuremade-header-nav {
		display: none;
	}

	.measuremade-header-actions {
		margin-left: auto;
		flex: 0 0 auto;
	}

	/* The stuck light header inherits the same compact height
	   (its base stuck rule sets 70px, which would otherwise win
	   over the row rule above on specificity). */
	.site-header.measuremade-header--light.is-stuck .measuremade-header-inner {
		min-height: 60px;
	}

	.has-sidebar .site-main-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.measuremade-stories {
		grid-template-columns: minmax(0, 1fr);
	}

	.measuremade-story {
		padding: 1em 0;
	}

	.measuremade-story + .measuremade-story {
		border-left: none;
		border-top: 1px solid #d8d8d8;
	}

	.measuremade-footer-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.measuremade-topbar-nav {
		display: none;
	}

	.measuremade-hero h1 {
		font-size: 2rem;
	}
}

@media (max-width: 520px) {
	.measuremade-footer-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Site-wide look (fix round 22) ---------------------------------------------
   The PatternMade look beyond product pages (owner directive,
   2026-11-04: "the same apple aesthetic should be applied on every
   page"). Definition: SITE-LOOK.md, which shares the tokens in
   PRODUCT-PAGE-LOOK.md. Everything here is presentation: content
   keeps flowing from the pages' own fields, and no stored content
   changes. The homepage hero section (template-parts/front/
   hero.php) is untouched — its markup and styling above stand;
   only what sits below it is carded. */

:root {
	--mm-site-bg: #f5f5f7;
	--mm-site-card: #ffffff;
	--mm-site-ink: #1d1d1f;
	--mm-site-grey: #6e6e73;
	--mm-site-hair: #d2d2d7;
	--mm-site-track: #e8e8ed;
	--mm-site-accent: var(--measuremade-action);
	--mm-site-radius: 20px;
	--mm-site-shadow: 0 2px 20px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .02);
	--mm-site-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
}

/* Ground + type on the content column of every page type that
   renders through .site-content (pages, posts, blog, archives,
   search, 404, and the WooCommerce cart / checkout / account
   pages, which are ordinary pages here). The app type stack
   scopes to the content column: header and footer keep their
   established presentation. */
.site-content {
	background: var(--mm-site-bg);
}

.site-main {
	font-family: var(--mm-site-font);
}

.entry-title,
.page-title {
	font-family: var(--mm-site-font);
	letter-spacing: -0.02em;
	color: var(--mm-site-ink);
}

.entry-content :is(h1, h2, h3, h4):not(.alt-font) {
	font-family: var(--mm-site-font);
	letter-spacing: -0.02em;
}

/* The white card: pages, post listings, single posts, comments
   and sidebar widgets sit on it. Templates opt in with the
   .mm-site-card class (post_class); the rest are structural. */
.mm-site-card {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	padding: 28px;
	margin-bottom: 20px;
}

.comments-area {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	padding: 28px;
	margin-top: 20px;
}

.widget-area .widget {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	padding: 22px;
}

@media (max-width: 560px) {
	.mm-site-card,
	.comments-area {
		border-radius: 18px;
		padding: 20px 18px;
	}
}

/* Homepage — everything below the hero. The hero section itself
   keeps its markup and styling exactly as built; below it, each
   section's container becomes a white card on the ground, except
   the browse-products section, whose product tiles are the cards
   (assets/css/woocommerce.css) on the open ground. */
.home .site-main {
	background: var(--mm-site-bg);
}

.home .measuremade-section .measuremade-container {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	padding: 30px 28px;
}

.home .measuremade-browse .measuremade-container {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0 15px;
}

.home .measuremade-section-alt {
	background: transparent;
}

.home .mm-tiles {
	padding-left: 20px;
	padding-right: 20px;
}

.home .mm-tiles-grid {
	gap: 20px;
}

.home .mm-banner--tile {
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
}

@media (max-width: 560px) {
	.home .measuremade-section .measuremade-container {
		border-radius: 18px;
		padding: 22px 18px;
	}

	.home .measuremade-browse .measuremade-container {
		padding: 0 15px;
	}
}

/* Full-width pages on the transparent-header template (About,
   Fitting Room, Ambassador): the template adds .mm-tpl-transparent
   to <main>; the pages' own banner sections stay full-bleed and
   the content sections below them become centred cards. Content
   is the pages' own stored markup — only its presentation
   changes. */
.mm-tpl-transparent {
	background: var(--mm-site-bg);
}

.mm-tpl-transparent .entry-content .mm-section {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	max-width: 1080px;
	width: calc(100% - 40px);
	margin: 20px auto;
	padding: 34px 30px;
}

/* Expandable long paragraphs (fix round 22) -------------------------------
   Progressive enhancement driven by assets/js/main.js: the full
   text is always in the markup (with JS disabled, everything is
   visible and nothing is hidden by CSS); the script wraps the
   overflow of an over-long block in .mm-more-rest and hides that
   span, and this pill toggles it. Rule and scopes: SITE-LOOK.md. */

.mm-more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 4px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--mm-site-track);
	color: var(--mm-site-ink);
	font-family: var(--mm-site-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.mm-more-toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.mm-more-toggle[aria-expanded="true"]::after {
	transform: rotate(225deg);
}

.mm-more-toggle:hover,
.mm-more-toggle:focus {
	background: #dcdce1;
}

.mm-more-rest[hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------
   Round 52 — Contact page in the Apple system (owner, 2026-11-06:
   "Let's have the contact page follow the same apple aesthetic.
   And the top map is broken."). Scoped to page 373 (Contact) on
   every install — the page's outer .mm-site-card becomes a
   transparent shell and the map, FAQ and form render as individual
   white cards on the #f5f5f7 ground, matching the product-page
   system. The conversion markup's layout classes (.mm-row/.mm-col/
   .mm-accordion/.mm-map) had no styles anywhere in the theme; they
   are defined here, inside this scope only, so no other page's
   rendering changes. The map itself is fixed in the page content:
   the dead data-attribute placeholder is now a live Google Maps
   embed iframe inside .mm-map-frame.
   ------------------------------------------------------------------ */

body.page-id-373 .mm-site-card {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

body.page-id-373 .entry-header {
	text-align: center;
	margin-bottom: 22px;
}

body.page-id-373 .mm-map {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	padding: 10px;
	margin-bottom: 20px;
}

body.page-id-373 .mm-map-frame {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--mm-site-track);
}

body.page-id-373 .mm-map-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

body.page-id-373 .mm-map-pin {
	padding: 14px 10px 6px;
}

body.page-id-373 .mm-map-pin h3 {
	margin: 0 0 2px;
	font-size: 17px;
	font-weight: 600;
	color: var(--mm-site-ink);
}

body.page-id-373 .mm-map-pin p {
	margin: 0;
	font-size: 14px;
	color: var(--mm-site-grey);
}

body.page-id-373 .mm-contact .mm-row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

body.page-id-373 .mm-contact .mm-col {
	flex: 1 1 0;
	min-width: 0;
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	padding: 28px;
}

body.page-id-373 .mm-title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--mm-site-ink);
}

body.page-id-373 .mm-contact .lead {
	margin: 0 0 10px;
	font-size: 16px;
	color: var(--mm-site-grey);
}

body.page-id-373 .mm-accordion-item {
	border-top: 1px solid var(--mm-site-hair);
}

body.page-id-373 .mm-accordion-item:first-child {
	border-top: 0;
}

body.page-id-373 .mm-accordion-item summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 16px 30px 16px 2px;
	font-size: 16px;
	font-weight: 600;
	color: var(--mm-site-ink);
}

body.page-id-373 .mm-accordion-item summary::-webkit-details-marker {
	display: none;
}

body.page-id-373 .mm-accordion-item summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--mm-site-grey);
	border-bottom: 2px solid var(--mm-site-grey);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .18s ease;
}

body.page-id-373 .mm-accordion-item[open ] summary::after {
	transform: translateY(-30%) rotate(225deg);
}

body.page-id-373 .mm-accordion-item p {
	margin: 0 0 16px;
	padding: 0 30px 0 2px;
	font-size: 15px;
	line-height: 1.55;
	color: #424245;
}

body.page-id-373 .wpcf7 p {
	margin: 0 0 14px;
}

body.page-id-373 .wpcf7 input[type="text"],
body.page-id-373 .wpcf7 input[type="email"],
body.page-id-373 .wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--mm-site-hair);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	color: var(--mm-site-ink);
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
}

body.page-id-373 .wpcf7 textarea {
	min-height: 150px;
	resize: vertical;
}

body.page-id-373 .wpcf7 input[type="text"]:focus,
body.page-id-373 .wpcf7 input[type="email"]:focus,
body.page-id-373 .wpcf7 textarea:focus {
	border-color: var(--mm-site-accent);
	box-shadow: 0 0 0 4px rgba(156, 61, 99, .15);
	outline: none;
}

body.page-id-373 .wpcf7 input[type="submit"] {
	background: var(--mm-site-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 13px 34px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

body.page-id-373 .wpcf7 input[type="submit"]:hover {
	background: var(--measuremade-action-dark);
}

body.page-id-373 .wpcf7 form .wpcf7-response-output {
	border-radius: 12px;
	padding: 14px 16px;
	margin: 16px 0 0;
	font-size: 15px;
}

@media (max-width: 899px) {
	body.page-id-373 .mm-contact .mm-row {
		flex-direction: column;
	}

	body.page-id-373 .mm-contact .mm-col {
		width: 100%;
		box-sizing: border-box;
	}
}

@media (max-width: 720px) {
	body.page-id-373 .mm-map-frame {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 560px) {
	body.page-id-373 .mm-contact .mm-col {
		padding: 22px;
	}

	body.page-id-373 .wpcf7 input[type="submit"] {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
   Round 56 — About page timeline (owner, 2026-11-06: the timeline
   section "looks broken"). The conversion markup's timeline classes
   (.mm-timeline*) had no styles anywhere in the theme, so the SVG
   icons rendered at intrinsic size — a compass filling the card.
   The timeline now follows the same Apple card system as the rest
   of the site: one white card per entry, the icon as a small badge,
   the year as a soft bar (its background colour is inline in the
   markup and stays owner data), body text at reading size, and the
   in-card photo row side-by-side on wide screens, stacked on phones.
   These classes are used only by the About page timeline, so the
   rules are safe to define globally.
   ------------------------------------------------------------------ */

.mm-timeline {
	display: grid;
	gap: 20px;
}

.mm-timeline-item {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	padding: 24px;
}

.mm-timeline-icon {
	display: block;
	width: 46px;
	height: 46px;
	margin: 0 0 14px;
}

.mm-timeline-card {
	min-width: 0;
}

.mm-timeline-year {
	margin: 0 0 12px;
	padding: 7px 14px;
	border-radius: 8px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--mm-site-ink);
}

.mm-timeline-body p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.6;
	color: #424245;
}

.mm-timeline-body p:last-child {
	margin-bottom: 0;
}

.mm-timeline .mm-row {
	display: flex;
	gap: 14px;
}

.mm-timeline .mm-col {
	flex: 1 1 0;
	min-width: 0;
}

.mm-timeline .mm-image {
	margin: 0;
}

.mm-timeline .mm-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.mm-timeline-body > .mm-image {
	margin-top: 4px;
}

@media (max-width: 720px) {
	.mm-timeline-item {
		padding: 20px;
	}

	.mm-timeline .mm-row {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------------
   Round 58 — Blog, minimal (owner, 2026-11-06: "Reduce tags and
   such so they are minimal and don't clutter the real estate of
   the screen"). Definition: SITE-LOOK.md, "Blog look". Every rule
   below is scoped to the blog body classes (.blog, .category,
   .single-post) or to the blog-only card classes the blog
   templates emit, so pages, products, the shop and non-blog
   archives render exactly as before. The blog index and category
   archives drop the sidebar in the templates and lay the posts
   out as the site's white cards on the #f5f5f7 ground; a single
   post is one centred 700px reading card. */

/* Card grid — 1 column on phone, 2–3 across on desktop, in the
   shop's 20px-gap rhythm. */
.blog .mm-blog-grid,
.category .mm-blog-grid,
.single-post .mm-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
}

@media (min-width: 700px) {
	.blog .mm-blog-grid,
	.category .mm-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.blog .mm-blog-grid,
	.category .mm-blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* The post card: image, pink category eyebrow, title, excerpt,
   date — nothing else. The whole card is the link. */
.mm-blog-card {
	background: var(--mm-site-card);
	border-radius: var(--mm-site-radius);
	box-shadow: var(--mm-site-shadow);
	overflow: hidden;
}

.mm-blog-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mm-blog-card-link:hover,
.mm-blog-card-link:focus {
	text-decoration: none;
}

.mm-blog-card-media {
	display: block;
}

.mm-blog-card-media img {
	display: block;
	width: 100%;
	height: auto;
}

.mm-blog-card-body {
	display: block;
	padding: 22px 22px 20px;
}

.mm-blog-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--measuremade-primary);
	margin-bottom: 8px;
}

.mm-blog-card-title {
	display: block;
	font-family: var(--mm-site-font);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--mm-site-ink);
	margin-bottom: 8px;
}

.mm-blog-card-excerpt {
	display: block;
	font-size: 15px;
	line-height: 1.55;
	color: var(--mm-site-grey);
	margin-bottom: 12px;
}

.mm-blog-card-date {
	display: block;
	font-size: 13px;
	color: var(--mm-site-grey);
}

/* Single post: centred 700px reading column; the article keeps
   the shared .mm-site-card surface. Header is eyebrow, title,
   date only; the featured image runs the full column width with
   rounded corners; the footer is one quiet tag line. */
.single-post .site-main {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.single-post .entry-header {
	margin-bottom: 18px;
}

.single-post .mm-post-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--measuremade-primary);
	margin-bottom: 10px;
}

.single-post .mm-post-eyebrow:hover {
	text-decoration: none;
}

.single-post .mm-post-date {
	font-size: 14px;
	color: var(--mm-site-grey);
	margin-top: 8px;
}

.single-post .post-thumbnail {
	margin-bottom: 22px;
}

.single-post .post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Inline photos inside the post body (round 60: posts carry real
   photos at section breaks, styled like the featured image). */
.single-post .entry-content figure {
	margin: 26px 0;
}

.single-post .entry-content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.single-post .entry-content figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mm-site-grey);
	text-align: center;
}

.single-post .mm-post-tags {
	margin: 26px 0 0;
	font-size: 13px;
	line-height: 1.6;
}

.single-post .mm-post-tags a {
	color: var(--mm-site-grey);
	text-decoration: none;
	margin-right: 14px;
}

.single-post .mm-post-tags a:hover {
	color: var(--mm-site-ink);
	text-decoration: underline;
}

/* "Keep reading" strip: the index cards again, three across in
   the reading column on wider screens, stacked on phone. */
.single-post .mm-keep-reading {
	margin-top: 34px;
}

.single-post .mm-keep-reading-title {
	font-family: var(--mm-site-font);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mm-site-ink);
	margin: 0 0 16px;
}

@media (min-width: 700px) {
	.single-post .mm-blog-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}

	.single-post .mm-blog-card-body {
		padding: 16px;
	}

	.single-post .mm-blog-card-title {
		font-size: 16px;
	}

	.single-post .mm-blog-card-excerpt {
		font-size: 13px;
		margin-bottom: 8px;
	}
}

/* ---------------------------------------------------------------------------
   GTranslate float switcher — containment backstop (fix round 65)

   The language switcher is a third-party floater (GTranslate) whose
   wrapper is injected and sized by the plugin's own script. This
   backstop changes nothing about how it looks, where it sits or how
   it behaves — it only forbids the wrapper and its panels from ever
   being wider than the viewport, so the floater cannot drag the
   page into horizontal overflow on phones. The companion settings
   fix (no-scroll mode) lives in the plugin's own options.
--------------------------------------------------------------------------- */

#gt_float_wrapper {
	max-width: calc(100vw - 16px) !important;
}

#gt_float_wrapper .gt_float_switcher,
#gt_float_wrapper .gt_options {
	max-width: 100% !important;
}