/* exMart theme — layout & WooCommerce integration styles
   (ported from the React app's inline styles into real classes) */

/* ── Skip link ─────────────────────────────────────────── */
.em-skip-link { position:absolute; left:-9999px; top:0; background: var(--ink-900); color:#fff; padding: var(--s3) var(--s4); z-index: 9999; border-radius: 0 0 var(--r-sm) 0; }
.em-skip-link:focus { left:0; }

/* ── Header ────────────────────────────────────────────── */
.em-site-header {
	border-bottom: 1px solid rgba(228,230,234,.6);
	background: rgba(255,255,255,.72);
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	position: sticky;
	top: 0;
	z-index: 20;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.em-site-header { background: var(--paper); }
}
.em-header-bar { display: flex; align-items: center; min-height: 72px; position: relative; }
.em-header-left, .em-header-right { display: flex; align-items: center; gap: var(--s1); z-index: 1; flex-shrink: 0; }
.em-header-right { margin-left: auto; }
.em-header-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.em-header-logo img { height: 48px; width: auto; display: block; }
/* Search lives inline in the bar on desktop (left: logo, right: icons),
   and as its own full-width row below the bar on mobile — toggled here
   rather than via .em-desktop-only/.em-mobile-only, which force
   inline-flex and would break this row's full-width block layout. */
.em-header-search-bar--inline { display: none; }
@media (min-width: 768px) {
	.em-header-search-bar--inline { display: flex; align-items: center; flex: 1; margin-inline: var(--s6); }
	.em-header-search-bar { display: none; }
}
/* Mobile nav drawer: global img { height:auto } blows the 1540px logo full-width.
   Needs the same !important hardening as .em-footer-logo below — without it,
   this rule loses the cascade to something else and the logo scales back up. */
.em-drawer-logo {
	display: block !important;
	height: 28px !important;
	width: auto !important;
	max-width: 140px !important;
	object-fit: contain !important;
}
.em-icon-badge { position: relative; }
.em-icon-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--sale); border: 2px solid var(--paper); }
.em-icon-count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; border-radius: var(--r-full); background: var(--accent-600); color: #fff; font-size: .6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--paper); padding-inline: 3px; line-height: 1; z-index: 1; }
.em-icon-count[hidden] { display: none !important; }

.em-desktop-only { display: none; }
.em-mobile-only { display: inline-flex; }
@media (min-width: 768px) {
  .em-desktop-only { display: inline-flex; }
  .em-mobile-only { display: none; }
}

/* Desktop nav */
.em-main-nav { border-top: 1px solid var(--ink-100); position: relative; display: none; }
@media (min-width: 768px) { .em-main-nav { display: block; } }
.em-main-nav-row { display: flex; gap: var(--s1); justify-content: center; align-items: center; }
.em-nav-btn { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s3) var(--s4); font-size: .875rem; font-weight: 600; color: var(--ink-500); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font); min-height: 44px; transition: color .15s; }
.em-nav-btn.open, .em-nav-btn:hover { color: var(--ink-900); }
.em-nav-btn.open { border-bottom-color: var(--ink-900); }
.em-nav-btn svg { transition: transform .2s; }
.em-nav-btn.open svg { transform: rotate(180deg); }
.em-nav-link { padding: var(--s3) var(--s4); font-size: .875rem; font-weight: 600; color: var(--ink-500); text-decoration: none; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; min-height: 44px; transition: color .15s; }
.em-nav-link:hover, .em-nav-link.is-active { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.em-nav-sep { border: none; border-left: 1px solid var(--ink-200); height: 24px; align-self: center; margin: 0 var(--s1); }

/* Mega menus */
.em-mega-grid-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: var(--s4); }
.em-mega-cat-title { font-weight: 600; font-size: .9375rem; color: var(--ink-800); text-decoration: none; display: block; padding-bottom: var(--s2); }
.em-mega-sub-link { display: block; font-size: .8125rem; color: var(--ink-500); text-decoration: none; padding-block: 3px; }
.em-mega-grid-brands { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.em-mega-brand-col-title { color: var(--ink-500); margin-bottom: var(--s4); }
.em-mega-brand-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.em-mega-brand-item { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border: 1px solid var(--ink-200); border-radius: var(--r-sm); text-decoration: none; transition: background .15s; }
.em-mega-brand-item:hover { background: var(--ink-50); }
.em-mega-brand-name { font-weight: 600; font-size: .9375rem; color: var(--ink-800); }
.em-mega-brand-sub { font-size: .75rem; color: var(--ink-500); line-height: 1.3; }

/* Mobile nav drawer */
.em-mobile-nav-section { border-bottom: 1px solid var(--ink-200); padding: var(--s4); }
.em-mobile-nav-section:last-child { border-bottom: none; }
.em-mobile-nav-link { display: block; padding: var(--s2) 0; text-decoration: none; color: var(--ink-700); font-size: .9375rem; }
.em-mobile-nav-link.strong { font-weight: 600; color: var(--ink-800); }

/* ── Announcement dismiss (no-js fallback keeps it visible) ── */
.em-announce[hidden] { display: none; }

/* ── Footer ────────────────────────────────────────────── */
.em-site-footer { border-top: 1px solid var(--ink-200); background: var(--ink-50); margin-top: auto; }
.em-site-footer .em-footer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,180px),1fr)); gap: var(--s8); padding-block: var(--s12); }
.em-site-footer .em-footer-col-title { color: var(--ink-500); margin-bottom: var(--s4); }
.em-site-footer .em-footer-link { display: block; font-size: .875rem; color: var(--accent-600); text-decoration: none; padding-block: 3px; line-height: 1.5; }
.em-site-footer .em-footer-link:hover { color: var(--accent-700); font-weight: 700; }
.em-site-footer .em-footer-about { display: flex; flex-direction: column; gap: var(--s4); }
.em-newsletter-form { display: flex; gap: var(--s2); }
.em-newsletter-form input { flex: 1; min-height: 40px; font-size: .875rem; }
.em-site-footer .em-footer-strip { border-top: 1px solid var(--ink-200); background: var(--paper); }
.em-site-footer .em-footer-strip-row { padding-block: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s6); align-items: flex-start; justify-content: space-between; }
.em-site-footer .em-footer-brand-block { display: flex; flex-direction: column; gap: var(--s1); }
.em-site-footer .em-footer-logo-link { display: inline-block; line-height: 0; max-width: 140px; }
.em-site-footer .em-footer-logo,
.woocommerce .em-site-footer .em-footer-logo,
.woocommerce-page .em-site-footer .em-footer-logo {
	display: block !important;
	height: 36px !important;
	width: auto !important;
	max-width: 140px !important;
	object-fit: contain !important;
}
.em-site-footer .em-footer-address { color: var(--ink-500); max-width: 260px; line-height: 1.5; }
.em-site-footer .em-footer-address a { color: inherit; text-decoration: none; }
.em-site-footer .em-footer-address a:hover { color: var(--ink-800); text-decoration: underline; }
.em-site-footer .em-footer-trust-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s3); }
.em-site-footer .em-footer-payments { display: flex; gap: var(--s2); flex-wrap: wrap; }
.em-site-footer .em-footer-copyright { border-top: 1px solid var(--ink-100); padding: var(--s3) 0; text-align: center; color: var(--ink-400); font-size: .8125rem; }

/* Hide Elementor Theme Builder footers if a plugin still injects them */
.elementor-location-footer { display: none !important; }

/* ── Hero (banner carousel) ────────────────────────────────
   A horizontal scroll-snap carousel of uniform blocks at every width
   (Amazon.eg-style banner row) — autoplay + swipe below 900px, fixed-
   width tiles with arrow controls at 900px+. ── */
.em-hero-bento { padding-block: clamp(16px, 3vw, 28px); }
.em-hero-carousel { position: relative; }
.em-hero-bento-grid {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: var(--s4);
	padding-bottom: var(--s1);
	scrollbar-width: none;
}
.em-hero-bento-grid::-webkit-scrollbar { display: none; }
.em-hero-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r-lg);
	color: var(--paper);
	text-decoration: none;
	flex: 0 0 clamp(250px, 80vw, 340px);
	scroll-snap-align: start;
	min-height: 392px;
	padding: clamp(18px, 2.2vw, 28px);
}
.em-hero-tile--main { background: linear-gradient(135deg, var(--ink-900) 0%, var(--accent-700) 100%); }
.em-hero-tile--offers { background: linear-gradient(135deg, #3A0D08 0%, var(--sale) 100%); }
.em-hero-tile--new { background: linear-gradient(135deg, #0A2E1C 0%, var(--success) 100%); }
.em-hero-tile--best { background: linear-gradient(135deg, #3A2A08 0%, var(--warning) 100%); }
@media (min-width: 900px) {
	/* 3.3 tiles per view: three whole tiles plus a slice of the next as a scroll cue. */
	.em-hero-tile { flex: 0 0 calc((100% - 3 * var(--s4)) / 3.3); min-height: 420px; }
}

/* Prev/next arrows — desktop only; mobile keeps swipe + autoplay. */
.em-hero-nav {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--ink-200);
	box-shadow: var(--shadow-menu);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	color: var(--ink-900);
}
.em-hero-nav:hover { background: var(--ink-50); }
.em-hero-nav--prev { left: -8px; }
.em-hero-nav--next { right: -8px; }
@media (min-width: 900px) {
	.em-hero-nav { display: flex; }
}

/* Full-bleed photo fills the tile behind the text; a dark scrim keeps
   the text legible over whatever the photo looks like. */
.em-hero-tile-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.em-hero-tile-img--main { object-position: left center; }
.em-hero-tile--offers .em-hero-tile-img { object-position: center top; }
.em-hero-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 100%);
	pointer-events: none;
}

.em-hero-tile-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; gap: var(--s3); }
.em-hero-tile--main .em-hero-tile-content { justify-content: center; gap: var(--s3); }
.em-hero-tile-content .em-overline { color: rgba(255,255,255,.75); }
.em-hero-tile-content .em-h1 { color: var(--paper); margin: 0; font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); line-height: 1.2; }
.em-hero-tile--main .em-body {
	color: rgba(255,255,255,.8);
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.em-hero-tile-title { color: var(--paper); margin: 0; }
.em-hero-tile-desc { color: rgba(255,255,255,.8); margin: 0; }
.em-hero-tile-cta { align-self: flex-start; margin-top: auto; }

/* ── Trust strip ───────────────────────────────────────── */
.em-trust-strip { border-bottom: 1px solid var(--ink-200); }
.em-trust-strip-viewport { padding-block: var(--s5); }
.em-trust-strip-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--s4) clamp(24px, 4vw, 48px);
}
.em-trust-item { display: flex; align-items: center; gap: var(--s3); }
.em-trust-item-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--ink-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.em-trust-item-text { font-weight: 500; color: var(--ink-700); }
.em-trust-item--dup { display: none; }
@media (max-width: 767px) {
	.em-trust-strip-viewport { overflow: hidden; }
	.em-trust-strip-row {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: max-content;
		animation: em-trust-marquee 18s linear infinite;
	}
	.em-trust-strip-viewport:hover .em-trust-strip-row { animation-play-state: paused; }
	.em-trust-item { flex-shrink: 0; white-space: nowrap; }
	.em-trust-item--dup { display: flex; }
}
@keyframes em-trust-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.em-trust-strip-row { animation: none; flex-wrap: nowrap; overflow-x: auto; width: auto; }
	.em-trust-item--dup { display: none; }
}

/* ── Shop by category (circular strip) ────────────────── */
.em-cat-heading { margin-bottom: var(--s5); }
.em-cat-track { display:flex; overflow-x:auto; gap:clamp(12px,2vw,24px); padding-bottom:var(--s3); scroll-snap-type:x mandatory; scrollbar-width:none; }
.em-cat-track::-webkit-scrollbar { display:none; }
.em-cat-item { text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:var(--s2); flex-shrink:0; scroll-snap-align:start; min-width:88px; }
/* Was a fixed 64px on mobile regardless of screen size — tiny next to
   everything else on the page, which all scales with the viewport.
   One continuous clamp() now covers mobile through desktop with no size
   jump at the 640px breakpoint below. */
.em-cat-circle { border-radius:50%; overflow:hidden; flex-shrink:0; border:2.5px solid var(--ink-100); transition:transform .15s, border-color .15s; width:clamp(80px,22vw,112px); height:clamp(80px,22vw,112px); }
.em-cat-circle:hover { transform:scale(1.08); border-color:var(--accent-600); }
.em-cat-circle img { width:100%; height:100%; object-fit:cover; display:block; }
.em-cat-label { font-weight:600; color:var(--ink-700); text-align:center; line-height:1.25; width:100%; font-size:clamp(.75rem,1.8vw,.9375rem); }
@media(min-width:640px) {
  .em-cat-track { overflow-x:visible; justify-content:space-evenly; flex-wrap:nowrap; }
  .em-cat-item { flex:1; min-width:0; flex-shrink:1; scroll-snap-align:unset; }
}
/* Mobile tap: the circle itself must stay put (its neighbors don't move
   out of the way), so the zoom happens on the image inside instead —
   clipped by the circle's own overflow:hidden. */
@media (max-width: 639px) {
  .em-cat-circle:hover, .em-cat-circle:active { transform: none; }
  .em-cat-circle img { transition: transform .15s; }
  .em-cat-circle:hover img, .em-cat-circle:active img { transform: scale(1.08); }
}

/* ── Brands strip ──────────────────────────────────────── */
.em-brands-strip { border-bottom: 1px solid var(--ink-200); padding-block: var(--s4); }
.em-brands-strip-row { display: flex; align-items: center; gap: var(--s4); overflow-x: auto; scrollbar-width: none; }
.em-brands-strip-row::-webkit-scrollbar { display: none; }
.em-brands-strip-label { color: var(--ink-400); flex-shrink: 0; }
.em-brands-strip-divider { width: 1px; height: 20px; background: var(--ink-200); flex-shrink: 0; }
.em-brand-pill { text-decoration: none; display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; padding: var(--s3) var(--s5); border-radius: var(--r-md); border: 1px solid var(--ink-200); transition: border-color .15s, background .15s; }
.em-brand-pill:hover { border-color: var(--brand-hover, var(--ink-400)); background: color-mix(in srgb, var(--brand-hover, var(--ink-400)) 7%, transparent); }
.em-brand-pill-logo {
	display: flex; align-items: center; justify-content: center;
	width: 88px; height: 34px; flex-shrink: 0;
}
.em-brand-pill-logo img {
	display: block; width: 100%; height: 100%;
	max-width: 88px; max-height: 34px;
	object-fit: contain; object-position: center;
}
.em-brand-pill-name { font-size: .875rem; font-weight: 600; color: var(--ink-800); white-space: nowrap; }

/* ── Review band ───────────────────────────────────────── */
.em-review-band { background: var(--accent-600); color: var(--paper); }
.em-review-band .em-h2 { color: var(--paper); margin-bottom: var(--s8); }
.em-review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s4); }
.em-review-card { border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-md); padding: var(--s5); }
.em-review-card-stars { display: flex; gap: var(--s1); margin-bottom: var(--s3); }
.em-review-card-text { color: var(--ink-200); margin-bottom: var(--s3); font-style: italic; }
.em-review-card-author { color: var(--ink-400); }

/* ── Newsletter section ────────────────────────────────── */
.em-newsletter-section { text-align: center; }
.em-newsletter-inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.em-whatsapp-link { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-800); font-size: .875rem; font-weight: 600; text-decoration: none; }
.em-whatsapp-link:hover { color: var(--ink-900); }
.em-whatsapp-icon { display: block; flex-shrink: 0; }

/* ── Category index / brand index cards ───────────────── */
.em-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s6); }
.em-cat-tile { text-decoration: none; border: 1px solid var(--ink-200); border-radius: var(--r-md); overflow: hidden; display: block; transition: border-color .15s; }
.em-cat-tile:hover { border-color: var(--ink-400); }
.em-cat-tile-media { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.em-cat-tile-body { padding: var(--s5); }
.em-cat-tile-name { font-weight: 600; font-size: 1.125rem; color: var(--ink-900); margin: 0 0 var(--s1); }
.em-cat-tile-sub { color: var(--ink-500); margin: 0 0 var(--s2); }
.em-cat-tile-count { color: var(--ink-400); margin: 0; }

.em-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s4); }
.em-brand-card { text-decoration: none; border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); transition: border-color .15s, box-shadow .15s; }
.em-brand-card:hover { border-color: var(--ink-400); box-shadow: var(--shadow-menu); }
.em-brand-card-avatar { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.em-brand-card-avatar span { font-weight: 700; font-size: 1.5rem; }
.em-brand-card-avatar.has-logo {
	border-radius: var(--r-md);
	background: var(--paper);
	border: 1px solid var(--ink-200);
	padding: var(--s2);
	box-sizing: border-box;
}
.em-brand-card-avatar.has-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.em-brand-card-name { font-weight: 700; font-size: 1rem; color: var(--ink-900); margin: 0 0 var(--s1); }
.em-brand-card-tagline { color: var(--ink-500); line-height: 1.45; flex: 1; margin: 0; }
.em-brand-card-count { color: var(--accent-600); font-weight: 600; margin: 0; }

/* ── Brand landing hero ────────────────────────────────── */
.em-brand-hero { border-bottom: 1px solid var(--ink-200); background: var(--ink-50); padding-block: var(--s12); }
.em-brand-hero-row { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s4); }
.em-brand-hero-avatar {
	width: 88px; height: 88px; border-radius: var(--r-md);
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	overflow: hidden; padding: var(--s3); box-sizing: border-box;
	background: var(--paper);
	border: 1px solid var(--ink-200);
}
.em-brand-hero-avatar.has-logo { border-radius: var(--r-md); }
.em-brand-hero-avatar:not(.has-logo) { border-radius: 50%; border: none; padding: 0; }
.em-brand-hero-avatar span { font-weight: 700; font-size: 2rem; }
.em-brand-hero-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 72px;
	max-height: 48px;
	object-fit: contain;
	object-position: center;
}
.em-brand-hero-desc { color: var(--ink-500); margin-top: var(--s4); max-width: 72ch; }

/* ── About page ────────────────────────────────────────── */
.em-about-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,320px),1fr)); gap: var(--s4); }
.em-about-brand-card { border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: var(--s5); text-decoration: none; display: flex; flex-direction: column; gap: var(--s2); }
.em-about-brand-head { display: flex; align-items: center; gap: var(--s3); }
.em-about-brand-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.em-about-brand-avatar.has-logo {
	border-radius: var(--r-sm);
	background: var(--paper);
	border: 1px solid var(--ink-200);
	padding: var(--s1);
	box-sizing: border-box;
}
.em-about-brand-avatar.has-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.em-commitment-list { display: flex; flex-direction: column; gap: var(--s3); }
.em-commitment-item { display: flex; gap: var(--s3); align-items: flex-start; }

/* ── Contact page ──────────────────────────────────────── */
.em-contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--s10); }
@media (min-width: 768px) { .em-contact-grid { grid-template-columns: 1fr 1fr; } }
.em-contact-info { display: flex; flex-direction: column; gap: var(--s8); }
.em-contact-map { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--ink-200); aspect-ratio: 16/9; background: var(--ink-100); display: flex; align-items: center; justify-content: center; }
.em-contact-map-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s2); }

/* ── PDP (Figma) ───────────────────────────────────────── */
.em-pdp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s8);
	align-items: start;
	width: 100%;
}
@media (min-width: 768px) {
	/* Slightly wider info column so ATC/trust aren’t cramped (still within 1280 guide). */
	.em-pdp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s10); }
}

/* Product Page Banner: wide strip below the product on phones/tablets
   (rendered inside .em-pdp-main so it sits right under the gallery/info
   grid, before tabs/related); a tall sticky sidebar beside the product at
   1200px+, same slider markup/JS/CSS as the Shop Page Banner
   (.em-shop-banner / .em-shop-banner--side). */
.em-pdp-layout { display: block; }
.em-pdp-banner-strip { margin-top: var(--s6); }
.em-pdp-banner-strip .em-shop-banner { margin-bottom: 0; }
.em-pdp-aside { display: none; }
@media (min-width: 1200px) {
	.em-pdp-layout--banner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: var(--s8);
		align-items: start;
	}
	.em-pdp-banner-strip { display: none; }
	.em-pdp-aside {
		display: block;
		position: sticky;
		top: calc(var(--em-header-h, 140px) + var(--s4));
	}
}
/* Kill WooCommerce’s default float + 48% widths on summary/images — they
   nest inside our grid cell and make the right column look “cut off”. */
.woocommerce div.product.em-pdp,
.woocommerce-page div.product.em-pdp {
	display: block;
	width: 100%;
}
.woocommerce div.product.em-pdp::before,
.woocommerce div.product.em-pdp::after {
	display: none !important;
	content: none !important;
}
.woocommerce div.product.em-pdp .em-pdp-gallery,
.woocommerce div.product.em-pdp .em-pdp-gallery .woocommerce-product-gallery,
.woocommerce div.product.em-pdp .em-pdp-gallery .images,
.woocommerce div.product.em-pdp .em-pdp-info,
.woocommerce div.product.em-pdp .em-pdp-info.summary,
.woocommerce div.product.em-pdp div.summary {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	clear: none !important;
}
.em-pdp-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	min-width: 0;
	width: 100%;
}
.em-pdp-info {
	display: flex;
	flex-direction: column;
	gap: var(--s5);
	min-width: 0;
	width: 100%;
}
/* Kill WC summary child margins — flex gap owns spacing. */
.em-pdp-info > * { margin: 0 !important; }

.em-pdp-brand-row {
	display: flex;
	align-items: center;
	gap: var(--s3);
	flex-wrap: wrap;
}
.em-pdp-brand-link {
	font-weight: 700;
	font-size: .9375rem;
	color: var(--ink-700);
	text-decoration: none;
}
.em-pdp-brand-link:hover { color: var(--ink-900); }

.em-pdp-info .product_title,
.em-pdp-info h1.product_title {
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.375rem);
	line-height: 1.25;
	font-weight: 600;
	color: var(--ink-900);
	margin: 0;
}

.em-pdp-rating {
	display: flex;
	align-items: center;
	gap: var(--s3);
	flex-wrap: wrap;
}
.em-pdp-rating a {
	color: var(--ink-500);
	font-size: .875rem;
	text-decoration: none;
}
.em-pdp-rating a:hover { color: var(--ink-800); }

.em-pdp-price .em-price-lockup {
	align-items: baseline;
}
/* The big price above already switches per size — drop WC's duplicate. */
.em-pdp-info .woocommerce-variation-price { display: none; }
.em-pdp-price .em-price-currency {
	font-size: .8125rem;
	letter-spacing: .06em;
}
.em-pdp-price .em-price-number-lg {
	font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.5rem);
	font-weight: 700;
	color: var(--ink-900);
}
.em-pdp-price .em-price-number-lg.sale { color: var(--sale); }

.em-pdp-info .stock {
	font-size: .875rem;
	font-weight: 600;
	margin: 0;
}
.em-pdp-info .stock.in-stock { color: var(--success); }
.em-pdp-info .stock.em-stock-low { color: var(--warning); }
.em-pdp-info .stock.out-of-stock { color: var(--error); }

/* Variants → pill buttons (JS-enhanced). */
.em-pdp-info .variations {
	margin: 0;
	border: none;
	width: 100%;
}
.em-pdp-info .variations td,
.em-pdp-info .variations th {
	border: none;
	padding: 0 0 var(--s2);
	vertical-align: middle;
	display: block;
	text-align: left;
}
.em-pdp-info .variations select.em-pdp-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
}
.em-pdp-variant-label {
	font-size: .75rem;
	font-weight: 500;
	color: var(--ink-500);
	margin: 0 0 var(--s2);
}
.em-pdp-variant-label strong {
	color: var(--ink-800);
	font-weight: 600;
}
.em-pdp-variant-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
}

/* ATC row: primary CTA + wishlist; in-cart = tall stepper + Buy now. */
.em-pdp-atc-row {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--s3);
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}
.em-pdp-cta-stack {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s2);
}
.em-pdp-add-btn,
.em-pdp-buy-now,
.em-pdp-cta-stack .em-btn {
	width: 100%;
	justify-content: center;
	min-height: 52px;
}
.em-pdp-cart-stepper {
	display: flex;
	align-items: center;
	height: 52px;
	border: 2px solid var(--accent-600);
	border-radius: var(--r-sm);
	overflow: hidden;
	width: 100%;
}
.em-pdp-cart-stepper-btn {
	flex: 1;
	height: 100%;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--accent-600);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font);
	transition: background .12s;
}
.em-pdp-cart-stepper-btn:hover { background: var(--accent-100); }
.em-pdp-cart-stepper-val {
	min-width: 48px;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--accent-600);
	font-variant-numeric: tabular-nums;
	border-inline: 1px solid var(--accent-100);
	line-height: 1;
}
.em-pdp-wishlist,
.em-pdp-atc-row .em-pdp-wishlist,
.em-pdp-info form.cart .em-pdp-wishlist {
	flex: 0 0 auto;
	width: 52px;
	min-width: 52px;
	height: 52px;
	min-height: 52px;
}
/* Variable/external forms: column shell, row only for qty + ATC + wishlist. */
.em-pdp-info form.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s5);
	width: 100%;
}
.em-pdp-info form.cart .woocommerce-variation-add-to-cart,
.em-pdp-info form.cart .single_variation_wrap .variations_button,
.em-pdp-info form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s3);
	width: 100%;
}
.em-pdp-info form.cart .quantity { margin: 0; }
.em-pdp-info form.cart button.single_add_to_cart_button {
	flex: 1 1 180px;
	min-width: 0;
	min-height: 52px;
	background: var(--accent-600) !important;
	color: #fff !important;
}

.em-pdp-trust-block {
	border: 1px solid var(--ink-200);
	border-radius: var(--r-md);
	padding: var(--s4);
	display: flex;
	flex-direction: column;
	gap: var(--s3);
}
.em-pdp-trust-block-item {
	display: flex;
	gap: var(--s2);
	align-items: flex-start;
}

/* Gallery — square main + thumb row (Figma). */
.single-product .em-breadcrumb {
	margin-bottom: var(--s8);
}
.em-pdp-gallery .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	position: relative;
	/* WC gives the zoom trigger z-index 99; keep it under the sticky header. */
	isolation: isolate;
}
.em-pdp-gallery .woocommerce-product-gallery__wrapper {
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--ink-200);
	background: var(--ink-50);
	aspect-ratio: 1 / 1;
	margin: 0;
}
.em-pdp-gallery .flex-viewport {
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--ink-200);
	background: var(--ink-50);
	aspect-ratio: 1 / 1;
	width: 100% !important;
	margin: 0;
}
.em-pdp-gallery .flex-viewport .woocommerce-product-gallery__wrapper {
	border: none;
	background: transparent;
	aspect-ratio: auto;
	height: 100%;
	border-radius: 0;
}
.em-pdp-gallery .woocommerce-product-gallery__image,
.em-pdp-gallery .woocommerce-product-gallery__image a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
}
.em-pdp-gallery .woocommerce-product-gallery__wrapper img,
.em-pdp-gallery .woocommerce-product-gallery__image img,
.em-pdp-gallery .woocommerce-product-gallery__image a img {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	display: block;
	margin: 0 auto;
}
.em-pdp-gallery .flex-control-thumbs {
	display: flex;
	gap: var(--s2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: var(--s3) 0 0;
	padding: 0;
	list-style: none;
}
.em-pdp-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
.em-pdp-gallery .flex-control-thumbs li {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	margin: 0;
}
.em-pdp-gallery .flex-control-thumbs img {
	width: 72px !important;
	height: 72px !important;
	object-fit: cover;
	border-radius: var(--r-sm);
	border: 1px solid var(--ink-200);
	cursor: pointer;
	box-sizing: border-box;
}
.em-pdp-gallery .flex-control-thumbs img.flex-active {
	border: 2px solid var(--ink-900);
}
.em-pdp-gallery .woocommerce span.onsale,
.em-pdp-gallery span.onsale {
	top: var(--s3);
	left: var(--s3);
	text-transform: none;
	letter-spacing: 0;
}

/* Tabs */
.woocommerce-tabs.wc-tabs-wrapper,
.woocommerce div.product .woocommerce-tabs {
	margin-top: var(--s10);
	padding-top: var(--s8);
	border-top: 1px solid var(--ink-200);
}
.woocommerce-tabs ul.tabs {
	display: flex;
	border-bottom: 1px solid var(--ink-200);
	list-style: none;
	padding: 0;
	margin: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 0;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: none !important;
	background: none !important;
	border-radius: 0 !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a {
	padding: var(--s3) var(--s4);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--ink-500);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	background: none !important;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--ink-900);
	border-bottom-color: var(--ink-900);
}
.woocommerce-tabs .panel {
	padding-top: var(--s6);
	max-width: 72ch;
	margin: 0;
}
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-tabs .panel table,
table.woocommerce-product-attributes {
	border-collapse: collapse;
	width: 100%;
}
.woocommerce-tabs .panel table td,
.woocommerce-tabs .panel table th,
table.woocommerce-product-attributes td,
table.woocommerce-product-attributes th {
	padding: var(--s3) var(--s4) var(--s3) 0;
	font-size: .875rem;
	border-bottom: 1px solid var(--ink-100);
	text-align: left;
	background: none;
}
.woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
	font-weight: 500;
	color: var(--ink-700);
	width: 40%;
}
.woocommerce-product-attributes td.woocommerce-product-attributes-item__value {
	color: var(--ink-800);
	padding-inline-start: 0;
}

/* Related rail */
.related.products.em-pdp-related,
.upsells.products {
	margin-top: var(--s10);
	padding-top: var(--s8);
	border-top: 1px solid var(--ink-200);
}
.single-product .em-rail-header {
	margin-top: var(--s2);
}
.em-pdp-related-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s4);
	margin-bottom: var(--s6);
	flex-wrap: wrap;
}
.em-pdp-related-title {
	margin: 0;
}
.em-pdp-related-all {
	font-size: .875rem;
	font-weight: 600;
	color: var(--accent-600);
	text-decoration: none;
}
.em-pdp-related-all:hover { text-decoration: underline; }
.related.products > h2,
.upsells.products > h2 {
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.375rem);
	line-height: 1.25;
	font-weight: 600;
	margin: 0 0 var(--s6);
}

/* Customer Reviews (Figma, outside tabs) */
.em-pdp-reviews {
	margin-top: var(--s8);
}
.em-pdp-reviews-title {
	margin: var(--s8) 0 var(--s6);
}
.em-pdp-reviews-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s8);
	width: 100%;
}
@media (min-width: 768px) {
	.em-pdp-reviews-grid { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); }
}
.em-pdp-reviews-summary {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	align-items: flex-start;
}
.em-pdp-reviews-score {
	display: flex;
	align-items: baseline;
	gap: var(--s2);
}
.em-pdp-reviews-avg {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ink-900);
}
.em-pdp-reviews-of { color: var(--ink-500); }
.em-pdp-reviews-based { color: var(--ink-400); margin: 0; }
.em-pdp-reviews-bars {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	width: 100%;
}
.em-pdp-reviews-list {
	display: flex;
	flex-direction: column;
	gap: var(--s6);
	min-width: 0;
	width: 100%;
}
.em-pdp-review {
	padding-bottom: var(--s6);
	border-bottom: 1px solid var(--ink-100);
}
.em-pdp-review-meta {
	display: flex;
	align-items: center;
	gap: var(--s3);
	margin-bottom: var(--s2);
	flex-wrap: wrap;
}
.em-pdp-review-author {
	color: var(--ink-700);
	font-weight: 600;
}
.em-pdp-review-date { color: var(--ink-400); }
.em-pdp-review-text {
	color: var(--ink-700);
	margin: 0;
}
.em-pdp-review-text p { margin: 0 0 var(--s2); }
.em-pdp-review-text p:last-child { margin: 0; }
.em-pdp-review-form-wrap {
	margin-top: var(--s4);
	padding-top: var(--s6);
	border-top: 1px solid var(--ink-100);
	width: 100%;
}
.em-pdp-review-form-wrap .comment-respond,
.em-pdp-review-form-wrap form#commentform,
.em-pdp-review-form-wrap .comment-form {
	width: 100%;
	max-width: none;
}
.em-pdp-review-form-wrap .comment-notes,
.em-pdp-review-form-wrap .logged-in-as,
.em-pdp-review-form-wrap .must-log-in {
	display: none !important;
}
/* WooCommerce injects a second outline star row when it finds #rating — hide it. */
.em-pdp-review-form-wrap p.stars,
.em-pdp-review-form-wrap .comment-form-rating,
.em-pdp-review-form-wrap select[name="rating"] {
	display: none !important;
}
/* Hide Super Socializer compact icons — we render the long Google button. */
.em-pdp-review-form-wrap .the_champ_login_container,
.em-pdp-review-form-wrap .the_champ_outer_login_container,
.em-pdp-reviews .the_champ_login_container,
.em-pdp-reviews .the_champ_outer_login_container {
	display: none !important;
}
.em-pdp-review-google {
	margin-bottom: var(--s5);
}
.em-pdp-review-google .em-auth-divider { display: none; }
.em-pdp-review-google .em-auth-social-label {
	text-align: left;
	margin-bottom: var(--s3);
}
.em-pdp-rating-input {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	margin: 0 0 var(--s4);
}
.em-pdp-rating-input > span.em-caption {
	color: var(--ink-700);
	font-weight: 600;
}
.em-pdp-star-picker {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}
.em-pdp-star-picker button {
	appearance: none;
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--ink-200);
	line-height: 1;
	border-radius: var(--r-sm);
	transition: color .12s;
}
.em-pdp-star-picker button svg {
	display: block;
	width: 28px;
	height: 28px;
}
.em-pdp-star-picker button.is-active,
.em-pdp-star-picker button.is-hover {
	color: #F5A524;
}
.em-pdp-star-picker button.is-active svg path,
.em-pdp-star-picker button.is-hover svg path {
	fill: currentColor;
}
.em-pdp-star-picker button:focus-visible {
	outline: 2px solid var(--accent-600);
	outline-offset: 2px;
}
.em-pdp-review-form-wrap .comment-form-author,
.em-pdp-review-form-wrap .comment-form-email,
.em-pdp-review-form-wrap .comment-form-comment {
	margin: 0 0 var(--s4);
	width: 100%;
}
.em-pdp-review-form-wrap .comment-form-url,
.em-pdp-review-form-wrap .comment-form-cookies-consent {
	display: none !important;
}
.em-pdp-review-form-wrap label {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--ink-700);
	margin-bottom: var(--s2);
}
.em-pdp-review-form-wrap input[type="text"],
.em-pdp-review-form-wrap input[type="email"],
.em-pdp-review-form-wrap textarea {
	width: 100%;
	max-width: none;
	min-height: 48px;
	padding: var(--s3) var(--s4);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-sm);
	font-size: .9375rem;
	background: var(--paper);
	box-sizing: border-box;
}
.em-pdp-review-form-wrap textarea { min-height: 120px; resize: vertical; }
.em-pdp-review-form-wrap .form-submit { margin: 0; }
.em-pdp-review-form-wrap .form-submit .em-btn,
.em-pdp-review-form-wrap .form-submit input[type="submit"] {
	min-height: 48px;
	padding-inline: var(--s6);
	border: none;
	border-radius: var(--r-sm);
	cursor: pointer;
}

/* Legacy reviews tab polish (if a plugin re-adds it) */
#reviews .commentlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s6); }
#reviews .commentlist li.review { padding-bottom: var(--s6); border-bottom: 1px solid var(--ink-100); }
#reviews .comment-text { display: flex; flex-direction: column; gap: var(--s2); }
#reviews .woocommerce-review__author { font-weight: 600; color: var(--ink-700); font-size: .8125rem; }
#reviews .woocommerce-review__dash { color: var(--ink-300); }
#reviews .woocommerce-review__published-date { color: var(--ink-400); font-size: .8125rem; }
#reviews #respond { margin-top: var(--s8); }

@media (max-width: 767px) {
	.em-pdp-atc-row {
		flex-wrap: wrap;
	}
	.em-pdp-cta-stack {
		flex: 1 1 calc(100% - 64px);
	}
	.em-pdp-info form.cart button.single_add_to_cart_button,
	.em-pdp-info form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
		flex: 1 1 calc(100% - 64px);
	}
	.em-pdp-gallery .flex-control-thumbs li {
		flex: 0 0 64px;
		width: 64px;
		height: 64px;
	}
	.em-pdp-gallery .flex-control-thumbs img {
		width: 64px !important;
		height: 64px !important;
	}
	.woocommerce-tabs ul.tabs li a {
		padding-inline: var(--s3);
		font-size: .875rem;
	}
	.em-pdp-reviews-avg { font-size: 2.5rem; }
}

/* ── FAQ accordion ─────────────────────────────────────── */
.em-faq-item { border-bottom: 1px solid var(--ink-200); }
.em-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--s4) 0; background: none; border: none; cursor: pointer; font-family: var(--font); font-size: .9375rem; font-weight: 600; color: var(--ink-800); text-align: left; gap: var(--s4); }
.em-faq-q svg { flex-shrink: 0; transition: transform .2s; }
.em-faq-item.open .em-faq-q svg { transform: rotate(180deg); }
.em-faq-a { display: none; padding-bottom: var(--s4); line-height: 1.6; color: var(--ink-700); }
.em-faq-item.open .em-faq-a { display: block; }

/* ── Info page shared ──────────────────────────────────── */
.em-info-list { display: flex; flex-direction: column; gap: var(--s3); }
.em-info-list-item { display: flex; gap: var(--s3); align-items: flex-start; }
.em-info-table { border-collapse: collapse; width: 100%; }
.em-info-table th { padding: var(--s3) var(--s4); text-align: left; border-bottom: 2px solid var(--ink-200); font-size: .8125rem; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: .08em; }
.em-info-table td { padding: var(--s3) var(--s4); font-size: .875rem; color: var(--ink-700); border-bottom: 1px solid var(--ink-100); }
.em-payment-method-card { border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: var(--s5); }
.em-payment-method-card p:first-child { font-weight: 700; margin-bottom: var(--s2); }

/* ── Account page ──────────────────────────────────────── */
.em-account-page { width: 100%; }
.em-account-panel { width: 100%; }
.em-account-panel-title { margin: 0 0 var(--s5); }
.em-account-wishlist-count { font-size: 1rem; color: var(--ink-400); font-weight: 400; margin-inline-start: var(--s2); }
.em-account-orders { display: flex; flex-direction: column; gap: var(--s4); }
.em-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s4);
	width: 100%;
}
@media (min-width: 600px) {
	.em-form-row { grid-template-columns: 1fr 1fr; }
}
/* Kill WC float/width on name fields inside our grid. */
.em-form-row > .form-row,
.em-form-row > .em-input-wrap,
.em-profile-form .form-row-first,
.em-profile-form .form-row-last {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}
.em-profile-form .em-input,
.em-profile-form input.input-text,
.em-profile-form input[type="text"],
.em-profile-form input[type="email"],
.em-profile-form input[type="tel"],
.em-profile-form input[type="password"] {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
}
.em-profile-form .clear { display: none; }
.em-rule { border: 0; border-top: 1px solid var(--ink-200); margin: var(--s6) 0; }
.em-profile-form { max-width: 480px; width: 100%; }
.em-profile-actions { margin: var(--s2) 0 0; }

/*
 * Logged-in account: sidebar + content.
 * WooCommerce adds ::before/::after clearfixes on .woocommerce — those become
 * extra grid/flex items and shatter the layout. Hide them, kill floats, use flex.
 */
.woocommerce-account .em-account-page .woocommerce,
.em-account-page .woocommerce {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s6);
	width: 100%;
	clear: both;
}
.woocommerce-account .em-account-page .woocommerce::before,
.woocommerce-account .em-account-page .woocommerce::after,
.em-account-page .woocommerce::before,
.em-account-page .woocommerce::after {
	content: none !important;
	display: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.em-account-page .woocommerce-MyAccount-navigation,
.em-account-page .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}
@media (min-width: 768px) {
	.woocommerce-account .em-account-page .woocommerce,
	.em-account-page .woocommerce {
		flex-direction: row !important;
		align-items: flex-start;
	}
	.woocommerce-account .em-account-page .woocommerce-MyAccount-navigation,
	.em-account-page .woocommerce-MyAccount-navigation {
		flex: 0 0 200px;
		width: 200px !important;
		max-width: 200px;
	}
	.woocommerce-account .em-account-page .woocommerce-MyAccount-content,
	.em-account-page .woocommerce-MyAccount-content {
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		max-width: none !important;
	}
}
.woocommerce-MyAccount-navigation ul,
.em-account-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s1);
}
.woocommerce-MyAccount-navigation li { margin: 0; width: 100%; }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--s3) var(--s4);
	border-radius: var(--r-sm);
	text-decoration: none;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--ink-500);
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.woocommerce-MyAccount-navigation li a:hover { color: var(--ink-800); background: var(--ink-50); }
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--ink-900) !important;
	background: var(--ink-100) !important;
	font-weight: 600;
}
.woocommerce-MyAccount-content { max-width: none !important; float: none !important; }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }

.em-order-card {
	border: 1px solid var(--ink-200);
	border-radius: var(--r-md);
	padding: var(--s4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4);
	align-items: center;
	justify-content: space-between;
	background: var(--paper);
}
.em-order-card-id { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-900); }
.em-order-card-meta { margin: var(--s1) 0 0; color: var(--ink-500); }
.em-order-card-aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.em-order-card-total { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-900); }
.em-order-status {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .6875rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--r-full);
}

.em-account-addresses { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 768px) { .em-account-addresses { grid-template-columns: 1fr 1fr; } }
.em-address-card { border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: var(--s4); margin: 0; }
.em-address-card-name { margin: 0 0 var(--s2); font-weight: 600; color: var(--ink-900); }
.em-address-card-body,
.em-address-card-body address { font-style: normal; font-size: .875rem; line-height: 1.5; color: var(--ink-500); margin: 0; }
.em-address-card-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }

.em-account-wishlist-grid.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: clamp(12px, 2vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.em-tracking-board {
	background: var(--ink-50);
	border-radius: var(--r-md);
	border: 1px solid var(--ink-200);
	padding: var(--s5) var(--s6);
	margin-bottom: var(--s6);
}
.em-account-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
.em-back-link { color: var(--ink-500); text-decoration: none; font-weight: 500; }
.em-back-link:hover { color: var(--ink-800); }

.woocommerce-EditAccountForm,
.woocommerce-Address-fields,
.em-profile-form {
	max-width: 480px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--s4);
}
.woocommerce-EditAccountForm .form-row,
.woocommerce-Address-fields .form-row,
.em-profile-form .form-row {
	margin-bottom: 0;
	float: none !important;
	width: 100% !important;
}

/* ── Auth pages (separate Login / Register) ───────────────
   Outer .em-container = same 1280 guideline as header.
   Inner .em-auth = form column centered in that container;
   copy/fields stay left-aligned inside the form. */
.em-auth {
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
	padding-block: var(--s8) var(--s16);
	margin-inline: auto;
	text-align: left;
}
.em-auth-title { margin: var(--s4) 0 var(--s6); }
.em-auth-form {
	display: flex;
	flex-direction: column;
	gap: var(--s4);
	margin: 0;
	max-width: 100%;
	width: 100%;
}
.em-auth-form .em-input-wrap {
	margin: 0;
	float: none;
	width: 100%;
	max-width: 100%;
}
.em-auth-form .em-input,
.em-auth-form input.em-input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.em-auth-submit {
	width: 100%;
	margin-top: var(--s2);
}
/* Kill WC float/column leftovers that break mobile auth forms. */
.em-auth .woocommerce-form::before,
.em-auth .woocommerce-form::after {
	content: none !important;
	display: none !important;
}
.em-auth .woocommerce-form .em-input-wrap,
.woocommerce form.em-auth-form .em-input-wrap {
	float: none !important;
	clear: none !important;
	width: 100% !important;
	padding: 0 !important;
}
@media (max-width: 639px) {
	.em-auth {
		max-width: none;
		padding-block: var(--s6) var(--s12);
	}
	.em-auth-title {
		margin: var(--s3) 0 var(--s5);
		font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem);
	}
	.em-auth-form { gap: var(--s3); }
	.em-auth-switch { margin-top: var(--s4); }
}
.em-auth-social {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	margin-block: var(--s2);
}
.em-auth-divider {
	display: flex;
	align-items: center;
	gap: var(--s3);
	color: var(--ink-400);
	font-size: .75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.em-auth-divider::before,
.em-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--ink-200);
}
.em-auth-social-label {
	margin: 0;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--ink-500);
	text-align: center;
}
.em-btn-google {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s3);
	width: 100%;
	min-height: 48px;
	padding-inline: var(--s5);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-sm);
	background: var(--paper);
	color: var(--ink-800) !important;
	font-family: var(--font);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: none;
	transition: background .15s, border-color .15s;
}
.em-btn-google:hover {
	background: var(--ink-50);
	border-color: var(--ink-300);
	color: var(--ink-900) !important;
}
.em-btn-google-icon {
	display: inline-flex;
	flex-shrink: 0;
}
/* Nextend / plugin buttons — stretch to match our fields. */
.em-auth-social-plugin {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s2);
}
.em-auth-social-plugin .nsl-container,
.em-auth-social-plugin .nsl-container-buttons,
.em-auth-social-plugin .nsl-button,
.em-auth-social-plugin a {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box;
}
.em-auth-social-plugin .nsl-button {
	border-radius: var(--r-sm) !important;
	min-height: 48px !important;
}
.em-auth-switch {
	margin: var(--s5) 0 0;
	font-size: .875rem;
	color: var(--ink-500);
}
.em-auth-switch a {
	color: var(--accent-600);
	font-weight: 600;
	text-decoration: none;
}
.em-auth-switch a:hover { text-decoration: underline; }
.em-auth-switch--muted { margin-top: var(--s3); }
.em-auth-switch--muted a {
	color: var(--ink-500);
	font-weight: 500;
}
.em-auth .woocommerce-error,
.em-auth .woocommerce-message,
.em-auth .woocommerce-info {
	margin-bottom: var(--s5);
}

/* Logged-out My Account fallback (should redirect to /login/). */
body:not(.logged-in).woocommerce-account .u-columns.col2-set {
	display: block !important;
}
body:not(.logged-in).woocommerce-account .u-column2,
body:not(.logged-in).woocommerce-account .col-2 {
	display: none !important;
}

/* ── 404 ───────────────────────────────────────────────── */
.em-404 { padding-block: var(--s20); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s5); }
.em-404-code { font-size: 5rem; font-weight: 700; color: var(--ink-200); line-height: 1; margin: 0; }

/* ── WooCommerce class-name adoption ──────────────────────
   Map WooCommerce's default markup onto the em design system
   so the native Shop/Product/Cart/Checkout/Account pages match
   without needing to override every template. ──────────── */

/* ── Shop / PLP (Figma) ─────────────────────────────────── */
.em-shop-toolbar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s4);
	flex-wrap: wrap;
	margin-bottom: var(--s6);
}
.em-shop-toolbar .em-h2 { margin: 0; }
.em-shop-toolbar-actions { display: flex; align-items: center; gap: var(--s3); margin-inline-start: auto; }
.em-shop-count {
	font-size: 1rem;
	color: var(--ink-400);
	font-weight: 400;
}
/* Shoppable banner: wide strip above the grid below 1200px; the second
   instance (--side) swaps in as a tall sticky banner in a right-hand
   column at 1200px+. The frame (aspect ratio, rounding) is on the track so
   the slide dots can sit below the image. */
.em-shop-banner {
	display: block;
	margin-bottom: var(--s6);
}
.em-shop-banner-track {
	display: flex;
	aspect-ratio: 21 / 6;
	border-radius: var(--r-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.em-shop-banner-track::-webkit-scrollbar { display: none; }
.em-shop-banner-slide { flex: 0 0 100%; height: 100%; display: block; scroll-snap-align: start; }
.em-shop-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.em-shop-banner-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: var(--s2);
}
.em-shop-banner-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: var(--ink-200);
	cursor: pointer;
	transition: width .2s, background .2s;
}
.em-shop-banner-dot.is-active { background: var(--accent-600); width: 18px; }
.em-shop-aside { display: none; }
@media (min-width: 1200px) {
	.em-shop-page > .em-shop-banner { display: none; }
	.em-shop-aside {
		display: block;
		position: sticky;
		top: calc(var(--em-header-h, 140px) + var(--s4));
	}
	.em-shop-banner--side { margin-bottom: 0; }
	/* Fills the viewport below the sticky header, leaving room for the dots
	   so the whole banner stays in view while scrolling. */
	.em-shop-banner--side .em-shop-banner-track {
		aspect-ratio: auto;
		height: calc(100vh - var(--em-header-h, 140px) - var(--s4) * 2 - 24px);
		min-height: 360px;
	}
}

.em-shop-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s8);
	align-items: start;
}
@media (min-width: 1024px) {
	.em-shop-layout {
		/* Filters left (~220px), products fill remaining width inside 1280 container */
		grid-template-columns: 220px minmax(0, 1fr);
	}
	.em-shop-side {
		display: flex;
		flex-direction: column;
		gap: var(--s5);
	}
}
@media (min-width: 1200px) {
	.em-shop-layout--banner {
		grid-template-columns: 220px minmax(0, 1fr) 240px;
	}
	/* Grid loses ~270px to the banner column — 3 cards per row keeps them
	   the same size as the 4-up grid without the banner. */
	.em-shop-layout--banner ul.products,
	.em-shop-layout--banner ul.products.columns-4 { grid-template-columns: repeat(3, 1fr); }
}

/* Filters: a slide-in drawer below 1024px (was rendering as a plain block
   above the product grid, pushing products off-screen on mobile — this
   uses the same drawer/backdrop pattern as the cart and mobile nav) —
   a static sidebar at 1024px+, same as before. */
.em-shop-filters-toggle { display: inline-flex; }
.em-shop-filters-header { display: none; }
.em-shop-filters {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: min(360px, 100vw);
	background: var(--paper);
	box-shadow: var(--shadow-modal);
	z-index: 9050;
	flex-direction: column;
	overflow: hidden;
}
.em-shop-filters.is-open { display: flex; animation: emSlideInR .25s ease; }
.em-shop-filters-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s4) var(--s5);
	border-bottom: 1px solid var(--ink-200);
	flex-shrink: 0;
}
.em-shop-filters-body { flex: 1; overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s6); }
@media (min-width: 1024px) {
	.em-shop-filters-toggle { display: none; }
	.em-shop-filters-header { display: none !important; }
	.em-shop-filters {
		display: flex !important;
		position: static;
		width: auto;
		box-shadow: none;
		z-index: auto;
		animation: none !important;
	}
	.em-shop-filters-body { padding: 0; overflow: visible; }
}
.em-shop-filter-form {
	display: flex;
	flex-direction: column;
	gap: var(--s6);
}
.em-shop-filter-label {
	color: var(--ink-500);
	margin-bottom: var(--s3);
}
.em-shop-filter-row {
	display: flex;
	align-items: center;
	gap: var(--s2);
	padding-block: var(--s1);
	cursor: pointer;
	min-height: 36px;
}
.em-shop-filter-row input[type="checkbox"] {
	accent-color: var(--ink-900);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.em-shop-main { min-width: 0; }
.em-shop-active-filters {
	display: flex;
	gap: var(--s2);
	flex-wrap: wrap;
	margin-bottom: var(--s4);
}
.em-shop-clear-filters { color: var(--ink-400); }
.em-shop-page .woocommerce-ordering { margin: 0; }
.em-shop-page .woocommerce-ordering select,
.woocommerce .woocommerce-ordering select {
	min-height: 40px;
	width: auto;
	max-width: 100%;
	font-size: .875rem;
	font-family: var(--font);
	/* Extra end padding so the native dropdown arrow isn’t clipped. */
	padding: var(--s2) 2.25rem var(--s2) var(--s3);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-sm);
	background-color: var(--paper);
	color: var(--ink-800);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B6E76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 12px 8px;
}

/* Fixed column counts (not auto-fill) so every product grid on the site —
   Shop, category/tag archives, Related products, Upsells — lands on the
   same column count at a given breakpoint. Auto-fill sized columns purely
   by available width, so a full-width grid (Related products) landed on 5
   while the Shop page's grid (narrower, sidebar takes space) landed on 4. */
/* Deliberately not scoped under .woocommerce — WooCommerce only adds that
   body class on its own core pages (shop/product/cart/checkout/account),
   not on a generic search-results page or every custom product taxonomy
   archive, and this ul.products markup shows up on both. */
ul.products,
ul.products.columns-4 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(16px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}
@media (min-width: 640px) {
	ul.products,
	ul.products.columns-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	ul.products,
	ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
}
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}
ul.products li.product {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	clear: none !important;
	margin: 0 !important;
	height: 100%;
	display: flex;
}
ul.products li.product > .em-card { width: 100%; }

/* Product card ATC — outline button + qty stepper (Figma). */
.em-card-actions .em-card-atc,
.em-card-actions .em-card-atc-btn,
.em-card-actions .em-card-qty {
	flex: 1;
	min-width: 0;
}
.em-card-actions a.button,
.em-card-actions button.button,
.em-card-actions a.add_to_cart_button,
.em-card-actions a.product_type_simple,
.em-card-actions .em-card-atc-btn,
.woocommerce ul.products .em-card-actions a.button,
.woocommerce .em-card .em-card-actions a.button,
.woocommerce .em-card .em-card-actions a.add_to_cart_button {
	flex: 1;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	min-height: 44px;
	padding-block: var(--s3);
	padding-inline: var(--s4);
	background: var(--paper) !important;
	color: var(--accent-600) !important;
	border: 1px solid var(--accent-600) !important;
	border-radius: var(--r-sm);
	box-shadow: none !important;
	font-family: var(--font);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
}
.em-card-actions a.button:hover,
.em-card-actions a.add_to_cart_button:hover,
.em-card-actions .em-card-atc-btn:hover:not(:disabled),
.woocommerce ul.products .em-card-actions a.button:hover,
.woocommerce .em-card .em-card-actions a.button:hover {
	background: var(--accent-600) !important;
	color: var(--paper) !important;
	border-color: var(--accent-600) !important;
}
.em-card-actions .em-card-atc-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* Hide WC “View cart” after AJAX add — stepper replaces it on cards only. */
.em-card-actions .added_to_cart,
.em-card .added_to_cart,
.woocommerce ul.products .added_to_cart,
.woocommerce .em-card a.added_to_cart.wc-forward {
	display: none !important;
}

.em-card-atc {
	display: flex;
	align-items: stretch;
}
.em-card-qty {
	display: flex;
	align-items: center;
	height: 44px;
	border: 1px solid var(--ink-900);
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--paper);
}
.em-card-qty[hidden],
.em-card-atc-btn[hidden] {
	display: none !important;
}
.em-card-qty-btn {
	flex: 1;
	align-self: stretch;
	height: 100%;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	margin: 0;
	padding: 0 !important;
	box-sizing: border-box;
	cursor: pointer;
	font-family: var(--font);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--ink-700);
	line-height: 1;
	transition: background .12s;
}
.em-card-qty-btn:hover {
	background: var(--ink-50);
}
.em-card-qty-minus,
.em-card-qty-bin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
	/* More empty space was showing above — shift glyphs up optically. */
	transform: translateY(-1px);
}
.em-card-qty-bin { display: none; }
.em-card-qty-btn.is-remove .em-card-qty-minus { display: none; }
.em-card-qty-btn.is-remove .em-card-qty-bin { display: inline-flex; }
.em-card-qty-btn[data-em-qty-plus] {
	/* Keep the hit area full-height; padding pushes the “+” up optically. */
	padding-bottom: 2px !important;
}
.em-card-qty-val {
	min-width: 32px;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 4px;
	text-align: center;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--ink-900);
	font-variant-numeric: tabular-nums;
	border-inline: 1px solid var(--ink-200);
	line-height: 1;
}

/* Sale price — explicit card class (not WC <ins>). */
.em-card .em-price-number.sale,
.woocommerce .em-card .em-price-number.sale,
.em-rail-card .em-price-number.sale {
	color: #E5341C !important;
}

.woocommerce nav.woocommerce-pagination {
	margin-top: var(--s10);
	border: none !important;
}
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	gap: var(--s2);
	list-style: none;
	padding: 0;
	margin: 0;
	justify-content: center;
	border: none !important;
	background: none !important;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: none !important;
	overflow: visible;
	background: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	border-radius: var(--r-sm);
	border: 1px solid var(--ink-200);
	background: var(--paper);
	font-size: .875rem;
	font-weight: 500;
	color: var(--ink-700);
	text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--accent-600);
	color: var(--paper);
	border-color: var(--accent-600);
}

.woocommerce div.product .woocommerce-product-gallery { max-width: 100%; }
.woocommerce div.product div.images { position: relative; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.5rem; font-weight: 700; color: var(--ink-900); }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { text-decoration: none; color: var(--sale); }
.woocommerce div.product p.price del, .woocommerce div.product span.price del { color: var(--ink-400); font-size: .875rem; opacity: 1; }
.woocommerce .quantity .qty { min-height: 48px; width: 64px; text-align: center; }
.woocommerce div.product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding-block: var(--s3); padding-inline: var(--s5);
  border-radius: var(--r-sm); border: none; cursor: pointer;
  font-family: var(--font); font-size: .9375rem; font-weight: 600;
  background: var(--accent-600); color: var(--paper) !important; text-decoration: none;
  transition: background .15s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce div.product form.cart .button:hover { background: var(--accent-700); }
.woocommerce div.product form.cart .button { min-height: 52px; }
.woocommerce span.onsale { background: var(--sale-bg); color: var(--sale); border-radius: var(--r-full); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; min-height: 0; min-width: 0; line-height: 1.3; position: absolute; top: var(--s2); left: var(--s2); z-index: 1; }

.woocommerce table.shop_table { border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--ink-200); font-size: .8125rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; }
.woocommerce table.shop_table td { padding: var(--s3); border-bottom: 1px solid var(--ink-100); vertical-align: middle; }

/* ── Cart page (Figma Your Cart) ────────────────────────── */
.em-cart-layout {
	align-items: start;
	width: 100%;
}
.em-cart-main { min-width: 0; }
.em-cart-aside {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: var(--s4);
}
.em-cart-aside .cart-collaterals {
	width: 100%;
	float: none;
}
.woocommerce-cart .em-cart-table {
	border: none !important;
	margin: 0;
	box-shadow: none !important;
	outline: none;
}
.woocommerce-cart .em-cart-table thead th {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-500);
	border: none !important;
	border-bottom: 1px solid var(--ink-200) !important;
	padding: 0 0 var(--s3) !important;
	background: transparent;
	text-align: left !important;
}
.woocommerce-cart .em-cart-table td {
	border: none !important;
	border-bottom: 1px solid var(--ink-100) !important;
	padding: var(--s5) 0 !important;
	background: transparent;
	text-align: left !important;
	vertical-align: middle;
}
/* Desktop: shared grid so headers + cells share the same left edges. */
@media (min-width: 768px) {
	.woocommerce-cart .em-cart-table thead,
	.woocommerce-cart .em-cart-table tbody,
	.woocommerce-cart .em-cart-table thead tr,
	.woocommerce-cart .em-cart-table tbody tr.cart_item {
		display: grid;
		width: 100%;
	}
	.woocommerce-cart .em-cart-table thead tr,
	.woocommerce-cart .em-cart-table tbody tr.cart_item {
		grid-template-columns: minmax(0, 1fr) 128px 112px 40px;
		column-gap: var(--s4);
		align-items: center;
	}
	/* Continuous divider across the row (cell borders break on column-gap). */
	.woocommerce-cart .em-cart-table thead tr {
		border-bottom: 1px solid var(--ink-200);
		padding-bottom: var(--s3);
	}
	.woocommerce-cart .em-cart-table tbody tr.cart_item {
		border-bottom: 1px solid var(--ink-100);
		padding-block: var(--s5);
	}
	.woocommerce-cart .em-cart-table thead th {
		border-bottom: none !important;
		padding: 0 !important;
	}
	.woocommerce-cart .em-cart-table tbody td {
		border-bottom: none !important;
		padding: 0 !important;
	}
	.woocommerce-cart .em-cart-table thead th,
	.woocommerce-cart .em-cart-table tbody td {
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.woocommerce-cart .em-cart-table thead th.product-name,
	.woocommerce-cart .em-cart-table td.product-name { grid-column: 1; }
	.woocommerce-cart .em-cart-table thead th.product-quantity,
	.woocommerce-cart .em-cart-table td.product-quantity { grid-column: 2; }
	.woocommerce-cart .em-cart-table thead th.product-subtotal,
	.woocommerce-cart .em-cart-table td.product-subtotal { grid-column: 3; }
	.woocommerce-cart .em-cart-table thead th.product-remove,
	.woocommerce-cart .em-cart-table td.product-remove {
		grid-column: 4;
		justify-content: flex-end;
	}
	.woocommerce-cart .em-cart-table tbody tr.em-cart-actions-row {
		display: block;
	}
}
.woocommerce-cart .em-cart-table .product-quantity { width: 128px; }
.woocommerce-cart .em-cart-table .product-subtotal {
	width: 112px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink-900);
	white-space: nowrap;
}
.woocommerce-cart .em-cart-table .product-remove { width: 40px; text-align: right; }
.woocommerce-cart .em-cart-qty {
	height: 40px;
	margin: 0;
}
.woocommerce-cart .em-cart-qty .quantity {
	display: contents;
}
.woocommerce-cart .em-cart-product {
	display: flex;
	align-items: center;
	gap: var(--s3);
	min-width: 0;
	width: 100%;
}
.woocommerce-cart .em-cart-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--r-sm);
	overflow: hidden;
	border: 1px solid var(--ink-200);
	background: var(--ink-50);
}
.woocommerce-cart .em-cart-thumb a { display: block; width: 100%; height: 100%; }
.woocommerce-cart .em-cart-thumb img {
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	display: block;
	border: none !important;
	border-radius: 0;
}
.woocommerce-cart .em-cart-product-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.woocommerce-cart .em-cart-product-title {
	font-weight: 500;
	font-size: .875rem;
	color: var(--ink-800);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.woocommerce-cart .em-cart-product-title:hover { color: var(--ink-900); }
.woocommerce-cart .em-cart-product-brand { color: var(--ink-500); margin: 0; }
.woocommerce-cart .em-cart-remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	color: var(--ink-400) !important;
	text-decoration: none !important;
	font-size: 1.25rem;
	line-height: 1;
	border: none !important;
	background: transparent !important;
}
.woocommerce-cart .em-cart-remove:hover { color: var(--ink-700) !important; background: var(--ink-50) !important; }
.woocommerce-cart .em-cart-qty .qty,
.woocommerce-cart .em-cart-qty input.qty {
	width: 44px !important;
	min-width: 44px;
	min-height: 0 !important;
	height: 100%;
	border: none !important;
	border-left: 1px solid var(--ink-200) !important;
	border-right: 1px solid var(--ink-200) !important;
	border-radius: 0 !important;
	padding: 0 !important;
	text-align: center;
	font-weight: 600;
	box-shadow: none !important;
	-moz-appearance: textfield;
}
.woocommerce-cart .em-cart-qty .qty::-webkit-outer-spin-button,
.woocommerce-cart .em-cart-qty .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.woocommerce-cart .em-cart-actions-row td {
	border: none !important;
	border-bottom: none !important;
	padding-top: var(--s4);
}
.woocommerce-cart .em-cart-main,
.woocommerce-cart form.woocommerce-cart-form {
	border: none !important;
	box-shadow: none !important;
	background: transparent;
}
.woocommerce-cart .em-cart-update-btn {
	/* Visually hidden but present for WC update / our JS click. */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
}
.woocommerce-cart .em-cart-summary {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	display: flex;
	flex-direction: column;
	gap: var(--s3);
}
.woocommerce-cart .em-cart-summary-title { margin: 0 0 var(--s2); }
.woocommerce-cart .em-cart-summary .shop_table,
.woocommerce-cart .em-cart-shipping-table {
	width: 100%;
	border: none;
	margin: 0;
}
.woocommerce-cart .em-cart-shipping-table tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s4);
}
.woocommerce-cart .em-cart-shipping-table th,
.woocommerce-cart .em-cart-shipping-table td {
	border: none;
	padding: 0;
	background: transparent;
	font-size: .9375rem;
}
.woocommerce-cart .em-cart-shipping-table th {
	font-weight: 400;
	color: var(--ink-700);
	text-align: left;
}
.woocommerce-cart .em-cart-shipping-table td {
	font-weight: 600;
	color: var(--ink-900);
	text-align: right;
}
.woocommerce-cart .em-cart-free-ship {
	color: var(--accent-600);
	margin: 0;
}
.woocommerce-cart .em-cart-coupon {
	display: flex;
	gap: var(--s2);
	align-items: stretch;
}
.woocommerce-cart .em-cart-coupon .em-input {
	flex: 1;
	min-height: 44px;
	min-width: 0;
}
.woocommerce-cart .em-cart-coupon .em-btn {
	flex-shrink: 0;
	min-height: 44px;
}
.woocommerce-cart .em-cart-cod-note {
	display: flex;
	gap: var(--s2);
	align-items: center;
	padding: var(--s3);
	background: var(--success-bg);
	border-radius: var(--r-sm);
	border: 1px solid var(--success-bg);
	color: var(--success);
}
.woocommerce-cart .em-cart-cod-note svg { flex-shrink: 0; color: var(--success); }
.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
	margin: 0;
}
.woocommerce-cart .em-cart-checkout-btn,
.woocommerce-cart a.checkout-button.em-cart-checkout-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px !important;
	height: auto !important;
	padding: var(--s3) var(--s5) !important;
	background: var(--accent-600) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--r-sm);
	font-family: var(--font);
	font-size: .9375rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: .01em;
	text-decoration: none !important;
	box-shadow: none !important;
}
.woocommerce-cart .em-cart-checkout-btn:hover {
	background: var(--accent-700) !important;
	color: #fff !important;
}
.woocommerce-cart .em-cart-continue {
	display: block;
	text-align: center;
	font-size: .875rem;
	font-weight: 600;
	color: var(--ink-700);
	text-decoration: none;
	padding: 0;
	margin-top: var(--s1);
}
.woocommerce-cart .em-cart-continue:hover { color: var(--ink-900); }
.woocommerce-cart .em-cart-empty,
.em-cart-page-empty .em-cart-empty,
.em-empty-state.em-cart-empty {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--s4);
	padding-block: clamp(3rem, 12vh, 6rem);
	width: 100%;
	box-sizing: border-box;
}
.woocommerce-cart .em-cart-empty .em-empty-icon,
.em-empty-state.em-cart-empty .em-empty-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--ink-100);
	color: var(--ink-800);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.woocommerce-cart .em-cart-empty .em-h3,
.em-empty-state.em-cart-empty .em-h3 {
	margin: 0;
	color: var(--ink-900);
}
.woocommerce-cart .em-cart-empty-copy,
.em-empty-state.em-cart-empty .em-cart-empty-copy {
	margin: 0;
	color: var(--ink-500);
	max-width: 36ch;
}
.woocommerce-cart .em-cart-empty .em-btn,
.em-empty-state.em-cart-empty .em-btn {
	margin-top: var(--s2);
}
/* Hide WC default empty banner / return link when our empty state is present. */
.woocommerce-cart:has(.em-cart-empty) .wc-empty-cart-message,
.woocommerce-cart:has(.em-cart-empty) .return-to-shop,
.em-cart-page-empty .return-to-shop {
	display: none !important;
}
/* Hide the page “Your Cart” H1 when the Figma empty state is on screen. */
.woocommerce-cart:has(.em-cart-empty) .em-container > h1.em-h2 {
	display: none !important;
}

/* Mobile cart — one card per item (not WC’s labeled responsive-table boxes). */
@media (max-width: 767px) {
	.woocommerce-cart .em-cart-layout {
		gap: var(--s6);
	}
	.woocommerce-cart .em-cart-aside {
		position: static;
	}
	.woocommerce-cart .em-cart-table thead {
		display: none;
	}
	.woocommerce-cart .em-cart-table,
	.woocommerce-cart .em-cart-table tbody {
		display: block;
		width: 100%;
	}
	.woocommerce-cart .em-cart-table tr.cart_item {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"product remove"
			"qty price";
		gap: var(--s3) var(--s2);
		align-items: center;
		padding: var(--s4) 0;
		margin: 0;
		border: none !important;
		border-bottom: 1px solid var(--ink-100) !important;
		background: transparent;
		box-shadow: none;
	}
	.woocommerce-cart .em-cart-table tr.cart_item:last-of-type {
		border-bottom: 1px solid var(--ink-200) !important;
	}
	.woocommerce-cart .em-cart-table td {
		display: block;
		width: auto !important;
		max-width: none !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		background: transparent !important;
		text-align: left !important;
		float: none !important;
		clear: none !important;
	}
	/* Kill WC shop_table_responsive “Product:” / “Quantity:” labels. */
	.woocommerce-cart .em-cart-table td::before,
	.woocommerce-cart table.cart td::before,
	.woocommerce-cart .shop_table_responsive tr td::before {
		content: none !important;
		display: none !important;
	}
	.woocommerce-cart .em-cart-table td.product-name {
		grid-area: product;
		min-width: 0;
		padding-inline-end: var(--s2) !important;
	}
	.woocommerce-cart .em-cart-table td.product-remove {
		grid-area: remove;
		justify-self: end;
		align-self: start;
		width: auto !important;
	}
	.woocommerce-cart .em-cart-table td.product-quantity {
		grid-area: qty;
		justify-self: start;
	}
	.woocommerce-cart .em-cart-table td.product-subtotal {
		grid-area: price;
		justify-self: end;
		align-self: center;
		font-size: .9375rem;
		white-space: nowrap;
	}
	.woocommerce-cart .em-cart-product {
		align-items: flex-start;
		gap: var(--s3);
	}
	.woocommerce-cart .em-cart-thumb,
	.woocommerce-cart .em-cart-thumb img {
		width: 56px !important;
		height: 56px !important;
	}
	.woocommerce-cart .em-cart-product-title {
		padding-inline-end: 0;
		-webkit-line-clamp: 3;
	}
	.woocommerce-cart .em-cart-remove {
		color: var(--ink-400) !important;
		width: 40px;
		height: 40px;
	}
	.woocommerce-cart .em-cart-qty {
		height: 36px;
	}
	.woocommerce-cart .em-cart-qty .em-qty-btn {
		width: 36px;
	}
	.woocommerce-cart .em-cart-qty .qty,
	.woocommerce-cart .em-cart-qty input.qty {
		width: 36px !important;
		min-width: 36px;
		font-size: .875rem;
	}
	.woocommerce-cart .em-cart-actions-row {
		display: block;
		border: none !important;
		padding: 0;
	}
	.woocommerce-cart .em-cart-actions-row td {
		padding: 0 !important;
		border: none !important;
	}
	/* Shipping destination / method list — keep tidy on small screens. */
	.woocommerce-cart .em-cart-shipping-table ul {
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: right;
	}
	.woocommerce-cart .em-cart-shipping-table .woocommerce-shipping-destination {
		display: block;
		margin-top: var(--s1);
		font-size: .75rem;
		font-weight: 400;
		color: var(--ink-500);
		line-height: 1.35;
		max-width: 18ch;
		margin-inline-start: auto;
		word-break: break-word;
	}
	.woocommerce-cart .em-summary-card {
		overflow: hidden;
	}
	/* Clearance above floating mobile pill + WhatsApp. */
	.woocommerce-cart .em-cart-aside {
		padding-bottom: 120px;
	}
}

@media (min-width: 768px) {
	.woocommerce-cart .em-cart-aside {
		padding-bottom: 0;
	}
}

.woocommerce-cart table.cart img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--ink-200); }
.woocommerce .cart-collaterals .cart_totals { background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: var(--s5); float: none; width: 100%; max-width: 420px; margin-left: auto; }
.woocommerce .cart-collaterals .cart_totals table { border: none; }
.woocommerce .cart-collaterals .cart_totals table td, .woocommerce .cart-collaterals .cart_totals table th { border: none; padding: var(--s2) 0; }

/* Kill leftover WC #payment grey panel from older rules */
.woocommerce-checkout #payment.em-checkout-payment,
.woocommerce-checkout .em-checkout-payment#payment {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

/* ── Checkout: Figma 4-step wizard ─────────────────────── */
.woocommerce-checkout form.checkout.em-checkout,
form.checkout.woocommerce-checkout.em-checkout {
	display: block;
	width: 100%;
	clear: both;
}
.woocommerce-checkout .em-checkout-pipeline {
	max-width: 480px;
	margin: 0 0 var(--s8);
}
.woocommerce-checkout .em-pipeline-dot {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	background: var(--ink-200);
	border: 2px solid var(--ink-300);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	font: inherit;
	color: inherit;
}
.woocommerce-checkout .em-pipeline-dot.done {
	background: var(--ink-900);
	border-color: var(--ink-900);
}
.woocommerce-checkout .em-pipeline-dot.current {
	background: var(--paper);
	border: 3px solid var(--accent-600);
}
.woocommerce-checkout .em-pipeline-dot:disabled {
	cursor: default;
}
.woocommerce-checkout .em-pipeline-label.current {
	color: var(--accent-600);
	font-weight: 600;
}
.woocommerce-checkout .em-checkout-layout {
	align-items: start;
}
.woocommerce-checkout .em-checkout-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s6);
}
.woocommerce-checkout .em-checkout-aside {
	min-width: 0;
	position: sticky;
	top: 96px;
}
.woocommerce-checkout .em-checkout-customer {
	display: flex;
	flex-direction: column;
	gap: var(--s6);
}
.woocommerce-checkout .em-checkout-step-title {
	margin: 0 0 var(--s4);
}
.woocommerce-checkout .em-checkout-step[hidden],
.woocommerce-checkout [data-em-checkout-with][hidden] {
	display: none !important;
}
.woocommerce-checkout .em-checkout-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s3) var(--s4);
}
.woocommerce-checkout .em-checkout-fields::before,
.woocommerce-checkout .em-checkout-fields::after {
	content: none !important;
	display: none !important;
}
.woocommerce-checkout .em-checkout-fields .form-row {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}
.woocommerce-checkout .em-checkout-fields .form-row-wide,
.woocommerce-checkout .em-checkout-fields .form-row-first,
.woocommerce-checkout .em-checkout-fields .form-row-last {
	grid-column: 1 / -1;
}
.woocommerce-checkout .em-checkout-fields .form-row-first { grid-column: 1; }
.woocommerce-checkout .em-checkout-fields .form-row-last { grid-column: 2; }
@media (max-width: 599px) {
	.woocommerce-checkout .em-checkout-fields { grid-template-columns: 1fr; }
	.woocommerce-checkout .em-checkout-fields .form-row-first,
	.woocommerce-checkout .em-checkout-fields .form-row-last { grid-column: 1; }
}
.woocommerce-checkout .em-checkout-login-hint {
	margin: var(--s2) 0 0;
	color: var(--ink-500);
}
.woocommerce-checkout .em-checkout-login-hint a {
	color: var(--accent-600);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-checkout .em-checkout-login-hint a:hover { text-decoration: underline; }
.woocommerce-checkout input.em-checkout-invalid,
.woocommerce-checkout select.em-checkout-invalid,
.woocommerce-checkout textarea.em-checkout-invalid {
	border-color: var(--error) !important;
}

/* Shipping method cards */
.woocommerce-checkout .em-checkout-ship-package {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
}
.woocommerce-checkout .em-checkout-ship-card {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s4);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-sm);
	cursor: pointer;
	background: var(--paper);
	transition: border-color .15s, background .15s;
}
.woocommerce-checkout .em-checkout-ship-card:has(input:checked),
.woocommerce-checkout .em-checkout-ship-card:has(input[type="hidden"]) {
	border-color: var(--ink-900);
	background: var(--ink-50);
}
.woocommerce-checkout .em-checkout-ship-card input {
	accent-color: var(--ink-900);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin: 0;
}
.woocommerce-checkout .em-checkout-ship-radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 5px solid var(--ink-900);
	flex-shrink: 0;
	box-sizing: border-box;
}
.woocommerce-checkout .em-checkout-ship-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.woocommerce-checkout .em-checkout-ship-name {
	font-weight: 600;
	font-size: .9375rem;
	color: var(--ink-900);
}
.woocommerce-checkout .em-checkout-ship-eta { color: var(--ink-500); }
.woocommerce-checkout .em-checkout-ship-price {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Payment cards — Figma radio rows */
.woocommerce-checkout .em-checkout-payment {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
	border: none !important;
}
.woocommerce-checkout .em-checkout-payment-list,
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	display: flex;
	flex-direction: column;
	gap: var(--s3);
}
.woocommerce-checkout #payment ul.payment_methods::before,
.woocommerce-checkout #payment ul.payment_methods::after {
	display: none !important;
	content: none !important;
}
.woocommerce-checkout .em-checkout-pay-card,
.woocommerce-checkout #payment ul.payment_methods li.em-checkout-pay-card {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: var(--r-sm) !important;
	background: var(--paper) !important;
	width: 100% !important;
	box-sizing: border-box;
	overflow: hidden;
	transition: border-color .15s, background .15s;
}
.woocommerce-checkout .em-checkout-pay-card:has(input:checked),
.woocommerce-checkout #payment ul.payment_methods li.em-checkout-pay-card:has(input:checked) {
	border-color: var(--ink-900) !important;
	background: var(--ink-50) !important;
}
.woocommerce-checkout .em-checkout-pay-hit {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	column-gap: var(--s3);
	align-items: start;
	padding: var(--s4);
	margin: 0;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}
.woocommerce-checkout .em-checkout-pay-hit > input.input-radio {
	margin: 3px 0 0 !important;
	accent-color: var(--ink-900);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	outline: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
}
.woocommerce-checkout .em-checkout-pay-hit > input.input-radio:focus,
.woocommerce-checkout .em-checkout-pay-hit > input.input-radio:focus-visible,
.woocommerce-checkout .em-checkout-pay-card input.input-radio:focus,
.woocommerce-checkout .em-checkout-pay-card input.input-radio:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
}
.woocommerce-checkout .em-checkout-pay-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
	width: 100%;
}
.woocommerce-checkout .em-checkout-pay-title {
	display: block;
	font-weight: 600;
	font-size: .9375rem;
	color: var(--ink-900);
	line-height: 1.35;
}
.woocommerce-checkout .em-checkout-pay-desc {
	display: block;
	font-size: .8125rem;
	font-weight: 400;
	color: var(--ink-500);
	line-height: 1.45;
	max-width: 42rem;
}
.woocommerce-checkout .em-checkout-pay-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	margin-top: var(--s1);
}
.woocommerce-checkout .em-checkout-pay-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 6px 12px;
	border: 1px solid var(--ink-200);
	border-radius: 6px;
	background: #fff;
	box-sizing: border-box;
}
.woocommerce-checkout .em-checkout-pay-logo img {
	display: block !important;
	height: 24px !important;
	width: auto !important;
	max-width: 96px !important;
	object-fit: contain !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.woocommerce-checkout .em-checkout-pay-card .payment_box {
	margin: 0 !important;
	padding: var(--s3) var(--s4) var(--s4) !important;
	padding-left: calc(18px + var(--s3) + var(--s4)) !important;
	background: transparent !important;
	border: none !important;
	border-top: 1px solid var(--ink-200) !important;
	border-radius: 0 !important;
	font-size: .875rem;
	color: var(--ink-600);
	line-height: 1.45;
}
.woocommerce-checkout .em-checkout-pay-card .payment_box::before { display: none !important; }
.woocommerce-checkout .em-checkout-pay-card.payment_method_cod .payment_box {
	display: none !important;
}
.woocommerce-checkout .em-checkout-place-order {
	margin-top: var(--s6) !important;
	float: none !important;
	width: 100% !important;
}
.woocommerce-checkout .em-checkout-place-btn,
.woocommerce-checkout #place_order.em-checkout-place-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	min-height: 48px !important;
	padding: var(--s3) var(--s6) !important;
	background: var(--accent-600) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--r-sm) !important;
	font-size: .9375rem !important;
	font-weight: 600 !important;
	cursor: pointer;
}
.woocommerce-checkout .em-checkout-place-btn:hover {
	background: var(--accent-700) !important;
}
.woocommerce-checkout .em-checkout-nav {
	display: flex;
	justify-content: flex-start;
}
.woocommerce-checkout .em-checkout-continue {
	min-width: 200px;
}
@media (max-width: 1023px) {
	.woocommerce-checkout .em-checkout-aside {
		position: static;
		order: 2;
	}
	.woocommerce-checkout .em-checkout-layout {
		display: flex;
		flex-direction: column;
		gap: var(--s8);
	}
	.woocommerce-checkout .em-checkout-continue,
	.woocommerce-checkout .em-checkout-place-btn {
		width: 100%;
		min-width: 0;
	}
	.woocommerce-checkout .em-checkout-pipeline {
		max-width: none;
	}
}

/* Belt-and-suspenders: guarantee every checkout/cart component spans the
   full container width on mobile, regardless of any narrower width a
   WooCommerce core stylesheet, plugin, or select2's JS-computed inline
   style might otherwise apply (author !important beats inline styles too). */
@media (max-width: 767px) {
	.woocommerce-checkout .em-checkout-layout,
	.woocommerce-checkout .em-checkout-main,
	.woocommerce-checkout .em-checkout-aside,
	.woocommerce-checkout .em-checkout-customer,
	.woocommerce-checkout .em-checkout-step,
	.woocommerce-checkout .em-checkout-fields,
	.woocommerce-checkout .em-checkout-fields .form-row,
	.woocommerce-checkout .em-checkout-fields .form-row input,
	.woocommerce-checkout .em-checkout-fields .form-row select,
	.woocommerce-checkout .em-checkout-fields .form-row textarea,
	.woocommerce-checkout .select2-container,
	.woocommerce-checkout .select2-selection,
	.woocommerce-checkout .em-checkout-ship-package,
	.woocommerce-checkout .em-checkout-ship-card,
	.woocommerce-checkout .em-checkout-payment-list,
	.woocommerce-checkout .em-checkout-pay-card,
	.woocommerce-checkout .em-checkout-place-order,
	.woocommerce-checkout .em-checkout-place-btn,
	.woocommerce-checkout .em-checkout-continue,
	.woocommerce-checkout .em-checkout-summary-wrap,
	.woocommerce-checkout .em-summary-card,
	.woocommerce-checkout .em-checkout-pipeline,
	.woocommerce-cart .em-cart-layout,
	.woocommerce-cart .em-cart-main,
	.woocommerce-cart .em-cart-aside,
	.woocommerce-cart .em-cart-table,
	.woocommerce-cart .em-summary-card,
	.woocommerce-cart .em-cart-cod-note,
	.woocommerce-cart .em-cart-coupon,
	.woocommerce-cart .em-cart-checkout-btn {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* Order summary (aside) */
.woocommerce-checkout .em-checkout-summary-wrap {
	width: 100%;
	clear: both;
}
.woocommerce-checkout .em-checkout-summary-title { margin: 0; }
.woocommerce-checkout .em-checkout-summary-item {
	color: var(--ink-700);
	font-size: .875rem;
	max-width: 65%;
}
.woocommerce-checkout .em-summary-card.woocommerce-checkout-review-order-table {
	width: 100%;
}

/* Account / extra fields on address step */
.woocommerce-checkout .em-checkout-account-fields,
.woocommerce-checkout .em-checkout-shipping-extra {
	margin: 0;
	padding: 0;
	border: none;
}
.woocommerce-checkout .em-checkout-account-fields {
	padding-top: var(--s4);
	border-top: 1px solid var(--ink-200);
}
.woocommerce-checkout #ship-to-different-address {
	font-size: .9375rem;
	font-weight: 600;
	margin: 0 0 var(--s4);
}
.woocommerce-checkout form.woocommerce-form-login {
	max-width: 420px;
	margin: 0 0 var(--s6);
	padding: var(--s5);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-md);
	background: var(--ink-50);
	box-sizing: border-box;
}
.woocommerce-checkout form.woocommerce-form-login > p:first-of-type {
	margin: 0 0 var(--s3);
	color: var(--ink-500);
	font-size: .875rem;
}
.woocommerce-checkout form.woocommerce-form-login .form-row,
.woocommerce-checkout form.woocommerce-form-login .form-row-first,
.woocommerce-checkout form.woocommerce-form-login .form-row-last {
	float: none !important;
	width: 100% !important;
	margin: 0 0 var(--s3) !important;
	clear: both !important;
}
.woocommerce-checkout form.woocommerce-form-login .clear { display: none; }
.woocommerce-checkout form.woocommerce-form-login .the_champ_outer_login_container {
	margin: var(--s3) 0;
}
.woocommerce-checkout form.checkout > .the_champ_outer_login_container,
.woocommerce-checkout form.checkout > .the_champ_outer_login_container + div[style*="clear"],
.woocommerce-checkout .the_champ_login_container,
.woocommerce-checkout .the_champ_outer_login_container,
.woocommerce-checkout .em-checkout .the_champ_login_container,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-info.showlogin,
.woocommerce-checkout .woocommerce-form-login {
	display: none !important;
}
/* Hide checkout coupon notice if a plugin re-adds it. */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
	display: none !important;
}
/* WooCommerce field descriptions (tooltips/helpers) under inputs */
.woocommerce-checkout .em-checkout-fields .woocommerce-input-wrapper .description,
.woocommerce-checkout .em-checkout-fields small.description,
.woocommerce-checkout .em-checkout-fields .input-text + .description,
.woocommerce-checkout #billing_phone_field .description {
	display: none !important;
}
.woocommerce form .form-row { margin-bottom: var(--s4); }
.woocommerce form .form-row label { font-size: .8125rem; font-weight: 500; color: var(--ink-700); display: block; margin-bottom: var(--s1); }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
	background: var(--ink-50) !important;
	color: var(--ink-800) !important;
	border: 1px solid var(--ink-200) !important;
	border-left: 1px solid var(--ink-200) !important;
	border-top: 1px solid var(--ink-200) !important;
	border-radius: var(--r-sm) !important;
	padding: var(--s3) var(--s4) !important;
	list-style: none !important;
	margin: 0 0 var(--s5) !important;
	box-shadow: none !important;
	font-size: .875rem;
	line-height: 1.45;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2) var(--s4);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none !important;
	content: none !important;
}
.woocommerce-message {
	background: var(--success-bg) !important;
	border-color: color-mix(in srgb, var(--success) 28%, var(--ink-200)) !important;
	color: var(--ink-800) !important;
}
.woocommerce-info {
	background: var(--ink-50) !important;
	color: var(--ink-700) !important;
}
.woocommerce-error {
	background: var(--error-bg) !important;
	border-color: color-mix(in srgb, var(--error) 28%, var(--ink-200)) !important;
	color: var(--error) !important;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: var(--accent-600) !important;
	font-weight: 600;
	text-decoration: none;
	background: none !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce-message a:hover,
.woocommerce-info a:hover {
	text-decoration: underline;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: none !important;
	margin: 0 0 0 auto !important;
	padding: var(--s2) var(--s3) !important;
	min-height: 36px;
	background: var(--paper) !important;
	color: var(--ink-800) !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: var(--r-sm) !important;
	font-size: .8125rem !important;
	font-weight: 600 !important;
}
ul.woocommerce-error {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
ul.woocommerce-error li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-form-row, .woocommerce form p { margin-bottom: var(--s4); }

.star-rating { color: var(--ink-900); }
.star-rating span::before { color: var(--ink-900); }

.woocommerce-breadcrumb { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding-block: var(--s4); font-size: .8125rem; color: var(--ink-500); }
.woocommerce-breadcrumb a { color: var(--ink-500); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--ink-800); }

/* ── Mini-cart drawer ──────────────────────────────────────────────
   Full-height sheet (full-screen on phones) that sits above every
   floating plugin widget (e.g. the WhatsApp chat button), with a pinned
   Checkout footer so the CTA can never be covered. Does not depend on
   body.woocommerce (absent on Home/Brand/etc.). */
.em-backdrop { z-index: 2147482999; }
.em-drawer,
.em-shop-filters.is-open { z-index: 2147483000; }
body:has(.em-drawer:not([hidden])),
body.em-cart-open { overflow: hidden; }
/* Belt and braces: hide third-party floating chat buttons while a drawer or confirm sheet is open. */
:is(body:has(.em-drawer:not([hidden])), body.em-confirm-open) :is(
	#ht-ctc-chat, .ht-ctc, .joinchat, .chaty, #chaty-widget-0, .wa__btn_popup, .wa__popup_chat_box,
	.qlwapp, #qlwapp, [id*="whatsapp" i], [class*="whatsapp" i], [id*="wa-chat" i]
):not(.em-whatsapp-link):not(.em-whatsapp-icon) { display: none !important; }
@media (max-width: 767px) {
	#em-cart-drawer { width: 100%; max-width: none; height: 100vh; height: 100dvh; }
}

#em-cart-drawer .em-drawer-body {
	flex: 1; min-height: 0; padding: 0; overflow: hidden;
	display: flex; flex-direction: column;
}
#em-cart-drawer .widget_shopping_cart_content {
	flex: 1; min-height: 0; display: flex; flex-direction: column;
}

/* Header: round back button · title + subtitle · "Add items" pill */
#em-cart-drawer .em-cart-drawer-head {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3);
	padding: calc(var(--s3) + env(safe-area-inset-top, 0px)) var(--s4) var(--s3);
	border-bottom: none;
}
.em-cart-drawer-back {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink-200); background: var(--paper);
	color: var(--ink-900); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .15s, border-color .15s;
}
.em-cart-drawer-back:hover { background: var(--ink-50); border-color: var(--ink-300); }
.em-cart-drawer-titles { min-width: 0; }
.em-cart-drawer-title { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.15; color: var(--ink-900); }
.em-cart-drawer-sub { margin: 2px 0 0; font-size: .875rem; color: var(--ink-500); }

/* Scrollable middle: items + popular picks */
#em-cart-drawer .em-mc-scroll {
	flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	padding: var(--s3) var(--s4) var(--s6);
}

/* Items */
#em-cart-drawer .em-mc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s5); }
#em-cart-drawer .em-mc-item {
	display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: var(--s4); align-items: start;
	padding: 0; border: none; position: relative; transition: opacity .25s ease, transform .25s ease;
}
#em-cart-drawer .em-mc-item.is-busy { opacity: .65; }
#em-cart-drawer .em-mc-item.is-removing { opacity: 0; transform: translateX(18px); pointer-events: none; }
#em-cart-drawer .em-mc-thumb {
	width: 96px; height: 96px; border-radius: var(--r-lg); background: var(--ink-50); overflow: hidden;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#em-cart-drawer .em-mc-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; border: 0; border-radius: 0; float: none; margin: 0; box-shadow: none; }
/* WooCommerce styles ul.cart_list li with clearfix ::before/::after (they become stray grid cells), a floated 32px image, bold links and a bordered dl. */
#em-cart-drawer .em-mc-item::before,
#em-cart-drawer .em-mc-item::after { content: none; display: none; }
#em-cart-drawer .em-mc-item { margin: 0; list-style: none; }
#em-cart-drawer .em-mc-item a { display: revert; font-weight: inherit; }
#em-cart-drawer .em-mc-info dl.variation { padding: 0; border: 0; }
#em-cart-drawer .em-mc-info { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s2); min-width: 0; min-height: 96px; padding-block: 2px; }
#em-cart-drawer .em-mc-name {
	font-size: 1rem; font-weight: 500; line-height: 1.3; color: var(--ink-900); text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#em-cart-drawer .em-mc-info dl.variation { margin: 0; font-size: .8125rem; color: var(--ink-500); }
#em-cart-drawer .em-mc-info dl.variation dt, #em-cart-drawer .em-mc-info dl.variation dd { display: inline; margin: 0; }
#em-cart-drawer .em-mc-info dl.variation dd p { display: inline; margin: 0; }
#em-cart-drawer .em-mc-price { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
#em-cart-drawer .em-mc-line .em-price-number { font-size: 1.0625rem; font-weight: 600; }
#em-cart-drawer .em-mc-each { display: inline-flex; align-items: baseline; gap: 6px; font-size: .8125rem; color: var(--ink-500); }
#em-cart-drawer .em-mc-each .em-price-number { font-size: .8125rem; font-weight: 500; color: var(--ink-500); }
#em-cart-drawer .em-mc-qty {
	display: inline-flex; align-items: center; height: 48px; padding: 0 4px;
	border: 1px solid var(--ink-200); border-radius: var(--r-full); background: var(--paper);
}
#em-cart-drawer .em-mc-qty-btn {
	width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--accent-600);
	font-family: var(--font); font-size: 1.5rem; font-weight: 500; line-height: 1; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .1s;
}
#em-cart-drawer .em-mc-qty-btn:hover:not(:disabled) { background: var(--accent-100); }
#em-cart-drawer .em-mc-qty-btn:active:not(:disabled) { transform: scale(.92); }
#em-cart-drawer .em-mc-qty-btn:disabled { opacity: .3; cursor: not-allowed; }
#em-cart-drawer .em-mc-qty-btn .em-mc-bin { display: none; }
#em-cart-drawer .em-mc-qty-btn.is-remove .em-mc-minus { display: none; }
#em-cart-drawer .em-mc-qty-btn.is-remove .em-mc-bin { display: inline-flex; }
#em-cart-drawer .em-mc-qty-val { min-width: 24px; text-align: center; font-size: 1rem; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
@media (max-width: 400px) {
	#em-cart-drawer .em-mc-item { grid-template-columns: 80px minmax(0, 1fr); row-gap: var(--s3); }
	#em-cart-drawer .em-mc-thumb { width: 80px; height: 80px; }
	#em-cart-drawer .em-mc-info { min-height: 80px; }
	#em-cart-drawer .em-mc-qty { grid-column: 2; justify-self: start; height: 44px; }
	#em-cart-drawer .em-mc-qty-btn { width: 36px; height: 36px; }
}

/* Popular picks */
#em-cart-drawer .em-mc-picks { margin-top: var(--s8); }
#em-cart-drawer .em-mc-picks-title { margin: 0 0 var(--s4); font-size: 1.375rem; font-weight: 700; color: var(--ink-900); }
#em-cart-drawer .em-mc-picks-row {
	display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--s4); scrollbar-width: none;
	margin-inline: calc(var(--s4) * -1); padding: 0 var(--s4) var(--s2);
}
#em-cart-drawer .em-mc-picks-row::-webkit-scrollbar { display: none; }
#em-cart-drawer .em-mc-pick { flex: 0 0 min(156px, 40vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
#em-cart-drawer .em-mc-pick-media {
	position: relative; aspect-ratio: 1 / 1; border-radius: 20px; background: var(--ink-50); border: 1px solid var(--ink-200); overflow: hidden;
}
#em-cart-drawer .em-mc-pick-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#em-cart-drawer .em-mc-pick-link img { width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box; border: 0; border-radius: 0; }
#em-cart-drawer .em-mc-pick-badge {
	position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: var(--r-full);
	background: var(--sale-bg); color: var(--sale); font-size: .8125rem; font-weight: 700; line-height: 1.2;
}
#em-cart-drawer .em-mc-pick-add {
	position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	background: var(--paper); color: var(--accent-600); border: 1px solid var(--ink-200);
	box-shadow: 0 2px 8px rgba(11, 11, 12, .12); transition: transform .12s ease, background .15s;
}
#em-cart-drawer .em-mc-pick-add:hover { background: var(--accent-100); }
#em-cart-drawer .em-mc-pick-add:active { transform: scale(.92); }
#em-cart-drawer .em-mc-pick-add.is-loading { opacity: .5; pointer-events: none; }
#em-cart-drawer .em-mc-pick-name {
	font-size: .9375rem; line-height: 1.3; color: var(--ink-900); text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#em-cart-drawer .em-mc-pick-price { font-size: .9375rem; }

/* Empty state */
#em-cart-drawer .em-mini-cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s8) var(--s4) var(--s4); margin: 0; }
#em-cart-drawer .em-mc-empty-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--ink-100); color: var(--ink-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s2); }
#em-cart-drawer .em-mc-empty-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--ink-900); }
#em-cart-drawer .em-mc-empty-sub { margin: 0; color: var(--ink-500); font-size: .9375rem; max-width: 30ch; }
#em-cart-drawer .em-mc-start {
	margin-top: var(--s3); display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s6);
	border-radius: var(--r-full); background: var(--accent-600); color: #fff; font-weight: 600; text-decoration: none;
}
#em-cart-drawer .em-mc-start:hover { background: var(--accent-700); }

/* Pinned footer: subtotal + the original View cart / Checkout buttons (flat — no box, border or shadow) */
#em-cart-drawer .em-mini-cart-footer {
	flex-shrink: 0; margin-top: auto; background: var(--paper);
	padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px));
}
#em-cart-drawer .woocommerce-mini-cart__total {
	display: flex; justify-content: space-between; align-items: baseline;
	font-weight: 700; margin: 0 0 var(--s4);
}
#em-cart-drawer .woocommerce-mini-cart__total .em-price-number { font-size: 1.25rem; font-weight: 700; }
#em-cart-drawer .em-mini-cart-buttons,
#em-cart-drawer p.woocommerce-mini-cart__buttons {
	display: flex !important; flex-direction: column; gap: var(--s3);
	margin: 0; padding: 0; float: none !important; width: 100%;
}
#em-cart-drawer .em-mini-cart-btn,
#em-cart-drawer .woocommerce-mini-cart__buttons a.button,
#em-cart-drawer .woocommerce-mini-cart__buttons a.wc-forward {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 100%; min-height: 48px; padding: var(--s3) var(--s5);
	border-radius: var(--r-sm); font-family: var(--font); font-size: .9375rem; font-weight: 600;
	text-decoration: none !important; text-align: center; box-sizing: border-box;
	float: none !important; visibility: visible !important; opacity: 1 !important;
}
#em-cart-drawer .em-mini-cart-btn--view,
#em-cart-drawer .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
	background: var(--paper) !important; color: var(--ink-900) !important; border: 1px solid var(--ink-200) !important;
}
#em-cart-drawer .em-mini-cart-btn--view:hover,
#em-cart-drawer .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout):hover {
	background: var(--ink-50) !important; border-color: var(--ink-300) !important;
}
#em-cart-drawer .em-mini-cart-btn--checkout,
#em-cart-drawer .woocommerce-mini-cart__buttons a.checkout {
	background: var(--accent-600) !important; color: #fff !important; border: 1px solid var(--accent-600) !important;
}
#em-cart-drawer .em-mini-cart-btn--checkout:hover,
#em-cart-drawer .woocommerce-mini-cart__buttons a.checkout:hover {
	background: var(--accent-700) !important; border-color: var(--accent-700) !important; color: #fff !important;
}
@media (prefers-reduced-motion: reduce) {
	#em-cart-drawer .em-mc-item, #em-cart-drawer .em-mc-pick-add, #em-cart-drawer .em-mc-qty-btn { transition: none; }
}

/* ── Order confirmation (thank-you page) ──────────────────
   Big blue check + one-shot confetti burst so a completed purchase is
   unmistakable — the default page gave no obvious "it worked" signal. */
.em-order-confirm {
	position: relative;
	max-width: 560px;
	margin: 0 auto;
	padding-block: var(--s10) var(--s8);
	text-align: center;
}
.em-order-confirm-icon {
	width: 88px;
	height: 88px;
	margin: 0 auto var(--s6);
	border-radius: 50%;
	background: var(--accent-600);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 32px rgba(42, 68, 232, .28);
	animation: em-order-confirm-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.em-order-confirm-icon--failed {
	background: var(--error);
	box-shadow: 0 12px 32px rgba(198, 40, 40, .28);
}
.em-order-confirm-title { margin: 0 0 var(--s3); }
.em-order-confirm-sub {
	color: var(--ink-600);
	text-align: center;
	margin: 0 0 var(--s8);
}
.em-order-confirm-actions {
	margin: var(--s4) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	justify-content: center;
}
.em-order-overview {
	list-style: none;
	margin: 0 0 var(--s8);
	padding: var(--s5);
	background: var(--ink-50);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-md);
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	text-align: left;
}
.em-order-overview li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s3);
	font-size: .9375rem;
	color: var(--ink-600);
}
.em-order-overview li strong { color: var(--ink-900); font-weight: 600; }

@keyframes em-order-confirm-pop {
	from { transform: scale(.4); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.em-order-confirm-confetti {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.em-order-confirm-confetti span {
	position: absolute;
	top: -12px;
	left: calc(var(--i, 0) * 6.5%);
	width: 8px;
	height: 14px;
	border-radius: 2px;
	opacity: 0;
	animation: em-confetti-fall 1.6s ease-in calc(var(--i, 0) * .06s) 1 both;
}
.em-order-confirm-confetti span:nth-child(4n + 1) { background: var(--accent-600); }
.em-order-confirm-confetti span:nth-child(4n + 2) { background: var(--success); }
.em-order-confirm-confetti span:nth-child(4n + 3) { background: var(--sale); }
.em-order-confirm-confetti span:nth-child(4n) { background: var(--warning); }

@keyframes em-confetti-fall {
	0% { opacity: 1; transform: translateY(0) rotate(0deg); }
	100% { opacity: 0; transform: translateY(220px) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.em-order-confirm-icon { animation: none; }
	.em-order-confirm-confetti { display: none; }
}

/* ── Checkout: double-check confirmation modal ─────────── */
.em-confirm { position: fixed; inset: 0; z-index: 9200; display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.em-confirm[hidden] { display: none; }
.em-confirm-backdrop { position: absolute; inset: 0; background: rgba(11,11,12,.55); animation: emFadeIn .2s ease; }
.em-confirm-dialog {
	position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - var(--s8)); overflow-y: auto;
	background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-modal);
	padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4);
	animation: emConfirmIn .25s ease; outline: none;
}
@keyframes emConfirmIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.em-confirm-dialog h2 { margin: 0; }
.em-confirm-sub { margin: 0; color: var(--ink-500); }
.em-confirm-sub strong { color: var(--accent-600); font-variant-numeric: tabular-nums; }
.em-confirm-progress { height: 8px; border-radius: var(--r-full); background: var(--ink-100); overflow: hidden; }
.em-confirm-progress-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent-600); }
.em-confirm-body { border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); background: var(--ink-50); }
.em-confirm-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.em-confirm-items li { display: flex; justify-content: space-between; gap: var(--s3); font-size: .9375rem; color: var(--ink-800); }
.em-confirm-items li span:last-child { font-weight: 600; white-space: nowrap; }
.em-confirm-meta { margin: 0; display: flex; flex-direction: column; gap: var(--s2); border-top: 1px solid var(--ink-200); padding-top: var(--s3); }
.em-confirm-meta div { display: flex; flex-direction: column; gap: 2px; }
.em-confirm-meta dt { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
.em-confirm-meta dd { margin: 0; font-size: .9375rem; color: var(--ink-900); }
.em-confirm-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--ink-200); padding-top: var(--s3); font-size: 1.0625rem; }
.em-confirm-total strong { font-size: 1.25rem; }
.em-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
body.em-confirm-open { overflow: hidden; }
@media (max-width: 480px) {
	.em-confirm { align-items: flex-end; padding: 0; }
	.em-confirm-dialog { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ── Thank-you: cancel order → call / copy sheet ───────── */
.em-order-cancel-row { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin: 0 0 var(--s8); }
.em-order-cancel-row .em-caption { margin: 0; color: var(--ink-500); }
.em-order-cancel-btn { border-color: var(--ink-300); color: var(--ink-700); }
.em-order-cancel-btn:hover:not(:disabled) { background: var(--ink-50); color: var(--error); border-color: var(--error); }
.em-cancel-sheet .em-confirm-dialog { text-align: left; }
.em-cancel-x { position: absolute; top: var(--s3); right: var(--s3); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ink-500); border-radius: var(--r-full); cursor: pointer; }
.em-cancel-x:hover { background: var(--ink-100); color: var(--ink-900); }
.em-cancel-text { margin: 0; color: var(--ink-600); }
.em-cancel-number { display: flex; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s4); border: 1px solid var(--ink-200); border-radius: var(--r-md); background: var(--ink-50); text-decoration: none; color: var(--accent-600); font-size: 1.375rem; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.em-cancel-number:hover { border-color: var(--accent-600); }
.em-cancel-sheet .em-confirm-actions .em-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); text-decoration: none; }
.em-cancel-sheet .em-btn.is-copied { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.em-cancel-order-no { margin: 0; text-align: center; color: var(--ink-500); }

/* ── Delivery cutoff pill ──────────────────────────────── */
.em-cutoff {
	position: fixed; z-index: 9100; left: 0; right: 0; margin-inline: auto; width: fit-content;
	max-width: calc(100vw - 24px); top: calc(env(safe-area-inset-top, 0px) + 12px);
	opacity: 0; transform: translateY(-160%); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), opacity .3s ease;
	touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.em-cutoff[hidden] { display: none; }
.em-cutoff.is-visible { opacity: 1; transform: translateY(0); }
.em-cutoff.is-leaving { opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.em-cutoff.is-dragging { transition: none; cursor: grabbing; }
body.admin-bar .em-cutoff { top: 44px; }
@media (max-width: 782px) { body.admin-bar .em-cutoff { top: 58px; } }
.em-cutoff-pill {
	display: flex; align-items: center; gap: var(--s3);
	padding: 8px 8px 8px 10px; border-radius: var(--r-full);
	background: var(--paper); border: 1px solid var(--ink-200);
	box-shadow: 0 10px 30px rgba(11, 11, 12, .16), 0 2px 6px rgba(11, 11, 12, .06);
	transform-origin: 50% 0;
}
.em-cutoff-icon {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent-100); color: var(--accent-600);
}
.em-cutoff-text { font-size: .875rem; line-height: 1.3; color: var(--ink-800); font-weight: 500; }
.em-cutoff-time { color: var(--accent-600); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-cutoff-x {
	flex-shrink: 0; width: 28px; height: 28px; border: none; border-radius: 50%; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ink-100); color: var(--ink-600); transition: background .15s, color .15s;
}
.em-cutoff-x:hover { background: var(--ink-200); color: var(--ink-900); }
.em-cutoff-pill.is-wiggle { animation: emCutoffWiggle .9s ease-in-out; }
@keyframes emCutoffWiggle {
	0%, 100% { transform: rotate(0); }
	15% { transform: rotate(-3.5deg) translateX(-2px); }
	30% { transform: rotate(3deg) translateX(2px); }
	45% { transform: rotate(-2.5deg) translateX(-1px); }
	60% { transform: rotate(2deg) translateX(1px); }
	75% { transform: rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
	.em-cutoff { transition: opacity .2s ease; transform: none; }
	.em-cutoff-pill.is-wiggle { animation: none; }
}
@media (max-width: 480px) { .em-cutoff-text { font-size: .8125rem; } }

/* ── Checkout confirmation: warning copy + duplicate-order guard ───── */
.em-confirm-terms { border-radius: var(--r-md); background: var(--warning-bg); border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent); padding: var(--s4); }
.em-confirm-terms-title { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); font-size: .875rem; font-weight: 700; color: var(--ink-900); }
.em-confirm-terms-title svg { color: var(--warning); flex-shrink: 0; }
.em-confirm-terms ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--s2); }
.em-confirm-terms li { font-size: .8125rem; line-height: 1.45; color: var(--ink-700); }
.em-confirm-dup {
	display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4);
	border-radius: var(--r-md); background: var(--sale-bg); border: 1px solid color-mix(in srgb, var(--error) 35%, transparent); color: var(--ink-900);
}
.em-confirm-dup[hidden], .em-confirm-sub[hidden] { display: none; }
.em-confirm-dup svg { flex-shrink: 0; color: var(--error); margin-top: 1px; }
.em-confirm-dup p { margin: 0; font-size: .875rem; line-height: 1.45; }
.em-confirm-dup strong { display: block; margin-bottom: 2px; }
.em-confirm.is-dup .em-confirm-progress { display: none; }
/* Keep the checkout confirmation buttons reachable when the content scrolls (e.g. duplicate-order warning on a phone). Scoped to #em-confirm: in the cancel-order sheet the order-number caption sits below the buttons and must not be covered.
   The negative bottom/margin make the bar sit flush with the sheet's bottom edge (past its padding) without changing the end-of-scroll layout. */
#em-confirm .em-confirm-dialog > .em-confirm-actions {
	position: sticky; bottom: calc(var(--s6) * -1); margin-top: auto; margin-bottom: calc(var(--s6) * -1);
	background: var(--paper);
	padding: var(--s3) 0 calc(var(--s4) + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -14px 14px -10px var(--paper);
}
#em-confirm .em-confirm-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
#em-confirm .em-confirm-actions .em-btn { padding-inline: var(--s3); line-height: 1.2; text-align: center; text-wrap: balance; }

/* Scroll lock (see setScrollLock() in site.js): iOS ignores body overflow, so the page is frozen with position: fixed. */
html.em-scroll-locked { overflow: hidden; }

/* ── Order confirmation / view order: themed details + addresses ───── */
.em-od, .em-od-customer { text-align: left; margin-top: var(--s8); }
.em-od { border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.em-od-title { margin: 0; padding: var(--s4) var(--s5); font-size: 1.125rem; font-weight: 700; color: var(--ink-900); border-bottom: 1px solid var(--ink-100); }
.em-od-items { list-style: none; margin: 0; padding: var(--s2) var(--s5); }
.em-od-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--ink-100); }
.em-od-item:last-child { border-bottom: 0; }
.em-od-thumb { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--ink-50); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.em-od-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; border: 0; border-radius: 0; margin: 0; }
.em-od-info { min-width: 0; font-size: .9375rem; line-height: 1.4; color: var(--ink-900); }
.em-od-name a { color: var(--ink-900); font-weight: 500; text-decoration: none; }
.em-od-name a:hover { color: var(--accent-600); }
.em-od-qty { color: var(--ink-500); font-weight: 600; white-space: nowrap; }
.em-od-info .wc-item-meta { list-style: none; margin: 2px 0 0; padding: 0; font-size: .8125rem; color: var(--ink-500); }
.em-od-info .wc-item-meta li { display: inline; margin: 0; }
.em-od-info .wc-item-meta p { display: inline; margin: 0; }
.em-od-price { font-size: .9375rem; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-od-note { padding: var(--s2) 0 var(--s3); font-size: .875rem; color: var(--ink-600); }
.em-od-totals { padding: var(--s4) var(--s5); background: var(--ink-50); border-top: 1px solid var(--ink-100); display: flex; flex-direction: column; gap: var(--s2); }
.em-od-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); font-size: .9375rem; color: var(--ink-600); }
.em-od-row-value { color: var(--ink-900); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.em-od-row-value small { font-weight: 400; color: var(--ink-500); }
.em-od-row.is-total { margin-top: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--ink-200); font-size: 1.0625rem; color: var(--ink-900); }
.em-od-row.is-total .em-od-row-label { font-weight: 700; }
.em-od-row.is-total .em-od-row-value { font-size: 1.25rem; font-weight: 700; }
.em-od-row--note { align-items: flex-start; }
.em-od-actions { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s4) var(--s5); border-top: 1px solid var(--ink-100); }

.em-od-cards { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 640px) { .em-od-cards:not(.is-single) { grid-template-columns: 1fr 1fr; } }
.em-od-card { border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: var(--paper); padding: var(--s5); }
.em-od-card-title { margin: 0 0 var(--s3); padding: 0; font-size: 1.0625rem; font-weight: 700; color: var(--ink-900); text-align: left; }
/* Specificity matches WooCommerce's `.woocommerce .woocommerce-customer-details address` box + icon rules. */
.woocommerce-customer-details.em-od-customer address.em-od-address {
	font-style: normal; font-size: .9375rem; line-height: 1.6; color: var(--ink-800);
	border: 0; border-radius: 0; padding: 0; margin: 0; width: auto;
}
.woocommerce-customer-details.em-od-customer .em-od-card .em-od-contact {
	display: flex; align-items: center; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; color: var(--ink-800); word-break: break-word;
}
.woocommerce-customer-details.em-od-customer .em-od-card .em-od-contact + .em-od-contact { margin-top: var(--s2); }
.woocommerce-customer-details.em-od-customer .em-od-card .em-od-contact::before { content: none; display: none; }
.woocommerce-customer-details.em-od-customer .em-od-contact svg { flex-shrink: 0; color: var(--ink-500); }

/* Confirm sheet: the dialog is a scrolling flex column, so children must not shrink
   (the progress bar collapsed to 0 height) and the sheet sits above any floating chat button. */
.em-confirm { z-index: 2147483000; }
.em-confirm-dialog > * { flex-shrink: 0; }

/* Footer payment methods: separate, equal-sized tiles (COD glyph + logos). */
.em-site-footer .em-footer-payments { gap: var(--s2); }
.em-site-footer .em-payment-icon,
.em-site-footer .em-payment-icon--logo {
	box-sizing: border-box; flex: 0 0 auto; width: 64px; height: 40px; padding: 6px 8px;
	border: 1px solid var(--ink-200); border-radius: var(--r-sm, 6px); background: #fff;
	display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.em-site-footer .em-payment-icon--logo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.em-site-footer .em-payment-icon--logo svg { display: block; width: 24px; height: 24px; flex: none; }

/* Footer payment logos: tiles stay the same size; logos are enlarged so any empty margin
   baked into the image files is cropped by the tile (overflow: hidden). */
.em-site-footer .em-payment-icon--logo { padding: 0; }
.em-site-footer .em-payment-icon--logo img { transform: scale(1.4); transform-origin: center; }

/* Brand logos arrive pre-cropped, so one box size gives them all the same visual weight. */
.em-brand-pill-logo { width: 104px; height: 40px; }
.em-brand-pill-logo img { max-width: 104px; max-height: 40px; }

/* Brands strip: logos only, one primary-blue hover for every brand. */
.em-brand-pill { padding: var(--s3) var(--s4); }
.em-brand-pill:hover, .em-brand-pill:focus-visible { border-color: var(--accent-600); background: color-mix(in srgb, var(--accent-600) 7%, transparent); }

/* Bundled payment logos are already cropped: no zoom, a little breathing room inside the tile. */
.em-site-footer .em-payment-icon--logo { gap: 0; }
.em-site-footer .em-payment-icon--logo img.em-payment-img-local { transform: none; padding: 5px 6px; box-sizing: border-box; }

/* Delivery cutoff pill: whole message in the primary colour, bold carton icon. */
.em-cutoff-text { color: var(--accent-600); font-weight: 600; }
.em-cutoff-time { color: var(--accent-600); font-weight: 800; }

/* Announcement bar: brand blue. */
.em-announce { background: var(--accent-600); color: var(--paper); }
.em-announce-close { color: rgba(255, 255, 255, .75); }
.em-announce-close:hover { color: var(--paper); }

/* Grouped / bundle / external products keep WooCommerce's form. It was laid out as a flex COLUMN, so the
   Add to cart button's flex-basis became its HEIGHT (a tall, narrow slab). Make it a wrapping ROW:
   the product list takes the full width, then qty + Add to cart + wishlist sit on one line. */
.em-pdp-info form.cart:not(.variations_form) { flex-direction: row; align-items: center; }
.em-pdp-info form.cart:not(.variations_form) > table,
.em-pdp-info form.cart:not(.variations_form) > .woocommerce-grouped-product-list,
.em-pdp-info form.cart:not(.variations_form) > .group_table { flex: 0 0 100%; width: 100%; }
.em-pdp-info form.cart:not(.variations_form) button.single_add_to_cart_button { align-self: center; height: auto; }