/*
 * GREEN BADGER — responsive shell foundation (Phase 1).
 *
 * A NEW layer, loaded after sections.css. It adds nothing to and removes
 * nothing from the existing section breakpoints: every rule here is either a
 * custom property, or scoped to markup that only this file's PHP renders
 * (.dm-app-bar / .dm-app-nav / .dm-sheet), or lives inside the app-shell
 * capability query where the desktop design is not in play at all.
 *
 * Migrating individual sections onto the tokens below is later work.
 */

/* ------------------------------------------------------------ tokens */

body.dm-pack-green-badger {
	/* Brand, unchanged from the v3 system — restated here so the shell does
	   not have to reach into a section stylesheet for them. */
	--dm-black: #0b0b0a;
	--dm-gold: #b89a5b;
	--dm-cream: #f4f1e8;

	/* The registration margin invariant: never 0 at any width. The mobile
	   shell's horizontal gutter is the same measure, so chrome and content
	   register against one edge. */
	--margin: clamp(16px, 4vw, 96px);
	--gutter: var(--margin);

	/* The only four structural breakpoints this system introduces: 768 /
	   1024 / 1280 / 1600. Recorded as values so future work can read them
	   rather than re-guess. */
	--dm-bp-sm: 768px;
	--dm-bp-md: 1024px;
	--dm-bp-lg: 1280px;
	--dm-bp-xl: 1600px;

	--dm-appbar-h: 56px;
	--dm-appbar-h-compact: 48px;
	--dm-appnav-h: 56px;
	--dm-tap: 44px;

	/* The announcement is the first band of the fixed top chrome, so its height
	   has to be a number the shell can reserve. 0 unless one is actually
	   rendered — see the :has() rules below. */
	--dm-announce-h: 0px;

	/* WordPress owns the admin bar; the shell only has to start below it. The
	   fixed chrome cannot inherit html's margin-top, so the offset is restated
	   here at the two heights WP itself uses. */
	--dm-admin-offset: 0px;

	--dm-safe-top: env(safe-area-inset-top, 0px);
	--dm-safe-bottom: env(safe-area-inset-bottom, 0px);
	--dm-safe-left: env(safe-area-inset-left, 0px);
	--dm-safe-right: env(safe-area-inset-right, 0px);

	--dm-hairline: rgba(184, 154, 91, .28);
	--dm-scrim: rgba(11, 11, 10, .72);
}

body.dm-pack-green-badger:has(.dm-header-announcement) {
	--dm-announce-h: var(--dm-header-announcement-height, 36px);
}

/* Dismissed, or hidden by the pack's own mobile switch: the band is gone, so
   the reservation has to go with it or the gap comes back as dead space. */
body.dm-pack-green-badger:has(.dm-header-announcement.is-dismissed) {
	--dm-announce-h: 0px;
}

@media (max-width: 921px) {
	body.dm-header-announcement-mobile-hidden.dm-pack-green-badger {
		--dm-announce-h: 0px;
	}
}

body.admin-bar.dm-pack-green-badger { --dm-admin-offset: 32px; }

@media (max-width: 782px) {
	body.admin-bar.dm-pack-green-badger { --dm-admin-offset: 46px; }
}

/* At 600px WP core stops fixing the admin bar (#wpadminbar goes
   position:absolute and scrolls away with the page), so a constant offset
   would leave a 46px orphan band once it has scrolled off. Below 600px the
   chrome is sticky in real flow (see the ≤600px block further down) and
   needs no reservation at all. */
@media (max-width: 600px) {
	body.admin-bar.dm-pack-green-badger { --dm-admin-offset: 0px; }
}

/* ------------------------------------------------------- shell switch
 *
 * Both chromes are always in the DOM — server-rendered, no UA sniffing — and
 * CSS alone decides which one a device sees. Width and pointer BOTH have to
 * agree: a coarse pointer at 1024px+ (tablet in landscape) is a desktop-chrome
 * device, and a fine pointer in a narrow window never gets a bottom nav.
 */

.dm-app-bar,
.dm-app-nav {
	display: none;
}

@media (max-width: 1023px) {
	body.dm-pack-green-badger .dm-app-bar {
		display: flex;
	}

	/* Grid, not flex — .dm-app-nav's own rule (below) reserves the GUIDE
	   button's centre column; this higher-specificity switch has to agree
	   with it or the four real tabs collapse to content width. */
	body.dm-pack-green-badger .dm-app-nav {
		display: grid;
	}

	/* The desktop header is the other half of the switch. Astra renders its
	   own mobile header inside this element; the app bar replaces it. */
	body.dm-pack-green-badger .site-header,
	body.dm-pack-green-badger #masthead {
		display: none;
	}

	/* Two other plugins already fix a bar to the bottom of a phone: the generic
	   chrome-extras tab bar and Fruitera's mobile nav. All three are the same
	   idea, and only one of them may exist — under this pack it is the app nav. */
	body.dm-pack-green-badger .dm-tabbar {
		display: none;
	}

	/* Fruitera declares its bar `display:grid !important`, so nothing but
	   `!important` can retire it. This is the one place in this file that needs
	   it, and it is a suppression of foreign markup rather than a style of our
	   own that had to shout to be heard. */
	body.dm-pack-green-badger .fr-mobile-app-nav {
		display: none !important;
	}

	/* The announcement joins the fixed top chrome instead of standing in flow.
	 *
	 * In flow it was the first child of <body>, so the reservation body makes
	 * for the fixed app bar was inserted ABOVE it — the announcement started
	 * one whole bar-height down from the top (or from the admin bar), which is
	 * the gap. Out of flow there is nothing above it to reserve against: the
	 * band sits at the top, the app bar sits directly under it, and body
	 * reserves the two together.
	 */
	body.dm-pack-green-badger .dm-header-announcement {
		position: fixed;
		inset: calc(var(--dm-admin-offset) + var(--dm-safe-top)) 0 auto 0;
		/* Its own 9991 would put it over the bottom sheet (1000). Inside the
		   shell it only ever has to clear the app bar. */
		z-index: 901;
	}

	body.dm-pack-green-badger .dm-app-bar {
		top: calc(var(--dm-admin-offset) + var(--dm-safe-top) + var(--dm-announce-h));
	}

	/* The app bar carries the safe-area inset itself when it is the topmost
	   band. With an announcement above it, that band belongs to the
	   announcement — the bar would otherwise reserve the notch a second time. */
	body.dm-pack-green-badger:has(.dm-header-announcement:not(.is-dismissed)) .dm-app-bar {
		height: var(--dm-appbar-h);
		padding-top: 0;
	}

	body.dm-pack-green-badger:has(.dm-header-announcement:not(.is-dismissed)) .dm-app-bar.is-compact {
		height: var(--dm-appbar-h-compact);
	}

	body.dm-pack-green-badger {
		padding-top: calc(var(--dm-announce-h) + var(--dm-appbar-h) + var(--dm-safe-top));
		padding-bottom: calc(var(--dm-appnav-h) + var(--dm-safe-bottom));
	}
}

/* ≤600px: nothing may pin to an admin-bar constant, because WP's own bar is
 * absolute here and scrolls away. The whole top chrome — announcement + app
 * bar, wrapped by .dm-app-chrome in the PHP — is ONE sticky flow element:
 * at scroll 0 it sits naturally below the in-flow admin bar, and once that
 * bar scrolls off the wrapper pins itself to y=0. Logged-out is the same
 * code path with the admin bar simply absent from the flow.
 */
@media (max-width: 600px) {
	body.dm-pack-green-badger .dm-app-chrome {
		position: sticky;
		top: 0;
		z-index: 901;
	}

	body.dm-pack-green-badger .dm-header-announcement {
		position: relative;
		inset: auto;
	}

	body.dm-pack-green-badger .dm-app-bar {
		/* Relative, not static: geometrically identical inside the sticky
		   wrapper, but gives the transparent-at-top ::after panel (further
		   down) a box to fill. The fixed-mode top offset (announcement rule
		   above) would otherwise apply as a relative shift — neutralise it. */
		position: relative;
		top: auto;
	}

	/* The sticky wrapper occupies its own real flow space, so a computed
	   reservation on top of it would double-count. The bottom nav is still
	   fixed and keeps its reservation. */
	body.dm-pack-green-badger {
		padding-top: 0;
	}
}

/* ------------------------------------------------------------ top bar
 *
 * Never hides. It only compresses, so the brand mark is on screen at every
 * scroll position.
 */

.dm-app-bar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 900;
	align-items: center;
	gap: 8px;
	height: calc(var(--dm-appbar-h) + var(--dm-safe-top));
	padding: var(--dm-safe-top) calc(var(--gutter) + var(--dm-safe-right)) 0 calc(var(--gutter) + var(--dm-safe-left));
	background: var(--dm-black);
	border-bottom: 1px solid transparent;
	transition: height 220ms ease, border-color 220ms ease;
}

.dm-app-bar.is-compact {
	height: calc(var(--dm-appbar-h-compact) + var(--dm-safe-top));
	border-bottom-color: var(--dm-hairline);
}

.dm-app-bar__brand {
	display: flex;
	align-items: center;
	margin-right: auto;
	min-height: var(--dm-tap);
	color: var(--dm-cream);
	text-decoration: none;
}

/* The theme and the Fruitera skin both size site logos by their own selectors,
   and either would win over a plain descendant rule here — so the app bar's
   mark is sized from the bar itself, which owns the only height that matters. */
body.dm-pack-green-badger .dm-app-bar__brand img,
body.dm-pack-green-badger .dm-app-bar__brand svg {
	display: block;
	/* Both dimensions are stated. `width:auto` would be the natural way to keep
	   the mark's aspect, but a global `aspect-ratio` further up the cascade
	   collapsed it to a square — `object-fit` restores the true proportions
	   inside a box this file controls outright. */
	width: 132px;
	height: 28px;
	object-fit: contain;
	object-position: left center;
	transition: height 220ms ease;
}

body.dm-pack-green-badger .dm-app-bar.is-compact .dm-app-bar__brand img,
body.dm-pack-green-badger .dm-app-bar.is-compact .dm-app-bar__brand svg {
	height: 22px;
}

.dm-app-bar__brand-text {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 19px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.dm-app-bar__action {
	position: relative;
	display: flex;
	flex: 0 0 var(--dm-tap);
	align-items: center;
	justify-content: center;
	width: var(--dm-tap);
	height: var(--dm-tap);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--dm-cream);
	text-decoration: none;
	cursor: pointer;
}

.dm-app-bar__action .dm-ic {
	width: 21px;
	height: 21px;
}

.dm-app-bar__count {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--dm-gold);
	color: var(--dm-black);
	font-family: 'Noto Sans JP', system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.dm-app-bar__count[data-dm-count="0"] {
	display: none;
}

/* ---- Transparent at page top, settled after ~160px of scroll ----------
 *
 * Same mechanism as the desktop header (sections.css, gb-header-settle):
 * at scroll 0 the bar paints only a soft scrim (::before) so the hero art
 * shows through, and the solid panel (::after) is faded in by a CSS
 * scroll-driven animation across the first 160px. No script, no second
 * scroll listener — the compress-on-scroll JS keeps toggling .is-compact
 * independently and the two never touch the same property.
 *
 * The bar's flat paint is owned by chrome-inversion.css (--dm-bar-bg,
 * loaded after this file), so two things compose with it here: the
 * transparent override needs the .dm-app-chrome ancestor to outrank it,
 * and the settle panel paints var(--dm-bar-bg) — with the same
 * --dm-chrome-shift transition — so the cream inversion keeps working,
 * just one layer down. Keyframes are duplicated locally rather than
 * reusing gb-header-settle so this file stays standalone.
 */

@keyframes dm-appbar-settle {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes dm-appbar-scrim-lift {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@media (max-width: 1023px) {
	body.dm-pack-green-badger .dm-app-chrome .dm-app-bar {
		background: transparent;
	}

	/* Top-of-page scrim: keeps the brand mark and icons readable over the
	   hero art. Fades out as the settle panel fades in. */
	body.dm-pack-green-badger .dm-app-bar::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(180deg, rgba(7, 9, 7, .55) 0%, rgba(7, 9, 7, .2) 100%);
		opacity: 1;
		pointer-events: none;
	}

	body.dm-pack-green-badger .dm-app-bar::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--dm-bar-bg, var(--dm-black));
		opacity: 0;
		pointer-events: none;
		transition: background-color var(--dm-chrome-shift, 280ms) ease;
	}

	@supports (animation-timeline: scroll()) {
		body.dm-pack-green-badger .dm-app-bar::before {
			animation: dm-appbar-scrim-lift linear both;
			animation-timeline: scroll(root);
			animation-range: 0 160px;
		}
		body.dm-pack-green-badger .dm-app-bar::after {
			animation: dm-appbar-settle linear both;
			animation-timeline: scroll(root);
			animation-range: 0 160px;
		}
	}

	/* Engines without scroll-driven animations get one settled bar — the
	   resting state is the readable one, matching the desktop fallback. */
	@supports not (animation-timeline: scroll()) {
		body.dm-pack-green-badger .dm-app-bar::before { opacity: 0; }
		body.dm-pack-green-badger .dm-app-bar::after { opacity: 1; }
	}

	@media (prefers-reduced-motion: reduce) {
		body.dm-pack-green-badger .dm-app-bar::before { animation: none; opacity: 0; }
		body.dm-pack-green-badger .dm-app-bar::after { animation: none; opacity: 1; }
	}
}

/* --------------------------------------------------------- bottom nav */

.dm-app-nav {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 900;
	/* display is set only inside the pointer:coarse switch further up —
	   this rule must NOT declare it, or it would win over that switch's
	   `display:none` on a fine-pointer/desktop viewport regardless of
	   source order (same specificity, this rule comes later). */
	/* 5 columns, not 4: the middle one is a dedicated, permanently empty gap
	   the GUIDE button sits over (green-badger-nav-guide.css) — the four real
	   tabs live in columns 1, 2, 4, 5 and never share a column with it. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 74px minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	height: calc(var(--dm-appnav-h) + var(--dm-safe-bottom));
	padding: 0 var(--dm-safe-right) var(--dm-safe-bottom) var(--dm-safe-left);
	background: var(--dm-black);
	border-top: 1px solid var(--dm-hairline);
}

/* The active indicator is one grid item that jumps to the active tab's own
   column — width and position both come for free from the grid instead of a
   translateX/percentage calc that assumed four equal-width flex columns. */
.dm-app-nav::before {
	content: "";
	grid-column: var(--dm-nav-active-col, 1);
	grid-row: 1;
	align-self: start;
	height: 2px;
	background: var(--dm-gold);
}

.dm-app-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	color: rgba(244, 241, 232, .5);
	text-decoration: none;
	/* The Stamp slot is a <button>, not an <a> like the other three — these
	   reset it to look identical and avoid the Astra button:hover/:focus
	   background fight documented lower in this file. Inert on the <a>
	   items (border/background/font already default to this for them). */
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-app-nav__item:hover,
.dm-app-nav__item:focus,
.dm-app-nav__item:active {
	background: none;
}

/* nth-CHILD, not nth-of-type: the 3rd item (Daily Stamp) is a <button>
   while the other three are <a> — nth-of-type counts same-tag siblings only
   and would silently miscount once the tags stopped matching. nth-child
   counts DOM position among ALL of .dm-app-nav's children, which is what
   these four are (positions 1-4; GUIDE's button/nudge follow after). */
.dm-app-nav__item { grid-row: 1; }

.dm-app-nav__item:nth-child(1) { grid-column: 1; }
.dm-app-nav__item:nth-child(2) { grid-column: 2; }
.dm-app-nav__item:nth-child(3) { grid-column: 4; }
.dm-app-nav__item:nth-child(4) { grid-column: 5; }

.dm-app-nav__item[aria-current="page"] {
	color: var(--dm-gold);
}

.dm-app-nav__item .dm-ic {
	width: 20px;
	height: 20px;
}

/* 目的 carries no icon: the glyph pair is the mark. It sits on the same
   optical line as the icons above the labels, so the row still scans as four
   equal targets. */
.dm-app-nav__glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 20px;
	font-family: 'Noto Sans JP', system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: .04em;
}

.dm-app-nav__label {
	font-family: 'Noto Sans JP', system-ui, sans-serif;
	font-size: 9px;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ------------------------------------------------------- bottom sheet
 *
 * Square corners and a 1px gold lip along the top edge instead of a drag
 * handle: the border IS the affordance, and it does not borrow another
 * platform's furniture.
 */

.dm-sheet[hidden] {
	display: none;
}

.dm-sheet {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.dm-sheet__scrim {
	position: absolute;
	inset: 0;
	background: var(--dm-scrim);
	opacity: 0;
	transition: opacity 260ms ease;
}

.dm-sheet.is-open .dm-sheet__scrim {
	opacity: 1;
}

.dm-sheet__panel {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	max-height: 88vh;
	padding-bottom: var(--dm-safe-bottom);
	background: var(--dm-black);
	border-radius: 0;
	border-top: 1px solid var(--dm-gold);
	color: var(--dm-cream);
	transform: translateY(100%);
	transition: transform 260ms ease;
}

.dm-sheet.is-open .dm-sheet__panel {
	transform: translateY(0);
}

/* While a finger is on the panel it follows that finger exactly — no
   transition, or the panel lags behind the touch. */
.dm-sheet.is-dragging .dm-sheet__panel {
	transition: none;
}

.dm-sheet__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px var(--gutter);
	border-bottom: 1px solid var(--dm-hairline);
	/* The header is the drag surface, so the browser must not claim the
	   gesture as a scroll before the pointer handlers ever see it. */
	touch-action: none;
}

.dm-sheet__title {
	flex: 1 1 auto;
	margin: 0;
	/* Astra's own `h1,h2,...{color:var(--ast-global-color-2)}` targets h2
	   directly (main.min.css) and beats inherited color at equal specificity
	   no matter the source order — same fight documented in green-badger-
	   guide.css. Without this the sheet title (search/cart/guide alike)
	   renders in Astra's slate grey instead of --dm-cream. */
	color: var(--dm-cream);
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.dm-sheet__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dm-tap);
	height: var(--dm-tap);
	margin-right: -10px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--dm-cream);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

/* Chrome's default touch tap-highlight (a solid blue fill, not the UA focus
   outline) shows on real/CDP-simulated taps of a plain button/link with no
   override — same gap already closed elsewhere in this pack (green-badger-
   mobile.css et al.), just never set on these three shared shell controls. */
.dm-app-bar__action,
.dm-sheet__close,
.dm-app-nav__item {
	-webkit-tap-highlight-color: transparent;
}

/* The actual cause of the blue box on this button: Astra's theme.json
   `button:hover / button:focus { background: var(--ast-global-color-1) }`
   (its link/accent blue) is a bare-element + one-pseudo-class selector —
   (0,1,1) specificity — which OUTRANKS this plain `.dm-sheet__close`
   class rule (0,1,0) the instant the button is hovered or focused (exactly
   what happens on open, since app-shell.js focuses it). Restating the
   background at equal-or-higher specificity here is what actually closes
   that gap; :focus-visible's gold outline above only ever addressed the
   ring, never this separate background fight. */
.dm-app-bar__action:hover,
.dm-app-bar__action:focus,
.dm-app-bar__action:active,
.dm-sheet__close:hover,
.dm-sheet__close:focus,
.dm-sheet__close:active {
	background: none;
}

/* Plain :focus (mouse/programmatic — e.g. a sheet's own JS calling
   .focus() on its first focusable when it opens) is deliberately left
   without any ring; only :focus-visible below draws one. Without this reset
   the browser's own UA outline (blue) would otherwise show through here,
   off-brand and never overridden by the :focus-visible rule since the two
   pseudo-classes don't both match at once. */
.dm-app-bar__action:focus,
.dm-sheet__close:focus,
.dm-app-nav__item:focus {
	outline: none;
}

.dm-app-bar__action:focus-visible,
.dm-sheet__close:focus-visible,
.dm-app-nav__item:focus-visible {
	outline: 1px solid var(--dm-gold);
	outline-offset: -3px;
}

.dm-sheet__body a {
	color: var(--dm-gold);
}

.dm-sheet__body {
	flex: 1 1 auto;
	font-family: 'Noto Sans JP', system-ui, sans-serif;
	font-size: 14px;
	padding: 20px var(--gutter) 28px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* The one thing a body-scroll lock must not also do is shift the page. */
body.dm-sheet-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.dm-app-bar,
	.dm-app-bar__brand img,
	.dm-app-bar__brand svg,
	.dm-app-nav::before,
	.dm-sheet__scrim,
	.dm-sheet__panel {
		transition: none;
	}
}

/* =====================================================================
 * GREEN BADGER — shared header drop-down product search
 * Native WooCommerce search results; this layer only owns the entry UI.
 * ===================================================================== */
.dm-header-search-strip[hidden] { display: none !important; }
.dm-header-search-strip {
	position: fixed;
	z-index: 998;
	left: 0;
	right: 0;
	top: var(--dm-search-strip-top, 0px);
	background: rgba(7, 8, 7, .985);
	border-top: 1px solid rgba(184,154,91,.14);
	border-bottom: 1px solid rgba(184,154,91,.32);
	box-shadow: 0 22px 44px rgba(0,0,0,.28);
	color: var(--dm-cream, #f4f1e8);
	transform: translateY(-8px);
	opacity: 0;
	transition: transform 180ms ease, opacity 180ms ease;
}
.dm-header-search-strip.is-open { transform: translateY(0); opacity: 1; }
.dm-header-search-strip__inner {
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto;
	padding: 20px 0 16px;
}
.dm-header-search-strip__form {
	display: grid;
	grid-template-columns: 42px minmax(0,1fr) auto 42px;
	align-items: center;
	min-height: 54px;
	border-bottom: 1px solid rgba(184,154,91,.55);
}
.dm-header-search-strip__icon { display:grid; place-items:center; color:var(--dm-gold,#b89a5b); }
.dm-header-search-strip__icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; }
.dm-header-search-strip__form input[type="search"] {
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 12px;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	color: var(--dm-cream,#f4f1e8) !important;
	font: 500 14px/1.3 'Noto Sans JP', system-ui, sans-serif;
	letter-spacing: .035em;
}
.dm-header-search-strip__form input[type="search"]::placeholder { color: rgba(244,241,232,.46); }
.dm-header-search-strip__submit,
.dm-header-search-strip__close {
	appearance: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--dm-cream,#f4f1e8);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.dm-header-search-strip__submit {
	height: 38px;
	padding: 0 20px;
	border-left: 1px solid rgba(184,154,91,.32);
	color: var(--dm-gold,#b89a5b);
	font: 700 12px/1 'Noto Sans JP', system-ui, sans-serif;
	letter-spacing: .1em;
}
.dm-header-search-strip__close { width:42px; height:42px; font-size:24px; font-weight:300; line-height:1; }
.dm-header-search-strip__submit:hover,
.dm-header-search-strip__submit:focus-visible,
.dm-header-search-strip__close:hover,
.dm-header-search-strip__close:focus,
.dm-header-search-strip__close:active,
.dm-header-search-strip__close:focus-visible { color:#fff; background:transparent; }
.dm-header-search-strip__submit:focus-visible,
.dm-header-search-strip__close:focus-visible,
.dm-header-search-strip__form input[type="search"]:focus-visible { outline: 1px solid var(--dm-gold,#b89a5b) !important; outline-offset: -2px; }
.dm-header-search-strip__recommended {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
	padding-top: 13px;
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
}
.dm-header-search-strip__recommended::-webkit-scrollbar { display:none; }
.dm-header-search-strip__recommended-label {
	flex: 0 0 auto;
	color: rgba(244,241,232,.48);
	font: 600 10px/1 'Noto Sans JP', system-ui, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.dm-header-search-strip__recommended a {
	position: relative;
	flex: 0 0 auto;
	padding: 4px 0;
	color: rgba(244,241,232,.82) !important;
	font: 600 11px/1 'Noto Sans JP', system-ui, sans-serif;
	letter-spacing: .08em;
	text-decoration: none !important;
}
.dm-header-search-strip__recommended a::after {
	content:"";
	position:absolute;
	left:0; right:0; bottom:0;
	height:1px;
	background:var(--dm-gold,#b89a5b);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform 160ms ease;
}
.dm-header-search-strip__recommended a:hover::after,
.dm-header-search-strip__recommended a:focus-visible::after { transform:scaleX(1); }
body.dm-search-strip-open { overflow-x: hidden; }

@media (max-width: 1023px) {
	.dm-header-search-strip { z-index: 902; }
	.dm-header-search-strip__inner { width:100%; padding:10px max(14px,var(--gutter,16px)) 11px; }
	.dm-header-search-strip__form { grid-template-columns: 34px minmax(0,1fr) 58px 34px; min-height:46px; }
	.dm-header-search-strip__form input[type="search"] { height:46px; padding:0 8px; font-size:13px; }
	.dm-header-search-strip__submit { height:34px; padding:0 10px; font-size:11px; }
	.dm-header-search-strip__close { width:34px; height:34px; font-size:21px; }
	.dm-header-search-strip__recommended { gap:14px; padding-top:10px; }
	.dm-header-search-strip__recommended-label { font-size:9px; }
	.dm-header-search-strip__recommended a { font-size:10px; }
}
@media (prefers-reduced-motion: reduce) {
	.dm-header-search-strip { transition:none; }
	.dm-header-search-strip__recommended a::after { transition:none; }
}


/* Search v3 polish — preserve the square Green Badger language, improve usability. */
.dm-header-search-strip__form {
  border:1px solid rgba(184,154,91,.30);
  border-bottom-color:rgba(184,154,91,.58);
}
.dm-header-search-strip__form input[type="search"] { font-size:16px !important; min-height:48px; }
.dm-header-search-strip__submit,
.dm-header-search-strip__close { min-width:44px; min-height:44px; }
.dm-header-search-strip__submit { height:44px; }
.dm-header-search-strip__close { width:44px; height:44px; }
.dm-header-search-strip__recommended-label { font-size:11px; color:rgba(244,241,232,.58); }
.dm-header-search-strip__recommended a {
  min-height:32px;
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border:1px solid rgba(184,154,91,.22);
  color:rgba(244,241,232,.88) !important;
}
.dm-header-search-strip__recommended a:hover,
.dm-header-search-strip__recommended a:focus-visible { border-color:rgba(184,154,91,.62); }
.dm-header-search-strip__recommended a::after { display:none; }
@media (max-width:1023px) {
  .dm-header-search-strip__form { grid-template-columns:36px minmax(0,1fr) 64px 44px; min-height:50px; }
  .dm-header-search-strip__form input[type="search"] { height:48px; font-size:16px !important; }
  .dm-header-search-strip__submit { height:44px; min-width:60px; font-size:11px; }
  .dm-header-search-strip__close { width:44px; height:44px; font-size:21px; }
  .dm-header-search-strip__recommended a { min-height:34px; font-size:11px; }
  .dm-header-search-strip__recommended-label { font-size:10px; }
}

/* Mobile search: one line, not a box.
   The v3 polish above draws a full 1px frame around the field group, which on a
   phone reads as a heavy card floating under the bar. Here the frame is dropped
   back to a single rule under the whole row — magnifier, input and 検索 button
   sharing one underline — and the divider between input and button goes with it,
   because two lines meeting at a corner is the box we just removed. */
@media (max-width: 1023px) {
	.dm-header-search-strip__form {
		border: 0;
		border-bottom: 1px solid rgba(184,154,91,.58);
	}
	.dm-header-search-strip__submit { border-left: 0; }
}

/* Mobile footer: each column collapses behind its own heading.
   A phone footer that lists every link at once is a wall the visitor has to
   scroll past to reach the legal line, so the columns start closed and open on
   demand. The rules only apply once the script has marked the footer, which
   keeps the footer fully readable when JavaScript never runs. */
@media (max-width: 1023px) {
	[data-dm-footer-accordion] .dm-footer-column { border-bottom: 1px solid rgba(184,154,91,.22); }
	[data-dm-footer-accordion] .dm-footer-column__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		margin: 0;
		padding: 15px 2px;
		appearance: none;
		border: 0;
		background: transparent;
		color: inherit;
		font: inherit;
		text-align: left;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	[data-dm-footer-accordion] .dm-footer-column__toggle > * { margin: 0; }
	/* The chevron is drawn here rather than shipped as an asset: one rotation
	   is cheaper than an icon request and it cannot fall out of sync. */
	[data-dm-footer-accordion] .dm-footer-column__chevron {
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transform-origin: center;
		transition: transform .18s ease;
		opacity: .75;
	}
	[data-dm-footer-accordion] .dm-footer-column__toggle[aria-expanded="true"] .dm-footer-column__chevron {
		transform: rotate(-135deg);
	}
	[data-dm-footer-accordion] .dm-footer-column__body[hidden] { display: none; }
	[data-dm-footer-accordion] .dm-footer-column__body { padding-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	[data-dm-footer-accordion] .dm-footer-column__chevron { transition: none; }
}

/* ============================================================
   iOS TEXT-SIZE RESILIENCE — front-end only
   Three separate iPhone behaviours, one place. wp-admin is out of
   scope: this sheet is only enqueued on the front end, and the
   admin bar is explicitly excluded below.
   ============================================================ */

/* 1. Own the auto-inflation guard instead of borrowing the theme's.
   Astra's reset is the only thing currently supplying this, so the
   pack loses it the moment it is ported to a site on another theme.
   100% — never `none` — stops Safari inflating text on reflow/rotate
   while leaving the reader's own AA zoom and iOS text-size setting
   fully working. Taking those away would be an accessibility
   regression, not a fix. */
html,
body.dm-pack-green-badger {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* 2. Stop the tap-to-zoom. iOS Safari zooms the whole viewport when a
   focused field's computed font-size is under 16px, and the reader
   then has to pinch back out — measured on checkout, where 12 of 14
   controls sat at 14px. Every one of these controls already carries
   an explicit min-height, so 16px changes what the field reads at,
   not how tall it is (verified: 46px before and after, no reflow).
   pointer:coarse leaves desktop typography untouched. */
@media (pointer: coarse) {
	body.dm-pack-green-badger input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
	body.dm-pack-green-badger select,
	body.dm-pack-green-badger textarea {
		font-size: 16px;
	}

	/* Admin chrome keeps its own scale — an ID beats the classes above. */
	#wpadminbar input,
	#wpadminbar select,
	#wpadminbar textarea {
		font-size: 13px;
	}
}

/* 3. Safari's AA page zoom shrinks the effective CSS viewport rather
   than scaling pixels: 390px at 150% is a 260px column, at 200% a
   191px one. Display type clamps to a floor that is still wider than
   that, and one unbreakable Latin word — "CHECKOUT." at its 64px
   floor measures 287px — pushed the whole document sideways
   (checkout 147px, PDP 72px, MY page 41px of horizontal scroll).
   Long spec values in the PDP's <dd> did the same. Below 340px, a
   width no unzoomed phone reaches, let words break rather than let
   the page scroll. Nothing above that breakpoint changes. */
@media (max-width: 340px) {
	body.dm-pack-green-badger h1,
	body.dm-pack-green-badger h2,
	body.dm-pack-green-badger h3,
	body.dm-pack-green-badger h4,
	body.dm-pack-green-badger h5,
	body.dm-pack-green-badger h6,
	body.dm-pack-green-badger p,
	body.dm-pack-green-badger li,
	body.dm-pack-green-badger dt,
	body.dm-pack-green-badger dd,
	body.dm-pack-green-badger th,
	body.dm-pack-green-badger td,
	body.dm-pack-green-badger a,
	body.dm-pack-green-badger span,
	body.dm-pack-green-badger strong,
	body.dm-pack-green-badger small,
	body.dm-pack-green-badger label,
	body.dm-pack-green-badger button {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

/* 3b. Same breakpoint, the non-text half of the same problem: an
   intrinsically wider image in a fixed grid track. The PDP dossier's
   .gb-pdp-gallery-grid pins 96px columns and its <img> carried no
   max-width, so at a 176px zoomed viewport a 180px image alone drove
   44px of horizontal scroll. max-width without height:auto elsewhere
   so nothing that relies on height:100% + object-fit is disturbed. */
@media (max-width: 340px) {
	body.dm-pack-green-badger img,
	body.dm-pack-green-badger svg,
	body.dm-pack-green-badger video {
		max-width: 100%;
	}

	body.dm-pack-green-badger .gb-pdp-gallery-grid {
		grid-template-columns: 1fr;
	}

	body.dm-pack-green-badger .gb-pdp-gallery-grid img {
		height: auto;
	}
}

/* ============================================================
   PRODUCT SUBTITLE — the heading's second line, wherever a
   product is named. One rule so cards, related items and cart
   lines read as the same typographic pair rather than three
   near-misses. Scoped to the pack; the size is a step down from
   whatever names it sits under, never a competing weight.
   ============================================================ */
body.dm-pack-green-badger .dm-card-subtitle {
	display: block;
	margin-top: 4px;
	color: var(--dm-muted, #8f9189);
	font-family: var(--gb-font-ja, "Noto Sans JP", system-ui, sans-serif);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: .06em;
}

body.dm-pack-green-badger .gb-pdp-related__subtitle {
	margin-top: 2px;
	font-size: 11px;
}

body.dm-pack-green-badger .clof-cart-item__subtitle {
	margin: 2px 0 0;
}

/* ============================================================
   GREENBADGER FRONTEND ACTION AUTHORITY
   ------------------------------------------------------------
   Every physical control a customer clicks or taps on the front
   of the shop reads this block and nothing else. Cart does not
   restate it, checkout does not restate it, My Account does not
   restate it. Replaces the earlier "WOOCOMMERCE BUTTON AUTHORITY",
   which was correct in shape but wrong in temperament: it painted
   the primary actions as permanent gold slabs, so a page with two
   CTAs on it read as two gold boxes competing for the same eye.

   The behaviour instead:

       at rest      transparent ground, the pack's dark page shows
                    through, ivory label, one gold hairline
       on approach  a gold plane sweeps in from the left and covers
                    the button; the label inverts to ink

   Nothing is gold until the customer reaches for it. That is the
   whole idea, and it is why `background-color` never carries the
   gold here — a pseudo-element does, so it can animate and so a
   disabled control can be told to keep it at scaleX(0).

   FOUR ROLES, and the hierarchy between them is the point. A site
   where every control looks identical is as broken as one where
   they all look different.

       PRIMARY    gold hairline, gold fill      — advances the order
       SECONDARY  ivory hairline, ivory fill    — the way back / sideways
       MINOR      no box at all, a rule that
                  grows under the label         — 削除 / 忘れた / helper
       CONTROL    a mechanism, not a CTA        — quantity, options, zoom

   Hover lives inside @media (hover: hover) throughout. Without the
   gate a phone latches :hover on tap and the button stays inverted
   until something else is touched — the "stuck gold" that makes a
   site feel broken. Touch feedback comes from :active instead,
   which the browser releases on lift.

   No !important. Class-level selectors already beat Astra's
   `.ast-button, .button, button` and WooCommerce's own sheet, so a
   page that genuinely wants a different control still wins.
   ============================================================ */

body.dm-pack-green-badger {
	/* One gold for the whole pack. A CTA that does not match the
	   hairlines and badges around it reads as a mistake however
	   good it looks on its own. The reference's #eee9df survives as
	   the fallback; --dm-cream is the same colour this site's text
	   already uses, so they stay in step. */
	--gb-btn-gold: var(--dm-gold, #b89a5b);
	--gb-btn-ink: var(--dm-black, #090a09);
	--gb-btn-ivory: var(--dm-cream, #eee9df);

	--gb-btn-line: rgba(184, 154, 91, .72);
	--gb-btn-line-quiet: rgba(238, 233, 223, .28);

	--gb-btn-h: 52px;
	--gb-btn-px: 20px;
	--gb-btn-gap: 24px;
	--gb-btn-fs: 13px;
	--gb-btn-ls: .09em;

	/* The two order-flow hero CTAs (次へ進む / 注文する) run one step
	   taller than an in-page action. Same object, louder voice. */
	--gb-btn-h-lg: 58px;

	--gb-btn-h-sm: 44px;
	--gb-btn-px-sm: 16px;
	--gb-btn-fs-sm: 12px;

	--gb-btn-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------- the shape --
   Shared by PRIMARY and SECONDARY. Roles differ only in which two
   colours they use, which is what keeps them recognisably one
   family at a glance. */

body.dm-pack-green-badger a.button,
body.dm-pack-green-badger button.button,
body.dm-pack-green-badger input.button,
body.dm-pack-green-badger .checkout-button,
body.dm-pack-green-badger #place_order,
body.dm-pack-green-badger .gb-order-place-order button,
body.dm-pack-green-badger .single_add_to_cart_button,
body.dm-pack-green-badger .gb-order-mobile-proxy,
body.dm-pack-green-badger a.clof-summary__btn,
body.dm-pack-green-badger .woocommerce-Button,
body.dm-pack-green-badger .woocommerce-form-login__submit,
body.dm-pack-green-badger .woocommerce-form-register__submit,
body.dm-pack-green-badger .dmcp-form button,
body.dm-pack-green-badger a.dm-section__action--solid,
body.dm-pack-green-badger .gb-dash-stamp-trigger,
body.dm-pack-green-badger .gb-daily-stamp-claim,
body.dm-pack-green-badger .wc-block-components-button,
body.dm-pack-green-badger a.clof-reco__btn,
body.dm-pack-green-badger button.clof-reco__btn,
body.dm-pack-green-badger button.clof-var-open,
body.dm-pack-green-badger .gb-order-coupon-controls button,
body.dm-pack-green-badger button[data-gb-apply-coupon],
body.dm-pack-green-badger .dm-guide-secondary {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gb-btn-gap);

	min-height: var(--gb-btn-h);
	padding: 0 var(--gb-btn-px);

	border: 1px solid var(--gb-btn-line);
	border-radius: 0;

	background-color: transparent;
	background-image: none;
	box-shadow: none;
	filter: none;
	text-shadow: none;

	color: var(--gb-btn-ivory);

	font-family: var(--gb-font-ja, "Noto Sans JP", system-ui, sans-serif);
	font-size: var(--gb-btn-fs);
	font-weight: 600;
	letter-spacing: var(--gb-btn-ls);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;

	transition:
		color .28s ease,
		border-color .28s ease,
		transform .12s ease;
}

/* The plane. Behind the label, which is why the element needs its
   own stacking context — without `isolation` the negative z-index
   escapes and the fill paints behind the page instead. */
body.dm-pack-green-badger a.button::before,
body.dm-pack-green-badger button.button::before,
body.dm-pack-green-badger .checkout-button::before,
body.dm-pack-green-badger #place_order::before,
body.dm-pack-green-badger .gb-order-place-order button::before,
body.dm-pack-green-badger .single_add_to_cart_button::before,
body.dm-pack-green-badger .gb-order-mobile-proxy::before,
body.dm-pack-green-badger a.clof-summary__btn::before,
body.dm-pack-green-badger .woocommerce-Button::before,
body.dm-pack-green-badger .woocommerce-form-login__submit::before,
body.dm-pack-green-badger .woocommerce-form-register__submit::before,
body.dm-pack-green-badger .dmcp-form button::before,
body.dm-pack-green-badger a.dm-section__action--solid::before,
body.dm-pack-green-badger .gb-dash-stamp-trigger::before,
body.dm-pack-green-badger .gb-daily-stamp-claim::before,
body.dm-pack-green-badger .wc-block-components-button::before,
body.dm-pack-green-badger a.clof-reco__btn::before,
body.dm-pack-green-badger button.clof-reco__btn::before,
body.dm-pack-green-badger button.clof-var-open::before,
body.dm-pack-green-badger .gb-order-coupon-controls button::before,
body.dm-pack-green-badger button[data-gb-apply-coupon]::before,
body.dm-pack-green-badger .dm-guide-secondary::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gb-btn-gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .34s var(--gb-btn-ease);
}

/* -------------------------------------------------- SECONDARY --
   The way back, or sideways: 戻る, カートを見る, 商品を見る,
   続けて買い物, notice CTAs, the reco card's own actions. Quieter
   line, and the plane is ivory rather than gold so the primary
   action on the same screen still owns the gold. */

body.dm-pack-green-badger a.button:not(.alt):not(.checkout-button),
body.dm-pack-green-badger button.button:not(.alt):not(.woocommerce-Button):not(.woocommerce-form-login__submit):not(.woocommerce-form-register__submit),
body.dm-pack-green-badger input.button:not(.alt),
body.dm-pack-green-badger .woocommerce-message .button,
body.dm-pack-green-badger .woocommerce-info .button,
body.dm-pack-green-badger .woocommerce-error .button,
body.dm-pack-green-badger .wc-block-components-button.is-secondary,
body.dm-pack-green-badger a.clof-reco__btn,
body.dm-pack-green-badger button.clof-reco__btn,
body.dm-pack-green-badger button.clof-var-open,
body.dm-pack-green-badger .gb-order-coupon-controls button,
body.dm-pack-green-badger button[data-gb-apply-coupon],
body.dm-pack-green-badger .dm-guide-secondary {
	border-color: var(--gb-btn-line-quiet);
	color: rgba(238, 233, 223, .82);
}

body.dm-pack-green-badger a.button:not(.alt):not(.checkout-button)::before,
body.dm-pack-green-badger button.button:not(.alt):not(.woocommerce-Button):not(.woocommerce-form-login__submit):not(.woocommerce-form-register__submit)::before,
body.dm-pack-green-badger .woocommerce-message .button::before,
body.dm-pack-green-badger .woocommerce-info .button::before,
body.dm-pack-green-badger .woocommerce-error .button::before,
body.dm-pack-green-badger .wc-block-components-button.is-secondary::before,
body.dm-pack-green-badger a.clof-reco__btn::before,
body.dm-pack-green-badger button.clof-reco__btn::before,
body.dm-pack-green-badger button.clof-var-open::before,
body.dm-pack-green-badger .gb-order-coupon-controls button::before,
body.dm-pack-green-badger button[data-gb-apply-coupon]::before,
body.dm-pack-green-badger .dm-guide-secondary::before {
	background: var(--gb-btn-ivory);
}

/* The reco carousel and the variation picker ship with the order
   flow plugin's default lime accent (rgba(143,185,43,…)). Nothing
   else on this site is that colour; overriding it here is what
   stops the cart from looking like two plugins bolted together. */
body.dm-pack-green-badger a.clof-reco__btn,
body.dm-pack-green-badger button.clof-reco__btn,
body.dm-pack-green-badger button.clof-var-open,
body.dm-pack-green-badger .gb-order-coupon-controls button,
body.dm-pack-green-badger button[data-gb-apply-coupon] {
	min-height: var(--gb-btn-h-sm);
	padding: 0 var(--gb-btn-px-sm);
	gap: 12px;
	font-size: var(--gb-btn-fs-sm);
}

/* ---------------------------------------------------- the fill --
   One rule drives both roles: the colour each one inverts to is
   read from a custom property the role already set. */

@media (hover: hover) {
	body.dm-pack-green-badger a.button:hover:not(:disabled),
	body.dm-pack-green-badger button.button:hover:not(:disabled),
	body.dm-pack-green-badger .checkout-button:hover,
	body.dm-pack-green-badger #place_order:hover:not(:disabled),
	body.dm-pack-green-badger .gb-order-place-order button:hover:not(:disabled),
	body.dm-pack-green-badger .single_add_to_cart_button:hover:not(:disabled),
	body.dm-pack-green-badger .gb-order-mobile-proxy:hover:not(:disabled),
	body.dm-pack-green-badger a.clof-summary__btn:hover,
	body.dm-pack-green-badger .woocommerce-Button:hover,
	body.dm-pack-green-badger .woocommerce-form-login__submit:hover,
	body.dm-pack-green-badger .woocommerce-form-register__submit:hover,
	body.dm-pack-green-badger .dmcp-form button:hover:not(:disabled),
	body.dm-pack-green-badger a.dm-section__action--solid:hover,
	body.dm-pack-green-badger .gb-dash-stamp-trigger:hover,
	body.dm-pack-green-badger .gb-daily-stamp-claim:hover:not(:disabled),
	body.dm-pack-green-badger .wc-block-components-button:hover:not(:disabled),
	body.dm-pack-green-badger a.clof-reco__btn:hover,
	body.dm-pack-green-badger button.clof-reco__btn:hover,
	body.dm-pack-green-badger button.clof-var-open:hover,
	body.dm-pack-green-badger .gb-order-coupon-controls button:hover,
	body.dm-pack-green-badger button[data-gb-apply-coupon]:hover,
	body.dm-pack-green-badger .dm-guide-secondary:hover {
		color: var(--gb-btn-ink);
		border-color: var(--gb-btn-gold);
	}

	body.dm-pack-green-badger a.button:not(.alt):not(.checkout-button):hover,
	body.dm-pack-green-badger button.button:not(.alt):not(.woocommerce-Button):not(.woocommerce-form-login__submit):not(.woocommerce-form-register__submit):hover,
	body.dm-pack-green-badger .woocommerce-message .button:hover,
	body.dm-pack-green-badger .woocommerce-info .button:hover,
	body.dm-pack-green-badger .woocommerce-error .button:hover,
	body.dm-pack-green-badger .wc-block-components-button.is-secondary:hover,
	body.dm-pack-green-badger a.clof-reco__btn:hover,
	body.dm-pack-green-badger button.clof-reco__btn:hover,
	body.dm-pack-green-badger button.clof-var-open:hover,
	body.dm-pack-green-badger .gb-order-coupon-controls button:hover,
	body.dm-pack-green-badger button[data-gb-apply-coupon]:hover,
	body.dm-pack-green-badger .dm-guide-secondary:hover {
		border-color: var(--gb-btn-ivory);
	}

	body.dm-pack-green-badger a.button:hover:not(:disabled)::before,
	body.dm-pack-green-badger button.button:hover:not(:disabled)::before,
	body.dm-pack-green-badger .checkout-button:hover::before,
	body.dm-pack-green-badger #place_order:hover:not(:disabled)::before,
	body.dm-pack-green-badger .gb-order-place-order button:hover:not(:disabled)::before,
	body.dm-pack-green-badger .single_add_to_cart_button:hover:not(:disabled)::before,
	body.dm-pack-green-badger .gb-order-mobile-proxy:hover:not(:disabled)::before,
	body.dm-pack-green-badger a.clof-summary__btn:hover::before,
	body.dm-pack-green-badger .woocommerce-Button:hover::before,
	body.dm-pack-green-badger .woocommerce-form-login__submit:hover::before,
	body.dm-pack-green-badger .woocommerce-form-register__submit:hover::before,
	body.dm-pack-green-badger .dmcp-form button:hover:not(:disabled)::before,
	body.dm-pack-green-badger a.dm-section__action--solid:hover::before,
	body.dm-pack-green-badger .gb-dash-stamp-trigger:hover::before,
	body.dm-pack-green-badger .gb-daily-stamp-claim:hover:not(:disabled)::before,
	body.dm-pack-green-badger .wc-block-components-button:hover:not(:disabled)::before,
	body.dm-pack-green-badger a.clof-reco__btn:hover::before,
	body.dm-pack-green-badger button.clof-reco__btn:hover::before,
	body.dm-pack-green-badger button.clof-var-open:hover::before,
	body.dm-pack-green-badger .gb-order-coupon-controls button:hover::before,
	body.dm-pack-green-badger button[data-gb-apply-coupon]:hover::before,
	body.dm-pack-green-badger .dm-guide-secondary:hover::before {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

/* Touch. Ungated on purpose: this is the only fill a phone gets,
   and the browser drops :active the moment the finger lifts, so the
   button cannot stay gold the way a latched :hover would. */
body.dm-pack-green-badger a.button:active:not(:disabled),
body.dm-pack-green-badger button.button:active:not(:disabled),
body.dm-pack-green-badger .checkout-button:active,
body.dm-pack-green-badger #place_order:active:not(:disabled),
body.dm-pack-green-badger .gb-order-place-order button:active:not(:disabled),
body.dm-pack-green-badger .single_add_to_cart_button:active:not(:disabled),
body.dm-pack-green-badger .gb-order-mobile-proxy:active:not(:disabled),
body.dm-pack-green-badger a.clof-summary__btn:active,
body.dm-pack-green-badger .woocommerce-Button:active,
body.dm-pack-green-badger .woocommerce-form-login__submit:active,
body.dm-pack-green-badger .woocommerce-form-register__submit:active,
body.dm-pack-green-badger .dmcp-form button:active:not(:disabled),
body.dm-pack-green-badger a.dm-section__action--solid:active,
body.dm-pack-green-badger .gb-dash-stamp-trigger:active,
body.dm-pack-green-badger .gb-daily-stamp-claim:active:not(:disabled),
body.dm-pack-green-badger .wc-block-components-button:active:not(:disabled),
body.dm-pack-green-badger a.clof-reco__btn:active,
body.dm-pack-green-badger button.clof-reco__btn:active,
body.dm-pack-green-badger button.clof-var-open:active,
body.dm-pack-green-badger .gb-order-coupon-controls button:active,
body.dm-pack-green-badger button[data-gb-apply-coupon]:active,
body.dm-pack-green-badger .dm-guide-secondary:active {
	color: var(--gb-btn-ink);
	transform: translateY(1px);
}

body.dm-pack-green-badger a.button:active:not(:disabled)::before,
body.dm-pack-green-badger button.button:active:not(:disabled)::before,
body.dm-pack-green-badger .checkout-button:active::before,
body.dm-pack-green-badger #place_order:active:not(:disabled)::before,
body.dm-pack-green-badger .gb-order-place-order button:active:not(:disabled)::before,
body.dm-pack-green-badger .single_add_to_cart_button:active:not(:disabled)::before,
body.dm-pack-green-badger .gb-order-mobile-proxy:active:not(:disabled)::before,
body.dm-pack-green-badger a.clof-summary__btn:active::before,
body.dm-pack-green-badger .woocommerce-Button:active::before,
body.dm-pack-green-badger .woocommerce-form-login__submit:active::before,
body.dm-pack-green-badger .woocommerce-form-register__submit:active::before,
body.dm-pack-green-badger .dmcp-form button:active:not(:disabled)::before,
body.dm-pack-green-badger a.dm-section__action--solid:active::before,
body.dm-pack-green-badger .gb-dash-stamp-trigger:active::before,
body.dm-pack-green-badger .gb-daily-stamp-claim:active:not(:disabled)::before,
body.dm-pack-green-badger .wc-block-components-button:active:not(:disabled)::before,
body.dm-pack-green-badger a.clof-reco__btn:active::before,
body.dm-pack-green-badger button.clof-reco__btn:active::before,
body.dm-pack-green-badger button.clof-var-open:active::before,
body.dm-pack-green-badger .gb-order-coupon-controls button:active::before,
body.dm-pack-green-badger button[data-gb-apply-coupon]:active::before,
body.dm-pack-green-badger .dm-guide-secondary:active::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Keyboard gets the same fill, so the state is not mouse-only. */
body.dm-pack-green-badger a.button:focus-visible::before,
body.dm-pack-green-badger button.button:focus-visible::before,
body.dm-pack-green-badger .checkout-button:focus-visible::before,
body.dm-pack-green-badger #place_order:focus-visible::before,
body.dm-pack-green-badger .single_add_to_cart_button:focus-visible:not(:disabled)::before,
body.dm-pack-green-badger a.clof-summary__btn:focus-visible::before,
body.dm-pack-green-badger .woocommerce-Button:focus-visible::before,
body.dm-pack-green-badger .dmcp-form button:focus-visible::before,
body.dm-pack-green-badger .gb-order-mobile-proxy:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

body.dm-pack-green-badger a.button:focus-visible,
body.dm-pack-green-badger button.button:focus-visible,
body.dm-pack-green-badger input.button:focus-visible,
body.dm-pack-green-badger .checkout-button:focus-visible,
body.dm-pack-green-badger #place_order:focus-visible,
body.dm-pack-green-badger .single_add_to_cart_button:focus-visible:not(:disabled),
body.dm-pack-green-badger a.clof-summary__btn:focus-visible,
body.dm-pack-green-badger .woocommerce-Button:focus-visible,
body.dm-pack-green-badger .dmcp-form button:focus-visible,
body.dm-pack-green-badger .gb-order-mobile-proxy:focus-visible {
	color: var(--gb-btn-ink);
	outline: 1px solid var(--gb-btn-ivory);
	outline-offset: 3px;
}

/* input[type=submit] cannot carry a pseudo-element, so the handful
   of Woo actions still rendered as inputs swap ground instead of
   sweeping. Same palette, same shape — only the transition differs,
   and there is no markup change to buy the animation. */
body.dm-pack-green-badger input.button {
	transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

@media (hover: hover) {
	body.dm-pack-green-badger input.button.alt:hover {
		background-color: var(--gb-btn-gold);
		color: var(--gb-btn-ink);
	}

	body.dm-pack-green-badger input.button:not(.alt):hover {
		background-color: var(--gb-btn-ivory);
		color: var(--gb-btn-ink);
	}
}

body.dm-pack-green-badger input.button:active {
	background-color: var(--gb-btn-gold);
	color: var(--gb-btn-ink);
}

/* --------------------------------------------------- DISABLED --
   A CTA that is waiting on a variation is telling the truth by
   staying inert. It must not light up on hover, and it must not
   pretend to be pressable on touch. */
body.dm-pack-green-badger a.button.disabled,
body.dm-pack-green-badger button.button:disabled,
body.dm-pack-green-badger input.button:disabled,
body.dm-pack-green-badger #place_order:disabled,
body.dm-pack-green-badger .single_add_to_cart_button:disabled,
body.dm-pack-green-badger .single_add_to_cart_button.disabled,
body.dm-pack-green-badger .gb-order-mobile-proxy:disabled,
body.dm-pack-green-badger .dmcp-form button:disabled,
body.dm-pack-green-badger .wc-block-components-button:disabled,
body.dm-pack-green-badger [aria-disabled="true"].button {
	opacity: .42;
	cursor: not-allowed;
	transform: none;
}

body.dm-pack-green-badger a.button.disabled::before,
body.dm-pack-green-badger button.button:disabled::before,
body.dm-pack-green-badger #place_order:disabled::before,
body.dm-pack-green-badger .single_add_to_cart_button:disabled::before,
body.dm-pack-green-badger .single_add_to_cart_button.disabled::before,
body.dm-pack-green-badger .gb-order-mobile-proxy:disabled::before,
body.dm-pack-green-badger .dmcp-form button:disabled::before,
body.dm-pack-green-badger .wc-block-components-button:disabled::before,
body.dm-pack-green-badger [aria-disabled="true"].button::before {
	transform: scaleX(0);
}

/* WooCommerce's own loading state (`.loading`) keeps working — it
   draws its spinner in ::after, which nothing here touches, and it
   is excluded from the arrow list below for exactly that reason. */

/* ----------------------------------------------------- ARROWS --
   Only where the customer is being moved forward. Every button
   having one is how a page starts to look generated, so login,
   register, save, coupon and delete deliberately have none. */
body.dm-pack-green-badger .single_add_to_cart_button::after,
body.dm-pack-green-badger .gb-order-mobile-proxy::after,
body.dm-pack-green-badger a.clof-summary__btn::after,
body.dm-pack-green-badger .checkout-button::after,
body.dm-pack-green-badger #place_order::after,
body.dm-pack-green-badger a.dm-section__action--solid::after,
body.dm-pack-green-badger a.clof-reco__btn--view::after {
	content: "\2197";
	/* sections.css gives .dm-section__action::after an absolutely
	   positioned inset:0 grain layer. Without these four resets the
	   arrow inherits that geometry and is never seen. */
	position: static;
	inset: auto;
	z-index: auto;
	background: none;
	flex: 0 0 auto;
	font-size: 1.24em;
	font-weight: 400;
	line-height: 1;
	pointer-events: none;
	transition: transform .28s ease;
}

/* Written with an element on each selector so it outweighs the shape
   rule's `justify-content: center` above — same file, and the shape
   rule's `button.button` already carries two of each. */
body.dm-pack-green-badger button.single_add_to_cart_button,
body.dm-pack-green-badger button.gb-order-mobile-proxy,
body.dm-pack-green-badger a.clof-summary__btn,
body.dm-pack-green-badger a.checkout-button,
body.dm-pack-green-badger button#place_order,
body.dm-pack-green-badger a.dm-section__action--solid,
body.dm-pack-green-badger a.clof-reco__btn--view {
	justify-content: space-between;
}

/* The spinner WooCommerce paints while an add-to-cart is in flight
   lives in the same ::after slot, so the arrow stands down for it
   rather than fighting over the pseudo-element. */
body.dm-pack-green-badger .single_add_to_cart_button.loading::after,
body.dm-pack-green-badger #place_order.loading::after {
	content: "";
}

@media (hover: hover) {
	body.dm-pack-green-badger .single_add_to_cart_button:hover:not(:disabled)::after,
	body.dm-pack-green-badger .gb-order-mobile-proxy:hover::after,
	body.dm-pack-green-badger a.clof-summary__btn:hover::after,
	body.dm-pack-green-badger .checkout-button:hover::after,
	body.dm-pack-green-badger #place_order:hover::after,
	body.dm-pack-green-badger a.dm-section__action--solid:hover::after,
	body.dm-pack-green-badger a.clof-reco__btn--view:hover::after {
		transform: translate(3px, -3px);
	}
}

/* The contact form ships its own ➤ and › glyphs around the label.
   They are aria-hidden decoration, and 送信 is not a forward-motion
   CTA in this system, so they come off rather than being restyled. */
body.dm-pack-green-badger .dmcp-form button .dmcp-icon {
	display: none;
}

/* ------------------------------------------------------ MINOR --
   削除 / パスワードをお忘れ / 住所を検索. Real actions, but a box
   around each of them would give a helper the same weight as
   注文する. A rule under the label grows instead. */
body.dm-pack-green-badger button[data-gb-postcode-lookup],
body.dm-pack-green-badger .clof-zip-btn,
body.dm-pack-green-badger .woocommerce-LostPassword a,
body.dm-pack-green-badger .gb-order-remove {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;

	min-height: 32px;
	padding: 7px 0;

	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;

	color: rgba(238, 233, 223, .72);
	font-size: 12px;
	letter-spacing: .06em;
	text-decoration: none;
	cursor: pointer;
	overflow: visible;
}

body.dm-pack-green-badger button[data-gb-postcode-lookup]::after,
body.dm-pack-green-badger .clof-zip-btn::after,
body.dm-pack-green-badger .woocommerce-LostPassword a::after,
body.dm-pack-green-badger .gb-order-remove::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3px;
	height: 1px;
	background: var(--gb-btn-gold);
	transform: scaleX(.3);
	transform-origin: left;
	transition: transform .25s ease;
}

@media (hover: hover) {
	body.dm-pack-green-badger button[data-gb-postcode-lookup]:hover,
	body.dm-pack-green-badger .clof-zip-btn:hover,
	body.dm-pack-green-badger .woocommerce-LostPassword a:hover,
	body.dm-pack-green-badger .gb-order-remove:hover {
		color: var(--gb-btn-ivory);
	}

	body.dm-pack-green-badger button[data-gb-postcode-lookup]:hover::after,
	body.dm-pack-green-badger .clof-zip-btn:hover::after,
	body.dm-pack-green-badger .woocommerce-LostPassword a:hover::after,
	body.dm-pack-green-badger .gb-order-remove:hover::after {
		transform: scaleX(1);
	}
}

body.dm-pack-green-badger button[data-gb-postcode-lookup]:active::after,
body.dm-pack-green-badger .clof-zip-btn:active::after,
body.dm-pack-green-badger .gb-order-remove:active::after {
	transform: scaleX(1);
}

body.dm-pack-green-badger button[data-gb-postcode-lookup]:focus-visible,
body.dm-pack-green-badger .clof-zip-btn:focus-visible,
body.dm-pack-green-badger .woocommerce-LostPassword a:focus-visible,
body.dm-pack-green-badger .gb-order-remove:focus-visible {
	outline: 1px solid var(--gb-btn-gold);
	outline-offset: 3px;
}

/* ------------------------------------------------- RESPONSIVE -- */

@media (max-width: 600px) {
	body.dm-pack-green-badger {
		--gb-btn-h: 50px;
		--gb-btn-h-lg: 54px;
		--gb-btn-px: 18px;
		--gb-btn-gap: 18px;
		--gb-btn-fs: clamp(12px, 3.4vw, 14px);
		--gb-btn-h-sm: 44px;
		--gb-btn-px-sm: 14px;
		--gb-btn-fs-sm: clamp(11px, 3vw, 12px);
	}
}

/* ----------------------------------------------------- CONTROL --
   Mechanisms, not calls to action: quantity, the option list, the
   gallery's zoom. They get a target and a hairline and stop there;
   a full gold sweep on a `+` would read as a purchase.

   The quantity control's business logic — the stepper handlers,
   the input's own change event, WooCommerce's cart update — is
   untouched. This is paint on top of it. */

body.dm-pack-green-badger .quantity,
body.dm-pack-green-badger .clof-cart-item__qty .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--gb-btn-line);
	border-radius: 0;
	background: rgba(9, 10, 9, .6);
	overflow: hidden;
}

body.dm-pack-green-badger .clof-qty-stepper {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--gb-btn-gold);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background-color .24s ease, color .24s ease;
}

body.dm-pack-green-badger .clof-qty-stepper--minus {
	border-right: 1px solid var(--gb-btn-line);
}

body.dm-pack-green-badger .clof-qty-stepper--plus {
	border-left: 1px solid var(--gb-btn-line);
}

/* Deliberately faint. A stepper that goes fully gold on hover reads
   as the primary action of the row, which it is not. */
@media (hover: hover) {
	body.dm-pack-green-badger .clof-qty-stepper:hover {
		background: rgba(184, 154, 91, .18);
	}
}

body.dm-pack-green-badger .clof-qty-stepper:active {
	background: rgba(184, 154, 91, .34);
}

body.dm-pack-green-badger .clof-qty-stepper:focus-visible {
	outline: 1px solid var(--gb-btn-gold);
	outline-offset: -2px;
}

body.dm-pack-green-badger .quantity input.qty,
body.dm-pack-green-badger .clof-cart-item__qty input.qty {
	flex: 1 1 auto;
	width: 48px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--gb-btn-ivory);
	font-family: var(--gb-font-ja, "Noto Sans JP", system-ui, sans-serif);
	font-size: 15px;
	text-align: center;
	appearance: textfield;
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
}

body.dm-pack-green-badger .quantity input.qty::-webkit-outer-spin-button,
body.dm-pack-green-badger .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* The PDP's 本数 picker and the cart's variation sheet are option
   lists. They arrived with a 4px radius from their own defaults,
   which is the single thing that made them read as "someone else's
   buttons" on an otherwise square site. */
body.dm-pack-green-badger .gb-pdp-select__menu li button,
body.dm-pack-green-badger .gb-pdp-select__trigger,
body.dm-pack-green-badger button.clof-var-choice,
body.dm-pack-green-badger .dm-native-cats__reveal-trigger {
	border-radius: 0;
	box-shadow: none;
}

body.dm-pack-green-badger .gb-pdp-select__menu li button,
body.dm-pack-green-badger button.clof-var-choice {
	min-height: 44px;
	transition: background-color .22s ease, color .22s ease;
}

@media (hover: hover) {
	body.dm-pack-green-badger .gb-pdp-select__menu li button:hover,
	body.dm-pack-green-badger button.clof-var-choice:hover {
		background: rgba(184, 154, 91, .18);
		color: var(--gb-btn-ivory);
	}
}

body.dm-pack-green-badger .gb-pdp-select__menu li button:active,
body.dm-pack-green-badger button.clof-var-choice:active {
	background: rgba(184, 154, 91, .34);
}

/* The PDP's two native <select>s (容量 / 本数) arrived with a 4px radius
   from the form defaults — the last rounded corners left on the page.
   They are CONTROL, so squaring them is the whole change. */
body.dm-pack-green-badger form.cart select,
body.dm-pack-green-badger .gb-pdp-select-field select {
	border-radius: 0;
}

/* WooCommerce's gallery zoom shipped as a white circle — the one
   round, light control on a square dark site. */
body.dm-pack-green-badger .woocommerce-product-gallery__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--gb-btn-line);
	border-radius: 0;
	background: rgba(9, 10, 9, .72);
	box-shadow: none;
	color: var(--gb-btn-gold);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .24s ease, color .24s ease;
}

@media (hover: hover) {
	body.dm-pack-green-badger .woocommerce-product-gallery__trigger:hover {
		background: var(--gb-btn-gold);
		color: var(--gb-btn-ink);
	}
}

body.dm-pack-green-badger .woocommerce-product-gallery__trigger:active {
	background: var(--gb-btn-gold);
	color: var(--gb-btn-ink);
}

/* --------------------------------------------- SPECIFICITY ANCHORS --
   Three older sheets paint the same controls at a higher weight than
   the authority above, and they were written before this system
   existed. They are re-asserted here rather than edited there,
   because two of them are pack-neutral and other packs still want
   what they say.

   These are not a second design. They set the same tokens; they only
   carry enough selector weight to be heard.
   ------------------------------------------------------------------ */

/* commerce-single.css paints the add-to-cart at
   `body.dm-commerce-single div.product button.single_add_to_cart_button`
   (0,2,3), which beat the authority's (0,2,1) and left the PDP CTA
   with an ink slab. That rule is right for the other three packs, so
   it stays; Green Badger answers it at (0,3,3). */
body.dm-pack-green-badger.dm-commerce-single div.product button.single_add_to_cart_button,
body.dm-pack-green-badger.dm-commerce-single div.product .cart .button {
	min-height: var(--gb-btn-h);
	padding: 0 var(--gb-btn-px);
	/* Also centred by the rule being answered, which is why the arrow
	   alignment has to be restated at this weight rather than left to
	   the ARROWS block above. */
	justify-content: space-between;
	background: transparent;
	border: 1px solid var(--gb-btn-line);
	border-radius: 0;
	color: var(--gb-btn-ivory);
}

@media (hover: hover) {
	body.dm-pack-green-badger.dm-commerce-single div.product button.single_add_to_cart_button:hover:not(:disabled),
	body.dm-pack-green-badger.dm-commerce-single div.product .cart .button:hover:not(:disabled) {
		border-color: var(--gb-btn-gold);
		color: var(--gb-btn-ink);
	}
}

body.dm-pack-green-badger.dm-commerce-single div.product button.single_add_to_cart_button:active:not(:disabled),
body.dm-pack-green-badger.dm-commerce-single div.product .cart .button:active:not(:disabled) {
	color: var(--gb-btn-ink);
}

/* One `!important` in the whole system, and it is answering one.
   Something in the PDP's own stack forces 16px onto the add-to-cart —
   either Astra's customizer inline sheet or the special-set plugin's
   `frc-*` layer, both of which write font-size onto this element.
   Verified by probe rather than assumed: an identical rule at (0,3,3)
   without `!important` did not apply; the same rule with it did.
   Every other property in this system lands without one. */
body.dm-pack-green-badger.dm-commerce-single div.product button.single_add_to_cart_button {
	font-size: var(--gb-btn-fs) !important;
}

/* Same file, the disabled state: it swapped in a surface fill and a
   muted border. Opacity carries it here instead, so a disabled CTA is
   visibly the same button rather than a different one. */
body.dm-pack-green-badger.dm-commerce-single div.product button.single_add_to_cart_button.disabled,
body.dm-pack-green-badger.dm-commerce-single div.product button.single_add_to_cart_button:disabled,
body.dm-pack-green-badger.dm-commerce-single div.product button.single_add_to_cart_button.wc-variation-selection-needed {
	background: transparent;
	border-color: var(--gb-btn-line);
	color: var(--gb-btn-ivory);
	opacity: .42;
	cursor: not-allowed;
}

/* sections.css still holds the retired "paper button" treatment for
   the packs that use it — torn clip-path, grain in ::before, aged
   shading in ::after, a brightness filter and a translateY lift kept
   with !important. On this pack that reads as gradient + shadow + 3D,
   which is precisely what this system rules out. Everything but the
   solid variant already resolved to a plain text link on live, so
   only that one needs answering. */
body.dm-pack-green-badger a.dm-section__action--solid {
	min-width: 0;
	min-height: var(--gb-btn-h);
	padding: 0 var(--gb-btn-px);
	clip-path: none;
	box-shadow: none;
	border: 1px solid var(--gb-btn-line);
	color: var(--gb-btn-ivory);
	font-size: var(--gb-btn-fs);
	font-weight: 600;
}

body.dm-pack-green-badger a.dm-section__action--solid::before {
	background: var(--gb-btn-gold);
}

body.dm-pack-green-badger a.dm-section__action--solid:hover,
body.dm-pack-green-badger a.dm-section__action--solid:focus-visible {
	/* The lift and the brightness bump are what the retired treatment
	   did instead of a fill. Both are cancelled; `transform` needs
	   !important only because the rule being answered used one to beat
	   the section motion engine's inline transform. */
	transform: none !important;
	filter: none;
}

body.dm-pack-green-badger a.dm-section__action--solid:active {
	transform: translateY(1px) !important;
	filter: none;
}

/* .gb-order-primary and the mobile order bar's two controls are not
   `.button` markup either, so they are joined to the layer explicitly
   rather than left to their own files — which is how each of them
   ended up a gold slab with an inverted hover, each written slightly
   differently. (The daily-stamp sign-in link is joined separately
   below: it is absolutely positioned, and this block's `position` and
   `transform` would move it.) */
body.dm-pack-green-badger .gb-order-primary,
body.dm-pack-green-badger .gb-order-mobile-bar a,
body.dm-pack-green-badger .gb-order-mobile-bar button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid var(--gb-btn-line);
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--gb-btn-ivory);
	letter-spacing: var(--gb-btn-ls);
	transition: color .28s ease, border-color .28s ease, transform .12s ease;
}

body.dm-pack-green-badger .gb-order-primary::before,
body.dm-pack-green-badger .gb-order-mobile-bar a::before,
body.dm-pack-green-badger .gb-order-mobile-bar button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gb-btn-gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .34s var(--gb-btn-ease);
}

@media (hover: hover) {
	body.dm-pack-green-badger .gb-order-primary:hover,
	body.dm-pack-green-badger .gb-order-mobile-bar a:hover,
	body.dm-pack-green-badger .gb-order-mobile-bar button:hover {
		color: var(--gb-btn-ink);
		border-color: var(--gb-btn-gold);
	}

	body.dm-pack-green-badger .gb-order-primary:hover::before,
	body.dm-pack-green-badger .gb-order-mobile-bar a:hover::before,
	body.dm-pack-green-badger .gb-order-mobile-bar button:hover::before {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

body.dm-pack-green-badger .gb-order-primary:active,
body.dm-pack-green-badger .gb-order-mobile-bar a:active,
body.dm-pack-green-badger .gb-order-mobile-bar button:active {
	color: var(--gb-btn-ink);
	transform: translateY(1px);
}

body.dm-pack-green-badger .gb-order-primary:active::before,
body.dm-pack-green-badger .gb-order-mobile-bar a:active::before,
body.dm-pack-green-badger .gb-order-mobile-bar button:active::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* The cart's own coupon submit (`form.clof-summary-coupon button`) is
   plain `<button>` markup with no class at all, so it cannot ride the
   lists above. Joined here as SECONDARY — it sits beside an input and
   must not outrank 次へ進む two blocks below it. */
body.dm-pack-green-badger .clof-summary-coupon button,
body.dm-pack-green-badger .gb-order-coupon button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--gb-btn-h-sm);
	padding: 0 var(--gb-btn-px-sm);
	border: 1px solid var(--gb-btn-line-quiet);
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: rgba(238, 233, 223, .82);
	font-size: var(--gb-btn-fs-sm);
	font-weight: 600;
	letter-spacing: var(--gb-btn-ls);
	cursor: pointer;
	transition: color .28s ease, border-color .28s ease, transform .12s ease;
}

body.dm-pack-green-badger .clof-summary-coupon button::before,
body.dm-pack-green-badger .gb-order-coupon button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gb-btn-ivory);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .34s var(--gb-btn-ease);
}

@media (hover: hover) {
	body.dm-pack-green-badger .clof-summary-coupon button:hover,
	body.dm-pack-green-badger .gb-order-coupon button:hover {
		border-color: var(--gb-btn-ivory);
		color: var(--gb-btn-ink);
	}

	body.dm-pack-green-badger .clof-summary-coupon button:hover::before,
	body.dm-pack-green-badger .gb-order-coupon button:hover::before {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

body.dm-pack-green-badger .clof-summary-coupon button:active,
body.dm-pack-green-badger .gb-order-coupon button:active {
	color: var(--gb-btn-ink);
	transform: translateY(1px);
}

body.dm-pack-green-badger .clof-summary-coupon button:active::before,
body.dm-pack-green-badger .gb-order-coupon button:active::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* The daily-stamp sheet's sign-in CTA is joined on its own terms.
   It is NOT folded into the group above, because that group sets
   `position: relative` and a `translateY(1px)` on :active — and this
   button is absolutely positioned and horizontally centred with
   `translateX(-50%)` by green-badger-daily-stamp.css. Handing it the
   group's position and transform knocked it out of the centre of the
   dialog and flush against the right edge. So it gets the sweep and
   the colours, and its own layout is left alone. */
body.dm-pack-green-badger .gb-daily-stamp-auth__link {
	isolation: isolate;
	overflow: hidden;
	border: 1px solid var(--gb-btn-line);
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--gb-btn-ivory);
	letter-spacing: var(--gb-btn-ls);
	transition: color .28s ease, border-color .28s ease;
}

body.dm-pack-green-badger .gb-daily-stamp-auth__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gb-btn-gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .34s var(--gb-btn-ease);
}

@media (hover: hover) {
	body.dm-pack-green-badger .gb-daily-stamp-auth__link:hover {
		border-color: var(--gb-btn-gold);
		color: var(--gb-btn-ink);
	}

	body.dm-pack-green-badger .gb-daily-stamp-auth__link:hover::before {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

/* No `transform` on :active here — the element's transform is what
   centres it. Colour alone carries the press. */
body.dm-pack-green-badger .gb-daily-stamp-auth__link:active,
body.dm-pack-green-badger .gb-daily-stamp-auth__link:focus-visible {
	color: var(--gb-btn-ink);
}

body.dm-pack-green-badger .gb-daily-stamp-auth__link:active::before,
body.dm-pack-green-badger .gb-daily-stamp-auth__link:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* The two order-flow hero CTAs take the taller size. */
body.dm-pack-green-badger a.clof-summary__btn,
body.dm-pack-green-badger #place_order,
body.dm-pack-green-badger .gb-order-place-order button,
body.dm-pack-green-badger .checkout-button {
	min-height: var(--gb-btn-h-lg);
}

/* The PDP's sticky mobile buy bar renders a bare <button> carrying only
   a data attribute, so it is addressed by that. It is the same PRIMARY
   object as the in-page CTA, one size down. */
body.dm-pack-green-badger .gb-pdp-mobile-buybar button[data-gb-pdp-mobile-add],
body.dm-pack-green-badger .gb-pdp-mobile-buybar button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid var(--gb-btn-line);
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	color: var(--gb-btn-ivory);
	letter-spacing: var(--gb-btn-ls);
	transition: color .28s ease, border-color .28s ease, transform .12s ease;
}

body.dm-pack-green-badger .gb-pdp-mobile-buybar button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gb-btn-gold);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .34s var(--gb-btn-ease);
}

@media (hover: hover) {
	body.dm-pack-green-badger .gb-pdp-mobile-buybar button:hover {
		color: var(--gb-btn-ink);
		border-color: var(--gb-btn-gold);
	}

	body.dm-pack-green-badger .gb-pdp-mobile-buybar button:hover::before {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

body.dm-pack-green-badger .gb-pdp-mobile-buybar button:active {
	color: var(--gb-btn-ink);
	transform: translateY(1px);
}

body.dm-pack-green-badger .gb-pdp-mobile-buybar button:active::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* WooCommerce addresses its own zoom trigger at
   `.woocommerce div.product .woocommerce-product-gallery
   .woocommerce-product-gallery__trigger` — four classes, which is why
   the white circle survived a (0,2,1) answer. Matched here. */
body.dm-pack-green-badger.woocommerce-js div.product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger,
body.dm-pack-green-badger div.product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger {
	width: 44px;
	height: 44px;
	border: 1px solid var(--gb-btn-line);
	border-radius: 0;
	background: rgba(9, 10, 9, .72);
	box-shadow: none;
	color: var(--gb-btn-gold);
	font-size: 18px;
}

@media (hover: hover) {
	body.dm-pack-green-badger div.product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger:hover {
		background: var(--gb-btn-gold);
		color: var(--gb-btn-ink);
	}
}

body.dm-pack-green-badger div.product .woocommerce-product-gallery a.woocommerce-product-gallery__trigger:active {
	background: var(--gb-btn-gold);
	color: var(--gb-btn-ink);
}

/* The undo link WooCommerce puts in its "removed" notice is a MINOR
   action; it joins the family that grows a rule rather than a box. */
body.dm-pack-green-badger .woocommerce-message a.restore-item {
	position: relative;
	text-decoration: none;
}

body.dm-pack-green-badger .woocommerce-message a.restore-item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--gb-btn-gold);
	transform: scaleX(.3);
	transform-origin: left;
	transition: transform .25s ease;
}

@media (hover: hover) {
	body.dm-pack-green-badger .woocommerce-message a.restore-item:hover::after {
		transform: scaleX(1);
	}
}

/* Astra's search widget submit is the theme's own blue, radius 4 — the
   one control on the site that still looked like it came from a
   different product. It is a CONTROL (a submit glued to a field), so it
   takes the quiet hairline rather than a CTA's presence. */
body.dm-pack-green-badger .search-submit,
body.dm-pack-green-badger .ast-search-submit,
body.dm-pack-green-badger input.search-submit,
body.dm-pack-green-badger button.search-submit {
	border: 1px solid var(--gb-btn-line-quiet);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--gb-btn-ivory);
	min-height: var(--gb-btn-h-sm);
	padding: 0 14px;
	font-size: var(--gb-btn-fs-sm);
	letter-spacing: var(--gb-btn-ls);
	transition: background-color .24s ease, color .24s ease, border-color .24s ease;
}

@media (hover: hover) {
	body.dm-pack-green-badger .search-submit:hover,
	body.dm-pack-green-badger .ast-search-submit:hover {
		border-color: var(--gb-btn-ivory);
		background: var(--gb-btn-ivory);
		color: var(--gb-btn-ink);
	}
}

body.dm-pack-green-badger .search-submit:active,
body.dm-pack-green-badger .ast-search-submit:active {
	background: var(--gb-btn-ivory);
	color: var(--gb-btn-ink);
}

/* The guide page's FAQ disclosures are bare <button>s, so they inherit
   Astra's 4px radius. Nothing else about them needs changing — they are
   already transparent, borderless text rows. */
body.dm-pack-green-badger .gb-guide-faq button,
body.dm-pack-green-badger .gb-guide-mobile-index {
	border-radius: 0;
}

/* commerce-account.css paints every My Account action with the pack
   token pair (--dm-accent ground, --dm-primary label) at (0,3,2) — right
   for the three packs that use a filled account button, and the reason
   変更を保存 stayed a pale gold slab here. Answered at (0,4,2) rather
   than edited there. */
body.dm-pack-green-badger.dm-commerce-account .woocommerce-MyAccount-content a.button,
body.dm-pack-green-badger.dm-commerce-account .woocommerce-MyAccount-content button.button,
body.dm-pack-green-badger.dm-commerce-account .woocommerce-MyAccount-content input.button,
body.dm-pack-green-badger.dm-commerce-account .woocommerce-MyAccount-content .woocommerce-Button {
	background-color: transparent;
	border: 1px solid var(--gb-btn-line);
	border-radius: 0;
	color: var(--gb-btn-ivory);
	letter-spacing: var(--gb-btn-ls);
	text-shadow: none;
}

@media (hover: hover) {
	body.dm-pack-green-badger.dm-commerce-account .woocommerce-MyAccount-content a.button:hover,
	body.dm-pack-green-badger.dm-commerce-account .woocommerce-MyAccount-content button.button:hover,
	body.dm-pack-green-badger.dm-commerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover {
		background-color: transparent;
		border-color: var(--gb-btn-gold);
		color: var(--gb-btn-ink);
	}
}

body.dm-pack-green-badger.dm-commerce-account .woocommerce-MyAccount-content a.button:active,
body.dm-pack-green-badger.dm-commerce-account .woocommerce-MyAccount-content button.button:active,
body.dm-pack-green-badger.dm-commerce-account .woocommerce-MyAccount-content .woocommerce-Button:active {
	color: var(--gb-btn-ink);
}

/* Two borderless, transparent controls that still carried Astra's 4px
   corner. Invisible today, but a radius left in place is how the next
   person's `border: 1px` comes back rounded. */
body.dm-pack-green-badger .gb-member-tab,
body.dm-pack-green-badger .show-password-input,
body.dm-pack-green-badger .dm-footer-column__toggle,
body.dm-pack-green-badger .dm-app-nav__item,
body.dm-pack-green-badger .dm-app-bar__action {
	border-radius: 0;
}

/* Deliberately NOT squared: .dm-guide-btn, the floating ガイド badge.
   It is a round mascot mark rather than a call to action — the same
   object class as a help bubble — and squaring it would change a brand
   element, not enforce a button system. Left round on purpose. */

/* The cart bottom-sheet renders WooCommerce's mini-cart widget, whose
   two actions arrive as bare <p><a> — no class, no shape, 20px gold
   text. They are the sheet's only controls, so they are addressed by
   destination: /checkout/ is PRIMARY, /cart/ is SECONDARY, and the
   hierarchy inside the sheet matches the hierarchy everywhere else.
   (Their labels are still WooCommerce's untranslated English; that is a
   content fix, not a button one, and is left alone here.) */
body.dm-pack-green-badger .dm-sheet__panel .woocommerce-mini-cart__buttons a,
body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/cart/"],
body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/checkout/"] {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--gb-btn-h-sm);
	padding: 0 var(--gb-btn-px-sm);
	border: 1px solid var(--gb-btn-line-quiet);
	border-radius: 0;
	background: transparent;
	color: rgba(238, 233, 223, .82);
	font-size: var(--gb-btn-fs-sm);
	font-weight: 600;
	letter-spacing: var(--gb-btn-ls);
	text-decoration: none;
	transition: color .28s ease, border-color .28s ease, transform .12s ease;
}

body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/checkout/"] {
	border-color: var(--gb-btn-line);
	color: var(--gb-btn-ivory);
}

body.dm-pack-green-badger .dm-sheet__panel .woocommerce-mini-cart__buttons a::before,
body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/cart/"]::before,
body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/checkout/"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gb-btn-ivory);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .34s var(--gb-btn-ease);
}

body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/checkout/"]::before {
	background: var(--gb-btn-gold);
}

@media (hover: hover) {
	body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/cart/"]:hover,
	body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/checkout/"]:hover,
	body.dm-pack-green-badger .dm-sheet__panel .woocommerce-mini-cart__buttons a:hover {
		color: var(--gb-btn-ink);
	}

	body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/cart/"]:hover::before,
	body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/checkout/"]:hover::before,
	body.dm-pack-green-badger .dm-sheet__panel .woocommerce-mini-cart__buttons a:hover::before {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/cart/"]:active,
body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/checkout/"]:active,
body.dm-pack-green-badger .dm-sheet__panel .woocommerce-mini-cart__buttons a:active {
	color: var(--gb-btn-ink);
	transform: translateY(1px);
}

body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/cart/"]:active::before,
body.dm-pack-green-badger .dm-sheet__panel p > a[href$="/checkout/"]:active::before,
body.dm-pack-green-badger .dm-sheet__panel .woocommerce-mini-cart__buttons a:active::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* The sheet's close glyph was drawing in pure white, the one place the
   pack's cream was not used. */
body.dm-pack-green-badger .dm-sheet__close {
	color: var(--gb-btn-ivory);
}

/* ------------------------------------------------- STICKY CTA --
   Price and action share one row down to 320px. The bar already
   clears the app shell's bottom nav through --dm-appnav-h in
   green-badger-pdp.css; this only keeps the button from eating the
   price beside it on the narrowest phones. */
body.dm-pack-green-badger .gb-pdp-mobile-buybar {
	gap: clamp(8px, 3vw, 14px);
	padding-inline: clamp(12px, 4vw, 18px);
}

body.dm-pack-green-badger .gb-pdp-mobile-buybar > strong {
	flex: 0 1 auto;
	min-width: 0;
	font-size: clamp(14px, 4.2vw, 18px);
	white-space: nowrap;
}

body.dm-pack-green-badger .gb-pdp-mobile-buybar button {
	flex: 1 1 auto;
	min-height: var(--gb-btn-h-sm);
	padding: 0 clamp(14px, 4.6vw, 20px);
	border-radius: 0;
	font-size: var(--gb-btn-fs-sm);
	letter-spacing: var(--gb-btn-ls);
	white-space: nowrap;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
 * Temporary public-link suppression (GB-03 / GB-04)
 *
 * Some pages are not launch-ready (NEWS / 配送・返品について / 利用規約) but the
 * pages themselves, and their Studio admin screens, must stay intact. So the
 * link is hidden at the navigation layer only: a shop owner re-enables an item
 * by deleting the `dm-link-hidden` CSS class from that menu item under
 * 外観 → メニュー (the CSS-classes column). No PHP, no menu deletion, no 404.
 *
 * Deliberately not `visibility:hidden` — the item must not keep its slot in
 * the flex row, or the header would show a gap where NEWS used to be.
 * ------------------------------------------------------------------------ */
.dm-link-hidden {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * GB-08 — FAQ accordion skin
 *
 * The FAQ body is authored in Duck Mark Studio (FAQ → FAQ Body), which writes
 * straight to the WordPress page's post_content. No FAQ copy lives in PHP or
 * in this stylesheet, and no separate FAQ post type / repeater system was
 * added: the questions are plain <details>/<summary> pairs, so the accordion
 * is the browser's own — it opens with no JavaScript, it is keyboard and
 * screen-reader native, and it still reads as a list if this file never loads.
 *
 * A shop owner adds a question by adding one more <details class="gb-faq-item">
 * block in the Studio field. That is the whole authoring contract.
 * ------------------------------------------------------------------------ */
body.dm-pack-green-badger .gb-faq-item {
	border-bottom: 1px solid rgba(244, 241, 232, .16);
	margin: 0;
	padding: 0;
}

body.dm-pack-green-badger .gb-faq-item > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: clamp(14px, 3.6vw, 16px);
	font-weight: 500;
	gap: 16px;
	justify-content: space-between;
	line-height: 1.5;
	list-style: none;
	min-height: 56px;
	padding: 16px 0;
	position: relative;
}

/* Safari still paints the disclosure triangle unless this pseudo-element is
   cleared as well as `list-style`. */
body.dm-pack-green-badger .gb-faq-item > summary::-webkit-details-marker {
	display: none;
}

/* The marker is a plus that becomes a minus, drawn from two rules so the
   open state needs no extra markup. */
body.dm-pack-green-badger .gb-faq-item > summary::after {
	background:
		linear-gradient(var(--dm-gold, #b89a5b), var(--dm-gold, #b89a5b)) center / 100% 1px no-repeat,
		linear-gradient(var(--dm-gold, #b89a5b), var(--dm-gold, #b89a5b)) center / 1px 100% no-repeat;
	content: "";
	flex: 0 0 auto;
	height: 12px;
	transition: transform .2s ease;
	width: 12px;
}

body.dm-pack-green-badger .gb-faq-item[open] > summary::after {
	transform: rotate(90deg);
	background: linear-gradient(var(--dm-gold, #b89a5b), var(--dm-gold, #b89a5b)) center / 100% 1px no-repeat;
}

@media (hover: hover) {
	body.dm-pack-green-badger .gb-faq-item > summary:hover {
		color: var(--dm-gold, #b89a5b);
	}
}

body.dm-pack-green-badger .gb-faq-item > summary:focus-visible {
	outline: 1px solid var(--dm-gold, #b89a5b);
	outline-offset: 4px;
}

body.dm-pack-green-badger .gb-faq-item > *:not(summary) {
	color: rgba(244, 241, 232, .78);
	font-size: clamp(13px, 3.4vw, 15px);
	line-height: 1.85;
	margin: 0 0 18px;
	padding-right: 28px;
}

/* The FAQ surface renders through the theme's page template, and the site
   shell's full-bleed mode lets `.entry-content` escape `.ast-container` — at
   1920px the questions started at x=0, hard against the viewport edge.
   Constrained here for this one surface only (`dm-studio-surface-faq` is on
   the FAQ page and nowhere else) rather than by changing the shared
   full-bleed behaviour, which HOME Composer and the other page surfaces
   depend on. */
body.dm-studio-surface-faq:not(.dm-gb-information-page) .entry-content,
body.dm-studio-surface-faq:not(.dm-gb-information-page) .entry-header {
	margin-left: auto;
	margin-right: auto;
	max-width: 860px;
	padding-left: 24px;
	padding-right: 24px;
}

body.dm-studio-surface-faq:not(.dm-gb-information-page) .entry-content > h3 {
	margin-top: 56px;
}

body.dm-studio-surface-faq:not(.dm-gb-information-page) .entry-content > h3:first-of-type {
	margin-top: 40px;
}

/* Give the existing square brand asset a proportionate box in the app bar. */
body.dm-pack-green-badger .dm-app-bar__brand img,
body.dm-pack-green-badger .dm-app-bar__brand svg {
  width:44px;
  height:44px;
  object-fit:contain;
}
body.dm-pack-green-badger .dm-app-bar.is-compact .dm-app-bar__brand img,
body.dm-pack-green-badger .dm-app-bar.is-compact .dm-app-bar__brand svg {
  width:40px;
  height:40px;
}

/* Close is an icon control; theme text-button padding does not own its box. */
body.dm-pack-green-badger button.dm-header-search-strip__close { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; line-height: 1; font-size: 0; }
body.dm-pack-green-badger button.dm-header-search-strip__close svg { display: block; width: 18px; height: 18px; margin: 0; }
body.dm-pack-green-badger button.dm-header-search-strip__close::after { content: none; }
body.dm-pack-green-badger button.dm-header-search-strip__close:focus-visible { outline: 2px solid var(--dm-primary, #b89a5b); outline-offset: 2px; }
body.dm-pack-green-badger button.main-header-menu-toggle { min-width: 44px; min-height: 44px; }


/* Woo account fallback: the Green Badger shell remains keyboard-readable even
 * when the optional account presentation stylesheet is intentionally absent. */
body.dm-pack-green-badger.woocommerce-account main .woocommerce :where(
	input:not([type="hidden"]),
	select,
	textarea,
	button,
	a
):focus-visible {
	outline: 3px solid var(--dm-primary, #b89a5b) !important;
	outline-offset: 3px !important;
}