/* =========================================================================
   Nutraponics Cart & Mini-Cart Redesign (preview)
   Built to 01_Cart_and_Mini_Cart_Developer_Handoff_v1.0 +
   "01 Nutraponics cart.png" / "01.1 Mini-Cart Component Board.png".

   MOCKUP SCALE
   The cart PNG is 864 px native = 0.6 of a 1440 canvas, so every measurement
   below is the mockup value / 0.6. The mockup's own content band works out at
   1360 (40 px gutters); it is built at 1320 instead, because this page — unlike
   the checkout — keeps the site header and footer, and a 1360 content band
   sitting under a 1320 header is the misalignment the client has asked to have
   fixed on page after page. --npcr-band/--npcr-gut inherit the chrome's own
   --np-band/--np-gut, so the band re-mirrors itself at every breakpoint
   automatically and cannot drift at the 1023/1024 boundary.

   SPECIFICITY
   This page is an ordinary page of the site, so the Elementor kit stylesheet
   loads with it. `.elementor-kit-8346 h2 { font-size:44px }` and
   `.elementor-kit-8346 button { background: var(--e-global-color-accent) }`
   are (0,1,1) element rules that beat any single-class rule. Every rule here
   is therefore written as `body.npcr-on .npcr-x` — (0,2,1) — which clears
   them without a single !important.
   ====================================================================== */

body.npcr-on {
	/* Brand tokens — Branding Design Workbook v1.0 / handoff 03 */
	--npcr-forest: #13412E;
	--npcr-pine: #2F6B4F;
	--npcr-ink: #1E1E1E;
	--npcr-muted: #6B6B66;
	--npcr-faint: #8C8C85;

	--npcr-bg: #FCFAF6;
	--npcr-paper: #FFFFFF;
	--npcr-well: #F1EFE8;

	--npcr-line: #E8E5DF;
	--npcr-field: #DFDCD4;

	--npcr-err: #B3261E;
	--npcr-err-bg: #FDF1EF;
	--npcr-err-line: #E7B3AC;
	--npcr-warn: #8A6100;
	--npcr-warn-bg: #FDF6E7;
	--npcr-warn-line: #E6C78A;
	--npcr-ok: #2F6B4F;
	--npcr-ok-bg: #EFF3EC;

	/* Mirrors of the chrome's own band, so the cart lines up with the header
	   at every width without repeating its breakpoint table. */
	--npcr-band: var(--np-band, 1320px);
	--npcr-gut: var(--np-gut, 32px);
	--npcr-side: 420px;
	--npcr-gap: 32px;

	--npcr-r: 8px;
	--npcr-r-card: 12px;
	/* Button radius matched to the shipped site header button
	   (np-global-chrome: body.np-chrome-on .np-btn is 6px). The handoff's
	   token table says "pill"; the chrome is what customers actually see on
	   every other page, and the checkout redesign follows it too. */
	--npcr-btn-r: 6px;
	--npcr-tap: 44px;

	--npcr-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--npcr-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

	--npcr-ease: 200ms cubic-bezier(.4, 0, .2, 1);
}

body.npcr-page { background: var(--npcr-bg); }

/* The element reset weighs nothing: written as `.npcr-page p { margin:0 }` it
   would score (0,1,1) and silently outrank every component rule below it. */
:where(body.npcr-on .npcr-root, body.npcr-on .npcr-mc) :where(h1, h2, h3, p, ul, ol, dl, dd, dt, figure) {
	margin: 0;
	padding: 0;
}
:where(body.npcr-on .npcr-root, body.npcr-on .npcr-mc) :where(ul, ol) { list-style: none; }

body.npcr-on .npcr-root *,
body.npcr-on .npcr-mc * { box-sizing: border-box; }

body.npcr-on .npcr-root,
body.npcr-on .npcr-mc {
	font-family: var(--npcr-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--npcr-ink);
	-webkit-font-smoothing: antialiased;
}

body.npcr-on .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

body.npcr-on .npcr-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

body.npcr-on :focus-visible {
	outline: 2px solid var(--npcr-pine);
	outline-offset: 2px;
	border-radius: 4px;
}

/* The preview replaces the live side cart for this viewer. Its markup is still
   in the DOM (the chrome renders it inline in the header shortcode) but its
   script is dequeued, so it is inert — hidden here so it can never flash. */
body.npcr-mc-on .np-cart,
body.npcr-mc-on .np-cart__scrim { display: none !important; }

/* -------------------------------------------------------------------------
   The band
   ---------------------------------------------------------------------- */

body.npcr-on .npcr-root {
	width: min(100% - (var(--npcr-gut) * 2), var(--npcr-band));
	max-width: var(--npcr-band);
	margin-inline: auto;
	padding-block: 0 84px;
}

/* -------------------------------------------------------------------------
   Buttons — one system for the page and the drawer
   ---------------------------------------------------------------------- */

body.npcr-on .npcr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: var(--npcr-btn-r);
	font-family: var(--npcr-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color var(--npcr-ease), color var(--npcr-ease), border-color var(--npcr-ease);
}

body.npcr-on .npcr-btn--primary {
	background: var(--npcr-forest);
	border-color: var(--npcr-forest);
	color: #fff;
}
body.npcr-on .npcr-btn--primary:hover { background: #0E3325; border-color: #0E3325; color: #fff; }

body.npcr-on .npcr-btn--outline {
	background: var(--npcr-paper);
	border-color: var(--npcr-forest);
	color: var(--npcr-forest);
}
body.npcr-on .npcr-btn--outline:hover { background: var(--npcr-ok-bg); }

body.npcr-on .npcr-btn--block { display: flex; width: 100%; }

body.npcr-on .npcr-btn.is-disabled,
body.npcr-on .npcr-btn[aria-disabled="true"],
body.npcr-on .npcr-btn:disabled {
	background: #C9CFC9;
	border-color: #C9CFC9;
	color: #5E655E;
	cursor: not-allowed;
	pointer-events: none;
}

body.npcr-on .npcr-btn .npcr-i { flex: none; }

/* -------------------------------------------------------------------------
   Fields
   ---------------------------------------------------------------------- */

body.npcr-on .npcr-field {
	width: 100%;
	min-height: var(--npcr-tap);
	height: 52px;
	padding: 0 16px;
	background: var(--npcr-paper);
	border: 1px solid var(--npcr-field);
	border-radius: var(--npcr-r);
	font-family: var(--npcr-sans);
	font-size: 15px;
	color: var(--npcr-ink);
	box-shadow: none;
}
body.npcr-on .npcr-field::placeholder { color: var(--npcr-faint); opacity: 1; }
body.npcr-on .npcr-field:focus { border-color: var(--npcr-pine); }

/* =========================================================================
   CART-01  Page intro
   ====================================================================== */

body.npcr-on .npcr-crumb { padding-block: 26px 22px; font-size: 14px; color: var(--npcr-muted); }
body.npcr-on .npcr-crumb ol { display: flex; flex-wrap: wrap; gap: 8px; }
body.npcr-on .npcr-crumb li + li::before { content: "/"; margin-right: 8px; color: var(--npcr-faint); }
body.npcr-on .npcr-crumb a { color: var(--npcr-muted); text-decoration: none; }
body.npcr-on .npcr-crumb a:hover { color: var(--npcr-forest); text-decoration: underline; }

body.npcr-on .npcr-head { padding-bottom: 28px; }

body.npcr-on .npcr-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--npcr-pine);
}

body.npcr-on .npcr-h1 {
	margin-top: 10px;
	font-family: var(--npcr-serif);
	font-weight: 600;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1.02;
	letter-spacing: -.01em;
	color: var(--npcr-forest);
}

body.npcr-on .npcr-head__sub { margin-top: 10px; font-size: 16px; color: var(--npcr-muted); }

body.npcr-on .npcr-notices:empty { display: none; }
body.npcr-on .npcr-notices { margin-bottom: 18px; }
body.npcr-on .npcr-notices .woocommerce-message,
body.npcr-on .npcr-notices .woocommerce-info,
body.npcr-on .npcr-notices .woocommerce-error {
	margin: 0 0 12px;
	padding: 14px 18px;
	background: var(--npcr-ok-bg);
	border: 1px solid var(--npcr-line);
	border-radius: var(--npcr-r);
	list-style: none;
	font-size: 14.5px;
	color: var(--npcr-ink);
}
body.npcr-on .npcr-notices .woocommerce-error {
	background: var(--npcr-err-bg);
	border-color: var(--npcr-err-line);
	color: var(--npcr-err);
}

/* =========================================================================
   Layout
   ====================================================================== */

body.npcr-on .npcr-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--npcr-side);
	gap: var(--npcr-gap);
	align-items: start;
}

body.npcr-on .npcr-col { min-width: 0; }
body.npcr-on .npcr-sticky { position: sticky; top: calc(var(--np-hdr-h, 80px) + 20px); }

/* Never let a tall summary trap its own CTA off-screen. */
@media (max-height: 900px) {
	body.npcr-on .npcr-sticky { position: static; }
}

body.npcr-on .npcr-card,
body.npcr-on .npcr-sum {
	background: var(--npcr-paper);
	border: 1px solid var(--npcr-line);
	border-radius: var(--npcr-r-card);
}

/* =========================================================================
   CART-02  Cart items
   ====================================================================== */

body.npcr-on .npcr-item {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 28px;
	padding: 24px;
}
body.npcr-on .npcr-item + .npcr-item { border-top: 1px solid var(--npcr-line); }

body.npcr-on .npcr-item__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--npcr-well);
	border-radius: var(--npcr-r);
	overflow: hidden;
}
/* `contain`, not `cover`: the catalogue mixes square studio shots with tall
   tower photography, and cropping a square product to a 4:5 box eats the
   product. The well behind it is what the mockup draws. */
body.npcr-on .npcr-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.npcr-on .npcr-item__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-block: 6px;
}

body.npcr-on .npcr-item__head { display: flex; gap: 24px; align-items: flex-start; }
body.npcr-on .npcr-item__id { min-width: 0; flex: 1 1 auto; }

body.npcr-on .npcr-item__name {
	font-family: var(--npcr-serif);
	font-weight: 600;
	font-size: 27px;
	line-height: 1.15;
	color: var(--npcr-forest);
	overflow-wrap: anywhere;
}
body.npcr-on .npcr-item__name a { color: inherit; text-decoration: none; }
body.npcr-on .npcr-item__name a:hover { text-decoration: underline; text-underline-offset: 3px; }

body.npcr-on .npcr-item__spec,
body.npcr-on .npcr-item__var {
	margin-top: 7px;
	font-size: 15px;
	color: var(--npcr-muted);
	overflow-wrap: anywhere;
}

body.npcr-on .npcr-item__price { margin-top: 16px; font-size: 19px; font-weight: 600; }

body.npcr-on .npcr-item__notes { flex: 0 1 260px; display: grid; gap: 10px; }

body.npcr-on .npcr-item__ctrl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 18px;
}

body.npcr-on .npcr-item__line { font-size: 19px; font-weight: 700; white-space: nowrap; }

body.npcr-on .npcr-item__rm {
	align-self: flex-start;
	margin-top: 14px;
	padding: 4px 0;
	min-height: 28px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--npcr-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
body.npcr-on .npcr-item__rm:hover { color: var(--npcr-err); }

body.npcr-on .npcr-item.is-blocked .npcr-item__media { opacity: .55; }

/* Quantity stepper -------------------------------------------------------- */

body.npcr-on .npcr-qty {
	display: inline-flex;
	align-items: center;
	background: var(--npcr-paper);
	border: 1px solid var(--npcr-field);
	border-radius: 999px;
	overflow: hidden;
}

body.npcr-on .npcr-qty__b {
	display: grid;
	place-items: center;
	width: 50px;
	min-height: 50px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--npcr-ink);
	cursor: pointer;
}
body.npcr-on .npcr-qty__b:hover { color: var(--npcr-forest); background: var(--npcr-ok-bg); }
body.npcr-on .npcr-qty__b:disabled { opacity: .45; cursor: not-allowed; }

body.npcr-on .npcr-qty__in {
	width: 56px;
	height: 50px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: var(--npcr-ink);
	-moz-appearance: textfield;
}

body.npcr-on .npcr-qty--fixed {
	padding: 0 20px;
	min-height: 50px;
	align-items: center;
	font-size: 15px;
	color: var(--npcr-muted);
}

body.npcr-on .npcr-qty--sm .npcr-qty__b { width: 40px; min-height: 40px; }
body.npcr-on .npcr-qty--sm .npcr-qty__in { width: 44px; height: 40px; font-size: 15px; }

body.npcr-on .is-busy { opacity: .6; }
body.npcr-on .is-busy .npcr-qty { position: relative; }

/* Item / drawer notices --------------------------------------------------- */

body.npcr-on .npcr-note {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--npcr-line);
	border-radius: var(--npcr-r);
	font-size: 13.5px;
	line-height: 1.45;
}
body.npcr-on .npcr-note__i { flex: none; margin-top: 1px; }
body.npcr-on .npcr-note__t { display: block; min-width: 0; }
body.npcr-on .npcr-note__t strong { display: block; font-weight: 600; }
body.npcr-on .npcr-note__t span { display: block; margin-top: 3px; }

body.npcr-on .npcr-note--warn {
	background: var(--npcr-warn-bg);
	border-color: var(--npcr-warn-line);
	color: var(--npcr-warn);
}
body.npcr-on .npcr-note--error {
	background: var(--npcr-err-bg);
	border-color: var(--npcr-err-line);
	color: var(--npcr-err);
}
body.npcr-on .npcr-note--sm { margin-top: 10px; padding: 9px 11px; font-size: 12.5px; }
body.npcr-on .npcr-note--wide { align-items: center; margin-bottom: 18px; }

body.npcr-on .npcr-note__retry {
	margin-left: auto;
	padding: 8px 16px;
	min-height: 36px;
	background: var(--npcr-paper);
	border: 1px solid currentColor;
	border-radius: var(--npcr-btn-r);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
}

/* =========================================================================
   CART-03  Coupon and continuation
   ====================================================================== */

body.npcr-on .npcr-actions { padding: 24px; border-top: 1px solid var(--npcr-line); }

body.npcr-on .npcr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
body.npcr-on .npcr-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px 7px 14px;
	background: var(--npcr-ok-bg);
	border: 1px solid #CFDDD2;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--npcr-forest);
}
body.npcr-on .npcr-chip__x {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
}
body.npcr-on .npcr-chip__x:hover { background: #D6E3DA; }

body.npcr-on .npcr-coupon {
	display: grid;
	grid-template-columns: minmax(0, 380px) auto;
	gap: 16px;
	align-items: start;
}
body.npcr-on .npcr-coupon .npcr-btn { min-height: 52px; }

body.npcr-on .npcr-coupon__msg { grid-column: 1 / -1; font-size: 13.5px; }
body.npcr-on .npcr-coupon__msg:empty { display: none; }
body.npcr-on .npcr-coupon__msg.is-error { color: var(--npcr-err); }
body.npcr-on .npcr-coupon__msg.is-ok { color: var(--npcr-ok); }

body.npcr-on .npcr-continue { margin-top: 18px; }

/* =========================================================================
   CART-04  Order summary
   ====================================================================== */

body.npcr-on .npcr-sum { padding: 32px; }

body.npcr-on .npcr-sum__h {
	font-family: var(--npcr-serif);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.1;
	color: var(--npcr-forest);
}

body.npcr-on .npcr-rows { margin-top: 24px; display: grid; gap: 20px; }

body.npcr-on .npcr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
body.npcr-on .npcr-row dt { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
body.npcr-on .npcr-row dd { font-size: 15px; font-weight: 700; text-align: right; }
body.npcr-on .npcr-row__soft { font-weight: 400; color: var(--npcr-muted); }
body.npcr-on .npcr-row--save dd { color: var(--npcr-ok); }

body.npcr-on .npcr-tip {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: var(--npcr-faint);
	cursor: pointer;
}
body.npcr-on .npcr-tip:hover { color: var(--npcr-forest); }

body.npcr-on .npcr-tipbox {
	display: block;
	flex-basis: 100%;
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--npcr-well);
	border-radius: var(--npcr-r);
	font-size: 13px;
	font-weight: 400;
	color: var(--npcr-muted);
}

body.npcr-on .npcr-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--npcr-line);
}
body.npcr-on .npcr-total span { font-size: 17px; font-weight: 600; }
body.npcr-on .npcr-total strong { font-size: 25px; font-weight: 700; letter-spacing: -.01em; }

body.npcr-on .npcr-sum .npcr-btn--block { margin-top: 22px; min-height: 56px; }
body.npcr-on .npcr-sum__blockmsg { margin-top: 10px; font-size: 13px; color: var(--npcr-err); }

body.npcr-on .npcr-secure { margin-top: 20px; }
body.npcr-on .npcr-secure__h {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 600;
}
body.npcr-on .npcr-secure__h .npcr-i { color: var(--npcr-forest); }
body.npcr-on .npcr-secure__p { margin-top: 5px; padding-left: 25px; font-size: 13.5px; color: var(--npcr-muted); }

body.npcr-on .npcr-pay { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--npcr-line); }
body.npcr-on .npcr-pay__h { font-size: 14px; font-weight: 600; }
body.npcr-on .npcr-pay__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
body.npcr-on .npcr-pay__list li {
	display: grid;
	place-items: center;
	width: 60px;
	height: 38px;
	background: var(--npcr-paper);
	border: 1px solid var(--npcr-line);
	border-radius: 6px;
}
body.npcr-on .npcr-pay__list img { display: block; width: 38px; height: auto; }

body.npcr-on .npcr-assure {
	display: grid;
	gap: 18px;
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--npcr-line);
}
body.npcr-on .npcr-assure li { display: flex; gap: 14px; align-items: flex-start; }
body.npcr-on .npcr-assure__i { flex: none; margin-top: 1px; color: var(--npcr-pine); }
body.npcr-on .npcr-assure strong { display: block; font-size: 14.5px; font-weight: 600; }
body.npcr-on .npcr-assure span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--npcr-muted); }

/* =========================================================================
   CART-05  Empty state
   ====================================================================== */

body.npcr-on .npcr-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 72px 24px 78px;
	background: var(--npcr-paper);
	border: 1px solid var(--npcr-line);
	border-radius: var(--npcr-r-card);
}
body.npcr-on .npcr-empty__art { color: var(--npcr-pine); line-height: 0; }
body.npcr-on .npcr-empty__h {
	margin-top: 26px;
	font-family: var(--npcr-serif);
	font-weight: 600;
	font-size: clamp(30px, 3.2vw, 42px);
	line-height: 1.1;
	color: var(--npcr-forest);
}
body.npcr-on .npcr-empty__p { margin-top: 12px; max-width: 34ch; font-size: 16px; color: var(--npcr-muted); }
body.npcr-on .npcr-empty__a { margin-top: 26px; }

body.npcr-on .npcr-rev { margin-top: 30px; font-size: 13px; color: var(--npcr-faint); }
body.npcr-on .npcr-rev a { color: var(--npcr-pine); }

/* =========================================================================
   MINI-01 .. MINI-04  The drawer
   ====================================================================== */

body.npcr-on .npcr-mc-scrim {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(20, 28, 22, .42);
	opacity: 0;
	transition: opacity var(--npcr-ease);
}
body.npcr-on .npcr-mc-scrim.is-open { opacity: 1; }

body.npcr-on .npcr-mc {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	width: min(42vw, 520px);
	min-width: 480px;
	height: 100%;
	height: 100dvh;
	background: var(--npcr-paper);
	box-shadow: -18px 0 46px rgba(20, 28, 22, .16);
	transform: translateX(100%);
	transition: transform var(--npcr-ease);
}
body.npcr-on .npcr-mc.is-open { transform: none; }

html.npcr-locked { overflow: hidden; }

body.npcr-on .npcr-mc__bar {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex: none;
	padding: 20px 32px 0;
}
body.npcr-on .npcr-mc__h {
	flex: 1 1 auto;
	font-family: var(--npcr-serif);
	font-weight: 600;
	font-size: 34px;
	line-height: 1.1;
	color: var(--npcr-forest);
	order: 2;
}
body.npcr-on .npcr-mc__h:focus { outline: none; }
body.npcr-on .npcr-mc__h:focus-visible { outline: 2px solid var(--npcr-pine); outline-offset: 4px; }

body.npcr-on .npcr-mc__x {
	order: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	background: var(--npcr-paper);
	border: 1px solid var(--npcr-line);
	border-radius: var(--npcr-r);
	box-shadow: none;
	color: var(--npcr-ink);
	cursor: pointer;
}
body.npcr-on .npcr-mc__x:hover { background: var(--npcr-well); }

body.npcr-on .npcr-mc__flash { flex: none; padding: 0 32px; }
body.npcr-on .npcr-mc__flash.is-on { padding-top: 18px; }
body.npcr-on .npcr-flash {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 18px;
	background: var(--npcr-ok-bg);
	border-radius: var(--npcr-r);
	font-size: 15px;
	font-weight: 500;
	color: var(--npcr-forest);
}

/* The scroll area and the actions: the actions must stay reachable without
   covering content, so the list scrolls and the foot does not. */
body.npcr-on .npcr-mc__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 32px 26px;
}
body.npcr-on .npcr-mc__count { flex: none; margin-top: 5px; font-size: 14px; color: var(--npcr-muted); }

body.npcr-on .npcr-mc__items {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin-top: 15px;
	padding-top: 20px;
	border-top: 1px solid var(--npcr-line);
}

body.npcr-on .npcr-mc__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding-block: 18px; }
body.npcr-on .npcr-mc__item + .npcr-mc__item { border-top: 1px solid var(--npcr-line); }

body.npcr-on .npcr-mc__thumb {
	display: block;
	width: 96px;
	aspect-ratio: 1 / 1;
	background: var(--npcr-well);
	border-radius: var(--npcr-r);
	overflow: hidden;
}
body.npcr-on .npcr-mc__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }

body.npcr-on .npcr-mc__meta { min-width: 0; }
body.npcr-on .npcr-mc__top { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; }
body.npcr-on .npcr-mc__name {
	font-family: var(--npcr-serif);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.2;
	color: var(--npcr-forest);
	overflow-wrap: anywhere;
}
body.npcr-on .npcr-mc__name a { color: inherit; text-decoration: none; }
body.npcr-on .npcr-mc__name a:hover { text-decoration: underline; }
body.npcr-on .npcr-mc__price { font-size: 15px; font-weight: 700; white-space: nowrap; }
body.npcr-on .npcr-mc__spec,
body.npcr-on .npcr-mc__var { margin-top: 4px; font-size: 13.5px; color: var(--npcr-muted); overflow-wrap: anywhere; }
body.npcr-on .npcr-mc__meta .npcr-qty { margin-top: 12px; }
body.npcr-on .npcr-mc__rm {
	display: block;
	margin-top: 10px;
	padding: 4px 0;
	min-height: 28px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--npcr-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
body.npcr-on .npcr-mc__rm:hover { color: var(--npcr-err); }

body.npcr-on .npcr-mc__foot { flex: none; padding-top: 20px; border-top: 1px solid var(--npcr-line); }
body.npcr-on .npcr-mc__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
body.npcr-on .npcr-mc__sub span { font-size: 16px; font-weight: 600; }
body.npcr-on .npcr-mc__sub strong { font-size: 20px; font-weight: 700; }
body.npcr-on .npcr-mc__note { margin-top: 4px; font-size: 13px; color: var(--npcr-muted); }
body.npcr-on .npcr-mc__foot .npcr-btn { margin-top: 14px; }
body.npcr-on .npcr-mc__blockmsg { margin-top: 8px; font-size: 12.5px; color: var(--npcr-err); }

body.npcr-on .npcr-mc__secure { flex: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--npcr-line); }
body.npcr-on .npcr-mc__secureh { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
body.npcr-on .npcr-mc__secureh .npcr-i { color: var(--npcr-forest); }
body.npcr-on .npcr-mc__securep { margin-top: 3px; padding-left: 23px; font-size: 12.5px; color: var(--npcr-muted); }

body.npcr-on .npcr-mc__empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: 30px;
}
body.npcr-on .npcr-mc__art { color: var(--npcr-pine); line-height: 0; }
body.npcr-on .npcr-mc__emptyh {
	margin-top: 22px;
	font-family: var(--npcr-serif);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.1;
	color: var(--npcr-forest);
}
body.npcr-on .npcr-mc__emptyp { margin-top: 8px; max-width: 26ch; font-size: 15px; color: var(--npcr-muted); }
body.npcr-on .npcr-mc__empty .npcr-btn { margin-top: 24px; width: auto; min-width: 240px; }

/* =========================================================================
   Responsive  (handoff 03)
   ====================================================================== */

/* 1024-1439: two columns while the item column stays >= 560 px. */
@media (max-width: 1439px) {
	body.npcr-on { --npcr-side: 360px; }
	body.npcr-on .npcr-item { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; }
	body.npcr-on .npcr-sum { padding: 24px; }
	body.npcr-on .npcr-item,
	body.npcr-on .npcr-actions { padding: 22px; }
}

/* 768-1023: one column. The summary stays immediately after items + coupon. */
@media (max-width: 1023px) {
	body.npcr-on .npcr-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	body.npcr-on .npcr-sticky { position: static; }
	body.npcr-on .npcr-sum { padding: 26px; }
	body.npcr-on .npcr-item__notes { flex-basis: 220px; }
}

/* 375-767: compact item card, 80-96 px image, CTA full width. */
@media (max-width: 767px) {
	body.npcr-on .npcr-root { padding-bottom: 56px; }
	body.npcr-on .npcr-crumb { padding-block: 18px 14px; }
	body.npcr-on .npcr-head { padding-bottom: 20px; }
	body.npcr-on .npcr-head__sub { font-size: 15px; }

	body.npcr-on .npcr-item { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 18px; }
	body.npcr-on .npcr-item__head { flex-direction: column; gap: 12px; }
	body.npcr-on .npcr-item__notes { flex-basis: auto; width: 100%; }
	body.npcr-on .npcr-item__name { font-size: 20px; }
	body.npcr-on .npcr-item__spec { display: none; }
	body.npcr-on .npcr-item__var { font-size: 13.5px; margin-top: 5px; }
	body.npcr-on .npcr-mc__spec { display: none; }
	body.npcr-on .npcr-item__price { margin-top: 10px; font-size: 16px; }
	body.npcr-on .npcr-item__ctrl { margin-top: 14px; gap: 12px; }
	body.npcr-on .npcr-item__line { font-size: 16px; }
	body.npcr-on .npcr-qty__b { width: 42px; min-height: 44px; }
	body.npcr-on .npcr-qty__in { width: 44px; height: 44px; font-size: 15px; }

	body.npcr-on .npcr-actions { padding: 18px; }
	body.npcr-on .npcr-coupon { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	body.npcr-on .npcr-coupon .npcr-btn { width: 100%; }
	body.npcr-on .npcr-continue .npcr-btn { width: 100%; }

	body.npcr-on .npcr-sum { padding: 20px; }
	body.npcr-on .npcr-sum__h { font-size: 24px; }
	body.npcr-on .npcr-rows { gap: 16px; margin-top: 18px; }
	body.npcr-on .npcr-total { margin-top: 18px; padding-top: 18px; }
	body.npcr-on .npcr-total strong { font-size: 22px; }

	body.npcr-on .npcr-empty { padding: 44px 18px 48px; }

	/* Mini-cart mobile: full width and 100dvh (handoff 03). */
	body.npcr-on .npcr-mc { width: 100%; min-width: 0; }
	body.npcr-on .npcr-mc__bar { padding: 20px 20px 0; }
	body.npcr-on .npcr-mc__h { font-size: 27px; }
	body.npcr-on .npcr-mc__flash { padding-inline: 20px; }
	body.npcr-on .npcr-mc__inner { padding: 0 20px 20px; }
	body.npcr-on .npcr-mc__item { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
	body.npcr-on .npcr-mc__thumb { width: 80px; }
}

/* 320 minimum: long names wrap, no horizontal page scroll. Kept below 360 so
   that 375 still gets the handoff's 80-96px image slot. */
@media (max-width: 359px) {
	body.npcr-on .npcr-item { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 14px; }
	body.npcr-on .npcr-item__ctrl { flex-wrap: wrap; }
	body.npcr-on .npcr-h1 { font-size: 38px; }
}

/* Handoff 07: completion must never depend on animation. */
@media (prefers-reduced-motion: reduce) {
	body.npcr-on .npcr-mc,
	body.npcr-on .npcr-mc-scrim,
	body.npcr-on .npcr-btn { transition: none; }
}

/* golive: redundant View Cart button */
/* WooCommerce's add-to-cart notice carries a green "View Cart" button. On the
   cart page itself that button points at the page you are already reading, and
   it is the one part of the notice the redesign does not style. The message
   text is kept; only the redundant control goes. */
body.npcr-page .npcr-notices .woocommerce-message a.button,
body.npcr-page .npcr-notices .woocommerce-message a.wc-forward { display: none; }