/**
 * SEO-related frontend components.
 * Theme-agnostic: tokens only.
 */

/* ───── Related Products ─────
   Section break: a card-style block on a muted background. Stays inside
   the theme container (no full-bleed) so it doesn't fight Flatsome's
   max-width — earlier full-bleed bled past the container on wide
   viewports and looked like a layout bug. Border-radius + inner padding
   give it the "card section" feel while respecting theme boundaries
   (rule 21). */
[class*="-shop-related-products"] {
	margin-top: 0; /* meta footer's bottom padding owns the gap (≈30px total) */
	/* Symmetric padding (32px top + bottom, fluid inline) so the muted
	   "card section" reads as a balanced rectangle on every viewport.
	   The earlier 2.5rem bottom made the block look bottom-heavy when
	   the related grid had a single row; matching top/bottom keeps the
	   inset visually centred regardless of how many product rows render. */
	padding: 2rem clamp(1rem, 4vw, 2rem);
	background: var(--shop-color-surface-muted);
	border-radius: var(--shop-radius-md);
}

[class*="-shop-related-title"] {
	font-family: var(--shop-font-heading);
	/* Intentional 1.125rem (18px) — the related-title is rendered as a <p>
	   (anti-cannibalization: no H2 keyword conflict with the product H1),
	   so the original --shop-text-lg (24px fallback / 36px under Flatsome's
	   "large" preset) would read as oversized for paragraph copy. 18px sits
	   in the readable-but-prominent sweet spot for a section label without
	   competing visually with the H1 above. Token --shop-text-lg is kept
	   for true headings used elsewhere (cart subtotal, category-hub title,
	   archive H1 cap) — only this surface overrides. */
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 var(--shop-space-lg);
}

/* Term link inside the related-title (Anchor Mix · pyramid feed back to the
   category root). Gold accent + underline-on-hover signals "clickable" without
   shouting; the term name is the only piece of the heading that's actionable
   so it should read as a discrete anchor target. */
[class*="-shop-related-title__link"] {
	color: var(--shop-color-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--shop-transition-fast);
}

[class*="-shop-related-title__link"]:hover,
[class*="-shop-related-title__link"]:focus-visible {
	border-bottom-color: var(--shop-color-accent);
	outline: none;
}

/* ───── Archive banner (Term SEO hero — page 1 only) ─────
   Renders above the H1 on category archives. fetchpriority/eager set in
   PHP so the LCP candidate is the banner image when present.

   Card frame mirrors -shop-product-layout (shop-product.css:351-386):
   same surface, border, radius, shadow, and breakpoint-scaled padding
   so the category banner reads as the same "premium card" treatment
   as the single-product hero. All tokens; the rgba shadow + 20px
   radius are intentional hardcodes already in use on the product
   surface — mirroring them keeps the two pages in visual lock-step. */
[class*="-shop-archive-banner"] {
	margin: 0 0 var(--shop-space-md);
	padding: var(--shop-space-md);
	background: var(--shop-color-surface);
	border: 1px solid var(--shop-color-border);
	border-radius: 20px;
	overflow: hidden;
	/* intentional hardcode — diffuse depth shadow that reads on both
	   light and white page backgrounds. Mirrors -shop-product-layout
	   (shop-product.css:357-363). */
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.07);
}

@media (min-width: 850px) {
	[class*="-shop-archive-banner"] {
		padding: var(--shop-space-lg);
	}
}

/* Mobile cap — tighter padding so the card doesn't dominate small
   screens. Mirrors -shop-product-layout mobile rule. */
@media (max-width: 549px) {
	[class*="-shop-archive-banner"] {
		padding: var(--shop-space-sm);
		border-radius: var(--shop-radius-md);
	}
}

/* Image keeps its rounded edges inside the card padding. Without this
   the image bleeds to the card's outer corners on browsers that don't
   clip the child to the parent's border-radius. */
[class*="-shop-archive-banner"] img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--shop-radius-md) - 2px);
}

@media (min-width: 850px) {
	[class*="-shop-archive-banner"] img {
		border-radius: 14px;
	}
}
[class*="-shop-archive-banner"] a {
	display: block;
	transition: opacity var(--shop-transition-fast);
}
[class*="-shop-archive-banner"] a:hover,
[class*="-shop-archive-banner"] a:focus-visible {
	opacity: 0.9;
	outline: none;
}

/* ───── Minimal Inline — H1 hero / text-only toolbar / subtitle ─────
   Layout sequence: H1 → toolbar (icon + text inline, no chrome) →
   subtitle. No gold strip framing, no pill chips. The toolbar reads
   as a single line of supporting metadata, with a middot ("·") visual
   separator between the category link and the result count. */
[class*="-shop-archive-header"] {
	margin: 0 0 var(--shop-space-md);
	padding: var(--shop-space-lg) 0 0;
}

/* H1 — hero treatment, generous top margin within the section. */
[class*="-shop-archive-header"] [class*="-shop-archive-title"] {
	margin-bottom: var(--shop-space-sm);
}

/* Top-content — full-width subtitle below the toolbar. Defeat the
   65ch standalone-block clamp at line 76-83 so the intro reads as
   the supporting paragraph beneath the metadata row. */
[class*="-shop-archive-top-content"] {
	max-width: none;
	margin: 0 0 var(--shop-space-lg);
}

/* Desktop: more generous H1 top padding */
@media (min-width: 850px) {
	[class*="-shop-archive-header"] {
		padding-top: var(--shop-space-xl);
	}
}

/* Mobile: tighter H1 top padding */
@media (max-width: 549px) {
	[class*="-shop-archive-header"] {
		padding-top: var(--shop-space-md);
	}
}

/* ───── Archive top content (Term SEO intro paragraph) ─────
   Under H1, before the product grid. 65ch reading column matches the
   bottom long-form for consistent typography. Slightly larger font than
   bottom because this is the "lead" copy users actually read. */
[class*="-shop-archive-top-content"] {
	max-width: 65ch;
	margin: 0 0 var(--shop-space-lg);
	font-family: var(--shop-font-body);
	font-size: var(--shop-text-base);
	line-height: 1.7;
	color: var(--shop-color-text);
}
[class*="-shop-archive-top-content"] p {
	margin: 0 0 var(--shop-space-sm);
}
[class*="-shop-archive-top-content"] p:last-child {
	margin-bottom: 0;
}
[class*="-shop-archive-top-content"] a {
	color: var(--shop-color-accent);
	text-decoration: underline;
}

/* ───── Archive pagination heading (H2 on /page/N/) ─────
   Auto-rotated H2 above the product grid on paginated URLs. Page 1
   doesn't render this — the Top intro field carries the H2 there.
   Sized down with text-base so it reads as a section label, not a
   competing headline against the H1 above. */
[class*="-shop-archive-pagination-heading"] {
	font-family: var(--shop-font-heading);
	font-size: var(--shop-text-base);
	font-weight: 600;
	margin: 0 0 var(--shop-space-md);
	color: var(--shop-color-text-muted);
}

/* ───── Archive bottom content (Term SEO long-form) ─────
   Renders under the post grid on /shop/categories/{term}/ — page 1 only,
   blank on /page/N/ to dodge duplicate-content. Sits in a muted-background
   card so the section breaks visually from the white product grid above
   (same pattern as Related Products — keeps "browse mode" content
   visually clustered). Background pulls from --shop-color-surface-muted
   which chains to Flatsome's --fs-color-base / WP block-editor base
   token, so a theme switch retones the section without us hardcoding hex.
   Inner copy stays on a 65ch reading column for line-length comfort. */
[class*="-shop-archive-bottom-content"] {
	margin-top: var(--shop-space-lg);
	/* margin-bottom: breathing room before the footer so the long-form
	   card doesn't sit flush against the dark footer bar. Token-based
	   so spacing scales with the rest of the page rhythm. */
	margin-bottom: var(--shop-space-lg);
	padding: 2rem clamp(1rem, 4vw, 2rem) 2.5rem;
	/* Mirror trust block (-shop-trust-info) — same surface + shadow so
	   the long-form card and trust card share one visual language across
	   category and product pages. */
	background: var(--shop-color-surface);
	border-radius: var(--shop-radius-md);
	box-shadow: var(--shop-shadow-md);
	font-family: var(--shop-font-body);
	line-height: 1.7;
	color: var(--shop-color-text);
}
[class*="-shop-archive-bottom-content"] > * {
	max-width: 65ch;
	margin-left: auto;
	margin-right: auto;
}
[class*="-shop-archive-bottom-content"] > *:first-child {
	margin-top: 0;
}
[class*="-shop-archive-bottom-content"] > *:last-child {
	margin-bottom: 0;
}
[class*="-shop-archive-bottom-content"] h2 {
	font-family: var(--shop-font-heading);
	font-size: var(--shop-text-lg);
	margin: var(--shop-space-lg) auto var(--shop-space-sm);
}
[class*="-shop-archive-bottom-content"] h3 {
	font-family: var(--shop-font-heading);
	font-size: var(--shop-text-base);
	font-weight: 600;
	margin: var(--shop-space-md) auto var(--shop-space-xs);
}
[class*="-shop-archive-bottom-content"] p {
	margin: 0 auto var(--shop-space-sm);
}
[class*="-shop-archive-bottom-content"] a {
	color: var(--shop-color-accent);
	text-decoration: underline;
}

/* ───── Trust Info (E-E-A-T) ─────────────────────────────────────────────
   Port from sample-uxui-info-shop.html — "lifted card" pattern:
   • surface white + box-shadow (not flat-with-border-stripe)
   • CTA chips: circular icon badge + label/value · vertical divider on right
   • Info table: 110px label column · soft "badge" for short values
   • Footer: muted single-line, top hairline

   Selector strategy: [class$=] (ends-with) to dodge Trap A (parent matches
   its own children) AND Trap B (sibling-suffix, e.g. "-cta" vs "-cta-btn").
   ────────────────────────────────────────────────────────────────────── */

[class$="-shop-trust-info"] {
	margin-top: var(--shop-space-lg);
	margin-bottom: var(--shop-space-xl);
	padding: var(--shop-space-lg) var(--shop-space-lg) var(--shop-space-md);
	background: var(--shop-color-surface);
	border-radius: var(--shop-radius-md);
	box-shadow: var(--shop-shadow-md);
	/* Override themes that uppercase <dl> globally (e.g. Flatsome's
	   `dl { text-transform: uppercase; }`). Trust Info must show
	   admin's input verbatim — phone numbers, LINE IDs, addresses
	   must not be transformed. */
	text-transform: none;
}

[class$="-trust-info__heading"] {
	display: flex;
	align-items: center;
	gap: var(--shop-space-xs);
	font-family: var(--shop-font-heading);
	font-size: var(--shop-text-base);
	font-weight: 700;
	color: var(--shop-color-text);
	margin: 0 0 var(--shop-space-md);
}
[class$="-trust-info__heading"] svg {
	flex-shrink: 0;
	color: var(--shop-color-accent);
}

/* 2-col grid: left CTA chips · right info table. */
[class$="-trust-info__grid"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: var(--shop-space-md);
	align-items: start;
}

/* ── Left column: CTA chips ───────────────────────────────────────────── */
[class$="-trust-info__cta"] {
	display: flex;
	flex-direction: column;
	gap: var(--shop-space-sm);
	margin: 0;
	padding-right: var(--shop-space-md);
	border-right: 1px solid var(--shop-color-border);
}

[class$="-trust-info__cta-btn"],
[class$="-trust-info__cta-btn--phone"],
[class$="-trust-info__cta-btn--line"] {
	display: flex;
	align-items: center;
	gap: var(--shop-space-sm);
	padding: var(--shop-space-sm) var(--shop-space-md);
	border-radius: var(--shop-radius-md);
	background: var(--shop-color-bg-soft);
	border: 1px solid var(--shop-color-border);
	color: var(--shop-color-text);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
	box-sizing: border-box;
}
[class$="-trust-info__cta-btn"]:hover,
[class$="-trust-info__cta-btn--phone"]:hover,
[class$="-trust-info__cta-btn--line"]:hover {
	border-color: var(--shop-color-accent);
	box-shadow: var(--shop-shadow-sm);
	color: var(--shop-color-text);
	text-decoration: none;
}
[class$="-trust-info__cta-btn"]:active,
[class$="-trust-info__cta-btn--phone"]:active,
[class$="-trust-info__cta-btn--line"]:active {
	transform: translateY(1px);
}

/* Phone icon — circular badge wrapping a Lucide stroke SVG (currentColor). */
[class$="-trust-info__cta-btn--phone"] > svg:first-of-type {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	padding: 9px;
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-surface);
	color: var(--shop-color-accent);
	box-sizing: border-box;
}

/* LINE icon — official brand logo (self-colored, rounded square in glyph).
   No background/padding wrapper: the logo's outer fill IS the badge. */
[class$="-trust-info__cta-btn--line"] > svg:first-of-type {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
}

/* Trailing chevron — muted by default, animates on hover */
[class$="-trust-info__cta-arrow"] {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	color: var(--shop-color-text-muted);
	transition: transform .15s ease, color .15s ease;
	flex-shrink: 0;
}
[class$="-trust-info__cta-btn"]:hover [class$="-trust-info__cta-arrow"],
[class$="-trust-info__cta-btn--phone"]:hover [class$="-trust-info__cta-arrow"],
[class$="-trust-info__cta-btn--line"]:hover [class$="-trust-info__cta-arrow"] {
	color: var(--shop-color-accent);
	transform: translateX(3px);
}

[class$="-trust-info__cta-text"] {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
	flex: 1;
}

[class$="-trust-info__cta-label"] {
	font-size: var(--shop-text-xs);
	/* Contrast — labels ("Phone", "LINE") sit on a tinted CTA pill;
	   muted color tripped Lighthouse on the muted surface. */
	color: var(--shop-color-text);
	font-weight: 500;
}

[class$="-trust-info__cta-value"] {
	font-size: var(--shop-text-base);
	color: var(--shop-color-text);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Right column: info table (dl) ────────────────────────────────────── */
[class$="-shop-trust-list"],
[class$="-shop-trust-list"] dt,
[class$="-shop-trust-list"] dd,
[class$="-shop-trust-list"] a,
[class$="-shop-trust-list"] code {
	text-transform: none;
}

[class$="-shop-trust-list"] {
	display: grid;
	/* Sample: 110px label · 1fr value · row gap 8px (xs).
	   Tight rows: each pair is a "field row" not airy section. */
	grid-template-columns: 110px minmax(0, 1fr);
	gap: var(--shop-space-xs) var(--shop-space-xs);
	margin: 0;
	align-content: start;
}

[class$="-shop-trust-list"] dt {
	font-weight: 500;
	/* Contrast — was --shop-color-text-muted; failed Lighthouse against
	   the trust-info card surface. The dd value already uses full text
	   color (line 427), so dt now matches; visual hierarchy comes from
	   font-weight (500 vs 500) and width (nowrap label vs flowing value). */
	color: var(--shop-color-text);
	font-size: var(--shop-text-sm);
	padding-top: 2px;        /* baseline-align with dd value */
	white-space: nowrap;
}

[class$="-shop-trust-list"] dd {
	margin: 0;
	min-width: 0;
	color: var(--shop-color-text);
	font-size: var(--shop-text-sm);
	font-weight: 500;
	line-height: 1.55;
	word-break: break-word;
}

[class$="-shop-trust-list"] a {
	color: var(--shop-color-accent);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid var(--shop-color-border);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
[class$="-shop-trust-list"] a:hover {
	border-bottom-color: var(--shop-color-accent);
}

/* "ดูแผนที่" pill badge — inline next to address. Pill shape signals
   "external link / clickable" without consuming a separate row. Reset
   the trust-list <a> default (border-bottom underline) so the pill's
   border isn't double-drawn. Specificity beats the trust-list a rule
   above by adding the [class] attribute selector. */
[class*="-trust-info__map-pill"] {
	border: 1px solid var(--shop-color-border);
	border-radius: 999px;
	padding: 4px 10px;
	margin-left: 8px;
	font-size: var(--shop-text-sm, .875rem);
	font-weight: 500;
	color: var(--shop-color-text-muted);
	background: transparent;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
[class$="-shop-trust-list"] [class*="-trust-info__map-pill"] {
	/* Reset <a>-in-trust-list defaults that would otherwise show through */
	border-bottom: 1px solid var(--shop-color-border);
}
[class*="-trust-info__map-pill"]:hover,
[class*="-trust-info__map-pill"]:focus-visible {
	color: var(--shop-color-accent);
	border-color: var(--shop-color-accent);
	background: var(--shop-color-surface-muted);
	outline: none;
}
[class*="-trust-info__map-pill"] svg {
	flex: 0 0 auto;
}

/* Business reg pill — soft chip (not <code> mono artifact). */
[class$="-shop-trust-list"] code {
	display: inline-block;
	font-family: var(--shop-font-body);
	font-size: var(--shop-text-xs);
	font-weight: 600;
	background: var(--shop-color-bg-soft);
	color: var(--shop-color-text);
	padding: 2px var(--shop-space-xs);
	border-radius: var(--shop-radius-sm);
	border: 1px solid var(--shop-color-border);
}

/* Footer: muted single line, hairline divider above. */
[class$="-shop-last-updated"] {
	display: flex;
	align-items: center;
	gap: var(--shop-space-xs);
	margin-top: var(--shop-space-md);
	padding-top: var(--shop-space-sm);
	border-top: 1px solid var(--shop-color-border);
	font-size: var(--shop-text-xs);
	/* Contrast — was --shop-color-text-muted; failed Lighthouse on
	   the trust-info muted surface. Full text color, the icon next to
	   it already gets visual de-emphasis via opacity:.7 below. */
	color: var(--shop-color-text);
}
[class$="-shop-last-updated"] svg {
	flex-shrink: 0;
	opacity: .7;
}

/* Mobile: stack columns + drop the vertical divider, replace w/ bottom rule. */
@media (max-width: 549px) {
	[class$="-shop-trust-info"] {
		padding: var(--shop-space-md);
	}
	[class$="-trust-info__grid"] {
		grid-template-columns: 1fr;
		gap: var(--shop-space-md);
	}
	[class$="-trust-info__cta"] {
		padding-right: 0;
		padding-bottom: var(--shop-space-md);
		border-right: none;
		border-bottom: 1px solid var(--shop-color-border);
	}
}