/*
Theme Name:  MyInfoTag
Theme URI:   https://myinfotag.com
Description: Custom theme for the MyInfoTag medical ID tag platform. Built with ACF for content management. All functional logic lives in the myinfotag-core plugin.
Author:      ImpelHub / Virtina
Version:     1.0.0
License:     Proprietary
Text Domain: myinfotag-theme
Tags:        custom-theme, woocommerce, acf
*/

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
	/* Brand palette — matched to mockup */
	--mit-navy:        #0d2240;
	--mit-navy-mid:    #162e4a;
	--mit-teal:        #1bbec9;
	--mit-teal-dark:   #159aaa;
	--mit-teal-light:  #24d4df;
	--mit-white:       #ffffff;
	--mit-off-white:   #f0f2f5;
	--mit-light-gray:  #e4e8ed;
	--mit-mid-gray:    #6b7a8d;
	--mit-dark-gray:   #2d3748;
	--mit-text:        #1a2535;
	--mit-danger:      #c0392b;
	--mit-success:     #27ae60;
	--mit-warning:     #e67e22;

	/* Icon background tint */
	--mit-teal-bg:     rgba(27, 190, 201, 0.12);

	/* Typography */
	--mit-font-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--mit-font-mono:   'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	--mit-font-size:   16px;
	--mit-line-height: 1.6;

	/* Spacing */
	--mit-space-xs:    0.25rem;
	--mit-space-sm:    0.5rem;
	--mit-space-md:    1rem;
	--mit-space-lg:    1.5rem;
	--mit-space-xl:    2rem;
	--mit-space-2xl:   3rem;
	--mit-space-3xl:   5rem;

	/* Layout */
	--mit-container:   1200px;
	--mit-radius:      8px;
	--mit-radius-lg:   16px;
	--mit-radius-pill: 50px;
	--mit-shadow-sm:   0 1px 4px rgba(0,0,0,0.08);
	--mit-shadow-md:   0 4px 16px rgba(0,0,0,0.10);
	--mit-shadow-lg:   0 8px 32px rgba(0,0,0,0.14);

	/* Transitions */
	--mit-transition:  0.2s ease;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: var(--mit-font-size);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--mit-font-sans);
	font-size: 1rem;
	line-height: var(--mit-line-height);
	color: var(--mit-text);
	background-color: var(--mit-white);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--mit-teal);
	text-decoration: none;
}

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

/* ==========================================================================
   Layout
   ========================================================================== */
.mit-container {
	width: 100%;
	max-width: var(--mit-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mit-space-xl);
	padding-right: var(--mit-space-xl);
}

/* ==========================================================================
   Header — white bar (matches mockup)
   ========================================================================== */
.site-header {
	background-color: var(--mit-white);
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid var(--mit-light-gray);
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.site-header .mit-container {
	display: flex;
	align-items: center;
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
	gap: 0;
}

/* Push nav all the way right against the logo; header-right sits flush next to it */
.primary-nav {
	margin-left: auto;
}

/* Logo */
.site-logo a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.site-logo img {
	height: 36px;
	width: auto;
}

.site-logo .site-name {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--mit-navy);
	letter-spacing: -0.02em;
}

/* "Tag" portion of logo rendered in teal (requires span in header.php) */
.site-logo .logo-tag {
	color: var(--mit-teal);
}

/* Small shield icon next to logo text */
.site-logo .logo-icon {
	width: 28px;
	height: 28px;
	fill: var(--mit-teal);
	flex-shrink: 0;
}

/* ==========================================================================
   Header right cluster (cart + mobile toggle)
   ========================================================================== */
.header-right {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

/* Cart icon button + Account/Login icon */
.mit-cart-icon,
.mit-account-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--mit-navy);
	text-decoration: none;
	transition: background-color var(--mit-transition), color var(--mit-transition);
	flex-shrink: 0;
}

.mit-cart-icon:hover,
.mit-account-icon:hover {
	background-color: var(--mit-off-white);
	color: var(--mit-teal);
	text-decoration: none;
}

/* Item count badge */
.mit-cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background-color: var(--mit-teal);
	color: var(--mit-white);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border-radius: 50px;
	pointer-events: none;
}

/* ==========================================================================
   Navigation — dark links on white header
   ========================================================================== */
.primary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--mit-space-lg);
}

.primary-nav a {
	color: var(--mit-navy);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: color var(--mit-transition);
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a {
	color: var(--mit-teal);
	text-decoration: none;
}

/* "Get My Tag" pill CTA in nav */
.primary-nav .nav-cta > a,
.primary-nav .mit-nav-cta > a,
li.mit-nav-cta > a {
	background-color: var(--mit-teal) !important;
	color: var(--mit-white) !important;
	padding: 0.5rem 1.375rem !important;
	border-radius: var(--mit-radius-pill) !important;
	font-weight: 600 !important;
	transition: background-color var(--mit-transition) !important;
}

.primary-nav .nav-cta > a:hover,
.primary-nav .mit-nav-cta > a:hover,
li.mit-nav-cta > a:hover {
	background-color: var(--mit-teal-dark) !important;
	text-decoration: none !important;
}

/* Mobile menu toggle */
.mit-mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--mit-navy);
	cursor: pointer;
	padding: 0.5rem;
	min-height: 44px;
	min-width: 44px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.mit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	font-family: var(--mit-font-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	border: 2px solid transparent;
	border-radius: var(--mit-radius-pill);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--mit-transition), color var(--mit-transition), border-color var(--mit-transition);
	min-height: 48px;
}

.mit-btn-primary {
	background-color: var(--mit-teal);
	color: var(--mit-white);
}

.mit-btn-primary:hover,
.mit-btn-primary:focus {
	background-color: var(--mit-teal-dark);
	color: var(--mit-white);
	text-decoration: none;
}

.mit-btn-secondary {
	background-color: transparent;
	color: var(--mit-white);
	border-color: rgba(255,255,255,0.55);
}

.mit-btn-secondary:hover,
.mit-btn-secondary:focus {
	background-color: rgba(255,255,255,0.12);
	color: var(--mit-white);
	border-color: var(--mit-white);
	text-decoration: none;
}

/* Navy solid button (used on order received page etc.) */
.mit-btn-navy {
	background-color: var(--mit-navy);
	color: var(--mit-white);
	border-color: var(--mit-navy);
}

.mit-btn-navy:hover,
.mit-btn-navy:focus {
	background-color: var(--mit-navy-mid);
	color: var(--mit-white);
	border-color: var(--mit-navy-mid);
	text-decoration: none;
}

.mit-btn-outline-teal {
	background-color: transparent;
	color: var(--mit-teal);
	border-color: var(--mit-teal);
}

.mit-btn-outline-teal:hover {
	background-color: var(--mit-teal);
	color: var(--mit-white);
	text-decoration: none;
}

.mit-btn-danger {
	background-color: var(--mit-danger);
	color: var(--mit-white);
	border-radius: var(--mit-radius);
}

.mit-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--mit-font-sans);
	font-weight: 700;
	line-height: 1.2;
	color: var(--mit-navy);
	margin-top: 0;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }

p { margin-top: 0; }

/* Section overline label */
.section-overline {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mit-teal);
	margin-bottom: 0.75rem;
}

/* Section heading combo — overline + h2 */
.section-header {
	text-align: center;
	margin-bottom: var(--mit-space-2xl);
}

.section-header h2 {
	margin-bottom: 0.625rem;
}

.section-header p {
	font-size: 1.0625rem;
	color: var(--mit-mid-gray);
	max-width: 600px;
	margin: 0 auto;
}

/* ==========================================================================
   Cards & Panels
   ========================================================================== */
.mit-card {
	background: var(--mit-white);
	border: 1px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	padding: var(--mit-space-xl);
	box-shadow: var(--mit-shadow-sm);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.mit-hero {
	background-color: var(--mit-navy);
	padding: 5rem 0 5rem;
	overflow: hidden;
}

.mit-hero .mit-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--mit-space-3xl);
}

.mit-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(27, 190, 201, 0.15);
	border: 1px solid rgba(27, 190, 201, 0.3);
	color: var(--mit-teal-light);
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.375rem 1rem;
	border-radius: var(--mit-radius-pill);
	margin-bottom: 1.5rem;
}

.mit-hero-badge::before {
	content: '';
	width: 7px;
	height: 7px;
	background: var(--mit-teal);
	border-radius: 50%;
	flex-shrink: 0;
}

.mit-hero-headline {
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--mit-white);
	margin-bottom: 1.25rem;
}

.mit-hero-headline .accent {
	color: var(--mit-teal);
}

.mit-hero-subtext {
	font-size: 1.125rem;
	color: rgba(255,255,255,0.75);
	line-height: 1.65;
	margin-bottom: 2rem;
	max-width: 520px;
}

.mit-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.mit-hero-image {
	position: relative;
}

.mit-hero-image img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: var(--mit-radius-lg);
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.mit-hero-image-placeholder {
	width: 100%;
	height: 420px;
	background: linear-gradient(135deg, rgba(27,190,201,0.15) 0%, rgba(13,34,64,0.8) 100%);
	border-radius: var(--mit-radius-lg);
	border: 1px solid rgba(27,190,201,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mit-hero-image-placeholder svg {
	width: 80px;
	height: 80px;
	opacity: 0.3;
}

/* ==========================================================================
   How It Works Section
   ========================================================================== */
.mit-how-it-works {
	background-color: var(--mit-off-white);
	padding: var(--mit-space-3xl) 0;
}

.mit-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mit-space-xl);
}

.mit-steps::before { display: none; }

.mit-step {
	text-align: center;
	padding: var(--mit-space-lg) 0;
	position: relative;
}

/*
 * Connector line between steps.
 * Drawn as ::after on each non-last step so it renders BEFORE the next step
 * in DOM order — the next step's icon-wrap naturally paints on top of it.
 *
 * left  = right edge of this step's icon  = 50% + 38px
 * width = gap + (next icon's left edge)   = (100% - 50% - 38px) + gap + (50% - 38px)
 *       = 100% + gap - 76px
 * top   = icon vertical centre            = padding-top (1.5rem) + half-icon (38px)
 */
.mit-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: calc( var(--mit-space-lg) + 38px );
	left: calc( 50% + 38px );
	width: calc( 100% + var(--mit-space-xl) - 76px );
	height: 2px;
	background: rgba(27, 190, 201, 0.3);
	pointer-events: none;
}

.mit-step-icon-wrap {
	width: 76px;
	height: 76px;
	background-color: var(--mit-teal-bg);
	border-radius: var(--mit-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--mit-space-lg);
}

.mit-step-icon-wrap svg {
	width: 36px;
	height: 36px;
	color: var(--mit-teal);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
}

.mit-step-overline {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mit-teal);
	margin-bottom: 0.5rem;
}

.mit-step-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--mit-navy);
	margin-bottom: 0.5rem;
}

.mit-step-desc {
	font-size: 0.9375rem;
	color: var(--mit-mid-gray);
	line-height: 1.6;
	max-width: 300px;
	margin: 0 auto;
}

/* ==========================================================================
   What MyInfoTag Stores — Feature Cards
   ========================================================================== */
.mit-coverage {
	padding: var(--mit-space-3xl) 0;
	background: var(--mit-white);
}

.mit-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.mit-feature-card {
	background: var(--mit-white);
	border: 1px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	padding: 1.75rem;
	transition: box-shadow var(--mit-transition), transform var(--mit-transition);
}

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

.mit-feature-icon {
	width: 52px;
	height: 52px;
	background-color: var(--mit-teal-bg);
	border-radius: var(--mit-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.125rem;
}

.mit-feature-icon svg {
	width: 26px;
	height: 26px;
	color: var(--mit-teal);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
}

.mit-feature-card h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--mit-navy);
	margin-bottom: 0.5rem;
}

.mit-feature-card p {
	font-size: 0.9375rem;
	color: var(--mit-mid-gray);
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   Products Section (homepage featured strip)
   ========================================================================== */
.mit-featured-products {
	padding: var(--mit-space-3xl) 0;
	background: var(--mit-off-white);
}

/* ---- Shared WooCommerce product card styles (homepage + shop) ----------- */

/* Kill WC clearfix pseudo-elements — they become empty grid cells otherwise */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none !important;
	content: none !important;
}

/* Reset WC's float-based layout everywhere and use CSS Grid instead */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	gap: 1.25rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 var(--mit-space-xl) !important;
	float: none !important;
	clear: both;
	/* Default: 4 columns on shop page */
	grid-template-columns: repeat(4, 1fr) !important;
}

/* Homepage featured products: 3 columns */
.mit-featured-products .woocommerce ul.products,
.mit-featured-products .woocommerce-page ul.products {
	grid-template-columns: repeat(3, 1fr) !important;
}

/* Reset all WC float/width on individual product items */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none !important;
	width: auto !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--mit-white) !important;
	border: 1px solid var(--mit-light-gray) !important;
	border-radius: var(--mit-radius-lg) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	transition: box-shadow var(--mit-transition), transform var(--mit-transition);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	box-shadow: var(--mit-shadow-md) !important;
	transform: translateY(-3px);
}

/* Product image */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	height: 200px !important;
	width: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	margin: 0 !important;
}

/* Product link wrapper */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--mit-navy) !important;
	padding: 0.875rem 1.125rem 0.25rem !important;
	margin: 0 !important;
}

/* Product price */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	color: var(--mit-teal) !important;
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	padding: 0 1.125rem 0.625rem !important;
	display: block !important;
}

/* Add to cart button */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
	margin: auto 1.125rem 1.125rem !important;
	border-radius: var(--mit-radius-pill) !important;
	background-color: var(--mit-teal) !important;
	color: var(--mit-white) !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	padding: 0.55rem 1.25rem !important;
	text-align: center !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: calc(100% - 2.25rem) !important;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .button:hover {
	background-color: var(--mit-teal-dark) !important;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
	background: var(--mit-teal) !important;
	border-radius: var(--mit-radius-pill) !important;
	font-weight: 700 !important;
	top: 0.75rem !important;
	left: 0.75rem !important;
}

/* Lifetime warranty badge */
.mit-product-warranty-badge {
	display: inline-block;
	background: var(--mit-off-white);
	color: var(--mit-mid-gray);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2rem 0.65rem;
	border-radius: 20px;
	border: 1px solid var(--mit-light-gray);
	margin-left: 0.5rem;
	vertical-align: middle;
}

/* ==========================================================================
   Security Dark Section
   ========================================================================== */
.mit-security-section {
	background-color: var(--mit-navy);
	padding: var(--mit-space-3xl) 0;
}

.mit-security-section .section-overline {
	color: var(--mit-teal);
}

.mit-security-section h2 {
	color: var(--mit-white);
}

.mit-security-section .section-header p {
	color: rgba(255,255,255,0.65);
}

.mit-security-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: var(--mit-space-2xl);
}

.mit-security-item {
	text-align: center;
}

.mit-security-item .mit-feature-icon {
	margin: 0 auto 1rem;
	background-color: rgba(27, 190, 201, 0.12);
}

.mit-security-item h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--mit-white);
	margin-bottom: 0.5rem;
}

.mit-security-item p {
	font-size: 0.9rem;
	color: rgba(255,255,255,0.6);
	line-height: 1.6;
	margin: 0;
}

.mit-security-note {
	text-align: center;
	margin-top: var(--mit-space-2xl);
	color: rgba(255,255,255,0.45);
	font-size: 0.9rem;
}

/* ==========================================================================
   Mission / Quote Section — teal background
   ========================================================================== */
.mit-mission-section {
	background-color: var(--mit-teal);
	padding: var(--mit-space-3xl) 0;
	text-align: center;
}

.mit-mission-section blockquote {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.875rem);
	font-weight: 700;
	color: var(--mit-white);
	line-height: 1.4;
	max-width: 860px;
	margin: 0 auto 1rem;
}

.mit-mission-label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
}

/* ==========================================================================
   CTA Banner — dark navy
   ========================================================================== */
.mit-cta-banner {
	background-color: #fff;
	padding: var(--mit-space-3xl) 0;
	text-align: center;
}

.mit-cta-banner h2 {
	color: #000;
	margin-bottom: 1rem;
}

.mit-cta-banner p {
	color: #000;
	font-size: 1.0625rem;
	max-width: 560px;
	margin: 0 auto 2rem;
}

/* ==========================================================================
   Footer — 4-column dark navy
   ========================================================================== */
.site-footer {
	background-color: var(--mit-navy);
	color: rgba(255, 255, 255, 0.65);
	padding: var(--mit-space-3xl) 0 0;
	margin-top: 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--mit-space-2xl);
	padding-bottom: var(--mit-space-2xl);
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand .footer-logo-text {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--mit-white);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	text-decoration: none;
}

.footer-brand .footer-logo-text .logo-tag { color: var(--mit-teal); }

.footer-brand .logo-icon {
	width: 22px;
	height: 22px;
	fill: var(--mit-teal);
}

.footer-tagline {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.55);
	margin: 0;
}

.footer-col-title {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mit-white);
	margin-bottom: 1.125rem;
}

.footer-col-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.footer-col-links a {
	color: rgba(255,255,255,0.6);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color var(--mit-transition);
}

.footer-col-links a:hover {
	color: var(--mit-teal);
	text-decoration: none;
}

.footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.footer-nav a {
	color: rgba(255,255,255,0.6);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color var(--mit-transition);
}

.footer-nav a:hover {
	color: var(--mit-teal);
	text-decoration: none;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.25rem 0;
	font-size: 0.875rem;
	color: rgba(255,255,255,0.4);
}

.footer-bottom a {
	color: rgba(255,255,255,0.5);
	text-decoration: none;
}

.footer-bottom a:hover {
	color: var(--mit-teal);
}

.footer-bottom-links {
	display: flex;
	gap: 1.25rem;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.mit-form-group {
	margin-bottom: var(--mit-space-lg);
}

.mit-form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--mit-space-xs);
	color: var(--mit-dark-gray);
}

.mit-form-group input[type="text"],
.mit-form-group input[type="email"],
.mit-form-group input[type="password"],
.mit-form-group input[type="tel"],
.mit-form-group input[type="date"],
.mit-form-group select,
.mit-form-group textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	font-family: var(--mit-font-sans);
	font-size: 1rem;
	color: var(--mit-dark-gray);
	background-color: var(--mit-white);
	border: 1px solid #cbd5e0;
	border-radius: var(--mit-radius);
	transition: border-color var(--mit-transition), box-shadow var(--mit-transition);
	min-height: 44px;
}

.mit-form-group input:focus,
.mit-form-group select:focus,
.mit-form-group textarea:focus {
	outline: none;
	border-color: var(--mit-teal);
	box-shadow: 0 0 0 3px rgba(27, 190, 201, 0.15);
}

.mit-form-error {
	color: var(--mit-danger);
	font-size: 0.875rem;
	margin-top: var(--mit-space-xs);
}

.mit-form-success {
	color: var(--mit-success);
	font-size: 0.875rem;
	margin-top: var(--mit-space-xs);
}

/* ==========================================================================
   Notices / Alerts
   ========================================================================== */
.mit-notice {
	padding: var(--mit-space-md) var(--mit-space-lg);
	border-left: 4px solid;
	border-radius: var(--mit-radius);
	margin-bottom: var(--mit-space-lg);
}

.mit-notice-error   { background: #fef2f2; border-color: var(--mit-danger);  color: #7f1d1d; }
.mit-notice-success { background: #f0fdf4; border-color: var(--mit-success); color: #14532d; }
.mit-notice-warning { background: #fffbeb; border-color: var(--mit-warning); color: #78350f; }
.mit-notice-info    { background: #eff6ff; border-color: #3b82f6;            color: #1e3a5f; }

/* ==========================================================================
   WooCommerce — global button overrides (match "Get My Tag" pill style)
   Covers both classic WC buttons AND block-based cart/checkout buttons.
   ========================================================================== */

/* --- Classic WC buttons --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce-page .button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	background-color: var(--mit-teal) !important;
	color: var(--mit-white) !important;
	border-radius: var(--mit-radius-pill) !important;
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	border: none !important;
	padding: 0.65rem 1.5rem !important;
	min-height: 44px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	transition: background-color var(--mit-transition) !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce-page .button:hover,
.woocommerce-page a.button:hover {
	background-color: var(--mit-teal-dark) !important;
	color: var(--mit-white) !important;
	text-decoration: none !important;
}

/* --- Block cart / checkout buttons (WC 6+) --- */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit .wc-block-components-button {
	background-color: var(--mit-teal) !important;
	color: var(--mit-white) !important;
	border-radius: var(--mit-radius-pill) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	border: none !important;
	min-height: 52px !important;
	padding: 0.85rem 2rem !important;
	width: 100% !important;
	cursor: pointer !important;
	transition: background-color var(--mit-transition) !important;
}

.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--mit-teal-dark) !important;
}

/* Block form inputs
   WC block checkout uses floating labels — the label sits inside the input
   and floats to the top when focused/filled. We MUST NOT override padding or
   min-height here because WC sets asymmetric top/bottom padding to make room
   for both the floating label and the typed value simultaneously.
   We only adjust visual properties: border, radius, color, font-size. */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-textarea textarea {
	border: 1px solid var(--mit-light-gray) !important;
	border-radius: var(--mit-radius) !important;
	font-size: 0.9375rem !important;
	color: var(--mit-text) !important;
	transition: border-color var(--mit-transition), box-shadow var(--mit-transition) !important;
}

/* Floating label — sits inside the input initially, floats up when filled/focused */
.wc-block-components-text-input label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
	font-size: 0.875rem !important;
	color: var(--mit-mid-gray) !important;
}

/* When label is in floating (active) position */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label,
.wc-block-components-country-input.is-active label,
.wc-block-components-state-input.is-active label {
	color: var(--mit-teal) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-country-input input:focus,
.wc-block-components-state-input input:focus {
	border-color: var(--mit-teal) !important;
	box-shadow: 0 0 0 3px rgba(27, 190, 201, 0.15) !important;
	outline: none !important;
}

/* Block section headings */
.wc-block-components-title,
.wc-block-checkout__step-title {
	color: var(--mit-navy) !important;
	font-weight: 700 !important;
}

/* Block order summary */
.wc-block-order-summary-item__quantity {
	background-color: var(--mit-teal) !important;
	border-radius: 50% !important;
}

/* Block totals */
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--mit-teal) !important;
	font-weight: 700 !important;
}

/* Block coupon input */
.wc-block-components-totals-coupon__button {
	background-color: transparent !important;
	color: var(--mit-teal) !important;
	border: 2px solid var(--mit-teal) !important;
	border-radius: var(--mit-radius-pill) !important;
	min-height: 40px !important;
	font-weight: 600 !important;
}

/* "Proceed to checkout" block button */
.wc-block-cart__submit-container .wc-block-cart__submit-button {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

/* ---- Add to Cart → View Cart swap on product cards ---- */

/* Once a product is added, hide the "Add to cart" button */
.woocommerce ul.products li.product .add_to_cart_button.added,
.woocommerce-page ul.products li.product .add_to_cart_button.added {
	display: none !important;
}

/* Style "View cart" link as a full-width navy pill button */
.woocommerce ul.products li.product .added_to_cart.wc-forward,
.woocommerce-page ul.products li.product .added_to_cart.wc-forward {
	display: block !important;
	width: calc(100% - 2.25rem) !important;
	margin: auto 1.125rem 1.125rem !important;
	background-color: var(--mit-navy) !important;
	color: var(--mit-white) !important;
	border-radius: var(--mit-radius-pill) !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	padding: 0.6rem 1.25rem !important;
	text-align: center !important;
	text-decoration: none !important;
	min-height: 40px !important;
	line-height: 1.6 !important;
	box-sizing: border-box !important;
	transition: background-color var(--mit-transition) !important;
}

.woocommerce ul.products li.product .added_to_cart.wc-forward:hover,
.woocommerce-page ul.products li.product .added_to_cart.wc-forward:hover {
	background-color: var(--mit-navy-mid) !important;
	text-decoration: none !important;
}

/* ---- WooCommerce notice / message bar ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--mit-radius-lg) !important;
	border: 1px solid var(--mit-teal) !important;
	border-top-width: 0 !important;
	background: var(--mit-white) !important;
	padding: 1rem 1.5rem !important;
	font-size: 0.9375rem !important;
	margin-bottom: var(--mit-space-lg) !important;
	display: flex !important;
	align-items: center !important;
	gap: 1rem !important;
	box-shadow: var(--mit-shadow-sm) !important;
}

.woocommerce-info {
	border-color: #3b82f6 !important;
}

.woocommerce-error {
	border-color: var(--mit-danger) !important;
}

/* "View cart" button inside the notice bar */
.woocommerce-message .button,
.woocommerce-message a.button {
	margin-left: auto !important;
	flex-shrink: 0 !important;
	background-color: var(--mit-teal) !important;
	padding: 0.5rem 1.25rem !important;
	font-size: 0.875rem !important;
	min-height: 38px !important;
}

/* Remove the ::before icon WC adds to messages — keep it clean */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none !important;
}

/* ==========================================================================
   WooCommerce — page layout wrapper
   ========================================================================== */
.mit-wc-page {
	padding: var(--mit-space-2xl) 0 var(--mit-space-3xl);
}

/* Shop page heading */
.woocommerce-products-header {
	margin-bottom: var(--mit-space-xl);
}

.woocommerce-products-header__title.page-title,
.woocommerce-page h1.page-title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--mit-navy);
	margin-bottom: 0.25rem;
}

/* Result count + ordering row */
.woocommerce-result-count {
	color: var(--mit-mid-gray);
	font-size: 0.9rem;
	margin-bottom: 0;
}

.woocommerce-ordering select {
	border: 1px solid var(--mit-light-gray);
	border-radius: var(--mit-radius);
	padding: 0.4rem 0.75rem;
	font-size: 0.9rem;
	color: var(--mit-text);
}

/* ==========================================================================
   WooCommerce — single product page (image left, details right)
   ========================================================================== */

/* Two-column layout matching WC defaults — explicitly spelled out so
   it works even without woocommerce-layout.css */
.woocommerce div.product {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--mit-space-2xl) !important;
	align-items: flex-start !important;
}

.woocommerce div.product div.woocommerce-product-gallery {
	flex: 0 0 48% !important;
	max-width: 48% !important;
	float: none !important;
	width: auto !important;
}

.woocommerce div.product div.summary.entry-summary {
	flex: 0 0 calc(52% - var(--mit-space-2xl)) !important;
	max-width: calc(52% - var(--mit-space-2xl)) !important;
	float: none !important;
	width: auto !important;
	clear: none !important;
}

/* Product gallery images */
.woocommerce div.product div.woocommerce-product-gallery img {
	border-radius: var(--mit-radius-lg);
	border: 1px solid var(--mit-light-gray);
}

/* Product title */
.woocommerce div.product h1.product_title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--mit-navy);
	margin-bottom: 0.5rem;
}

/* Product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--mit-teal) !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	margin-bottom: 1rem;
}

/* Product short description */
.woocommerce div.product div.woocommerce-product-details__short-description {
	color: var(--mit-mid-gray);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

/* Add to cart button */
.woocommerce div.product .cart .single_add_to_cart_button {
	background-color: var(--mit-teal) !important;
	border-radius: var(--mit-radius-pill) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	padding: 0.875rem 2.5rem !important;
	min-height: 52px;
}

.woocommerce div.product .cart .single_add_to_cart_button:hover {
	background-color: var(--mit-teal-dark) !important;
}

/* Quantity input */
.woocommerce div.product form.cart .qty {
	border: 1px solid var(--mit-light-gray) !important;
	border-radius: var(--mit-radius) !important;
	height: 48px;
	width: 70px;
	font-size: 1rem;
	text-align: center;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs {
	flex: 0 0 100%;
	margin-top: var(--mit-space-xl);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 2px solid var(--mit-light-gray);
	padding: 0;
	margin: 0 0 var(--mit-space-lg);
	list-style: none;
	display: flex;
	gap: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: none;
	background: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.75rem 1.25rem;
	color: var(--mit-mid-gray);
	font-weight: 600;
	font-size: 0.9375rem;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color var(--mit-transition), border-color var(--mit-transition);
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--mit-teal);
	border-bottom-color: var(--mit-teal);
}

.woocommerce div.product .woocommerce-tabs .panel {
	padding: var(--mit-space-lg) 0;
}

/* ==========================================================================
   WooCommerce — cart page
   ========================================================================== */
.woocommerce-cart .woocommerce {
	font-size: 0.9375rem;
}

/* Cart table */
.woocommerce-cart table.cart {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	overflow: hidden;
	font-size: 0.9375rem;
}

.woocommerce-cart table.cart thead th {
	background: var(--mit-off-white);
	color: var(--mit-navy);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--mit-light-gray);
	text-align: left;
}

.woocommerce-cart table.cart td {
	padding: 1rem;
	border-bottom: 1px solid var(--mit-off-white);
	vertical-align: middle;
	color: var(--mit-text);
	font-size: 0.9375rem;
}

.woocommerce-cart table.cart .product-name a {
	color: var(--mit-navy);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}

.woocommerce-cart table.cart .product-name a:hover {
	color: var(--mit-teal);
}

.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
	color: var(--mit-teal);
	font-weight: 700;
	font-size: 0.9375rem;
}

/* Remove item link */
.woocommerce-cart table.cart .product-remove a {
	color: var(--mit-mid-gray) !important;
	font-size: 1.25rem;
	line-height: 1;
	transition: color var(--mit-transition);
}

.woocommerce-cart table.cart .product-remove a:hover {
	color: var(--mit-danger) !important;
}

/* Quantity in cart */
.woocommerce-cart table.cart .qty {
	width: 64px !important;
	border: 1px solid var(--mit-light-gray) !important;
	border-radius: var(--mit-radius) !important;
	padding: 0.4rem 0.5rem !important;
	text-align: center !important;
	font-size: 0.9375rem !important;
}

/* Cart totals box */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals {
	width: 100% !important;
	float: none !important;
}

.cart_totals {
	background: var(--mit-white);
	border: 1px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	padding: 1.5rem;
}

.cart_totals h2 {
	font-size: 1.125rem;
	color: var(--mit-navy);
	margin-bottom: 1rem;
	padding-bottom: 0.625rem;
	border-bottom: 2px solid var(--mit-light-gray);
}

.cart_totals table {
	width: 100%;
	font-size: 0.9375rem;
}

.cart_totals table th {
	color: var(--mit-mid-gray);
	font-weight: 600;
	padding: 0.5rem 0;
	text-align: left;
	width: 40%;
}

.cart_totals table td {
	color: var(--mit-navy);
	font-weight: 600;
	padding: 0.5rem 0;
	text-align: right;
}

.cart_totals .order-total td,
.cart_totals .order-total th {
	color: var(--mit-navy);
	font-size: 1.125rem;
	font-weight: 700;
	border-top: 1px solid var(--mit-light-gray);
	padding-top: 0.875rem;
}

/* Checkout button from cart */
.wc-proceed-to-checkout .checkout-button,
.woocommerce a.checkout-button {
	width: 100% !important;
	font-size: 1rem !important;
	padding: 0.875rem 2rem !important;
	min-height: 52px !important;
	display: flex !important;
	justify-content: center !important;
	margin-top: 1rem !important;
}

/* Update cart button */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	background-color: transparent !important;
	color: var(--mit-teal) !important;
	border: 2px solid var(--mit-teal) !important;
	font-size: 0.875rem !important;
	padding: 0.5rem 1.25rem !important;
	min-height: 40px !important;
}

.woocommerce button[name="update_cart"]:hover {
	background-color: var(--mit-teal) !important;
	color: var(--mit-white) !important;
}

/* ==========================================================================
   WooCommerce — checkout page
   ========================================================================== */
.woocommerce-checkout .woocommerce {
	font-size: 0.9375rem;
}

/* Two-column layout for billing + order review — NOT on the order-received page */
body:not(.mit-is-order-received):not(.woocommerce-order-received) .woocommerce-checkout .woocommerce {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mit-space-xl);
	align-items: start;
}

body:not(.mit-is-order-received):not(.woocommerce-order-received) .woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper,
body:not(.mit-is-order-received):not(.woocommerce-order-received) .woocommerce-checkout .woocommerce > .woocommerce-form-coupon-toggle {
	grid-column: 1 / -1;
}

/* Checkout section headings */
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
	font-size: 1.125rem !important;
	color: var(--mit-navy) !important;
	font-weight: 700 !important;
	margin-bottom: 1.125rem !important;
	padding-bottom: 0.625rem !important;
	border-bottom: 2px solid var(--mit-light-gray) !important;
}

/* Form field labels */
.woocommerce form .form-row label {
	color: var(--mit-text);
	font-weight: 600;
	font-size: 0.875rem;
	margin-bottom: 0.375rem;
	display: block;
}

/* Form inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .input-text {
	border-radius: var(--mit-radius) !important;
	border: 1px solid var(--mit-light-gray) !important;
	padding: 0.6rem 0.875rem !important;
	font-size: 0.9375rem !important;
	min-height: 44px !important;
	width: 100% !important;
	color: var(--mit-text) !important;
	transition: border-color var(--mit-transition), box-shadow var(--mit-transition) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--mit-teal) !important;
	box-shadow: 0 0 0 3px rgba(27, 190, 201, 0.15) !important;
	outline: none !important;
}

/* Order review table */
.woocommerce-checkout #order_review .shop_table {
	width: 100%;
	border: 1px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	overflow: hidden;
	margin-bottom: 1.5rem;
	font-size: 0.9375rem;
}

.woocommerce-checkout #order_review .shop_table th {
	background: var(--mit-off-white);
	color: var(--mit-navy);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--mit-light-gray);
}

.woocommerce-checkout #order_review .shop_table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--mit-off-white);
	vertical-align: middle;
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	font-size: 1rem;
	font-weight: 700;
	color: var(--mit-navy);
}

.woocommerce-checkout #order_review .order-total td {
	color: var(--mit-teal);
}

/* Payment box */
.woocommerce-checkout #payment {
	background: var(--mit-off-white) !important;
	border-radius: var(--mit-radius-lg) !important;
	border: 1px solid var(--mit-light-gray) !important;
	padding: 1.5rem !important;
}

.woocommerce-checkout #payment .payment_methods {
	border-bottom: 1px solid var(--mit-light-gray) !important;
	margin-bottom: 1.25rem !important;
	padding-bottom: 1.25rem !important;
	list-style: none !important;
	padding-left: 0 !important;
}

.woocommerce-checkout #payment .payment_methods li label {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--mit-navy);
}

/* Place order button */
#place_order {
	background-color: var(--mit-teal) !important;
	border-radius: var(--mit-radius-pill) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	padding: 0.95rem 2rem !important;
	width: 100% !important;
	min-height: 52px !important;
	letter-spacing: 0.01em !important;
	color: var(--mit-white) !important;
	border: none !important;
	cursor: pointer !important;
	transition: background-color var(--mit-transition) !important;
}

#place_order:hover {
	background-color: var(--mit-teal-dark) !important;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

*:focus-visible {
	outline: 3px solid var(--mit-teal);
	outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media ( max-width: 1200px ) {
	/* Shop: 4 → 3 columns */
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media ( max-width: 1024px ) {
	.mit-hero .mit-container {
		grid-template-columns: 1fr;
		gap: var(--mit-space-2xl);
	}

	.mit-hero-image {
		max-width: 560px;
		margin: 0 auto;
	}

	.mit-hero-subtext { max-width: 100%; }

	.mit-feature-grid { grid-template-columns: repeat(2, 1fr); }

	.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--mit-space-xl); }

	/* Single product: stack on tablet */
	.woocommerce div.product div.woocommerce-product-gallery,
	.woocommerce div.product div.summary.entry-summary {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

@media ( max-width: 768px ) {
	.mit-container { padding-left: 1rem; padding-right: 1rem; }

	.primary-nav { display: none; }

	/* Logo stays left; push icon cluster to the far right */
	.site-header .mit-container {
		justify-content: space-between;
	}
	.header-right { margin-left: auto; }

	.primary-nav.is-open {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--mit-white);
		box-shadow: var(--mit-shadow-md);
		z-index: 999;
	}
	.primary-nav.is-open ul {
		flex-direction: column;
		width: 100%;
		padding: 1rem;
		gap: 0.25rem;
	}
	.primary-nav.is-open ul li { width: 100%; }
	.primary-nav.is-open ul a { display: block; padding: 0.625rem 0; }

	.mit-mobile-menu-toggle { display: flex; }

	.mit-hero { padding: 3rem 0; }
	.mit-hero .mit-container { grid-template-columns: 1fr; }
	.mit-hero-headline { font-size: 2.25rem; }

	.mit-steps { grid-template-columns: 1fr; }
	.mit-steps::before,
	.mit-step:not(:last-child)::after { display: none; }

	.mit-feature-grid { grid-template-columns: 1fr; }
	.mit-security-grid { grid-template-columns: 1fr; }

	/* Shop: 3 → 2 columns on mobile */
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Homepage featured: 3 → 2 */
	.mit-featured-products .woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.footer-grid { grid-template-columns: 1fr; }

	.footer-bottom {
		flex-direction: column;
		gap: 0.75rem;
		text-align: center;
	}

	/* Checkout: stack columns */
	.woocommerce-billing-fields,
	.woocommerce-shipping-fields { width: 100% !important; float: none !important; }
}

@media ( max-width: 480px ) {
	/* Shop: 2 → 1 column on small phones */
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.mit-featured-products .woocommerce ul.products {
		grid-template-columns: 1fr !important;
	}

	.mit-hero-actions { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Inner Page Sections — About, Contact, FAQ, How It Works
   ========================================================================== */

/* ── Inner Hero ─────────────────────────────────────────────────────────── */
.mit-inner-hero {
	padding: 5rem 0 4rem;
	text-align: center;
}

.mit-inner-hero--dark {
	background-color: var(--mit-navy);
	color: var(--mit-white);
}

.mit-inner-hero--dark h1           { color: var(--mit-white); }
.mit-inner-hero--dark .section-overline { color: var(--mit-teal); }

.mit-inner-hero--light {
	background-color: var(--mit-off-white);
	color: var(--mit-navy);
}

.mit-inner-hero--light h1 { color: var(--mit-navy); }

.mit-inner-hero h1 {
	font-size: clamp( 2rem, 4vw, 3rem );
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

.mit-inner-hero__sub {
	max-width: 700px;
	margin: 0 auto;
	font-size: 1.125rem;
	line-height: 1.7;
	opacity: 0.85;
}

/* ── Stats Bar ───────────────────────────────────────────────────────────── */
.mit-stats-bar {
	background-color: var(--mit-teal);
	padding: 2.5rem 0;
}

.mit-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mit-space-xl);
	text-align: center;
}

.mit-stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	color: var(--mit-white);
}

.mit-stat-value {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.mit-stat-label {
	font-size: 0.875rem;
	font-weight: 500;
	opacity: 0.9;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── About Sections ──────────────────────────────────────────────────────── */
.mit-about-section        { padding: var(--mit-space-3xl) 0; }
.mit-about-section--alt   { background-color: var(--mit-off-white); }

.mit-about-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mit-space-3xl);
	align-items: center;
}

.mit-about-split--flip .mit-about-split__image { order: -1; }

.mit-about-split__text .section-overline { display: block; margin-bottom: 0.75rem; }

.mit-about-split__text h2 {
	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	color: var(--mit-navy);
	margin-bottom: 1.25rem;
}

.mit-about-split__image img {
	width: 100%;
	border-radius: var(--mit-radius-lg);
	display: block;
}

.mit-image-placeholder {
	background-color: var(--mit-off-white);
	border-radius: var(--mit-radius-lg);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mit-mid-gray);
	border: 2px dashed var(--mit-light-gray);
}

/* ── Prose (rich text content) ───────────────────────────────────────────── */
.mit-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--mit-dark-gray);
}

.mit-prose p               { margin-bottom: 1em; }
.mit-prose p:last-child    { margin-bottom: 0; }
.mit-prose ul, .mit-prose ol { padding-left: 1.5rem; margin-bottom: 1em; }
.mit-prose li              { margin-bottom: 0.4em; }
.mit-prose strong          { color: var(--mit-navy); font-weight: 600; }
.mit-prose a               { color: var(--mit-teal); }
.mit-prose a:hover         { color: var(--mit-teal-dark); }
.mit-prose h3              { font-size: 1.1rem; font-weight: 700; color: var(--mit-navy); margin: 1.25em 0 0.5em; }

/* ── About Values ────────────────────────────────────────────────────────── */
.mit-about-values { padding: var(--mit-space-3xl) 0; background-color: var(--mit-navy); }

.mit-about-values .section-header          { text-align: center; margin-bottom: var(--mit-space-2xl); }
.mit-about-values .section-header h2       { color: var(--mit-white); }
.mit-about-values .section-overline        { color: var(--mit-teal); }
.mit-about-values .mit-feature-card        { background-color: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.mit-about-values .mit-feature-card h3     { color: var(--mit-white); }
.mit-about-values .mit-feature-card p      { color: rgba(255,255,255,0.75); }
.mit-about-values .mit-feature-icon        { background-color: rgba(27,190,201,0.15); color: var(--mit-teal); }

/* ── Contact Page ────────────────────────────────────────────────────────── */
.mit-contact-section {
	padding: var(--mit-space-3xl) 0;
	background-color: var(--mit-white);
}

.mit-contact-grid {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: var(--mit-space-3xl);
	align-items: start;
}

.mit-contact-form-wrap h2,
.mit-contact-info-wrap h2 {
	font-size: 1.75rem;
	color: var(--mit-navy);
	margin-bottom: 0.5rem;
}

.mit-contact-form-sub {
	color: var(--mit-mid-gray);
	margin-bottom: 1.75rem;
}

/* Form layout helpers */
.mit-form-row          { display: flex; flex-direction: column; gap: var(--mit-space-md); }
.mit-form-row--2col    { flex-direction: row; }
.mit-form-row--2col .mit-form-group { flex: 1; }

.mit-form-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: var(--mit-space-md);
}

.mit-form-group label   { font-size: 0.9rem; font-weight: 600; color: var(--mit-navy); }
.mit-form-group .required { color: var(--mit-teal); }

/* Form inputs */
.mit-input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--mit-light-gray);
	border-radius: var(--mit-radius);
	font-size: 0.9375rem;
	font-family: inherit;
	color: var(--mit-navy);
	background-color: var(--mit-white);
	transition: border-color var(--mit-transition), box-shadow var(--mit-transition);
	appearance: none;
	-webkit-appearance: none;
}

.mit-input:focus {
	outline: none;
	border-color: var(--mit-teal);
	box-shadow: 0 0 0 3px rgba(27,190,201,0.15);
}

.mit-input::placeholder { color: var(--mit-mid-gray); }

textarea.mit-input { resize: vertical; min-height: 150px; }

select.mit-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230d2240' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	padding-right: 2.5rem;
	cursor: pointer;
}

/* Form feedback banner */
.mit-form-message {
	padding: 0.875rem 1rem;
	border-radius: var(--mit-radius);
	font-size: 0.9375rem;
	margin-bottom: 1.25rem;
	display: none;
}

.mit-form-message.is-success {
	display: block;
	background-color: #ecfdf5;
	border: 1.5px solid #6ee7b7;
	color: #065f46;
}

.mit-form-message.is-error {
	display: block;
	background-color: #fef2f2;
	border: 1.5px solid #fca5a5;
	color: #991b1b;
}

.mit-contact-submit {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.mit-contact-submit svg { flex-shrink: 0; }

/* Contact info cards */
.mit-contact-info-wrap h2 { margin-bottom: 1.5rem; }

.mit-contact-info-cards {
	display: flex;
	flex-direction: column;
	gap: var(--mit-space-md);
	margin-bottom: var(--mit-space-xl);
}

.mit-contact-info-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem;
	background-color: var(--mit-off-white);
	border-radius: var(--mit-radius-lg);
	border: 1px solid var(--mit-light-gray);
}

.mit-contact-info-card .mit-feature-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--mit-teal);
	color: var(--mit-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mit-contact-info-card .mit-feature-icon svg {
	color: var(--mit-white);
	stroke: var(--mit-white);
}

.mit-contact-info-card strong {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mit-mid-gray);
	margin-bottom: 0.2rem;
}

.mit-contact-info-card a,
.mit-contact-info-card span,
.mit-contact-info-card address {
	font-size: 0.9375rem;
	color: var(--mit-navy);
	font-style: normal;
	line-height: 1.5;
}

.mit-contact-info-card a:hover { color: var(--mit-teal); }

/* FAQ CTA card within contact page */
.mit-contact-faq-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, var(--mit-navy) 0%, var(--mit-navy-mid) 100%);
	border-radius: var(--mit-radius-lg);
	color: var(--mit-white);
}

.mit-contact-faq-card svg           { flex-shrink: 0; color: var(--mit-teal); margin-top: 0.125rem; }
.mit-contact-faq-card strong        { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 0.375rem; color: var(--mit-white); }
.mit-contact-faq-card p             { font-size: 0.9rem; opacity: 0.8; margin-bottom: 1rem; line-height: 1.5; }

/* Outline-teal button variant */
.mit-btn-outline-teal {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	border-radius: var(--mit-radius-pill);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var(--mit-teal);
	color: var(--mit-teal);
	background-color: transparent;
	transition: background-color var(--mit-transition), color var(--mit-transition);
	cursor: pointer;
}

.mit-btn-outline-teal:hover {
	background-color: var(--mit-teal);
	color: var(--mit-white);
	text-decoration: none;
}

/* ── FAQ Page ────────────────────────────────────────────────────────────── */
.mit-faq-section {
	padding: var(--mit-space-3xl) 0;
	background-color: var(--mit-white);
}

.mit-faq-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--mit-space-3xl);
	align-items: start;
}

/* Sticky sidebar nav */
.mit-faq-nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	position: sticky;
	top: calc( var(--mit-header-h, 70px) + 1.5rem );
}

.mit-faq-nav__link {
	display: block;
	padding: 0.625rem 1rem;
	border-radius: var(--mit-radius);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--mit-mid-gray);
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background-color var(--mit-transition), color var(--mit-transition);
}

.mit-faq-nav__link:hover,
.mit-faq-nav__link.is-active {
	background-color: rgba(27,190,201,0.08);
	color: var(--mit-teal);
	border-left-color: var(--mit-teal);
	text-decoration: none;
}

/* FAQ content area */
.mit-faq-groups { display: flex; flex-direction: column; gap: var(--mit-space-3xl); }

.mit-faq-group__title {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--mit-navy);
	margin-bottom: var(--mit-space-lg);
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--mit-light-gray);
}

.mit-faq-list { display: flex; flex-direction: column; }

/* Accordion item */
.mit-faq-item { border-bottom: 1px solid var(--mit-light-gray); }
.mit-faq-item:first-child { border-top: 1px solid var(--mit-light-gray); }

.mit-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.125rem 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	color: var(--mit-navy);
	gap: 1rem;
	transition: color var(--mit-transition);
}

.mit-faq-question:hover,
.mit-faq-question[aria-expanded="true"] { color: var(--mit-teal); }

.mit-faq-chevron {
	flex-shrink: 0;
	color: var(--mit-teal);
	transition: transform 0.25s ease;
}

.mit-faq-question[aria-expanded="true"] .mit-faq-chevron { transform: rotate(180deg); }

/* Smooth height transition — JS removes [hidden] and toggles .is-open */
.mit-faq-answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

.mit-faq-answer.is-open { max-height: 1000px; }

.mit-faq-answer__inner { padding: 0 0 1.25rem; }

/* ── How It Works — Detailed alternating sections ────────────────────────── */
.mit-hiw-detail {
	padding: var(--mit-space-3xl) 0;
	border-bottom: 1px solid var(--mit-light-gray);
}

.mit-hiw-detail:nth-child(even) { background-color: var(--mit-off-white); }

.mit-hiw-detail__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mit-space-3xl);
	align-items: center;
}

.mit-hiw-detail--flip .mit-hiw-detail__image { order: -1; }

.mit-hiw-detail__text .section-overline { display: block; margin-bottom: 0.75rem; }

.mit-hiw-detail__text h2 {
	font-size: clamp( 1.5rem, 2.5vw, 2rem );
	color: var(--mit-navy);
	margin-bottom: 1.25rem;
}

.mit-hiw-detail__image img {
	width: 100%;
	border-radius: var(--mit-radius-lg);
	display: block;
	box-shadow: var(--mit-shadow-lg);
}

/* ── Responsive — inner pages ────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
	.mit-contact-grid  { grid-template-columns: 1fr; }

	.mit-faq-layout    { grid-template-columns: 1fr; }

	.mit-faq-nav {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.375rem;
	}

	.mit-faq-nav__link {
		border-left: none;
		border-bottom: 2px solid transparent;
		padding: 0.5rem 0.875rem;
	}

	.mit-faq-nav__link:hover,
	.mit-faq-nav__link.is-active {
		border-left-color: transparent;
		border-bottom-color: var(--mit-teal);
	}
}

@media ( max-width: 768px ) {
	.mit-inner-hero         { padding: 3rem 0 2.5rem; }
	.mit-stats-grid         { grid-template-columns: repeat(2, 1fr); }
	.mit-about-split        { grid-template-columns: 1fr; }
	.mit-hiw-detail__inner  { grid-template-columns: 1fr; }
	.mit-about-split--flip .mit-about-split__image { order: 0; }
	.mit-hiw-detail--flip .mit-hiw-detail__image   { order: 0; }
	.mit-form-row--2col     { flex-direction: column; }
	.mit-contact-info-cards { gap: 0.75rem; }
}

@media ( max-width: 480px ) {
	.mit-stats-grid   { gap: 1rem; }
	.mit-stat-value   { font-size: 1.75rem; }
	.mit-inner-hero h1 { font-size: 1.875rem; }
}

/* ==========================================================================
   Order Received / Thank You page
   ========================================================================== */

/* =========================================================================
   ORDER RECEIVED / THANK-YOU PAGE
   Full-width layout — no floated columns, no black-right-side artefacts.
   All WooCommerce float-based column styles are explicitly neutralised.
   ========================================================================= */

/* ── Hard-reset WooCommerce float-column system on the order page ────────── */
.woocommerce-order .col2-set,
.woocommerce-order .col2-set::before,
.woocommerce-order .col2-set::after,
.woocommerce-order .col-1,
.woocommerce-order .col-2,
.woocommerce-order .woocommerce-columns,
.woocommerce-order .woocommerce-columns::before,
.woocommerce-order .woocommerce-columns::after,
.woocommerce-order .woocommerce-column {
	float:      none !important;
	width:      auto !important;
	background: transparent !important;
	clear:      none !important;
}

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.mit-order-received {
	padding: 3rem 0 5rem;
	width: 100%;
	box-sizing: border-box;
}

.mit-order-received > * {
	width: 100%;
	box-sizing: border-box;
}

/* ── Success / failed / info banner ─────────────────────────────────────── */
.mit-order-banner {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 2rem 2.5rem;
	border-radius: var(--mit-radius-lg);
	margin-bottom: 2.5rem;
	width: 100%;
	box-sizing: border-box;
}

.mit-order-banner--success {
	background: linear-gradient(135deg, #0d4a3a 0%, #0a6b52 100%);
	color: var(--mit-white);
}

.mit-order-banner--failed {
	background: linear-gradient(135deg, #4a0d0d 0%, #7a1a1a 100%);
	color: var(--mit-white);
}

.mit-order-banner--info {
	background: linear-gradient(135deg, var(--mit-navy) 0%, var(--mit-navy-mid) 100%);
	color: var(--mit-white);
}

.mit-order-banner__icon {
	flex-shrink: 0;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.25rem;
}

.mit-order-banner--success .mit-order-banner__icon { color: #6ee7b7; }
.mit-order-banner--failed  .mit-order-banner__icon { color: #fca5a5; }
.mit-order-banner--info    .mit-order-banner__icon { color: var(--mit-teal); }

.mit-order-banner__text h1,
.mit-order-banner h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	color: var(--mit-white);
	margin-bottom: 0.5rem;
}

.mit-order-banner__text p,
.mit-order-banner p {
	font-size: 1rem;
	line-height: 1.65;
	opacity: 0.9;
	margin-bottom: 0;
}

.mit-order-banner__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 1.25rem;
}

/* ── Order meta overview (order number / date / email / total) ───────────── */
.mit-order-meta {
	display: grid;
	/*
	 * 5 explicit columns: Order No. | Date | Email (wider) | Total | Payment
	 * Email gets 1fr so it can expand to fit long addresses; others are auto.
	 */
	grid-template-columns: auto auto 1fr auto auto;
	gap: 0 !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 2.5rem !important;
	background: var(--mit-white);
	border: 1.5px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

/*
 * WooCommerce adds clearfix ::before / ::after (content:" "; display:table)
 * to ul.order_details. Inside a grid those become unwanted grid items that
 * render as a visible coloured box. Hide them unconditionally.
 */
.mit-order-meta::before,
.mit-order-meta::after {
	display: none !important;
}

.mit-order-meta li {
	display: flex !important;
	flex-direction: column !important;
	padding: 1.25rem 1.5rem !important;
	border-right: 1px solid var(--mit-light-gray) !important;
	border-bottom: none !important;
	float: none !important;
	width: auto !important;
	background: transparent !important;
}

.mit-order-meta li:last-child { border-right: none !important; }

.mit-order-meta__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--mit-mid-gray);
	margin-bottom: 0.35rem;
}

.mit-order-meta li strong {
	font-size: 1rem;
	font-weight: 700;
	color: var(--mit-navy);
}

.mit-order-total { color: var(--mit-teal) !important; font-size: 1.125rem !important; }

/* ── Order details section ───────────────────────────────────────────────── */
.woocommerce-order-details,
.woocommerce-customer-details {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 2.5rem;
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.mit-section-heading {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--mit-navy);
	margin-bottom: 1rem;
	padding-bottom: 0.625rem;
	border-bottom: 2px solid var(--mit-light-gray);
}

/* Order table */
.woocommerce-table.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	border: 1.5px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	overflow: hidden;
}

.woocommerce-table--order-details thead th {
	background-color: var(--mit-navy);
	color: var(--mit-white);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.875rem 1.25rem;
	text-align: left;
}

.woocommerce-table--order-details tbody tr:nth-child(even) {
	background-color: var(--mit-off-white);
}

.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot td,
.woocommerce-table--order-details tfoot th {
	padding: 0.875rem 1.25rem;
	border-bottom: 1px solid var(--mit-light-gray);
	font-size: 0.9375rem;
	color: var(--mit-text);
	vertical-align: middle;
}

.woocommerce-table--order-details tbody tr:last-child td { border-bottom: none; }

.woocommerce-table--order-details tbody .product-name a {
	color: var(--mit-teal);
	font-weight: 600;
}

.woocommerce-table--order-details tbody .product-name a:hover {
	color: var(--mit-teal-dark);
}

.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-table--order-details tfoot tr:last-child th {
	font-weight: 800;
	font-size: 1rem;
	color: var(--mit-navy);
	border-bottom: none;
	background-color: var(--mit-off-white);
}

/* ── Payment instructions ────────────────────────────────────────────────── */
.woocommerce-thankyou-order-details + p,
.woocommerce-order > p {
	background-color: rgba(27,190,201,0.08);
	border-left: 4px solid var(--mit-teal);
	padding: 0.875rem 1.25rem;
	border-radius: 0 var(--mit-radius) var(--mit-radius) 0;
	color: var(--mit-navy);
	font-size: 0.9375rem;
	margin-bottom: 2rem;
	width: 100%;
	box-sizing: border-box;
}

/* ── Customer address cards (themed override template) ───────────────────── */
.mit-customer-details {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.mit-address-grid {
	display: grid;
	gap: 1.5rem;
	width: 100%;
	box-sizing: border-box;
	margin-top: 1.25rem;
}

.mit-address-grid--two-col { grid-template-columns: 1fr 1fr; }
.mit-address-grid--one-col { grid-template-columns: 1fr; }

.mit-address-card {
	background-color: var(--mit-off-white);
	border: 1.5px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	overflow: hidden;
}

.mit-address-card__header {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1.25rem;
	background-color: var(--mit-white);
	border-bottom: 1.5px solid var(--mit-light-gray);
}

.mit-address-card__header svg {
	color: var(--mit-teal);
	flex-shrink: 0;
}

.mit-address-card__header h3 {
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--mit-navy);
	margin: 0;
}

.mit-address-card__body {
	display: block;
	padding: 1.25rem 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--mit-text);
	font-style: normal;
}

.mit-address-card__phone,
.mit-address-card__email {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
	margin-bottom: 0;
	font-size: 0.875rem;
	color: var(--mit-mid-gray);
}

.mit-address-card__phone svg,
.mit-address-card__email svg {
	flex-shrink: 0;
	color: var(--mit-teal);
}

/* Legacy fallback — in case WC renders its own columns markup */
.woocommerce-order .woocommerce-columns--addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	width: 100% !important;
	box-sizing: border-box;
}

.woocommerce-order .woocommerce-column address {
	display: block;
	background-color: var(--mit-off-white) !important;
	border: 1.5px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	padding: 1.25rem 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--mit-text) !important;
	font-style: normal;
	width: auto !important;
	float: none !important;
}

.woocommerce-order .woocommerce-column__title {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mit-navy);
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1.5px solid var(--mit-light-gray);
}

/* ── Isolation wrapper for woocommerce_thankyou hook output ──────────────── */
/*    Prevents any internal float from leaking outside the wrapper.          */
.mit-order-details-wrap {
	display: flow-root; /* Modern clearfix — contains floated descendants */
	width: 100%;
	box-sizing: border-box;
}

/* ── WooCommerce Block Checkout sidebar-layout override ──────────────────── */
/*    Block checkout wraps all checkout/order pages in a two-column flex     */
/*    layout: .wc-block-components-main (65%) + .wc-block-checkout__sidebar  */
/*    (35%). On the order-received page the sidebar is empty, so we force    */
/*    everything to single-column full-width using the body class we inject. */
body.mit-is-order-received .wc-block-components-sidebar-layout,
body.mit-is-order-received .wp-block-woocommerce-checkout,
body.woocommerce-order-received .wc-block-components-sidebar-layout,
body.woocommerce-order-received .wp-block-woocommerce-checkout {
	display: block !important;
	width: 100% !important;
}

body.mit-is-order-received .wc-block-components-sidebar-layout .wc-block-components-main,
body.mit-is-order-received .wc-block-checkout__main,
body.mit-is-order-received .wp-block-woocommerce-checkout-fields-block,
body.woocommerce-order-received .wc-block-components-sidebar-layout .wc-block-components-main,
body.woocommerce-order-received .wc-block-checkout__main,
body.woocommerce-order-received .wp-block-woocommerce-checkout-fields-block {
	width: 100% !important;
	max-width: 100% !important;
	padding-right: 0 !important;
	float: none !important;
	box-sizing: border-box !important;
}

body.mit-is-order-received .wc-block-checkout__sidebar,
body.mit-is-order-received .wp-block-woocommerce-checkout-totals-block,
body.woocommerce-order-received .wc-block-checkout__sidebar,
body.woocommerce-order-received .wp-block-woocommerce-checkout-totals-block {
	display: none !important;
}

/* ── Continue shopping / account actions ─────────────────────────────────── */
.mit-order-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--mit-light-gray);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.mit-order-banner                         { flex-direction: column; padding: 1.5rem; }
	.mit-order-banner__icon                   { width: 52px; height: 52px; }
	.mit-order-meta                           { grid-template-columns: repeat(2, 1fr); }
	.mit-order-meta li                        { border-right: none !important; border-bottom: 1px solid var(--mit-light-gray) !important; }
	.mit-address-grid--two-col                { grid-template-columns: 1fr; }
	.woocommerce-order .woocommerce-columns--addresses { grid-template-columns: 1fr !important; }
	.mit-order-actions                        { flex-direction: column; }
}

@media ( max-width: 480px ) {
	.mit-order-meta { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   MY ACCOUNT PAGE
   ========================================================================== */

/* ── Left navigation ─────────────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
	background: var(--mit-white);
	border: 1.5px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	overflow: hidden;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
	border-bottom: 1px solid var(--mit-light-gray);
}

.woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.25rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--mit-navy);
	text-decoration: none;
	transition: background var(--mit-transition), color var(--mit-transition);
}

.woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--mit-teal-bg);
	color: var(--mit-teal-dark);
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
	background: var(--mit-teal);
	color: var(--mit-white);
	font-weight: 600;
}

.woocommerce-MyAccount-navigation ul li.is-active a:hover,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a:hover {
	background: var(--mit-teal-dark);
	color: var(--mit-white);
}

/* Log out — subtle red tint */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--mit-danger);
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: rgba(192, 57, 43, 0.08);
	color: var(--mit-danger);
}

/* ── Content area ────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content {
	background: var(--mit-white);
	border: 1.5px solid var(--mit-light-gray);
	border-radius: var(--mit-radius-lg);
	padding: var(--mit-space-xl);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	color: var(--mit-navy);
	margin-top: 0;
}

/* ── Select fields — match input height across all account/profile forms ── */
/* NOTE: .woocommerce-Input is applied to ALL inputs by WooCommerce, so we   */
/* scope it to select.woocommerce-Input to avoid leaking the chevron icon    */
/* onto text/email/password inputs (login, reset-password, etc.).            */
.woocommerce-account select,
.woocommerce-account .mit-input[type="select"],
.woocommerce-account select.mit-input,
.woocommerce-account select.woocommerce-Input,
.woocommerce-account form select,
.woocommerce-account .form-row select,
.woocommerce-account .mit-form-group select {
	height: auto !important;
	min-height: 0 !important;
	padding: 0.75rem 2.5rem 0.75rem 1rem !important;
	border: 1.5px solid var(--mit-light-gray) !important;
	border-radius: var(--mit-radius) !important;
	font-size: 0.9375rem !important;
	font-family: inherit !important;
	color: var(--mit-navy) !important;
	background-color: var(--mit-white) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230d2240' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.875rem center !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	line-height: 1.5 !important;
	cursor: pointer;
	width: 100% !important;
}

.woocommerce-account select:focus,
.woocommerce-account .mit-form-group select:focus,
.woocommerce-account form select:focus {
	outline: none !important;
	border-color: var(--mit-teal) !important;
	box-shadow: 0 0 0 3px rgba(27,190,201,0.15) !important;
}

/* ── Login page — narrow to match register page (520 px) ─────────────────── */
/* Applies only when the user is NOT logged in (login form visible). */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 520px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Keep the login form's col2-set (login + WC register columns) full-width
   inside the already-constrained wrapper. */
.woocommerce-account:not(.logged-in) .woocommerce .col2-set {
	width: 100%;
}

/* ── My Account page — center the page heading (logged in & logged out) ──── */
/* Covers theme-rendered headings (entry-title / page-title). */
.woocommerce-account .entry-title,
.woocommerce-account h1.page-title,
.woocommerce-account .page-title {
	text-align: center;
}

/* ── Login page — center the "Login" h2 rendered by WooCommerce form-login ── */
/* WC outputs: #customer_login > .col-1 > h2 and .col-2 > h2 */
.woocommerce-account:not(.logged-in) #customer_login h2 {
	text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.woocommerce-MyAccount-navigation {
		float: none !important;
		width: 100% !important;
		display: flex;
		overflow-x: auto;
		margin-bottom: 1rem;
	}

	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		width: 100%;
	}

	.woocommerce-MyAccount-navigation ul li {
		border-bottom: none;
		border-right: 1px solid var(--mit-light-gray);
		flex-shrink: 0;
	}

	.woocommerce-MyAccount-navigation ul li:last-child {
		border-right: none;
	}

	.woocommerce-MyAccount-content {
		float: none !important;
		width: 100% !important;
	}
}

/* ── WooCommerce Single Product — Mobile ─────────────────────────────────── */
@media ( max-width: 768px ) {

	/* Stack product gallery and summary vertically */
	.woocommerce div.product {
		display: block !important;
	}
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		float: none !important;
		width: 100% !important;
		margin-right: 0 !important;
	}
	.woocommerce div.product div.images {
		margin-bottom: 1.5rem;
	}

	/* Product title */
	.woocommerce div.product .product_title {
		font-size: 1.4rem !important;
		line-height: 1.3;
	}

	/* Price */
	.woocommerce div.product p.price,
	.woocommerce div.product span.price {
		font-size: 1.25rem !important;
	}

	/* SKU / meta */
	.woocommerce div.product .product_meta {
		font-size: .85rem;
		margin-top: .75rem;
		word-break: break-word;
	}

	/* Quantity + add-to-cart row */
	.woocommerce div.product form.cart {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
		align-items: center;
	}
	.woocommerce div.product form.cart .qty {
		width: 60px !important;
	}
	.woocommerce div.product form.cart .single_add_to_cart_button {
		flex: 1;
	}

	/* Tabs — horizontally scrollable */
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		padding-bottom: .25rem;
		flex-wrap: nowrap !important;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		flex-shrink: 0;
	}

	/* Reviews — block layout for comment container */
	#reviews .commentlist .comment_container {
		display: flex !important;
		flex-wrap: wrap;
	}
	#reviews .commentlist .comment_container > img.avatar {
		width: 40px !important;
		height: 40px !important;
		margin-right: .75rem;
		margin-bottom: .5rem;
	}
	.woocommerce #reviews #comments ol.commentlist li .comment-text {
		margin-left: 0 !important;
		width: 100%;
	}
	#review_form_wrapper {
		font-size: .9rem;
	}

	/* Related / upsell products — 2-column grid */
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 1rem;
	}
	.woocommerce .related ul.products::before,
	.woocommerce .related ul.products::after,
	.woocommerce .upsells ul.products::before,
	.woocommerce .upsells ul.products::after {
		display: none !important;
	}
	.woocommerce .related ul.products li.product,
	.woocommerce .upsells ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
		float: none !important;
	}
	.related.products,
	.upsells.products {
		overflow-x: hidden;
		clear: both;
	}
	.related.products h2,
	.upsells.products h2 {
		font-size: 1.2rem;
	}
}

@media ( max-width: 480px ) {
	/* Related / upsell products — single column on very narrow screens */
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products {
		grid-template-columns: 1fr !important;
	}

	/* Tighter product title */
	.woocommerce div.product .product_title {
		font-size: 1.2rem !important;
	}
}