/*
 * Final visual parity layer for the fasttoner-react reference project.
 *
 * This file is intentionally loaded after the parent theme and every feature
 * stylesheet.  Claue and several legacy page-builder blocks still ship fixed
 * widths and floats; keeping the parity rules in one late layer makes the
 * React layout deterministic without replacing WooCommerce markup/behaviour.
 */

:root {
	--ft-page-max: 1420px;
	--ft-page-pad: clamp(16px, 2.25vw, 32px);
	--ft-blue: #0069bd;
	--ft-blue-dark: #174c73;
	--ft-teal: #16899e;
	--ft-ink: #304759;
	--ft-muted: #65788a;
	--ft-line: #e1e8ef;
	--ft-soft: #f6f9fc;
	--ft-card-radius: 14px;
}

html,
body { max-width: 100%; overflow-x: clip; }

html body,
html body :is(h1,h2,h3,h4,h5,h6,p,li,a,button,input,textarea,select,label,legend,table,th,td,summary,small,strong,span) {
	font-family: var(--ft-font, "Kanit", sans-serif);
}

html body { color: var(--ft-ink); font-size: 14px; line-height: 1.7; }
html body :is(h1,h2,h3,h4,h5,h6) { color: #223b52; line-height: 1.45; letter-spacing: 0; }
html body :is(button,.button,input[type=submit]) { font-weight: 600; }

/* The React app uses a fluid canvas with a generous cap on wide desktops. */
html body .jas-container,
html body #jas-content > .jas-row,
html body #jas-header .header__mid > .jas-row {
	box-sizing: border-box;
	width: min(100% - (var(--ft-page-pad) * 2), var(--ft-page-max));
	max-width: var(--ft-page-max);
	margin-inline: auto;
}

html body.home #jas-content > .jas-row,
html body.home #jas-content > .jas-row > [class*="jas-col-"] {
	width: 100%; max-width: none; margin: 0; padding-inline: 0;
}

/* Header geometry follows HeaderMarkup + HeaderActions in the React source. */
html body #jas-header { border-top: 4px solid #353535; background: #fff; }
html body #jas-header .header__top { display: none !important; }
html body #jas-header .header__mid { padding-inline: 15px !important; background: #fff; border-bottom: 1px solid #edf1f5; }
html body #jas-header .header__mid > .jas-row {
	display: flex; align-items: center; width: 100% !important; max-width: none !important;
	min-height: 92px; margin: 0 !important;
}
html body #jas-header .header__mid > .jas-row > div { box-sizing: border-box; padding-inline: 0; }
html body #jas-header .header__mid > .jas-row > div:nth-child(2) { flex: 0 0 16.666667% !important; width: 16.666667% !important; }
html body #jas-header .header__mid > .jas-row > div:nth-child(3) { flex: 0 0 66.666667% !important; width: 66.666667% !important; }
html body #jas-header .header__mid > .jas-row > div:last-child { flex: 0 0 16.666667% !important; width: 16.666667% !important; }
html body #jas-header .jas-branding img.regular-logo { display: block !important; width: 140px !important; max-width: 140px; height: auto !important; max-height: 54px; margin: 0; object-fit: contain; }
html body #jas-header .jas-branding img:is(.sticky-logo,.retina-logo) { display: none !important; }
html body #jas-header :is(.jas-navigation,.jas-action) { align-items: center; }
html body #jas-header .jas-navigation { min-height: 92px; }
html body #jas-header .jas-menu { display: flex !important; align-items: center; justify-content: center; gap: clamp(21px,2.2vw,42px); }
html body #jas-header .jas-menu > li { margin: 0 !important; }
html body #jas-header .jas-menu > li > a {
	position: relative; display: flex; align-items: center; min-height: 62px; padding: 0 !important;
	color: #111; font-size: 14px; line-height: 1.45; white-space: nowrap;
}
html body #jas-header .jas-menu > li:is(.current-menu-item,.current-menu-parent) > a,
html body #jas-header .jas-menu > li > a:hover { color: #16899e; }
html body #jas-header .jas-menu > li:is(.current-menu-item,.current-menu-parent) > a::after {
	content: ""; position: absolute; right: 0; bottom: 16px; left: 0; height: 3px;
	border-radius: 3px; background: #0878cc;
}
html body #jas-header .jas-action { display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 7px; }
html body #jas-header .header__mid .jas-action > .sf-open,
html body #jas-header .header__mid .jas-my-account > a,
html body #jas-header .header__mid .jas-icon-cart > a,
html body #jas-header .ft-header-wishlist {
	display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box;
	min-width: 42px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 10px;
	background: transparent; color: #111; line-height: 1; text-decoration: none; cursor: pointer;
}
html body #jas-header .header__mid .jas-my-account > a { gap: 8px; padding-inline: 4px; }
html body #jas-header .header__mid :is(.sf-open,.jas-my-account > a,.jas-icon-cart > a,.ft-header-wishlist):hover { background: #f2f7fb; color: #0878cc; }
html body #jas-header .header__mid .jas-action i { font-size: 22px; }
html body #jas-header .header__mid .jas-my-account > a::after { content: none !important; }
html body #jas-header .ft-account-text { font-size: 13px; line-height: 1.4; color: #111; white-space: nowrap; }
html body #jas-header .ft-header-language {
	display: inline-flex; align-items: center; height: 42px; padding: 2px; border: 1px solid #e3e7eb;
	border-radius: 23px; background: #fff;
}
html body #jas-header .ft-header-language button {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: #607080; font: inherit; font-size: 12px; cursor: pointer;
}
html body #jas-header .ft-header-language button.on { background: #0878cc; color: #fff; }
html body #jas-header .jas-icon-cart .count { top: -1px; right: -2px; min-width: 16px; height: 16px; line-height: 16px; background: #0878cc; font-size: 10px; }

html body .ft-header-wishlist-dialog {
	box-sizing: border-box; width: min(420px,calc(100vw - 32px)); padding: 32px; border: 1px solid #dce6ef;
	border-radius: 16px; color: #304759; background: #fff; text-align: center; box-shadow: 0 24px 70px rgba(18,49,72,.22);
}
html body .ft-header-wishlist-dialog::backdrop { background: rgba(18,31,43,.48); }
html body .ft-header-wishlist-dialog .ft-wishlist-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; border: 1px solid #dce6ef; border-radius: 50%; background: #fff; color: #526878; font-size: 24px; line-height: 1; }
html body .ft-header-wishlist-dialog .ft-wishlist-icon { color: #0878cc; font-size: 48px; line-height: 1; }
html body .ft-header-wishlist-dialog h2 { margin: 12px 0 4px; font-size: 20px; }
html body .ft-header-wishlist-dialog p { margin: 0 0 20px; color: #65788a; }
html body .ft-header-wishlist-dialog > a { display: inline-flex; min-height: 42px; align-items: center; padding: 0 22px; border-radius: 9px; background: #0878cc; color: #fff; text-decoration: none; }

/* Animated guidance inside the full-width product search. */
html body #jas-content :is(.dgwt-wcas-sf-wrapp,.fx-finder-box):has(.ft-animated-search-hint) { position: relative; overflow: hidden; }
html body #jas-content .ft-animated-search-hint {
	position: absolute; z-index: 3; top: 50%; left: 50px; right: 22px; overflow: hidden;
	transform: translateY(-50%); color: #7b8792; font-size: 14px; line-height: 1.4;
	white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
}
html body #jas-content .ft-animated-search-hint.is-entering { animation: ft-search-hint-slide .42s ease both; }
html body #jas-content .ft-animated-search-hint.is-typing::after {
	content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: 3px;
	vertical-align: -2px; background: #1694ab; animation: ft-search-caret-blink .78s steps(1,end) infinite;
}
@keyframes ft-search-hint-slide {
	from { opacity: 0; transform: translateY(calc(-50% + 12px)); }
	to { opacity: 1; transform: translateY(-50%); }
}
@keyframes ft-search-caret-blink {
	0%, 48% { opacity: 1; }
	49%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	html body #jas-content .ft-animated-search-hint.is-entering { animation: none; }
	html body #jas-content .ft-animated-search-hint.is-typing::after { animation: none; opacity: 1; }
}

/* WordPress MetaSlider equivalent of the React BannerSlider. */
html body.home .metaslider,
html body.home .metaslider > div,
html body.home .metaslider .flex-viewport {
	box-sizing: border-box; width: 100% !important; max-width: 100% !important;
}
html body.home .metaslider { margin-inline: auto !important; overflow: hidden; }
html body.home .metaslider .slides { margin: 0 !important; padding: 0 !important; }
html body.home .metaslider .slides > li { box-sizing: border-box; max-width: 100vw; overflow: hidden; }
html body.home .metaslider .slides img {
	display: block !important; width: 100% !important; max-width: 100% !important;
	height: auto !important; margin: 0 auto !important; object-fit: contain !important;
}

/* Shared cards: equal height, centred copy and contained artwork. */
html body :is(.replica-product,.products .product) { min-width: 0; text-align: left; }
html body :is(.replica-product,.products .product) > .product-inner {
	display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%;
	min-height: 100%; overflow: hidden; border: 1px solid #e5e9ed; border-radius: 12px; background: #fff;
}
html body :is(.replica-product,.products .product) .product-image {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	box-sizing: border-box; width: 100%; min-height: 0; overflow: hidden;
}
html body :is(.replica-product,.products .product) .product-image > a { display: flex; align-items: center; justify-content: center; width: 100%; }
html body :is(.replica-product,.products .product) .product-image img {
	display: block; width: 100% !important; max-width: 100% !important; height: clamp(180px, 18vw, 285px) !important;
	margin: 0 auto; object-fit: contain !important; object-position: center !important;
}
html body :is(.replica-product,.products .product) .product-info {
	display: flex; flex: 1; flex-direction: column; align-items: flex-start; box-sizing: border-box;
	width: 100%; padding: 14px 12px 16px; text-align: left;
}
html body :is(.replica-product,.products .product) .product-title {
	display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; min-height: 3.2em;
	margin: 0 0 10px; line-height: 1.6; text-align: left;
}
html body :is(.replica-product,.products .product) .product-title a {
	display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	color: #253748; text-align: left;
}
html body :is(.replica-product,.products .product) .price {
	display: flex; align-items: flex-end; justify-content: flex-start; min-height: 2.8em; margin-top: auto;
	text-align: left;
}
html body :is(.replica-product,.products .product) .fx-card-meta { justify-content: flex-start; }

/* Archive/search/related grids share the same dimensions as ProductListing. */
html body :is(.ft-product-grid,.site-search-grid,.related.products .products,.upsells.products .products) {
	display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch; gap: 24px; width: 100%; margin-inline: auto;
}
html body :is(.ft-product-grid,.site-search-grid,.related.products .products,.upsells.products .products) > .product {
	position: relative !important; inset: auto !important; float: none !important; width: auto !important;
	max-width: none !important; margin: 0 !important; padding: 0 !important;
}

/* React account/auth card adapted to the native WooCommerce forms. */
html body.ft-account-page #jas-content { min-height: 70vh; background: #f6f9fc; }
html body.ft-account-page #jas-content .jas-page > [class*="jas-col-"] {
	margin-top: 24px !important;
}
html body.ft-account-page #jas-content .woocommerce {
	box-sizing: border-box; width: min(100% - 32px, 1120px); max-width: 1120px;
	margin: 0 auto; padding: 0 0 64px !important;
}
html body.ft-account-page .woocommerce :is(form.login,form.register,.woocommerce-ResetPassword,.woocommerce-MyAccount-content) {
	border: 1px solid #dce6ef; border-radius: 16px; background: #fff;
	box-shadow: 0 8px 32px rgba(23,61,88,.06);
}
html body.ft-account-page .woocommerce :is(form.login,form.register,.woocommerce-ResetPassword) {
	box-sizing: border-box; width: min(100%, 440px); margin-inline: auto;
}
html body.ft-account-page .u-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
html body.ft-account-page .u-columns > [class*="col-"] { float: none; width: auto; max-width: none; padding: 0; }

/* Content, blog, FAQ and service templates reuse the React calm surfaces. */
html body:is(.ft-company-page,.ft-shipping-page,.ft-order-service-page,.page,.single-post) .site-content,
html body.single-post .jas-container > .jas-row { color: var(--ft-ink); }
html body.single-post article,
html body.page .entry-content { overflow-wrap: anywhere; }
html body.single-post article :is(img,iframe,video),
html body.page .entry-content :is(img,iframe,video) { max-width: 100%; height: auto; }
html body .site-content :is(.vc_tta-accordion .vc_tta-panel,.ft-faq-item) {
	border: 1px solid var(--ft-line); border-radius: 12px; background: #fff; overflow: hidden;
}
html body .site-content .vc_tta-accordion .vc_tta-panel-title > a {
	min-height: 64px; padding: 18px 22px; background: #fff; color: #263e50;
}
html body .site-content .vc_tta-accordion .vc_active .vc_tta-panel-title > a {
	background: #f5f9fc; color: var(--ft-blue);
}

/* Forms, notices and pagination match the React controls without red accents. */
html body :is(.woocommerce form,.site-content form) :is(input.input-text,input[type=email],input[type=tel],input[type=text],input[type=password],select,textarea) {
	box-sizing: border-box; max-width: 100%; border: 1px solid #cbdce9; border-radius: 8px;
	background: #fbfcfe; color: var(--ft-ink);
}
html body :is(.woocommerce form,.site-content form) :is(input,select,textarea):focus {
	outline: 2px solid #b4dcfa; outline-offset: 1px; border-color: #087ac5;
}
html body .woocommerce-error { border: 1px solid #e6cf9b; background: #fff8e8; color: #6c5421; }
html body .woocommerce-info { border: 1px solid #c9e2f3; background: #edf6fd; color: #24526f; }
html body .woocommerce-message { border: 1px solid #cbe4d4; background: #edf9f1; color: #24623a; }

html body :is(.woocommerce-pagination,.jas-pagination,.navigation.pagination) {
	display: flex !important; justify-content: center !important; width: 100% !important; clear: both;
}
html body :is(.woocommerce-pagination,.jas-pagination,.navigation.pagination) :is(ul.page-numbers,.nav-links) {
	display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap;
	gap: 8px; width: fit-content !important; margin: 26px auto !important; padding: 0 !important;
}

@media (min-width: 1650px) {
	html body :is(.ft-product-grid,.site-search-grid) { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (max-width: 1199px) {
	html body #jas-content .dgwt-wcas-search-wrapp { display: none !important; }
	html body #jas-header { border-top-width: 4px; }
	html body #jas-header .header__mid { padding-inline: 12px !important; }
	html body #jas-header .header__mid > .jas-row {
		display: grid !important; grid-template-columns: 44px minmax(0,1fr) 44px;
		align-items: center; gap: 4px; width: 100% !important; min-height: 64px; margin: 0 !important;
	}
	html body #jas-header .header__mid > .jas-row > div { width: auto !important; max-width: none !important; padding: 0; }
	html body #jas-header .header__mid > .jas-row > div:first-child { display: flex !important; grid-column: 1; grid-row: 1; }
	html body #jas-header .header__mid > .jas-row > div:nth-child(2) { grid-column: 2; grid-row: 1; justify-self: stretch; width: auto !important; text-align: center; transform: none !important; }
	html body #jas-header .header__mid > .jas-row > div:nth-child(3) { display: none !important; }
	html body #jas-header .header__mid > .jas-row > div:last-child { display: flex !important; grid-column: 3; grid-row: 1; justify-self: end; width: 44px !important; }
	html body #jas-header .jas-branding { width: 100% !important; }
	html body #jas-header .jas-branding > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; }
	html body #jas-header .jas-branding img.regular-logo { width: 90px !important; max-width: 100%; max-height: none; }
	html body #jas-header .header__mid > .jas-row > div:last-child .jas-action > .sf-open {
		display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px;
	}
	html body #jas-header .ft-header-language,
	html body #jas-header .ft-header-wishlist,
	html body #jas-header .ft-account-text { display: none !important; }
	html body :is(.ft-product-grid,.site-search-grid,.related.products .products,.upsells.products .products) {
		grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px;
	}
}

@media (max-width: 767px) {
	:root { --ft-page-pad: 10px; }
	html body #jas-header .header__mid > .jas-row { min-height: 64px; }

	/* Force the same desktop/mobile artwork switch used in HomeContent.jsx. */
	html body.home .vc_hidden-xs { display: none !important; }
	html body.home :is(.vc_hidden-lg.vc_hidden-md.vc_hidden-sm,.home-slider-section.mobile) { display: block !important; }
	html body.home .home-slider-section.mobile,
	html body.home .home-slider-section.mobile > .wpb_column,
	html body.home .home-slider-section.mobile .vc_column-inner,
	html body.home .home-slider-section.mobile .wpb_wrapper { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
	html body.home #metaslider-id-16425,
	html body.home #metaslider-id-8389 { width: 100% !important; max-width: 100% !important; min-height: 0 !important; }

	html body :is(.ft-product-grid,.site-search-grid,.related.products .products,.upsells.products .products) {
		grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px;
	}
	html body :is(.replica-product,.products .product) .product-image img {
		height: clamp(118px, 42vw, 170px) !important;
	}
	html body :is(.replica-product,.products .product) .product-info { padding: 10px 8px 12px; }
	html body :is(.replica-product,.products .product) .product-title { min-height: 3.2em; font-size: 12px; }
	html body :is(.replica-product,.products .product) .price { font-size: 13px; }
	html body.ft-account-page .u-columns { grid-template-columns: 1fr; }
	html body.ft-account-page #jas-content .jas-page > [class*="jas-col-"] { margin-top: 16px !important; }
	html body.ft-account-page #jas-content .woocommerce { width: min(100% - 24px, 560px); padding: 0 0 40px !important; }
	html body.ft-account-page #jas-content :is(.jas-row,.u-columns,[class*="jas-col-"]) {
		box-sizing: border-box; width: 100%; max-width: 100%; margin-inline: 0; padding-inline: 0;
	}

	/* Native Claue gallery mapped to the responsive ProductDetail layout. */
	html body.single-product #jas-content .jas-container,
	html body.single-product #jas-content .jas-row,
	html body.single-product #jas-content .jas-row > [class*="jas-col-"] {
		box-sizing: border-box; width: 100% !important; max-width: 100% !important;
		margin-inline: 0 !important; padding-inline: 0 !important; float: none !important;
	}
	html body.single-product #jas-content .jas-container { width: 100%; padding-inline: 14px !important; }
	html body.single-product .single-product-thumbnail,
	html body.single-product .p-thumb,
	html body.single-product .p-thumb .slick-list {
		display: block; box-sizing: border-box; width: 100% !important; max-width: 100% !important;
		margin-inline: 0 !important; overflow: hidden;
	}
	html body.single-product .p-thumb .p-item,
	html body.single-product .p-thumb .p-item > a { max-width: 100%; overflow: hidden; }
	html body.single-product .p-thumb .p-item img {
		display: block; width: 100% !important; max-width: 100% !important; height: auto !important;
		max-height: 520px; margin: 0 auto !important; object-fit: contain !important; object-position: center !important;
	}
	html body.single-product .p-nav { box-sizing: border-box; width: 100% !important; max-width: 100% !important; }
	html body.single-product .summary.entry-summary { box-sizing: border-box; width: 100%; max-width: 100%; padding: 24px 2px 0; }
	html body.single-product .page-head .jas-container { padding-inline: 14px !important; }
	html body.single-product .yoast-breadcrumbs,
	html body.single-product .woocommerce-breadcrumb { white-space: normal; overflow-wrap: anywhere; line-height: 1.65; }

	/* The compact React mobile state keeps the contact action, not its tooltip. */
	html body .fx-ask-nudge { display: none !important; }
	html body .site-content .vc_tta-accordion .vc_tta-panel-title > a { min-height: 56px; padding: 16px; }
	html body .fx-ask-tab { max-width: calc(100vw - 88px); }
}

@media (max-width: 359px) {
	html body :is(.ft-product-grid,.site-search-grid,.related.products .products,.upsells.products .products) { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	html body *, html body *::before, html body *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}