/* ============================================================
   GREEN BADGER — HEADER NOTICE CENTER
   One bell/count for announcement + Action Nudge unread items.
   Desktop: compact popover anchored under the clicked bell.
   Mobile: existing App Shell bottom sheet.
   ============================================================ */

.dm-notice-trigger {
	position: relative;
}

/* unread count belongs to the bell itself */
.dm-notice-badge {
	position: absolute;
	top: 4px;
	right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border: 2px solid var(--dm-black, #0b0b0a);
	border-radius: 999px;
	background: #b33f38;
	color: #fff;
	font-family: 'Noto Sans JP', system-ui, sans-serif;
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	pointer-events: none;
	z-index: 4;
}

.dm-notice-badge[hidden] {
	display: none !important;
}

/* Desktop STAMP + bell read as one utility cluster, not oversized nav icons. */
body.dm-header-skin-enabled .main-header-menu > .dm-header-action-stamp > .menu-link,
body.dm-header-skin-enabled .main-header-menu > .dm-header-action-notice > .menu-link {
	position: relative;
	min-width: 34px;
	width: 34px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.dm-header-skin-enabled .dm-header-action-notice .dm-ic {
	display: block;
	width: 19px !important;
	height: 19px !important;
	fill: none !important;
	stroke: currentColor;
	stroke-width: 1.7;
}

body.dm-header-skin-enabled .dm-header-action-notice .dm-notice-badge {
	top: 4px;
	right: -2px;
}

/* Keep STAMP and bell adjacent even if generic header-action margins change. */
body.dm-header-skin-enabled .main-header-menu > .dm-header-action-stamp + .dm-header-action-notice {
	margin-left: 4px;
}

#dm-sheet-notice .dm-sheet__title::before {
	content: "NOTICE";
	display: block;
	margin-bottom: 5px;
	color: var(--dm-gold, #b89a5b);
	font-family: 'Noto Sans JP', system-ui, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .2em;
}

/* Desktop = small message popover under the bell. The transparent scrim still
   catches outside clicks, but the page is not visually dimmed. */
@media (min-width: 1024px) {
	#dm-sheet-notice .dm-sheet__scrim {
		background: transparent;
		backdrop-filter: none;
	}

	#dm-sheet-notice .dm-sheet__panel {
		inset: var(--dm-notice-panel-top, 82px) var(--dm-notice-panel-right, 20px) auto auto;
		width: min(370px, calc(100vw - 32px));
		max-height: min(560px, calc(100vh - var(--dm-notice-panel-top, 82px) - 16px));
		padding-bottom: 0;
		border: 1px solid rgba(184, 154, 91, .42);
		border-radius: 0;
		box-shadow: 0 22px 60px rgba(0, 0, 0, .46);
		opacity: 0;
		transform: translateY(-7px) scale(.985);
		transform-origin: 100% 0;
		transition: opacity 160ms ease, transform 180ms ease;
	}

	#dm-sheet-notice.is-open .dm-sheet__panel {
		opacity: 1;
		transform: none;
	}

	#dm-sheet-notice .dm-sheet__head {
		padding: 12px 16px;
		touch-action: auto;
	}

	#dm-sheet-notice .dm-sheet__body {
		padding: 14px 16px 16px;
	}
}

.dm-notice-list {
	display: grid;
	gap: 0;
}

.dm-notice-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--dm-hairline, rgba(184, 154, 91, .28));
}

.dm-notice-item:first-child { padding-top: 0; }
.dm-notice-item:last-child { border-bottom: 0; padding-bottom: 0; }

.dm-notice-item__text {
	margin: 0;
	color: var(--dm-cream, #f4f1e8);
	font-family: 'Noto Sans JP', system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.65;
}

.dm-notice-item__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--dm-gold, #b89a5b) !important;
	font-family: 'Noto Sans JP', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dm-notice-item__link:hover,
.dm-notice-item__link:focus-visible {
	background: none;
	color: var(--dm-cream, #f4f1e8) !important;
}

.dm-notice-item__link:focus { outline: none; }
.dm-notice-item__link:focus-visible {
	outline: 1px solid var(--dm-gold, #b89a5b);
	outline-offset: 3px;
}
.dm-notice-item__link b { font-weight: 400; }

.dm-notice-empty {
	margin: 0;
	padding: 2px 0;
	color: rgba(244, 241, 232, .52);
	font-family: 'Noto Sans JP', system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.7;
}

@media (max-width: 380px) {
	.dm-notice-item {
		grid-template-columns: 1fr;
		gap: 7px;
	}
	.dm-notice-item__link { justify-self: start; }
}

/* ============================================================
   WOOCOMMERCE NOTICE / MODAL RE-SKIN
   No new notice system: WooCommerce keeps rendering and owning
   these elements, this only restyles what it already prints.
   Scoped to the pack body class so the rules travel with the
   Green Badger pack and never leak into another site's theme.
   ============================================================ */

body.dm-pack-green-badger {
	--gb-notice-surface: #121411;
	--gb-notice-line: rgba(240, 234, 220, .14);
	--gb-notice-text: var(--dm-cream, #f4f1e8);
	--gb-notice-muted: #8f9189;
	--gb-notice-gold: var(--dm-gold, #b89a5b);
	/* Deliberately desaturated: a muted terracotta reads as "stop"
	   inside a near-black editorial palette without the browser-default
	   alert red fighting the gold. */
	--gb-notice-alert: #a8564e;
	--gb-notice-font: var(--gb-font-ja, "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif);
}

body.dm-pack-green-badger .woocommerce-notices-wrapper:empty {
	display: none;
}

body.dm-pack-green-badger .woocommerce-message,
body.dm-pack-green-badger .woocommerce-error,
body.dm-pack-green-badger .woocommerce-info,
body.dm-pack-green-badger ul.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 0 0 18px;
	padding: 14px 18px;
	background: var(--gb-notice-surface);
	color: var(--gb-notice-text);
	/* WooCommerce ships `border-top: 3px solid #8fae1b` and Astra
	   recolours the info variant to #1e85be — that blue top rule is the
	   single most off-brand thing on the page, so all four edges are
	   restated as one hairline and the accent moves to the left edge. */
	border: 1px solid var(--gb-notice-line) !important;
	border-left: 2px solid var(--gb-notice-gold) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--gb-notice-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: .02em;
	list-style: none;
}

/* Woo draws its own tick/cross/info glyph through ::before and reserves
   left padding for it. The hairline accent carries the same meaning at a
   fraction of the height, which is what makes the mobile box compact. */
body.dm-pack-green-badger .woocommerce-message::before,
body.dm-pack-green-badger .woocommerce-error::before,
body.dm-pack-green-badger .woocommerce-info::before,
body.dm-pack-green-badger ul.woocommerce-error::before {
	display: none !important;
	content: none !important;
}

body.dm-pack-green-badger .woocommerce-error,
body.dm-pack-green-badger ul.woocommerce-error {
	border-left-color: var(--gb-notice-alert) !important;
}

body.dm-pack-green-badger .woocommerce-info {
	border-left-color: rgba(240, 234, 220, .38) !important;
	color: var(--gb-notice-muted);
}

/* Checkout validation prints a <ul> of <li>; keep them as plain lines
   inside the one box rather than a nested bulleted list. */
body.dm-pack-green-badger ul.woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

body.dm-pack-green-badger .woocommerce-message li,
body.dm-pack-green-badger .woocommerce-error li,
body.dm-pack-green-badger .woocommerce-info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.dm-pack-green-badger .woocommerce-message a:not(.button),
body.dm-pack-green-badger .woocommerce-error a:not(.button),
body.dm-pack-green-badger .woocommerce-info a:not(.button) {
	color: var(--gb-notice-gold);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* The `カートを見る` CTA Woo appends to the add-to-cart success notice.
   Same design language as the PDP button, one size down: it is the
   secondary move while the customer is still shopping. */
body.dm-pack-green-badger .woocommerce-message .button,
body.dm-pack-green-badger .woocommerce-error .button,
body.dm-pack-green-badger .woocommerce-info .button,
body.dm-pack-green-badger .woocommerce-message .wc-forward,
body.dm-pack-green-badger .woocommerce-info .wc-forward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	margin: 0;
	padding: 0 18px;
	background: transparent !important;
	background-image: none !important;
	color: var(--gb-notice-gold) !important;
	border: 1px solid var(--gb-notice-gold) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--gb-notice-font);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	transition: background 320ms ease, color 320ms ease;
}

/* A notice CTA is SECONDARY: it fills ivory, not gold, so it cannot
   outrank the primary action on the page behind it. The fill itself is
   the authority's ::before sweep — only the label colour is asserted
   here, because this file's own `color: gold !important` above would
   otherwise survive the inversion. */
body.dm-pack-green-badger .woocommerce-message .button:hover,
body.dm-pack-green-badger .woocommerce-message .button:focus-visible,
body.dm-pack-green-badger .woocommerce-message .button:active,
body.dm-pack-green-badger .woocommerce-info .button:hover,
body.dm-pack-green-badger .woocommerce-info .button:focus-visible,
body.dm-pack-green-badger .woocommerce-info .button:active,
body.dm-pack-green-badger .woocommerce-error .button:hover,
body.dm-pack-green-badger .woocommerce-error .button:focus-visible,
body.dm-pack-green-badger .woocommerce-error .button:active {
	color: var(--dm-black, #0b0b0a) !important;
	outline: none;
}

/* Mobile: the message text takes the full width and the CTA drops to its
   own line, so the box stays two short rows instead of a tall block. */
@media (max-width: 900px) {
	body.dm-pack-green-badger .woocommerce-message,
	body.dm-pack-green-badger .woocommerce-error,
	body.dm-pack-green-badger .woocommerce-info,
	body.dm-pack-green-badger ul.woocommerce-error {
		gap: 10px;
		margin-bottom: 14px;
		padding: 12px 14px;
		font-size: 12.5px;
		line-height: 1.6;
	}

	body.dm-pack-green-badger .woocommerce-message .button,
	body.dm-pack-green-badger .woocommerce-error .button,
	body.dm-pack-green-badger .woocommerce-info .button,
	body.dm-pack-green-badger .woocommerce-message .wc-forward,
	body.dm-pack-green-badger .woocommerce-info .wc-forward {
		flex: 0 0 auto;
		min-height: 36px;
		padding: 0 16px;
		font-size: 11px;
	}
}

/* ---- WooCommerce Blocks notices (block cart / checkout) ---- */

body.dm-pack-green-badger .wc-block-components-notice-banner {
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--gb-notice-surface) !important;
	color: var(--gb-notice-text) !important;
	border: 1px solid var(--gb-notice-line) !important;
	border-left: 2px solid var(--gb-notice-gold) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--gb-notice-font);
	font-size: 13px;
}

body.dm-pack-green-badger .wc-block-components-notice-banner.is-error {
	border-left-color: var(--gb-notice-alert) !important;
}

body.dm-pack-green-badger .wc-block-components-notice-banner.is-info {
	border-left-color: rgba(240, 234, 220, .38) !important;
}

body.dm-pack-green-badger .wc-block-components-notice-banner > svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	opacity: .7;
}

/* ---- variation / stock messages ---- */

body.dm-pack-green-badger .woocommerce-variation-availability,
body.dm-pack-green-badger .wc-no-matching-variations,
body.dm-pack-green-badger .woocommerce-variation-description {
	padding: 0;
	background: none;
	border: 0;
	color: var(--gb-notice-muted);
	font-family: var(--gb-notice-font);
	font-size: 12px;
	letter-spacing: .04em;
}

body.dm-pack-green-badger .wc-no-matching-variations {
	color: var(--gb-notice-alert);
}

/* ---- PhotoSwipe: the product image modal WooCommerce already ships ---- */

body.dm-pack-green-badger .pswp__bg {
	background: var(--dm-black, #0b0b0a);
	opacity: 1 !important;
}

body.dm-pack-green-badger .pswp__caption__center,
body.dm-pack-green-badger .pswp__counter {
	color: var(--gb-notice-text);
	font-family: var(--gb-notice-font);
	font-size: 12px;
	letter-spacing: .06em;
	text-align: left;
}

body.dm-pack-green-badger .pswp__button {
	opacity: .7;
	transition: opacity 320ms ease;
}

body.dm-pack-green-badger .pswp__button:hover,
body.dm-pack-green-badger .pswp__button:focus-visible {
	opacity: 1;
	outline: none;
}

body.dm-pack-green-badger .pswp__top-bar {
	background: transparent !important;
}

/* ---- mini-cart / cart drawer, if the theme or a widget prints one ---- */

body.dm-pack-green-badger .widget_shopping_cart,
body.dm-pack-green-badger .widget_shopping_cart_content,
body.dm-pack-green-badger .woocommerce-mini-cart__empty-message {
	background: var(--gb-notice-surface);
	color: var(--gb-notice-text);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--gb-notice-font);
	font-size: 13px;
}

body.dm-pack-green-badger ul.woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.dm-pack-green-badger ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--gb-notice-line);
}

body.dm-pack-green-badger ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
	width: 56px;
	height: 56px;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
	float: none;
}

body.dm-pack-green-badger ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a:not(.remove) {
	color: var(--gb-notice-text);
	font-size: 13px;
	text-decoration: none;
}

body.dm-pack-green-badger ul.woocommerce-mini-cart .quantity {
	color: var(--gb-notice-muted);
	font-size: 12px;
	letter-spacing: .04em;
}

body.dm-pack-green-badger .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	padding: 16px 0;
	border-top: 1px solid var(--gb-notice-line);
	border-bottom: 0;
	color: var(--gb-notice-muted);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

body.dm-pack-green-badger .woocommerce-mini-cart__total strong,
body.dm-pack-green-badger .woocommerce-mini-cart__total .amount {
	color: var(--gb-notice-text);
	font-size: 16px;
	letter-spacing: .02em;
	text-transform: none;
}

body.dm-pack-green-badger .woocommerce-mini-cart__buttons {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
}

body.dm-pack-green-badger .woocommerce-mini-cart__buttons .button {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 18px;
	background: transparent !important;
	background-image: none !important;
	color: var(--gb-notice-gold) !important;
	border: 1px solid var(--gb-notice-gold) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--gb-notice-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-decoration: none;
}

/* The checkout button is the one primary action in the drawer — which it
   now says with a gold hairline rather than a gold slab, and with the
   authority's gold sweep when it is reached for. Its sibling カートを見る
   keeps the quieter line, so the hierarchy inside the drawer survives. */
body.dm-pack-green-badger .woocommerce-mini-cart__buttons .checkout {
	border-color: var(--gb-notice-gold) !important;
	color: var(--gb-notice-gold) !important;
}

body.dm-pack-green-badger .woocommerce-mini-cart__buttons .checkout:hover,
body.dm-pack-green-badger .woocommerce-mini-cart__buttons .checkout:focus-visible,
body.dm-pack-green-badger .woocommerce-mini-cart__buttons .checkout:active {
	color: var(--dm-black, #0b0b0a) !important;
}