/* No page on this site ever legitimately pans sideways, so kill horizontal
   overflow at EVERY width. Two separate causes:

   Desktop — the mega-menu panels below are `width: 100vw`, and 100vw INCLUDES
   the classic vertical scrollbar while the client width excludes it. Centred
   via left:50% + translateX(-50%), each panel spilled ~8px past both edges and
   put a horizontal scrollbar on every page. The panels are full-bleed with 40px
   of inner padding, so clipping that sliver is invisible.

   Mobile — any element wider than the viewport lets a left swipe pan the page
   natively instead of feeding the drawer gesture, and only on pages that
   overflow. Nested scrollers keep their own overflow-x either way.

   Must be `clip` on BODY only: `hidden` turns body into a scroll container,
   which breaks the sticky header (it sticks to body instead of the viewport and
   scrolls away with the page); putting clip on html stops Chrome scrolling the
   document entirely. clip on body clips paint without creating a scroll
   container, and the viewport keeps scrolling via html. */
body {
	overflow-x: clip;
}

.shop-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #F6F6F6;
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(228, 228, 228, 0.7);
}

.shop-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: var(--shop-header-height);
	position: relative;
}

.shop-header__brand img {
	width: 176px;
}

.shop-header__mobile-bar,
.shop-mobile-overlay {
	display: none;
}

.shop-nav--desktop {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
}

.shop-nav__item {
	position: relative;
	flex: 0 0 auto;
}

.shop-nav__item--shell-mega {
	position: static;
}

.shop-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.shop-nav__item:hover > .shop-nav__link,
.shop-nav__link:hover {
	background: var(--shop-border);
}

.shop-nav__link--accent {
	color: var(--shop-blue);
}

.shop-nav__caret {
	display: inline-flex;
	font-size: 14px;
	transition: transform 0.2s ease;
}

/* Caret flips up when the menu item is open (hovered) */
.shop-nav__item:hover > .shop-nav__link .shop-nav__caret {
	transform: rotate(180deg);
}

/* "New" badge above the Teo / OneScreen links */
.shop-nav__link--new {
	position: relative;
}

.shop-nav__new {
	position: absolute;
	top: -2px;
	right: 2px;
	font-size: 10px;
	font-weight: 600;
	font-style: italic;
	line-height: 1;
	color: #e8442a;
	pointer-events: none;
}

.shop-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.shop-header__actions a,
.shop-header__icon-btn,
.shop-header__search-trigger,
.shop-mobile-overlay__close,
.shop-mobile-overlay__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--shop-text);
	font-size: 20px;
	cursor: pointer;
}

/* Cart count badge */
.shop-header__cart {
	position: relative;
}

.shop-header__cart-count {
	position: absolute;
	top: 1px;
	right: -1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 16px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--shop-blue);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.shop-desktop-search-wrap {
	position: relative;
}

.shop-desktop-search {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 40px;
	height: 48px;
	overflow: visible;
	border-radius: 12px;
	background: transparent;
	transition: width 0.26s ease, background-color 0.26s ease;
	z-index: 8;
	/* homePage_design.css (loaded earlier) styles .shop-desktop-search as an
	   absolutely-positioned dropdown that is opacity:0/visibility:hidden by
	   default — those values leak here and hid the whole desktop search (incl.
	   the trigger button). This is the inline expanding-search design, so reset
	   them: the search icon must always be visible, matching the Figma header. */
	top: auto;
	right: auto;
	transform: none;
	opacity: 1;
	visibility: visible;
}

.shop-desktop-search.is-open {
	width: var(--shop-desktop-search-width);
	background: #f7f7f9;
}

.shop-desktop-search input {
	position: absolute;
	left: 16px;
	right: 52px;
	width: auto;
	padding: 0;
	border: 0;
	background: transparent;
	outline: none;
	color: var(--shop-text);
	font-size: 18px;
	font-style: italic;
	font-weight: 500;
	line-height: 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.14s ease;
}

.shop-desktop-search.is-open input {
	opacity: 1;
	pointer-events: auto;
}

.shop-desktop-search input::placeholder {
	color: var(--shop-muted);
	opacity: 1;
}

.shop-header__search-trigger {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
}

.shop-desktop-search.is-open .shop-header__search-trigger {
	background: transparent;
	color: var(--shop-text);
}

.shop-desktop-search__recent {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	padding: 6px;
	background: var(--shop-white);
	border-radius: 0 0 12px 12px;
	box-shadow: var(--shop-shadow);
}

.shop-desktop-search__recent p {
	margin: 0;
	padding: 12px 10px;
	color: var(--shop-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
}

.shop-desktop-search__recent ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

.shop-desktop-search__recent li {
	border-radius: 12px;
}

/* The recent-search rows are <a> elements (not <button>). Without this they
   inherit the generic cart/account icon-button rule — `.shop-header__actions a`
   (40px) — which locks each link to an icon-sized box and pushes/wraps the term
   out of the dropdown. The selector below carries three classes (.shop-page +
   the two search classes) to reach (0,3,2) and win outright. Style them as
   full-width, left-aligned rows; the parent <li> already supplies
   height/padding/font (core.css), so the link just fills the row and flows its
   text on one line. */
.shop-page .shop-desktop-search .shop-desktop-search__recent li a {
	display: block;
	width: 100%;
	height: auto;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.shop-desktop-search__recent li span {
	font-weight: 600;
}

.shop-mega-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: max(calc(var(--shop-mega-menu-edge) * -1), calc((100vw - var(--shop-shell)) / 2 * -1));
	padding: 34px 38px 30px;
	background: #F6F6F6;
	border-radius: 20px;
	box-shadow: var(--shop-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	max-width: calc(100vw - 48px);
}

.has-mega:hover .shop-mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Set by SiteHeader.vue right after a route change while the pointer is still
 * parked on the link that was clicked: keep the menu closed until the pointer
 * leaves the item and hovers again. */
.has-mega--suppressed:hover .shop-mega-menu {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
}

.shop-mega-menu--modupro {
	top: calc(100% - 30px);
	left: 50%;
	width: 100vw;
	max-width: none;
	padding: 44px 0 36px;
	border-radius: 0;
	transform: translate(-50%, 10px);
}

.shop-mega-menu--charlie {
	top: calc(100% - 30px);
	left: 50%;
	width: 100vw;
	max-width: none;
	padding: 44px 0 36px;
	border-radius: 0;
	transform: translate(-50%, 10px);
}

.shop-mega-menu--licensure {
	top: calc(100% - 30px);
	left: 50%;
	width: 100vw;
	max-width: none;
	padding: 44px 0 36px;
	border-radius: 0;
	transform: translate(-50%, 10px);
}

.shop-mega-menu--accessories {
	top: calc(100% - 30px);
	left: 50%;
	width: 100vw;
	max-width: none;
	padding: 44px 0 36px;
	border-radius: 0;
	transform: translate(-50%, 10px);
}

/* The full-bleed panels share the header's #F6F6F6, so without an edge they
   bleed into the page. Shadow on the bottom only: the negative spread keeps it
   out from under the header above and off the (clipped) sides. */
.shop-mega-menu--modupro,
.shop-mega-menu--charlie,
.shop-mega-menu--licensure,
.shop-mega-menu--accessories {
	box-shadow: 0 14px 20px -10px rgba(20, 33, 50, 0.18);
}

.shop-mega-menu__grid {
	display: grid;
	gap: 28px;
}

.shop-mega-menu--modupro .shop-mega-menu__grid {
	width: min(var(--shop-shell), calc(100vw - 48px));
	margin: 0 auto;
	/* Restorative · Pedo · Endo · Hygiene/Perio · Local Anesthesia. Five 200px
	 * columns + four 56px gaps = 1224px, inside the grid's minimum width above
	 * the 1280px breakpoint (below it the menu drops to two columns). */
	grid-template-columns: repeat(5, 200px);
	column-gap: 56px;
	row-gap: 0;
	justify-content: flex-start;
}

.shop-mega-menu--charlie .shop-mega-menu__grid,
.shop-mega-menu--licensure .shop-mega-menu__grid {
	width: min(var(--shop-shell), calc(100vw - 48px));
	margin: 0 auto;
	grid-template-columns: repeat(3, 200px);
	column-gap: 56px;
	row-gap: 0;
	justify-content: flex-start;
}

/* Charlie is two columns (Manikin + Titan); licensure above keeps three. Tracks
   are a fixed 200px, so a stale third track wouldn't show — but it would once
   these become fractional, so keep the count honest. */
.shop-mega-menu--charlie .shop-mega-menu__grid {
	grid-template-columns: repeat(2, 200px);
}

.shop-mega-menu--accessories .shop-mega-menu__grid {
	width: min(var(--shop-shell), calc(100vw - 48px));
	margin: 0 auto;
	grid-template-columns: repeat(7, minmax(160px, 200px));
	justify-content: space-between;
	column-gap: 0;
	row-gap: 0;
}

/* Inset dropdown content from the shell edges so it has left/right white space */
.shop-mega-menu--modupro .shop-mega-menu__grid,
.shop-mega-menu--charlie .shop-mega-menu__grid,
.shop-mega-menu--licensure .shop-mega-menu__grid,
.shop-mega-menu--accessories .shop-mega-menu__grid {
	box-sizing: border-box;
	padding-inline: 40px;
}

/* ModuPro / Charlie / Licensure indent their columns so they begin under the
   navigation, leaving the logo-width of empty space on the left (per the Figma
   design — content starts ~260px in from the shell edge). Accessories is the
   exception: it has seven columns and keeps the full-width 40px inset. */
.shop-mega-menu--modupro .shop-mega-menu__grid,
.shop-mega-menu--charlie .shop-mega-menu__grid,
.shop-mega-menu--licensure .shop-mega-menu__grid {
	padding-left: 204px;
	padding-right: 40px;
}

.shop-mega-menu--accessories .shop-mega-menu__column {
	width: min(200px, 100%);
}

.shop-mega-menu--accessories .shop-mega-menu__image-wrap {
	width: 160px;
	margin-bottom: 24px;
}

.shop-mega-menu--accessories .shop-mega-menu__column h3 {
	margin-bottom: 14px;
}

.shop-mega-menu--accessories .shop-mega-menu__column ul {
	gap: 10px;
}

.shop-mega-menu--accessories .shop-mega-menu__column li {
	line-height: 1.15;
}

.has-mega:hover .shop-mega-menu--accessories {
	transform: translate(-50%, 0);
}

.has-mega:hover .shop-mega-menu--modupro,
.has-mega:hover .shop-mega-menu--charlie,
.has-mega:hover .shop-mega-menu--licensure {
	transform: translate(-50%, 0);
}

.shop-mega-menu__column {
	min-width: 0;
}

.shop-mega-menu__image-wrap {
	height: 120px;
	margin-bottom: 24px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}

.shop-mega-menu__image-wrap img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.shop-mega-menu__column h3 {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
}

.shop-mega-menu__column ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.shop-mega-menu__column li {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: var(--shop-text);
	white-space: break-spaces;
	width: fit-content;
	max-width: 100%;
	padding: 6px 10px;
	margin-left: -10px;
	border-radius: 5px;
	transition: background-color 0.18s ease;
}

.shop-mega-menu__item-link {
	display: inline-block;
	padding: 0;
	border-radius: 0;
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}

.shop-mega-menu__column li:hover,
.shop-mega-menu__column li:focus-within {
	background: var(--shop-border);
}

.shop-mega-menu__item-link:hover,
.shop-mega-menu__item-link:focus-visible {
	color: inherit;
	outline: none;
}


@media (max-width: 1470px) {
	:root {
		--shop-shell: calc(100vw - 40px);
		--shop-header-height: 92px;
		--shop-desktop-search-width: 300px;
	}

	.shop-header__inner {
		gap: 18px;
	}

	.shop-header__brand img {
		width: 162px;
	}

	.shop-nav--desktop {
		gap: 0;
	}

	.shop-nav__link {
		padding: 8px 8px;
		font-size: 13px;
	}

	.shop-nav__caret {
		font-size: 12px;
	}

	.shop-header__actions {
		gap: 8px;
	}

	.shop-header__actions a,
	.shop-header__search-trigger {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}

	.shop-mega-menu {
		padding: 28px 26px 24px;
	}

	.shop-mega-menu__grid {
		gap: 18px;
	}

	.shop-mega-menu--modupro .shop-mega-menu__grid,
	.shop-mega-menu--charlie .shop-mega-menu__grid,
	.shop-mega-menu--licensure .shop-mega-menu__grid {
		padding-left: 180px;
	}

	.shop-mega-menu__image-wrap {
		height: 96px;
	}

	.shop-mega-menu__column h3 {
		font-size: 15px;
	}

	.shop-mega-menu__column li {
		font-size: 13px;
		line-height: 17px;
	}

}

@media (max-width: 1280px) {
	:root {
		--shop-shell: calc(100vw - 32px);
		--shop-desktop-search-width: 260px;
	}

	.shop-header__inner {
		gap: 14px;
	}

	.shop-header__brand img {
		width: 150px;
	}

	.shop-nav__link {
		padding: 7px 6px;
		font-size: 12px;
	}

	.shop-header__actions {
		gap: 6px;
	}

	.shop-header__actions a,
	.shop-header__search-trigger {
		width: 34px;
		height: 34px;
		font-size: 17px;
	}

	.shop-mega-menu--modupro .shop-mega-menu__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shop-mega-menu--modupro .shop-mega-menu__grid,
	.shop-mega-menu--charlie .shop-mega-menu__grid,
	.shop-mega-menu--licensure .shop-mega-menu__grid {
		padding-left: 164px;
	}

	.shop-mega-menu--accessories .shop-mega-menu__grid {
		grid-template-columns: repeat(4, minmax(160px, 200px));
		gap: 28px 18px;
		justify-content: space-between;
	}
}

@media (max-width: 991px) {
	:root {
		--shop-shell: calc(100vw - 48px);
		--shop-header-height: 92px;
	}

	.shop-shell {
		max-width: calc(100% - 64px);
		margin: 0px 32px;
	}

	.shop-header__inner {
		display: none;
	}

	.shop-header__mobile-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: var(--shop-header-height);
	}

	.shop-header__brand--mobile img {
		width: 36px;
	}

	/* Bigger tap targets for the top-right action icons (search / cart /
	   account / menu) — 44px is the accessible minimum and reads clearly at
	   low resolutions. */
	.shop-header__actions--mobile .shop-header__icon-btn {
		width: 44px;
		height: 44px;
		font-size: 22px;
	}

	.shop-mobile-overlay {
		position: fixed;
		inset: 0;
		z-index: 70;
		background: var(--shop-subtle);
		height: 100dvh;
		overflow: hidden;
		overscroll-behavior: contain;
	}

	.shop-mobile-overlay.is-active {
		display: block;
	}

	/* body { overflow-x: clip } used to live here, mobile-only. It is now
	   unconditional at the top of this file — desktop needs it too, for the
	   100vw mega-menu panels. */

	/* The menu drawer is a SIBLING of the header in the DOM (see SiteHeader) —
	   inside it, any header transform/filter became the fixed drawer's
	   containing block and iOS Safari clipped the open menu to the header bar
	   or painted it transparent after the slide. With the drawer outside, the
	   header needs no transform/overflow hacks; it only drops the blur, which
	   is invisible over the opaque #F6F6F6 background and keeps the mobile
	   header off iOS's flaky backdrop-filter compositing path. */
	.shop-header {
		backdrop-filter: none;
	}

	/* The menu overlay is a full-screen drawer: always rendered, parked
	   off-screen right, slid in with a transform so open/close (button or
	   swipe) animates. While a finger is down `.is-dragging` disables the
	   transition and JS drives the transform so the panel tracks the touch;
	   on release the class comes off and the transition animates the rest.
	   The search overlay keeps the plain display toggle. */
	.shop-mobile-overlay:not(.shop-mobile-overlay--search) {
		display: block;
		transform: translateX(100%);
		visibility: hidden;
		pointer-events: none;
		/* pan-y: the browser never claims horizontal movement on the open
		   drawer as a native scroll, so the swipe-right-to-close drag always
		   reaches the JS handlers; vertical menu scrolling stays native. */
		touch-action: pan-y;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
	}

	.shop-mobile-overlay:not(.shop-mobile-overlay--search).is-active {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.shop-mobile-overlay:not(.shop-mobile-overlay--search).is-dragging {
		visibility: visible;
		pointer-events: auto;
		transition: none;
	}

	.shop-mobile-overlay__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28px 28px 0;
	}

	.shop-mobile-overlay__top--root {
		justify-content: space-between;
		padding: 28px 28px 0;
	}

	/* Root collapse arrow only appears once a dropdown is open. */
	.shop-mobile-overlay__top--root .shop-mobile-overlay__back {
		visibility: hidden;
	}

	.shop-mobile-overlay.has-open .shop-mobile-overlay__top--root .shop-mobile-overlay__back {
		visibility: visible;
	}

	.shop-mobile-overlay__top--search {
		padding-top: 28px;
	}

	.shop-mobile-overlay__close {
		font-size: 20px;
	}

	.shop-mobile-overlay__close,
	.shop-mobile-overlay__back {
		width: 28px;
		height: 28px;
	}

	/* Single full-height menu screen, laid out as a column so the body can take
	   the remaining height and scroll. The .is-active selector (which the root
	   screen always carries) is required to out-specify the generic
	   `.shop-mobile-overlay__screen.is-active { display: block }` in
	   homePage_design.css — without it the body isn't bounded and can't scroll. */
	.shop-mobile-overlay__screen.is-active {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		background: var(--shop-subtle);
		overflow: hidden;
	}

	.shop-mobile-overlay__body,
	.shop-mobile-search {
		padding: 20px 32px 32px;
	}

	.shop-mobile-overlay__body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.shop-mobile-overlay__group {
		margin-bottom: 16px;
	}

	/* The trigger hugs its content so the chevron sits right after the label
	   (8px gap), matching the Figma root frame both collapsed and expanded. */
	.shop-mobile-overlay__group-trigger {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		width: max-content;
		max-width: 100%;
		height: 42px;
		padding: 6px 10px;
		border: 0;
		background: transparent;
		font-family: inherit;
		font-size: 20px;
		font-weight: 600;
		line-height: 1;
		color: var(--shop-text);
		text-align: left;
		border-radius: 6px;
	}

	.shop-mobile-overlay__group-trigger i {
		font-size: 14px;
	}

	/* Split trigger: the label is a link to the section page; only the chevron
	   button toggles the dropdown. */
	.shop-mobile-overlay__group-link {
		font: inherit;
		color: inherit;
		text-decoration: none;
	}

	/* Hit area padded well past the 14px glyph and pulled back with negative
	   margins so the pill keeps hugging its content — biased right so the hit
	   box never overlaps the label. */
	.shop-mobile-overlay__group-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 14px 14px 14px 4px;
		margin: -14px -14px -14px -4px;
		border: 0;
		background: transparent;
		font-size: inherit;
		color: inherit;
		cursor: pointer;
	}

	/* Open: only the grey pill background changes (the chevron is swapped to
	   point up in JS) — layout already matches the expanded frames. */
	.shop-mobile-overlay__group.is-open > .shop-mobile-overlay__group-trigger {
		background: #E7E7E7;
	}

	/* Inline dropdown panel — expands under its category. Height is animated by
	   JS (max-height ↔ content scrollHeight) for reliable open/close. */
	.shop-mobile-overlay__panel {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease;
	}

	.shop-mobile-overlay__panel-inner {
		padding-top: 16px;
	}

	.shop-mobile-overlay__quick-links {
		display: grid;
		gap: 16px;
		padding-top: 2px;
	}

	.shop-mobile-overlay__quick-links a {
		font-size: 20px;
		font-weight: 600;
		line-height: 1;
		color: var(--shop-blue);
		padding: 6px 10px;
	}

	.shop-mobile-overlay__submenu-group {
		margin-bottom: 28px;
	}

	/* Column titles: Montserrat SemiBold. Figma sizes the first column's title
	   at 20px (Title/H3) and the remaining columns at 18px (Title/H4). */
	.shop-mobile-overlay__submenu-group h3 {
		margin: 0 0 12px;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
	}

	.shop-mobile-overlay__submenu-group:first-of-type h3 {
		font-size: 20px;
	}

	.shop-mobile-overlay__submenu-group ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: 10px;
	}

	/* Items: Montserrat Medium 14px / line-height 18 (Body/Body). */
	.shop-mobile-overlay__submenu-group li {
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
	}

	.shop-mobile-overlay__submenu-group li a {
		color: inherit;
		text-decoration: none;
	}

	.shop-mobile-search__field {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 48px;
		padding: 0 14px 0 16px;
		background: var(--shop-white);
		border-radius: 12px;
	}

	.shop-mobile-search__field input {
		width: 100%;
		border: 0;
		background: transparent;
		font-size: 18px;
		font-weight: 500;
		font-style: italic;
		color: var(--shop-muted);
		outline: none;
	}

	.shop-mobile-search__field i {
		font-size: 24px;
	}

	.shop-mobile-search__go {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;
	}

	.shop-mobile-search__recent {
		padding: 28px 22px 0;
	}

	.shop-mobile-search__recent p {
		margin: 0 0 18px;
		color: var(--shop-muted);
		font-size: 14px;
		font-weight: 500;
	}

	.shop-mobile-search__recent ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: 18px;
	}

	.shop-mobile-search__recent li {
		font-size: 18px;
		font-weight: 500;
		line-height: 1.35;
	}

	.shop-mobile-search__recent li a {
		display: block;
		color: inherit;
		text-decoration: none;
	}

	.shop-mobile-search__recent li span {
		font-weight: 600;
	}
}

@media (max-width: 765px) {
	:root {
		--shop-shell: calc(100vw - 32px);
		--shop-header-height: 86px;
	}

	.shop-header__brand--mobile img {
		width: 36px;
	}
}

@media (max-width: 500px) {
	:root {
		--shop-shell: calc(100vw - 28px);
	}

	.shop-header__actions--mobile {
		gap: 6px;
	}

	/* Keep the enlarged 44px tap targets on small phones instead of shrinking
	   them — accessibility matters most at these low resolutions. */
	.shop-header__actions--mobile .shop-header__icon-btn {
		width: 44px;
		height: 44px;
		font-size: 22px;
	}
	.shop-mobile-overlay__body,
	.shop-mobile-overlay__submenu,
	.shop-mobile-search {
		padding-left: 24px;
		padding-right: 24px;
	}

	.shop-mobile-overlay__group-trigger,
	.shop-mobile-overlay__quick-links a {
		font-size: 18px;
	}
}

@media (max-width: 400px) {
	:root {
		--shop-shell: calc(100vw - 24px);
	}

	.shop-header__brand--mobile img {
		width: 36px;
	}
}

/* ------------------------------------------------------------------ */
/* Cart dropdown (desktop preview of the storefront cart)             */
/* Ported from the Next.js cart-dropdown; read-only, links into /shop. */
/* ------------------------------------------------------------------ */
.shop-cartdd {
	position: relative;
	display: inline-flex;
}

/* Transparent bridge filling the 10px gap between the cart icon and the panel so
   the pointer can cross it without leaving .shop-cartdd (which would close the
   dropdown). Only present while open (v-if in CartDropdown.vue). */
.shop-cartdd__bridge {
	position: absolute;
	top: 100%;
	right: 0;
	height: 12px;
	width: 420px;
	max-width: calc(100vw - 32px);
}

.shop-cartdd__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 420px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-radius-lg);
	box-shadow: var(--shop-shadow);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 60;
}

.shop-cartdd__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.shop-cartdd__head {
	padding: 16px 20px;
	text-align: center;
	border-bottom: 1px solid var(--shop-border);
}

.shop-cartdd__head h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.shop-cartdd__list {
	list-style: none;
	margin: 0;
	padding: 16px;
	display: grid;
	gap: 20px;
	max-height: 402px;
	overflow-y: auto;
	/* overflow-y:auto alone makes overflow-x compute to `auto` too, so any few-px
	   horizontal overflow shows an ugly scrollbar. Names wrap now, so nothing
	   needs horizontal scroll — pin it hidden. */
	overflow-x: hidden;
}

.shop-cartdd__item {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
}

/* NOTE on specificity: the generic `.shop-header__actions a` (40px) and the
   per-page `body.<page> .shop-header__actions a` (88px, (0,2,2)) icon-button
   rules match EVERY <a> inside the actions bar — including the dropdown's
   thumbnail/title/button links, which they'd crush into round icon boxes (same
   trap as the recent-search rows above). Every anchor rule below therefore
   carries three classes `(0,3,0)` to outrank (0,2,2), and explicitly resets
   width/height so it doesn't inherit the 40/88px box. */
.shop-cartdd .shop-cartdd__panel .shop-cartdd__thumb {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: var(--shop-radius-sm);
	overflow: hidden;
	background: var(--shop-blue-soft);
}

.shop-cartdd__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shop-cartdd__thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--shop-blue);
	font-size: 22px;
}

/* The 1fr grid cell. Without min-width:0 a long (nowrap-era) title made this
   cell grow past the fixed 420px panel and the name got clipped at the edge.
   min-width:0 lets the row/info/title shrink so the title wraps instead. */
.shop-cartdd__meta {
	min-width: 0;
}

.shop-cartdd__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.shop-cartdd__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.shop-cartdd .shop-cartdd__panel .shop-cartdd__title {
	/* Plain block wrap — a long name flows onto extra lines. NOT -webkit-box +
	   overflow:hidden line-clamp: that combo shaved a few px off the LEFT edge of
	   every line in this header context (the reported clipping). Full wrap can't
	   clip and matches the storefront dropdown exactly. break-word handles a
	   single token too wide to fit. */
	display: block;
	width: auto;
	height: auto;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: break-word;
}

.shop-cartdd .shop-cartdd__panel .shop-cartdd__title:hover {
	color: var(--shop-blue);
}

.shop-cartdd__variant,
.shop-cartdd__qty {
	font-size: 12px;
	color: var(--shop-muted);
}

.shop-cartdd__price {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.shop-cartdd__foot {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 1px solid var(--shop-border);
}

.shop-cartdd__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 600;
}

.shop-cartdd__subtotal-note {
	font-weight: 400;
	color: var(--shop-muted);
}

.shop-cartdd__subtotal-amount {
	font-size: 15px;
	font-weight: 700;
}

.shop-cartdd .shop-cartdd__panel .shop-cartdd__btn {
	display: block;
	width: 100%;
	height: auto;
	padding: 12px 16px;
	border-radius: var(--shop-radius-sm);
	background: var(--shop-blue);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.shop-cartdd .shop-cartdd__panel .shop-cartdd__btn:hover {
	filter: brightness(0.94);
}

.shop-cartdd__empty {
	padding: 44px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	color: var(--shop-muted);
}

.shop-cartdd__empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--shop-blue-soft);
	color: var(--shop-blue);
	font-size: 24px;
}

/* On the mobile bar (≤991px) the cart trigger is NOT the right-most action, so
   anchoring the 420px panel to the trigger's right edge pushes it off-screen
   left. Below that breakpoint pin the panel to the viewport instead (fixed,
   inset with 16px gutters) so it always fits. */
@media (max-width: 991px) {
	.shop-cartdd__panel {
		position: fixed;
		top: calc(var(--shop-header-height) + 8px);
		right: 16px;
		left: 16px;
		width: auto;
		max-width: none;
	}
}