/*
 * Pawshtails Theme — main.css
 *
 * Site-wide styles ONLY (header, footer, brand colours, fonts, reset).
 * This file loads on every page.
 *
 * Page-specific styles live in their own files:
 *   homepage.css, shop.css, product.css, cart.css, checkout.css, account.css
 *
 * Do not pile page-specific styles in here.
 */

/* =============================================================
   1.  SELF-HOSTED ALLENOIRE
   ============================================================= */
@font-face {
	font-family: 'Allenoire';
	src: url('../fonts/allenoire-allenoire-regular-400-webfont.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* =============================================================
   2.  BRAND DESIGN TOKENS
       Mirrors the homepage mockup so spacing, colour and type are
       identical across the site.
   ============================================================= */
:root {
	/* Brand */
	--brand-orange:        #FF4E00;
	--brand-orange-dark:   #CC3E00;
	--brand-orange-light:  #FF7333;
	--brand-cream:         #FAF5EE;
	--brand-cream-warm:    #F0E6D6;
	--brand-black:         #0A0A0A;

	/* Product colours — official brand hex codes */
	--product-khaki:        #4c543b;
	--product-pink:         #ba3283;
	--product-black:        #231f20;
	--product-emerald:      #1e7262;
	--product-crimson:      #bc1e39;
	--product-vivid-orange: #ef6129;
	--product-teal:         #12919b;
	--product-purple:       #66328e;
	--product-blue:         #0c35e2;

	/* Neutrals */
	--white:        #FFFFFF;
	--neutral-100:  #F7F5F2;
	--neutral-200:  #E8E4DE;
	--neutral-300:  #C9C2B8;
	--neutral-500:  #8A857C;
	--neutral-700:  #5A554D;
	--neutral-900:  #1A1A1A;

	/* Functional */
	--success: #00B67A;

	/* Fonts */
	--font-display: 'Allenoire', 'Fraunces', Georgia, serif;
	--font-body:    'Sen', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--font-accent:  'Caveat', cursive;

	/* Type scale */
	--text-xs:  0.75rem;
	--text-sm:  0.875rem;
	--text-base: 1rem;
	--text-lg:  1.125rem;
	--text-xl:  1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;

	/* Spacing — 8px scale */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.75rem;
	--space-8:  2.5rem;
	--space-10: 3.5rem;
	--space-12: 4.5rem;
	--space-16: 6rem;

	/* Section padding tokens (overridden at tablet + desktop below) */
	--section-y: var(--space-6);
	--section-x: var(--space-5);

	/* Motion */
	--t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================
   3.  RESET + BASE
       Light-touch reset that doesn't break Storefront/WC defaults.
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--neutral-900);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}
img, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
}

/* Typography utility classes — apply on any element to force a brand font.
   The matching !important version (which beats Storefront's inline CSS)
   is in functions.php → pawshtails_typography_override. */
.font-display { font-family: var(--font-display); }
.font-accent  { font-family: var(--font-accent); }

/* Accessibility helpers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px; width: 1px; overflow: hidden;
}
.skip-link:focus {
	clip: auto;
	height: auto; width: auto;
	background: var(--brand-orange); color: var(--white);
	padding: var(--space-3) var(--space-4);
	position: fixed; top: 0; left: 0; z-index: 9999;
}

/* Layout helper — used inside header/footer/site sections */
.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--section-x);
}

/* Site content wrapper — opened in header.php, closed in footer.php */
.site-content { display: block; }

/* =============================================================
   4.  BUTTONS — shared across header CTAs, drawers, and pages
   ============================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 0;
	transition: all var(--t-base);
	white-space: nowrap;
	border: 2px solid transparent;
	cursor: pointer;
	min-height: 44px; /* touch target */
	text-decoration: none;
}
/* Belt-and-braces — never underline any button-shaped link, no
   matter which class the template uses. Covers the shared .btn,
   variant classes (.btn-primary, .btn-on-orange-primary, etc.),
   and page-specific CTAs (.orders-empty-cta, .error-btn, the
   ask-us-banner-cta, cart-summary-checkout, etc.). Applies to
   hover / focus / visited states too so nothing bleeds through. */
a.btn,
a[class*="btn-"],
a[class*="-btn"],
a[class*="-cta"],
a[class*="-button"] {
	text-decoration: none !important;
}
a.btn:hover, a.btn:focus, a.btn:visited,
a[class*="btn-"]:hover, a[class*="btn-"]:focus, a[class*="btn-"]:visited,
a[class*="-btn"]:hover, a[class*="-btn"]:focus, a[class*="-btn"]:visited,
a[class*="-cta"]:hover, a[class*="-cta"]:focus, a[class*="-cta"]:visited,
a[class*="-button"]:hover, a[class*="-button"]:focus, a[class*="-button"]:visited {
	text-decoration: none !important;
}
.btn-primary { background: var(--brand-orange); color: var(--white); }
.btn-primary:hover { background: var(--brand-orange-dark); color: var(--white); }
.btn-secondary { background: transparent; color: var(--neutral-900); border-color: var(--neutral-900); }
.btn-secondary:hover { background: var(--neutral-900); color: var(--white); }
/* (C) High-contrast CTA against orange / busy backgrounds.
   Default: solid black with white text. Hover swaps to a white pill
   with black text and a black outline. Smooth 0.2s transition. */
.btn-on-orange-primary {
	background: var(--neutral-900);
	color: var(--white);
	border-color: var(--neutral-900);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-on-orange-primary:hover {
	background: var(--white);
	color: var(--neutral-900);
	border-color: var(--neutral-900);
}
.btn-on-orange-secondary { background: transparent; color: var(--white); border-color: var(--white); }
.btn-on-orange-secondary:hover { background: var(--white); color: var(--brand-orange); }
.btn-arrow::after {
	content: '→';
	display: inline-block;
	transition: transform var(--t-base);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* =============================================================
   5.  ANNOUNCEMENT BAR
       Sits above the sticky header. Does not stick.
   ============================================================= */
.announcement {
	background: var(--neutral-900);
	color: var(--white);
	height: 36px;
	position: relative;
	overflow: hidden;
}
.announcement-rotator { position: relative; height: 100%; }
.announcement-item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0;
	animation: pawshtailsRotateAnnouncement 12s infinite;
	padding: 0 var(--space-4);
	text-align: center;
}
.announcement-item:nth-child(1) { animation-delay: 0s; }
.announcement-item:nth-child(2) { animation-delay: 4s; }
.announcement-item:nth-child(3) { animation-delay: 8s; }
@keyframes pawshtailsRotateAnnouncement {
	0%, 33.33%, 100% { opacity: 0; transform: translateY(8px); }
	3%, 30%          { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   6.  STICKY HEADER
   ============================================================= */
.header {
	background: var(--white);
	border-bottom: 1px solid var(--neutral-200);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow var(--t-base);
}
.header.is-stuck { box-shadow: 0 2px 14px rgba(10,10,10,0.06); }

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--section-x);
	gap: var(--space-4);
	/* Header content shares the same container width as the footer
	   and page sections, so the logo lines up with everything below. */
	width: 100%;
	margin: 0 auto;
}

.logo {
	display: inline-flex;
	align-items: center;
	color: var(--neutral-900);
	line-height: 0;
}
.logo img {
	height: 30px;
	width: auto;
	display: block;
}

/* Primary nav — both the outer <nav> and the <ul class="nav"> share this
   selector. List reset lives here too so the <ul> from wp_nav_menu is flat. */
.nav {
	display: none; /* hidden by default — mobile uses hamburger drawer */
	list-style: none;
	padding: 0;
	margin: 0;
	gap: var(--space-6);
}
.nav .menu-item { list-style: none; margin: 0; padding: 0; }
.nav-link {
	color: var(--neutral-900);
	text-decoration: none;
	font-family: 'Sen', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-weight: 500;
	font-size: 15px;
	transition: color 0.2s;
}
.nav-link:hover { color: var(--brand-orange); }
.nav .current-menu-item > .nav-link,
.nav .current_page_item > .nav-link { color: var(--brand-orange); }

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

.icon-btn,
button.icon-btn {
	width: 24px; height: 24px;
	color: var(--neutral-900);
	background: none !important;
	border: 0 !important;
	outline: 0;
	box-shadow: none !important;
	padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	transition: color var(--t-fast);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.icon-btn:hover { color: var(--brand-orange); }
.icon-btn:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }
.icon-btn svg { width: 100%; height: 100%; }

.cart-icon { position: relative; }
.cart-count {
	position: absolute;
	top: -6px; right: -8px;
	background: var(--brand-orange);
	color: var(--white);
	font-size: 10px;
	font-weight: 700;
	width: 16px; height: 16px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	line-height: 1;
	transition: opacity var(--t-fast), transform var(--t-fast);
}
.cart-count.is-empty {
	opacity: 0;
	transform: scale(0.5);
}

.menu-toggle {
	width: 24px; height: 24px;
	display: flex; flex-direction: column;
	justify-content: center; gap: 5px;
}
.menu-toggle span {
	display: block;
	height: 2px;
	background: var(--neutral-900);
	width: 100%;
}

/* Defensive override — bumps specificity above anything Storefront /
   plugin stylesheets might have on .menu-toggle. We dequeued
   storefront-icons in the perf pass and reports came in that the
   hamburger looked broken; this guarantees the three-bar pattern
   renders regardless of upstream interference. */
button.icon-btn.menu-toggle {
	width: 24px !important;
	height: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 5px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}
button.icon-btn.menu-toggle::before,
button.icon-btn.menu-toggle::after {
	content: none !important;
	display: none !important;
}
button.icon-btn.menu-toggle > span,
button.icon-btn.menu-toggle > span:nth-child(1),
button.icon-btn.menu-toggle > span:nth-child(2),
button.icon-btn.menu-toggle > span:nth-child(3),
button.icon-btn.menu-toggle > span:nth-of-type(1),
button.icon-btn.menu-toggle > span:nth-of-type(2),
button.icon-btn.menu-toggle > span:nth-of-type(3),
button.icon-btn.menu-toggle > span:first-child,
button.icon-btn.menu-toggle > span:nth-child(odd),
button.icon-btn.menu-toggle > span:nth-child(even),
button.icon-btn.menu-toggle > span:last-child {
	display: block !important;
	height: 2px !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	background: var(--neutral-900) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	transition: none !important;
	transform: none !important;
	flex: 0 0 2px !important;
	align-self: stretch !important;
}

/* =============================================================
   7.  DRAWERS (shared base) + MOBILE MENU + MINI CART
   ============================================================= */
.drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}
.drawer-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.drawer {
	position: fixed;
	top: 0;
	height: 100vh;
	height: 100dvh;
	background: var(--white);
	z-index: 1001;
	display: flex;
	flex-direction: column;
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 0 40px rgba(0,0,0,0.15);
}
.drawer--right {
	right: 0;
	width: 100%;
	max-width: 440px;
	transform: translateX(100%);
}
.drawer--right.is-open { transform: translateX(0); }
.drawer--left {
	left: 0;
	width: 85%;
	max-width: 360px;
	transform: translateX(-100%);
}
.drawer--left.is-open { transform: translateX(0); }

body.drawer-open { overflow: hidden; }

.drawer-header {
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--neutral-200);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	flex-shrink: 0;
}
.drawer-logo { height: 28px; width: auto; }
.drawer-title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 400;
	color: var(--neutral-900);
	line-height: 1;
	margin: 0;
}
.drawer-close {
	width: 36px; height: 36px;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	color: var(--neutral-700);
	padding: 0;
	transition: color var(--t-base);
}
.drawer-close svg { width: 22px; height: 22px; }
.drawer-close:hover { color: var(--brand-orange); }

.drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-4) var(--space-5);
}

/* Mobile menu specifics */
.menu-search {
	position: relative;
	margin-bottom: var(--space-5);
}
/* Search icon hidden — relying on the input placeholder for affordance. */
.menu-search svg { display: none; }
.menu-search input {
	width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--neutral-200);
	background: var(--neutral-100);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	border-radius: 0;
}
.menu-search input::placeholder {
	font-family: var(--font-body);
	color: var(--neutral-500);
}
.menu-search input:focus {
	outline: none;
	border-color: var(--brand-orange);
	background: var(--white);
}

.menu-nav, .menu-secondary {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	display: flex;
	flex-direction: column;
}
.menu-nav-link {
	display: block;
	padding: var(--space-3) 0;
	font-family: var(--font-body);
	font-size: var(--text-lg); /* 18px — readable Sen, in line with body type */
	font-weight: 600;
	color: var(--neutral-900);
	border-bottom: 1px solid var(--neutral-200);
}
.menu-secondary-link {
	display: block;
	padding: var(--space-2) 0;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--neutral-700);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.menu-account {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--neutral-200);
}
.menu-account-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	background: var(--brand-orange);
	color: var(--white);
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.menu-account-link:hover { background: var(--brand-orange-dark); }

/* Drawer fallback message — used when WooCommerce isn't active. */
.drawer-fallback { padding: 1rem; }

/* =============================================================
   WC NOTICES → AUTO-DISMISSING TOAST NOTIFICATIONS — site-wide.
   The PDP "Product has been added to your cart" green notice, the
   cart-page coupon-applied notice, and any other WC-generated
   .woocommerce-message / -info / -error block is repositioned as
   a fixed top-right toast with slide-in / hold / fade-out. JS in
   main.js dismisses each one after ~3.5 seconds.

   Selectors include `.woocommerce` and `.woocommerce-page` prefixed
   variants because Storefront ships rules at that specificity with
   `position: relative` that would otherwise override our fixed
   positioning. !important on the layout properties is the final
   safety net.
   ============================================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	position: fixed !important;
	top: 80px !important;                  /* below the sticky header */
	right: var(--space-5) !important;
	left: auto !important;
	bottom: auto !important;
	width: calc(100vw - var(--space-5) * 2) !important;
	max-width: 420px !important;
	z-index: 9999 !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: var(--space-3) !important;
	padding: var(--space-3) var(--space-4) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--white) !important;
	background: var(--success, #00B67A) !important;   /* green = success */
	border: 0 !important;
	border-radius: 4px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
	pointer-events: auto !important;
	list-style: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	animation: pt-toast-slide-in 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	content: none !important;   /* kill WC's default ::before tick */
	display: none !important;
}
.woocommerce-info,
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info { background: var(--brand-orange) !important; }
.woocommerce-error,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error { background: #c1392b !important; }

/* The notices wrapper is normally a block element that adds vertical
   space above the page content (where WC originally puts notices).
   Now that we've yanked all child notices out into fixed position,
   the wrapper itself should collapse so nothing pushes content
   down. zero height / hidden overflow does the job without
   removing the element (we still need it as a parent so WC's
   notice-injection AJAX can target it). */
.woocommerce-notices-wrapper {
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;  /* children break out via position: fixed */
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: var(--white);
	text-decoration: underline;
}
/* Hide WC's "View cart" / "Return to shop" / "Restore item" buttons
   inside toasts — the toast is meant to be a brief confirmation, not
   an action surface. Customer clicks the cart icon to view their cart. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message .wc-forward,
.woocommerce-info .wc-forward,
.woocommerce-error .wc-forward,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button,
.woocommerce-page .woocommerce-message .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-error .button {
	display: none !important;
}
/* Stack multiple simultaneous toasts so they don't overlap. */
.woocommerce-message ~ .woocommerce-message,
.woocommerce-message ~ .woocommerce-info,
.woocommerce-message ~ .woocommerce-error,
.woocommerce-info    ~ .woocommerce-message,
.woocommerce-info    ~ .woocommerce-info,
.woocommerce-info    ~ .woocommerce-error,
.woocommerce-error   ~ .woocommerce-message,
.woocommerce-error   ~ .woocommerce-info,
.woocommerce-error   ~ .woocommerce-error {
	top: calc(80px + 60px);
}
.woocommerce-message.is-leaving,
.woocommerce-info.is-leaving,
.woocommerce-error.is-leaving {
	animation: pt-toast-slide-out 360ms ease-in forwards;
}
@keyframes pt-toast-slide-in {
	from { transform: translateX(120%); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}
@keyframes pt-toast-slide-out {
	to { transform: translateX(120%); opacity: 0; }
}
@media (max-width: 719px) {
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		top: 70px;
		right: var(--space-3);
		left: var(--space-3);
		width: auto;
		max-width: none;
	}
}

/* =============================================================
   FREE SHIPPING PROGRESS BAR — site-wide.
   Used inside the cart-page summary panel AND the mini-cart drawer.
   The .cart-free-shipping--drawer modifier is set by the helper
   when called from mini-cart.php to tweak margins for the drawer
   context. Identical visual treatment otherwise.
   ============================================================= */
.cart-free-shipping {
	background: var(--brand-cream-warm, #F0E6D6);
	padding: var(--space-3) var(--space-4);
	margin: 0 calc(-1 * var(--space-5)) var(--space-4);
	text-align: center;
	font-size: var(--text-xs);
	color: var(--neutral-900);
	line-height: 1.4;
}
.cart-free-shipping-label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--neutral-900);
	letter-spacing: 0.02em;
}
.cart-free-shipping-label .woocommerce-Price-amount,
.cart-free-shipping-label bdi {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--brand-orange);
}
.cart-free-shipping-bar {
	margin-top: var(--space-2);
	height: 6px;
	background: var(--neutral-200);
	overflow: hidden;
	border-radius: 3px;
}
.cart-free-shipping-bar-fill {
	height: 100%;
	background: var(--brand-orange);
	transition: width 300ms ease;
}
.cart-free-shipping.qualifies {
	background: #02B67A;
	color: var(--white);
}
.cart-free-shipping.qualifies .cart-free-shipping-label {
	color: var(--white);
	font-weight: 700;
}
.cart-free-shipping.qualifies .cart-free-shipping-bar {
	background: rgba(255, 255, 255, 0.2);
}
.cart-free-shipping.qualifies .cart-free-shipping-bar-fill {
	background: var(--white);
}

/* =============================================================
   MINI CART DRAWER (Session C1C) — replaces the earlier WC-defaults
   styling. Our custom mini-cart.php template emits .cart-item /
   .cart-items / .cart-promo / .drawer-footer / .cart-subtotal /
   .cart-buttons. This block styles them to match the cart page.
   ============================================================= */

/* widget_shopping_cart_content is the fragment target for WC's AJAX. */
.widget_shopping_cart_content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;   /* children scroll, footer sticks */
	min-height: 0;
}

/* FREE SHIPPING bar wrapper inside drawer — no extra padding; the
   bar's own negative margins already give it edge-to-edge feel. */
.pt-minicart-shipping {
	flex-shrink: 0;
	padding: 0 var(--space-5);
	padding-top: var(--space-4);
}
/* Drawer variant — slightly tighter than the cart-page version. */
.cart-free-shipping--drawer {
	margin: 0 calc(-1 * var(--space-5)) 0;
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-xs);
}

/* ITEMS list — scrollable middle column. */
.cart-items,
.woocommerce-mini-cart.cart-items {
	list-style: none;
	margin: 0;
	padding: var(--space-3) var(--space-5);
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

/* Empty-cart placeholder inside drawer. */
.pt-minicart-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	text-align: center;
	padding: var(--space-8) var(--space-5);
}
.pt-minicart-empty-title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 400;
	color: var(--neutral-900);
	letter-spacing: -0.01em;
	margin: 0;
}
.pt-minicart-empty .cart-btn {
	padding: 0 var(--space-6);
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* CART ITEM — Flexbox row: image (fixed 80px) | info (flex) | actions
   (auto). Switched from grid → flex because WC/Storefront defaults
   were occasionally winning the grid declaration and causing the
   actions column to wrap to a new row. Flex with explicit
   flex-wrap: nowrap is more deterministic. */
.cart-item,
.mini_cart_item,
li.mini_cart_item,
li.mini_cart_item.cart-item {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: var(--space-3) !important;
	width: 100% !important;
	padding: var(--space-4) 0 !important;
	border-bottom: 1px solid var(--neutral-200);
	margin: 0 !important;
	list-style: none !important;
	box-sizing: border-box;
	/* position: relative contains any rogue absolute-positioned
	   child (e.g. WC's `a.remove` default styling) within this LI
	   rather than the whole drawer / body. */
	position: relative !important;
}
.cart-item:last-child,
.mini_cart_item:last-child { border-bottom: 0; }

/* IMAGE — pure white square 80×80, contained (never cropped).
   flex: 0 0 80px = don't grow, don't shrink, basis 80px. */
.cart-item-image,
a.cart-item-image,
.mini_cart_item .cart-item-image {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 80px !important;
	width: 80px !important;
	height: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
	background: var(--white) !important;
	overflow: hidden;
	padding: 4px;
	box-sizing: border-box;
	border: 1px solid var(--neutral-200);
	float: none !important;
	margin: 0 !important;
}
.cart-item-image img,
.mini_cart_item .cart-item-image img,
.mini_cart_item img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	background: transparent !important;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	float: none !important;
}

/* INFO column — flex-grow into remaining horizontal space. */
.cart-item-info {
	flex: 1 1 auto !important;
	min-width: 0;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--space-1);
	margin: 0 !important;
	padding: 0 !important;
}
.cart-item-title,
.cart-item-info a.cart-item-title {
	font-family: var(--font-display) !important;   /* beats priority-999 Sen override */
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.15;
	color: var(--neutral-900);
	letter-spacing: -0.01em;
	text-decoration: none !important;
}
.cart-item-info a.cart-item-title:hover { color: var(--brand-orange); }
.cart-item-variant {
	font-size: var(--text-xs);
	color: var(--neutral-500);
	line-height: 1.3;
}
.cart-item-price {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--neutral-900);
	margin-top: var(--space-1);
}
.cart-item-price .quantity {
	font-size: var(--text-xs);
	color: var(--neutral-700);
	margin: 0;
	display: inline;
}
.cart-item-price .woocommerce-Price-amount,
.cart-item-price bdi {
	font-family: var(--font-body);
	font-weight: 700;
}

/* ACTIONS column — × at top, qty stepper below, stacked + right-aligned.
   flex: 0 0 auto = don't grow, don't shrink, basis = content width. */
.cart-item-actions {
	display: flex !important;
	flex: 0 0 auto !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: center !important;
	gap: var(--space-2);
	margin: 0 !important;
	padding: 0 !important;
}

/* × REMOVE — our custom .pt-cart-remove class.
   We deliberately do NOT carry WC's `remove` / `remove_from_cart_button`
   classes anymore (they pulled WC's red-circle styles + a delegated
   click handler that was firing on unrelated clicks). Plain × in
   grey, hover-orange, 22×22, statically positioned in column 3. */
.pt-cart-remove,
.cart-item-remove,
a.pt-cart-remove,
a.cart-item-remove {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	color: var(--neutral-500) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	padding: 0 !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	max-width: 22px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	transition: color var(--t-base) !important;
	float: none !important;
	/* Force static positioning + nuke any top/left/right/bottom
	   inherited from WC inline CSS that would stretch the click
	   target across the drawer. */
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	inset: auto !important;
	z-index: auto !important;
	margin: 0 !important;
	text-indent: 0 !important;
	overflow: visible !important;
}
.pt-cart-remove:hover,
.cart-item-remove:hover { color: var(--brand-orange) !important; background: transparent !important; }
.pt-cart-remove.is-loading { opacity: 0.5; pointer-events: none; }

/* QTY STEPPER inline beside the × column. */
.cart-item-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--neutral-300);
	height: 30px;
}
.cart-item-qty button {
	width: 26px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-family: var(--font-body);
	color: var(--neutral-900);
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: background var(--t-base);
}
.cart-item-qty button:hover { background: var(--neutral-100); }
.cart-item-qty input,
.cart-item-qty input.qty {
	width: 30px !important;
	height: 28px !important;
	text-align: center;
	border: 0;
	border-left: 1px solid var(--neutral-300);
	border-right: 1px solid var(--neutral-300);
	border-radius: 0 !important;
	font-size: var(--text-sm);
	font-weight: 600;
	font-family: var(--font-body);
	color: var(--neutral-900);
	background: var(--white);
	padding: 0 !important;
	-moz-appearance: textfield;
}
.cart-item-qty input::-webkit-outer-spin-button,
.cart-item-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* "DON'T FORGET" REMINDER (drawer-specific soft promo). */
.cart-items + .cart-promo,
.widget_shopping_cart_content .cart-promo {
	flex-shrink: 0;
	margin: 0 var(--space-5) var(--space-4);
	padding: var(--space-4);
	background: var(--brand-cream);
	text-align: center;
}
.cart-promo-title {
	font-family: var(--font-accent);
	font-size: var(--text-lg);
	color: var(--brand-orange);
	transform: rotate(-1deg);
	display: inline-block;
	line-height: 1;
	margin-bottom: var(--space-1);
}
.cart-promo-text {
	font-size: var(--text-xs);
	color: var(--neutral-700);
	line-height: 1.4;
}

/* DRAWER FOOTER — sticky bottom. */
.widget_shopping_cart_content .drawer-footer {
	flex-shrink: 0;
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--neutral-200);
	background: var(--white);
}
.cart-subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--space-2);
}
.cart-subtotal-label {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--neutral-700);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cart-subtotal-value {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--neutral-900);
}
.cart-subtotal-value .woocommerce-Price-amount,
.cart-subtotal-value bdi {
	font-family: var(--font-body);
	font-weight: 700;
}
.cart-shipping-note {
	font-size: var(--text-xs);
	color: var(--neutral-500);
	text-align: center;
	margin-bottom: var(--space-3);
}
.cart-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.cart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 var(--space-5);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: all var(--t-base);
}
.cart-btn--primary {
	background: var(--brand-orange);
	color: var(--white);
	border-color: var(--brand-orange);
}
.cart-btn--primary:hover {
	background: var(--brand-orange-dark);
	border-color: var(--brand-orange-dark);
	color: var(--white);
}
.cart-btn--secondary {
	background: var(--white);
	color: var(--neutral-900);
	border-color: var(--neutral-900);
}
.cart-btn--secondary:hover {
	background: var(--neutral-900);
	color: var(--white);
}

/* DRAWER TITLE COUNT — "(N)" pill next to "Your Cart". */
.drawer-cart-count {
	display: inline-block;
	margin-left: var(--space-1);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--neutral-500);
	font-weight: 400;
	letter-spacing: 0;
}

/* Cart page image — same white-square contain treatment as the drawer
   so harness photos with transparent backgrounds no longer crop. */
.cart-page-item-image {
	background: var(--white) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	box-sizing: border-box;
}
.cart-page-item-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	background: transparent;
}

/* ---- Legacy WC mini-cart fallback (kept only for safety until WC's
        cached fragments rotate; can be removed once all sessions update) ---- */
.woocommerce-mini-cart__empty-message {
	text-align: center;
	padding: var(--space-8) var(--space-5);
	font-size: var(--text-base);
	color: var(--neutral-700);
}
.woocommerce-mini-cart__total {
	display: none;   /* superseded by our .cart-subtotal in the drawer footer */
}
.woocommerce-mini-cart__buttons {
	padding: 0 var(--space-5) var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.woocommerce-mini-cart__buttons .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-5);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	min-height: 44px;
}
.woocommerce-mini-cart__buttons .checkout {
	background: var(--brand-orange);
	color: var(--white);
}
.woocommerce-mini-cart__buttons .checkout:hover { background: var(--brand-orange-dark); }
.woocommerce-mini-cart__buttons .wc-forward:not(.checkout) {
	background: transparent;
	color: var(--neutral-900);
	border: 2px solid var(--neutral-900);
}
.woocommerce-mini-cart__buttons .wc-forward:not(.checkout):hover {
	background: var(--neutral-900);
	color: var(--white);
}

/* =============================================================
   8.  FOOTER
   ============================================================= */
.footer {
	background: var(--neutral-900);
	color: rgba(255,255,255,0.7);
	padding: var(--space-10) 0 var(--space-6);
}
.footer-grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin-bottom: var(--space-8);
}
.footer-brand .logo {
	color: var(--white);
	display: inline-block;
	margin-bottom: var(--space-2); /* tighter group with tagline (was --space-3) */
}
/* Footer logo — specificity bumped to .footer .footer-logo and !important
   so neither the base `img` reset nor any Storefront `.site-footer img`
   rule can override the size. Mobile 48px, desktop 64px. */
.footer .footer-logo {
	height: 48px !important;
	width: auto !important;
	max-width: 100% !important;
	display: block;
	filter: brightness(0) invert(1);
	opacity: 0.95;
}
.footer-tagline {
	font-family: var(--font-accent);
	font-size: var(--text-lg);
	color: var(--brand-orange);
	line-height: 1.3;
	max-width: 280px;
	margin: 0;
}
.footer-cols {
	display: grid;
	grid-template-columns: 1fr; /* mobile: collapsible columns stack as one */
	gap: var(--space-6) var(--space-4);
}
.footer-col h4 {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--white);
	margin: 0 0 1rem; /* more breathing room above the first list item */
}
.footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}
.footer-col a {
	font-size: var(--text-sm);
	color: rgba(255,255,255,0.7);
	transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--brand-orange); }

/* ----- (H) Collapsible footer columns (mobile only) -----
   Markup uses <details> for JS-free accordion. On tablet+ we override
   the default behaviour to keep every column fully expanded. */
.footer-col--collapsible { width: 100%; }
.footer-col--collapsible > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	/* Vertical-only padding so the heading aligns flush with the CONNECT
	   column heading below (which has no horizontal offset). */
	padding: var(--space-2) 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-col--collapsible[open] > summary { border-bottom-color: transparent; }
.footer-col--collapsible > summary::-webkit-details-marker { display: none; }
.footer-col--collapsible > summary::marker { content: ''; }
.footer-col--collapsible > summary h4 { margin: 0; }
.footer-chevron {
	width: 18px;
	height: 18px;
	color: rgba(255,255,255,0.6);
	transition: transform 0.25s ease;
	flex-shrink: 0;
}
.footer-col--collapsible[open] .footer-chevron { transform: rotate(180deg); }
.footer-col--collapsible > ul {
	padding: var(--space-3) 0 var(--space-4);
}

.footer-social { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.social-link {
	width: 36px; height: 36px;
	border: 1px solid rgba(255,255,255,0.2);
	display: flex; align-items: center; justify-content: center;
	transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
	color: var(--white);
}
.social-link:hover,
.social-link:focus-visible {
	background: var(--brand-orange) !important;
	border-color: var(--brand-orange) !important;
	color: var(--white) !important;
}
.social-link svg {
	width: 16px;
	height: 16px;
	fill: currentColor;   /* ensures the icon recolours with the parent link */
}
.social-link:hover svg,
.social-link:focus-visible svg {
	fill: var(--white) !important;
}

/* =============================================================
   404 / PAGE NOT FOUND
   Rendered by 404.php inside the standard header/footer.
   Ported byte-for-byte from
   mockups/pawshtails-404.html (lines 1513-1600).
   ============================================================= */
.error-section {
	padding: var(--space-10) var(--section-x) var(--space-12);
	background: var(--brand-cream);
	text-align: center;
}
.error-section-inner {
	max-width: 600px;
	margin: 0 auto;
}
@media (min-width: 720px) {
	/* Wider inner column on tablet+ so the heading "This page got
	   lost on the walk." sits on a single line. Subtitle stays
	   narrow below for comfortable line length. */
	.error-section-inner { max-width: 960px; }
}
.error-code {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	color: var(--brand-orange);
	letter-spacing: 0.1em;
	margin-bottom: var(--space-2);
}
.error-title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: 400;
	color: var(--neutral-900);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin-bottom: var(--space-3);
}
@media (min-width: 720px) {
	.error-title { font-size: var(--text-5xl); }
}
.error-subtitle {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--neutral-700);
	line-height: 1.6;
	margin: 0 auto var(--space-5);
	/* Cap subtitle line length for readability — the inner column
	   above is wide enough to let the heading stretch, but body
	   copy should sit at a normal reading width. */
	max-width: 560px;
}
.error-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}
.error-btn,
a.error-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-5);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none !important;
	min-height: 48px;
	transition: all var(--t-fast, 150ms);
}
.error-btn--primary {
	background: var(--brand-orange);
	color: var(--white);
	border: 2px solid var(--brand-orange);
}
.error-btn--primary:hover {
	background: var(--brand-orange-dark);
	border-color: var(--brand-orange-dark);
	color: var(--white);
}
.error-btn--secondary {
	background: transparent;
	color: var(--neutral-900);
	border: 2px solid var(--neutral-900);
}
.error-btn--secondary:hover {
	background: var(--neutral-900);
	color: var(--white);
}
.error-popular {
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--neutral-200);
}
.error-popular-label {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--neutral-500);
	margin-bottom: var(--space-3);
}
.error-popular-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-4);
}
.error-popular-link {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--neutral-900);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--brand-orange);
}
.error-popular-link:hover { color: var(--brand-orange); }

.footer-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2); /* tighter — was --space-3 */
	padding-top: var(--space-5);
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: 11px;
	color: rgba(255,255,255,0.5);
	letter-spacing: 0.05em;
	text-align: center;
}
.footer-bottom-meta { color: rgba(255,255,255,0.7); }
.footer-bottom-legal {
	display: flex; gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: center;
}
.footer-bottom-legal a {
	color: rgba(255,255,255,0.7);
	transition: color var(--t-fast);
}
.footer-bottom-legal a:hover { color: var(--brand-orange); }
.footer-sep { color: rgba(255,255,255,0.3); }

.footer-payments {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0; /* tighter — the .footer-bottom gap handles spacing */
}
.payment-logo {
	height: 22px;
	width: auto;
	opacity: 0.95;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
	border: 0 !important;
}

.footer-attribution {
	margin-top: 0; /* tighter — the .footer-bottom gap handles spacing */
	font-size: 10px;
	color: rgba(255,255,255,0.45);
	letter-spacing: 0.05em;
}
.footer-attribution a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
}
.footer-attribution a:hover { color: var(--brand-orange); }

/* =============================================================
   9.  TABLET (720px+)
   ============================================================= */
@media (min-width: 720px) {
	:root {
		--section-y: var(--space-8);
		--section-x: var(--space-8);
	}
	.container { max-width: 1280px; }
	.header-inner { max-width: 1280px; padding: var(--space-5) var(--section-x); }
	.logo img { height: 34px; }
	/* Header nav + footer accordion + footer 4-col are intentionally NOT in
	   this block — they switch at 1024px now so tablets keep the mobile
	   hamburger and collapsed footer. */
}

/* =============================================================
   10. DESKTOP (1024px+)
   ============================================================= */
@media (min-width: 1024px) {
	:root { --section-y: var(--space-10); }
	.container { max-width: 1440px; }

	/* --- (B) Header nav switches in here so tablets keep the hamburger --- */
	.nav {
		display: flex;
		align-items: center;
		justify-self: center;
		gap: var(--space-8);
	}
	.nav a, .nav-link {
		font-size: var(--text-sm);
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		padding: var(--space-2) 0;
		position: relative;
		transition: color var(--t-fast);
	}
	.nav a::after, .nav-link::after {
		content: '';
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 1.5px;
		background: var(--brand-orange);
		transform: scaleX(0);
		transition: transform var(--t-base);
	}
	.nav a:hover, .nav-link:hover { color: var(--brand-orange); }
	.nav a:hover::after, .nav-link:hover::after,
	.nav-link.active::after, .current-menu-item a::after { transform: scaleX(1); }
	.nav-link.active, .current-menu-item a { color: var(--brand-orange); }
	/* Hamburger hidden on desktop. button.menu-toggle (0,1,1) beats
	   the button.icon-btn { display: inline-flex } rule at the same
	   specificity, since this declaration is later in cascade. */
	button.menu-toggle { display: none; }

	.header-inner {
		max-width: 1440px;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}
	.header-actions { justify-self: end; gap: var(--space-5); }

	/* --- (F) Body type a touch larger on desktop for comfort --- */
	body { font-size: 17px; line-height: 1.6; }

	/* NOTE: Footer-specific rules have been moved to their own
	   @media (min-width: 1100px) block below — the customer wanted
	   the responsive collapsible footer to persist up to 1100px,
	   not the rest of the site's tablet→desktop break at 1024. */
}

/* =============================================================
   10b. FOOTER DESKTOP (1100px+)
   The mobile collapsible footer persists from 0–1099px. Footer
   switches to its 4-column expanded layout only at 1100px+.
   ============================================================= */
@media (min-width: 1100px) {

	/* --- Footer 4-col grid + collapsible force-open. Below 1100px the
	   footer is single-column with tap-to-expand details. */
	.footer-cols { grid-template-columns: repeat(4, 1fr); flex: 1; }
	.footer-col--collapsible[open] > *,
	.footer-col--collapsible > * { display: block !important; }
	.footer-col--collapsible > summary {
		cursor: default;
		pointer-events: none;
		padding: 0;
		border-bottom: 0;
	}
	.footer-col--collapsible > summary::-webkit-details-marker,
	.footer-col--collapsible > summary::marker { display: none; }
	.footer-col--collapsible > ul {
		display: flex !important;
		flex-direction: column;
		gap: var(--space-2);
		padding: 0;
	}
	.footer-chevron { display: none !important; }

	.footer-grid {
		flex-direction: row;
		gap: var(--space-10);
		align-items: flex-start;
	}
	.footer-brand { flex-shrink: 0; max-width: 280px; }

	/* Footer-bottom gap + desktop font size in one place. The base rule
	   already sets flex-direction: column, so we only need to override gap
	   and font-size here. */
	.footer-bottom { gap: var(--space-4); font-size: 12px; }

	/* Footer text +1-2px on desktop */
	.footer-col h4 {
		font-size: 12px;
		letter-spacing: 0.22em;
		margin-bottom: 0.5rem !important; /* desktop-only — dialled down further */
	}
	.footer-col a  { font-size: 15px; }
	.footer-attribution { font-size: 11px; }

	/* Footer logo grows on desktop too. */
	.footer .footer-logo { height: 64px !important; }
}

/* =============================================================
   11. REDUCED MOTION — respect OS-level preference
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.announcement-item { opacity: 1; position: static; }
	.announcement-item:not(:first-child) { display: none; }
}

/* ===== BREADCRUMB — site-wide mobile-only tightening =====
   On screens narrower than 1024px (tablet/mobile) the breadcrumb has
   excess bottom padding from the per-template stylesheets (shop.css
   on category pages, product.css on PDPs). Halve it here in one
   place so the section below sits closer to the breadcrumb. */
@media (max-width: 1023px) {
	.breadcrumb {
		padding-bottom: var(--space-2);
	}
}

/* =============================================================
   HEADER NAV — 1100px breakpoint (single source of truth)

   Both product.css (PDP) and shop.css (category archive) include
   byte-for-byte mockup duplicates of the header rules with their own
   @media (min-width: 720px) and (min-width: 1024px) blocks that show
   the desktop nav as early as 720px — that's why the header reads
   differently on category/product pages than on the homepage.

   This block uses !important to override every duplicate in both
   templates (which don't carry !important), giving a single canonical
   header behaviour site-wide:
     <1100px → hamburger visible, desktop nav hidden, header-inner uses
               flex (logo left, actions right)
     ≥1100px → desktop nav visible, hamburger hidden, header-inner uses
               grid (logo / centred nav / right actions)
   ============================================================= */
@media (max-width: 1099px) {
	.header .nav {
		display: none !important;
	}
	.header button.menu-toggle,
	.header .menu-toggle {
		display: flex !important;
	}
	/* Force flex layout so the hamburger right-aligns. Below 1100 the
	   grid switch from main.css's 1024 block would otherwise leave an
	   empty middle column. */
	.header .header-inner {
		display: flex !important;
		grid-template-columns: none !important;
		justify-content: space-between !important;
	}
}
@media (min-width: 1100px) {
	.header .nav {
		display: flex !important;
	}
	.header button.menu-toggle,
	.header .menu-toggle {
		display: none !important;
	}
}

/* =============================================================
   MOBILE DRAWER MENU — main.css is the canonical styling.

   The mockup byte-for-byte duplicates in product.css (~line 1066)
   and shop.css (~line 1209) style .menu-nav-link with the display
   serif (Allenoire) at --text-xl, flex space-between, plus a "→"
   ::after arrow. The homepage uses main.css's plain Sen-weight-600
   block link without an arrow — the user wants that look on all
   pages. !important here wins the cascade over the non-!important
   duplicates regardless of file load order.
   ============================================================= */
.menu-nav-link::after,
.menu-nav-link:hover::after {
	content: none !important;
	display: none !important;
}
.menu-nav-link {
	display: block !important;
	padding: var(--space-3) 0 !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	font-weight: 600 !important;
	color: var(--neutral-900) !important;
	line-height: 1.4 !important;
}
.menu-nav-link:hover,
.menu-nav-link.is-active,
.menu-nav-link.current-menu-item,
.current-menu-item > .menu-nav-link {
	color: var(--brand-orange) !important;
}

/* Search container — homepage version has no cream wrapper background
   and uses an inline-style search input. The mockup duplicates in
   product.css and shop.css wrap the form in a cream block. Force the
   homepage layout site-wide. */
.menu-search {
	position: relative !important;
	display: block !important;
	background: transparent !important;
	padding: 0 !important;
	gap: 0 !important;
	margin-bottom: var(--space-5) !important;
}
.menu-search svg {
	display: none !important;
}
.menu-search input {
	flex: initial !important;
	width: 100% !important;
	padding: var(--space-3) !important;
	border: 1px solid var(--neutral-200) !important;
	background: var(--neutral-100) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	border-radius: 0 !important;
}

/* Secondary menu list — keep the homepage rhythm.
   The mockup duplicates in product.css and shop.css add
   .menu-secondary-item { padding: var(--space-2) 0; } which doubles up
   on top of the link's own padding. Zero out the item padding so
   only the link padding controls vertical rhythm — matches homepage. */
.menu-secondary {
	list-style: none !important;
	/* var(--space-4) top gap so the secondary block reads as a distinct
	   group below the primary nav (matches homepage rhythm). */
	margin: var(--space-4) 0 var(--space-5) !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}
.menu-secondary-item {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.menu-secondary-link {
	display: block !important;
	padding: var(--space-2) 0 !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	color: var(--neutral-700) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}
.menu-secondary-link:hover {
	color: var(--brand-orange) !important;
}

/* Account block — homepage renders this as a brand-orange CTA button
   with a right-pointing arrow. The mockup duplicates render it as a
   plain row of black text. Force the orange button look site-wide. */
.menu-account {
	margin-top: var(--space-6) !important;
	padding-top: var(--space-4) !important;
	padding-bottom: 0 !important;
	border-top: 1px solid var(--neutral-200) !important;
}
.menu-account-link {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: var(--space-3) var(--space-4) !important;
	background: var(--brand-orange) !important;
	color: var(--white) !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	text-decoration: none !important;
}
.menu-account-link:hover {
	background: var(--brand-orange-dark, var(--brand-orange)) !important;
	color: var(--white) !important;
}


/* =============================================================
   FOOTER PAYMENT LOGOS — NUCLEAR OVERRIDE
   Multiple selectors + !important on every property + at end of
   file so cascade order guarantees this wins over anything from
   parent Storefront theme, WooCommerce, or plugins.
   ============================================================= */
/* Payment logos — extra-selector specificity beats EWWW's
   .lazyloaded rules which set aspect-ratio + width based on
   data-eio-rwidth / data-eio-rheight attributes on lazy-loaded
   images. We force EXPLICIT width AND height so EWWW's
   attribute-derived sizing can't take over. */
.footer .footer-payments img.payment-logo,
.footer .footer-payments img.payment-logo.lazyloaded,
.footer-payments img.payment-logo,
.footer-payments img[class*="payment-logo"],
img.payment-logo,
img.payment-logo.lazyloaded {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	padding: 0 !important;
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	/* Fixed pixel box so EWWW's data-eio-rwidth attribute
	   sizing can't stretch us to the full source image size.
	   object-fit: contain keeps the pill graphic aspect ratio
	   inside the box without cropping. */
	height: 22px !important;
	width: 36px !important;
	max-width: 36px !important;
	min-width: 0 !important;
	object-fit: contain !important;
	object-position: center center !important;
	aspect-ratio: auto !important;
	display: inline-block !important;
	flex: 0 0 auto !important;
}