/*
Theme Name: Eco Ring Cambodia - Frost
Theme URI: https://ecoringcambodia.com.kh/
Description: Custom child theme for Eco Ring Cambodia, built on Frost and the WordPress Full Site Editing system.
Author: Voice4u, Inc.
Author URI: https://voice4u.io/

Version: 1.0.0

Tags: accessibility-ready, block-styles, custom-background, custom-colors, custom-logo, custom-menu, e-commerce, editor-style, featured-images, full-width-template, one-column, translation-ready, wide-blocks

Template: frost

License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Requires at least: 6.5
Requires PHP: 7.4
Text Domain: frost
*/


/* Defaults
---------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
	transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
	text-decoration-thickness: 1px;
}

/* WP's global link element style doesn't cover :visited, so browsers fall
   back to their own default purple/blue for previously-clicked links unless
   this is set explicitly. */
a:visited {
	color: var(--wp--preset--color--accent, #B07E5C);
}

b,
strong,
th {
	font-weight: var(--wp--custom--font-weight--medium);
}

mark {
	background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 100%);
	background-position: 0 85%;
	background-repeat: repeat-x;
	background-size: 100% 15%;
}

/* -- Forms -- */

input,
select,
textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: var(--wp--custom--line-height--body);
	padding: 10px 20px;
	width: 100%;
}

input:focus,
textarea:focus {
	background-color: var(--wp--preset--color--neutral);
	outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
}

::placeholder {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.5;
}

/* Blocks
---------------------------------------- */

/* -- Code -- */

*:not(.wp-block-code) > code {
	background-color: var(--wp--preset--color--neutral);
	font-size: var(--wp--preset--font-size--small);
	padding: 5px 8px;
}

/* -- Navigation -- */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	border: 1px solid currentColor;
	padding: 2px;
}

.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--base);
}

/* -- Navigation Submenu -- */

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--contrast);
	border: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 10px;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
	padding: 2px 10px;
}

/* Utility
---------------------------------------- */

/* -- Box Shadow -- */

.is-style-shadow-light {
	box-shadow: var(--wp--preset--shadow--light);
}

.is-style-shadow-solid {
	box-shadow: var(--wp--preset--shadow--solid);
}

/* Media Queries
---------------------------------------- */

@media only screen and (max-width: 600px) {

	/* -- Utility -- */

	.is-style-hidden-mobile {
		display: none !important;
	}

}

@media only screen and (max-width: 782px) {

	/* -- Columns -- */

	.is-style-columns-reverse {
		flex-direction: column-reverse;
	}

}


/* ════════════════════════════════════════════════════════════
   Design Ver 3 — Copper Warm System
   ════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
}

.site-header .brand-logo img,
.site-header .wp-block-site-logo img {
	height: 44px;
	width: auto;
	max-width: none;
}

.primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.01em;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s, color 0.15s;
	padding-bottom: 2px;
}

.primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--accent, #B07E5C);
	color: var(--wp--preset--color--accent, #B07E5C);
}

.primary-nav .wp-block-navigation__submenu-container {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC) !important;
	box-shadow: 0 8px 24px rgba(20,24,32,.08);
	min-width: 200px;
	padding: 8px 0;
}

.primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	letter-spacing: 0.02em;
	padding: 8px 18px;
	color: var(--wp--preset--color--contrast, #1A1A1A);
}

.primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--bg-soft, #EEF3F8);
	color: var(--wp--preset--color--accent, #B07E5C);
}

/* "Featured Brand" mega-menu: wide multi-column grid instead of the default narrow single-column dropdown */
.primary-nav .wp-block-navigation-item.mega-menu-brands .wp-block-navigation__submenu-container {
	min-width: 640px;
	max-width: 760px;
	max-height: 70vh;
	overflow-y: auto;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 8px;
	padding: 16px 20px;
}

@media (max-width: 900px) {
	.primary-nav .wp-block-navigation-item.mega-menu-brands .wp-block-navigation__submenu-container {
		min-width: 0;
		grid-template-columns: repeat(2, 1fr);
	}
}

.quote-pill .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: Arial, Helvetica, sans-serif;
	white-space: nowrap;
}

.quote-telegram .wp-block-button__link {
	background-color: #29A6E1 !important;
}

.quote-messenger .wp-block-button__link {
	background: linear-gradient(135deg, #00B2FF, #006AFF) !important;
}

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

.lang-switch .lang-opt {
	color: #707070;
	cursor: pointer;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.15s;
}

.lang-switch .lang-opt.is-current {
	color: #1A1A1A;
	font-weight: 600;
}

.lang-switch .lang-opt:hover {
	color: var(--wp--preset--color--accent, #B07E5C);
}

.lang-switch .lang-sep {
	color: #BFBFBF;
	pointer-events: none;
}

.header-search .wp-block-search__button {
	background: transparent;
	border: none;
	padding: 4px;
}

/* ── Section heading pattern ──────────────────────────────── */

.eyebrow {
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", Times, serif);
	font-style: italic;
	color: var(--wp--preset--color--eyebrow-accent, #C97C3F);
	letter-spacing: 0.04em;
}

.title-rule.wp-block-separator {
	width: 64px !important;
	max-width: 64px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	height: 2px;
	border: none;
	background-color: var(--wp--preset--color--accent, #B07E5C) !important;
}

/* ── Home Hero Slideshow (pure CSS crossfade, no slider plugin) ── */

.home-hero-slideshow { line-height: 0; }

.hero-slides {
	position: relative;
	width: 100%;
	aspect-ratio: 1376 / 768;
	/*
	 * Full-bleed width + fixed aspect-ratio means height scales up with
	 * viewport width uncapped — fine up to ~1540px, but on very wide desktop
	 * monitors (e.g. a maximized browser on a 27" iMac) it grows past 1000px
	 * tall. Capping height here instead of flattening the ratio itself keeps
	 * mobile/tablet/laptop untouched; object-fit:cover just crops a bit off
	 * the left/right (blurred background, not the subject/logo/text) on
	 * screens wide enough to hit the cap.
	 */
	max-height: 860px;
	overflow: hidden;
	background: var(--wp--preset--color--bg-soft, #EEF3F8);
}

.hero-slides img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: hero-slide-fade 24s infinite;
}

.hero-slides img:nth-child(1) { animation-delay: 0s; }
.hero-slides img:nth-child(2) { animation-delay: 8s; }
.hero-slides img:nth-child(3) { animation-delay: 16s; }

@keyframes hero-slide-fade {
	0%   { opacity: 0; }
	4%   { opacity: 1; }
	29%  { opacity: 1; }
	33%  { opacity: 0; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-slides img {
		animation: none;
		opacity: 0;
	}
	.hero-slides img:first-child {
		opacity: 1;
	}
}

/* ── Feature Band ───────────────────────────────────────────── */

.home-feature .feature-link {
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	text-decoration: none;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	transition: color 0.2s, border-color 0.2s;
}

.home-feature .feature-link:hover {
	color: var(--wp--preset--color--accent, #B07E5C);
	border-bottom-color: var(--wp--preset--color--accent, #B07E5C);
}

.home-feature .feature-arrow {
	color: var(--wp--preset--color--accent, #B07E5C);
}

/*
 * Core's own is-stacked-on-mobile breakpoint (max-width: 600px) collapses
 * to a single grid column but doesn't reassign grid-row, so the two
 * children fall back to DOM order — media always ends up first regardless
 * of has-media-on-the-right. There's no core attribute for "content first
 * on mobile", so grid-row is reassigned explicitly here (same technique
 * WP's own community documents for fixing has-media-on-the-right stacking
 * order, just inverted: we want content first, not media first).
 */
@media (max-width: 600px) {
	.home-feature .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}
	.home-feature .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}
}

/* ── Guidelines ─────────────────────────────────────────────── */

.guide-card {
	text-align: center;
}

.guide-icon {
	width: 200px;
	height: 200px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--bg-warm, #F5E5D7);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.guide-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-how-it-works .value-body {
	text-align: center;
}

/* ── Free Estimate CTA ──────────────────────────────────────── */

.cta-channels {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

.channel-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border-radius: 999px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	color: #fff;
	transition: opacity 0.2s;
}

.channel-pill:hover { transform: translateY(-2px); opacity: 1; filter: brightness(1.04); }
.channel-pill.phone { background: #fff; color: #1A1A1A; border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC); }
.channel-pill.phone:hover { color: #1A1A1A; }
.channel-pill.phone .dot { color: #2BA84A; }
.channel-pill.telegram { background: #2AABEE; }
.channel-pill.messenger { background: #7B5CFF; }

/* ── Brand strip ────────────────────────────────────────────── */

.brand-strip-head { text-align: center; }

/* Brand tile grid — rendered by the ecoring/term-grid dynamic block (brand taxonomy) */
.brand-grid {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 20px 16px !important;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (min-width: 1024px) {
	.brand-grid {
		grid-template-columns: repeat(6, 1fr) !important;
	}
}

/* Smaller category grids (e.g. Items We Can Buy) — fewer, larger tiles than the ~30-brand homepage grid */
.item-category-grid {
	grid-template-columns: repeat(3, 1fr) !important;
}

@media (min-width: 640px) {
	.item-category-grid {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

@media (min-width: 1024px) {
	.item-category-grid {
		grid-template-columns: repeat(5, 1fr) !important;
	}
}

.brand-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	gap: 8px;
}

.brand-tile .brand-thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	display: grid;
	place-items: center;
	padding: 8px;
	overflow: hidden;
	transition: border-color 0.25s, box-shadow 0.25s;
}

.brand-tile:hover .brand-thumb {
	border-color: var(--wp--preset--color--accent, #B07E5C);
	box-shadow: 0 8px 24px rgba(20,24,32,.08);
}

.brand-tile .brand-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.35s;
}

.brand-tile:hover .brand-thumb img { transform: scale(1.06); }

.brand-tile .brand-name {
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-size: 13px;
	font-weight: 400;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
	margin: 0;
	transition: color 0.2s;
}

.brand-tile:hover .brand-name { color: var(--wp--preset--color--accent, #B07E5C); }

/* ── Store info ─────────────────────────────────────────────── */

.store-map-embed { border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC); }

.store-hours {
	color: var(--wp--preset--color--ink-secondary, #4A4A4A);
	font-size: 15px;
}

/* ── Sell CTA band ──────────────────────────────────────────── */

.sell-cta { text-align: center; }

.sell-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 36px;
}

.sell-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 999px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: #fff;
	transition: opacity 0.2s;
}

.sell-pill:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff; }
.sell-pill.telegram { background: #2AABEE; }
.sell-pill.messenger { background: #0A7CFF; }

/* ── Footer ─────────────────────────────────────────────────── */
/* Two-tone: footer-cta (400+ stat band) is black, footer-main is white. */

.site-footer.wp-block-group,
footer.site-footer {
	background-color: #ffffff !important;
	color: #1A1A1A;
}

.footer-cta-row {
	display: grid !important;
	grid-template-columns: 260px 1px 1fr !important;
	align-items: center;
	gap: 36px;
}

.footer-stat {
	text-align: left;
}

.footer-cta-divider {
	display: block;
	width: 1px !important;
	height: 80px;
	background: rgba(255, 255, 255, .18);
	flex-shrink: 0;
}

@media (max-width: 900px) {
	.footer-cta-row {
		display: flex !important;
		flex-direction: column;
		text-align: center;
	}
	.footer-stat { text-align: center; }
	.footer-cta-divider { display: none; }
}

.footer-col-heading.wp-block-heading {
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif) !important;
	color: #707070 !important;
}

.footer-list.wp-block-list {
	list-style: none !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.footer-list.wp-block-list li { list-style: none; display: flex; align-items: center; gap: 8px; }
.footer-list.wp-block-list li::before { display: none; }

.footer-list-pin {
	flex-shrink: 0;
	color: var(--wp--preset--color--accent, #B07E5C);
}

.footer-list.wp-block-list a,
.footer-list.wp-block-list a:visited {
	color: #1A1A1A !important;
	text-decoration: none !important;
	font-size: 14px;
	transition: color 0.15s;
}

.footer-list.wp-block-list a:hover,
.footer-list.wp-block-list a:visited:hover {
	color: var(--wp--preset--color--primary, #1b5e20) !important;
}

.footer-social .wp-social-link,
.footer-social .wp-social-link:visited {
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	color: #1A1A1A !important;
	transition: border-color 0.2s, background-color 0.2s;
}

.footer-social .wp-social-link:hover,
.footer-social .wp-social-link:visited:hover {
	background: var(--wp--preset--color--primary, #1b5e20) !important;
	border-color: var(--wp--preset--color--primary, #1b5e20) !important;
	color: #fff !important;
}

.footer-social .wp-social-link svg,
.footer-social .wp-social-link svg path { fill: #1A1A1A !important; }
.footer-social .wp-social-link:hover svg,
.footer-social .wp-social-link:hover svg path { fill: #fff !important; }

.footer-copyright {
	font-size: 14px !important;
	color: #707070 !important;
}

.footer-legal-links {
	margin: 0;
	font-size: 14px !important;
	color: #707070 !important;
}

.footer-legal-links a,
.footer-legal-links a:visited {
	color: #707070 !important;
	text-decoration: none !important;
}

.footer-legal-links a:hover,
.footer-legal-links a:visited:hover {
	color: var(--wp--preset--color--accent, #B07E5C) !important;
}

.footer-legal-sep {
	margin: 0 8px;
	color: #BFBFBF;
}

.footer-latest-posts li {
	line-height: 1.4;
}

.footer-post-date {
	color: #9A9A9A;
	font-size: 13px;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.header-actions .wp-block-buttons { display: none; }
}

@media (max-width: 782px) {
	.brand-grid {
		grid-template-columns: repeat(4, 1fr) !important;
	}

	.cta-channels { gap: 8px; }
	.channel-pill { padding: 10px 18px; font-size: 14px; }
}

@media (max-width: 480px) {
	.brand-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* ════════════════════════════════════════════════════════════
   Purchased Item CPT — archives + detail page
   ════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────────────────── */

.breadcrumb {
	/* Constrained parents center each direct child individually to the
	   content column width; without this, the breadcrumb (a flex row that
	   shrink-wraps to its content) centers narrower than the full-width
	   eyebrow/heading siblings below it and appears offset to the right. */
	width: 100%;
}

.breadcrumb p {
	margin: 0;
}

.breadcrumb a {
	color: var(--wp--preset--color--ink-secondary, #4A4A4A);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--wp--preset--color--accent, #B07E5C);
}

.breadcrumb .wp-block-post-terms {
	font-size: 14px;
}

.breadcrumb .wp-block-post-terms a {
	color: var(--wp--preset--color--ink-secondary, #4A4A4A);
}

/* ── Archive hero ───────────────────────────────────────────── */

.archive-hero .wp-block-term-description p {
	margin: 0;
	max-width: 640px;
}

/* ── Product grid / cards ───────────────────────────────────── */

.product-grid.wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 28px 24px !important;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 1024px) {
	.product-grid.wp-block-post-template {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 782px) {
	.product-grid.wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 480px) {
	.product-grid.wp-block-post-template {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}

.product-card {
	background: #fff;
	transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.product-card:hover {
	border-color: var(--wp--preset--color--accent, #B07E5C) !important;
	box-shadow: 0 12px 28px rgba(20, 24, 32, .1);
	transform: translateY(-2px);
}

.card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wp--preset--color--bg-soft, #EEF3F8);
}

.card-media .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.card-media .wp-block-post-featured-image a,
.card-media .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-brand-tag.wp-block-post-terms {
	position: absolute;
	top: 12px;
	left: 12px;
	margin: 0;
	background: rgba(255, 255, 255, .92);
	padding: 4px 12px;
	font-size: 12px;
	letter-spacing: 0.02em;
}

.card-brand-tag.wp-block-post-terms a {
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
	text-decoration: none;
}

.card-title.wp-block-post-title {
	margin: 0;
	line-height: 1.3;
}

.card-title.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.card-title.wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent, #B07E5C);
}

.card-meta > .wp-block-group {
	width: 100%;
	justify-content: space-between;
}

.card-cta {
	display: inline-block;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s;
}

.product-card:hover .card-cta {
	color: var(--wp--preset--color--accent, #B07E5C);
}

/* ── Condition dots (ecoring/condition-dots block) ─────────── */

.cond-dots {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.cond-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--border-subtle, #E6E2DC);
	display: inline-block;
}

.cond-dot.on {
	background: var(--wp--preset--color--accent, #B07E5C);
}

.cond-num {
	margin-left: 6px;
	font-size: 12px;
	color: var(--wp--preset--color--ink-muted, #7A7A7A);
}

.item-condition-row .cond-dot {
	width: 9px;
	height: 9px;
}

/* ── Single item detail ─────────────────────────────────────── */

.item-media.wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wp--preset--color--bg-soft, #EEF3F8);
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
}

.item-media.wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.item-meta-row {
	width: 100%;
	justify-content: space-between;
}

.item-meta-row p {
	margin: 0;
}

.item-meta-row .wp-block-post-terms {
	margin: 0;
}

.item-contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* ── Store info (ecoring/store-info block) ──────────────────── */

.store-info-block .store-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}

.store-info-block .store-card {
	flex: 1 1 320px;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	padding: 32px;
}

.store-info-block .store-card-image {
	margin: 0 0 20px;
}

.store-info-block .store-card-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.store-info-block .store-card-name {
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-size: 24px;
	font-weight: 600;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
	margin: 0 0 12px;
}

.store-info-block .store-address,
.store-info-block .store-phone,
.store-info-block .store-hours {
	color: var(--wp--preset--color--ink-secondary, #4A4A4A);
	font-size: 15px;
	line-height: 1.65;
	margin: 0 0 8px;
}

.store-info-block .store-phone a {
	color: inherit;
	text-decoration: none;
}

.store-info-block .store-phone a:hover {
	color: var(--wp--preset--color--accent, #B07E5C);
}

.store-info-block .store-map-embed {
	flex: 1 1 420px;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	overflow: hidden;
}

.store-info-block .store-map-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ── Store locations grid (ecoring/store-grid block — front page) ────────
   Auto-fit columns so adding a new `store` term just adds another card;
   no breakpoints to revisit as Eco Ring opens more locations. */

.store-location-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
}

.store-location-card {
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	padding: 24px;
}

.store-location-photo {
	display: block;
	margin: 0 0 20px;
}

.store-location-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.store-location-name {
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
	margin: 0 0 12px;
}

.store-location-name a {
	color: inherit;
	text-decoration: none;
}

.store-location-name a:hover {
	color: var(--wp--preset--color--accent, #B07E5C);
}

.store-location-address,
.store-location-phone,
.store-location-hours {
	color: var(--wp--preset--color--ink-secondary, #4A4A4A);
	font-size: 15px;
	line-height: 1.65;
	margin: 0 0 8px;
}

.store-location-phone a {
	color: inherit;
	text-decoration: none;
}

.store-location-phone a:hover {
	color: var(--wp--preset--color--accent, #B07E5C);
}

.store-location-map {
	margin-top: 16px;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	overflow: hidden;
}

.store-location-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ── Store contact icons (ecoring_render_store_contact_icons()) ──────────
   Round call/Telegram/Messenger buttons, shared by ecoring/store-info and
   ecoring/store-grid. Visual match for .footer-social's icon treatment,
   but in the site's own brand accent rather than Frost's default green. */

.store-contact-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 12px 0 0;
}

.store-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.store-contact-icon svg,
.store-contact-icon svg path {
	fill: currentColor;
}

.store-contact-icon:hover {
	background: var(--wp--preset--color--accent, #B07E5C);
	border-color: var(--wp--preset--color--accent, #B07E5C);
	color: #fff;
}

/* ── FAQ accordion (ecoring/faq-item block) ───────────────────
   Native <details>/<summary> — no JS. Default disclosure triangle is
   hidden in favor of a custom "+" that rotates to "×" on [open]. */

.faq-list {
	border-top: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
}

.faq-item {
	border-bottom: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
}

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 4px;
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
	cursor: pointer;
	list-style: none;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 400;
	color: var(--wp--preset--color--accent, #B07E5C);
	transition: transform 0.2s;
}

.faq-item[open] .faq-question::after {
	transform: rotate(45deg);
}

.faq-item:hover .faq-question {
	color: var(--wp--preset--color--accent, #B07E5C);
}

.faq-answer {
	padding: 0 4px 20px;
	color: var(--wp--preset--color--ink-secondary, #4A4A4A);
	font-size: 15px;
	line-height: 1.65;
}

.faq-answer p {
	margin: 0;
}

/* ── Contact form (ecoring/contact-form block) ──────────────── */

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.form-row,
.form-row-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-row-group {
	flex-direction: row;
	gap: 20px;
}

.form-row-group .form-row {
	flex: 1 1 0;
}

.contact-form label {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
}

.contact-form label .required {
	color: var(--wp--preset--color--accent, #B07E5C);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
}

.contact-form textarea {
	resize: vertical;
}

.form-honeypot {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.contact-submit {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--accent, #B07E5C);
	color: #fff;
	border: none;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-size: 15px;
	letter-spacing: 0.02em;
	padding: 14px 32px;
	cursor: pointer;
	transition: filter 0.2s, transform 0.2s;
}

.contact-submit:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
}

.form-notice {
	padding: 14px 20px;
	margin-bottom: 20px;
	font-size: 15px;
	border-radius: 2px;
}

.form-notice-success {
	background: #E8F3EA;
	color: #1b5e20;
}

.form-notice-error {
	background: #FBEAEA;
	color: #8E2F2F;
}

/* ── Contact info card ──────────────────────────────────────── */

.contact-info-card h3 {
	margin-top: 0;
}

.contact-info-card p a {
	color: inherit;
	text-decoration: none;
}

.contact-info-card p a:hover {
	color: var(--wp--preset--color--accent, #B07E5C);
}

.contact-info-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 782px) {
	.contact-grid.wp-block-columns {
		flex-wrap: wrap;
	}

	.form-row-group {
		flex-direction: column;
	}
}

/* ── Company page ───────────────────────────────────────────── */

.company-lede {
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
}

.company-lede em {
	font-style: italic;
	color: var(--wp--preset--color--accent, #B07E5C);
}

.statement-figure {
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--bg-soft, #EEF3F8);
	overflow: hidden;
	margin: 0;
}

/*
 * The Luxury Resale page's store gallery — 6 real photos in a 2-row-by-3
 * grid. Previously a wp:columns block, which only ever lays children out in
 * a single row (no true multi-row grid support), so it silently rendered
 * as one cramped row of 3 rather than the intended 2x3. Plain CSS grid here
 * instead, reusing .statement-figure's existing cover-crop treatment so
 * mixed portrait/landscape source photos still fill each tile uniformly.
 */
.store-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 782px) {
	.store-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.store-gallery-grid {
		grid-template-columns: 1fr;
	}
}

.statement-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.values-grid.wp-block-columns {
	gap: 28px !important;
}

.value-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s, border-color 0.4s;
}

.value-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(20,24,32,.1);
	border-color: var(--wp--preset--color--accent, #B07E5C);
}

.value-media {
	aspect-ratio: 5 / 4;
	background: var(--wp--preset--color--bg-soft, #EEF3F8);
	overflow: hidden;
	display: grid;
	place-items: center;
	margin: 0;
}

.value-media.warm {
	background: var(--wp--preset--color--bg-warm, #F5E5D7);
}

.value-media img {
	width: 70%;
	height: 70%;
	object-fit: contain;
	transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}

.value-card:hover .value-media img {
	transform: scale(1.06);
}

.value-body {
	padding: 32px 30px 38px;
}

.value-num {
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-size: 16px;
	color: var(--wp--preset--color--accent, #B07E5C);
	letter-spacing: 0.14em;
	display: block;
	margin-bottom: 14px;
}

.value-body h3 {
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-weight: 600;
	font-size: 22px;
	margin: 0 0 12px;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
}

.value-body p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-secondary, #4A4A4A);
	margin: 0;
}

.facts-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 32px;
}

.facts-table tr {
	border-bottom: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
}

.facts-table tr:first-child {
	border-top: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
}

.facts-table th {
	text-align: left;
	vertical-align: top;
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-weight: 600;
	font-size: 16px;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
	width: 240px;
	padding: 20px 24px 20px 0;
}

.facts-table td {
	font-size: 15px;
	color: var(--wp--preset--color--ink-secondary, #4A4A4A);
	padding: 20px 0;
	line-height: 1.6;
}

.global-network {
	position: relative;
	overflow: hidden;
}

.global-network-map {
	position: absolute;
	inset: 0;
	background-image: url("/wp-content/themes/eco-ring-cambodia-frost/assets/images/world-map.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: 0.08;
	pointer-events: none;
}

.global-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px 24px;
}

.global-cell {
	text-align: center;
}

.global-flag {
	width: 64px;
	height: 44px;
	margin: 0 auto 16px;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	background: #fff;
}

.global-country {
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--ink-primary, #1A1A1A);
	margin: 0 0 6px;
}

.global-meta {
	font-size: 14px;
	color: var(--wp--preset--color--ink-muted, #7A7A7A);
	line-height: 1.5;
}

.global-stores {
	display: block;
	font-family: var(--wp--preset--font-family--serif, "Times New Roman", serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #B07E5C);
	margin-top: 4px;
}

@media (max-width: 900px) {
	.statement-grid.wp-block-columns {
		flex-wrap: wrap;
	}

	.global-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Chip grid (e.g. "Also Accepted" on Items We Can Buy) ───── */

.chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.chip {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	border-radius: 999px;
	font-size: 14px;
	color: var(--wp--preset--color--ink-secondary, #4A4A4A);
	background: #fff;
}

/* ── Blog sidebar ───────────────────────────────────────────── */

.blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.sidebar-widget {
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
	background: #fff;
}

.sidebar-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
}

.sidebar-search .wp-block-search__input {
	border: none;
	padding: 8px 12px;
}

.sidebar-search .wp-block-search__button {
	background: var(--wp--preset--color--accent, #B07E5C);
	border: none;
	color: #fff;
	padding: 0 14px;
}

.sidebar-list {
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.sidebar-list li { list-style: none; }
.sidebar-list li::before { display: none; }

.sidebar-list a {
	color: var(--wp--preset--color--ink-secondary, #4A4A4A) !important;
	text-decoration: none !important;
}

.sidebar-list a:hover,
.sidebar-list a:visited:hover {
	color: var(--wp--preset--color--accent, #B07E5C) !important;
}

/* ── Blog content + sidebar layout ──────────────────────────── */

.blog-layout.wp-block-columns {
	gap: 56px !important;
}

@media (max-width: 782px) {
	.blog-layout.wp-block-columns {
		flex-wrap: wrap;
	}
}

.blog-post-list article {
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle, #E6E2DC);
}

.blog-post-list article:last-child {
	border-bottom: none;
}