/* =========================================================================
 *  HighThere Deals — Mix & Match
 *
 *  SPECIFICITY CONTRACT — the reason v1.0 rendered invisible buttons.
 *
 *  Site Kit's canvas sets `.htsk-canvas a { color: var(--ht-teal) }`, which
 *  is specificity (0,1,1). A single-class rule like `.htmm-btn` is (0,1,0)
 *  and LOSES, so every button drew teal text on a teal fill and read as a
 *  solid blank slab. Site Kit hit the same wall and escaped it with
 *  `color:#fff!important` on `.ht-btn`.
 *
 *  So: every rule in this file carries the `.htmm` ancestor, making it at
 *  least (0,2,0) and reliably ahead of the canvas, and the handful of
 *  properties a restored theme is most likely to fight over — button colour
 *  and fill — are additionally pinned. Nothing here is scoped more loosely
 *  than `.htmm`, so it still cannot leak outward.
 *
 *  TOKENS: --htmm-* read Site Kit's --ht-* custom properties so the pages
 *  inherit the real site palette, radius and type scale, each with a literal
 *  fallback so the plugin stands alone. Accent colours are lifted from Site
 *  Kit's own strain-art gradients (violet / amber / teal / leaf) rather than
 *  invented, so the deal cards look native rather than bolted on.
 *
 *  Mobile-first. 44px tap targets, 16px controls so iOS never zooms on focus.
 * ====================================================================== */

.htmm {
	--htmm-ink:        var(--ht-ink, #10171c);
	--htmm-ink-soft:   var(--ht-ink-soft, #41505a);
	--htmm-teal:       var(--ht-teal, #0a4c6c);
	--htmm-teal-deep:  var(--ht-teal-deep, #062b3d);
	--htmm-leaf:       var(--ht-leaf, #61ce70);
	--htmm-leaf-dark:  var(--ht-leaf-dark, #3fae50);
	--htmm-mist:       var(--ht-mist, #f1f6f9);
	--htmm-line:       var(--ht-line, #e1eaef);
	--htmm-paper:      var(--ht-paper, #ffffff);
	--htmm-radius:     var(--ht-radius, 16px);
	--htmm-font:       var(--ht-font, 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);

	--htmm-accent:     var(--htmm-teal);
	--htmm-accent-ink: #ffffff;
	--htmm-warn:       #b32d2e;
	--htmm-warn-bg:    #fdf0f0;
	--htmm-good-bg:    #eef9f0;

	font-family: var(--htmm-font);
	color: var(--htmm-ink);
	box-sizing: border-box;
}

.htmm *,
.htmm *::before,
.htmm *::after { box-sizing: border-box; }

.htmm button,
.htmm input,
.htmm select,
.htmm textarea { font-family: inherit; font-size: 16px; }

.htmm :focus-visible {
	outline: 3px solid var(--htmm-leaf);
	outline-offset: 2px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.htmm *, .htmm *::before, .htmm *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ------------------------------------------------ accent rotation ------ */
/* Four colours drawn from Site Kit's strain-art gradients, cycled across
   the cards so a row of bundles reads as a set rather than a list.        */
.htmm .htmm-card:nth-child(4n+1) { --htmm-accent: #0d5a80; }
.htmm .htmm-card:nth-child(4n+2) { --htmm-accent: #3fae50; }
.htmm .htmm-card:nth-child(4n+3) { --htmm-accent: #503069; }
.htmm .htmm-card:nth-child(4n+4) { --htmm-accent: #c07f16; }

/* ---------------------------------------------------------- layout ----- */

.htmm.htmm-wrap { display: block; }

.htmm .htmm-shell {
	width: min(1180px, 92vw);
	margin-inline: auto;
}

.htmm .htmm-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(150deg, #0d5a80, #062b3d);
	color: #fff;
	padding: 44px 0 46px;
}

.htmm .htmm-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.htmm .htmm-hero__title {
	margin: 16px 0 0;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(32px, 8.5vw, 60px);
	line-height: 1.02;
	letter-spacing: .01em;
	color: #fff;
}

.htmm .htmm-hero__sub {
	margin: 14px 0 0;
	max-width: 54ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .84);
}

.htmm .htmm-body { padding: 30px 0 46px; }

.htmm .htmm-crumbs {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--htmm-ink-soft);
}

.htmm .htmm-crumbs a { color: var(--htmm-teal); text-decoration: none; }
.htmm .htmm-crumbs a:hover { color: var(--htmm-leaf-dark); text-decoration: underline; }

.htmm .htmm-empty,
.htmm .htmm-notice {
	background: var(--htmm-mist);
	border-radius: var(--htmm-radius);
	padding: 30px 22px;
	text-align: center;
	color: var(--htmm-ink-soft);
	font-size: 15px;
	line-height: 1.6;
}

.htmm .htmm-notice {
	background: var(--htmm-warn-bg);
	color: var(--htmm-warn);
	text-align: left;
	font-weight: 600;
}

/* --------------------------------------------------------- buttons ----- */

.htmm .htmm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 46px;
	padding: 13px 24px;
	border: 2px solid var(--htmm-teal-deep);
	border-radius: 999px;
	background: var(--htmm-teal-deep) !important;
	color: #fff !important;          /* beats .htsk-canvas a — see header */
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}

.htmm .htmm-btn:hover {
	background: var(--htmm-teal) !important;
	border-color: var(--htmm-teal);
	color: #fff !important;
	transform: translateY(-1px);
}

.htmm .htmm-btn--accent {
	background: var(--htmm-accent) !important;
	border-color: var(--htmm-accent);
	color: var(--htmm-accent-ink) !important;
}

.htmm .htmm-btn--accent:hover { opacity: .9; transform: translateY(-1px); }

.htmm .htmm-btn--ghost {
	background: transparent !important;
	border-color: var(--htmm-line);
	color: var(--htmm-teal) !important;
}

.htmm .htmm-btn--ghost:hover {
	background: var(--htmm-mist) !important;
	border-color: var(--htmm-teal);
	color: var(--htmm-teal-deep) !important;
}

.htmm .htmm-btn--small { min-height: 44px; padding: 11px 18px; font-size: 13px; }
.htmm .htmm-btn--block { display: flex; width: 100%; }

.htmm .htmm-btn[disabled],
.htmm .htmm-btn.is-busy { opacity: .55; cursor: progress; transform: none; }

.htmm .htmm-btn__arrow { font-size: 15px; line-height: 1; }

/* -------------------------------------------------------- deal cards --- */

.htmm .htmm-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	align-items: start;
}

.htmm .htmm-card {
	display: flex;
	flex-direction: column;
	background: var(--htmm-paper);
	border: 1px solid var(--htmm-line);
	border-radius: var(--htmm-radius);
	box-shadow: 0 8px 26px rgba(6, 43, 61, .07);
	padding: 24px 22px 22px;
	height: 100%;
}

.htmm .htmm-card.is-done { border-color: var(--htmm-leaf); box-shadow: 0 8px 26px rgba(63, 174, 80, .16); }
.htmm .htmm-card.is-broken { border-color: #f0c9c9; background: var(--htmm-warn-bg); }

.htmm .htmm-card__head {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin: 0 0 14px;
}

/* The saving, as a disc. This is the card's anchor — the number is the
   reason anyone reads the card, so it leads rather than trails.          */
.htmm .htmm-card__disc {
	flex: none;
	display: grid;
	place-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--htmm-accent);
	color: #fff;
	text-align: center;
	line-height: 1.05;
}

.htmm .htmm-card__amount { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.htmm .htmm-card__off { display: block; margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }

.htmm .htmm-card__titles { min-width: 0; padding-top: 4px; }
.htmm .htmm-card__name { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--htmm-ink); }
.htmm .htmm-card__what { margin: 5px 0 0; font-size: 14.5px; font-weight: 600; color: var(--htmm-ink-soft); }
.htmm .htmm-card__note { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--htmm-ink-soft); }

.htmm .htmm-card__warn {
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	font-weight: 600;
	color: var(--htmm-warn);
}

.htmm .htmm-card__state { margin: 14px 0 0; }

.htmm .htmm-chip {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--htmm-good-bg);
	color: #1c7a35;
	font-size: 12.5px;
	font-weight: 700;
}

.htmm .htmm-progressline { font-size: 13.5px; font-weight: 600; color: var(--htmm-ink-soft); }

.htmm .htmm-card__actions {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: auto;
	padding-top: 18px;
}

/* ------------------------------------------------- how it works -------- */

.htmm .htmm-how {
	margin: 34px 0 0;
	padding: 26px 24px;
	border: 1px solid var(--htmm-line);
	border-radius: var(--htmm-radius);
	background: var(--htmm-mist);
}

.htmm .htmm-how__title { margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--htmm-ink); }
.htmm .htmm-how__list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.htmm .htmm-how__list li { font-size: 14.5px; line-height: 1.6; color: var(--htmm-ink-soft); }

/* ------------------------------------------------- builder view -------- */

.htmm .htmm-bar {
	/* Pinned to the BOTTOM, not the top. Site Kit's header is already
	   sticky at top:0, so a second top-sticky bar would slide underneath
	   it and vanish. Bottom also puts the primary action in thumb reach,
	   which matters when ~90% of the audience is on a phone. */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: var(--htmm-teal-deep);
	color: #fff;
	padding: 13px 0 calc(13px + env(safe-area-inset-bottom));
	box-shadow: 0 -10px 30px rgba(6, 43, 61, .22);
}

.htmm .htmm-bar.is-done { background: #1c7a35; }

.htmm .htmm-bar__inner {
	width: min(1180px, 92vw);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.htmm .htmm-bar__text { flex: 1 1 auto; min-width: 0; }
.htmm .htmm-bar__name { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; }
.htmm .htmm-bar__msg { display: block; margin-top: 3px; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.htmm .htmm-bar__msg.is-error { color: #ffd9d9; font-weight: 700; }

/* Dots, not a percentage bar: a bundle is a countable number of things,
   so showing the actual slots reads faster than an abstract fill.        */
.htmm .htmm-dots { display: flex; gap: 7px; flex: none; }

.htmm .htmm-dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .26);
	transition: background .25s ease, transform .25s ease;
}

.htmm .htmm-dot.is-filled { background: var(--htmm-leaf); transform: scale(1.12); }

.htmm .htmm-bar__actions { display: flex; gap: 8px; flex: none; }

.htmm .htmm-bar .htmm-btn {
	background: #fff !important;
	border-color: #fff;
	color: var(--htmm-teal-deep) !important;
}

.htmm .htmm-bar .htmm-btn:hover { background: var(--htmm-leaf) !important; border-color: var(--htmm-leaf); color: #06331f !important; }

.htmm .htmm-bar .htmm-btn--ghost {
	background: transparent !important;
	border-color: rgba(255, 255, 255, .5);
	color: #fff !important;
}

.htmm .htmm-bar .htmm-btn--ghost:hover { background: rgba(255, 255, 255, .14) !important; border-color: #fff; color: #fff !important; }

/* ------------------------------------------------- product grid -------- */

.htmm .htmm-products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 24px;
	padding-bottom: 150px;   /* clears the fixed bar on the last row */
}

.htmm .htmm-prod {
	display: flex;
	flex-direction: column;
	background: var(--htmm-paper);
	border: 1px solid var(--htmm-line);
	border-radius: var(--htmm-radius);
	overflow: hidden;
}

.htmm .htmm-prod.is-out { opacity: .62; }

.htmm .htmm-prod__media { display: block; aspect-ratio: 1 / 1; background: var(--htmm-mist); }
.htmm .htmm-prod__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.htmm .htmm-prod__ph { display: grid; place-items: center; height: 100%; font-size: 30px; color: #cfe0e9; }

.htmm .htmm-prod__body { display: flex; flex-direction: column; gap: 7px; padding: 13px 13px 15px; flex: 1 1 auto; }
.htmm .htmm-prod__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--htmm-ink-soft); }
.htmm .htmm-prod__name { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.htmm .htmm-prod__name a { color: var(--htmm-ink) !important; text-decoration: none !important; }
.htmm .htmm-prod__name a:hover { color: var(--htmm-teal) !important; }
.htmm .htmm-prod__price { font-size: 15px; font-weight: 800; color: var(--htmm-teal); }
.htmm .htmm-prod__price del { opacity: .55; font-weight: 600; margin-right: 5px; }
.htmm .htmm-prod__add { margin-top: auto; }

.htmm .htmm-prod__out {
	margin-top: auto;
	padding: 12px 0 0;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--htmm-ink-soft);
}

/* ------------------------------------------- savings panel (cart) ------ */

.htmm.htmm-savings {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 0;
	border-radius: 14px;
	background: var(--htmm-good-bg);
}

.htmm .htmm-savings__lead {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: #14602a;
}

.htmm .htmm-savings__bolt { flex: none; font-size: 16px; line-height: 1; }
.htmm .htmm-savings__amt { margin-left: auto; font-size: 19px; font-weight: 800; color: #14602a; white-space: nowrap; }

.htmm .htmm-savings__list {
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid rgba(20, 96, 42, .16);
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.htmm .htmm-savings__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--htmm-ink-soft);
}

.htmm .htmm-savings__name { font-weight: 600; color: var(--htmm-ink); }
.htmm .htmm-savings__times { margin-left: 6px; font-size: 12px; font-weight: 500; }
.htmm .htmm-savings__line { flex: none; font-weight: 700; color: #14602a; white-space: nowrap; }

/* ------------------------------------------------------ the nudge ------ */

.htmm.htmm-nudge {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 20px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--htmm-mist);
	border-left: 4px solid var(--htmm-leaf-dark);
}

.htmm .htmm-nudge__body { flex: 1 1 auto; min-width: 0; }
.htmm .htmm-nudge__text { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--htmm-teal-deep); }
.htmm .htmm-nudge__sub { margin: 3px 0 0; font-size: 13.5px; font-weight: 500; color: var(--htmm-ink-soft); }

/* ------------------------------- shop-manager status (cart only) ------- */
/* Collapsed by default and never rendered on the checkout: a customer must
   never meet an internal report, and a shop manager should not have to
   scroll past one to buy something.                                       */

.htmm.htmm-status {
	margin: 18px 0 0;
	border: 1px dashed #c3cfd6;
	border-radius: 12px;
	background: #fbfdfe;
	font-size: 13px;
}

.htmm .htmm-status__summary {
	cursor: pointer;
	padding: 10px 14px;
	font-weight: 700;
	color: var(--htmm-ink-soft);
	list-style: none;
}

.htmm .htmm-status__summary::-webkit-details-marker { display: none; }
.htmm .htmm-status__summary::before { content: '▸ '; }
.htmm.htmm-status[open] .htmm-status__summary::before { content: '▾ '; }

.htmm .htmm-status__body { padding: 0 14px 12px; }
.htmm .htmm-status__table { width: 100%; border-collapse: collapse; }

.htmm .htmm-status__table th,
.htmm .htmm-status__table td {
	padding: 6px 8px;
	text-align: left;
	border-bottom: 1px solid var(--htmm-line);
	vertical-align: top;
}

.htmm .htmm-status__table th { font-weight: 700; color: var(--htmm-ink); }
.htmm .htmm-status__table .is-good td { color: #1c7a35; }
.htmm .htmm-status__table .is-bad td { color: var(--htmm-warn); font-weight: 600; }
.htmm .htmm-status__table .is-wait td { color: #8a6100; }

/* ------------------------- DEAL badge on cart & checkout fee rows ------ */
/* Enhancement only: without JavaScript the row still reads "Deal: Name". */

.htmm-fee__badge {
	display: inline-block;
	margin-right: 9px;
	padding: 3px 9px;
	border-radius: 6px;
	background: #c07f16;
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	vertical-align: middle;
}

.htmm-fee__name { font-weight: 700; color: #1c7a35; vertical-align: middle; }
tr.fee .htmm-fee__amount { color: #1c7a35; font-weight: 700; }

/* -------------------------------------------------------------------------
 *  UNSCOPED RULES — deliberate, and only these.
 *  .htmm-menu-item is appended inside the THEME's menu markup; the two
 *  .htmm-fee__* classes are injected into WooCommerce's own totals table.
 *  Neither can sit under .htmm, so both are named specifically enough that
 *  nothing else can match them.
 * ---------------------------------------------------------------------- */
.htmm-menu-item { /* inherits the surrounding menu's styling by design */ }

/* --------------------------------------------------------- tablet ------ */

@media (min-width: 600px) {
	.htmm .htmm-hero { padding: 56px 0 58px; }
	.htmm .htmm-body { padding: 38px 0 60px; }
	.htmm .htmm-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.htmm .htmm-products { grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 120px; }
	.htmm .htmm-card__actions { flex-direction: row; }
	.htmm .htmm-card__actions .htmm-btn { flex: 1 1 0; }
	.htmm.htmm-nudge { flex-direction: row; align-items: center; justify-content: space-between; }
	.htmm.htmm-nudge .htmm-btn { flex: none; }
}

@media (min-width: 1000px) {
	.htmm .htmm-grid { grid-template-columns: repeat(4, 1fr); }
	.htmm .htmm-products { grid-template-columns: repeat(4, 1fr); }
}