/**
 * Section styles — one block of rules per Pawsentials block, ported from the
 * landing page's per-section <style> tags. Class names are unchanged so the
 * original markup, the block render callbacks and the demo content all agree.
 */

/* ══════════ BLOCK-EDITOR CONTAINER NEUTRALISERS ══════════
   The grid/flex containers below are core/group blocks carrying one of the
   theme's layout classes. Core's flow layout injects a vertical margin between
   every child, which fights the container's own gap and leaves uneven rows, so
   each container resets it. Applied to the container's children only — never
   globally — so ordinary prose inside a group keeps its rhythm.

   Margins collapse inside a plain block container, so a group of paragraphs is
   unaffected — but they do NOT collapse out of a grid or flex container, where
   they add to the gap instead and leave the rows unevenly spaced. Every
   container below is grid or flex, which is why each one needs the reset.

   The :is() prefix wins the specificity tie against core's own
   `:root :where(.is-layout-flow) > *`, rather than relying on this stylesheet
   happening to be printed after the global styles. */
:is(.wp-site-blocks, .editor-styles-wrapper) :is(
	.sup__grid,
	.sol__steps,
	.gtee__grid,
	.ba__grid,
	.mini__groups,
	.fold,
	.prob__causes-list,
	.tslider__track
) > * {
	margin-block: 0;
}

/* Core adds .wp-block-group's own constrained max-width; these containers do
   their own width management. */
.sup__grid.wp-block-group,
.sol__steps.wp-block-group,
.gtee__grid.wp-block-group,
.ba__grid.wp-block-group,
.fold.wp-block-group { max-width: none; }

/* ══════════ PROMO MARQUEE ══════════ */
.promo { background: var(--color-secondary); color: var(--on-dark); overflow: hidden; padding: .6rem 0; border-bottom: 2px solid rgba(255, 255, 255, .18); }
.promo__track { display: flex; width: max-content; animation: promoScroll var(--promo-speed, 34s) linear infinite; }
.promo__group { display: flex; flex-shrink: 0; }
.promo__item {
	display: inline-flex; align-items: center; gap: .85rem; padding-inline: 1.4rem;
	font-family: var(--font-display); font-weight: 700; font-size: .78rem;
	letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.promo__item::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--color-primary); }
@keyframes promoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Reduced motion swaps the scrolling track for a short static pair rather than
   freezing it: a frozen track sits at translateX(0) and `overflow: hidden`
   then clips every offer past the first, which reads as broken. */
.promo__static { display: none; }
@media (prefers-reduced-motion: reduce) {
	.promo__track { display: none; }
	.promo__static { display: flex; justify-content: center; flex-wrap: wrap; row-gap: .25rem; }
	.promo__static .promo__item:last-child::after { display: none; }
}

/* ══════════ HERO ══════════ */
.mobile-hero { display: none; }
.hero2 { position: relative; background-position: bottom right; background-size: cover; padding: 20px 0 30px; overflow: hidden; }
.hero2 > .container { position: relative; z-index: 2; }
.hero2__logo { width: 1.5em; height: auto; flex: 0 0 auto; margin: 0 .18rem 0 -.1rem; }
.hero2__inner {
	position: relative; display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: 0;
}
.hero2__badge {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--color-secondary); color: var(--on-dark);
	font-family: var(--font-display); font-weight: 700; font-size: .76rem;
	letter-spacing: .1em; text-transform: uppercase; padding: .5rem 1.1rem;
	border-radius: 999px; margin-bottom: 0;
}
.hero2__brand { margin: .8rem 0 .6rem; }
.hero2__brandname {
	display: flex; align-items: center; font-family: var(--font-display); font-weight: 800;
	font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.1; text-transform: uppercase;
	letter-spacing: .01em; color: var(--color-secondary);
}
.hero2__tm { font-size: .34em; line-height: 1; letter-spacing: 0; align-self: flex-start; margin: .45em 0 0 .12em; }
.hero2__brandsub { font-size: .98rem; font-weight: 600; line-height: 1.4; color: var(--color-muted); margin-top: .15rem; }
.hero2__headline { font-size: clamp(2.1rem, 5.2vw, 50px); color: var(--color-text); margin-bottom: .85rem; }
.hero2__sub { font-size: 1.06rem; color: var(--color-muted); max-width: 50ch; margin-bottom: .9rem; }
.hero2__proof { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .95rem; color: var(--color-text); margin-bottom: 1.1rem; }
.hero2__stars { color: var(--color-primary); font-size: 1.15rem; letter-spacing: .1em; line-height: 1; }
.hero2__proof-text strong { font-family: var(--font-display); font-weight: 800; color: var(--color-secondary); }
.hero2__benefits {
	list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .65rem 1.5rem;
}
.hero2__benefits li { position: relative; padding-left: 2rem; font-size: 1rem; font-weight: 500; color: var(--color-text); }
.hero2__benefits li::before { content: ""; position: absolute; left: 0; top: .35em; width: 20px; height: 20px; border-radius: 999px; background: var(--color-primary); }
.hero2__benefits li::after {
	content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 4px;
	border-left: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(-45deg);
}
.hero2__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.hero2__cta { font-size: .92rem; }
/* Free shipping is a fact under the CTA, not a second thing to click — plain
   navy text with the truck icon, no chip/border/shadow. */
.hero2__ship {
	display: inline-flex; align-items: center; gap: .45rem;
	color: var(--color-secondary);
	font-family: var(--font-display); font-weight: 700; font-size: .85rem;
	letter-spacing: .04em; text-transform: uppercase;
}
.hero2__ship svg { width: 18px; height: 18px; }
.hero2__cod { font-size: .86rem; font-weight: 600; color: var(--color-secondary); }
.hero2--slot { background-image: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 14%, #fff) 0%, #fff 70%) !important; }

@media only screen and (max-width: 480px) {
	.hero2__headline{
		display:none;
	}
	.hero2__proof{
		margin-bottom:12px !important;
	}
	.hero2__benefits li{
		font-size:12px;
	}
	.hero2__badge{
		display:none;
	}
	.hero2__brandsub{
		font-size: 12px;    
    	line-height: 14px;    
    	margin-top: 9px;
	}
	section#hero{
		position:relative;
		top:-26px;
		padding-top:6px;
	}
	.hero2__headline { font-size: 30px;  }
	.mobile-hero { overflow: hidden; height: auto; display: flex; align-items: center; }
	.mobile-hero img { display: block; width: 100%; object-fit: cover; object-position: center 42%; position: relative; top: 0; }
	.hero2 { background-image: none !important; background-color: var(--color-bg); }
	.hero2__brandname{
		font-size:30px !important;
	}
}

@media (max-width: 900px) {
	.hero2__inner { grid-template-columns: 1fr; min-height: 0; z-index: 2; }
	.hero2::after {
		content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .82) 55%, rgba(255, 255, 255, .5) 100%);
	}
	.hero2--slot::after { display: none; }
}

@media (max-width: 560px) {
	.hero2__actions { flex-direction: column; align-items: stretch; }
	.hero2__cta { white-space: normal; }
}

/* ══════════ SYMPTOM ROWS ══════════ */
.sym { padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.sym .head-center { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.sym__row { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.sym__row--tint { background: var(--color-surface); }
.sym__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
/* Flip by column assignment, not `order`: the photo stays first in the DOM so
   the single-column stack below needs no counter-rule. */
.sym__row--flip .sym__media { grid-column: 2; grid-row: 1; }
.sym__row--flip .sym__copy { grid-column: 1; grid-row: 1; }
.sym__media { margin: 0; }
.sym__media img { width: 100%; height: auto; border-radius: var(--img-radius); border: 2px solid var(--color-secondary); box-shadow: 8px 8px 0 var(--color-secondary); }
.sym__num {
	display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: .74rem;
	letter-spacing: .16em; text-transform: uppercase; color: var(--on-primary);
	background: var(--color-primary); padding: .35rem .85rem; border-radius: 999px; margin-bottom: .9rem;
}
.sym__title { font-size: clamp(1.45rem, 3.2vw, 2.05rem); color: var(--color-text); margin-bottom: .7rem; }
.sym__desc { color: var(--color-muted); font-size: 1rem; margin-bottom: 1.1rem; max-width: 52ch; }
.sym__fix { font-size: .95rem; color: var(--color-text); max-width: 52ch; border-left: 4px solid var(--color-primary); padding-left: .9rem; }
.sym__fix strong { font-family: var(--font-display); font-weight: 800; }

@media (max-width: 820px) {
	.sym__inner { grid-template-columns: 1fr; gap: 1.5rem; }
	.sym__row--flip .sym__media, .sym__row--flip .sym__copy { grid-column: 1; grid-row: auto; }
	.sym__media img { box-shadow: 5px 5px 0 var(--color-secondary); }
}

/* ══════════ ROOT-CAUSE BAND ══════════ */
.cause__head { text-align: center; max-width: 60ch; margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(1.25rem, 3vw, 2rem); }
.cause__title { font-size: clamp(1.35rem, 3vw, 1.9rem); color: var(--color-text); margin-bottom: .5rem; }
.cause__sub { font-size: 1rem; color: var(--color-muted); }
.prob__causes { background: var(--color-bg); border: 2px solid var(--color-secondary); border-radius: var(--card-radius); padding: clamp(1.75rem, 4vw, 2.5rem); box-shadow: 6px 6px 0 var(--color-secondary); }
.prob__causes-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .75rem; }
/* Both shapes styled: `li` for hand-written markup, `> *` for the core/group
   children the block editor produces. */
.prob__causes-list li,
.prob__causes-list > * {
	background: var(--color-surface); border: 2px solid var(--color-secondary); border-radius: 12px;
	overflow: hidden; padding: 0 0 .85rem; font-family: var(--font-display); font-weight: 700;
	font-size: .96rem; color: var(--color-text); text-align: center;
}
.prob__causes-list .wp-block-image { margin: 0 0 .8rem; }
.prob__causes-list .wp-block-image img,
.prob__cause-img { display: block; width: 100%; height: 132px; object-fit: cover; object-position: center; border-bottom: 2px solid var(--color-secondary); margin-bottom: .8rem; }
.prob__causes-list .wp-block-image img { margin-bottom: 0; }
.prob__cause-img--mid { object-position: center 38%; }
.prob__cause-img--low { object-position: center 62%; }
.prob__cause-label { display: block; padding-inline: .85rem; }
.prob__causes-note { font-size: .9rem; color: var(--color-muted); max-width: 68ch; }

/* ══════════ SOLUTION ══════════ */
.sol .head-center { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sol__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(2.75rem, 5.5vw, 4rem); }
.sol__shot { margin: 0; }
.sol__shot img { width: 100%; height: auto; border-radius: var(--img-radius); border: 2px solid var(--color-secondary); box-shadow: 8px 8px 0 var(--color-secondary); }
.sup__grid { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.sup__item {
	display: grid; grid-template-columns: 58px 1fr; column-gap: 1rem; align-items: center;
	background: var(--color-bg); border: 2px solid var(--color-secondary); border-radius: var(--card-radius);
	padding: .9rem 1.15rem; box-shadow: 4px 4px 0 var(--color-secondary);
	transition: transform .2s ease, box-shadow .2s ease;
}
.sup__item:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--color-secondary); }
.sup__icon { width: 58px; height: 58px; grid-column: 1; grid-row: 1 / 3; }
.sup__name { grid-column: 2; align-self: end; font-size: 1rem; margin-bottom: .12rem; color: var(--color-text); }
.sup__desc { grid-column: 2; align-self: start; font-size: .87rem; color: var(--color-muted); line-height: 1.45; }
.sol__steps-title { text-align: center; font-size: clamp(1.3rem, 2.8vw, 1.7rem); color: var(--color-text); margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.sol__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1.5rem; counter-reset: solstep; }
.sol__step {
	position: relative; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
	border: 2px solid var(--color-secondary); border-radius: 26px; padding: 2rem 1.6rem;
	box-shadow: 4px 4px 0 var(--color-secondary); counter-increment: solstep;
	transition: transform .25s ease, box-shadow .25s ease;
}
.sol__step:hover { transform: translate(2px, 2px) rotate(-.5deg); box-shadow: 2px 2px 0 var(--color-secondary); }
.sol__step:nth-child(2) { background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-bg)); }
.sol__step:nth-child(3) { background: color-mix(in srgb, var(--color-primary) 13%, var(--color-bg)); }
.sol__step:nth-child(4) { background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-bg)); }
.sol__step::after {
	content: counter(solstep); position: absolute; top: 1.25rem; right: 1.4rem;
	font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1;
	color: var(--color-secondary); opacity: .13;
}
.sol__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px;
	border-radius: 999px; background: var(--color-primary); color: var(--on-primary);
	margin-bottom: 1.1rem; box-shadow: 3px 3px 0 var(--color-secondary);
}
.sol__icon svg { width: 30px; height: 30px; }
.sol__title { font-size: 1.05rem; margin-bottom: .5rem; color: var(--color-text); }
.sol__desc { color: var(--color-muted); font-size: .94rem; }
.sol__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }

.fold { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.fold__card { background: var(--color-surface); border: 2px solid var(--color-secondary); border-radius: var(--card-radius); padding: 1.75rem 1.5rem; box-shadow: 4px 4px 0 var(--color-secondary); }
.fold__card h4 { font-size: 1.05rem; color: var(--color-text); margin-bottom: .5rem; }
.fold__card p { font-size: .93rem; color: var(--color-muted); }
.fold__card p + p { margin-top: .6rem; padding-top: .6rem; border-top: 1.5px solid var(--color-line); font-size: .85rem; }
.fold__card p span, .fold__card p strong { font-family: var(--font-display); font-weight: 700; color: var(--color-text); }
/* Centred at its natural size, never stretched. The demo graphic is 526px
   wide; the original page forced it to width:100% inside a 16:9 box, which
   upscaled it 2.3x and squashed a square into a letterbox. Left alone it sits
   at its real size — but a block-level figure in a 1200px container hugs the
   left edge, which is what looked broken. width:fit-content plus auto inline
   margins centres it, and the 520px cap sits just under the 526px source so
   a larger replacement scales down rather than this file scaling up. */
.fold__shot {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	margin-inline: auto;
	width: fit-content;
	max-width: min(520px, 100%);
}
.fold__shot img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: var(--img-radius);
}
.fold__shot + .fold { margin-top: 1.5rem; }

.mini { margin-top: clamp(2.5rem, 5vw, 3.5rem); background: var(--color-surface); border: 2px solid var(--color-secondary); border-radius: var(--card-radius); padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: 6px 6px 0 var(--color-secondary); }
.mini__title { text-align: center; font-size: clamp(1.3rem, 2.8vw, 1.7rem); color: var(--color-text); margin-bottom: .4rem; }
.mini__sub { text-align: center; font-size: .95rem; color: var(--color-muted); max-width: 60ch; margin: 0 auto 1.5rem; }
.mini__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1rem; }
.mini__group { background: var(--color-bg); border: 2px solid var(--color-line); border-radius: 14px; padding: 1rem 1.1rem; }
.mini__group h4 { font-size: .98rem; color: var(--color-text); margin-bottom: .15rem; }
.mini__count { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.mini__list { font-size: .82rem; color: var(--color-muted); margin-top: .5rem; line-height: 1.5; }
.mini__origin { margin-top: 1.5rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-text); }

@media (max-width: 900px) {
	.sol__intro { grid-template-columns: 1fr; }
	.sol__shot img { box-shadow: 5px 5px 0 var(--color-secondary); }
}

/* ══════════ BEFORE / AFTER ══════════ */
.ba__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.75rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.ba-item { margin: 0; }
/* 3/4, not 4/3: every real customer photo is a portrait phone shot. */
.ba-item__stage { position: relative; aspect-ratio: 3 / 4; border-radius: var(--img-radius); overflow: hidden; border: 2px solid rgba(255, 255, 255, .3); user-select: none; background: var(--color-secondary); }
.ba-item__layer { position: absolute; inset: 0; }
.ba-item__after { clip-path: inset(0 50% 0 0); }
.ba-item__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
	pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.ba-item__tag {
	position: absolute; top: .75rem; font-family: var(--font-display); font-size: .68rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 8px;
	background: rgba(32, 58, 114, .78); color: var(--on-dark);
}
.ba-item__tag--before { right: .75rem; }
.ba-item__tag--after { left: .75rem; background: var(--color-primary); color: var(--on-primary); }
.ba-item__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--on-dark); transform: translateX(-1.5px); pointer-events: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.ba-item__handle::after {
	content: "\2039 \203A"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
	background: var(--on-dark); color: var(--color-secondary); font-weight: 800; font-size: .85rem; border: 2px solid var(--color-secondary);
}
.ba-item__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba-item__cap { margin-top: .9rem; font-size: .93rem; color: var(--on-dark-muted); }
.ba__note { margin-top: 2rem; font-size: .8rem; color: rgba(255, 255, 255, .5); text-align: center; max-width: 72ch; margin-inline: auto; }

/* ══════════ REVIEW SLIDER ══════════
   The cards must NOT carry .reveal: they sit inside an overflow container, so
   the ones off to the right never intersect the viewport and would stay
   invisible forever. The wrapper is revealed instead. */
.tslider { position: relative; }
.tslider__track {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* room for the 4px hard shadow on the cards, which would otherwise clip */
	padding: 6px 6px 22px;
	margin-inline: -6px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.tslider__track::-webkit-scrollbar { display: none; }
/* base.css's reduced-motion clamp only covers animation/transition, not
   scroll-behavior, so the track opts out of smooth scrolling itself. */
@media (prefers-reduced-motion: reduce) { .tslider__track { scroll-behavior: auto; } }
.tslider__track > * { flex: 0 0 calc((100% - 4.5rem) / 4); scroll-snap-align: start; }

@media (max-width: 1180px) { .tslider__track > * { flex-basis: calc((100% - 3rem) / 3); } }
@media (max-width: 900px)  { .tslider__track > * { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 620px)  { .tslider__track > * { flex-basis: 100%; } }

.tslider__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px;
	background: var(--color-primary); color: var(--on-primary);
	border: 2px solid var(--color-secondary); box-shadow: 3px 3px 0 var(--color-secondary);
	font-size: 1.35rem; font-weight: 800; line-height: 1; z-index: 3;
}
.tslider__nav--prev { left: -14px; }
.tslider__nav--next { right: -14px; }
.tslider__nav:disabled { opacity: .35; box-shadow: none; cursor: default; }
.tslider__nav:not(:disabled):hover { transform: translateY(-50%) translate(1px, 1px); box-shadow: 2px 2px 0 var(--color-secondary); }

@media (max-width: 1280px) {
	.tslider__nav--prev { left: 2px; }
	.tslider__nav--next { right: 2px; }
}
@media (max-width: 620px) { .tslider__nav { display: none; } }

.tslider__dots { display: flex; justify-content: center; gap: .5rem; margin-top: .25rem; }
.tslider__dot { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 2px solid var(--color-secondary); background: transparent; }
.tslider__dot.is-on { background: var(--color-primary); }
.section--dark .tslider__dot { border-color: rgba(255, 255, 255, .6); }
.section--dark .tslider__dot.is-on { background: var(--color-primary); border-color: var(--color-primary); }

.urgency {
	display: inline-block; background: var(--color-primary); color: var(--on-primary);
	font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .12em;
	text-transform: uppercase; padding: .45rem 1.1rem; border-radius: 999px; margin-bottom: .9rem;
	border: 2px solid var(--color-secondary);
}
.tcards .head-center { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.tcard {
	margin: 0; background: var(--color-bg); border: 2px solid var(--color-secondary);
	border-radius: var(--card-radius); padding: 1.85rem 1.6rem; display: flex; flex-direction: column;
	gap: 1rem; box-shadow: 4px 4px 0 var(--color-secondary);
}
.tcard__stars { color: var(--color-primary); letter-spacing: .15em; font-size: 1.05rem; }
.tcard__quote { font-size: .98rem; line-height: 1.6; color: var(--color-text); }
.tcard__person { display: flex; align-items: center; gap: .85rem; margin-top: auto; }
.tcard__avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-secondary); background: var(--color-surface); }
/* Fallback for reviews whose customer photo has not been cropped out of the
   source graphic yet — the brand paw, never an invented stock face. */
.tcard__avatar--mark { object-fit: contain; padding: 7px; background: var(--color-surface); }
.tcard__meta { display: flex; flex-direction: column; line-height: 1.3; font-size: .92rem; }
.tcard__meta strong { color: var(--color-text); }
.tcard__meta span { color: var(--color-muted); }
/* Empty slots. Padding the slider with written-up quotes would be the one
   dishonest thing on the page — leave them blank until a real one arrives. */
.tcard--slot {
	background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-primary) 16%, #fff) 0 14px, #fff 14px 28px);
	border-style: dashed; box-shadow: none; align-items: flex-start; justify-content: center; gap: .7rem;
}
.tcard__slot-text { font-family: var(--font-display); font-weight: 700; font-size: .98rem; line-height: 1.35; color: var(--color-secondary); }
.tcard__slot-hint { font-size: .82rem; color: var(--color-muted); }
.tcards__note { margin-top: 1.25rem; text-align: center; font-size: .8rem; color: var(--color-muted); max-width: 70ch; margin-inline: auto; }
.section--dark .tcards__note { color: rgba(255, 255, 255, .55); }
.tcards__cta { margin-top: 2rem; text-align: center; }

/* ══════════ GUARANTEES ══════════ */
.gtee .head-center { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.gtee__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.75rem; }
.gtee__item { text-align: center; }
.gtee__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px;
	border-radius: 999px; background: var(--color-primary); color: var(--on-primary); margin-bottom: 1.1rem;
}
.gtee__icon svg { width: 32px; height: 32px; }
.gtee__title { font-size: 1.1rem; color: var(--on-dark); margin-bottom: .4rem; }
.gtee__desc { color: var(--on-dark-muted); font-size: .94rem; max-width: 34ch; margin-inline: auto; }

/* ══════════ CERTIFICATION SEALS ══════════ */
.certs__seal { width: 104px; height: 104px; display: block; flex: none; }
.certs__teeth { fill: none; stroke: var(--color-primary); stroke-width: 9.5; stroke-dasharray: 5.4 5.233; }
.certs__body { fill: var(--color-secondary); }
.certs__ring { fill: none; stroke: var(--color-primary); stroke-width: 1.6; }
.certs__hair { fill: none; stroke: var(--color-primary); stroke-width: .7; opacity: .45; }
.certs__tick { fill: none; stroke: var(--color-primary); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.certs__arc { fill: none; }
.certs__seal-mark { fill: var(--on-dark); font-family: var(--font-display); font-weight: 700; text-anchor: middle; letter-spacing: .02em; }
.certs__seal-sub { fill: var(--color-primary); font-family: var(--font-body); font-weight: 700; font-size: 7.5px; letter-spacing: .2em; text-anchor: middle; }
/* At 56px the curved "CERTIFIED" caption renders about 4px tall and reads as
   dirt, so the compact strip drops it (and the hairline). */
.certstrip .certs__seal-sub, .certstrip .certs__hair { display: none; }
/* The seal disc is brand navy, which disappears on a navy --section--dark band.
   Flip the disc to white there and take every glyph ON it back to navy — a
   yellow tick or ring on a white disc is 1.6:1, invisible. The teeth stay
   yellow: they sit outside the disc, on the dark band itself. */
.section--dark .certstrip .certs__body { fill: #fff; }
.section--dark .certstrip .certs__seal-mark { fill: var(--color-secondary); }
.section--dark .certstrip .certs__tick,
.section--dark .certstrip .certs__ring { stroke: var(--color-secondary); }

.buy__certs { margin-top: clamp(2rem, 4vw, 2.75rem); }
.certstrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2rem; }
.certstrip__item { display: flex; align-items: center; gap: .7rem; }
.certstrip .certs__seal { width: 56px; height: 56px; }
.certstrip__label { font-size: .82rem; font-weight: 600; color: var(--color-muted); max-width: 14ch; line-height: 1.3; }
.section--dark .certstrip__label { color: var(--on-dark-muted); }
.certstrip__note { margin-top: 1.1rem; text-align: center; font-size: .78rem; color: var(--color-muted); max-width: 66ch; margin-inline: auto; }
.section--dark .certstrip__note { color: rgba(255, 255, 255, .55); }

/* ══════════ ORDER PANEL ══════════ */
.buy .head-center { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.buy__panel {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--color-surface);
	border: 2px solid var(--color-secondary); border-radius: calc(var(--card-radius) + 6px);
	padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: 8px 8px 0 var(--color-secondary); align-items: start;
}
.buy__legend { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-text); margin-bottom: 1.1rem; }
.buy__option {
	position: relative; display: flex; align-items: flex-start; gap: .85rem; cursor: pointer;
	background: var(--form-bg); border: 2px solid var(--color-line); border-radius: 14px;
	padding: 1rem 1.1rem; margin-bottom: .75rem; transition: border-color .18s ease, box-shadow .18s ease;
}
.buy__option:hover { border-color: var(--color-secondary); }
.buy__option input { flex: none; width: 20px; height: 20px; margin: .2rem 0 0; accent-color: var(--color-secondary); }
/* Sized inline per row via --pw-thumb: the dearest package gets the largest
   can, so the picker reads as a size ladder before any price is. contain, not
   cover, so a replacement photo is never cropped; no background fill, so the
   transparent cut-out sits on the row rather than on a tinted tile. */
.buy__option-img {
	flex: none; align-self: center;
	width: var(--pw-thumb, 64px); height: var(--pw-thumb, 64px);
	object-fit: contain; border-radius: 10px;
}
@media (max-width: 380px) {
	.buy__option-img { width: min(var(--pw-thumb, 64px), 50px); height: min(var(--pw-thumb, 64px), 50px); }
}
.buy__option:has(input:checked) { border-color: var(--color-primary); box-shadow: 3px 3px 0 var(--color-secondary); }
.buy__option-body { flex: 1; min-width: 0; }
.buy__option-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.buy__option-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-text); }
.buy__option-price { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--color-secondary); white-space: nowrap; }
.buy__option-price s { color: var(--color-muted); font-weight: 600; font-size: .85rem; margin-right: .25rem; }
.buy__option-note { display: block; font-size: .84rem; color: var(--color-muted); margin-top: .15rem; }
.buy__option-tag {
	position: absolute; top: -10px; right: 14px; background: var(--color-primary); color: var(--on-primary);
	font-family: var(--font-display); font-weight: 700; font-size: .62rem; letter-spacing: .1em;
	text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px; border: 2px solid var(--color-secondary);
}
.buy__assurance { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: .86rem; font-weight: 600; color: var(--color-muted); }
.buy__assurance li { position: relative; padding-left: 1.35rem; }
.buy__assurance li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-secondary); font-weight: 800; }
.buy__notice {
	display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.35rem; font-size: .84rem;
	color: var(--color-muted); background: var(--color-bg); border: 1px solid var(--color-line);
	border-radius: 12px; padding: .8rem 1rem;
}
.buy__notice-icon { flex: none; color: var(--color-secondary); }
.buy__notice-icon svg { width: 20px; height: 20px; }
/* Capped and centred: at the column's ~500px the 4:5 shot would run ~190px
   taller than the gap it is filling and push the packages column past the form. */
.buy__shot { margin: 1.35rem auto 0; max-width: 340px; background: var(--color-bg); border: 2px solid var(--color-secondary); border-radius: var(--card-radius); overflow: hidden; box-shadow: 4px 4px 0 var(--color-secondary); }
.buy__shot img { width: 100%; height: auto; border-bottom: 2px solid var(--color-secondary); }
.buy__shot figcaption { padding: .7rem 1rem; font-size: .8rem; font-weight: 600; line-height: 1.4; color: var(--color-muted); text-align: center; }
.buy__extra { margin-top: 0; }
.buy__form { background: var(--color-bg); border: 2px solid var(--color-secondary); border-radius: var(--card-radius); padding: clamp(1.35rem, 3vw, 1.85rem); box-shadow: 4px 4px 0 var(--color-secondary); }
.buy__field { margin-bottom: 1rem; }
.buy__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1rem; }
.buy__label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .35rem; }
.buy__input { width: 100%; padding: .85rem 1rem; border: 2px solid var(--color-line); border-radius: 12px; background: var(--form-bg); color: var(--form-text); }
.buy__input:focus { outline: none; border-color: var(--color-secondary); }
/* A yellow border is only 1.6:1 on white, so the error state is carried by the fill wash. */
.buy__input.is-error { border-color: var(--color-secondary); background: color-mix(in srgb, var(--color-primary) 18%, var(--form-bg)); }
select.buy__input {
	appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.05rem;
}
select.buy__input:disabled { cursor: not-allowed; opacity: .55; }
.buy__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.buy__submit[aria-busy="true"] { opacity: .7; pointer-events: none; }
/* The brand palette is yellow-on-navy, which cannot carry pass/fail on its own. */
.buy__msg.is-ok, .buy__msg.is-bad { padding: .8rem .95rem; border-radius: 12px; border: 2px solid; }
.buy__msg.is-ok { color: #10603a; border-color: #1a7f4b; background: #e9f7ef; }
.buy__msg.is-bad { color: #8c1d18; border-color: #b3261e; background: #fdeceb; }
.buy__debug {
	margin-top: .55rem; padding: .75rem .85rem; border-radius: 10px; border: 1px dashed #b3261e;
	background: #fff8f7; color: #6b2119; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .72rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 18rem; overflow: auto;
}
.buy__done { background: #e9f7ef; border: 2px solid #1a7f4b; border-radius: 14px; padding: clamp(1.25rem, 3vw, 1.75rem); }
.buy__done h3 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: .6rem; color: #10603a; }
.buy__done p { font-size: .92rem; margin-bottom: .6rem; }
.buy__done-items { list-style: none; margin: 0 0 .6rem; padding: .6rem .8rem; background: #fff; border-radius: 10px; }
.buy__done-items li { font-size: .92rem; line-height: 1.5; }
.buy__done-items li + li { margin-top: .25rem; }
.buy__done-addr { line-height: 1.5; }
.buy__done-hint { font-size: .82rem; color: var(--color-muted); }
.buy__done-ref { font-size: .82rem !important; color: var(--color-muted); letter-spacing: .02em; }
.bump {
	display: flex; align-items: flex-start; gap: .85rem; cursor: pointer; margin-top: 1.35rem;
	background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg));
	border: 2px dashed var(--color-primary); border-radius: 14px; padding: 1rem 1.1rem;
	transition: background .18s ease, box-shadow .18s ease;
}
.bump:hover { background: color-mix(in srgb, var(--color-primary) 11%, var(--color-bg)); }
.bump:has(input:checked) { border-style: solid; box-shadow: 3px 3px 0 var(--color-secondary); }
.bump__check { flex: none; width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--color-secondary); }
.bump__body { flex: 1; min-width: 0; }
.bump__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.bump__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-text); }
.bump__price { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--color-secondary); white-space: nowrap; }
.bump__price s { color: var(--color-muted); font-weight: 600; font-size: .82rem; margin-right: .25rem; }
.bump__sub { display: block; font-size: .86rem; color: var(--color-muted); margin-top: .2rem; }
.bump__sub strong { color: var(--color-secondary); }
/* Shipping priced at FREE right where the total is read — the moment a hidden
   fee would normally appear is the moment this says there is none. */
.buy__ship { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 2px dashed var(--color-line); margin-top: 1.35rem; padding-top: 1.1rem; }
.buy__ship-label { font-size: .84rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.buy__ship-value { font-family: var(--font-display); font-weight: 800; font-size: .8rem; letter-spacing: .1em; background: var(--color-primary); color: var(--on-primary); border: 2px solid var(--color-secondary); border-radius: 999px; padding: .22rem .8rem; }
.buy__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 2px dashed var(--color-line); margin-top: 1.35rem; padding-top: 1.1rem; margin-bottom: 1.1rem; }
/* When the ship row is present it owns the dashed rule; the total rides under it. */
.buy__ship + .buy__total { border-top: 0; margin-top: .5rem; padding-top: 0; }
.buy__total-label { font-size: .84rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.buy__total-value { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--color-secondary); }
.buy__submit { width: 100%; }
.buy__msg { min-height: 1.3rem; margin-top: .75rem; font-size: .88rem; font-weight: 600; color: var(--color-secondary); }
.buy__cancel { margin-top: .5rem; font-size: .78rem; color: var(--color-muted); }

/* The dosage card is last in the markup so the single-column mobile stack reads
   packages -> form -> dosage. On two columns it is grid-placed back under the
   product shot, with the form spanning both rows beside it. */
@media (min-width: 861px) {
	.buy__panel { row-gap: 1.35rem; }
	.buy__packages { grid-column: 1; grid-row: 1; }
	.buy__extra { grid-column: 1; grid-row: 2; }
	.buy__form { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 860px) { .buy__panel { grid-template-columns: 1fr; } }

/* ══════════ DOSAGE TABLE ══════════ */
.dose { border: 2px solid var(--color-secondary); border-radius: var(--card-radius); background: var(--color-bg); padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: 4px 4px 0 var(--color-secondary); }
.dose__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-text); margin-bottom: .2rem; }
.dose__sub { font-size: .88rem; color: var(--color-muted); margin-bottom: 1rem; }
.dose table { width: 100%; border-collapse: collapse; }
.dose th, .dose td { text-align: left; padding: .6rem .75rem; font-size: .92rem; }
.dose thead th { font-family: var(--font-display); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-primary); background: var(--color-primary); }
.dose thead th:first-child { border-radius: 8px 0 0 8px; }
.dose thead th:last-child { border-radius: 0 8px 8px 0; }
.dose tbody tr { border-bottom: 1px solid var(--color-line); }
.dose tbody tr:last-child { border-bottom: 0; }
.dose tbody td:last-child { font-family: var(--font-display); font-weight: 700; color: var(--color-secondary); }
.dose__warn { margin-top: .9rem; font-size: .82rem; font-weight: 600; color: var(--on-primary); background: var(--color-primary); border-radius: 8px; padding: .5rem .8rem; display: inline-block; }

/* ══════════ STICKY BUY BAR ══════════ */
.stickybuy {
	position: fixed; inset: auto 0 0 0; z-index: 90; background: var(--color-bg);
	border-top: 2px solid var(--color-secondary); box-shadow: 0 -6px 24px rgba(32, 58, 114, .18);
	transform: translateY(105%); visibility: hidden; transition: transform .28s ease, visibility 0s .28s;
}
.stickybuy.is-shown { transform: translateY(0); visibility: visible; transition: transform .28s ease; }
/* The hidden attribute is kept for assistive tech; display is driven by
   visibility so the slide animates. */
.stickybuy[hidden] { display: block; }
.stickybuy__inner { display: flex; align-items: center; gap: 1rem; padding-block: .75rem; }
.stickybuy__img { flex: none; width: 44px; height: 44px; object-fit: contain; border-radius: 8px; }
.stickybuy__info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1 1 auto; }
.stickybuy__name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybuy__pack { font-size: .8rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybuy__ship {
	align-self: flex-start; margin-top: .2rem;
	font-family: var(--font-display); font-weight: 700; font-size: .6rem;
	letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
	background: var(--color-primary); color: var(--on-primary);
	border-radius: 999px; padding: .14rem .55rem;
}
.stickybuy__select { display: flex; flex-direction: column; gap: .15rem; flex: none; }
.stickybuy__select-label { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.stickybuy__select select { padding: .5rem .7rem; border: 2px solid var(--color-secondary); border-radius: 10px; background: var(--form-bg); color: var(--form-text); font-size: .85rem; font-weight: 600; }
.stickybuy__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; flex: none; }
.stickybuy__price-label { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.stickybuy__price-value { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--color-secondary); }
.stickybuy__btn { flex: none; padding: .8rem 1.6rem; font-size: .85rem; box-shadow: 3px 3px 0 var(--color-secondary); }
@media (max-width: 820px) { .stickybuy__select { display: none; } }
@media (max-width: 560px) {
	.stickybuy__inner { gap: .75rem; }
	.stickybuy__name { font-size: .85rem; }
	.stickybuy__pack { display: none; }
	.stickybuy__price-value { font-size: 1.15rem; }
	.stickybuy__btn { padding: .75rem 1.1rem; font-size: .78rem; }
	.stickybuy__img { width: 34px; height: 34px; }
}

/* ══════════ DRAFT NOTE ══════════
   Stamped on the pages the demo importer creates, so a placeholder refund
   policy cannot quietly go live reading as the real thing. */
.pw-draft-note {
	border: 2px dashed var(--color-primary);
	border-radius: 12px;
	background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
	padding: .9rem 1.1rem;
	font-size: .9rem;
	color: var(--color-secondary);
}

/* ══════════ LEGAL STRIP ══════════ */
.legal { background: var(--color-secondary); color: rgba(255, 255, 255, .6); padding-block: 1.5rem; text-align: center; }
.legal__line { font-size: .84rem; color: rgba(255, 255, 255, .8); }
.legal__line a { text-decoration: underline; }
.legal__address { font-style: normal; font-size: .8rem; color: rgba(255, 255, 255, .7); margin-top: .3rem; }
.legal__disclaimer { font-size: .74rem; max-width: 78ch; margin: .5rem auto 0; }