/* Polyplastic globals: fonts, source Bricks :root variables, ACSS 3.x variables the source used that ACSS 4 no longer defines. */
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../assets/notosansthai-light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../assets/notosansthai-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../assets/notosansthai-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../assets/notosansthai-semibold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../assets/notosansthai-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Noto Sans Thai";
	src: url("../assets/notosansthai-black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../assets/inter-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../assets/inter-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
html:root {
	--base-light-trans-40: rgba(217, 217, 217, 0.4);
	--black-trans-40: rgba(0, 0, 0, 0.4);
	--black-trans-70: rgba(0, 0, 0, 0.7);
	--neutral-trans-10: rgba(0, 0, 0, 0.1);
	--neutral-trans-20: rgba(0, 0, 0, 0.2);
	--neutral-trans-40: rgba(0, 0, 0, 0.4);
	--neutral-trans-50: rgba(0, 0, 0, 0.5);
	--neutral-trans-60: rgba(0, 0, 0, 0.6);
	--neutral-trans-70: rgba(0, 0, 0, 0.7);
	--primary-trans-70: rgba(233, 87, 49, 0.7);
	--shade: #2C2C2C;
	--shade-light: #d9d9d9;
	--shade-medium: gray;
	--shade-semi-dark: #595959;
	--shade-semi-light: #a6a6a6;
	--shade-trans-10: rgba(44, 44, 44, 0.1);
	--shade-trans-20: rgba(44, 44, 44, 0.2);
	--shade-trans-30: rgba(44, 44, 44, 0.3);
	--shade-trans-40: rgba(44, 44, 44, 0.4);
	--shade-trans-50: rgba(44, 44, 44, 0.5);
	/* source ACSS 3 gutter (v4 default is wider) */
	--gutter: clamp(2.4rem, calc(0.5357142857vw + 2.2285714286rem), 3rem);
	--section-padding-x: var(--gutter);
}
html {
	scroll-behavior: smooth;
}
:root {
	--nav-pad: var(--space-s);
	--nav-trans: 0.3s;
	--logo-s: 8.4rem;
	--logo-scroll: calc(var(--logo-s)*0.8);
	--logo-h: var(--logo-s);
	--nav-l: var(--n-text-l);
	--nav-l-color: var(--shade);
	--nav-l-color-hover: var(--primary);
	--nav-bg: var(--white);
	--nav-bg-alt: var(--primary);
	--nav-l-color-alt: var(--white);
}
@media (max-width: 991px) {
	:root {
		--nav-pad: var(--space-s);
		--logo-s: clamp(5rem, 8vw, 7.4rem);
	}
}
:root {
	--nav-h: 8rem;
	--space-xxs: calc(var(--space-xs)/2);
	--section-pad: clamp(2.4rem, calc(0.7317073171vw + 2.1658536585rem), 3rem);
}
:root {
	--block-f : var(--n-text-m);
	--head-f: calc(var(--block-f) * var(--text-to-h-scale));
	--text-to-h-scale: 1.2;
	--text-scale: 1.05;
	--head-scale: 1.12;
}
/* Bricks/WP base rules the source relied on (no class to hang them on) */
:where(ul) { margin: 0; }
:where(p) { margin: 0; }
:where(p:last-of-type) + :is(h1, h2, h3, h4, h5, h6) { margin: 0; }
blockquote { font-size: var(--block-f); }
/* lock page scroll while the mobile menu popover is open */
html:has(#burger-menu:popover-open) { overflow: hidden; }
/* Source buttons computed to --text-* at every width; the imported Global SCSS sets font-size: var(--n-text-*) (12px floor at 992-1439). Re-assert the ACSS 4 size var. */
.btn--xxl, .btn--xl, .btn--l, .btn--m, .btn--s, .btn--xs { font-size: var(--btn-font-size); }
/* ACSS 4 styles bare buttons via button:not(nav button,[class*="btn--"]) (0,1,1); our filter toggles are <button>s that source rendered as divs */
button.product-list--filter-main-head-container, button.product-list--filter-close { line-height: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; text-align: start; }
button.product-list--filter-main-head-container { line-height: 1.5; }
button.product-list--filter-close { line-height: 1; }
.product-list--filter-head { line-height: 1.5; }
.faq-item__icon { line-height: 1; }
/* ACSS 4 settings set :root --btn-width: max-content; ACSS 3 source buttons were width:auto (stretch in column flex parents) */
html:root { --btn-width: auto; }
/* Source (Bricks blocks) wrap on mobile: filter row above full-width grid */
@media (max-width: 767px) { .product-list--container { flex-wrap: wrap; } }
/* Source body rule (ACSS 3, specificity 0,0,1): base size var(--text-m). ACSS 4 only sets it inside :where(body), which any reset can beat */
body { font-size: var(--text-m); line-height: var(--text-line-height); }
/* Grid items default to min-width:auto; the 450px gallery image blew the 1fr mobile track to 450px (source Splide sized the slide to the track) */
.single-product--container > * { min-inline-size: 0; }
.single-product--img { inline-size: 100%; }