/**
 * MatraX – design tokens and base component styles
 * Child theme of Flatsome
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');

:root {
	/* Colors */
	--matrax-primary: #CDA050;
	--matrax-primary-dark: #b89040;
	--matrax-black: #000;
	--matrax-white: #fff;
	--matrax-gray-900: #1a1a1a;
	--matrax-gray-700: #333;
	--matrax-gray-500: #666;
	--matrax-gray-300: #999;
	--matrax-gray-200: #d9d9d9;
	--matrax-gray-100: #f5f5f5;

	/* Typography */
	--matrax-font: 'Montserrat', sans-serif;
	--matrax-fs-xs: 14px;
	--matrax-fs-sm: 16px;
	--matrax-fs-base: 18px;
	--matrax-fs-md: 20px;
	--matrax-fs-lg: 24px;
	--matrax-fs-xl: 32px;
	--matrax-fs-2xl: 40px;
	--matrax-fs-3xl: 48px;
	--matrax-fs-4xl: 52px;
	--matrax-fs-5xl: 57px;
	--matrax-fs-6xl: 80px;
	--matrax-fs-7xl: 100px;
	--matrax-fs-8xl: 112px;
	--matrax-fs-9xl: 120px;
	--matrax-fs-10xl: 136px;

	/* Spacing */
	--matrax-sp-xs: 8px;
	--matrax-sp-sm: 12px;
	--matrax-sp-md: 16px;
	--matrax-sp-lg: 24px;
	--matrax-sp-xl: 32px;
	--matrax-sp-2xl: 40px;
	--matrax-sp-3xl: 48px;
	--matrax-sp-4xl: 60px;
	--matrax-sp-5xl: 80px;
	--matrax-sp-6xl: 120px;

	/* Border Radius */
	--matrax-radius-sm: 4px;
	--matrax-radius-md: 8px;
	--matrax-radius-lg: 12px;
	--matrax-radius-pill: 52px;

	/* Transitions */
	--matrax-ease-fast: 0.2s ease;
	--matrax-ease-base: 0.3s ease;
	--matrax-ease-slow: 0.5s ease;
}

/* ================================================================
   SCROLL-TRIGGERED ANIMATION SYSTEM
   Elements start hidden (.matrax-scroll-hidden), JS adds
   .matrax-in-view via IntersectionObserver when element enters viewport.
   ================================================================ */

/* @keyframes definitions */
@keyframes matraxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes matraxFadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes matraxFadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes matraxFadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes matraxFadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes matraxZoomIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes matraxSlideInUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Hidden state – applied by PHP, removed by JS */
.matrax-scroll-hidden {
	opacity: 0 !important;
	visibility: hidden;
	transition: none;
}

/* Visible state – JS adds .matrax-in-view when element enters viewport */
.matrax-in-view.matrax-animate-fadeIn      { animation: matraxFadeIn 0.7s ease both; visibility: visible; }
.matrax-in-view.matrax-animate-fadeInUp    { animation: matraxFadeInUp 0.7s cubic-bezier(.25,.46,.45,.94) both; visibility: visible; }
.matrax-in-view.matrax-animate-fadeInDown  { animation: matraxFadeInDown 0.7s cubic-bezier(.25,.46,.45,.94) both; visibility: visible; }
.matrax-in-view.matrax-animate-fadeInLeft  { animation: matraxFadeInLeft 0.7s cubic-bezier(.25,.46,.45,.94) both; visibility: visible; }
.matrax-in-view.matrax-animate-fadeInRight { animation: matraxFadeInRight 0.7s cubic-bezier(.25,.46,.45,.94) both; visibility: visible; }
.matrax-in-view.matrax-animate-zoomIn      { animation: matraxZoomIn 0.7s cubic-bezier(.25,.46,.45,.94) both; visibility: visible; }
.matrax-in-view.matrax-animate-slideInUp   { animation: matraxSlideInUp 0.7s cubic-bezier(.25,.46,.45,.94) both; visibility: visible; }

/* Character Reveal */
.matrax-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.25,.46,.45,.94);
}
.matrax-char--space { width: 0.25em; }
.matrax-char-visible .matrax-char {
	opacity: 1;
	transform: translateY(0);
}

/* Parallax – container & image setup */
[data-matrax-scroll="parallax"] { overflow: hidden; }
[data-matrax-scroll="parallax"] .matrax-hero__bg-img,
[data-matrax-scroll="parallax"] .matrax-cta-overlay__bg-img,
[data-matrax-scroll="parallax"] [class*="__bg-img"] {
	will-change: transform;
	transform: translateY(0) scale(1.15);
	transition: none;
}

/* ---- Text Scrub – char-by-char opacity tied to scroll ---- */
.matrax-scrub-char {
	display: inline;
	opacity: 0.2;
	transition: none;
}

/* ---- Pin Section – tall parent (.matrax-pin-wrapper) + sticky child ---- */
.matrax-pin-wrapper {
	position: relative;
	background: var(--matrax-black);
	z-index: 0;
}
/* Sections after a pinned section need background so they cover the pinned content */
/* Ensure sticky works: no ancestor can clip it */
#main, #content, .content-area, .page, .page-wrapper {
	overflow: visible !important;
}
.matrax-pin-sticky {
	position: sticky !important;
	top: 0;
	z-index: 1;
	height: 100vh !important;
	min-height: 100vh !important;
	max-height: 100vh;
	width: 100%;
	overflow: hidden;
}
/* Lottie overlay inside hero (tyre animation) */
.matrax-hero__lottie {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.matrax-hero__lottie canvas,
.matrax-hero__lottie svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Transition image at bottom of pin wrapper */
.matrax-pin-transition {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 0;
	pointer-events: none;
	display: block;
}

/* ---- Story Section – sticky video + content scrolls over ---- */
.matrax-story {
	position: relative;
	overflow: visible;
}
.matrax-story__video-wrap {
	position: sticky;
	top: 0;
	overflow: hidden;
	z-index: 0;
}
.matrax-story__video-wrap video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.matrax-story__content {
	position: relative;
	z-index: 1;
	/* Must have solid background to cover sticky video behind */
	background: #fff;
}
/* Flatsome rows/cols inside story content inherit background */
.matrax-story__content .section-bg,
.matrax-story__content .col-inner {
	background: inherit;
}

/* ---- Video Section – full-screen video background ---- */
.matrax-video-section {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--matrax-black);
}
.matrax-video-section__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.matrax-video-section__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.matrax-video-section__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.matrax-video-section__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: var(--matrax-sp-3xl) var(--matrax-sp-4xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
/* CTA text box – dark semi-transparent background like original */
.matrax-cta-textbox {
	background: rgba(0, 0, 0, 0.5);
	padding: 30px 48px;
	max-width: 700px;
	text-align: center;
}
.matrax-cta-textbox h2,
.matrax-cta-textbox h3,
.matrax-cta-textbox h5 {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: clamp(1.5rem, 3.9vw, 57px);
	line-height: 1.2;
	color: var(--matrax-white);
	margin: 0;
}

/* ---- Pin scroll fade – title fades out + moves up on scroll ---- */
.matrax-pin-sticky .matrax-hero__title {
	will-change: opacity, transform;
	transition: none; /* JS controls frame-by-frame */
}
.matrax-pin-sticky .matrax-video-section__content {
	will-change: opacity;
	transition: none;
}

/* ---- Video Hover Play ---- */
[data-matrax-scroll="videoHover"] video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
[data-matrax-scroll="videoHover"] .matrax-video-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0,0,0,0.3);
	opacity: 1;
	transition: opacity var(--matrax-ease-base);
	pointer-events: none;
}
[data-matrax-scroll="videoHover"]:hover .matrax-video-overlay {
	opacity: 0;
}

/* ---- Custom delay/duration via data attributes (applied by JS) ---- */
/* JS sets animation-delay and animation-duration inline */

/* UX Builder preview – always show elements for editing */
.ux-builder-preview .matrax-scroll-hidden {
	opacity: 1 !important;
	visibility: visible !important;
}
.ux-builder-preview .matrax-scrub-char {
	opacity: 1 !important;
}

/* Accessibility – respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.matrax-scroll-hidden {
		opacity: 1 !important;
		visibility: visible !important;
	}
	[class*="matrax-animate-"] { animation: none !important; }
	.matrax-char { opacity: 1; transform: none; transition: none; }
	.matrax-scrub-char { opacity: 1 !important; }
	.matrax-pin-sticky { position: static !important; height: auto; }
	.matrax-pin-wrapper { height: auto !important; }
}

/* Buttons */
.matrax-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	line-height: 1.2;
	padding: var(--matrax-sp-md) var(--matrax-sp-xl);
	border-radius: var(--matrax-radius-pill);
	text-decoration: none;
	transition: opacity var(--matrax-ease-fast);
}
.matrax-button:hover { opacity: 0.9; }
.matrax-button--primary {
	background: var(--matrax-white);
	color: var(--matrax-black);
	border: 1px solid var(--matrax-black);
}
.matrax-button--secondary {
	background: var(--matrax-black);
	color: var(--matrax-white);
	border: 1px solid var(--matrax-white);
}

/* Hero – Figma: 1920×660, title 136px Montserrat Bold, centered */
.matrax-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--matrax-black);
}
.matrax-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.matrax-hero__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: 1440px;
    margin: 0px auto;
}
.matrax-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.matrax-hero__inner {
	position: relative;
	z-index: 2;
	text-align: center;
	width: 100%;
	padding: 0 var(--matrax-sp-4xl);
}
.matrax-hero__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(2.5rem, 8vw, var(--matrax-fs-10xl));
	line-height: 1.2;
	color: var(--matrax-white);
	margin: 0;
	text-transform: uppercase;
}
.matrax-hero__title br { display: block; }

/* CTA Overlay – Figma: min-height 360px, text 57px Montserrat Bold */
.matrax-cta-overlay {
	position: relative;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.matrax-cta-overlay__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.matrax-cta-overlay__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.matrax-cta-overlay__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.matrax-cta-overlay__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	padding: var(--matrax-sp-3xl) var(--matrax-sp-4xl);
}
.matrax-cta-overlay__text {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(1.5rem, 4vw, var(--matrax-fs-5xl));
	line-height: 1.2;
	color: var(--matrax-white);
	margin: 0;
	background: rgba(0, 0, 0, 0.4);
	padding: var(--matrax-sp-xl) var(--matrax-sp-3xl);
	display: inline-block;
}
.matrax-cta-overlay__highlight { color: var(--matrax-primary); }

/* Product Card – Figma: 640×720, title 50px Bold, subtitle 18px Medium gold */
.matrax-product-card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 640 / 720;
	min-height: 280px;
}
.matrax-product-card__image {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.matrax-product-card__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.matrax-product-card__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.matrax-product-card__inner {
	text-align: center;
	max-width: 296px;
}
.matrax-product-card__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 50px);
	line-height: 1.2;
	color: var(--matrax-white);
	margin: 0 0 var(--matrax-sp-xs);
	text-transform: uppercase;
}
.matrax-product-card__subtitle {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-base);
	line-height: 1.2;
	color: var(--matrax-primary);
	margin: 0 0 var(--matrax-sp-lg);
}
.matrax-product-card .matrax-button { margin-top: var(--matrax-sp-xs); }

/* Section Heading – Figma: title 136px Bold, subtitle 20px */
.matrax-section-heading {
	text-align: center;
	padding: var(--matrax-sp-md) 0;
	font-family: var(--matrax-font);
	font-size: clamp(2.5rem, 8vw, var(--matrax-fs-10xl));
	font-style: italic;
}
.matrax-section-heading__title {
	font-weight: 700;
	line-height: 1;
	color: var(--matrax-black);
	margin: 0 0 var(--matrax-sp-xs);
	text-transform: uppercase;
	letter-spacing: -0.02em;
}
.matrax-section-heading--dark .matrax-section-heading__title { color: var(--matrax-white); }
.matrax-section-heading__subtitle {
	font-size: var(--matrax-fs-md);
	color: var(--matrax-black);
	margin: 0;
}
.matrax-section-heading--dark .matrax-section-heading__subtitle { color: rgba(255,255,255,0.9); }

/* Ecosystem Card – Figma: white 453px, gold 360px, title 52px Bold, content 20px */
.matrax-ecosystem-card {
	padding: var(--matrax-sp-lg);
	display: flex;
	flex-direction: column;
	gap: var(--matrax-sp-4xl);
	max-width: 453px;
	height: 100%;
}
.matrax-ecosystem-card--white {
	background: var(--matrax-white);
	color: var(--matrax-black);
}
.matrax-ecosystem-card--gold {
	background: var(--matrax-primary);
	color: var(--matrax-black);
	max-width: 360px;
}
.matrax-ecosystem-card__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, var(--matrax-fs-4xl));
	line-height: 1.2;
	margin: 0;
}
.matrax-ecosystem-card__content {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-md);
	line-height: 1.5;
}
.matrax-ecosystem-card__content p { margin: 0 0 0.5em; }
.matrax-ecosystem-card .matrax-button { align-self: flex-start; }

/* Footer – Figma: padding 40 60 32, title 52px Bold Italic, bottom 24px */
.matrax-footer {
	background: var(--matrax-black);
	color: var(--matrax-white);
	padding: var(--matrax-sp-2xl) var(--matrax-sp-4xl) var(--matrax-sp-xl);
	font-family: var(--matrax-font);
}
.matrax-footer__buttons {
	gap: var(--matrax-sp-md);
	flex-wrap: wrap;
	margin-bottom: var(--matrax-sp-6xl);
}

.matrax-footer__buttons.flex-center {
	justify-content: center;
	gap: var(--matrax-sp-lg);
}
@media(min-width:767px)
{
	.matrax-footer__buttons.flex-center {
	gap: 260px!important;
	}
}
.matrax-footer__buttons a.matrax-button.matrax-button--secondary
{
	    min-width: 173px;
}
.matrax-footer__touch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--matrax-sp-md);
	margin-bottom: var(--matrax-sp-6xl);
}
.matrax-footer__get-in-touch {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(2rem, 4vw, var(--matrax-fs-4xl));
	line-height: 0.7;
	margin: 0;
}
.matrax-footer__line {
	display: inline-block;
	width: 80px;
	height: 2px;
	background: var(--matrax-white);
}
.matrax-footer__bottom {
	align-items: center;
	flex-wrap: wrap;
	gap: var(--matrax-sp-md);
}
.matrax-footer__copyright {
	font-size: var(--matrax-fs-lg);
	margin: 0;
}
.matrax-footer__back {
	color: var(--matrax-white);
	text-decoration: none;
	font-size: var(--matrax-fs-lg);
}
.matrax-footer__back:hover { opacity: 0.9; }

/* Breadcrumb – Figma: 24px, gap 12px, icon gold */
.matrax-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: var(--matrax-sp-sm);
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-lg);
	color: var(--matrax-white);
}
.matrax-breadcrumb__icon { color: var(--matrax-primary); flex-shrink: 0; }
.matrax-breadcrumb__link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--matrax-sp-sm); }
.matrax-breadcrumb__link:hover { opacity: 0.9; }
.matrax-breadcrumb__inner { display: inline-flex; align-items: center; gap: var(--matrax-sp-sm); }

/* About Hero – Figma: padding 60px, title 57px Bold, paragraph 24px Medium */
.matrax-about-hero {
	padding: var(--matrax-sp-4xl);
	position: relative;
	overflow: hidden;
	background-color: var(--matrax-black);
}
.matrax-about-hero__bg { position: absolute; inset: 0; z-index: 0; }
.matrax-about-hero__bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.matrax-about-hero__inner { position: relative; z-index: 1; }
.matrax-about-hero__breadcrumb { margin-bottom: var(--matrax-sp-2xl); }
.matrax-about-hero__content { display: flex; align-items: flex-start; }
.matrax-about-hero__text-col { display: flex; flex-direction: column; }
.matrax-about-hero__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(2rem, 4vw, var(--matrax-fs-5xl));
	line-height: 1.2;
	color: var(--matrax-white);
	margin: 0 0 var(--matrax-sp-2xl);
}
.matrax-about-hero__title-line1 { display: block; }
.matrax-about-hero__title-highlight { font-style: italic; color: var(--matrax-primary); }
.matrax-about-hero__title-line2 { font-style: italic; }
.matrax-about-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: var(--matrax-sp-sm);
	color: var(--matrax-white);
	text-decoration: none;
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-lg);
	align-self: flex-end;
	margin: 0 0 var(--matrax-sp-lg);
}
.matrax-about-hero__scroll:hover { opacity: 0.9; }
.matrax-about-hero__scroll-icon { flex-shrink: 0; }
.matrax-about-hero__paragraph {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-lg);
	line-height: 1.2;
	color: var(--matrax-white);
	margin: 0;
}
.matrax-about-hero__paragraph p { margin: 0 0 0.5em; padding-top: 20px;}

/* Sustainability Hero – Figma: padding 60px, title 100px, image 459px, subtitle 40px */
.matrax-sustainability-hero {
	padding: var(--matrax-sp-4xl);
	position: relative;
	overflow: hidden;
	background-color: var(--matrax-black);
}
.matrax-sustainability-hero__bg { position: absolute; inset: 0; z-index: 0; }
.matrax-sustainability-hero__bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.matrax-sustainability-hero__inner { position: relative; z-index: 1; }
.matrax-sustainability-hero__breadcrumb { margin-bottom: var(--matrax-sp-2xl); }
.matrax-sustainability-hero__content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--matrax-sp-xl); }
.matrax-sustainability-hero__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, var(--matrax-fs-7xl));
	line-height: 1.3;
	color: var(--matrax-white);
	margin: 0;
	display: inline-flex;
    gap: 13px;
    justify-content: center;
}

.matrax-sustainability-hero__title-line1 { display: block; }
.matrax-sustainability-hero__title-line2 { display: block; color: var(--matrax-primary); }
.matrax-sustainability-hero__image-wrap {
	max-width: 459px;
	width: 100%;
	margin: 0 auto;
}
.matrax-sustainability-hero__image { width: 100%; height: auto; display: block; object-fit: cover; }
.matrax-sustainability-hero__subtitle {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.5vw, var(--matrax-fs-2xl));
	line-height: 1.2;
	color: var(--matrax-white);
	margin: 0;
	text-align: center;
	max-width: 1248px;
}

/* Value Block – Figma: heading 120px Bold, intro 24px Medium, gap 60px */
.matrax-value-block__row { display: flex; align-items: flex-start;  }
.matrax-value-block__heading {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(3rem, 8vw, var(--matrax-fs-9xl));
	line-height: 1.2;
	color: var(--matrax-black);
	margin: 0;
}
.matrax-value-block__heading-line1 { display: block; }
.matrax-value-block__heading-line2 { color: var(--matrax-primary); }
.matrax-value-block__intro {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-lg);
	line-height: 1.5;
	color: var(--matrax-black);
	margin: 0;
}

/* Value Card – Figma: gap 24px, title 57px Bold, content 20px Medium */
.matrax-value-card {
	display: flex;
	gap: var(--matrax-sp-lg);
	align-items: flex-start;
	text-align: left;
}
.matrax-value-card__icon-wrap { flex-shrink: 0; }
.matrax-value-card__icon { color: var(--matrax-primary); }
.matrax-value-card__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: var(--matrax-fs-5xl);
	line-height: 1.2;
	color: var(--matrax-black);
	margin: 0 0 var(--matrax-sp-xl);
}
.matrax-value-card__content {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	line-height: 1.5;
	color: var(--matrax-black);
}
.matrax-value-card__content p { margin: 0 0 0.5em; }

/* About page: Core Values section on dark background (section dark="true") */
.section.dark .matrax-value-block__heading,
.section.dark .matrax-value-block__intro,
.section.dark .matrax-value-card__title,
.section.dark .matrax-value-card__content { color: #fff; }
.section.dark .matrax-value-block__heading-line2,
.section.dark .matrax-value-card__icon { color: var(--matrax-primary); }

/* Icon Value Card – Figma: icon 60×40, title 57px Bold, content 20px */
.matrax-icon-value-card {
	display: flex;
	gap: var(--matrax-sp-lg);
	align-items: flex-start;
	text-align: left;
}
.matrax-icon-value-card__icon-wrap { flex-shrink: 0; }
.matrax-icon-value-card__icon-img {
	width: 60px;
	height: auto;
	max-height: 40px;
	object-fit: contain;
}
.matrax-icon-value-card__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, var(--matrax-fs-5xl));
	line-height: 1.2;
	color: var(--matrax-black);
	margin: 0 0 var(--matrax-sp-md);
}
.matrax-icon-value-card__title-line1,
.matrax-icon-value-card__title-line2 { display: block; }
.matrax-icon-value-card__content {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	line-height: 1.5;
	color: var(--matrax-black);
}
.matrax-icon-value-card__content p { margin: 0 0 0.5em; }

/* Gallery Item – Figma: 500×325, grayscale on idle, hover shows button */
.matrax-gallery-item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 500 / 325;
	min-height: 200px;
}
.matrax-gallery-item__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	transition: filter var(--matrax-ease-base);
}
.matrax-gallery-item__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.matrax-gallery-item--grayscale .matrax-gallery-item__image { filter: grayscale(100%); }
.matrax-gallery-item:hover .matrax-gallery-item__image { filter: grayscale(0%); }
.matrax-gallery-item__button {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity var(--matrax-ease-base);
	z-index: 2;
}
.matrax-gallery-item:hover .matrax-gallery-item__button { opacity: 1; }

/* Dark Block – Figma: subtitle 57px, title 112px, content 24px, padding 40 60 */
.matrax-dark-block {
	background: var(--matrax-black);
	color: var(--matrax-white);
	font-family: var(--matrax-font);
}
.matrax-dark-block__subtitle {
	font-weight: 700;
	font-style: italic;
	font-size: var(--matrax-fs-5xl);
	line-height: 1.2;
	margin: 0 0 0.25em;
	color: var(--matrax-white);
	opacity: 1;
}
.matrax-dark-block__title {
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, var(--matrax-fs-8xl));
	line-height: 1.3;
	margin: 0 0 0.5em;
	color: var(--matrax-white);
	opacity: 1;
}
.matrax-dark-block__content {
	font-weight: 500;
	font-size: var(--matrax-fs-lg);
	line-height: 1.5;
	color: var(--matrax-white);
}
.matrax-dark-block__content p { margin: 0 0 0.5em; }

/* Collapsible – Figma: padding 0 60 60, title 57px, chevron 54×40, gap 32px */
.matrax-collapsible {
	font-family: var(--matrax-font);
	border: none;
	padding: 0 var(--matrax-sp-4xl) var(--matrax-sp-4xl);
}
.matrax-collapsible__summary {
	display: flex;
	align-items: center;
	gap: var(--matrax-sp-xl);
	list-style: none;
	cursor: pointer;
	padding-bottom: var(--matrax-sp-2xl);
}
.matrax-collapsible__summary::-webkit-details-marker { display: none; }
.matrax-collapsible__chevron {
	width: 45px;
	height: 57px;
	flex-shrink: 0;
	transition: transform var(--matrax-ease-base);
}

.matrax-collapsible:not([open]) .matrax-collapsible__chevron { transform: rotate(180deg); }
.matrax-collapsible__title {
	font-weight: 700;
	font-size: var(--matrax-fs-5xl);
	line-height: 1.2;
	color: var(--matrax-black);
}
.matrax-collapsible__content {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--matrax-sp-xl);
	padding-left: 0;
	max-width: 1128px;	
	margin: 0px auto;
}

/* Collapsible Item */
.matrax-collapsible-item {
	flex: 0 0 calc((100% - var(--matrax-sp-xl) * 2) / 3);
	position: relative;
	overflow: hidden;
	background: var(--matrax-black);
	aspect-ratio: 4 / 3;
	display: block;
	text-decoration: none;
	transition: flex-basis var(--matrax-ease-slow);
}
.matrax-collapsible-item:nth-child(n+4) { display: none; }
.matrax-collapsible__content:hover .matrax-collapsible-item {
	flex-basis: 30%;
}
.matrax-collapsible__content .matrax-collapsible-item:hover {
	flex-basis: 40%;
}
.matrax-collapsible-item__image {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}
.matrax-collapsible-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--matrax-ease-slow);
}
.matrax-collapsible-item:hover .matrax-collapsible-item__img {
	transform: scale(1.05);
}
.matrax-collapsible-item__title {
	position: absolute;
	top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: var(--matrax-fs-2xl);
	color: var(--matrax-white);
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	z-index: 1;
	width: 100%;
	height: 100%;
}
.matrax-collapsible-item {
    height: 312px;
}

/* Blog / Archive – Figma: padding 60px, title 100px Bold */
.matrax-blog-hero {
	background-color: var(--matrax-black);
	padding: var(--matrax-sp-4xl);
	position: relative;
}
.matrax-blog-hero__inner { max-width: 100%; }
.matrax-blog-hero__breadcrumb.matrax-blog-hero--light .matrax-breadcrumb,
.matrax-blog-hero__breadcrumb.matrax-blog-hero--light .matrax-breadcrumb__inner,
.matrax-blog-hero__breadcrumb.matrax-blog-hero--light .matrax-breadcrumb__link { color: var(--matrax-white); }
.matrax-blog-hero__breadcrumb.matrax-blog-hero--light .matrax-breadcrumb__icon { color: var(--matrax-primary); }
.matrax-blog-hero__breadcrumb { margin-bottom: var(--matrax-sp-lg); }
.matrax-blog-hero__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(2.5rem, 8vw, var(--matrax-fs-7xl));
	line-height: 1.3;
	color: var(--matrax-white);
	margin: 0;
	text-transform: uppercase;
}
.matrax-blog-hero-image {
	display: block;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 1906 / 440;
}
.matrax-blog-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.matrax-blog-content {
	padding: var(--matrax-sp-2xl) var(--matrax-sp-4xl) var(--matrax-sp-4xl);
	background: var(--matrax-white);
}
div#post-list .col {
    padding: 0px;
}
div#post-list .col:first-child, div#post-list .col:nth-child(2), div#post-list .col:nth-child(3) {
    margin-top: 0px;
}
.matrax-blog-grid .col{margin-top: 40px;}
.matrax-blog-grid .col::first-child{margin-top: 40px;}
.matrax-blog-content .post{margin: 0px 20px;}
.matrax-blog-grid { gap: 0px; margin-bottom: var(--matrax-sp-2xl); }
.matrax-blog-main{ padding: 0px;}
.matrax-blog-main .nav-links { margin-top: var(--matrax-sp-lg);}
.matrax-blog-card {
	background: var(--matrax-white);
	border-radius: var(--matrax-radius-lg);
	box-shadow: 0 0 29.8px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.matrax-blog-card__link { display: block; text-decoration: none; color: inherit; }
.matrax-blog-card__image {
	aspect-ratio: 2000 / 1333;
	overflow: hidden;
	background: #f0f0f0;
}
.matrax-blog-card__image--placeholder { display: flex; align-items: center; justify-content: center; }
.matrax-blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.matrax-blog-card__placeholder { display: block; width: 100%; height: 100%; background: #e0e0e0; }
.matrax-blog-card__body {
	padding: var(--matrax-sp-md) var(--matrax-sp-md) var(--matrax-sp-md);
	display: flex;
	flex-direction: column;
	gap: var(--matrax-sp-md);
	flex-grow: 1;
}
.matrax-blog-card__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: var(--matrax-fs-sm);
	line-height: 1.5;
	margin: 0;
}
.matrax-blog-card__title a { color: var(--matrax-black); text-decoration: none; }
.matrax-blog-card__title a:hover { opacity: 0.85; }
.matrax-blog-card__excerpt {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-xs);
	line-height: 1.5;
	color: var(--matrax-black);
}
.matrax-blog-card__excerpt p { margin: 0 0 0.5em; }
.matrax-blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-xs);
	color: var(--matrax-black);
	text-decoration: none;
	margin-top: auto;
}
.matrax-blog-card__more:hover { opacity: 0.9; }
.matrax-blog-card__more .matrax-breadcrumb__icon { color: var(--matrax-primary); flex-shrink: 0; }
.matrax-blog-sidebar__inner {
	background: var(--matrax-gray-200);
	padding: var(--matrax-sp-lg);
	border-radius: var(--matrax-radius-sm);
}
.matrax-blog-sidebar__heading {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: 36px;
	line-height: 1.2;
	color: var(--matrax-black);
	margin: 0 0 var(--matrax-sp-md);
}
.matrax-blog-sidebar__categories {
	list-style: none;
	margin: 0 0 var(--matrax-sp-2xl);
	padding: 0;
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	line-height: 1.5;
	color: var(--matrax-black);
}
.matrax-blog-sidebar__categories li { margin-bottom: 0.25em; }
.matrax-blog-sidebar__categories a { color: inherit; text-decoration: none; }
.matrax-blog-sidebar__categories a:hover { text-decoration: underline; }
.matrax-blog-sidebar__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--matrax-sp-sm);
}
.matrax-blog-sidebar__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	border-radius: var(--matrax-radius-pill);
	border: 1px solid var(--matrax-gray-300);
	background: var(--matrax-gray-200);
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	line-height: 1.2;
	color: var(--matrax-black);
	text-decoration: none;
	transition: opacity var(--matrax-ease-fast);
}
.matrax-blog-sidebar__tag:hover { opacity: 0.85; }
.matrax-blog-sidebar__no-tags {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-sm);
	color: var(--matrax-gray-500);
	margin: 0;
}

/* Single post – Figma: padding 60px, title 54px, body 20px */
.matrax-single-hero {
	background-color: var(--matrax-black);
	padding: var(--matrax-sp-4xl);
	position: relative;
}
.matrax-single-hero__inner { max-width: 100%; }
.matrax-single-hero__breadcrumb.matrax-single-hero--light .matrax-breadcrumb,
.matrax-single-hero__breadcrumb.matrax-single-hero--light .matrax-breadcrumb__inner,
.matrax-single-hero__breadcrumb.matrax-single-hero--light .matrax-breadcrumb__link { color: var(--matrax-white); }
.matrax-single-hero__breadcrumb.matrax-single-hero--light .matrax-breadcrumb__icon { color: var(--matrax-primary); }
.matrax-single-hero__breadcrumb { margin-bottom: var(--matrax-sp-lg); }
.matrax-single-hero__title-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--matrax-sp-2xl);
	align-items: flex-end;
}
.matrax-single-hero__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 54px);
	line-height: 1.3;
	color: var(--matrax-white);
	margin: 0;
	width: 100%;
}
.matrax-single-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: var(--matrax-sp-sm);
	color: var(--matrax-white);
	text-decoration: none;
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-lg);
	line-height: 1;
}
.matrax-single-hero__scroll:hover { opacity: 0.9; }
.matrax-single-hero__scroll-icon { color: var(--matrax-white); flex-shrink: 0; }
.matrax-single-content {
	padding: var(--matrax-sp-4xl);
	background: var(--matrax-white);
}
.matrax-single-main { margin-bottom: 0; }
.matrax-single-featured {
	aspect-ratio: 2000 / 1333;
	overflow: hidden;
	background: var(--matrax-gray-100);
	margin-bottom: var(--matrax-sp-2xl);
}
.matrax-single-featured__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.matrax-single-body {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	line-height: 1.5;
	color: var(--matrax-black);
	margin-bottom: var(--matrax-sp-2xl);
}
.matrax-single-body p { margin-bottom: 1em; }
.matrax-single-body p:last-child { margin-bottom: 0; }
.matrax-single-body ul,
.matrax-single-body ol { margin: 1em 0; padding-left: 1.5em; }
.matrax-single-body li { margin-bottom: 0.25em; }
.matrax-single-share { margin-top: var(--matrax-sp-lg); }
.matrax-single-share .is-divider { display: none; }
.matrax-single-share .social-icons {
	display: flex;
	justify-content: flex-end;
	gap: 0;
	flex-wrap: wrap;
}
.social-button, .social-icons .button.icon:hover, .social-icons .button.icon:not(.is-outline) {
    margin: 0px;
    padding: 0px;
}
.matrax-single-share .social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border-radius: 0;
	border: none;
	color: var(--matrax-white);
	font-size: 18px;
	transition: opacity var(--matrax-ease-fast);
}
.matrax-single-share .social-icons a:hover { opacity: 0.85; }
.matrax-single-share .social-icons a.facebook  { background: #3b5998; }
.matrax-single-share .social-icons a.twitter   { background: #1da1f2; }
.matrax-single-share .social-icons a.x         { background: #000; }
.matrax-single-share .social-icons a.linkedin  { background: #0077b5; }
.matrax-single-share .social-icons a.email     { background: #7f7f7f; }
.matrax-single-share .social-icons a.pinterest { background: #bd081c; }
.matrax-single-share .social-icons a.tumblr    { background: #35465c; }
.matrax-single-share .social-icons a.reddit    { background: #ff4500; }
.matrax-single-share .social-icons a.whatsapp  { background: #25d366; }
.matrax-single-share .social-icons a.telegram  { background: #0088cc; }
.matrax-single-share .social-icons a.vk        { background: #4a76a8; }
.matrax-single-share .social-icons a.threads   { background: #000; }

/* Contact hero – Figma: padding 60px, title 100px Bold, gap 80px */
.matrax-contact-hero {
	background-color: var(--matrax-black);
	padding: var(--matrax-sp-4xl);
	position: relative;
	overflow: hidden;
}
.matrax-contact-hero__bg { position: absolute; inset: 0; z-index: 0; }
.matrax-contact-hero__bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.matrax-contact-hero__inner { max-width: 100%; position: relative; z-index: 1; }
.matrax-contact-hero__breadcrumb.matrax-contact-hero--light .matrax-breadcrumb,
.matrax-contact-hero__breadcrumb.matrax-contact-hero--light .matrax-breadcrumb__inner,
.matrax-contact-hero__breadcrumb.matrax-contact-hero--light .matrax-breadcrumb__link { color: var(--matrax-white); }
.matrax-contact-hero__breadcrumb.matrax-contact-hero--light .matrax-breadcrumb__icon { color: var(--matrax-primary); }
.matrax-contact-hero__breadcrumb { margin-bottom: var(--matrax-sp-lg); }
.matrax-contact-hero__title-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--matrax-sp-5xl);
	align-items: flex-end;
}
.matrax-contact-hero__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(2.5rem, 8vw, var(--matrax-fs-7xl));
	line-height: 1.3;
	color: var(--matrax-white);
	margin: 0;
	width: 100%;
}
.matrax-contact-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: var(--matrax-sp-sm);
	color: var(--matrax-white);
	text-decoration: none;
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-lg);
	line-height: 1;
}
.matrax-contact-hero__scroll:hover { opacity: 0.9; }

/* Dealer hero – Figma: padding 60px, title 54px Bold, gap 80px */
.matrax-dealer-hero {
	background-color: var(--matrax-black);
	padding: var(--matrax-sp-4xl);
	position: relative;
	overflow: hidden;
}
.matrax-dealer-hero__bg { position: absolute; inset: 0; z-index: 0; }
.matrax-dealer-hero__bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.matrax-dealer-hero__inner { max-width: 100%; position: relative; z-index: 1; }
.matrax-dealer-hero__breadcrumb.matrax-dealer-hero--light .matrax-breadcrumb,
.matrax-dealer-hero__breadcrumb.matrax-dealer-hero--light .matrax-breadcrumb__inner,
.matrax-dealer-hero__breadcrumb.matrax-dealer-hero--light .matrax-breadcrumb__link { color: var(--matrax-white); }
.matrax-dealer-hero__breadcrumb.matrax-dealer-hero--light .matrax-breadcrumb__icon { color: var(--matrax-primary); }
.matrax-dealer-hero__breadcrumb { margin-bottom: var(--matrax-sp-lg); }
.matrax-dealer-hero__title-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--matrax-sp-5xl);
	align-items: flex-end;
}
.matrax-dealer-hero__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(2.5rem, 8vw, 54px);
	line-height: 1.3;
	color: var(--matrax-white);
	margin: 0;
	width: 100%;
}
.matrax-dealer-hero__title-highlight { color: var(--matrax-primary); }
.matrax-dealer-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: var(--matrax-sp-sm);
	color: var(--matrax-white);
	text-decoration: none;
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-lg);
	line-height: 1;
}
.matrax-dealer-hero__scroll:hover { opacity: 0.9; }
.matrax-dealer-hero__scroll-icon { color: var(--matrax-white); flex-shrink: 0; }

/* Dealer intro – Figma: padding 40 60, text 20px, center, max 900px */
.matrax-dealer-intro {
	background: var(--matrax-white);
	padding: var(--matrax-sp-2xl) var(--matrax-sp-4xl);
}
.matrax-dealer-intro__inner { max-width: 100%; }
.matrax-dealer-intro__text {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-md);
	line-height: 1.5;
	color: var(--matrax-black);
	margin: 0;
	text-align: center;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* Dealer tabs – full tabbed section: tabs + map + locations */
.matrax-dealer-tabs {
	background: #fff;
	padding: 0 var(--matrax-sp-4xl);
}
.matrax-dealer-tabs__inner { max-width: 100%; }
.matrax-dealer-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.matrax-dealer-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--matrax-sp-xs);
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: 36px;
	line-height: 1.2;
	padding: var(--matrax-sp-md) var(--matrax-sp-xl);
	border: none;
	background: transparent;
	color: var(--matrax-white);
	cursor: pointer;
	flex: 1;
	text-transform: uppercase;
	transition: background var(--matrax-ease-fast), color var(--matrax-ease-fast);
	margin: 0px;;
	border: 1px solid #000 ;
}
.matrax-dealer-tab--active {
	background: var(--matrax-black);
	color: var(--matrax-white);
}
.matrax-dealer-tab:not(.matrax-dealer-tab--active) {
	background: var(--matrax-white);
	color: var(--matrax-black);
}
.matrax-dealer-tab:hover:not(.matrax-dealer-tab--active) { background: var(--matrax-gray-100); }
.matrax-dealer-tab__icon--down { display: none; }
.matrax-dealer-tab__icon--right { display: inline-block; flex-shrink: 0; }
.matrax-dealer-tab--active .matrax-dealer-tab__icon--down { display: inline-block; flex-shrink: 0; }
.matrax-dealer-tab--active .matrax-dealer-tab__icon--right { display: none; }

/* Dealer tab panels */
.matrax-dealer-tabs__panel { display: none; }
.matrax-dealer-tabs__panel--active { display: block; }
.matrax-dealer-tabs__panel[hidden] { display: none; }

/* Dealer map (inside tab panel) */
.matrax-dealer-map {
	background: #fff;
	padding: var(--matrax-sp-2xl) 0;
}
.matrax-dealer-map__wrap {
	width: 100%;
	aspect-ratio: 1010 / 666;
	overflow: hidden;
}
.matrax-dealer-map__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.matrax-dealer-map__placeholder {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-sm);
	color: var(--matrax-gray-500);
	text-align: center;
	padding: var(--matrax-sp-2xl);
	margin: 0;
}

/* Dealer locations wrapper inside tab panel */
.matrax-dealer-tabs__locations {
	padding: var(--matrax-sp-2xl) 0 var(--matrax-sp-4xl);
}

/* Dealer location block */
.matrax-dealer-location {
	padding: 0 0 var(--matrax-sp-2xl);
}
.matrax-dealer-location:last-child { padding-bottom: 0; }
.matrax-dealer-location__header {
	display: flex;
	align-items: center;
	gap: var(--matrax-sp-xs);
	margin-bottom: var(--matrax-sp-sm);
}
.matrax-dealer-location__icon {
	color: var(--matrax-primary);
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.matrax-dealer-location__icon svg {
	width: 20px;
	height: 20px;
}
.matrax-dealer-location__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: var(--matrax-fs-lg);
	line-height: 1.2;
	color: var(--matrax-black);
	margin: 0;
}
.matrax-dealer-location__list {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-md);
	line-height: 1.7;
	color: var(--matrax-black);
	margin: 0;
	list-style-type: decimal;
	font-weight: 500;
}
.matrax-dealer-location__item { margin-bottom: 2px; }

/* Product list – Figma: padding 60px, title 54px, gap 80px */
.matrax-product-hero {
	background-color: var(--matrax-black);
	padding: var(--matrax-sp-4xl);
	position: relative;
}
.matrax-product-hero__inner { max-width: 100%; }
.matrax-product-hero__breadcrumb.matrax-product-hero--light .matrax-breadcrumb,
.matrax-product-hero__breadcrumb.matrax-product-hero--light .matrax-breadcrumb__inner,
.matrax-product-hero__breadcrumb.matrax-product-hero--light .matrax-breadcrumb__link { color: var(--matrax-white); }
.matrax-product-hero__breadcrumb.matrax-product-hero--light .matrax-breadcrumb__icon { color: var(--matrax-primary); }
.matrax-product-hero__breadcrumb { margin-bottom: var(--matrax-sp-lg); }
.matrax-product-hero__title-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--matrax-sp-5xl);
	align-items: flex-end;
}
.matrax-product-hero__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 54px);
	line-height: 1.3;
	color: var(--matrax-white);
	margin: 0;
	width: 100%;
}
.matrax-product-hero__title-highlight { color: var(--matrax-primary); }
.matrax-product-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: var(--matrax-sp-sm);
	color: var(--matrax-white);
	text-decoration: none;
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-lg);
	line-height: 1;
}
.matrax-product-hero__scroll:hover { opacity: 0.9; }
.matrax-product-hero__scroll-icon { color: var(--matrax-white); flex-shrink: 0; }

.matrax-product-intro {
	background: var(--matrax-white);
	padding: var(--matrax-sp-4xl) var(--matrax-sp-6xl);
}
.matrax-product-intro__inner { max-width: 100%; }
.matrax-product-intro__text {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	line-height: 1.5;
	color: var(--matrax-black);
	margin: 0;
	text-align: center;
	max-width: 1014px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Category blocks (product_type) ── */
.matrax-product-category-blocks {
	background: var(--matrax-white);
	padding: 0 0 var(--matrax-sp-2xl);
}
.matrax-product-category-blocks--children {
	padding-top: var(--matrax-sp-md);
}
.matrax-product-category-blocks__inner.container {
	max-width: 100%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.matrax-product-category-blocks__grid {
	display: flex;
	gap: 0;
	aspect-ratio: 400 / 80;
}

/* Block – shared base */
.matrax-product-type-block {
	flex: 1 1 0%;
	position: relative;
	overflow: hidden;
	transition: flex 0.5s cubic-bezier(.4,0,.2,1);
}
.matrax-product-type-block__link {
	display: block;
	position: absolute;
	inset: 0;
	text-decoration: none;
	color: var(--matrax-white);
}

/* Background layer */
.matrax-product-type-block__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(1);
	transition: filter 0.5s ease;
}
.matrax-product-type-block__bg--dark {
	background: var(--matrax-black);
	filter: none;
}

/* Overlay label – centered, visible by default */
.matrax-product-type-block__overlay-label {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: 36px;
	line-height: 1.2;
	color: var(--matrax-white);
	background: rgba(0, 0, 0, 0.5);
	padding: var(--matrax-sp-xs) var(--matrax-sp-lg);
	white-space: nowrap;
	opacity: 1;
	transition: opacity 0.35s ease;
	z-index: 2;
}

/* Content panel – hidden by default, slides in from left */
.matrax-product-type-block__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--matrax-sp-2xl);
	z-index: 2;
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(.4,0,.2,1) 0.1s;
}
.matrax-product-type-block__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: auto;
}
.matrax-product-type-block__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(2rem, 3vw, 3.5rem);
	line-height: 1.2;
	color: var(--matrax-white);
	margin: 0;
}
.matrax-product-type-block__chevron { flex-shrink: 0; color: var(--matrax-white); }
.matrax-product-type-block__subtitle {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-style: italic;
	font-size: var(--matrax-fs-xl);
	line-height: 1;
	color: var(--matrax-white);
	margin: 0 0 var(--matrax-sp-md);
}
.matrax-product-type-block__desc {
	font-family: var(--matrax-font);
	font-style: italic;
	font-size: var(--matrax-fs-md);
	line-height: 1.4;
	color: var(--matrax-white);
	margin: 0;
}

/* ── Hover / Active: expand target, shrink siblings ── */
.matrax-product-category-blocks__grid:hover .matrax-product-type-block,
.matrax-product-category-blocks__grid:has(.matrax-product-type-block.is-active) .matrax-product-type-block {
	flex: 0.5 1 0%;
}
.matrax-product-category-blocks__grid .matrax-product-type-block:hover,
.matrax-product-category-blocks__grid .matrax-product-type-block.is-active {
	flex: 2 1 0%;
}
/* When hovering a sibling, the active block should shrink like any other */
.matrax-product-category-blocks__grid:hover .matrax-product-type-block.is-active:not(:hover) {
	flex: 0.5 1 0%;
}

/* Hover / Active: show content, hide overlay label, remove grayscale */
.matrax-product-type-block:hover .matrax-product-type-block__overlay-label,
.matrax-product-type-block.is-active .matrax-product-type-block__overlay-label {
	opacity: 0;
}
.matrax-product-type-block:hover .matrax-product-type-block__content,
.matrax-product-type-block.is-active .matrax-product-type-block__content {
	opacity: 1;
	transform: translateX(0);
	background-color: #000;
}
.matrax-product-type-block:hover .matrax-product-type-block__bg,
.matrax-product-type-block.is-active .matrax-product-type-block__bg {
	filter: grayscale(0);
}

.matrax-product-filters {
	background: var(--matrax-white);
	padding: var(--matrax-sp-2xl) var(--matrax-sp-4xl);
}
.matrax-product-filters__inner { max-width: 100%; }
.matrax-product-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--matrax-sp-lg);
	justify-content: center;
	margin-bottom: var(--matrax-sp-lg);
}
.matrax-product-filters__row:last-child { margin-bottom: 0; }
.matrax-product-filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	line-height: 1.2;
	padding: var(--matrax-sp-md) var(--matrax-sp-xl);
	border-radius: var(--matrax-radius-pill);
	border: 2px solid var(--matrax-black);
	background: var(--matrax-white);
	color: var(--matrax-black);
	text-decoration: none;
	transition: background var(--matrax-ease-fast), color var(--matrax-ease-fast);
}
.matrax-product-filter-btn:hover { opacity: 0.9; }
.matrax-product-filter-btn--active {
	background: var(--matrax-black);
	color: var(--matrax-white);
	border-color: var(--matrax-black);
}

.matrax-product-section {
	background: var(--matrax-white);
	padding: var(--matrax-sp-lg) var(--matrax-sp-4xl) var(--matrax-sp-4xl);
}
.matrax-product-section__inner { max-width: 100%; }
.matrax-product-section__heading {
	display: flex;
	align-items: center;
	gap: var(--matrax-sp-sm);
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: var(--matrax-fs-lg);
	line-height: 1.2;
	color: var(--matrax-black);
	margin: 0 0 var(--matrax-sp-lg);
}
.matrax-product-section__icon { color: var(--matrax-primary); }
.matrax-product-section__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--matrax-sp-lg);
	margin: 0;
	padding: 0;
}
.matrax-product-section__grid .col {
	flex: 0 0 calc((100% - var(--matrax-sp-lg) * 2) / 3);
	max-width: calc((100% - var(--matrax-sp-lg) * 2) / 3);
	min-width: 0;
	margin: 0;
	padding: 0;
}

.matrax-product-list-card {
	padding: 0;
}
.matrax-product-list-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--matrax-white);
	border: 1px solid var(--matrax-black);
	padding: var(--matrax-sp-2xl);
	height: 100%;
}
.matrax-product-list-card__link:hover .matrax-product-list-card__cta {
	opacity: 1;
	visibility: visible;
}
.matrax-product-list-card__link:hover .matrax-product-list-card__title {
	color: var(--matrax-primary);
}
.matrax-product-list-card__image-wrap {
	position: relative;
	aspect-ratio: 300 / 332;
	overflow: hidden;
	margin-bottom: var(--matrax-sp-md);
}
.matrax-product-list-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.matrax-product-list-card__placeholder {
	position: absolute;
	inset: 0;
	background: #eee;
}
.matrax-product-list-card__cta {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.5);
	color: var(--matrax-white);
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	padding: var(--matrax-sp-md) var(--matrax-sp-xl);
	border-radius: var(--matrax-radius-pill);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.matrax-product-list-card__title {
	font-family: var(--matrax-font);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.5;
	color: var(--matrax-black);
	margin: 0;
	text-align: center;
	transition: color 0.3s ease;
}

.matrax-product-single__inner { padding: var(--matrax-sp-4xl) var(--matrax-sp-4xl) var(--matrax-sp-5xl); max-width: 100%; }
.matrax-product-single__title {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(2rem, 4vw, var(--matrax-fs-3xl));
	line-height: 1.2;
	color: var(--matrax-black);
	margin: 0 0 var(--matrax-sp-lg);
}
.matrax-sp-size-range__list {
    max-width: 800px;
    margin-left: 40px;
}
.matrax-product-single__image { margin-bottom: var(--matrax-sp-lg); }
.matrax-product-single__img { width: 100%; height: auto; display: block; }
.matrax-product-single__body {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-base);
	line-height: 1.6;
	color: var(--matrax-black);
}

/* Contact block – Figma: padding 60 120, heading 48px, tabs 48px Bold */
.matrax-contact-block {
	padding: var(--matrax-sp-4xl) var(--matrax-sp-6xl);
	background: var(--matrax-white);
}
.matrax-contact-block__header {
	text-align: center;
	margin-bottom: var(--matrax-sp-4xl);
}
.matrax-contact-block__heading {
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: var(--matrax-fs-3xl);
	line-height: 1.2;
	color: var(--matrax-black);
	margin: 0 0 var(--matrax-sp-sm);
}
button.matrax-contact-tab {
    padding: 0px;
    margin: 20px 0px;
}
.matrax-contact-block__intro {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	line-height: 1.5;
	color: var(--matrax-black);
	margin: 0;
	max-width: 1014px;
	margin-left: auto;
	margin-right: auto;
}
.matrax-contact-tabs {
	display: flex;
	gap: 0;
	margin-bottom: var(--matrax-sp-4xl);
}
.matrax-contact-tab {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--matrax-sp-lg);
	padding: 18px var(--matrax-sp-lg);
	border: 1px solid var(--matrax-black);
	border-radius: 0;
	background: var(--matrax-white);
	font-family: var(--matrax-font);
	font-weight: 700;
	font-size: clamp(1.25rem, 3vw, var(--matrax-fs-3xl));
	line-height: 1.2;
	color: var(--matrax-black);
	cursor: pointer;
	transition: background var(--matrax-ease-fast), color var(--matrax-ease-fast);
	text-transform: none;
}
.matrax-contact-tab:hover { opacity: 0.95; }
.matrax-contact-tab .matrax-tab-chevron {
	display: inline-flex;
	align-items: center;
	font-size: 0.65em;
	transition: transform var(--matrax-ease-fast), color var(--matrax-ease-fast);
}
.matrax-contact-tab--active {
	background: var(--matrax-black);
	color: var(--matrax-white);
	border: 1px solid var(--matrax-black);
}
.matrax-contact-tab--active .matrax-tab-chevron {
	color: var(--matrax-white);
	transform: rotate(90deg);
}
.matrax-contact-tab:not(.matrax-contact-tab--active) {
	background: var(--matrax-white);
	color: var(--matrax-black);
	border: 1px solid var(--matrax-black);
}
.matrax-contact-tab:not(.matrax-contact-tab--active) .matrax-tab-chevron {
	color: var(--matrax-primary);
	transform: rotate(0deg);
}
.matrax-contact-form-wrap {
	margin-bottom: var(--matrax-sp-4xl);
}
.matrax-contact-form-wrap[hidden] { display: none !important; }
/* CF7 form styling – Figma: underline inputs, 24px, 2-col, pill submit, gap 60px */
.matrax-contact-form-wrap .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--matrax-sp-4xl);
}
.matrax-contact-form-wrap .wpcf7-form > p,
.matrax-contact-form-wrap .wpcf7-form > div {
	margin: 0;
}
.matrax-contact-form-wrap .wpcf7-form > p:has(textarea),
.matrax-contact-form-wrap .wpcf7-form > p:has([type="email"]),
.matrax-contact-form-wrap .wpcf7-form > p:has(.wpcf7-submit),
.matrax-contact-form-wrap .wpcf7-form > .wpcf7-response-output,
.matrax-contact-form-wrap .wpcf7-form > p.matrax-full-width {
	grid-column: 1 / -1;
}
.matrax-contact-form-wrap .wpcf7-form label {
	display: block;
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-lg);
	color: var(--matrax-black);
}
.matrax-contact-form-wrap .wpcf7-form-control-wrap {
	display: block;
}
.matrax-contact-form-wrap .wpcf7 input[type="text"],
.matrax-contact-form-wrap .wpcf7 input[type="email"],
.matrax-contact-form-wrap .wpcf7 input[type="tel"],
.matrax-contact-form-wrap .wpcf7 select,
.matrax-contact-form-wrap .wpcf7 textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--matrax-black);
	border-radius: 0;
	padding: var(--matrax-sp-xs) 0;
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-lg);
	line-height: 1.2;
	background: transparent;
	color: var(--matrax-black);
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.matrax-contact-form-wrap .wpcf7 input::placeholder,
.matrax-contact-form-wrap .wpcf7 textarea::placeholder {
	color: var(--matrax-black);
	opacity: 1;
}
.matrax-contact-form-wrap .wpcf7 input:focus,
.matrax-contact-form-wrap .wpcf7 textarea:focus {
	border-bottom-color: var(--matrax-primary);
}
.matrax-contact-form-wrap .wpcf7 textarea {
	min-height: 120px;
	resize: vertical;
	border: 1px solid var(--matrax-black);
	border-radius: var(--matrax-radius-sm);
	padding: var(--matrax-sp-sm);
}
.matrax-contact-form-wrap .wpcf7 input[type="submit"],
.matrax-contact-form-wrap .wpcf7 .wpcf7-submit {
	font-family: var(--matrax-font);
	font-weight: 500;
	font-size: var(--matrax-fs-md);
	padding: var(--matrax-sp-md) var(--matrax-sp-xl);
	border-radius: var(--matrax-radius-pill);
	border: 1px solid var(--matrax-black);
	background: var(--matrax-white);
	color: var(--matrax-black);
	cursor: pointer;
	width: auto;
	transition: background var(--matrax-ease-fast), color var(--matrax-ease-fast);
}
.matrax-contact-form-wrap .wpcf7 input[type="submit"]:hover,
.matrax-contact-form-wrap .wpcf7 .wpcf7-submit:hover {
	background: var(--matrax-black);
	color: var(--matrax-white);
}
.matrax-contact-form-wrap .wpcf7 .wpcf7-response-output { margin: 1em 0 0; }
.matrax-contact-form-wrap .wpcf7 .wpcf7-not-valid-tip {
	font-size: var(--matrax-fs-xs);
	color: #c00;
	margin-top: 4px;
}

@media (max-width: 48em) {
	.matrax-collapsible { padding: 0 24px 40px; }
	.matrax-collapsible__content { flex-wrap: wrap; }
	.matrax-collapsible__title { font-size: 2rem; }
	.matrax-collapsible-item { flex: 0 0 100%; aspect-ratio: 16 / 9; }
	.matrax-collapsible__content:hover .matrax-collapsible-item,
	.matrax-collapsible__content .matrax-collapsible-item:hover { flex-basis: 100%; }
	.matrax-collapsible-item__title { font-size: var(--matrax-fs-lg); }
	.matrax-blog-hero { padding: 32px 24px 40px; }
	.matrax-blog-hero__title { font-size: 2.5rem; }
	.matrax-blog-content { padding: 24px 24px 40px; }
	.matrax-blog-grid { gap: 24px; }
	.matrax-blog-sidebar__heading { font-size: 28px; }
	.matrax-blog-sidebar__categories { font-size: 18px; }
	.matrax-blog-sidebar__tag { font-size: 16px; padding: 12px 24px; }
	.matrax-single-hero { padding: 32px 24px 40px; }
	.matrax-single-hero__title { font-size: 1.75rem; }
	.matrax-single-hero__scroll { font-size: 18px; }
	.matrax-single-content { padding: 24px 24px 40px; }
	.matrax-single-body { font-size: 18px; }
	.matrax-contact-hero { padding: 32px 24px 40px; }
	.matrax-contact-hero__title { font-size: 2.5rem; }
	.matrax-contact-hero__title-wrap { gap: 40px; }
	.matrax-contact-hero__scroll { font-size: 18px; }
	.matrax-dealer-hero { padding: 32px 24px 40px; }
	.matrax-dealer-hero__title { font-size: 2rem; }
	.matrax-dealer-hero__title-wrap { gap: 40px; }
	.matrax-dealer-hero__scroll { font-size: 18px; }
	.matrax-dealer-intro { padding: 24px 24px; }
	.matrax-dealer-intro__text { font-size: 18px; }
	.matrax-dealer-tabs { padding: 0 24px; }
	.matrax-dealer-tab { font-size: 20px; padding: 12px 16px; }
	.matrax-dealer-map { padding: var(--matrax-sp-lg) 0; }
	.matrax-dealer-tabs__locations { padding: var(--matrax-sp-lg) 0 var(--matrax-sp-2xl); }
	.matrax-dealer-location__title { font-size: 18px; }
	.matrax-dealer-location__list { font-size: 16px; }
	.matrax-contact-block { padding: 24px 24px 40px; }
	.matrax-contact-block__heading { font-size: 28px; }
	.matrax-contact-block__intro { font-size: 18px; }
	.matrax-contact-tab { font-size: 1.25rem; padding: 14px var(--matrax-sp-md); }
	.matrax-contact-form-wrap .wpcf7-form { grid-template-columns: 1fr; gap: var(--matrax-sp-lg); }
	.matrax-contact-form-wrap .wpcf7 input[type="text"],
	.matrax-contact-form-wrap .wpcf7 input[type="email"],
	.matrax-contact-form-wrap .wpcf7 input[type="tel"],
	.matrax-contact-form-wrap .wpcf7 textarea { font-size: 18px; }
	.matrax-product-hero { padding: 32px 24px 40px; }
	.matrax-product-hero__title { font-size: 2rem; }
	.matrax-product-hero__title-wrap { gap: 40px; }
	.matrax-product-hero__scroll { font-size: 18px; }
	.matrax-product-intro { padding: 24px 24px; }
	.matrax-product-intro__text { font-size: 18px; }
	.matrax-product-category-blocks { padding: 0 0 24px; }
	.matrax-product-category-blocks__grid { flex-direction: column; aspect-ratio: auto; gap: 0; }
	.matrax-product-type-block { flex: 0 0 auto !important; aspect-ratio: 16 / 10; }
	.matrax-product-type-block__content { opacity: 1; transform: none; }
	.matrax-product-type-block__overlay-label { display: none; }
	.matrax-product-filters { padding: 24px 24px; }
	.matrax-product-filters__row { margin-bottom: 16px; }
	.matrax-product-filter-btn { font-size: 16px; padding: 12px 24px; }
	.matrax-product-section { padding: 24px 24px 40px; }
	.matrax-product-section__heading { font-size: 20px; }
	.matrax-product-section__grid .col { flex: 0 0 100%; max-width: 100%; margin: 0; padding: 0; }
	.matrax-product-list-card__link { padding: 24px; }
	.matrax-product-list-card__title { font-size: 22px; }
	.matrax-product-single__inner { padding: 24px 24px 40px; }
	.matrax-product-single__title { font-size: 1.75rem; }
}

/* Responsive (Flatsome breakpoint ~48em) */
@media only screen and (max-width: 48em) {
	.matrax-hero__title { font-size: 2.5rem; }
	.matrax-hero__inner { padding: 0; }
	.matrax-cta-overlay { min-height: 280px; }
	.matrax-cta-overlay__text { font-size: 1.5rem; }
	.matrax-product-card { aspect-ratio: 1; min-height: 260px; }
	.matrax-product-card__title { font-size: 2rem; }
	.matrax-section-heading { font-size: 2.5rem; }
	.matrax-section-heading .matrax-section-heading__title,
	h2.matrax-section-heading__title[style] { font-size: 4rem !important; }
	.matrax-footer { padding: 32px 24px 24px; }
	.matrax-footer__buttons { margin-bottom: 60px; }
	.matrax-footer__touch { margin-bottom: 60px; }
	.matrax-footer__get-in-touch { font-size: 2rem; }
	.matrax-footer__copyright,
	.matrax-footer__back { font-size: 1.125rem; }
	.matrax-button { font-size: 16px; padding: 12px 24px; }
	.matrax-breadcrumb { font-size: 18px; }
	.matrax-about-hero { padding: 32px 24px 40px; }
	.matrax-about-hero__title { font-size: 1.75rem; margin-bottom: 24px; }
	.matrax-about-hero__paragraph { font-size: 18px; }
	.matrax-about-hero__scroll { font-size: 18px; }
	.matrax-value-block__heading { font-size: 2.5rem; }
	.matrax-value-block__intro { font-size: 18px; }
	.matrax-value-card__title { font-size: 1.75rem; }
	.matrax-value-card__content { font-size: 18px; }
	.matrax-icon-value-card__title { font-size: 1.75rem; }
	.matrax-icon-value-card__content { font-size: 18px; }
	.matrax-dark-block__subtitle { font-size: 2rem; }
	.matrax-dark-block__title { font-size: 2rem; }
	.matrax-dark-block__content { font-size: 18px; }
}

/* =====================================================
   Single Product (Chi tiết sản phẩm)
   ===================================================== */

/* --- Hero (dark) --- */
.matrax-sp-hero {
	background-color: var(--matrax-gray-900);
	padding: var(--matrax-sp-4xl) 0 var(--matrax-sp-5xl);
}
.matrax-sp-hero__inner { max-width: 1200px; margin: 0 auto; }

.matrax-sp-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--matrax-sp-2xl);
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-md);
}
.matrax-sp-hero__bc-link {
	color: var(--matrax-white);
	text-decoration: none;
	transition: color var(--matrax-ease-fast);
}
.matrax-sp-hero__bc-link:hover { color: var(--matrax-primary); }
.matrax-sp-hero__bc-icon { color: var(--matrax-primary); flex-shrink: 0; }
.matrax-sp-hero__bc-current {
	color: var(--matrax-primary);
	font-weight: 600;
}

.matrax-sp-hero__row {
	display: flex;
	gap: var(--matrax-sp-3xl);
	align-items: flex-start;
}

.matrax-sp-hero__main-image {
	flex: 0 0 533px;
	max-width: 533px;
}
.matrax-sp-hero__img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: var(--matrax-radius-md);
	object-fit: cover;
	aspect-ratio: 1 / 1;
	transition: opacity var(--matrax-ease-fast);
}

.matrax-sp-hero__info { flex: 1; min-width: 0; }

.matrax-sp-hero__title {
	font-family: var(--matrax-font);
	font-size: 60px;
	font-weight: 700;
	color: var(--matrax-white);
	line-height: 1.1;
	margin: 0 0 var(--matrax-sp-xl);
	text-transform: uppercase;
	letter-spacing: 2px;
}

.matrax-sp-hero__thumbs {
	display: flex;
	gap: var(--matrax-sp-md);
	margin-bottom: var(--matrax-sp-xl);
}
.matrax-sp-hero__thumb {
	width: 249px;
	height: 249px;
	border-radius: var(--matrax-radius-md);
	overflow: hidden;
	background: #2a2a2a;
	cursor: pointer;
	transition: background .25s ease, opacity var(--matrax-ease-fast);
	padding: 6px;
	box-sizing: border-box;
}
.matrax-sp-hero__thumb:hover { opacity: .85; }
.matrax-sp-hero__thumb--active {
	background: var(--matrax-primary);
}
.matrax-sp-hero__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--matrax-radius-sm);
}

.matrax-sp-hero__excerpt,
.matrax-sp-hero__excerpt p {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-md);
	color: var(--matrax-white);
	line-height: 1.6;
	margin: 0;
}

/* --- Content section (white) --- */
.matrax-sp-content {
	background: var(--matrax-white);
	padding: var(--matrax-sp-4xl) 0 var(--matrax-sp-5xl);
}
.matrax-sp-content__inner { max-width: 1200px; margin: 0 auto; }

/* Banner */
.matrax-sp-banner { margin-bottom: var(--matrax-sp-4xl); }
.matrax-sp-banner__img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--matrax-radius-md);
	object-fit: cover;
}

/* Features */
.matrax-sp-features { margin-bottom: var(--matrax-sp-4xl); }
.matrax-sp-features__heading {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-3xl);
	font-weight: 700;
	color: var(--matrax-gray-900);
	margin: 0 0 var(--matrax-sp-lg);
}
.matrax-sp-features__list {
	list-style: disc;
	padding-left: 28px;
	margin: 0;
}
.matrax-sp-features__item {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-sm);
	color: var(--matrax-gray-700);
	line-height: 1.8;
	margin-bottom: var(--matrax-sp-xs);
}
.matrax-sp-features__body { margin-top: var(--matrax-sp-lg); }

/* Size Range */
.matrax-sp-size-range { margin-bottom: var(--matrax-sp-2xl); }
.matrax-sp-size-range__header {
	display: flex;
	align-items: center;
	gap: var(--matrax-sp-md);
	margin-bottom: var(--matrax-sp-xl);
}
.matrax-sp-size-range__icon { color: var(--matrax-primary); flex-shrink: 0; }
.matrax-sp-size-range__heading {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-3xl);
	font-weight: 700;
	color: var(--matrax-gray-900);
	margin: 0;
}

.matrax-sp-size-range__list { border-top: 2px solid var(--matrax-primary); }

/* Accordion (details/summary) */
.matrax-size-accordion {
	border-bottom: 2px solid var(--matrax-primary);
}
.matrax-size-accordion__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-lg);
	font-weight: 600;
	color: var(--matrax-gray-900);
	user-select: none;
}
.matrax-size-accordion__summary::-webkit-details-marker { display: none; }
.matrax-size-accordion__summary::marker { content: ''; }
.matrax-size-accordion__chevron {
	color: var(--matrax-primary);
	flex-shrink: 0;
	transition: transform .25s ease;
}
.matrax-size-accordion[open] .matrax-size-accordion__chevron {
	transform: rotate(180deg);
}

.matrax-size-accordion__content {
	padding: 0 0 var(--matrax-sp-lg);
}
.matrax-size-accordion__row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--matrax-sp-md);
	padding: var(--matrax-sp-xs) 0;
}
.matrax-size-accordion__row--cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.matrax-size-accordion__row--cols-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.matrax-size-accordion__row--head {
	font-weight: 700;
	font-size: var(--matrax-fs-xs);
	text-transform: uppercase;
	color: var(--matrax-gray-500);
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: var(--matrax-sp-sm);
	margin-bottom: 4px;
}
.matrax-size-accordion__cell {
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-sm);
	color: var(--matrax-gray-700);
}
.matrax-size-accordion__cell--check { display: inline-flex; align-items: center; }
.matrax-size-accordion__check {
	display: inline-block;
	font-weight: 700;
	color: var(--matrax-primary, #cda050);
	font-size: 16px;
	line-height: 1;
}
.matrax-size-accordion__check--empty {
	color: var(--matrax-gray-500, #999);
	font-weight: 400;
}

/* --- Responsive (850px) --- */
@media only screen and (max-width: 850px) {
	.matrax-sp-hero { padding: 40px 0 60px; }
	.matrax-sp-hero__row {
		flex-direction: column;
		gap: 32px;
	}
	.matrax-sp-hero__main-image {
		flex: none;
		max-width: 100%;
	}
	.matrax-sp-hero__title { font-size: 36px; }
	.matrax-sp-hero__thumbs { gap: 12px; }
	.matrax-sp-hero__thumb { width: 90px; height: 90px; }
	.matrax-sp-hero__excerpt,
	.matrax-sp-hero__excerpt p { font-size: 16px; }
	.matrax-sp-features__heading { font-size: 32px; }
	.matrax-sp-size-range__heading { font-size: 32px; }
	.matrax-size-accordion__summary { font-size: 20px; }
}

/* --- Responsive (480px) --- */
@media only screen and (max-width: 549px) {
	.matrax-section-heading .matrax-section-heading__title,
	h2.matrax-section-heading__title[style] { font-size: 4rem !important; }
}

@media only screen and (max-width: 480px) {
	.matrax-section-heading .matrax-section-heading__title,
	h2.matrax-section-heading__title[style] { font-size: 4rem !important; }
	.matrax-sp-hero { padding: 24px 0 40px; }
	.matrax-sp-hero__breadcrumb { font-size: 16px; margin-bottom: 24px; }
	.matrax-sp-hero__title { font-size: 28px; letter-spacing: 1px; }
	.matrax-sp-hero__thumbs { gap: 8px; }
	.matrax-sp-hero__thumb { width: 72px; height: 72px; }
	.matrax-sp-content { padding: 32px 0 48px; }
	.matrax-sp-features__heading { font-size: 24px; }
	.matrax-sp-size-range__heading { font-size: 24px; }
	.matrax-size-accordion__summary { font-size: 18px; padding: 16px 0; }
	.matrax-size-accordion__row { gap: 8px; }
	.matrax-size-accordion__row--cols-3 { grid-template-columns: 1fr 1fr 1fr; }
	.matrax-size-accordion__row--cols-5 {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	}
	.matrax-size-accordion__cell { font-size: 13px; }
}
h3.matrax-footer__get-in-touch {
    max-width: 350px;
    /* margin: 0px auto; */
    text-align: center;
	color: #ffff;
}

/* ========================================
   Scroll Down
   ======================================== */
.matrax-scroll-down {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	cursor: pointer;
	font-family: var(--matrax-font);
	font-size: var(--matrax-fs-sm);
}
.matrax-scroll-down__text {
	font-weight: 400;
	color: var(--matrax-gray-700);
	letter-spacing: 0.02em;
}
.matrax-scroll-down__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--matrax-primary);
	font-size: 24px;
	line-height: 1;
}
.matrax-scroll-down__icon svg {
	width: 1em;
	height: 1em;
}
.matrax-scroll-down__custom-img {
	display: block;
	height: auto;
	object-fit: contain;
}

/* Icon variants for UX Builder preview */
.matrax-scroll-down__icon--chevron-down::before  { content: '\276F'; transform: rotate(90deg); display: inline-block; }
.matrax-scroll-down__icon--chevrons-down::before  { content: '\00BB'; transform: rotate(90deg); display: inline-block; }
.matrax-scroll-down__icon--arrow-down::before     { content: '\2193'; }
.matrax-scroll-down__icon--angle-down::before     { content: '\2304'; }
.matrax-scroll-down__icon--caret-down::before     { content: '\25BC'; font-size: .75em; }
.matrax-scroll-down__icon--mouse::before          { content: '\1F5B1'; font-size: .85em; }

/* Bounce animation */
@keyframes matraxBounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40%  { transform: translateY(8px); }
	60%  { transform: translateY(4px); }
}
.matrax-scroll-down--bounce .matrax-scroll-down__icon {
	animation: matraxBounce 2s ease infinite;
}

/* Hover */
.matrax-scroll-down:hover .matrax-scroll-down__text { opacity: .7; }
.matrax-scroll-down:hover .matrax-scroll-down__icon { opacity: .8; }

/* ============================================
   MatraX Slider – edge-to-edge Flickity carousel
   ============================================ */
.matrax-slider {
	position: relative;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}
.custom-row{
	overflow: hidden;
}
.matrax-slider .row.slider {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.matrax-slider .matrax-gallery-item {
	aspect-ratio: 500 / 325;
}

.matrax-slider .matrax-gallery-item--grayscale .matrax-gallery-item__image {
	filter: grayscale(100%);
	transition: filter 0.4s ease;
}

.matrax-slider .matrax-gallery-item:hover .matrax-gallery-item__image {
	filter: grayscale(0%);
}

.matrax-slider .matrax-gallery-item__bg-img {
	transition: filter 0.4s ease, transform 0.4s ease;
}

.matrax-slider .matrax-gallery-item:hover .matrax-gallery-item__bg-img {
	transform: scale(1.05);
}

.matrax-slider .flickity-prev-next-button {
	z-index: 10;
}

.matrax-slider .flickity-page-dots {
	bottom: -30px;
}

.matrax-slider .flickity-page-dots .dot {
	width: 10px;
	height: 10px;
	margin: 0 6px;
	background: var(--matrax-gray-300);
	opacity: 0.6;
	transition: opacity 0.3s ease, background 0.3s ease;
}

.matrax-slider .flickity-page-dots .dot.is-selected {
	background: var(--matrax-primary);
	opacity: 1;
}

.matrax-slider .loading-spin {
	display: none;
}