/*
 * Homepage tone scope (2026-08-21, source-v2 migration; rescoped 2026-08-21
 * per GREEN BADGER DETAIL CORRECTION DIRECTIVE v2, reviewer correction #1).
 *
 * Every rule below keys off body.dm-pack-green-badger, NOT
 * body.dm-composed-front-page — that class is true for any Pack's composed
 * homepage (this site's actually-applied Pack is `street-magazine`, a
 * generic archetype other brands can build on unmodified), so scoping to it
 * would re-theme any other brand ever built on the same archetype on this
 * site. dm-pack-green-badger is a dedicated marker
 * (Duck_Mark_Site_Shell::is_green_badger_pack(), gated on the
 * duck_mark_green_badger_active option) that exists for exactly this
 * customization and nothing else.
 *
 * Not a new skin and not a site-wide token change — every section already
 * reads --dm-bg/--dm-surface/--dm-text/--dm-muted/--dm-border/--dm-primary/
 * --dm-on-primary through var() with a skin-level fallback (skin_token_
 * contract), so redefining them at a selector more specific than :root
 * re-themes every consumer without touching a single pattern file, and only
 * where this body class is present — nowhere else in the site.
 *
 * --dm-bg and --dm-text on this site are already #0a0a0a / #f4f1e8, close
 * enough to the reference's #0c0d0c / #f0eadc that neither needs overriding
 * here — only the paper-toned --dm-surface and the black-on-beige
 * --dm-primary/--dm-on-primary actually conflict with a dark editorial tone.
 */
body.dm-pack-green-badger {
	--dm-surface: #121411;
	--dm-surface-2: #161911;
	--dm-primary: #b89a5b;
	--dm-on-primary: #10110f;
	--dm-border: rgba(240, 234, 220, .14);
	--dm-muted: #8f9189;
	/*
	 * GREEN BADGER DETAIL CORRECTION DIRECTIVE v2 (2026-08-21), P0-3 — the
	 * earlier Georgia decision from the first implementation directive is
	 * superseded: Cormorant Garamond is now the required first value for
	 * every major English display title. --dm-font-display is already the
	 * shared token every consumer reads through var() — .dm-section__title
	 * (every generic section heading), the hero/campaign renderers' 'display'
	 * font role, .dm-native-slider__title — so redefining it here still
	 * reaches Hero/Campaign/Section titles without touching a single
	 * renderer or skin file. --gb-font-en/--gb-font-ja/--gb-font-ja-display
	 * are the directive's own token names, aliased to the same values so
	 * either name resolves identically; Duck Mark's real per-consumer token
	 * is --dm-font-display, not a new parallel system.
	 */
	--dm-font-display: 'Cormorant Garamond', Georgia, serif;
	--dm-display-weight: 600;
	--dm-display-track: -0.035em;
	/* Hero/Campaign choose the 'editorial-serif' title_font_role, which reads
	   this token (not --dm-font-display) — see font_role_stack() in
	   class-duck-mark-section-renderers.php. */
	--dm-editorial-serif-font: 'Cormorant Garamond', Georgia, serif;
	--gb-font-en: 'Cormorant Garamond', Georgia, serif;
	--gb-font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
	--gb-font-ja-display: 'Cormorant Garamond', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
	/*
	 * duck-mark-header-control's font_stack('display') reads --cl-font-display
	 * (falling back to Anton), and its green-badger preset selects the
	 * 'display' role — --cl-font-display resolves to Cormorant Garamond
	 * correctly when queried directly on #masthead (confirmed via
	 * getComputedStyle), but the header's own --dm-header-font-family
	 * (declared as var(--cl-font-display, Anton, ...) in its own :root rule)
	 * does not pick it up through that indirection in this browser — a
	 * limitation in that one var()-chain, not a cascade/specificity problem
	 * (a plain class selector already beats a bare :root here). Overriding
	 * --dm-header-font-family directly, at higher specificity than
	 * duck-mark-header-control's own :root declaration, sidesteps it.
	 */
	--cl-font-display: 'Cormorant Garamond', Georgia, serif;
	--dm-header-font-family: 'Cormorant Garamond', Georgia, serif;
	--gb-content-max: 1600px;
	--dm-shell-container: var(--gb-content-max);
	--dm-shell-gutter: clamp(20px, 4vw, 72px);
	/* Desktop alignment pass (2026-08-22): the page's ONE content start line.
	   Same value as --dm-shell-gutter above, but under a name the layout
	   skeleton never redefines — street-magazine.css re-sets --dm-shell-gutter
	   per slot (40px on full-width slots, 0 on row/stage slots), so full-bleed
	   sections that want their text on the shared line must read this token. */
	--gb-content-gutter: clamp(20px, 4vw, 72px);
	/* Desktop type pass (2026-08-22): two section-title tiers below the hero
	   (hero itself is the renderer's own 92px inline value, a separate tier).
	   Replaces four per-section clamps that computed to 48.96 / 51.84 / 57.6 /
	   72px at 1440. Mobile media overrides below still own ≤600px sizing. */
	--gb-title-section: var(--gb-type-section-size);
	--gb-title-feature: var(--gb-type-section-lg-size);

	/* ------------------------------------------------------------------
	 * GREEN BADGER TYPE + ACTION SYSTEM (2026-08-22).
	 *
	 * One place where every desktop typographic and action decision on
	 * this Pack is stated. Nothing below invents a font family: the page
	 * already loads exactly two — Cormorant Garamond (the brand serif)
	 * and Noto Sans JP — and the roles simply assign them. These are
	 * plain custom properties on the Pack's body class, the same shape
	 * every other token here uses, so a future admin screen can write
	 * them without any rule below changing.
	 * ------------------------------------------------------------------ */

	/* Families. The UI stack is the brand serif with Noto Sans JP behind
	   it, because half the functional labels on this site are Japanese
	   and Cormorant carries no kana — without the second entry those
	   labels fell to an arbitrary system font. */
	--gb-font-ui: 'Cormorant Garamond', 'Noto Sans JP', Georgia, serif;
	--gb-font-numeral: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;

	/* A — DISPLAY. The hero statement, and nothing else. */
	--gb-type-display-weight: 700;
	--gb-type-display-track: -.022em;
	--gb-type-display-lh: .88;

	/* B — SECTION. Same serif, one weight lighter than DISPLAY and far
	   smaller, so the bloodline reads but the hierarchy is unmistakable.
	   Two sizes only; no section invents a third. */
	--gb-type-section-size: 48px;
	--gb-type-section-lg-size: 56px;
	--gb-type-section-weight: 600;
	--gb-type-section-track: -.03em;
	--gb-type-section-lh: 1.04;

	/* C — BODY. Japanese and Latin running copy. */
	--gb-type-body-size: 15px;
	--gb-type-body-lh: 1.9;
	--gb-type-body-track: .02em;

	/* D — UI. Navigation, actions, eyebrows, product names, meta. The
	   labels take the serif in caps on a wide track; numerals stay in
	   Noto Sans JP at the same weight, because old-style serif figures
	   are the wrong tool for a price. One weight, one tracking logic. */
	--gb-type-ui-size: 13px;
	--gb-type-ui-size-sm: 12px;
	--gb-type-ui-weight: 600;
	--gb-type-ui-track: .16em;
	--gb-type-ui-track-wide: .18em;

	/* Actions. Three heights, one padding, one corner. Nothing else. */
	--gb-action-h: 48px; /* P1-A: was 50px */
	--gb-action-h-lg: 56px;
	--gb-action-h-sm: 46px;
	--gb-action-pad-x: 28px; /* P1-A: was 32px */
	--gb-action-radius: 0px;
	--gb-action-gap: 12px;
	--gb-action-paper: #dec9a8;
	--gb-action-paper-ink: #16130e;
	--gb-action-gold: #b89a5b; /* P1-A (2026-08-22): SHOP NOW only — was #c9a85f */
	--gb-action-gold-ink: #0b0c0a;
	--gb-action-line: rgba(224, 202, 174, .34);

	/* Price. Regular and the two sale states stay separate roles — a
	   single flat colour would erase the discount, not tidy it. */
	--gb-price-color: #f4f1e8;
	--gb-price-sale-color: #c9a85f;
	--gb-price-was-color: rgba(244, 241, 232, .45);
}
body.dm-site-shell-enabled.dm-pack-green-badger {
  --dm-shell-container: var(--gb-content-max);
  --dm-shell-gutter: clamp(20px, 4vw, 72px);
}
/*
 * Japanese body copy already computes "Noto Sans JP" (verified: it reads
 * --dm-font-body, a separate token this change never touches — only
 * --dm-font-display, the heading token, changed). No :lang(ja) rule is
 * added here: the page's <html lang> is "en-US" with no per-element
 * lang="ja" anywhere, so a :lang(ja) selector would match nothing and do
 * nothing — dead CSS, not a real safeguard.
 */
/*
 * .dm-section itself paints no background (by design — most consumers sit on
 * whatever the page/skin already painted). The active site-wide skin's own
 * page background is a separate token namespace (street-collage's
 * --dm-sc-paper, not --dm-surface), so it does not follow the token scope
 * above; a plain .dm-section here would otherwise show that skin's beige
 * paper through every gap between dark sections. Scoped to the same body
 * class, touching no other page.
 */
body.dm-pack-green-badger .dm-section {
	background: var(--dm-bg, transparent);
}
/*
 * GREEN BADGER DETAIL CORRECTION DIRECTIVE v2 (2026-08-21), P0-1 — a beige
 * strip was visible between sections that don't share an exact edge (e.g. a
 * ~25px gap between the New Drop rail and the CBX campaign banner, source
 * unclear — no single .dm-section/.dm-slot/.dm-page-assembly__module margin,
 * padding or ::before/::after accounted for it in DevTools). Whatever the
 * exact mechanism, every such gap is transparent all the way down to <body>,
 * whose own background-color is street-collage's paper tone
 * (rgb(224,202,174)) — that is what actually painted the strip. Per the
 * directive, the fix is not to touch html/body (shared by every skin) but to
 * connect the Green Badger content canvas itself to the dark tone, so any
 * gap inside it shows dark regardless of where the gap comes from.
 */
body.dm-pack-green-badger .dm-page-assembly {
	background: var(--dm-bg, #070907);
}
/*
 * street-collage.css deliberately makes .dm-site-section--tone-* transparent
 * (`.dm-skin-street-collage .dm-site-section--tone-base` etc.) so its own
 * single paper sheet shows through every section — exactly right for that
 * skin, exactly wrong for this dark composition. Same two-class specificity
 * as that rule, so it does not naturally win by source order alone; matching
 * the tone-* selectors directly (not the bare .dm-site-section parent) adds
 * `body` as a tie-broken type selector on top of two classes, which does win.
 */
body.dm-pack-green-badger .dm-site-section--tone-base,
body.dm-pack-green-badger .dm-site-section--tone-surface,
body.dm-pack-green-badger .dm-site-section--tone-surface-2 {
	background: var(--dm-bg, transparent);
}

/*
 * P1-A (2026-08-22) — the gap patches above (.dm-section / .dm-page-assembly
 * / tone-* backgrounds) paint over every seam, but <body> itself is still
 * street-collage's beige paper (rgb(224,202,174)) plus its fixed grain
 * ::before, left on this site by a stale global "street-collage" skin
 * option alongside this Pack's own class (see the announcement-bar note
 * below for the same leftover). That still flashes beige on first paint
 * before the patches above cover it, and the fixed grain layer sits over
 * the whole viewport regardless. Both killed here, scoped to this Pack only
 * — no other skin consumer of street-collage.css is touched.
 */
body.dm-pack-green-badger.dm-skin-street-collage {
	background-color: #0b0b0a;
}
body.dm-pack-green-badger.dm-skin-street-collage::before {
	content: none;
}

/* Duck Mark Section Composition. Declared tokens only, no colour literals, no viewport width hacks. */
.dm-section {
  --dm-section-cols: 4;
  --dm-section-gap: var(--dm-gap, 20px);
  --dm-section-media-ratio: 4 / 3;
  position: relative;
  width: 100%;
  min-width: 0;
  padding-block: var(--dm-shell-section-space, 64px);
  color: var(--dm-text, inherit);
  font-family: var(--dm-font-body, inherit);
}

.dm-section__inner {
  width: min(calc(100% - (var(--dm-shell-gutter, 24px) * 2)), var(--dm-shell-container, var(--dm-container, 1140px)));
  min-width: 0;
  margin-inline: auto;
}

/* The Shell already supplies rhythm and container width, so do not apply them twice. */
.dm-page-assembly--shell .dm-section {
  padding-block: 0;
}

.dm-page-assembly--shell .dm-section__inner {
  width: 100%;
  margin-inline: 0;
}

.dm-section[data-dm-cols-d="2"] { --dm-section-cols: 2; }
.dm-section[data-dm-cols-d="3"] { --dm-section-cols: 3; }
.dm-section[data-dm-cols-d="4"] { --dm-section-cols: 4; }
.dm-section[data-dm-cols-d="5"] { --dm-section-cols: 5; }
.dm-section[data-dm-cols-d="6"] { --dm-section-cols: 6; }
.dm-section[data-dm-cols-d="7"] { --dm-section-cols: 7; }
.dm-section[data-dm-cols-d="8"] { --dm-section-cols: 8; }

.dm-section__header {
  margin-bottom: var(--dm-gap, 20px);
}

.dm-section__title {
  margin: 0;
  color: var(--dm-text, inherit);
  font-family: var(--dm-font-display, inherit);
  font-size: var(--dm-shell-heading-size, 2rem);
  font-weight: var(--dm-display-weight, 800);
  line-height: 1.18;
  letter-spacing: var(--dm-display-track, -.02em);
}

.dm-section__eyebrow {
  margin: 0 0 8px;
  color: var(--dm-muted, inherit);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dm-section__subtitle {
  max-width: var(--dm-shell-copy-width, 68ch);
  margin: 8px 0 0;
  color: var(--dm-muted, inherit);
  line-height: 1.75;
}

.dm-section__actions {
  margin: var(--dm-gap, 20px) 0 0;
}

.dm-section__action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;
  border: var(--dm-border-w, 1px) solid var(--dm-border, currentColor);
  border-radius: var(--dm-btn-radius, var(--dm-radius-sm, 8px));
  background: var(--dm-primary, transparent);
  color: var(--dm-on-primary, inherit);
  font-weight: var(--dm-btn-weight, 700);
  text-decoration: none;
}

.dm-section__items {
  display: grid;
  grid-template-columns: repeat(var(--dm-section-cols), minmax(0, 1fr));
  gap: var(--dm-section-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-section[data-dm-scroll-d="slider"] .dm-section__items {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, calc((100% - (var(--dm-section-gap) * (var(--dm-section-cols) - 1))) / var(--dm-section-cols)));
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.dm-section[data-dm-scroll-d="slider"] .dm-section__item {
  scroll-snap-align: start;
}

.dm-section__item {
  min-width: 0;
}

.dm-section__item-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/*
 * The picture fills the tile.
 *
 * `height: 100%` on the image never resolved: the tile's height comes from
 * `aspect-ratio`, and a percentage height has no specified parent height to
 * measure against. The image therefore drew at its own proportion and the rest
 * of the tile stayed empty. Nothing showed it while every tile was square and
 * every seed picture was square; a 9:16 tile made it obvious at once ??a 340x340
 * photograph sat in the top 221px of a 393px tile.
 *
 * A one-cell grid gives the image a definite box on both axes, which is what the
 * percentages needed. This can only change a tile whose declared ratio differs
 * from its picture's own, and the only selectors that declare one are the square
 * ones plus the social tile_ratio settings below; every seed picture those serve
 * is square, so nothing that already ships moves.
 */
.dm-section__item-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--dm-section-media-ratio);
  border-radius: var(--dm-radius-lg, 16px);
  background: var(--dm-surface, transparent);
}

/*
 * Absolute, so the picture has a definite box on both axes.
 *
 * `height: 100%` alone never resolved: the tile's height comes from
 * `aspect-ratio`, and a percentage height has no specified parent height to
 * measure against, so the picture drew at its own proportion. Invisible while
 * every tile was square and every seed picture was square; a 9:16 tile made it
 * plain ??a 340x340 photograph sat in the top 221px of a 393px tile.
 *
 * Grid was tried first and is wrong here: stretching only ever grows a row, so a
 * picture taller than its tile overflowed instead of being cropped, which broke
 * the product row on the way past. Absolute positioning against the padding box
 * constrains in both directions, which is what cropping needs. The box holds
 * nothing but the picture ??all three renderers emit exactly one image and
 * nothing else ??so taking it out of the flow costs nothing.
 *
 * The extra `.dm-section` is not decoration. The Shell ships
 * `body.dm-site-shell-enabled img { height: auto }`, which is (0,1,1) ??exactly
 * what `.dm-section__item-media img` was ??and it loads later, so it won. The
 * height here was being thrown away before it ever reached the picture. This is
 * the third time in this pack that a rule lost to an equal-specificity rule
 * loading after it; it is worth checking for by measurement rather than reading.
 */
.dm-section .dm-section__item-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-section__items--round .dm-section__item-media,
.dm-section__items--square .dm-section__item-media {
  --dm-section-media-ratio: 1 / 1;
}

.dm-section__items--round .dm-section__item-media {
  border-radius: 999px;
}

.dm-section__items--round .dm-section__item-title,
.dm-section__items--square .dm-section__item-title {
  text-align: center;
}

.dm-section__item-title {
  font-weight: 600;
  line-height: 1.4;
}

/*
 * The item's ordinal, drawn only when a skeleton asks for one.
 *
 * Who decides what: a number beside a product is not a fact about the product,
 * it is a statement about the band it sits in ??an editorial selection reads as
 * an article because its entries are numbered, and a shop row reads as a shop
 * row because they are not. That is the skeleton's decision, so the skeleton
 * supplies the value and the pattern draws it, exactly as the ticket label's
 * position works.
 *
 * The counter runs on every list in every pack, which costs nothing: with no
 * skeleton supplying `--dm-section-item-number` the content is `none` and no
 * pseudo element is generated at all. Street stays as it is without knowing
 * about this.
 *
 * The name carries this file's own prefix because the variable belongs to the
 * pattern, not to the skin ??a skin has no business choosing whether a band is
 * numbered, and the skin token contract is the list of what a skin may set.
 */
.dm-section__items {
  counter-reset: dm-item;
}

.dm-section__item {
  counter-increment: dm-item;
}

/*
 * `inline-block` with a full line, rather than `block`, and the difference
 * matters: the number sits inside the card's link, and text decoration
 * propagates into block descendants ??the ordinal came out underlined like the
 * product name. An atomic inline-level box is not decorated by its ancestor, so
 * this both breaks the underline and still takes a line of its own.
 *
 * Muted with opacity rather than a colour, because a pack owns its colours and
 * this file may not name one.
 */
.dm-section__item-title::before {
  content: var(--dm-section-item-number, none);
  display: inline-block;
  width: 100%;
  margin-bottom: var(--dm-section-item-number-space, 6px);
  opacity: var(--dm-section-item-number-opacity, .5);
  font-size: var(--dm-section-item-number-size, .8125rem);
  font-weight: 400;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.dm-section__item-price {
  margin-top: auto;
  color: var(--dm-text, inherit);
  font-weight: 700;
}

/*
 * The pattern's own statement: nothing a band draws is an underlined link.
 *
 * Low specificity on purpose ??this is the intent, and it holds anywhere the
 * theme does not argue. Where a theme underlines everything inside its content
 * wrapper, site-shell.css restates it at a weight that wins.
 */
.dm-section .dm-section__inner a {
  text-decoration: none;
}

/* card_pattern: three visually distinct card treatments. */
.dm-section__items--card-classic .dm-section__item-link {
  gap: 10px;
  padding: 0;
}

.dm-section__items--card-image-first {
  --dm-section-media-ratio: 3 / 4;
}

.dm-section__items--card-image-first .dm-section__item-link {
  gap: 14px;
  text-align: center;
}

.dm-section__items--card-image-first .dm-section__item-title {
  font-size: 1.0625rem;
}

.dm-section__items--card-compact {
  --dm-section-gap: 12px;
  --dm-section-media-ratio: 1 / 1;
}

.dm-section__items--card-compact .dm-section__item-link {
  gap: 4px;
}

.dm-section__items--card-compact .dm-section__item-title {
  font-size: .875rem;
  font-weight: 500;
}

.dm-section__items--card-compact .dm-section__item-media {
  border-radius: var(--dm-radius-sm, 8px);
}

/*
 * card_pattern: "ranked-feature" (2026-08-21, source-v2 migration) — the first
 * item stands as one large feature, the rest fill a small grid beside it
 * (reference: `.ranking{grid-template-columns:1.2fr 1fr}` +
 * `.rank-rest{grid-template-columns:1fr 1fr}`). Built on the grid this file
 * already gives every `dm-section__items` list — `grid-auto-flow: dense` lets
 * the first item span two rows while the rest keep filling the remaining
 * cells in order, so this is one variant, reusable by any product-row family
 * that opts in, not a bespoke ranking renderer.
 */
.dm-section__items--card-ranked-feature {
  grid-template-columns: 1.15fr repeat(2, 1fr);
  grid-auto-flow: dense;
}
.dm-section__items--card-ranked-feature .dm-section__item:first-child {
  grid-row: span 2;
}
.dm-section__items--card-ranked-feature .dm-section__item:first-child .dm-section__item-media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
}
.dm-section__items--card-ranked-feature .dm-section__item:first-child .dm-section__item-title::before {
  --dm-section-item-number: counter(dm-item);
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 16px;
  width: auto;
  margin: 0;
  padding: 0 6px;
  font-family: var(--dm-font-display, inherit);
  font-size: 2.4rem;
  font-weight: 700;
  opacity: 1;
  color: var(--dm-primary, inherit);
}
.dm-section__items--card-ranked-feature .dm-section__item:first-child .dm-section__item-link {
  position: relative;
}
@media (max-width: 782px) {
  .dm-section__items--card-ranked-feature {
    grid-template-columns: 1fr 1fr;
  }
  .dm-section__items--card-ranked-feature .dm-section__item:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .dm-section__items--card-ranked-feature .dm-section__item:first-child .dm-section__item-media {
    min-height: 240px;
  }
}

/*
 * BEST SELLERS "STAIRCASE" (2026-08-22, revised — no outline numbers, no
 * poster/collage read). Scoped to this one instance's own `data-dm-section`
 * so every other `card_pattern:ranked-feature` user of the generic rules
 * above (none currently) keeps the small 2-row-grid treatment untouched.
 *
 * Left-to-right position is permanently tied to DOM/catalogue order — 01
 * always left, 02 always center, 03 always right — a plain flex row with a
 * fixed 60px gutter, top-aligned. Nothing ever moves between positions.
 *
 * Size is driven by `data-dm-size` (large/medium/small, patterns.js):
 * whichever item is clicked becomes `large`; of the other two, the one
 * closer to it in the original 01/02/03 order becomes `medium`, the other
 * `small` — so every one of the 3 possible active states still reads as a
 * considered large/medium/small composition, never "one big + two
 * identical small". Top-aligning the row (`align-items:flex-start`) is what
 * turns the size cascade into the staircase itself — decreasing width means
 * decreasing image height (square media), so the bottoms step down on their
 * own without any manual per-item offset.
 *
 * Desktop 1440 only, gated to >=1300px: 500/380/290 (100/76/58%) plus two
 * 60px gutters = 1290px, sized to fit inside this section's own 1305px
 * content width at 1440 (measured, not guessed — the section itself keeps
 * a 60px side gutter) with a little slack rather than escaping it. A fixed
 * -pixel composition, not a fluid one, so below 1300px this falls back to
 * the existing generic `ranked-feature` grid (fr-based, already has its own
 * <=782px stack) — not a redesign, just letting the pre-existing responsive
 * behaviour take back over outside the width this composition was built for.
 */
@media (min-width: 1300px) {
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__items--card-ranked-feature {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  position: relative;
}
/* No rank numbers in this composition — the generic counter/::before hook
   some card patterns use for a numeral is switched off outright. */
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item-title::before {
  content: none;
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size] {
  position: relative;
  margin: 0;
  flex: 0 0 290px;
  cursor: pointer;
  transition: flex-basis .65s cubic-bezier(.16,.84,.22,1);
}
@media (prefers-reduced-motion: reduce) {
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size] {
    transition: none;
  }
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size="medium"] {
  flex-basis: 380px;
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size="large"] {
  flex-basis: 500px;
  cursor: default;
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size] .dm-section__item-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size] .dm-section__item-media {
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden; /* clips the restrained hover zoom below */
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size] .dm-section__item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .5s ease, transform .5s cubic-bezier(.16,.84,.22,1);
  filter: brightness(1) contrast(1);
}
/* Hover, inactive items only — quiet: a hint of light and a 1-2% zoom, the
   restrained language this pack allows, nothing neon/glow/lifted. */
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-active="false"]:hover .dm-section__item-media img {
  filter: brightness(1.06) contrast(1.03);
  transform: scale(1.015);
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size] .dm-section__item-title {
  position: relative;
  margin: 0;
  padding-bottom: 8px;
  width: fit-content;
  color: var(--dm-muted, #a8a196);
  font-family: var(--dm-font-display, inherit);
  font-weight: 700;
  border-bottom: 1px solid rgba(244, 241, 232, .16);
  transition: color .4s ease, border-color .4s ease;
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-active="true"] .dm-section__item-title {
  color: var(--dm-text, #f4f1e8);
  border-color: rgba(244, 241, 232, .3);
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-active="false"]:hover .dm-section__item-title {
  color: var(--dm-primary, #b89a5b);
  border-color: var(--dm-primary, #b89a5b);
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size="large"] .dm-section__item-title {
  font-size: 1.5rem;
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size="medium"] .dm-section__item-title {
  font-size: 1.125rem;
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size="small"] .dm-section__item-title {
  font-size: .9375rem;
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-size] .dm-section__item-price {
  margin: 0;
  color: var(--dm-muted, inherit);
  font-weight: 400;
  opacity: .85;
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-active="true"] .dm-section__item-price {
  opacity: 1;
}
/* The 詳細を見る affordance only ever reads for the active product — reuses
   the site's secondary link style (cream text + hairline underline), no
   fill, no pill. */
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item-detail {
  margin: 0;
  color: var(--dm-text, #f4f1e8);
  font-size: .875rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  align-self: flex-start;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .4s ease, max-height .5s ease;
}
body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__item[data-dm-active="true"] .dm-section__item-detail {
  max-height: 40px;
  opacity: 1;
  pointer-events: auto;
  transition-delay: .18s;
}
} /* @media (min-width: 1300px) — BEST SELLERS staircase */

/*
 * BEST SELLERS admin-configurable count, 1025-1299px only (2026-08-24).
 * The only width where this section isn't the >=1300px staircase or the
 * <=782px slot-swap — both fixed to exactly 3 products by their own click
 * interaction and intentionally left untouched. Here the plain
 * `card-ranked-feature` dense grid tolerates any item count, so extras
 * beyond the admin's chosen number are hidden with nth-child, keyed off
 * `data-dm-mid-count` (class-duck-mark-section-renderers.php). All fetched
 * products are always in the DOM; only visibility changes per width.
 */
@media (min-width: 1025px) and (max-width: 1299px) {
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__items--card-ranked-feature[data-dm-mid-count="1"] > .dm-section__item:nth-child(n+2),
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__items--card-ranked-feature[data-dm-mid-count="2"] > .dm-section__item:nth-child(n+3),
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__items--card-ranked-feature[data-dm-mid-count="3"] > .dm-section__item:nth-child(n+4),
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__items--card-ranked-feature[data-dm-mid-count="4"] > .dm-section__item:nth-child(n+5),
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__items--card-ranked-feature[data-dm-mid-count="5"] > .dm-section__item:nth-child(n+6),
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__items--card-ranked-feature[data-dm-mid-count="6"] > .dm-section__item:nth-child(n+7),
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__items--card-ranked-feature[data-dm-mid-count="7"] > .dm-section__item:nth-child(n+8),
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__items--card-ranked-feature[data-dm-mid-count="8"] > .dm-section__item:nth-child(n+9) {
    display: none;
  }
}

.dm-section__media {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 320px;
  padding: var(--dm-shell-section-space, 64px);
  border-radius: var(--dm-radius-lg, 16px);
  background-color: var(--dm-surface, transparent);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.dm-section[data-dm-h-d="tall"] .dm-section__media {
  min-height: 480px;
}

.dm-section[data-dm-align-d="center"] .dm-section__body {
  margin-inline: auto;
  text-align: center;
}

.dm-section__media--overlay-soft::before,
.dm-section__media--overlay-strong::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--dm-bg, transparent);
  opacity: .32;
}

.dm-section__media--overlay-strong::before {
  opacity: .55;
}

.dm-section__media > * {
  position: relative;
  z-index: 1;
}

.dm-section__accent {
  max-width: 38%;
  height: auto;
  margin-left: auto;
}

/*
 * cta.image-banner "cinematic-campaign" extension (2026-08-21, source-v2
 * migration). Every rule is scoped to `.dm-section--image-banner` (the
 * runtime's own family+pattern class, not a name this pass invented) so the
 * bare `.dm-section__media/__body/__title/__eyebrow/__action` classes other
 * cta patterns share are completely untouched. Every custom property has a
 * fallback equal to this pattern's own pre-existing literal, so an instance
 * that never sets height_px/overlay_strength/content_width/title_size/
 * image_position/cta_style renders pixel-identical to before.
 */
.dm-section--image-banner .dm-section__media {
  min-height: var(--dm-banner-height, 320px);
  background-position: var(--dm-banner-bg-position, center);
}
.dm-section--image-banner[data-dm-h-d="tall"] .dm-section__media {
  min-height: var(--dm-banner-height, 480px);
}
.dm-section--image-banner .dm-section__media--overlay-soft::before {
  opacity: var(--dm-banner-overlay, .32);
}
.dm-section--image-banner .dm-section__media--overlay-strong::before {
  opacity: var(--dm-banner-overlay, .55);
}
.dm-section--image-banner .dm-section__eyebrow {
  color: var(--dm-primary, inherit);
  font-weight: 700;
}
.dm-section--image-banner .dm-section__body {
  max-width: var(--dm-banner-content-width, 480px);
}
.dm-section--image-banner .dm-section__title {
  font-family: var(--dm-banner-title-font, var(--dm-font-display, inherit));
  font-size: var(--dm-banner-title-size, var(--dm-shell-heading-size, 2rem));
  line-height: .95;
}
.dm-section--image-banner .dm-section__action--outline {
  background: transparent;
  border-color: var(--dm-primary, currentColor);
  color: var(--dm-primary, inherit);
}
.dm-section--image-banner .dm-section__action--text-link {
  min-height: 0;
  padding: 0 0 6px;
  border: 0;
  border-bottom: var(--dm-border-w, 1px) solid var(--dm-primary, currentColor);
  border-radius: 0;
  background: transparent;
  color: var(--dm-primary, inherit);
}

/* ===== THREE FORCES LEDGER (2026-08-22, FINAL ACT) ===== */
/* Rendered via PHP renderer; CSS supports the ledger component layout */
/* Hide ENTER THE PACK section at all viewports; merged into THREE FORCES ledger */
body.dm-pack-green-badger .dm-section--membership-strip {
  display: none !important;
}

body.dm-pack-green-badger .dm-three-forces-ledger {
  --gb-ledger-rule: rgba(244, 241, 232, .14);
  --gb-ledger-idx: 88px;
  --gb-ledger-side: 18rem;
  padding: 96px var(--gb-content-gutter, clamp(20px, 4vw, 72px)) 72px;
  background: var(--dm-bg, #0b0b0a);
}

/* --- opening --------------------------------------------------------- */
body.dm-pack-green-badger .dm-three-forces-ledger__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin: 0 0 44px;
}
body.dm-pack-green-badger .dm-three-forces-ledger__headline {
  margin: 0;
}
body.dm-pack-green-badger .dm-three-forces-ledger__title {
  margin: 10px 0 0;
  line-height: .92;
}
body.dm-pack-green-badger .dm-three-forces-ledger__index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--dm-primary, #b89a5b);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
}
body.dm-pack-green-badger .dm-three-forces-ledger__index i {
  width: 56px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

/* --- contact sheet ---------------------------------------------------- */
/* Equal columns, driven by the real frame count so four products read as a
   deliberate four-up sheet rather than a five-up with a hole in it. */
body.dm-pack-green-badger .dm-three-forces-ledger__sheet {
  display: grid;
  grid-template-columns: repeat(var(--gb-sheet-count, 5), minmax(0, 1fr));
  gap: 28px;
  padding-top: 30px;
  border-top: 1px solid var(--dm-primary, #b89a5b);
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame {
  margin: 0;
  outline: 0;
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame-link {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: 0;
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame-no {
  display: block;
  margin: 0 0 10px;
  color: var(--dm-primary, #b89a5b);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .2em;
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame-box {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--dm-primary, #b89a5b);
  overflow: hidden;
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame-art,
body.dm-pack-green-badger .dm-three-forces-ledger__frame-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .25s ease;
}
/* Low-key duotone at rest: desaturate, then let the black ground read through
   the plate so the gold hairline stays the brightest thing in the frame. */
/* A NEW crop of the plate: the square stage art re-framed to 3:4, so the sheet
   never repeats the carousel's composition. Low-key duotone at rest keeps the
   gold hairline the brightest thing in the frame. */
body.dm-pack-green-badger .dm-three-forces-ledger__frame-art {
  filter: grayscale(1) contrast(1.06) brightness(.62) sepia(.34);
  opacity: .88;
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame-photo {
  opacity: 0;
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame:hover .dm-three-forces-ledger__frame-photo,
body.dm-pack-green-badger .dm-three-forces-ledger__frame:focus-within .dm-three-forces-ledger__frame-photo {
  opacity: 1;
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame:hover .dm-three-forces-ledger__frame-art,
body.dm-pack-green-badger .dm-three-forces-ledger__frame:focus-within .dm-three-forces-ledger__frame-art {
  opacity: 0;
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame:focus-within .dm-three-forces-ledger__frame-box {
  border-color: var(--dm-text, #f4f1e8);
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame-caption {
  display: block;
  margin: 12px 0 0;
  color: var(--dm-text, #f4f1e8);
  font-size: .6875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
  transition: opacity .25s ease;
}
body.dm-pack-green-badger .dm-three-forces-ledger__frame:hover .dm-three-forces-ledger__frame-caption,
body.dm-pack-green-badger .dm-three-forces-ledger__frame:focus-within .dm-three-forces-ledger__frame-caption {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  body.dm-pack-green-badger .dm-three-forces-ledger__frame-art,
  body.dm-pack-green-badger .dm-three-forces-ledger__frame-photo,
  body.dm-pack-green-badger .dm-three-forces-ledger__frame-caption {
    transition: none;
  }
}

/* --- voices ------------------------------------------------------------ */
body.dm-pack-green-badger .dm-three-forces-ledger__voices {
  margin: 0 0 52px;
}
body.dm-pack-green-badger .dm-three-forces-ledger__voices-eyebrow {
  margin: 0 0 26px;
  color: var(--dm-primary, #b89a5b);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
body.dm-pack-green-badger .dm-three-forces-ledger__voices-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 44px 60px;
}
body.dm-pack-green-badger .dm-three-forces-ledger__voice {
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--gb-ledger-rule);
}
/* Body face, not the display serif: the testimony is Japanese, and Cormorant
   has no CJK — leaving it on the display role drops the quote into a synthetic
   italic fallback. Size still reads as the section's quotation tier. */
body.dm-pack-green-badger .dm-three-forces-ledger__voice-quote {
  margin: 0;
  color: var(--dm-text, #f4f1e8);
  font-family: var(--dm-font-body, inherit);
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .01em;
}
body.dm-pack-green-badger .dm-three-forces-ledger__voice-who {
  margin: 14px 0 0;
  color: var(--dm-muted, #8f9189);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --- closing device --------------------------------------------------- */
body.dm-pack-green-badger .dm-three-forces-ledger__seal {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 40px 0 44px;
}
body.dm-pack-green-badger .dm-three-forces-ledger__seal i {
  flex: 1 1 auto;
  height: 1px;
  background: var(--gb-ledger-rule);
}
body.dm-pack-green-badger .dm-three-forces-ledger__seal b {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 1px solid var(--dm-primary, #b89a5b);
  transform: rotate(45deg);
}

/* --- final invitation -------------------------------------------------- */
body.dm-pack-green-badger .dm-three-forces-ledger__join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gb-ledger-side);
  align-items: end;
  column-gap: 24px;
  padding-bottom: 8px;
}
body.dm-pack-green-badger .dm-three-forces-ledger__join-eyebrow {
  margin: 0;
  color: var(--dm-primary, #b89a5b);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
body.dm-pack-green-badger .dm-three-forces-ledger__join-title {
  margin: 14px 0 0;
  color: var(--dm-text, #f4f1e8);
  font-family: var(--dm-font-display, inherit);
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -0.02em;
}
body.dm-pack-green-badger .dm-three-forces-ledger__join-copy {
  margin: 18px 0 0;
  color: var(--dm-muted, #8f9189);
  font-size: .8125rem;
  line-height: 1.9;
}
body.dm-pack-green-badger .dm-three-forces-ledger__join-side {
  padding-left: 24px;
  border-left: 1px solid var(--gb-ledger-rule);
}
body.dm-pack-green-badger .dm-three-forces-ledger__benefits {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
body.dm-pack-green-badger .dm-three-forces-ledger__benefits li {
  padding: 11px 0;
  border-bottom: 1px solid var(--gb-ledger-rule);
  color: var(--dm-text, #f4f1e8);
  font-size: .8125rem;
  line-height: 1.4;
}
body.dm-pack-green-badger .dm-three-forces-ledger__benefits li:first-child {
  padding-top: 0;
}
body.dm-pack-green-badger .dm-three-forces-ledger__member-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--dm-primary, #b89a5b);
  color: var(--dm-primary, #b89a5b);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: opacity .2s ease;
}
body.dm-pack-green-badger .dm-three-forces-ledger__member-link::after {
  content: '\2192';
}
body.dm-pack-green-badger .dm-three-forces-ledger__member-link:hover {
  opacity: .72;
}

@media (max-width: 1100px) {
  body.dm-pack-green-badger .dm-three-forces-ledger__sheet {
    grid-template-columns: repeat(min(var(--gb-sheet-count, 5), 3), minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 900px) {
  body.dm-pack-green-badger .dm-three-forces-ledger__sheet {
    grid-template-columns: repeat(min(var(--gb-sheet-count, 5), 2), minmax(0, 1fr));
  }
  body.dm-pack-green-badger .dm-three-forces-ledger__join {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  body.dm-pack-green-badger .dm-three-forces-ledger__join-side {
    padding-left: 0;
    border-left: 0;
    margin-top: 32px;
  }
}

@media (max-width: 1024px) {
  .dm-section[data-dm-cols-t="1"] { --dm-section-cols: 1; }
  .dm-section[data-dm-cols-t="2"] { --dm-section-cols: 2; }
  .dm-section[data-dm-cols-t="3"] { --dm-section-cols: 3; }
  .dm-section[data-dm-cols-t="4"] { --dm-section-cols: 4; }
  .dm-section[data-dm-cols-t="5"] { --dm-section-cols: 5; }
  .dm-section[data-dm-cols-t="6"] { --dm-section-cols: 6; }
  .dm-section[data-dm-scroll-t="grid"] .dm-section__items {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--dm-section-cols), minmax(0, 1fr));
    overflow-x: visible;
  }
  .dm-section[data-dm-scroll-t="slider"] .dm-section__items {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, calc((100% - (var(--dm-section-gap) * (var(--dm-section-cols) - 1))) / var(--dm-section-cols)));
    grid-template-columns: none;
    overflow-x: auto;
  }
  .dm-section[data-dm-h-t="standard"] .dm-section__media { min-height: 320px; }
  .dm-section[data-dm-h-t="tall"] .dm-section__media { min-height: 420px; }
  .dm-section[data-dm-align-t="center"] .dm-section__body { margin-inline: auto; text-align: center; }
  .dm-section[data-dm-align-t="left"] .dm-section__body { margin-inline: 0; text-align: left; }
}

@media (max-width: 782px) {
  .dm-section[data-dm-cols-m="1"] { --dm-section-cols: 1; }
  .dm-section[data-dm-cols-m="2"] { --dm-section-cols: 2; }
  .dm-section[data-dm-cols-m="3"] { --dm-section-cols: 3; }
  .dm-section[data-dm-cols-m="4"] { --dm-section-cols: 4; }
  .dm-section[data-dm-scroll-m="grid"] .dm-section__items {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--dm-section-cols), minmax(0, 1fr));
    overflow-x: visible;
  }
  .dm-section[data-dm-scroll-m="slider"] .dm-section__items {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, calc((100% - (var(--dm-section-gap) * (var(--dm-section-cols) - 1))) / var(--dm-section-cols)));
    grid-template-columns: none;
    overflow-x: auto;
  }
  .dm-section[data-dm-h-m="standard"] .dm-section__media { min-height: 240px; }
  .dm-section[data-dm-h-m="tall"] .dm-section__media { min-height: 320px; }
  .dm-section[data-dm-align-m="center"] .dm-section__body { margin-inline: auto; text-align: center; }
  .dm-section[data-dm-align-m="left"] .dm-section__body { margin-inline: 0; text-align: left; }
  .dm-section__media { padding: var(--dm-gap, 20px); }
  .dm-section__accent { display: none; }
}

/* Video band. The film fills the band and the copy sits over it, so the film is
   taken out of the flow rather than laid beside the body. The poster uses the
   same rule, because the two must occupy exactly the same box for the swap
   between them to be invisible. */
.dm-section__media--video {
  overflow: hidden;
  padding: 0;
}

.dm-section__video,
.dm-section__video-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * The copy sits on the page's own measure, not on the band's edge.
 *
 * The first attempt inset it by `--dm-shell-section-space`, which reads 64px in
 * this file and 0px under a pack whose rhythm is tight ??luxe-street is one, so
 * the heading and the button ran off the left edge. That is a value the pack
 * sets deliberately for the gap *between* bands; it was never a horizontal
 * inset. The container plus two gutters puts the text on exactly the same line
 * as every contained band above and below it, and narrows with the page.
 */
.dm-section__media--video > .dm-section__body {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--dm-shell-container, 1180px) + (var(--dm-shell-gutter, 20px) * 2));
  margin-inline: auto;
  padding-block: var(--dm-gap, 20px);
  padding-inline: var(--dm-shell-gutter, 20px);
}

/* v3.5.0 sections: trust, story, cta, social. Declared tokens only. */
.dm-section__items--trust {
  gap: var(--dm-gap, 20px);
}

.dm-section__item--trust {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--dm-gap, 20px);
  border: var(--dm-border-w, 1px) solid var(--dm-border, currentColor);
  border-radius: var(--dm-radius-lg, 16px);
  background: var(--dm-surface, transparent);
}

.dm-section__item-text {
  color: var(--dm-muted, inherit);
  font-size: .9375rem;
  line-height: 1.7;
}

.dm-section__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}

.dm-section--image-text[data-dm-media-position-d="right"] .dm-section__split-media {
  order: 2;
}

.dm-section__split-media {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--dm-radius-lg, 16px);
  background: var(--dm-surface, transparent);
}

.dm-section__split-media img {
  display: block;
  width: 100%;
  height: auto;
}

.dm-section__split-copy {
  min-width: 0;
}

/*
 * Social tiles are square unless the pack says otherwise.
 *
 * Square is what shipped, so it stays the default here and in the definition:
 * fruity and street both draw a four-up square grid and neither may move because
 * luxe-street wanted a portrait rail. Only a pack that names another shape gets
 * one, and the named shapes are the ordinary photographic ones ??the reference
 * strip measures 303 x 543, which is 0.558, and 9:16 is 0.5625.
 */
.dm-section__items--social .dm-section__item-media {
  --dm-section-media-ratio: 1 / 1;
}

.dm-section[data-dm-tile-ratio-d="portrait-4-5"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: 4 / 5; }
.dm-section[data-dm-tile-ratio-d="portrait-9-16"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: 9 / 16; }
.dm-section[data-dm-tile-ratio-d="natural"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: auto; }

@media (max-width: 1024px) {
  .dm-section[data-dm-tile-ratio-t="square"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: 1 / 1; }
  .dm-section[data-dm-tile-ratio-t="portrait-4-5"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: 4 / 5; }
  .dm-section[data-dm-tile-ratio-t="portrait-9-16"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: 9 / 16; }
  .dm-section[data-dm-tile-ratio-t="natural"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: auto; }
}

@media (max-width: 782px) {
  .dm-section[data-dm-tile-ratio-m="square"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: 1 / 1; }
  .dm-section[data-dm-tile-ratio-m="portrait-4-5"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: 4 / 5; }
  .dm-section[data-dm-tile-ratio-m="portrait-9-16"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: 9 / 16; }
  .dm-section[data-dm-tile-ratio-m="natural"] .dm-section__items--social .dm-section__item-media { --dm-section-media-ratio: auto; }
}

@media (max-width: 1024px) {
  .dm-section--image-text[data-dm-media-position-t="right"] .dm-section__split-media { order: 2; }
  .dm-section--image-text[data-dm-media-position-t="left"] .dm-section__split-media { order: 0; }
}

@media (max-width: 782px) {
  .dm-section__split {
    grid-template-columns: minmax(0, 1fr);
  }
  .dm-section--image-text .dm-section__split-media { order: 0; }
}
/* ------------------------------------------------------------------
   Motion: the runtime's reveal (D-153)

   THE RESTING STATE IS THE VISIBLE ONE. Nothing here hides a section on
   its own. The hidden state applies only under `.dm-motion-ready`, a
   class the script puts on <html> after it has decided it will animate.
   With no JavaScript the class never arrives, no rule matches, and every
   band is simply visible.

   `data-dm-motion` is written by the runtime for sections that DECLARE
   `motion_level`. `data-motion`, on a renderer's own inner element, is a
   different attribute owned by that section (see benefit-strip.css).
   ------------------------------------------------------------------ */

.dm-motion-ready .dm-section[data-dm-motion="restrained"],
.dm-motion-ready .dm-section[data-dm-motion="expressive"] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms ease, transform 420ms ease;
  will-change: opacity, transform;
}

.dm-motion-ready .dm-section[data-dm-motion="expressive"] {
  transform: translateY(22px);
  transition-duration: 560ms;
}

/* `none` is a declared choice, and it means no reveal — never a hidden band. */
.dm-motion-ready .dm-section[data-dm-motion="none"] {
  opacity: 1;
  transform: none;
}

.dm-motion-ready .dm-section[data-dm-motion].is-dm-revealed {
  opacity: 1;
  transform: none;
}

/* Asked for less motion: no reveal at all, and nothing is ever hidden. */
@media (prefers-reduced-motion: reduce) {
  .dm-motion-ready .dm-section[data-dm-motion],
  .dm-motion-ready .dm-section[data-dm-motion].is-dm-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Motion Presets v1

   The runtime publishes only safe numeric data attributes. JavaScript turns
   those into transition timing/transform values immediately before adding
   `.dm-motion-ready`; without JavaScript nothing below hides a section.
   ------------------------------------------------------------------ */
.dm-motion-ready .dm-section[data-dm-motion-preset][data-dm-motion-target="section"]:not([data-dm-motion-effect="none"]) {
  opacity: 0;
  will-change: opacity, transform;
}

.dm-motion-ready .dm-section[data-dm-motion-effect="none"] {
  opacity: 1;
  transform: none;
  transition: none;
}

.dm-motion-ready .dm-section[data-dm-motion-preset].is-dm-revealed {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .dm-section[data-dm-motion-intensity="dynamic"] .dm-btn,
  .dm-section[data-dm-motion-intensity="bold"] .dm-btn {
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
  }
  .dm-section[data-dm-motion-intensity="dynamic"] .dm-btn:hover,
  .dm-section[data-dm-motion-intensity="bold"] .dm-btn:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-motion-ready .dm-section[data-dm-motion-preset],
  .dm-motion-ready .dm-section[data-dm-motion-preset].is-dm-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Motion Presets v2 — internal stagger, mask, parallax and floating.
   Hidden states still require `.dm-motion-ready`; static rendering is the
   unconditional fallback when JavaScript or motion preference says no.
   ------------------------------------------------------------------ */
.dm-motion-ready .dm-section[data-dm-motion-target="items"] [data-dm-motion-item] {
  opacity: 0;
  will-change: opacity, transform, clip-path;
}

.dm-motion-ready .dm-section[data-dm-motion-target="items"].is-dm-revealed [data-dm-motion-item] {
  opacity: 1;
}

.dm-section [data-dm-float].is-dm-floating {
  animation: dmfx-float 5.6s ease-in-out infinite alternate;
  will-change: translate;
}

@keyframes dmfx-float {
  from { translate: 0 0; }
  to { translate: 0 calc(var(--dmfx-float, 0px) * -1); }
}

@media (prefers-reduced-motion: reduce) {
  .dm-motion-ready .dm-section[data-dm-motion-target="items"] [data-dm-motion-item],
  .dm-motion-ready .dm-section[data-dm-motion-target="items"].is-dm-revealed [data-dm-motion-item] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .dm-section [data-dm-float].is-dm-floating {
    animation: none;
    translate: none;
  }
}

/* ------------------------------------------------------------------
   Green Badger 目的から選ぶ (native-cats): premium entrance-motion override.
   The shared runtime writes inline motion values, so this section fixes
   them to one coherent, servo-like reveal: opacity + only 6px of travel,
   950ms symmetric glide, zero stagger, never scale/mask. The goal is to
   feel like a heavy mechanism settling into place, not a stack of items
   popping on in sequence. `!important` beats the runtime's inline styles.
   ------------------------------------------------------------------ */
.dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion]:has(.dm-native-cats):not(.is-dm-revealed),
.dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion-preset]:has(.dm-native-cats):not(.is-dm-revealed):not([data-dm-motion-effect="none"]),
.dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion-preset]:has(.dm-native-cats):not(.is-dm-revealed) [data-dm-motion-item] {
  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) !important;
  clip-path: none !important;
}
.dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion]:has(.dm-native-cats),
.dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion-preset]:has(.dm-native-cats),
.dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion-preset]:has(.dm-native-cats) [data-dm-motion-item] {
  transition-property: opacity, transform !important;
  transition-duration: 950ms !important;
  transition-timing-function: cubic-bezier(.37, 0, .63, 1) !important;
  transition-delay: 0ms !important;
}
@media (prefers-reduced-motion: reduce) {
  .dm-motion-ready body.dm-pack-green-badger .dm-section:has(.dm-native-cats),
  .dm-motion-ready body.dm-pack-green-badger .dm-section:has(.dm-native-cats) [data-dm-motion-item] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------
   Draft-only empty band

   Emitted by a renderer that has nothing to draw, and only while the Studio's
   Draft Preview is rendering (Duck_Mark_Section_Runtime::is_draft_preview()).
   A visitor never receives this markup, so these rules are inert on the public
   site and exist purely so the builder can say why a band is blank instead of
   showing a gap with no explanation.
   ------------------------------------------------------------------ */
.dm-empty-band {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: 0 auto;
  padding: 32px 24px;
  max-width: 720px;
  text-align: center;
  border: 2px dashed currentColor;
  border-radius: 14px;
  opacity: .72;
}

.dm-empty-band__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.dm-empty-band__body {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
}

.dm-empty-band__note {
  margin: 0;
  font-size: .78rem;
  opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
  .dm-empty-band { transition: none; }
}

/*
 * GREEN BADGER DETAIL CORRECTION DIRECTIVE v2 (2026-08-21), P0-4 — spacing
 * tokens and the Find Your Mode intro/index-row recovery. Every rule below
 * is scoped to body.dm-pack-green-badger (this Pack's own body class) or
 * further to a specific section instance selector within it — none of it
 * reaches any other Pack, and .dm-native-cats[data-layout="mode-list"] is a
 * pattern-level attribute selector any other Pack's own mode-list instance
 * would also match, so the outer body-class scope is what keeps this
 * Green-Badger-only, not the attribute selector by itself.
 */
body.dm-pack-green-badger {
  /* Desktop rhythm pass (2026-08-22): fixed 8px-grid steps instead of vw
     clamps. The old clamps resolved to 100.8 / 80 / 61.2 / 43.2 at 1440 and
     were already pinned at (or near) their minimums on tablet, so these fixed
     values change almost nothing visually while giving the page one rhythm:
     96 / 80 / 64 / 40. The ≤600px media overrides below still own mobile. */
  --gb-space-experience: 96px;
  --gb-space-large: 80px;
  --gb-space-medium: 64px;
  --gb-space-compact: 40px;
  /* P1-A (2026-08-22): the one desktop section-rhythm scale (master design
     system doc, GLOBAL §A). Replaces the three separate step values below
     (80 / 64 / 0-with-no-rule-at-all for category cards) that existed only
     to fight the street-collage skin's padding-block:0 override — now that
     every body section shares one clamp, those per-group corrections are
     gone. ≤600px keeps the exact values it already had. */
  --gb-section-space: clamp(72px, 8.3vw, 120px);
}
/* The shell and each renderer both own spacing by default. Green Badger uses
   renderer-level rhythm only, otherwise those values are added together and
   become the giant empty bands visible in the rejected build. */
body.dm-pack-green-badger .dm-page-assembly--shell > .dm-site-section {
  padding-block: 0;
}
/* One rhythm for every body section. Full-bleed banners
   (.dm-section--image-banner) are the plan's one named exception and keep
   their own padding:0 rule further down (their padding lives inside
   .dm-section__media instead); the hero is LOCAL and untouched.
   SECTION DETAIL spacing (2026-08-22): the fixed per-family desktop values
   this rule and the ≥1025px block below used to hardcode are now the var()
   fallback only. Section_Runtime::section_space_markup() writes
   --dm-section-space-top/-bottom inline on an instance the moment its
   DETAIL Top/Bottom Space is edited; every value below is the exact number
   that instance rendered with before this pass, so an unedited instance is
   pixel-identical. --dm-section-min-height has no prior value to fall back
   to (the capability did not exist before), so its fallback is `auto`. */
body.dm-pack-green-badger .dm-section:not(.dm-section--hero):not(.dm-section--image-banner) {
  padding-top: var(--dm-section-space-top, var(--gb-section-space));
  padding-bottom: var(--dm-section-space-bottom, var(--gb-section-space));
  min-height: var(--dm-section-min-height, auto);
}
@media (min-width: 1025px) {
  body.dm-pack-green-badger .dm-section--coverflow-showcase {
    /* !important: needed to beat the :not()-chain rule above, which is
       MORE specific than a single-class selector despite reading generic
       (two :not() pseudo-classes each count as a class toward specificity) —
       same reason the hack this replaces needed it (see git history). */
    padding-top: var(--dm-section-space-top, 56px) !important;
    padding-bottom: var(--dm-section-space-bottom, 24px) !important;
  }
  body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] {
    padding-top: var(--dm-section-space-top, 40px) !important;
    padding-bottom: var(--dm-section-space-bottom, 46px) !important;
  }
  /* BEST SELLERS breathing-room pass (2026-08-22, spacing-only): was 20/46,
     read cramped — heading sat almost flush against 目的から選ぶ's own
     bottom divider, and the gap into THREE FORCES was thin. Raised to
     56/64, both already-used values on this page (56 = CHOOSE's own top,
     64 = the S canonical rhythm) rather than new numbers. Fallback here
     kept in sync with the preset default (image-focus, class-duck-mark-
     asset-presets.php) that actually supplies it. */
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] {
    padding-top: var(--dm-section-space-top, 56px) !important;
    padding-bottom: var(--dm-section-space-bottom, 64px) !important;
  }
  /* ENTER THE PACK: the outer .dm-section carried the generic
     --gb-section-space padding-block ON TOP OF .dm-membership-banner's own
     card padding (64px both sides) — a genuine double-payment, not a single
     rhythm value. Zeroed here; the banner's own padding (edited at its own
     rule, membership-strip.css) now owns 100% of this section's internal
     rhythm. */
  body.dm-pack-green-badger .dm-section--membership-strip {
    padding-top: var(--dm-section-space-top, 0px) !important;
    padding-bottom: var(--dm-section-space-bottom, 0px) !important;
  }
  body.dm-pack-green-badger .dm-membership-banner {
    /* Inner component padding — out of DETAIL spacing's scope, untouched. */
    padding-bottom: 24px !important;
  }
}
@media (max-width: 600px) {
  body.dm-pack-green-badger .dm-section--coverflow-showcase,
  body.dm-pack-green-badger .dm-section--membership-strip {
    padding-block: clamp(48px, 10vw, 68px);
  }
  body.dm-pack-green-badger .dm-section--best-sellers-row {
    padding-block: clamp(44px, 9vw, 60px);
  }
}

/* Find Your Mode: a wide top-of-section breathing gap (this section followed
   a full-bleed Campaign image, which needs no bottom padding of its own, so
   the whole gap is owned here as padding-top, not split across a margin on
   both sides), then a 2-column intro (title left, description right) ending
   in a divider, then the numbered mode rows below it. */
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] {
  /* Desktop rhythm pass (2026-08-22): the one-off clamp(96px,7vw,132px)
     resolved to 100.8px at 1440 — the experience step (96px) is the same
     intent on the shared scale. ≥1025px overrides these below (SECTION
     SPACING pass); this stays the ≤1024px value. */
  padding-top: var(--gb-space-experience);
  padding-bottom: var(--gb-space-medium);
}
/* SECTION SPACING pass (2026-08-22): the outer .dm-section ALSO carries the
   generic --gb-section-space padding-block (line ~1069) on top of
   .dm-native-cats' own padding above — a real double-payment (measured:
   222px CONTROL→目的, 340px 目的→BEST SELLERS against the 64px reference).
   Zeroed the outer at `.dm-section--cards`; .dm-native-cats now owns 100%
   of this section's rhythm, values dropped from the shared 96/64 experience
   tokens to instance-specific ones that land both boundaries at S≈64.
   Desktop-only, ≥1025px — ≤1024px keeps the rule above untouched. */
@media (min-width: 1025px) {
  body.dm-pack-green-badger .dm-section--cards {
    padding-top: var(--dm-section-space-top, 0px) !important;
    padding-bottom: var(--dm-section-space-bottom, 0px) !important;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] {
    padding-top: 57px;
    padding-bottom: 8px;
  }
}
/* Desktop alignment pass (2026-08-22): Find Your Mode's title and the 01/02/03
   rows sat at x=0; inset them to the shared shell gutter line. ≥781px only —
   the ≤780px stacked layout keeps its current geometry for the mobile pass. */
@media (min-width: 781px) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] {
    padding-inline: var(--gb-content-gutter, 24px);
  }
}
@media (max-width: 600px) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] {
    padding-top: clamp(64px, 14vw, 88px);
  }
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__header {
  padding-bottom: 48px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--dm-border, rgba(244, 236, 220, .16));
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__header > div {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(240px, 360px);
  column-gap: clamp(40px, 6vw, 80px);
  align-items: end;
  width: 100%;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__header p {
  max-width: 340px;
}
@media (max-width: 780px) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__header > div {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__header {
    padding-bottom: 32px;
    margin-bottom: 24px;
  }
}

/*
 * CHOOSE YOUR INSTINCT v2 (2026-08-22, `2026-08-22-green-badger-choose-3d-
 * spec.md` §2-§5, ADOPTED). Stacked composition — one-line top intro, full-
 * bleed stage, caption row bound to the center card — replacing the fan-of-
 * five theater layout above (2026-08-21 directive). `.dm-coverflow__intro`
 * and `.dm-coverflow__stage-group` are the pattern's own theater wrappers;
 * this scopes every rule to `[data-content-layout="theater"]`, the one
 * setting only the CHOOSE instance uses.
 */
@media (min-width: 861px) {
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] {
    display: block;
    padding: 0;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__intro {
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-template-areas: "eyebrow ." "title desc";
    column-gap: 40px;
    align-items: end;
    padding-inline: var(--gb-content-gutter, 60px);
    margin: 0 0 32px;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__eyebrow {
    grid-area: eyebrow;
    font-size: 12px;
  }
  /* v3 conflict resolution (spec ADOPTED §1): entirely cream roman, no gold
     last-word accent — overrides both the generic 56px title rule and the
     accent span's own gold color for this instance only. */
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__intro h2 {
    grid-area: title;
    font-family: var(--dm-font-display);
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    color: var(--dm-text, #f4f1e8);
    font-size: 48px;
    line-height: 1;
    white-space: nowrap;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__intro-accent {
    color: inherit;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__intro p:not(.dm-coverflow__eyebrow) {
    grid-area: desc;
    margin: 0;
    max-width: 380px;
    font-family: var(--dm-font-body);
    font-size: 13px;
    color: var(--dm-text, #f4f1e8);
    opacity: .6;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"]::before,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__pedestal,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__pedestal-front,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__intro-rule {
    display: none;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__stage-group {
    position: relative;
    display: block;
  }
  /* Full-bleed stage: viewport allowance removed, height fixed to the
     center card (spec §2/§4), perspective/transform origin centered. */
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__viewport {
    /* var(), not a fixed 640px: ≤1100 shrinks --cfs-card-w/-h via
       THEATER_RESPONSIVE (coverflow-showcase.js) — a hardcoded height here
       broke the arrows/caption math below at 1000px (verified: the next
       arrow rendered off past the card edge). */
    height: var(--cfs-card-h);
    perspective-origin: 50% 50%;
    overflow: hidden;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__track {
    transform-origin: center;
  }
  /* Card chrome removed (spec §4): no bg/border/shadow/radius on any card;
     a hairline outline on the center card only, keyed off aria-hidden
     (the engine already marks exactly the center card aria-hidden="false"). */
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__card {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__card[aria-hidden="false"] {
    outline: 1px solid rgba(244, 241, 232, .14);
    outline-offset: -1px;
  }
  /* Hover / drag states (spec §5). */
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__media img {
    transition: transform .6s var(--cfs-ease, ease);
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__card[aria-hidden="false"]:hover .dm-coverflow__media img {
    transform: scale(1.02);
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__card[aria-hidden="true"]:hover {
    filter: brightness(.92) !important;
    cursor: pointer;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__viewport.is-dragging .dm-coverflow__card[aria-hidden="false"] {
    filter: brightness(.9) !important;
  }
  /* Caption row (spec §5): 640 wide, centered under the card, same gutter
     as the top row. The active-content mirror already renders ingredient /
     name / price / CTA — this is typography + width, not new markup. */
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content {
    /* var(), same reasoning as the viewport height above. */
    width: var(--cfs-card-w);
    max-width: none;
    margin: 24px auto 0;
    padding: 0 60px;
    text-align: left;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-eyebrow {
    color: var(--dm-primary, #b89a5b);
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-item h3 {
    font-family: var(--dm-font-display);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--dm-text, #f4f1e8);
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-price {
    color: var(--dm-text, #f4f1e8);
    font-size: 20px;
  }
  /* CTA is a SECONDARY text link (master design system §A action system),
     not the paper-button pill this class is mapped to sitewide further
     below — overridden here at higher specificity for this instance only. */
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-cta,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-cta:hover,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-cta:focus-visible {
    min-width: 0;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    clip-path: none;
    box-shadow: none;
    color: var(--dm-text, #f4f1e8);
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: none;
    filter: none;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-cta::before,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-cta::after {
    content: none;
  }
  /* Caption enter/leave (spec §5, JS toggles .is-leaving/.is-entering —
     see coverflow-showcase.js). */
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-item {
    transition: opacity .18s ease, transform .18s ease;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-item.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__active-content-item.is-entering {
    animation: dm-coverflow-caption-enter .32s ease-out;
  }
  @keyframes dm-coverflow-caption-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Arrows + counter (spec §5): no box, glyphs only, attached to the right
     end of the caption row — 344px in from the stage-group's right edge
     lands on the card's right edge (320px = card_width/2) plus its own
     24px gap, independent of the stage-group's actual rendered width. */
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__arrows {
    position: absolute;
    /* var(--cfs-card-h)/-w, not fixed 692px/344px: both were tuned to the
       1440 desktop card (640) and broke — arrows rendered off past the
       card's actual edge — at the ≤1100 breakpoint's 360 card (verified at
       1000px). caption row sits 24px under the viewport, is 56px tall
       (--cfs-active-gap 24 + content ~28 half-height), so its vertical
       centre is card-height + 24 + 28 from the viewport's own top. */
    top: calc(var(--cfs-card-h) + 52px);
    /* LEFT edge (not right) at card-right-edge + 24, so the cluster grows
       rightward from there instead of reaching back over the caption's own
       price/CTA column (measured overlap, 2026-08-22). */
    left: calc(50% + (var(--cfs-card-w) / 2) + 24px);
    right: auto;
    transform: translateY(-50%);
    margin: 0;
    width: auto;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__arrow,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__arrow:hover,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__arrow:focus,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__arrow:focus-visible,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__arrow:active {
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(244, 241, 232, .7) !important;
    font-size: 20px;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__arrow:hover,
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__arrow:focus-visible {
    color: rgba(244, 241, 232, 1) !important;
  }
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] .dm-coverflow__position--stage {
    font-family: var(--dm-font-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--dm-primary, #b89a5b);
  }
}
/*
 * GREEN BADGER DETAIL CORRECTION DIRECTIVE v2 (2026-08-21), reviewer
 * correction #7 — the 420px column minimum and the 72px title floor both
 * caused real horizontal clipping/overflow at 390px (verified via a real
 * 390px headless capture — clamp()'s minimum bound is not itself
 * responsive). coverflow-showcase.css already switches this pattern to a
 * single column below 860px (its own breakpoint, shared by every instance),
 * so this mirrors that same breakpoint for the two Green-Badger-only
 * overrides above.
 */
@media (max-width: 860px) {
  body.dm-pack-green-badger .dm-coverflow[data-content-layout="theater"] {
    grid-template-columns: 1fr;
  }
  body.dm-pack-green-badger .dm-coverflow__intro h2 {
    font-size: clamp(30px, 8vw, 44px);
    word-break: keep-all;
    overflow-wrap: normal;
  }
}
@media (max-width: 430px) {
  body.dm-pack-green-badger .dm-coverflow__intro h2 {
    font-size: clamp(28px, 8.6vw, 34px);
  }
}

/*
 * reviewer correction #4 (cont.) — the active-content mirror had no CTA at
 * all (price only), so "product name / spec / price" never linked anywhere.
 * .dm-coverflow__active-content-cta already exists as a pattern class with
 * its own visual style (border, hover); the renderer only emits it when the
 * card's own cta_label/cta_url content fields are non-empty. Fixed by
 * populating cta_label/cta_url on the Product Theater's 5 manual_items
 * (duck_mark_section_composition option), not from CSS.
 */
body.dm-pack-green-badger .dm-coverflow__active-content-item {
  width: 100%;
}

/*
 * GREEN BADGER DETAIL CORRECTION DIRECTIVE v2 (2026-08-21), reviewer
 * correction #5 — per the directive's own typography table, "Product name"
 * and "Membership 영문" both take --gb-font-en too, not just the display
 * headings already covered above. Both currently read --dm-font-body (a
 * shared UI-sans token, correct for most labels/specs/prices, which is why
 * this is scoped narrowly to just the name/CTA text, not the whole card or
 * banner).
 */
body.dm-pack-green-badger .dm-section__item-title,
body.dm-pack-green-badger .dm-coverflow__active-content-item h3,
body.dm-pack-green-badger .dm-membership-banner__cta-text,
body.dm-pack-green-badger .dm-site-footer h2 {
  font-family: var(--dm-font-display, inherit);
}

/*
 * GREEN BADGER DETAIL CORRECTION DIRECTIVE v2 (2026-08-21), reviewer
 * correction #6 — section titles read too small/weak against the reference:
 * the site-shell rhythm this instance runs under (compact + catalog
 * profile) resolves --dm-shell-heading-size to ~30px, well under the
 * directive's own Section H2 range (42-58px desktop). Raised here, scoped
 * to this Pack only — other packs keep the shell's own rhythm sizing.
 */
body.dm-pack-green-badger .dm-section__title {
  font-size: var(--gb-title-section, 48px);
}

/* Desktop alignment pass (2026-08-22): the hero copy started at 3vw (43px at
   1440) while every contained section starts at --dm-shell-gutter (4vw / 58px).
   One shared left line for the whole page. ≥641px only — slider.css's own
   ≤640px geometry stays for the mobile pass. */
@media (min-width: 641px) {
  body.dm-pack-green-badger .dm-native-slider[data-content-container="viewport"] .dm-native-slider__inner {
    padding-inline: var(--gb-content-gutter, 24px);
  }
}

/* Product headers are one row: title left, archive action right. The rejected
   build placed VIEW ALL under the cards, which made each rail feel unfinished. */
body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__inner {
  position: relative;
}
body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px; /* P1-A: title→grid unified to 48, was clamp(24px,2.5vw,38px) */
  padding-right: 190px;
}
body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__actions {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__items {
  gap: clamp(14px, 1.6vw, 26px);
}
body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__item-media {
  border-radius: 0;
}
/* P1-B (2026-08-22) — BEST SELLERS restructure: equal 1:1 cards, not the
   image-first pattern's own 3:4 portrait crop. Scoped to the card-pattern
   class itself (not .dm-section--best-sellers-row, which New Drop shares
   too) so New Drop's classic cards are untouched. */
body.dm-pack-green-badger .dm-section__items--card-image-first {
  --dm-section-media-ratio: 1 / 1;
}
body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__item-title {
  margin-top: 10px;
  font-size: clamp(16px, 1.15vw, 20px);
}
/* Desktop-only: unscoped, this out-specified the generic <=782px mobile
   fallback above (which stacks the lead item full-width over a 2-column row)
   and forced the 3-column desktop grid onto phones. */
@media (min-width: 783px) {
  body.dm-pack-green-badger .dm-section__items--card-ranked-feature {
    grid-template-columns: 1.3fr .7fr .7fr;
  }
}

/* Campaigns are visual blocks, not padded posters floating in black. */
body.dm-pack-green-badger .dm-section--image-banner {
  padding-block: 0;
}
body.dm-pack-green-badger .dm-section--image-banner .dm-section__inner {
  width: 100%;
}
body.dm-pack-green-badger .dm-section--image-banner .dm-section__media {
  border-radius: 0;
  /* Desktop rhythm pass (2026-08-22): 6.25vw hits a whole 90px at 1440
     (6vw gave 86.4px); the 390px value is unchanged (min 48px still wins). */
  padding: clamp(48px, 6.25vw, 96px) max(var(--dm-shell-gutter), calc((100vw - var(--gb-content-max)) / 2));
}

/*
 * CONTROL THE HUNGER only (2026-08-22, Fable-approved "editorial plate"
 * redesign — replaces the earlier left-align REFINE, discarded). The only
 * cream-background section on the page; that inversion between two black
 * clamp bands IS the design. Everything below is scoped to
 * `.dm-cbx-plate`, a class only `render_cbx_hunger_plate()` (section
 * renderers) emits, for this one instance — THREE FORCES keeps the
 * ordinary `.dm-section--image-banner` markup and rules above untouched.
 *
 * The three flat bands + two 1px gold hairlines are one hard-stop
 * linear-gradient background (no extra band elements): 64px black,
 * 1px gold, 592px cream, 1px gold, 64px black = 720px total.
 */
body.dm-pack-green-badger .dm-section--image-banner .dm-cbx-plate {
  position: relative;
  height: 720px;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  background-image: none;
  background-color: #0b0b0a;
  /* Hairlines widened 1px -> 2px (2026-08-22 fix): the stop math at 1px was
     verified correct (exact 63/64/655/656 stops, confirmed via a 4x-zoomed
     crop and the computed backgroundImage string), but at normal screenshot
     scale/compression a single device pixel of gold reads as effectively
     invisible. 2px survives that without reading as a "border" — still a
     hairline, not a decorative band. */
  background: linear-gradient(
    to bottom,
    #0b0b0a 0, #0b0b0a 62px,
    #b89a5b 62px, #b89a5b 64px,
    #f4f1e8 64px, #f4f1e8 654px,
    #b89a5b 654px, #b89a5b 656px,
    #0b0b0a 656px, #0b0b0a 720px
  );
}
body.dm-pack-green-badger .dm-cbx-plate.dm-section__media--overlay-strong::before,
body.dm-pack-green-badger .dm-cbx-plate.dm-section__media--overlay-soft::before {
  content: none; /* the plate has no photo, so no dark overlay is drawn over it */
}
body.dm-pack-green-badger .dm-cbx-plate__eyebrow {
  position: absolute;
  top: 0;
  left: 60px;
  height: 64px;
  margin: 0;
  display: flex;
  align-items: center;
}
body.dm-pack-green-badger .dm-cbx-plate__field {
  position: absolute;
  inset: 64px 0 64px 0;
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
}
body.dm-pack-green-badger .dm-cbx-plate__body {
  padding-left: 60px;
  padding-right: 24px;
  max-width: 760px;
}
body.dm-pack-green-badger .dm-cbx-plate__title {
  margin: 0;
  color: #0b0b0a;
  font-family: var(--dm-editorial-serif-font, 'Cormorant Garamond', Georgia, serif);
  font-weight: 600;
  font-style: normal;
  font-size: 96px;
  line-height: .96;
}
body.dm-pack-green-badger .dm-cbx-plate__title-dot {
  color: #b89a5b;
}
body.dm-pack-green-badger .dm-cbx-plate__subtitle {
  margin: 24px 0 0;
  max-width: 440px;
  color: rgba(11, 11, 10, .7);
  font-family: var(--dm-font-body, 'Noto Sans JP', sans-serif);
  font-size: 15px;
  line-height: 1.9;
}
body.dm-pack-green-badger .dm-cbx-plate__body .dm-section__actions {
  margin: 28px 0 0;
}
body.dm-pack-green-badger .dm-cbx-plate__art {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
body.dm-pack-green-badger .dm-cbx-plate__art img {
  max-height: 560px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  animation: dm-cbx-badger-pulse 11s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes dm-cbx-badger-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  body.dm-pack-green-badger .dm-cbx-plate__art img {
    animation: none;
  }
}
body.dm-pack-green-badger .dm-cbx-plate__mark {
  position: absolute;
  right: 24px;
  bottom: 12px;
  color: #b89a5b;
  font-family: var(--dm-editorial-serif-font, 'Cormorant Garamond', Georgia, serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* Entrance fade, text block only, once, no scroll trigger (Fable's motion
   spec was exhaustive — this is the whole of it, no parallax added). */
body.dm-pack-green-badger .dm-cbx-plate__body {
  animation: dm-cbx-fade-in .4s ease-out both;
}
@keyframes dm-cbx-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/*
 * Graceful degradation only, not full mobile polish (not required this
 * pass — see chat report backlog): the fixed 720px/96px desktop plate
 * breaks outright below ~1024px (title overflows the black bands). This
 * collapses it to one stacked column, auto height, and a fluid title so
 * the section is usable, not broken; the band/hairline/cream treatment
 * and gutter are kept.
 */
@media (max-width: 1024px) {
  body.dm-pack-green-badger .dm-section--image-banner .dm-cbx-plate {
    height: auto;
    background: linear-gradient(
      to bottom,
      #0b0b0a 0, #0b0b0a 55px,
      #b89a5b 55px, #b89a5b 56px,
      #f4f1e8 56px, #f4f1e8 calc(100% - 56px),
      #b89a5b calc(100% - 56px), #b89a5b calc(100% - 55px),
      #0b0b0a calc(100% - 55px), #0b0b0a 100%
    );
  }
  body.dm-pack-green-badger .dm-cbx-plate__eyebrow {
    height: 56px;
  }
  body.dm-pack-green-badger .dm-cbx-plate__field {
    position: static;
    display: block;
    padding: 56px 0;
  }
  body.dm-pack-green-badger .dm-cbx-plate__body {
    padding: 0 24px;
    max-width: none;
  }
  body.dm-pack-green-badger .dm-cbx-plate__title {
    font-size: clamp(40px, 11vw, 64px);
  }
  body.dm-pack-green-badger .dm-cbx-plate__art {
    justify-content: center;
    padding: 24px 24px 0;
  }
  body.dm-pack-green-badger .dm-cbx-plate__art img {
    max-height: 320px;
  }
  body.dm-pack-green-badger .dm-cbx-plate__mark {
    position: static;
    display: block;
    text-align: right;
    margin-top: 8px;
    padding-right: 24px;
  }
}
@media (max-width: 600px) {
  body.dm-pack-green-badger .dm-section__title {
    font-size: clamp(32px, 8vw, 40px);
  }
}
/* 目的から選ぶ REFINE (2026-08-22): 56px (--gb-title-feature) was an
   unauthorized "ghost tier" — not on the site's type ladder. Corrected to
   48px, the SECTION tier every other section title already uses; no new
   formal tier introduced. */
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] h2 {
  font-size: 48px;
}
@media (max-width: 600px) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] h2 {
    font-size: clamp(32px, 9vw, 40px);
  }
}

/*
 * 目的から選ぶ (mode-list) row REFINE (2026-08-22, Fable-approved, System
 * guardrails). All GB-scoped overrides of the generic mode-list rules in
 * `patterns/cards.css` — that file stays untouched so any other Pack's own
 * mode-list instance keeps its current look.
 */
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__card {
  /* No card-chrome on any row (System guardrail) — explicit, not just
     "already 0", since this is the rule a reviewer checks against. */
  border-left: 0;
  border-right: 0;
  border-top: 0;
  box-shadow: none;
  background: transparent;
  /* Was `transition:background .25s ease,padding-left .25s ease` with a
     padding-left row-shift on hover (cards.css) — replaced below with the
     arrow shift + hairline brighten + name-color hover, so this only needs
     to transition border-color now. */
  transition: border-color .2s ease;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__card:hover {
  padding-left: 4px;
  background: transparent;
  border-bottom-color: var(--gb-action-line, rgba(224, 202, 174, .34));
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__badge {
  font-size: 12px; /* was 11px, under the site's 12px text minimum */
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__body strong {
  transition: color .2s ease; /* Taste addition: cream -> gold on hover, synced with the arrow/hairline */
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__card:hover .dm-native-cats__body strong {
  color: var(--dm-primary, #b89a5b);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__body small {
  /* Was 9px, floating with no anchor in a ~700px gap (default block/inline
     position inside a 1fr grid cell). Right-aligned so it sits immediately
     before the arrow, matching the approved composition. */
  font-size: 12px;
  color: #8f9189;
  text-align: right;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__card::after {
  transition: transform .2s ease;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__card:hover::after {
  transform: translateX(8px);
}

/*
 * 目的から選ぶ — INDEX-PLATE (2026-08-22, Fable-approved "B improved").
 * `layout_mode: "index-plate"` is a new pattern-level value (cards.json);
 * this is its Green-Badger-only styling, same convention as the mode-list
 * block above — `patterns/cards.css` stays untouched. Desktop only
 * (>=1025px, per the approved composition spec); <=1024px is intentionally
 * left to a graceful, unstyled fallback for BUILDER-B's mobile pass — see
 * the safety-net rule at the bottom of this block.
 *
 * Vocabulary reused verbatim from CONTROL THE HUNGER's `.dm-cbx-plate`
 * (same section, a few hundred lines up): #0b0b0a / #b89a5b / #f4ecdc,
 * 1px hairlines, radius 0, no shadow/glow.
 *
 * Structure: the row (`.dm-native-cats__card`, an <a>) is the ONLY link —
 * every row carries its own `.dm-native-cats__plate` nested INSIDE that
 * same <a> (PHP, class-duck-mark-section-renderers.php), so "詳細を見る" is
 * plain styled text, never a nested anchor. Only the row whose
 * `[data-active="true"]` matches shows its plate; PHP sets row 0 active on
 * first render so the plate is never empty on load.
 *
 * BUILDER-B HANDOFF: hover/focus/click only ever needs to move
 * `data-active="true"` from one `.dm-native-cats__card` to another inside
 * this same `.dm-native-cats__grid` — every visual consequence (oversized
 * number, seam line, dimmed siblings, plate swap) is pure CSS driven off
 * that one attribute, nothing else to wire up. Add the interaction rules
 * and the <=1024px composition in a new block; do not edit the rules below.
 */
@media (min-width: 1025px) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] {
    position: relative;
    display: grid;
    grid-template-columns: 42% 58%;
    max-width: none;
    width: 100%;
    padding-left: max(var(--gb-content-gutter, 24px), calc((100vw - var(--gb-content-max, 1240px)) / 2));
    padding-right: 0;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__header,
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__grid {
    grid-column: 1;
    padding-right: clamp(24px, 4vw, 56px);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__grid {
    display: block;
    border-top: 1px solid rgba(244, 236, 220, .16);
    /* The site's entrance-motion system tags this element
       [data-dm-motion-item] and its CSS sets will-change:opacity,transform,
       clip-path — which (per spec) makes IT the containing block for any
       absolutely positioned descendant, trapping the plate inside the
       narrow row column instead of the section's own 58% column. Purely a
       paint-performance hint; removing it does not touch the opacity/
       transform transition the motion system actually animates, so the
       entrance animation is unaffected. */
    will-change: auto;
  }
  /* rows */
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card {
    /* Breaks out of the shared image-card base (patterns/cards.css): that
       rule's position:relative + transform:translateZ(0) each create a
       containing block, which would trap the plate's position:absolute
       inside this row instead of letting it reach the section's own 58%
       column — and overflow:hidden there would clip the oversized number's
       overflow into the seam. All three are neutralised here on purpose. */
    position: static;
    transform: none;
    overflow: visible;
    isolation: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 24px;
    min-height: 120px;
    padding-inline: 4px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(244, 236, 220, .16);
    box-shadow: none;
    background: transparent;
    color: var(--dm-text, inherit);
    opacity: .35;
    transition: opacity .3s cubic-bezier(.22, 1, .36, 1);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card[data-active="true"] {
    opacity: 1;
  }
  /* The shared card base (patterns/cards.css) also ships a generic
     `[data-hover-raise=true] .dm-native-cats__card:hover{transform:translateY(-5px)}`
     rule, and this section renders `data-hover-raise="true"` by default
     (no explicit hover_raise setting on the find-your-mode preset). Its
     selector out-specifies the `transform:none` reset above, so on hover
     the row itself (and, since a transformed element becomes the
     containing block for absolutely-positioned descendants, the active
     row's plate nested inside it) lifts 5px — pushing the gold hairline
     out of alignment with the divider and trapping the plate/number
     overflow inside the row's bounds instead of the section's 58%
     column. Re-neutralised here at matching specificity. */
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"][data-hover-raise="true"] .dm-native-cats__card:hover {
    transform: none;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__body {
    position: static;
    display: contents;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__badge {
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: center;
    min-width: 64px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: #b89a5b;
    font-family: var(--dm-editorial-serif-font, 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    /* deliberately untransitioned: animating the active size jump reads
       as zoom, and this section's motion spec forbids scale. */
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__body strong {
    grid-row: 1;
    grid-column: 2;
    font-family: var(--dm-font-display, inherit);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #f4ecdc;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__body small {
    grid-row: 2;
    grid-column: 2;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(244, 236, 220, .55);
  }
  /* active row: the number breaks scale and physically overflows past the
     LEFT column edge — that overflow IS the seam into the plate. */
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card[data-active="true"] .dm-native-cats__badge {
    position: relative;
    z-index: 3;
    font-size: clamp(96px, 11vw, 180px);
    letter-spacing: -.02em;
  }
  /* the seam: one hairline extending from the active number into the
     plate frame — a literal line joining the two halves, not two borders
     that merely face each other. */
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card[data-active="true"] .dm-native-cats__badge::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    /* Reaches across the LEFT column's own dead space AND the 42%/58%
       column gap to land inside the plate frame — measured live at 1440
       (~461px from the number's right edge to the frame's left border);
       vw-scaled since the gap itself is percentage-driven (42%/58% split),
       not a fixed distance. */
    width: 32vw;
    height: 1px;
    background: #b89a5b;
  }
  /* the plate — hidden unless its own row is the active one. */
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate {
    display: none;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card[data-active="true"] .dm-native-cats__plate {
    display: block;
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 42%;
    right: 0;
    overflow: hidden; /* keeps the oversized watermark from bleeding past the plate into BEST SELLERS below */
    pointer-events: none; /* the row <a> is already the whole click target */
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-watermark {
    position: absolute;
    right: 40px;
    bottom: -.08em;
    font-family: var(--dm-editorial-serif-font, 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
    font-size: clamp(220px, 20vw, 340px);
    line-height: .8;
    color: #b89a5b;
    opacity: .06;
    user-select: none;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-frame {
    position: absolute;
    inset: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 32px;
    border: 1px solid #b89a5b;
  }
  /* no product image saved for this item yet (see BUILDER-A report) — the
     frame collapses to one centered text column instead of leaving a
     visibly empty photo slot. */
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-frame:not(:has(.dm-native-cats__plate-media)) {
    grid-template-columns: 1fr;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-frame:not(:has(.dm-native-cats__plate-media)) .dm-native-cats__plate-body {
    padding: 40px;
    text-align: center;
    align-items: center;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-media {
    height: 100%;
    overflow: hidden;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 40px 40px 40px 0;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-body strong {
    font-family: var(--dm-font-display, inherit);
    font-size: 26px;
    font-weight: 700;
    color: #f4ecdc;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-desc {
    font-size: 13px;
    letter-spacing: .04em;
    color: rgba(244, 236, 220, .6);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-price {
    font-family: var(--dm-editorial-serif-font, 'Cormorant Garamond', Georgia, serif);
    font-size: 22px;
    color: #b89a5b;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-more {
    margin-top: 8px;
    color: #f4ecdc;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
/*
 * 目的から選ぶ — INDEX-PLATE interaction + <=1024px composition (2026-08-22,
 * BUILDER-B). Replaces the old safety-net block.
 *
 * INTERACTION: `[data-active="true"]` (not `:hover`) drives every visual
 * consequence in the desktop block above, so hover/focus/click all move
 * through the same tiny JS in assets/js/patterns.js (indexPlateSelector) —
 * mouseenter and focus both call activate(), so a keyboard Tab produces the
 * exact same number/seam/plate swap a mouse hover does, and a mouse click
 * on an inactive row navigates immediately (hover already showed its plate
 * first). Touch is the one place activation and navigation are NOT the same
 * gesture: the script only preventDefaults a click on an inactive row when
 * `(hover: none)` matches, so a phone's first tap previews and its second
 * tap (or a tap on the now-active plate's 詳細を見る) goes through.
 *
 * FOCUS-VISIBLE: unscoped by width — a gold outline replacement for
 * whatever outline:auto would otherwise draw, on any input device.
 */
body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card:focus-visible {
  outline: 2px solid #b89a5b;
  outline-offset: 4px;
}

/* STATE-CHANGE MOTION: restrained fallback for wide layouts. Mobile uses a
   true two-layer crossfade below so the outgoing and incoming plates overlap
   instead of producing a display:none -> flash -> display:block cut. */
body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card[data-active="true"] .dm-native-cats__plate {
  animation: gb-mode-plate-in 520ms cubic-bezier(.37, 0, .63, 1) both;
}
@keyframes gb-mode-plate-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* REDUCED MOTION: the desktop row-opacity crossfade and the shared plate
   fade-in — zeroed so `data-active` still flips instantly. */
@media (prefers-reduced-motion: reduce) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card,
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card[data-active="true"] .dm-native-cats__plate {
    transition: none;
    animation: none;
  }
}

/*
 * <=1024px COMPOSITION: product first, selector list second — not the
 * desktop two-column layout shrunk down.
 *
 * First pass here used `display:contents` on `.dm-native-cats__card` (the
 * `<a>`) to flatten it and reorder plate-before-body across rows. Reverted:
 * `display:contents` on an interactive element drops it from Chrome's
 * accessibility tree (verified live — the three rows lost their link role
 * entirely), so it cannot be used on the anchor itself, only on a
 * non-interactive wrapper.
 *
 * Instead this reuses the desktop block's OWN technique — the RIGHT plate
 * lives nested inside whichever row is active, and gets pulled out of that
 * row's box via `position:absolute` against a positioned ancestor — just
 * rotated: desktop anchors it to the SECTION and offsets it sideways (42%),
 * this anchors it to `.dm-native-cats__grid` and pins it to the top, with
 * `.dm-native-cats__grid`'s own `padding-top` reserving the vertical space
 * for it (so the row list starts right below, never overlapped). Every row
 * anchor keeps its normal box (no `display:contents` anywhere in this
 * block), so its link role and accessible name are untouched.
 *
 * The reserved space is measured, not guessed — the plate's text (price,
 * eyebrow) wraps differently per item, so a fixed padding-top would either
 * clip a longer plate or leave a gap under a shorter one. `indexPlateSelectors`
 * (assets/js/patterns.js) sets `--dm-plate-space` to the active plate's own
 * measured height on load, on every activation, and on resize; the value
 * below is only the pre-JS fallback for first paint.
 */
@media (max-width: 1024px) {
  /* GREEN BADGER native-cats — mobile/tablet motion tune.
     The generic !important entrance block above otherwise overrides the JS
     preset normalization (including its duration/easing/stagger). Keep the
     entire section moving as one calm mechanism: tiny rise, long glide, no
     per-item popping. */
  .dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion]:has(.dm-native-cats):not(.is-dm-revealed),
  .dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion-preset]:has(.dm-native-cats):not(.is-dm-revealed):not([data-dm-motion-effect="none"]),
  .dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion-preset]:has(.dm-native-cats):not(.is-dm-revealed) [data-dm-motion-item] {
    transform: translate3d(0, 4px, 0) !important;
  }
  .dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion]:has(.dm-native-cats),
  .dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion-preset]:has(.dm-native-cats),
  .dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion-preset]:has(.dm-native-cats) [data-dm-motion-item] {
    transition-duration: 900ms !important;
    transition-timing-function: cubic-bezier(.37, 0, .63, 1) !important;
    transition-delay: 0ms !important;
  }
  .dm-motion-ready body.dm-pack-green-badger .dm-section[data-dm-motion-preset]:has(.dm-native-cats) [data-dm-motion-item]:nth-child(n) {
    transition-delay: 0ms !important;
  }

  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] {
    display: block;
    padding-inline: var(--gb-content-gutter, 24px);
    padding-top: clamp(56px, 12vw, 80px);
    padding-bottom: var(--gb-space-medium, 64px);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__header {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(244, 236, 220, .16);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__grid {
    display: block;
    position: relative;
    padding-top: var(--dm-plate-space, 440px);
    /* patterns.js updates --dm-plate-space when the active product changes.
       Animate that layout hand-off instead of letting the selector list jump. */
    transition: padding-top 760ms cubic-bezier(.37, 0, .63, 1);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card {
    /* Same neutralising as the desktop card override above (position:static
       breaks the containing-block chain so the plate's position:absolute
       reaches `.dm-native-cats__grid`, not this row) — display:block instead
       of display:grid since a row here is one full-width tap target with
       its own internal grid on `.dm-native-cats__body`, not the row itself. */
    position: static;
    display: block;
    min-height: auto;
    overflow: visible;
    isolation: auto;
    transform: none;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: var(--dm-text, inherit);
  }

  /* ---- the active plate (product first) ---- */
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate {
    /* Keep every plate mounted in the same fixed stage. That lets the old
       plate fade out while the new one fades in — no display toggle, no
       one-frame flash, no visual jump. */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 3;
    animation: none !important;
    transition:
      opacity 760ms cubic-bezier(.37, 0, .63, 1),
      visibility 0s linear 760ms;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card[data-active="true"] .dm-native-cats__plate {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 4;
    animation: none !important;
    transition:
      opacity 760ms cubic-bezier(.37, 0, .63, 1),
      visibility 0s linear 0s;
  }
  /* the oversized watermark exists only to meet desktop's seam line; there
     is no seam here, so it is pure decoration and is dropped. */
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-watermark {
    display: none;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-frame {
    position: static;
    inset: auto;
    display: block;
    border: 1px solid #b89a5b;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-media {
    display: block;
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-body {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 8px;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-body strong {
    font-family: var(--dm-font-display, inherit);
    font-size: 22px;
    font-weight: 700;
    color: #f4ecdc;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-desc {
    font-size: 12px;
    letter-spacing: .04em;
    color: rgba(244, 236, 220, .6);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-price {
    font-family: var(--dm-editorial-serif-font, 'Cormorant Garamond', Georgia, serif);
    font-size: 20px;
    color: #b89a5b;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__plate-more {
    margin-top: 4px;
    color: #f4ecdc;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ---- the ENERGY/DEEP/EXTREME selector list, below the reserved plate space ---- */
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__body {
    position: static;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 16px;
    min-height: 56px;
    padding-block: 14px;
    border-bottom: 1px solid rgba(244, 236, 220, .16);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__badge {
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: center;
    min-width: 32px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: rgba(244, 236, 220, .4);
    font-family: var(--dm-editorial-serif-font, 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
    transition: color 700ms cubic-bezier(.37, 0, .63, 1);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__body strong {
    grid-row: 1;
    grid-column: 2;
    font-family: var(--dm-font-display, inherit);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: rgba(244, 236, 220, .55);
    transition: color 700ms cubic-bezier(.37, 0, .63, 1);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__body small {
    grid-row: 2;
    grid-column: 2;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(244, 236, 220, .35);
    transition: color 700ms cubic-bezier(.37, 0, .63, 1);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card[data-active="true"] .dm-native-cats__badge,
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card[data-active="true"] .dm-native-cats__body strong {
    color: #b89a5b;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="index-plate"] .dm-native-cats__card[data-active="true"] .dm-native-cats__body small {
    color: rgba(244, 236, 220, .55);
  }
}

/*
 * 目的から選ぶ — MODE-REVEAL (2026-08-24, revised). Same accordion shell as
 * before: 3 typographic cards (#0b0b0a / #b89a5b / #f4ecdc, 1px hairlines,
 * radius 0, no image on the collapsed row itself), a card's own trigger
 * button expands its panel in place, reveal-in-place — never a navigating
 * click, no absolute-position plate. What CHANGED (this pass): the content
 * that renders inside the opened panel is now an image-first product card
 * (`.dm-mode-products__card`, see below) instead of a small thumbnail row.
 */
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__grid {
  display: grid;
  grid-template-columns: repeat(var(--dm-ncat-cols, 3), 1fr);
  gap: var(--dm-ncat-gap, 16px);
  align-items: start;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card {
  /* Overrides patterns/cards.css's generic overlay-card box (absolute body,
     fixed min-height, overflow:hidden) — mode-reveal's card is normal
     document flow so its own trigger button + panel can grow it in place. */
  position: static;
  display: block;
  min-height: 0;
  overflow: visible;
  border: 1px solid rgba(244, 236, 220, .16);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: border-color .2s ease;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-trigger.dm-native-cats__body {
  position: static;
  inset: auto;
  z-index: auto;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card:hover,
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-open="true"] {
  border-color: rgba(184, 154, 91, .5);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-trigger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 28px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__badge {
  align-self: flex-start;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(244, 236, 220, .5);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__body strong {
  display: block;
  margin-top: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #f4ecdc;
  transition: color .2s ease;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card:hover .dm-native-cats__body strong,
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-open="true"] .dm-native-cats__body strong {
  color: #b89a5b;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__body small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .04em;
  color: #8f9189;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-icon {
  align-self: flex-end;
  margin-top: 18px;
  width: 20px;
  height: 20px;
  position: relative;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-icon::before,
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(244, 236, 220, .55);
  transition: transform 730ms cubic-bezier(.37, 0, .63, 1), background-color .2s ease;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-icon::before {
  width: 14px;
  height: 1px;
  transform: translate(-50%, -50%);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-icon::after {
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-open="true"] .dm-native-cats__reveal-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-open="true"] .dm-native-cats__reveal-icon::before,
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-open="true"] .dm-native-cats__reveal-icon::after {
  background: #b89a5b;
}

/* The panel itself never leaves the DOM/a11y tree; it animates open via the
   0fr->1fr grid-template-rows technique (no JS height measuring, no
   max-height guess) with an inner overflow:hidden wrapper. The panel's own
   content cross-fades in/out DURING that same travel, not instantly, per
   this project's "glide, not pop" motion rule. */
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 730ms cubic-bezier(.37, 0, .63, 1);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-open="true"] .dm-native-cats__reveal-panel {
  grid-template-rows: 1fr;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-panel-inner {
  overflow: hidden;
  opacity: 0;
  border-top: 1px solid rgba(244, 236, 220, .12);
  transition: opacity 400ms cubic-bezier(.37, 0, .63, 1);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-open="true"] .dm-native-cats__reveal-panel-inner {
  opacity: 1;
  transition-delay: 220ms;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-empty {
  margin: 0;
  padding: 20px 24px 24px;
  font-size: 13px;
  color: rgba(244, 236, 220, .5);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-empty-link {
  display: inline-block;
  margin: 0 24px 24px;
  font-size: 13px;
  color: #b89a5b;
  text-decoration: none;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-trigger:focus-visible {
  outline: 2px solid #b89a5b;
  outline-offset: -4px;
}

/*
 * Image-first product card rendered INSIDE the opened panel (2026-08-24).
 * Large real product image, mode label, product name, tags, restrained
 * "商品を見る →" link — replaces the old small thumbnail+name+price row.
 * Dark surface behind the image (object-fit:contain) so poster-style
 * artwork with baked-in text is never cropped.
 */
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: #111110;
  overflow: hidden;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 700ms cubic-bezier(.37, 0, .63, 1);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__card:hover .dm-mode-products__media img {
  transform: scale(1.025);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 24px 24px;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__mode {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #b89a5b;
  text-transform: uppercase;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #f4ecdc;
  line-height: 1.2;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__tags {
  font-size: 12px;
  letter-spacing: .02em;
  color: #8f9189;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__stock {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(244, 236, 220, .55);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__link {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(244, 236, 220, .75);
  transition: color .25s ease;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__link span {
  display: inline-block;
  transition: transform 250ms cubic-bezier(.37, 0, .63, 1);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__card:hover .dm-mode-products__link {
  color: #b89a5b;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__card:hover .dm-mode-products__link span {
  transform: translateX(4px);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__card:focus-visible {
  outline: 2px solid #b89a5b;
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-panel,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-panel-inner,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-icon::before,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-icon::after,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__media img,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__link,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-mode-products__link span {
    transition: none;
  }
}
@media (max-width: 760px) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__grid {
    grid-template-columns: 1fr;
  }
}

/*
 * mode-reveal per-panel MOOD (2026-08-24, revised). Three cards, one
 * system — the distinction between ENERGY / DEEP / EXTREME is spacing,
 * scale and motion timing only (per-index selectors keyed to the fixed
 * 0/1/2 order the renderer already writes to data-index), never a new
 * visual effect. Same palette, same hairline, same "glide not pop"
 * cubic-bezier(.37,0,.63,1) family throughout; only duration/easing
 * numbers move. Continues onto the new image-first card inside the panel:
 * ENERGY keeps its tighter trigger rhythm AND a quicker image hover;
 * DEEP keeps its slower panel travel AND a slower image/link hover;
 * EXTREME keeps its widest product-media reveal AND the strongest hover
 * image scale.
 */
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="0"] .dm-native-cats__reveal-trigger {
  padding: 22px 20px;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="0"] .dm-native-cats__reveal-panel {
  transition: grid-template-rows 700ms cubic-bezier(.45, 0, .55, 1);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="0"] .dm-mode-products__media img {
  transition-duration: 620ms;
  filter: contrast(1.06) saturate(1.07);
}

body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-native-cats__reveal-trigger {
  padding: 30px 26px;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-native-cats__body strong {
  font-size: 19px;
  font-weight: 700;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-native-cats__reveal-panel {
  transition: grid-template-rows 760ms cubic-bezier(.37, 0, .63, 1);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-mode-products__media img {
  transition-duration: 760ms;
  filter: brightness(.91);
}
/* DEEP's meta (name/tags/link) settles in only after the artwork has
   already faded in, rather than the two crossfading together like
   ENERGY/EXTREME. */
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-native-cats__reveal-panel-inner {
  transition: none;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-mode-products__media {
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.37, 0, .63, 1);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"][data-open="true"] .dm-mode-products__media {
  opacity: 1;
  transition-delay: 260ms;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-mode-products__body {
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.37, 0, .63, 1);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"][data-open="true"] .dm-mode-products__body {
  opacity: 1;
  transition-delay: 520ms;
}

body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="2"] .dm-native-cats__reveal-panel {
  transition: grid-template-rows 730ms cubic-bezier(.37, 0, .63, 1), transform 730ms cubic-bezier(.37, 0, .63, 1);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="2"] .dm-mode-products__media img {
  transition-duration: 730ms;
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="2"] .dm-mode-products__card:hover .dm-mode-products__media img {
  transform: scale(1.04);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="2"] .dm-native-cats__reveal-panel-inner {
  transform: scale(.97);
  transform-origin: top center;
  transition: opacity 400ms cubic-bezier(.37, 0, .63, 1), transform 730ms cubic-bezier(.37, 0, .63, 1);
}
body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="2"][data-open="true"] .dm-native-cats__reveal-panel-inner {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-mode-products__media,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-mode-products__body,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="2"] .dm-native-cats__reveal-panel-inner {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ------------------------------------------------------------------
 * paper-button — the ONE shared CTA component (Fable 5 final directive §6).
 *
 * Declared exactly once, here. `.dm-paper-button` is the explicit generic
 * class any pack may put on a link; the Green-Badger-scoped selectors in the
 * same list apply the identical rules to the CTA classes that already exist
 * in the shared renderers (hero solid CTA, section action / View All /
 * campaign CTA, Product Theater CTA, membership CTA, header SHOP NOW) —
 * mapping by selector instead of markup keeps every other pack's buttons
 * untouched and copies zero CSS into other files. Shape, clip-path, grain
 * and hover are fixed; ONLY --paper and --ink vary per variant, and where a
 * section already has admin colour fields those feed the two tokens (see
 * the variant block below), so Preset / Asset Detail colour choices reach
 * the button without new schema.
 *
 * Deliberately NOT mapped (directive's exception list): carousel arrows
 * (.dm-coverflow__arrow), header icon actions, dots/pagination, chips.
 * ------------------------------------------------------------------ */
.dm-paper-button,
body.dm-pack-green-badger .dm-native-slider__cta--solid,
body.dm-pack-green-badger .dm-section__action,
body.dm-pack-green-badger .dm-coverflow__active-content-cta,
body.dm-pack-green-badger .dm-membership-banner__cta,
body.dm-pack-green-badger .dm-header-cta-link {
  --paper: #dec9a8;
  --ink: #16130e;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 172px;
  min-height: 54px;
  padding: 14px 26px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  clip-path: polygon(1% 3%,14% 1%,27% 2.5%,43% .8%,59% 2.2%,74% .8%,88% 2%,99% 1%,100% 24%,99% 48%,100% 72%,99% 98%,84% 99%,68% 97.8%,52% 99.5%,36% 98%,18% 100%,1% 98%,0 74%,1% 51%,0 26%);
  box-shadow: inset 0 0 0 1px rgba(48,37,20,.16), 0 8px 22px rgba(0,0,0,.28);
  transition: transform .2s ease, filter .2s ease;
}
/* Paper grain: two ultra-low-alpha ink layers over the sheet. Behind the
   label (z-index -1 inside the isolated stacking context). */
.dm-paper-button::before,
body.dm-pack-green-badger .dm-native-slider__cta--solid::before,
body.dm-pack-green-badger .dm-section__action::before,
body.dm-pack-green-badger .dm-coverflow__active-content-cta::before,
body.dm-pack-green-badger .dm-membership-banner__cta::before,
body.dm-pack-green-badger .dm-header-cta-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(40,30,14,.14), transparent 60%),
    radial-gradient(1px 1px at 34% 72%, rgba(40,30,14,.12), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 22%, rgba(40,30,14,.10), transparent 60%),
    radial-gradient(1px 1px at 78% 64%, rgba(40,30,14,.13), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 36%, rgba(40,30,14,.10), transparent 60%),
    repeating-linear-gradient(93deg, rgba(48,37,20,.05) 0 1px, transparent 1px 5px);
  pointer-events: none;
}
/* Aged-edge shading. */
.dm-paper-button::after,
body.dm-pack-green-badger .dm-native-slider__cta--solid::after,
body.dm-pack-green-badger .dm-section__action::after,
body.dm-pack-green-badger .dm-coverflow__active-content-cta::after,
body.dm-pack-green-badger .dm-membership-banner__cta::after,
body.dm-pack-green-badger .dm-header-cta-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 34%, transparent 68%, rgba(48,37,20,.14));
  pointer-events: none;
}
.dm-paper-button:hover,
.dm-paper-button:focus-visible,
body.dm-pack-green-badger .dm-native-slider__cta--solid:hover,
body.dm-pack-green-badger .dm-native-slider__cta--solid:focus-visible,
body.dm-pack-green-badger .dm-section__action:hover,
body.dm-pack-green-badger .dm-section__action:focus-visible,
body.dm-pack-green-badger .dm-coverflow__active-content-cta:hover,
body.dm-pack-green-badger .dm-coverflow__active-content-cta:focus-visible,
body.dm-pack-green-badger .dm-membership-banner__cta:hover,
body.dm-pack-green-badger .dm-membership-banner__cta:focus-visible,
body.dm-pack-green-badger .dm-header-cta-link:hover,
body.dm-pack-green-badger .dm-header-cta-link:focus-visible {
  /* !important because the section motion engine leaves an inline
     `transform` on elements it staggered in, and an inline value beats any
     selector — verified: filter from this same rule applied while transform
     stayed "none". Hover/active only, so entrance motion is untouched. */
  transform: translateY(-2px) !important;
  filter: brightness(1.04);
}
.dm-paper-button:active,
body.dm-pack-green-badger .dm-native-slider__cta--solid:active,
body.dm-pack-green-badger .dm-section__action:active,
body.dm-pack-green-badger .dm-coverflow__active-content-cta:active,
body.dm-pack-green-badger .dm-membership-banner__cta:active,
body.dm-pack-green-badger .dm-header-cta-link:active {
  transform: translateY(0) scale(.985) !important;
  filter: brightness(.98);
}

/* Variants: only --paper / --ink move. Where a section already exposes
   admin colour fields, those feed the tokens so Preset / Asset Detail
   choices reach the button. */
.dm-paper-button--gold { --paper: #c9a85f; --ink: #0b0c0a; }
.dm-paper-button--dark { --paper: #161713; --ink: #f4ecdc; }
.dm-paper-button--lime { --paper: #9ee800; --ink: #090b08; }
body.dm-pack-green-badger .dm-coverflow__active-content-cta {
  --paper: var(--cfs-btn-bg, #dec9a8);
  --ink: var(--cfs-btn-text, #16130e);
}
body.dm-pack-green-badger .dm-native-slider__cta--solid {
  --paper: var(--dm-slider-cta-color, #dec9a8);
  --ink: var(--dm-on-primary, #16130e);
}
/* Campaign's solid action reads the shared primary pair (Pack tokens). */
body.dm-pack-green-badger .dm-section__action--solid {
  --paper: var(--dm-primary, #b89a5b);
  --ink: var(--dm-on-primary, #0b0c0a);
}
/* P1-A (2026-08-22): membership JOIN retired from --gb-action-paper cream to
   the gold PRIMARY fill — one filled colour on the page, not two. */
body.dm-pack-green-badger .dm-membership-banner__cta {
  --paper: var(--dm-primary, #b89a5b);
  --ink: var(--dm-on-primary, #0b0c0a);
}
/* Header SHOP NOW: gold variant, Green Badger front page only. The extra
   .main-header-menu > .menu-item hops are pure specificity ballast —
   duck-mark-fruitera-home forces `body .main-header-menu > .menu-item >
   .menu-link { min-height:var(--fr-header-h)!important; padding:0!important;
   background:transparent!important }` on every header menu link, which is
   (0,3,1) and silently beat the plain (0,2,1) mapping (verified: computed
   background transparent, min-height 104px). Same properties re-asserted
   here at (0,4,1) with !important win in both cascade fights. */
body.dm-pack-green-badger .main-header-menu > .menu-item > .dm-header-cta-link,
body.dm-pack-green-badger .dm-header-cta-link {
  --paper: var(--gb-action-gold, #b89a5b); /* P1-A: was hardcoded #c9a85f */
  --ink: #0b0c0a;
  background: var(--paper) !important;
  color: var(--ink) !important;
  min-width: 0;
  min-height: 46px !important;
  padding: 10px 22px !important;
}

/* ------------------------------------------------------------------
 * Membership — premium signup block (Fable 5 final directive §8).
 *
 * The renderer's four zones (cta / copy / slogan / badge) are kept — every
 * string stays an admin-editable content slot — but the thin strip is
 * re-composed into a stacked block: big display title (copy line 1),
 * supporting body (copy line 2), the three slogan lines as a value-prop
 * row above a divider, the CTA as a large paper button, badge art to the
 * right. Scoped to [data-tone="dark"] inside the Green Badger body class,
 * so the pattern's paper default and every other pack are untouched.
 * ------------------------------------------------------------------ */
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy   badge"
    "props  badge"
    "cta    badge";
  align-items: start;
  column-gap: clamp(32px, 5vw, 88px);
  row-gap: 0;
  width: min(100% , var(--gb-content-max, 1688px));
  margin-inline: auto;
  min-height: 0;
  /* Desktop rhythm pass (2026-08-22): vertical on the shared medium step
     (was 57.6px at 1440), horizontal on the page's content start line so the
     JOIN CTA and copy sit exactly on the 58px baseline. ≤780px keeps its own
     padding below. */
  padding: var(--gb-space-medium, 64px) var(--gb-content-gutter, 28px);
  background: #11130f;
  border-top: 1px solid rgba(184,154,91,.55);
}
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__copy { grid-area: copy; }
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__slogan { grid-area: props; }
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__cta { grid-area: cta; justify-self: start; }
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__badge { grid-area: badge; align-self: center; }

body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__copy p {
  margin: 0;
}
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__copy p:first-child {
  font-family: var(--dm-font-display, inherit);
  font-size: var(--gb-title-feature, 56px);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--dm-text, #f4ecdc);
}
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__copy p + p {
  margin-top: 18px;
  max-width: 560px;
  color: var(--dm-muted, rgba(244,236,220,.64));
  line-height: 1.7;
}
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__slogan {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin: 30px 0 34px;
  padding-top: 26px;
  border-top: 1px solid var(--dm-border, rgba(244,236,220,.14));
}
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__slogan span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--dm-text, #f4ecdc);
}
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__slogan span::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--dm-primary, #d2b16e);
}
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__cta {
  min-height: 62px;
  padding: 16px 34px;
  font-size: 16px;
}
/* The strip's long drawn arrow belongs to the old one-line layout. */
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__arrow { display: none; }
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__cta-text {
  display: flex;
  gap: 8px;
}
/* The strip pattern gives the CTA lines their own 36px ivory display
   styling for the old one-line banner; inside a paper button the label
   reads in ink, at button scale. */
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__cta-line1,
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__cta-line2 {
  color: var(--ink, #16130e);
  font-family: var(--dm-font-display, inherit);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
}
body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__badge img {
  max-height: 132px;
  width: auto;
  opacity: .8;
}
@media (max-width: 780px) {
  body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "props" "cta";
    min-height: 0;
    text-align: left;
    padding: 38px 24px 30px;
  }
  body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__badge { display: none; }
  body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__cta { width: 100%; }
  /* Desktop type pass (2026-08-22): the title moved to the fixed 56px feature
     tier above; restore the old mobile computed size (clamp minimum was 44px)
     so the ≤780px layout is unchanged until the mobile pass. */
  body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__copy p:first-child {
    font-size: 44px;
  }
}

/* Footer closes the page quietly. The footer plugin remains fully editable;
   these are Pack tokens/geometry only, replacing the old neon strip and grid. */
body.dm-pack-green-badger .dm-site-footer {
  --dm-footer-accent: #b89a5b;
  --dm-footer-accent-rgb: 184,154,91;
  --dm-footer-line: #2a2c27;
  padding: 96px var(--dm-shell-gutter) 28px; /* P1-A: top 56→96, bottom unchanged */
  border-top: 1px solid rgba(184,154,91,.5);
  background: linear-gradient(180deg,#0b0d0b 0%,#070907 100%);
  box-shadow: none;
}
/* SECTION SPACING pass (2026-08-22): ENTER THE PACK→FOOTER was 300.7px
   (ENTER's own 203.7 + this 96px top) against the 64px reference — the
   largest boundary on the page. ENTER's own side is trimmed above
   (.dm-membership-banner); the remainder comes from here. Desktop-only. */
@media (min-width: 1025px) {
  body.dm-pack-green-badger .dm-site-footer {
    padding-top: 20px;
  }
}
body.dm-pack-green-badger .dm-site-footer::before { display: none; }
/* Footer hairline shimmer: a 1px gold sweep along the existing border-top,
   fired by patterns.js (IntersectionObserver) — once on entering the viewport,
   then rarely while it stays in view. Off-screen the class is absent, so no
   animation runs in the background. Doubled classes outrank the street-collage
   skin's own ::after (content:none at 0,3,2) — the body carries both skin and
   pack classes, and the pack owns the footer look. */
body.dm-pack-green-badger .dm-site-footer { position: relative; }
body.dm-pack-green-badger.dm-pack-green-badger .dm-site-footer.dm-site-footer::after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(184,154,91,.9) 50%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: -80% 0;
  opacity: 0;
}
body.dm-pack-green-badger.dm-pack-green-badger .dm-site-footer.dm-footer-shimmer--sweep::after {
  animation: dm-footer-shimmer 1.8s ease-in-out 1;
}
@keyframes dm-footer-shimmer {
  0%   { opacity: 1; background-position: -80% 0; }
  100% { opacity: 1; background-position: 180% 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.dm-pack-green-badger.dm-pack-green-badger .dm-site-footer.dm-site-footer::after { display: none; }
}
body.dm-pack-green-badger .dm-site-footer__brand::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  background: url("../seed/green-badger/logo.png") center / contain no-repeat;
}
/* The footer plugin centers the brand column under its mobile_breakpoint
   (960 at current settings); the fixed-width block ::before needs its own
   centering to follow the text. */
@media (max-width: 960px) {
  body.dm-pack-green-badger .dm-site-footer__brand::before {
    margin-inline: auto;
  }
}
body.dm-pack-green-badger .dm-site-footer__brand-title,
body.dm-pack-green-badger .dm-footer-column h2 {
  color: var(--dm-text,#f0eadc);
  font-family: var(--dm-font-display,inherit);
  text-shadow: none;
}
body.dm-pack-green-badger .dm-footer-column h2::after {
  background: #b89a5b;
  box-shadow: none;
}
body.dm-pack-green-badger .dm-footer-back-to-top {
  background: #11130f;
  color: #f0eadc;
  border: 1px solid rgba(184,154,91,.55);
  box-shadow: none;
}
/* P1-A item 5 correction (2026-08-22): #ast-scroll-top (Astra's own
   scroll-to-top, blue rgb(4,107,210)) is display:none only at rest —
   Astra's own JS reveals it after the visitor scrolls past a threshold, so
   the earlier check at scroll position 0 missed it. Confirmed live via
   elementFromPoint after scrolling. Hidden outright for the GB frontend so
   the custom gold .dm-footer-back-to-top above is the only one; !important
   because Astra's own script toggles an inline/utility visibility class on
   scroll. wp-admin is untouched (selector requires the frontend body class). */
body.dm-pack-green-badger #ast-scroll-top {
  display: none !important;
}

@media (max-width: 780px) {
  body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__header {
    display: block;
    padding-right: 0;
  }
  body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__actions {
    position: static;
    margin-top: 20px;
  }
  body.dm-pack-green-badger .dm-section--image-banner .dm-section__media {
    padding-inline: 24px;
  }
}

/* A stale global "street-collage" skin option (duck_mark_active_skin)
 * leaves body.dm-skin-street-collage attached alongside this pack's own
 * class. Its overlay (skins/street-collage.css:133-137) hardcodes the
 * announcement bar to violet with a 2px black underline, beating this
 * preset's own --dm-header-announcement-bg (#0d100e). The desktop-only
 * neutraliser below (inside the 1025px block a few lines down) fixed
 * this on desktop but was never extended to mobile/tablet, so the
 * violet skin color was still winning under 1025px — this unscoped
 * copy applies the same admin-saved Green Badger colors at every
 * width, scoped to this pack only, same as the desktop-only original.
 */
body.dm-pack-green-badger.dm-skin-street-collage .dm-header-announcement {
  background: var(--dm-header-announcement-bg, #0d100e) !important;
  color: var(--dm-header-announcement-text, #f4ecdc) !important;
  border-bottom: none !important;
}
body.dm-pack-green-badger.dm-skin-street-collage .dm-header-announcement a {
  color: var(--dm-header-announcement-text, #f4ecdc) !important;
}

/* ==================================================================
 * FIRST SCREEN FINISHING — header + hero only (2026-08-22).
 *
 * Scope: everything below is inside `@media (min-width: 1025px)` and
 * scoped to this Pack's body class. No other section, no image, and no
 * tablet/mobile rendering is touched. The hero copy block keeps its
 * exact position — see the height-compensation note on __content.
 * ================================================================== */

@keyframes gb-header-settle {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Hero/header seam: 601-1024px gap (2026-08-24) ------------------
 * The 1025px+ pass below corrects the hero pull-up margin and adds
 * compensating padding to match the header's real rendered height, but
 * it only starts at 1025px. Astra's own nav breakpoint is 922px
 * (duck-mark-header-control.css:701) — the header already renders at
 * its full 106px desktop height from 922px up, identical to 1025px+,
 * so 922-1024px needs the exact same correction. Below that, 601-921px
 * has the header collapsed to its 65px hamburger-only height (measured
 * live), but the pull-up was still using the ~92-96px desktop-leaning
 * default from duck-mark-header-control.css:345 — pulling the hero
 * content 30px further under the header than the header actually
 * occupies, clipping the headline and colliding the eyebrow copy/stat
 * card with the header scrim. Two breakpoint-matched corrections below,
 * mirroring the 1025px+ pass with each range's real header height.
 */
@media (min-width: 922px) and (max-width: 1024px) {
  body.dm-pack-green-badger.dm-header-hero-overlap-enabled .entry-content.clear > .dm-page-assembly:first-child {
    margin-top: -106px;
  }
  body.dm-pack-green-badger.dm-header-hero-overlap-enabled .dm-section--hero .dm-native-slider__inner {
    padding-top: 156px;
  }
}
@media (min-width: 601px) and (max-width: 921px) {
  body.dm-pack-green-badger.dm-header-hero-overlap-enabled .entry-content.clear > .dm-page-assembly:first-child {
    margin-top: -65px;
  }
}

/*
 * Hero responsive-image correction (2026-08-24). The old desktop-only
 * scale(1.38) was a one-asset visual hack from before Asset Intake owned
 * responsive derivatives. It zoomed every later Hero image after Smart Fit
 * had already prepared it, re-cropping the badger's head and the product in
 * the browser. Responsive framing now belongs to Asset Intake + object-fit;
 * the renderer must display that result without a second zoom layer.
 */
@media (min-width: 1025px) {
  body.dm-pack-green-badger .dm-section--hero .dm-native-slider__image {
    transform: none;
    transform-origin: center;
  }
}

@media (min-width: 1025px) {

  /* --- Header: one scene with the hero, not a bar laid on top ------
   *
   * duck-mark-header-control paints the whole header as one flat
   * color-mix panel at --dm-header-bg-opacity (.68 here) plus a 16px
   * blur, and draws a gold hairline all the way across. Over a
   * photographic hero that reads as "top bar + image", which is the
   * seam this pass removes: at rest the header becomes a soft scrim
   * that fades out before it reaches the hero's headline, and the
   * hairline is held back until there is content to separate.
   * Overriding at (0,3,1) with !important because those plugin rules
   * are themselves !important at (0,2,1).
   *
   * The scrim used to stop exactly at header height (106px) with a
   * blur(3px) layer on top, which read as a hard bar laid over the
   * image at the header/hero seam. The blur is dropped — at 3px it
   * added a visible edge without doing anything a frosted panel needs.
   * The fade itself is moved onto a ::before taller than the header's
   * own box (260px vs. the header's 106px) so it dissolves into the
   * hero instead of stopping dead at the header's bottom edge; the
   * header itself has default overflow, so the extra height is free to
   * show. Same -1 stacking trick .site-header::after already uses
   * below, so it sits behind the header's own content but above the
   * hero image.
   */
  body.dm-pack-green-badger.dm-header-transparent-enabled .site-header,
  body.dm-pack-green-badger.dm-header-transparent-enabled #masthead {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.dm-pack-green-badger.dm-header-transparent-enabled .site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 260px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(7, 9, 7, .72) 0%,
        rgba(7, 9, 7, .30) 45%,
        rgba(7, 9, 7, 0) 100%);
  }
  /* --- Grey band at the header/hero seam (2026-08-22 round 2) -------
   *
   * The hero-overlap mechanic (duck-mark-header-control.css:344) pulls
   * the first section up under the header with
   * `margin-top: calc(-1 * var(--dm-header-height))`. --dm-header-height
   * is written from this preset's `header_height` field (96px) — but the
   * header's own rendered box is ~106px tall, because the Cormorant nav
   * row's line-height/padding exceed that 96px min-height. The 10px
   * shortfall left a sliver at the very top of the hero section that the
   * hero's own background never reached, so the only thing painting it
   * was the header's ::before scrim (above) over the page's cream body
   * background — an olive-cream band right under the announcement bar.
   * Confirmed live: forcing the ::before to an opaque fill covered the
   * band completely, and .dm-page-assembly's measured top (77.6px) sat
   * exactly 106 - 96 = 9.6px below the header's real top (68px). Fixed
   * by matching the pull-up margin to the header's real height instead
   * of the shared token, scoped to this pack so the mobile/tablet value
   * (still keyed to --dm-header-height-mobile) is untouched.
   */
  body.dm-pack-green-badger.dm-header-hero-overlap-enabled .entry-content.clear > .dm-page-assembly:first-child {
    margin-top: -106px;
  }

  /* The hero-overlap pull-up above seats the first hero slide's content
   * directly under the header, but the slide's own 64px padding-top
   * (patterns/slider.css:54) is shorter than the header's real 106px
   * box — the eyebrow line ("GREEN BADGER / SIGNATURE 01") lands
   * inside the header's footprint and the 72px logo mark paints over
   * its first characters at desktop widths. Scoped to the pack + this
   * mechanic only, on the hero section specifically, so other
   * .dm-native-slider uses elsewhere are untouched.
   */
  @media (min-width: 922px) {
    body.dm-pack-green-badger.dm-header-hero-overlap-enabled .dm-section--hero .dm-native-slider__inner {
      padding-top: 156px;
    }
  }

  /* --- Header rhythm + type (round 2) --------------------------------
   * Every menu-item — nav links, the three icon actions and the CTA —
   * sits in one flex row sharing a single `gap` (duck-mark-header-
   * control.css:397, 20px default reads 28px "menu_gap" here), so the
   * only way to give the nav row, the icon cluster and the CTA their
   * own distinct spacing is to raise the shared gap to the nav-item
   * value (32px) and pull the three exceptions back to their own
   * target with a per-item margin-left. Specificity matched to the
   * plugin's own (0,2,1) !important rules the same way round 1 did.
   */
  body.dm-pack-green-badger.dm-header-skin-enabled .main-header-menu {
    gap: 32px !important;
  }
  body.dm-pack-green-badger.dm-header-skin-enabled .main-header-menu > .dm-header-action-search {
    margin-left: 24px !important; /* 32px gap + 24px = 56px from last nav item */
  }
  body.dm-pack-green-badger.dm-header-skin-enabled .main-header-menu > .dm-header-action-account,
  body.dm-pack-green-badger.dm-header-skin-enabled .main-header-menu > .dm-header-action-cart {
    margin-left: -8px !important; /* 32px gap - 8px = 24px between icons */
  }
  body.dm-pack-green-badger.dm-header-skin-enabled .main-header-menu > .dm-header-action-cta {
    margin-left: 8px !important; /* 32px gap + 8px = 40px to SHOP NOW */
  }
  /* Nav type: same Cormorant Garamond family, this pack's own weight/
     size/tracking instead of the plugin preset's 14px/600/.14em. */
  body.dm-pack-green-badger.dm-header-skin-enabled .site-header a,
  body.dm-pack-green-badger.dm-header-skin-enabled .main-header-menu a,
  body.dm-pack-green-badger.dm-header-skin-enabled .ast-builder-menu-1 .menu-item > .menu-link {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .18em !important;
  }
  /* Logo left edge to the header content grid: aligned to the page's one
     content start line (P1-A, 2026-08-22): gutter 60 everywhere, header
     included. Base inset is 40px; +20px lands the logo at 60. The prior
     21px value here never actually rendered — duck-mark-fruitera-home's
     unscoped `body .site-branding{margin-left:0!important}` (equal
     specificity, later in cascade) was silently winning, so this needs
     its own !important to answer in kind. */
  body.dm-pack-green-badger.dm-header-skin-enabled .site-branding,
  body.dm-pack-green-badger.dm-header-skin-enabled .ast-site-identity {
    margin-left: 20px !important;
  }
  /* SHOP NOW right edge: same 40→60 move, mirrored. The CTA's <li> is the
     last flex child in the header's right-hand row, so a margin here moves
     just the CTA without touching nav-item/icon gaps above. */
  body.dm-pack-green-badger.dm-header-skin-enabled .main-header-menu > .dm-header-action-cta {
    /* Measured, not derived: the header row's right edge does not mirror
       the left (unlike the left inset, which is a clean 40px this pack can
       reason about), so this is tuned directly to the rendered position
       rather than assumed symmetric. */
    margin-right: 5px !important;
  }
  /* Content gutter 60 (P1-A, 2026-08-22): every consumer reads this pair of
     tokens through var(), so overriding them once here reaches the hero
     copy inset, every section title/rail, the Product Theater, membership
     and the footer without touching a single consumer rule. Desktop only —
     tablet/mobile keep the existing clamp(20px,4vw,72px). Specificity has
     to match body.dm-site-shell-enabled.dm-pack-green-badger (line ~156),
     which redeclares --dm-shell-gutter at (0,2,1) — a single-class override
     here would lose to it regardless of source order. */
  body.dm-pack-green-badger,
  body.dm-site-shell-enabled.dm-pack-green-badger {
    --dm-shell-gutter: 60px;
    --gb-content-gutter: 60px;
  }

  /* A stale global "street-collage" skin option (duck_mark_active_skin)
   * leaves body.dm-skin-street-collage attached alongside this pack's own
   * class. Its overlay (skins/street-collage.css:133-137) hardcodes the
   * announcement bar to violet with a 2px black underline, beating this
   * preset's own --dm-header-announcement-bg (#0d100e) because that
   * stylesheet is enqueued after this one. Not a GB-side mapping bug —
   * the skin option is a separate, pack-independent site setting — so
   * the clash is neutralised here instead, scoped to this pack only.
   */
  body.dm-pack-green-badger.dm-skin-street-collage .dm-header-announcement {
    background: var(--dm-header-announcement-bg, #0d100e) !important;
    color: var(--dm-header-announcement-text, #f4ecdc) !important;
    border-bottom: none !important;
  }
  body.dm-pack-green-badger.dm-skin-street-collage .dm-header-announcement a {
    color: var(--dm-header-announcement-text, #f4ecdc) !important;
  }

  /* The preset's logo_height (40px) renders the square badge mark too
   * small to hold its own next to the 12px caps nav and the 46px SHOP
   * NOW — tested at 52/56/60px live against both; 56px is the point
   * where the mark reads as a real anchor without out-weighing the nav
   * row or the header's 106px height. The mark itself (lime green +
   * cream + black, assets/seed/green-badger/logo.png) is left alone: a
   * grayscale/sepia filter was tried and it muddies the linework rather
   * than reading as clean cream, so only size changes here.
   */
  body.dm-pack-green-badger.dm-header-skin-enabled .site-branding img,
  body.dm-pack-green-badger.dm-header-skin-enabled .custom-logo-link img {
    max-height: 72px !important;
  }

  /* #masthead as well as .site-header: the theme's own dynamic CSS sets
     this border through an ID selector, which outranks any number of
     classes — the class-only form silently lost. */
  body.dm-pack-green-badger.dm-header-border-enabled .site-header,
  body.dm-pack-green-badger.dm-header-border-enabled #masthead,
  body.dm-pack-green-badger.dm-header-border-enabled .main-header-bar,
  body.dm-pack-green-badger.dm-header-border-enabled .ast-primary-header-bar {
    border-bottom-color: transparent !important;
  }

  /*
   * Scrolled state: the same header, denser and calmer to read against
   * real content. The solid panel is a pseudo-element BEHIND the
   * header's own children (the sticky z-index already makes the header
   * a stacking context, so z-index:-1 stays inside it — the same
   * technique .dm-paper-button::before uses in this file), faded in by
   * a scroll-driven animation across the first 160px. No script is
   * added and nothing animates on the page itself; the two states
   * simply swap.
   */
  body.dm-pack-green-badger .site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(7, 9, 7, .94);
    border-bottom: 1px solid rgba(224, 202, 174, .16);
    opacity: 0;
    pointer-events: none;
  }
  @supports (animation-timeline: scroll()) {
    body.dm-pack-green-badger .site-header::after {
      animation: gb-header-settle linear both;
      animation-timeline: scroll(root);
      animation-range: 0 160px;
    }
  }
  /*
   * Engines without scroll-driven animations would otherwise be left
   * with a permanently near-transparent header over the whole page.
   * They get one settled header instead — the resting state is the
   * readable one, never the broken one.
   */
  @supports not (animation-timeline: scroll()) {
    body.dm-pack-green-badger .site-header::after { opacity: .88; }
  }

  /* Ambient hairline glint: a 1px gold sweep along the header's bottom
   * hairline. Lives on .main-header-bar::after because both of
   * .site-header's own pseudo-elements are taken (::before scrim,
   * ::after scroll-settle panel) — and the settle animation on ::after
   * uses animation-timeline: scroll(root), which this must never share
   * an element with. The bar's bottom edge sits 1px above the header's
   * hairline, hence bottom: -1px. Invisible at rest; one ~1.1s sweep
   * every 35s. */
  body.dm-pack-green-badger .site-header .main-header-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(184, 154, 91, .9), transparent);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: gb-hairline-glint 35s linear infinite;
  }
  @keyframes gb-hairline-glint {
    0%    { background-position: 200% 0; opacity: 0; }
    0.3%  { opacity: .9; }
    2.84% { opacity: .9; }
    3.14% { background-position: -100% 0; opacity: 0; }
    100%  { background-position: -100% 0; opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    body.dm-pack-green-badger .site-header .main-header-bar::after {
      animation: none;
      opacity: 0;
    }
  }

  /* --- Hero typography ---------------------------------------------
   *
   * Position, alignment, content and the image are untouched; this is
   * finishing only. Two things made the composition read as generated
   * rather than set: -.045em tracking, which pulls a Cormorant
   * Garamond's fine caps into each other at 92px, and a 64px gap
   * between the headline and the Japanese line, which left the copy
   * floating instead of supporting.
   */
  body.dm-pack-green-badger .dm-native-slider__title {
    letter-spacing: -.022em;
    line-height: .88;
    margin-bottom: 36px;
  }
  /* Italic caps carry a smaller left sidebearing than upright ones, so
     a shared box edge is not a shared optical edge. The accent line's
     own colour (patterns/slider.css:65, var(--dm-primary)) is the gold
     brand colour, which reads as a random highlight on a headline that
     otherwise never uses colour to carry meaning — italic is already
     doing that job. Matched back to the same cream as the other two
     lines; italic and the tighter margin stay. */
  body.dm-pack-green-badger .dm-native-slider__title-line--accent {
    margin-left: -.015em;
    color: #f4f1e8; /* P1-A: folded into --dm-text, was #f5ead9 */
  }
  /* The Japanese line becomes supporting copy: one step down in size,
     opened up in tracking and leading the way Japanese display copy
     wants, and held just under the headline's weight. Same cream, only
     quieter — no new colour. */
  body.dm-pack-green-badger .dm-native-slider__copy {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 2;
    letter-spacing: .08em;
    color: rgba(231, 220, 199, .80);
  }
  body.dm-pack-green-badger .dm-native-slider__cta {
    margin-top: 40px;
  }
  /*
   * The slide is a grid with align-items:center, so a shorter copy
   * block would re-centre and drift downward. The instruction is that
   * the block does not move, so the height the tightening gave back is
   * handed straight back as bottom padding — measured, not guessed:
   * the headline's top stays at the same y it had before this pass.
   */
  body.dm-pack-green-badger .dm-native-slider__content {
    padding-bottom: 29px;
  }

  /* --- CTA: a precise action, not a decorated object ----------------
   *
   * The shared paper-button gives every CTA a torn-paper clip-path,
   * two grain layers, an aged-edge gradient, an inset rim, a drop
   * shadow and a lift-on-hover. That material act is the loudest
   * template tell on the first screen. Stripped back to exactly what
   * an action needs: a flat rectangle, brand cream on the hero and
   * brand gold in the header, a wider and lighter label, and a hover
   * that changes state without moving.
   *
   * Deliberately scoped to the first screen's two buttons only — every
   * other section's CTA is out of this pass's scope and keeps the
   * paper treatment.
   */
  body.dm-pack-green-badger .dm-native-slider__cta--solid,
  body.dm-pack-green-badger .main-header-menu > .menu-item > .dm-header-cta-link,
  body.dm-pack-green-badger .dm-header-cta-link {
    clip-path: none;
    border-radius: 0;
    box-shadow: none;
    font-weight: 600;
    letter-spacing: .16em;
    transition: background-color .22s ease, color .22s ease;
  }
  body.dm-pack-green-badger .dm-native-slider__cta--solid::before,
  body.dm-pack-green-badger .dm-native-slider__cta--solid::after,
  body.dm-pack-green-badger .dm-header-cta-link::before,
  body.dm-pack-green-badger .dm-header-cta-link::after {
    display: none;
  }
  /* The hero action is the SECONDARY tier: the header's SHOP NOW is the
   * only filled/gold surface on the first screen, so this one drops the
   * cream box entirely — text on a gold hairline, structurally handled
   * by the GLOBAL ACTION LANGUAGE pass below (it now carries
   * .dm-native-slider__cta--solid as a SECONDARY action). Only the
   * hero-specific colour and the arrow motion live here: an arrow that
   * comes along for the ride already in the label ("詳しく見る →"). The
   * single space before the arrow is the only space character in the
   * label, so transitioning word-spacing on hover nudges just the arrow
   * without touching the Japanese glyphs before it or rewriting the
   * markup.
   */
  body.dm-pack-green-badger .dm-native-slider__cta--solid {
    color: #f4f1e8; /* P1-A: folded into --dm-text, was #f5ead9 */
    word-spacing: 0;
    transition: color .22s ease, border-color .22s ease, word-spacing .22s ease;
  }
  body.dm-pack-green-badger .main-header-menu > .menu-item > .dm-header-cta-link,
  body.dm-pack-green-badger .dm-header-cta-link {
    font-size: 12px;
    padding: 10px 24px !important;
    /* duck-mark-header-control writes this radius !important from its own
       token, so the token is the way in — declaring it on the element
       itself beats the inherited value without another !important. */
    --dm-header-cta-radius: 0px;
  }
  /* The component's hover lift is written !important (it has to beat the
     motion engine's inline transform), so stillness has to be too. The
     street-collage skin's leftover hover box-shadow (see the announcement
     fix above for why that skin class is still present) is cancelled the
     same way. */
  body.dm-pack-green-badger .dm-native-slider__cta--solid:hover,
  body.dm-pack-green-badger .dm-native-slider__cta--solid:focus-visible,
  body.dm-pack-green-badger .dm-native-slider__cta--solid:active,
  body.dm-pack-green-badger .dm-header-cta-link:hover,
  body.dm-pack-green-badger .dm-header-cta-link:focus-visible,
  body.dm-pack-green-badger .dm-header-cta-link:active {
    transform: none !important;
    filter: none;
    box-shadow: none !important;
  }
  body.dm-pack-green-badger .dm-native-slider__cta--solid:hover,
  body.dm-pack-green-badger .dm-native-slider__cta--solid:focus-visible {
    background: transparent;
    border-bottom-color: #f4f1e8; /* P1-A: folded into --dm-text, was #f5ead9 */
    word-spacing: 4px;
  }
  body.dm-pack-green-badger .main-header-menu > .menu-item > .dm-header-cta-link:hover,
  body.dm-pack-green-badger .main-header-menu > .menu-item > .dm-header-cta-link:focus-visible,
  body.dm-pack-green-badger .dm-header-cta-link:hover,
  body.dm-pack-green-badger .dm-header-cta-link:focus-visible {
    background: #d8b96e !important;
  }
}

/* ==================================================================
 * GLOBAL TYPE + ACTION LANGUAGE (2026-08-22).
 *
 * Applies the four roles and the two action tiers declared at the top
 * of this file to every desktop consumer on the Green Badger pack.
 * Everything is inside `@media (min-width: 1025px)` — mobile and
 * tablet render exactly as they did before this pass.
 *
 * Before this: 8 distinct action treatments (4 heights, 5 widths, 2
 * families, weights 600/800/900, 3 tracking values), 2 competing
 * eyebrow styles, Cormorant headings at weights 600/700/950, and a
 * product name at a computed 16.56px. After: 4 type roles, 2 action
 * tiers.
 * ================================================================== */

@media (min-width: 1025px) {

  /* --- A. DISPLAY ------------------------------------------------- */
  body.dm-pack-green-badger .dm-native-slider__title {
    font-weight: var(--gb-type-display-weight);
    letter-spacing: var(--gb-type-display-track);
    line-height: var(--gb-type-display-lh);
  }

  /* --- B. SECTION --------------------------------------------------
   * Four headings that were each set independently — the Product
   * Theater title alone ran at weight 700 with POSITIVE tracking while
   * its three siblings ran 600 with negative — now share one weight,
   * one track and one leading. Size still comes from the two-step
   * scale, so hierarchy is carried by size alone.
   */
  body.dm-pack-green-badger .dm-section__title,
  body.dm-pack-green-badger .dm-coverflow__intro h2,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] h2,
  body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__copy p:first-child {
    font-family: var(--dm-font-display, inherit);
    font-weight: var(--gb-type-section-weight);
    letter-spacing: var(--gb-type-section-track);
    line-height: var(--gb-type-section-lh);
  }

  /* --- C. BODY ------------------------------------------------------ */
  body.dm-pack-green-badger .dm-section__subtitle,
  /* :not() keeps the Product Theater's kicker out of BODY — it is a <p>
     inside the same intro block, and the descendant selector would
     otherwise outrank the eyebrow rule below on specificity. */
  body.dm-pack-green-badger .dm-coverflow__intro p:not(.dm-coverflow__eyebrow),
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-list"] .dm-native-cats__header p,
  body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__copy p + p,
  body.dm-pack-green-badger .dm-footer-column a,
  body.dm-pack-green-badger .dm-site-footer__brand-text {
    font-family: var(--dm-font-body, inherit);
    font-size: var(--gb-type-body-size);
    line-height: var(--gb-type-body-lh);
    letter-spacing: var(--gb-type-body-track);
    font-weight: 400;
  }

  /* --- D. UI: labels ------------------------------------------------
   * Navigation, every action label, eyebrows, product names, footer
   * column heads and the mode-list rows. One family, one weight, one
   * tracking logic, caps for Latin. Japanese falls through to Noto
   * Sans JP inside the same stack rather than to a system font.
   */
  body.dm-pack-green-badger .main-header-menu .menu-link,
  body.dm-pack-green-badger .dm-header-cta-link,
  body.dm-pack-green-badger .dm-native-slider__cta,
  body.dm-pack-green-badger .dm-section__action,
  body.dm-pack-green-badger .dm-coverflow__active-content-cta,
  body.dm-pack-green-badger .dm-membership-banner__cta,
  body.dm-pack-green-badger .dm-section__eyebrow,
  body.dm-pack-green-badger .dm-coverflow__eyebrow,
  body.dm-pack-green-badger .dm-section__item-title,
  body.dm-pack-green-badger .dm-footer-column h2,
  body.dm-pack-green-badger .dm-site-footer__socials a {
    font-family: var(--gb-font-ui);
    font-weight: var(--gb-type-ui-weight);
    letter-spacing: var(--gb-type-ui-track);
    text-transform: uppercase;
  }

  /* Eyebrows were two different things: a gold 13px/700 at .08em in the
     section renderer and a grey 14px/800 at .22em in the Product
     Theater. One kicker now. */
  body.dm-pack-green-badger .dm-section__eyebrow,
  body.dm-pack-green-badger .dm-coverflow__eyebrow {
    font-size: var(--gb-type-ui-size-sm);
    letter-spacing: var(--gb-type-ui-track-wide);
    line-height: 1.6;
    color: var(--dm-primary, #b89a5b);
  }

  /* Product name: was a computed 16.56px with no tracking — the only
     type on the page sized by a stray multiplier. */
  body.dm-pack-green-badger .dm-section__item-title,
  body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__item-title {
    font-size: 15px;
    letter-spacing: .08em;
    line-height: 1.5;
  }

  /* P1-A (2026-08-22) — product-card hover contamination: Astra's own
     `a:hover{color:var(--ast-global-color-1)}` (customizer dynamic CSS,
     #045cb4 blue) inherits down into the card title on hover since the
     title itself carries no colour of its own except at rest. Answered in
     kind with the system's gold, matching every other text-link hover on
     the page. */
  body.dm-pack-green-badger .dm-section__item-link:hover .dm-section__item-title,
  body.dm-pack-green-badger .dm-section__item-link:focus-visible .dm-section__item-title,
  body.dm-pack-green-badger .dm-section__item-link:hover,
  body.dm-pack-green-badger .dm-section__item-link:focus-visible {
    color: var(--dm-primary, #b89a5b);
  }

  /* --- D. UI: numerals ---------------------------------------------
   * Prices and the carousel counter. Same weight and the same tracking
   * discipline as the labels, but in the sans — serif old-style
   * figures are the wrong tool for a price.
   */
  body.dm-pack-green-badger .dm-section__item-price,
  body.dm-pack-green-badger .dm-coverflow__active-content-price {
    font-family: var(--gb-font-numeral);
    font-size: 14px;
    font-weight: var(--gb-type-ui-weight);
    letter-spacing: .04em;
  }

  /*
   * Price colour. The magenta was never a Green Badger decision: it
   * comes from duck-mark-fruitera-home, a DIFFERENT brand's plugin,
   * whose `.woocommerce-Price-amount { color: var(--fruitera-pink)
   * !important }` is written with no scope at all and so paints every
   * price on every page of this install. That file is not this Pack's
   * to edit, so the value is taken back here at higher specificity —
   * scoped to this body class, which leaves Fruitera's own pages
   * untouched.
   *
   * Regular / was / now stay three separate roles. Flattening them to
   * one colour would delete the discount, not tidy it — there are no
   * sale prices on the page today, so the del/ins rules are the
   * contract for when there are.
   */
  body.dm-pack-green-badger .woocommerce-Price-amount {
    color: var(--gb-price-color) !important;
  }
  body.dm-pack-green-badger del .woocommerce-Price-amount {
    color: var(--gb-price-was-color) !important;
  }
  body.dm-pack-green-badger ins .woocommerce-Price-amount {
    color: var(--gb-price-sale-color) !important;
  }
  body.dm-pack-green-badger del {
    text-decoration-color: var(--gb-price-was-color);
  }
  body.dm-pack-green-badger ins {
    text-decoration: none;
  }

  /* --- PRIMARY action ----------------------------------------------
   * One skeleton. The hero CTA, the two campaign banners, the
   * membership signup and the header's SHOP NOW are now the same
   * component at three heights; only --paper / --ink move between
   * them, which is what carries cream vs gold per section context.
   *
   * min-width is dropped on purpose: the old component pinned every
   * button to 172px and then let long labels push past it, which is
   * why the row read as five different buttons. Width comes from the
   * shared horizontal padding and the label, nothing else.
   */
  body.dm-pack-green-badger .dm-section--image-banner .dm-section__action,
  body.dm-pack-green-badger .dm-membership-banner__cta,
  body.dm-pack-green-badger .main-header-menu > .menu-item > .dm-header-cta-link,
  body.dm-pack-green-badger .dm-header-cta-link {
    min-width: 0;
    min-height: var(--gb-action-h);
    padding: 0 var(--gb-action-pad-x);
    gap: var(--gb-action-gap);
    border: 0;
    border-radius: var(--gb-action-radius);
    clip-path: none;
    box-shadow: none;
    font-size: var(--gb-type-ui-size);
    letter-spacing: .18em; /* P1-A: PRIMARY tracking, was the shared .16em */
    transition: background-color .18s ease, color .18s ease; /* P1-A: was .22s */
  }
  /* P1-A (2026-08-22) — PRIMARY hover: colour-only, one step lighter gold,
     no lift/shadow (the "Decoration removal" block further down already
     kills transform/filter on every action; this is the fill it never had).
     Header SHOP NOW keeps its own hover (first-screen block above) since
     that button is LOCAL, not part of this shared skeleton's hover state. */
  body.dm-pack-green-badger .dm-section--image-banner .dm-section__action:hover,
  body.dm-pack-green-badger .dm-section--image-banner .dm-section__action:focus-visible,
  body.dm-pack-green-badger .dm-membership-banner__cta:hover,
  body.dm-pack-green-badger .dm-membership-banner__cta:focus-visible {
    background: #d8b96e;
  }
  /* The membership block's own rules are written at (0,4,1) with the
     [data-tone] attribute, so the LARGE variant has to be stated at the
     same reach or it keeps its old 62px / 16px / 34px one-off. */
  body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__cta {
    min-height: var(--gb-action-h-lg);
    padding: 0 var(--gb-action-pad-x);
    font-size: var(--gb-type-ui-size);
  }
  /* The signup label is drawn as two spans the strip pattern styles at
     18px/700 for its old one-line banner; inside a shared action they
     are just the label. */
  body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__cta-line1,
  body.dm-pack-green-badger .dm-membership-banner[data-tone="dark"] .dm-membership-banner__cta-line2 {
    font-family: var(--gb-font-ui);
    font-size: var(--gb-type-ui-size);
    font-weight: var(--gb-type-ui-weight);
    letter-spacing: var(--gb-type-ui-track);
  }
  body.dm-pack-green-badger .main-header-menu > .menu-item > .dm-header-cta-link,
  body.dm-pack-green-badger .dm-header-cta-link {
    min-height: var(--gb-action-h-sm) !important;
    padding: 0 24px !important;
    font-size: var(--gb-type-ui-size-sm);
    --dm-header-cta-radius: 0px;
  }
  /* --gb-action-h-sm (46px) stays untouched for every other consumer of
     the shared PRIMARY skeleton; only the header CTA is pinned to the
     ~40px round-2 target, so the override has to land after the rule
     above (same selector, same !important — source order decides). */
  body.dm-pack-green-badger .main-header-menu > .menu-item > .dm-header-cta-link,
  body.dm-pack-green-badger .dm-header-cta-link {
    min-height: 40px !important;
    padding: 0 13px !important; /* 24px measured 134px wide; 13px lands ~112px */
  }

  /* --- SECONDARY action ---------------------------------------------
   * "See more of the same" navigation: the two archive links and the
   * Product Theater's product link. These were filled 172px slabs
   * identical to the campaign CTAs, so a rail's footnote carried the
   * same weight as a campaign's call to action. Text on a hairline —
   * no fill, no box — so they read as navigation and stop competing.
   */
  body.dm-pack-green-badger .dm-native-slider__cta--solid,
  body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__action,
  body.dm-pack-green-badger .dm-coverflow__active-content-cta {
    min-width: 0;
    min-height: 0;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid var(--gb-action-line);
    border-radius: 0;
    background: transparent;
    color: var(--dm-text, #f4f1e8);
    clip-path: none;
    box-shadow: none;
    font-size: var(--gb-type-ui-size);
    transition: color .22s ease, border-color .22s ease;
  }
  /* P1-A (2026-08-22) — SECONDARY body links (VIEW ALL / すべての商品を見る /
     coverflow 詳細を見る) get their own weight + tracking here rather than
     in the shared rule above, because that rule's selector list also
     carries the hero's own SECONDARY action (.dm-native-slider__cta--solid)
     — LOCAL and out of this pass's scope, so it has to be excluded by not
     touching it, not by editing the shared block. */
  body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__action,
  body.dm-pack-green-badger .dm-coverflow__active-content-cta {
    font-weight: 500;
    letter-spacing: .18em;
  }
  /* Hover hairline goes to cream, not gold — the rail links used to brighten
     to gold on hover; the plan keeps gold as the one deliberate hero
     exception (below, in the first-screen CTA block) and cream everywhere
     else. */
  body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__action:hover,
  body.dm-pack-green-badger .dm-section--best-sellers-row .dm-section__action:focus-visible,
  body.dm-pack-green-badger .dm-coverflow__active-content-cta:hover,
  body.dm-pack-green-badger .dm-coverflow__active-content-cta:focus-visible {
    color: var(--dm-text, #f4f1e8);
    border-bottom-color: var(--dm-text, #f4f1e8);
  }
  /* Hero CTA only (round 2): the other SECONDARY actions above keep the
     shared --gb-type-ui-size; this one alone steps up to ~15px per the
     first-screen brief, so it has to land after the shared rule (same
     selector weight, same non-!important — source order decides). */
  body.dm-pack-green-badger .dm-native-slider__cta--solid {
    font-size: 15px;
  }

  /* --- Decoration removal -------------------------------------------
   * The shared paper-button drew a torn-paper clip-path, two radial
   * grain layers, an aged-edge gradient, an inset rim, a drop shadow
   * and a 2px hover lift on EVERY action. None of that is Green
   * Badger; it is a material costume. Removed for the whole Pack, not
   * just the first screen.
   */
  body.dm-pack-green-badger .dm-native-slider__cta--solid::before,
  body.dm-pack-green-badger .dm-native-slider__cta--solid::after,
  body.dm-pack-green-badger .dm-section__action::before,
  body.dm-pack-green-badger .dm-section__action::after,
  body.dm-pack-green-badger .dm-coverflow__active-content-cta::before,
  body.dm-pack-green-badger .dm-coverflow__active-content-cta::after,
  body.dm-pack-green-badger .dm-membership-banner__cta::before,
  body.dm-pack-green-badger .dm-membership-banner__cta::after,
  body.dm-pack-green-badger .dm-header-cta-link::before,
  body.dm-pack-green-badger .dm-header-cta-link::after {
    display: none;
  }
  /* The lift is written !important in the component (it has to beat the
     motion engine's inline transform), so stillness has to be too. */
  body.dm-pack-green-badger .dm-native-slider__cta--solid:hover,
  body.dm-pack-green-badger .dm-native-slider__cta--solid:focus-visible,
  body.dm-pack-green-badger .dm-native-slider__cta--solid:active,
  body.dm-pack-green-badger .dm-section__action:hover,
  body.dm-pack-green-badger .dm-section__action:focus-visible,
  body.dm-pack-green-badger .dm-section__action:active,
  body.dm-pack-green-badger .dm-coverflow__active-content-cta:hover,
  body.dm-pack-green-badger .dm-coverflow__active-content-cta:focus-visible,
  body.dm-pack-green-badger .dm-coverflow__active-content-cta:active,
  body.dm-pack-green-badger .dm-membership-banner__cta:hover,
  body.dm-pack-green-badger .dm-membership-banner__cta:focus-visible,
  body.dm-pack-green-badger .dm-membership-banner__cta:active,
  body.dm-pack-green-badger .dm-header-cta-link:hover,
  body.dm-pack-green-badger .dm-header-cta-link:focus-visible,
  body.dm-pack-green-badger .dm-header-cta-link:active {
    transform: none !important;
    filter: none;
  }

  /*
   * Carousel arrows: 64x44 with border-radius:50% is an ellipse, not a
   * circle — a radius nobody chose. Squared to the same corner and the
   * same hairline every other control now uses.
   */
  body.dm-pack-green-badger .dm-coverflow__arrow,
  body.dm-pack-green-badger .dm-coverflow__arrow:hover,
  body.dm-pack-green-badger .dm-coverflow__arrow:focus,
  body.dm-pack-green-badger .dm-coverflow__arrow:focus-visible,
  body.dm-pack-green-badger .dm-coverflow__arrow:active {
    /* !important, and matching the pattern's own state list, because
       coverflow-showcase.css locks radius/background/colour with
       !important across every state — deliberately, to survive theme
       `button` resets. This is the one place that has to answer in kind. */
    /* The padding has to go first: an inherited `padding: 15px 30px` was
       holding the box at 62px wide no matter what width said — a
       border-box element cannot render narrower than its own padding,
       which is where the ellipse actually came from. */
    padding: 0 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--gb-action-radius) !important;
    background: transparent !important;
    border: 1px solid var(--gb-action-line) !important;
    color: var(--dm-text, #f4f1e8) !important;
    box-shadow: none;
    font-size: 15px;
    font-weight: var(--gb-type-ui-weight);
    transition: color .22s ease, border-color .22s ease;
  }
  body.dm-pack-green-badger .dm-coverflow__arrow:hover,
  body.dm-pack-green-badger .dm-coverflow__arrow:focus-visible {
    color: var(--dm-primary, #c9a85f) !important;
    border-color: var(--dm-primary, #c9a85f) !important;
  }

  /* --- Footer ------------------------------------------------------
   * Weight 950 appeared nowhere else on the site — it was the footer
   * inventing its own top of the weight scale.
   */
  body.dm-pack-green-badger .dm-footer-column h2 {
    font-size: 16px;
    letter-spacing: var(--gb-type-ui-track-wide);
    line-height: 1.4;
  }
  body.dm-pack-green-badger .dm-site-footer__brand-title {
    font-weight: var(--gb-type-section-weight);
    letter-spacing: .02em;
  }
  body.dm-pack-green-badger .dm-site-footer__socials a {
    font-size: var(--gb-type-ui-size-sm);
    box-shadow: none;
  }
}

/* ==================================================================
 * GREEN BADGER — MOBILE LAYER (2026-08-23)
 *
 * Additive and mobile-only: every rule below is inside
 * `@media (max-width: 782px)`, so the design-locked desktop
 * composition (its own >=1025px / >=1300px blocks) is untouched.
 * 390px is the column these values were measured on.
 * ================================================================== */
@media (max-width: 782px) {

  /* --- Pass 1 tokens ---------------------------------------------
   * Names, not new values: the gutter, section-title size and eyebrow
   * size below are the ones the page already computed at 390 — stating
   * them once is what lets a section consume the rhythm instead of
   * inventing a local number.
   */
  body.dm-pack-green-badger {
    --gb-m-gutter: 20px;
    --gb-m-rhythm: 72px;
    --gb-m-title: 32px;
    --gb-m-hero: 48px;
    --gb-m-body: 15px;
    --gb-m-eyebrow: 12px;
    --gb-m-hairline: 1px solid rgba(184, 154, 91, .28);
    /* Rail card width. 62vw leaves ~1.5 cards in view at 390, which is
       what tells the thumb there is more to the right. */
    --gb-m-rail-card: 62vw;
  }

  /* Price colour, mobile arm. The desktop override of Fruitera's
     unscoped `.woocommerce-Price-amount` magenta lives inside the
     >=1025px block, so below that width the magenta still won. Same
     three roles, same tokens as desktop. */
  body.dm-pack-green-badger .woocommerce-Price-amount {
    color: var(--gb-price-color) !important;
  }
  body.dm-pack-green-badger del .woocommerce-Price-amount {
    color: var(--gb-price-was-color) !important;
  }
  body.dm-pack-green-badger ins .woocommerce-Price-amount {
    color: var(--gb-price-sale-color) !important;
  }
  body.dm-pack-green-badger ins {
    text-decoration: none;
  }

  /* BEST SELLERS: hand the section back to the mobile fallback that
     already exists for it (`@media (max-width:782px)` above: lead item
     full-width, then a 2-up row). It could never take effect because
     the section also carries data-dm-scroll-m="slider", and the shared
     slider primitive sets grid-template-columns:none — which left the
     desktop 3-up composition collapsed to 100px tracks on a phone.
     No visual redesign here; that is a later pass. */
  body.dm-pack-green-badger .dm-section[data-dm-preset="ranked-best-sellers"] .dm-section__items {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    overflow-x: visible;
  }

  /* --- Pass 2: NEW DROP as a touch rail ---------------------------
   * The section already carries data-dm-scroll-m="slider", but the
   * shared primitive sizes its tracks `minmax(0, calc(100%/cols))` — a
   * maximum with a zero minimum, so with five items the tracks shrank
   * to fit the container instead of overflowing it (measured: 55x41px
   * images, nothing to scroll). A fixed track width is what turns the
   * existing primitive into an actual rail; no new carousel is built.
   * Start-aligned snapping, manual swipe, no autoplay.
   */
  body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__items {
    grid-auto-columns: clamp(268px, 74vw, 304px);
    gap: 16px;
    /* Runs off the right edge rather than stopping at the gutter, so the
       cut card reads as "more", not as a short row. The scrolling is the
       list's own, so the page never gains horizontal overflow. */
    margin-right: calc(var(--gb-m-gutter) * -1);
    padding-right: var(--gb-m-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__items::-webkit-scrollbar {
    display: none;
  }
  body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__item {
    scroll-snap-align: start;
  }
  /* The artwork is square at source; the card pattern's 4:3 crop was
     cutting it for no gain once the card is 240px wide. */
  body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__item-media {
    --dm-section-media-ratio: 1 / 1;
    border-radius: 0;
  }
  body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__item-title {
    margin-top: 12px;
    font-family: var(--dm-font-display, inherit);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gb-m-cream, #f4f1e8);
    line-height: 1.35;
    /* Product names break between words or not at all — the 55px card
       was breaking them mid-word. */
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }
  body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__item-price {
    margin-top: 6px;
    font-family: var(--gb-font-numeral);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--gb-m-cream, #f4f1e8);
  }
  /* No card-lift: a rail is dragged, not hovered. */
  body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__item-link:hover,
  body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__item-link:focus-visible {
    transform: none;
    box-shadow: none;
  }
}

/* Loop clones exist only while the autorail (phone OR desktop) is actually
   running; hidden the instant it is not, at any breakpoint, so a rail that
   never autoplays (or has autoplay turned off in Studio) never shows them. */
body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__items:not(.is-autorail) .dm-nd-clone {
  display: none;
}

/* Snap would fight the continuous autorail at any breakpoint — the base
   slider primitive sets scroll-snap-type: x proximity unconditionally, and
   without this override the browser keeps trying to settle on the nearest
   card while sections.js is writing scrollLeft every frame, which is what
   read as choppy/stepped motion (most visible on desktop, where nothing
   previously disabled snap during autorail). Manual browsing re-engages
   snap the instant is-autorail comes off (onInteract in sections.js). */
body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__items.is-autorail {
  scroll-snap-type: none;
}

/* The mobile pass hides the rail's native scrollbar, but only inside its own
   max-width:782px block, so desktop/tablet were left showing the browser's
   own horizontal scrollbar (with its arrow buttons) under the rail — the
   visible "scroll indicator" the rail was never meant to have. Same
   suppression, unconditional, so every breakpoint gets it. */
body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__items {
  scrollbar-width: none;
}
body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__items::-webkit-scrollbar {
  display: none;
}

/* Desktop autorail needs the same fixed-track-width treatment the mobile
   rail already has (Pass 2 above). The shared slider primitive sizes each
   track as a PERCENTAGE of the rail's own width divided by --dm-section-cols
   (5 here) — correct for exactly 5 items, but once sections.js appends clone
   items for the continuous loop, that percentage keeps dividing the SAME
   container width by the new, larger item count instead of overflowing it,
   so the rail silently squashes 10 cards into 5-cards' worth of space
   rather than scrolling. A fixed px width (clamped to roughly match the
   existing ~cols-of-5 card size at common desktop widths) makes each clone
   add real width, which is what makes the loop actually overflow and scroll. */
@media (min-width: 1025px) {
  body.dm-pack-green-badger .dm-section[data-dm-section="section.gb.new_drop"] .dm-section__items {
    grid-auto-columns: clamp(220px, 18vw, 270px);
  }
}

/* ==================================================================
 * GREEN BADGER — WIDE-DESKTOP STABILITY PASS (2026-08-24)
 * User-requested corrections after the 0613pm review:
 *  1) announcement bar must occupy a real first row;
 *  2) very-wide Hero must stop cropping the authored badger/product art;
 *  3) 目的から選ぶ must never form staggered/stepped cards;
 *  4) remove the stray beige/gold rule above the footer.
 * Scoped to Green Badger only. Mobile artwork remains untouched.
 * ================================================================== */

/* 1. Announcement = a real physical row. The Green Badger preset keeps the
 * desktop header absolutely over the Hero, so the old negative Hero pull-up
 * could visually eat the announcement's flow space. Let the announcement own
 * its row, start the overlaid header immediately below that row, and stop
 * pulling the first assembly upward through it.
 *
 * The header's containing block for this absolute positioning is #page,
 * not the viewport — and #page itself already starts right after the
 * announcement's own flow row above. A `top: var(--dm-announce-h)` here
 * therefore double-counts that height (#page's own offset, then this top
 * again), which is what pushed the header down and left the Hero showing
 * through the gap. The header only needs `top: 0` to sit flush against
 * whatever #page's top already is — 0 when the bar is dismissed (or absent),
 * the bar's real rendered height otherwise, with no separate variable to
 * keep in sync. */
@media (min-width: 1025px) {
  body.dm-pack-green-badger .dm-header-announcement {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 100%;
  }
  body.dm-pack-green-badger.dm-header-hero-overlap-enabled .site-header,
  body.dm-pack-green-badger.dm-header-hero-overlap-enabled #masthead {
    top: 0 !important;
  }
  body.dm-pack-green-badger.dm-header-hero-overlap-enabled .entry-content.clear > .dm-page-assembly:first-child {
    margin-top: 0 !important;
  }
}

/* 2. Very-wide Hero safe fit. The current authored master is square-ish;
 * `cover` on a 16:5-ish desktop viewport necessarily cuts the top/bottom.
 * On large screens preserve the full artwork, anchor it to the right where
 * the product/badger live, and use the Hero's near-black surface as the safe
 * extension under the live copy. 1025-1439 keeps the existing composition;
 * phone/tablet rules are deliberately untouched because those already look
 * correct. */
@media (min-width: 1440px) {
  body.dm-pack-green-badger .dm-section--hero .dm-native-slider,
  body.dm-pack-green-badger .dm-section--hero .dm-native-slider__slide {
    background: var(--dm-black, #0b0b0a);
  }
  body.dm-pack-green-badger .dm-section--hero .dm-native-slider__image {
    object-fit: contain !important;
    object-position: 100% 50% !important;
    transform: none !important;
    transform-origin: center !important;
  }
}

/* 3. 目的から選ぶ: one level baseline, never a staircase. The older
 * per-mode 'mood' pass changed trigger padding/font metrics by index and the
 * grid used align-items:start, which made the three cards visibly step. Keep
 * motion timing differences if desired, but spatial geometry is identical.
 * Stretch all cards to the current grid-row height so opening one panel does
 * not leave two short bordered columns beside a tall one. */
@media (min-width: 761px) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__header {
    margin-bottom: 28px;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__header > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    column-gap: clamp(36px, 5vw, 84px);
    align-items: end;
    width: 100%;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__header h2,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__header p {
    margin-top: 0;
    margin-bottom: 0;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__header p {
    max-width: 520px;
    justify-self: end;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__grid {
    align-items: stretch;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card {
    height: 100%;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__reveal-trigger,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="0"] .dm-native-cats__reveal-trigger,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-native-cats__reveal-trigger,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="2"] .dm-native-cats__reveal-trigger {
    min-height: 154px;
    padding: 28px 24px;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__body strong,
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__card[data-index="1"] .dm-native-cats__body strong {
    font-size: 22px;
    font-weight: 800;
  }
}

@media (max-width: 760px) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__header > div {
    display: block;
  }
}

/* 3c. 目的から選ぶ -> BEST SELLERS spacing, mobile/tablet (<=1024px). Same
 * root cause as the desktop fix below: mode-reveal never had its own
 * padding-bottom, and BEST SELLERS is admin-configured to 0 on both
 * --dm-section-space-top/-bottom at every breakpoint (not just desktop),
 * so on phones/tablets the two sections sat flush with no gap at all.
 * Column count and header layout at this range are untouched (existing
 * responsive policy, left alone per instruction) — spacing only. Reuses
 * BEST SELLERS' OWN mobile rhythm value (clamp(44px,9vw,60px), the
 * `.dm-section--best-sellers-row` max-width:600px rule above) rather than
 * inventing a new number, since that's the established "space around this
 * exact section" value on small screens elsewhere in this file. */
@media (max-width: 1024px) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] {
    padding-bottom: clamp(44px, 9vw, 60px);
  }
}

/* 3b. 目的から選ぶ — VISUAL FIX PASS (2026-08-24), desktop (>=1025px) only,
 * tablet/mobile behavior above is untouched:
 *
 * - Grid column count: `.dm-native-cats__grid` reads `--dm-ncat-cols` from
 *   an inline custom property the admin Studio screen prints on the
 *   section wrapper (currently saved as 4, a value meant for a denser
 *   preset). mode-reveal only ever renders 3 cards (ENERGY/DEEP/EXTREME),
 *   so the grid reserved a phantom 4th column and the row read bunched
 *   left with dead space on the right. Force 3 columns for this layout —
 *   still the same content container width as BEST SELLERS/hero
 *   (.dm-section__inner, unchanged), just no longer split 4 ways.
 * - Header description: at the shared 320-520px column cap the copy's
 *   measured text run (~576px) wrapped to an orphaned short second line.
 *   Widen the description column so it reads as one balanced line at
 *   desktop widths.
 * - Section bottom spacing: mode-reveal never had its own padding-bottom
 *   (only mode-list did), so it sat flush against BEST SELLERS below.
 *   BEST SELLERS is admin-configured to 0 on BOTH --dm-section-space-top
 *   AND --dm-section-space-bottom (inline override), so this side must
 *   own the full gap itself. 64px (--gb-space-medium, the "S canonical
 *   rhythm" also used elsewhere on this page) is the confirmed/approved
 *   desktop value — do not change without new user direction. The
 *   mobile/tablet (<=1024px) equivalent gap is handled separately below,
 *   at its own value; it does not reuse this number. */
@media (min-width: 1025px) {
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__header > div {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 620px);
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] .dm-native-cats__header p {
    max-width: 620px;
  }
  body.dm-pack-green-badger .dm-native-cats[data-layout="mode-reveal"] {
    padding-bottom: 64px;
  }
}

/* 4. Footer seam: Green Badger uses no beige/gold separator strip above the
 * footer. Remove both the plugin's 3px accent border and its accent inset
 * highlight, retaining only a neutral black depth shadow. */
body.dm-pack-green-badger .dm-site-footer {
  border-top: 0 !important;
  box-shadow: 0 -18px 45px rgba(0, 0, 0, .28) !important;
}
/* 4b. Footer seam ROOT CAUSE (2026-08-24): the strip above the footer was
 * never a border — `.dm-page-assembly` (the dark, rgb(13,12,10) home
 * content wrapper) ends 16px above its own parent chain (main/article/
 * entry-content, all transparent), which in turn sits on the theme's
 * default white `body` background. That 16px gap is where the white body
 * showed through as a beige/grey strip. Painting body the same dark tone
 * removes the visible line while leaving the 16px gap itself untouched. */
body.dm-pack-green-badger {
  background-color: #0d0c0a;
}