/*
 * Thai Inter responsive layer.
 * All overrides are scoped to the child-theme body class so Blocksy, WooCommerce,
 * Stackable, and plugin screens outside the storefront keep their own behavior.
 */

.tin-mobile-grid-enabled {
	--tin-red: #a21111;
	--tin-red-hover: #bf1e1e;
	--tin-red-deep: #780b03;
	--tin-black: #0d0d0f;
	--tin-charcoal: #17171a;
	--tin-canvas: #f3f3f4;
	--tin-surface: #ffffff;
	--tin-ink: #141519;
	--tin-muted: #5b5e66;
	--tin-line: #d9dadd;
	--tin-focus: #2474d2;
	--tin-z-sticky: 40;
	--tin-z-nav: 60;
	--tin-z-dialog: 80;
}

.tin-mobile-grid-enabled .tin-mobile-nav,
.tin-mobile-grid-enabled .tin-search-dialog,
.tin-mobile-grid-enabled .tin-category-chips {
	font-family: Prompt, sans-serif;
}

.tin-mobile-grid-enabled .tin-mobile-nav,
.tin-mobile-grid-enabled .tin-search-dialog {
	display: none;
}

.tin-mobile-grid-enabled .tin-category-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin: 0 0 18px;
	padding: 2px 1px 8px;
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
}

.tin-mobile-grid-enabled .tin-category-chip {
	min-height: 40px;
	padding: 8px 14px;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--tin-line);
	border-radius: 999px;
	background: var(--tin-surface);
	color: var(--tin-ink);
	font-size: 13px;
	font-weight: 600;
	scroll-snap-align: start;
}

.tin-mobile-grid-enabled .tin-category-chip:hover,
.tin-mobile-grid-enabled .tin-category-chip.is-current {
	border-color: var(--tin-red);
	background: var(--tin-red);
	color: #ffffff;
}

@media (max-width: 999.98px) {
	.tin-mobile-grid-enabled {
		--theme-container-edge-spacing: calc(100vw - 32px);
	}

	.tin-mobile-grid-enabled #main {
		background: var(--tin-canvas);
	}

	.tin-mobile-grid-enabled[data-prefix="single_page"] [class*="ct-container"] > article[class*="post"],
	.tin-mobile-grid-enabled[data-prefix="product"] [class*="ct-container"] > article[class*="post"] {
		--theme-boxed-content-spacing: 24px;
		--theme-boxed-content-border-radius: 10px;
		box-shadow: none;
	}

	.tin-mobile-grid-enabled [data-products] {
		--shop-columns: repeat(3, minmax(0, 1fr));
		--grid-columns-gap: 12px;
		--grid-rows-gap: 12px;
	}

	.tin-mobile-grid-enabled [data-products] .product {
		align-items: stretch;
		overflow: hidden;
		padding: 12px;
		border: 1px solid var(--tin-line);
		border-radius: 10px;
		background: var(--tin-surface);
		text-align: left;
		--horizontal-alignment: stretch;
		--text-horizontal-alignment: left;
		--product-element-spacing: 9px;
	}

	.tin-mobile-grid-enabled [data-products] .product figure {
		margin-inline: 0;
		background: #ffffff;
	}

	.tin-mobile-grid-enabled [data-products] .product figure .ct-media-container {
		aspect-ratio: 4 / 3;
		border-radius: 6px;
	}

	.tin-mobile-grid-enabled [data-products] .product figure img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.tin-mobile-grid-enabled [data-products] .woocommerce-loop-product__title {
		min-height: 3.9em;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		font-size: 14px;
		line-height: 1.3;
		text-wrap: pretty;
	}

	.tin-mobile-grid-enabled [data-products] .product .price {
		margin-top: auto;
		color: var(--tin-red);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.35;
	}

	.tin-mobile-grid-enabled [data-products] .woocommerce-price-suffix {
		display: block;
		margin-top: 2px;
		color: var(--tin-muted);
		font-size: 11px;
		font-weight: 500;
	}

	.tin-mobile-grid-enabled [data-products="type-1"] .ct-woo-card-actions {
		width: 100%;
		margin-top: 0;
	}

	.tin-mobile-grid-enabled [data-products] .ct-woo-card-actions .button,
	.tin-mobile-grid-enabled [data-products] .ct-woo-card-actions .added_to_cart {
		width: 100%;
		min-height: 44px;
		padding: 7px 10px;
		border-radius: 6px;
		background: var(--tin-red);
		color: #ffffff;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.25;
	}

	.tin-mobile-grid-enabled [data-products] .ct-woo-card-actions .button:hover,
	.tin-mobile-grid-enabled [data-products] .ct-woo-card-actions .added_to_cart:hover {
		background: var(--tin-red-hover);
		color: #ffffff;
	}

	.tin-mobile-grid-enabled [data-products] .wc-buy-now-btn-archive,
	.tin-mobile-grid-enabled [data-products] .btn-buy-now-custom {
		display: none;
	}

	.tin-mobile-grid-enabled .onsale,
	.tin-mobile-grid-enabled [class*="ct-woo-badge-"] {
		border-radius: 999px;
		background: var(--tin-red);
		color: #ffffff;
	}

	.tin-mobile-grid-enabled .woo-listing-top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 10px;
		align-items: center;
	}

	.tin-mobile-grid-enabled .woo-listing-top .woocommerce-result-count {
		font-size: 12px;
		line-height: 1.4;
		text-transform: none;
		letter-spacing: 0;
	}

	.tin-mobile-grid-enabled .woo-listing-top select {
		min-height: 44px;
		max-width: 170px;
		border-color: var(--tin-line);
		background-color: #ffffff;
		font-size: 14px;
	}

	.tin-mobile-grid-enabled .product-entry-wrapper {
		gap: 24px;
	}

	.tin-mobile-grid-enabled .woocommerce-product-gallery,
	.tin-mobile-grid-enabled .entry-summary {
		min-width: 0;
	}

	.tin-mobile-grid-enabled .entry-summary .entry-title {
		font-size: 24px;
		line-height: 1.35;
		text-wrap: balance;
	}

	.tin-mobile-grid-enabled .entry-summary .price {
		color: var(--tin-red);
	}

	.tin-mobile-grid-enabled .entry-summary .single_add_to_cart_button,
	.tin-mobile-grid-enabled .entry-summary .wc-buy-now-btn,
	.tin-mobile-grid-enabled .woocommerce-cart-form button,
	.tin-mobile-grid-enabled .wc-proceed-to-checkout a,
	.tin-mobile-grid-enabled .woocommerce-checkout button,
	.tin-mobile-grid-enabled .woocommerce-account button {
		min-height: 48px;
		border-radius: 7px;
	}

	.tin-mobile-grid-enabled .entry-summary .single_add_to_cart_button {
		background: var(--tin-red);
	}

	.tin-mobile-grid-enabled .woocommerce-tabs {
		margin-top: 30px;
	}

	.tin-mobile-grid-enabled .ct-woocommerce-cart-form,
	.tin-mobile-grid-enabled .wc-block-cart,
	.tin-mobile-grid-enabled .wc-block-checkout,
	.tin-mobile-grid-enabled .woocommerce-checkout,
	.tin-mobile-grid-enabled .woocommerce-MyAccount-content,
	.tin-mobile-grid-enabled .woocommerce-form-login {
		min-width: 0;
	}

	.tin-mobile-grid-enabled .wc-block-components-text-input input,
	.tin-mobile-grid-enabled .woocommerce form input:not([type="checkbox"]):not([type="radio"]),
	.tin-mobile-grid-enabled .woocommerce form select,
	.tin-mobile-grid-enabled .woocommerce form textarea {
		min-height: 48px;
		font-size: 16px;
	}

	.tin-mobile-grid-enabled .woocommerce-MyAccount-navigation ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-bottom: 24px;
	}

	.tin-mobile-grid-enabled .woocommerce-MyAccount-navigation li a {
		min-height: 44px;
		padding: 9px 12px;
		display: flex;
		align-items: center;
		border: 1px solid var(--tin-line);
		border-radius: 7px;
		background: #ffffff;
		color: var(--tin-ink);
		font-size: 13px;
		font-weight: 600;
	}

	.tin-mobile-grid-enabled .woocommerce-MyAccount-navigation .is-active a {
		border-color: var(--tin-red);
		background: var(--tin-red);
		color: #ffffff;
	}

	.tin-mobile-grid-enabled[data-footer*="type-1"] .ct-footer [data-row="middle"] > div {
		--container-spacing: 36px;
		--columns-gap: 24px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tin-mobile-grid-enabled[data-footer*="type-1"] [data-column="widget-area-1"] {
		grid-column: 1 / -1;
	}
}

@media (max-width: 689.98px) {
	.tin-mobile-grid-enabled {
		--theme-container-edge-spacing: calc(100vw - 24px);
	}

	.tin-mobile-grid-enabled:not(.woocommerce-checkout) {
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}

	.tin-mobile-grid-enabled #main-container {
		overflow: clip;
	}

	.tin-mobile-grid-enabled #header {
		position: sticky;
		top: 0;
		z-index: var(--tin-z-sticky);
	}

	.tin-mobile-grid-enabled.admin-bar #header {
		top: 46px;
	}

	.tin-mobile-grid-enabled[data-header*="type-1"] {
		--header-height: 64px;
	}

	.tin-mobile-grid-enabled[data-header*="type-1"] .ct-header [data-device="mobile"] [data-row="middle"] {
		--height: 64px;
		background: var(--tin-black);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.tin-mobile-grid-enabled[data-header*="type-1"] .ct-header [data-device="mobile"] [data-row="bottom"] {
		display: none;
	}

	.tin-mobile-grid-enabled[data-header*="type-1"] .ct-header [data-device="mobile"] .site-logo-container img {
		width: auto;
		max-height: 44px;
	}

	.tin-mobile-grid-enabled[data-header*="type-1"] .ct-header [data-id="trigger"] {
		--toggle-button-size: 44px;
		--toggle-button-padding: 12px;
		--toggle-button-radius: 7px;
		--toggle-button-border-width: 1px;
		--toggle-button-border-color: rgba(255, 255, 255, 0.28);
	}

	.tin-mobile-grid-enabled[data-header*="type-1"] #offcanvas {
		--side-panel-width: min(88vw, 380px);
	}

	.tin-mobile-grid-enabled[data-header*="type-1"] #offcanvas .mobile-menu a {
		min-height: 48px;
		font-size: 17px;
	}

	.tin-mobile-grid-enabled[data-prefix="single_page"] [class*="ct-container"] > article[class*="post"],
	.tin-mobile-grid-enabled[data-prefix="product"] [class*="ct-container"] > article[class*="post"] {
		--theme-boxed-content-spacing: 16px;
		--theme-boxed-content-border-radius: 8px;
	}

	.tin-mobile-grid-enabled .entry-content > .wp-block-stackable-carousel.alignfull {
		width: 100%;
		margin-inline: 0;
	}

	.tin-mobile-grid-enabled .stk-block-carousel .stk-img-wrapper,
	.tin-mobile-grid-enabled .stk-block-carousel .stk-img {
		border-radius: 8px;
	}

	.tin-mobile-grid-enabled .stk-block-carousel__button {
		min-width: 44px;
		min-height: 44px;
	}

	.tin-mobile-grid-enabled .entry-content > h2,
	.tin-mobile-grid-enabled .woocommerce-products-header__title,
	.tin-mobile-grid-enabled .page-title {
		font-size: 21px;
		line-height: 1.35;
		text-wrap: balance;
	}

	.tin-mobile-grid-enabled [data-products] {
		--shop-columns: repeat(2, minmax(0, 1fr));
		--grid-columns-gap: 8px;
		--grid-rows-gap: 8px;
	}

	.tin-mobile-grid-enabled [data-products] .product {
		padding: 8px;
		border-radius: 8px;
		--product-element-spacing: 7px;
	}

	.tin-mobile-grid-enabled [data-products] .woocommerce-loop-product__title {
		font-size: 13px;
	}

	.tin-mobile-grid-enabled [data-products] .product .price {
		font-size: 14px;
	}

	.tin-mobile-grid-enabled [data-products] .ct-woo-card-actions .button,
	.tin-mobile-grid-enabled [data-products] .ct-woo-card-actions .added_to_cart {
		font-size: 12px;
	}

	.tin-mobile-grid-enabled .tin-category-chips {
		margin-inline: -1px;
		margin-bottom: 14px;
		padding-bottom: 6px;
	}

	.tin-mobile-grid-enabled .tin-category-chip {
		min-height: 44px;
	}

	.tin-mobile-grid-enabled .product-entry-wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.tin-mobile-grid-enabled .entry-summary .entry-title {
		font-size: 21px;
	}

	.tin-mobile-grid-enabled .product.type-product.product-type-simple .entry-summary form.cart {
		display: grid;
		grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
		gap: 8px;
	}

	.tin-mobile-grid-enabled .product.type-product.product-type-simple .entry-summary form.cart .quantity,
	.tin-mobile-grid-enabled .product.type-product.product-type-simple .entry-summary form.cart .single_add_to_cart_button {
		margin: 0;
	}

	.tin-mobile-grid-enabled .entry-summary .wc-buy-now-btn {
		width: 100%;
		margin-top: 8px;
	}

	.tin-mobile-grid-enabled .woocommerce-tabs .tabs {
		overflow-x: auto;
		white-space: nowrap;
	}

	.tin-mobile-grid-enabled .ct-woocommerce-cart-form .shop_table,
	.tin-mobile-grid-enabled .wc-block-cart-items {
		font-size: 13px;
	}

	.tin-mobile-grid-enabled .ct-woocommerce-cart-form .cart_totals,
	.tin-mobile-grid-enabled .ct-order-review {
		--cart-totals-padding: 16px;
		--order-review-padding: 16px;
	}

	.tin-mobile-grid-enabled .tin-mobile-nav {
		position: fixed;
		z-index: var(--tin-z-nav);
		inset: auto 0 0;
		min-height: 68px;
		padding: 5px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		background: var(--tin-black);
		border-top: 1px solid #303035;
		color: #d8d8dc;
	}

	.tin-mobile-grid-enabled .tin-mobile-nav__item {
		position: relative;
		min-width: 0;
		min-height: 54px;
		padding: 4px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		border: 0;
		border-radius: 7px;
		background: transparent;
		color: inherit;
		font: inherit;
		font-size: 11px;
		line-height: 1.2;
		cursor: pointer;
	}

	.tin-mobile-grid-enabled .tin-mobile-nav__item svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.9;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.tin-mobile-grid-enabled .tin-mobile-nav__item.is-current {
		background: #29292e;
		color: #ffffff;
	}

	.tin-mobile-grid-enabled .tin-mobile-nav__item.is-current svg {
		color: #ef343b;
	}

	.tin-mobile-grid-enabled .tin-mobile-nav__count {
		position: absolute;
		top: 1px;
		left: calc(50% + 8px);
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		display: grid;
		place-items: center;
		border-radius: 999px;
		background: var(--tin-red);
		color: #ffffff;
		font-size: 10px;
		font-weight: 700;
	}

	.tin-mobile-grid-enabled .tin-search-dialog[open] {
		position: fixed;
		z-index: var(--tin-z-dialog);
		inset: auto 10px calc(76px + env(safe-area-inset-bottom));
		width: min(calc(100% - 20px), 560px);
		margin: 0 auto;
		padding: 18px;
		display: block;
		border: 0;
		border-radius: 12px;
		background: #ffffff;
		color: var(--tin-ink);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22);
	}

	.tin-mobile-grid-enabled .tin-search-dialog::backdrop {
		background: rgba(5, 5, 7, 0.76);
	}

	.tin-mobile-grid-enabled .tin-search-dialog__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 16px;
	}

	.tin-mobile-grid-enabled .tin-search-dialog__head strong {
		font-size: 19px;
	}

	.tin-mobile-grid-enabled .tin-search-dialog__head button {
		width: 44px;
		height: 44px;
		padding: 10px;
		display: grid;
		place-items: center;
		border: 1px solid var(--tin-line);
		border-radius: 7px;
		background: #ffffff;
		color: var(--tin-ink);
	}

	.tin-mobile-grid-enabled .tin-search-dialog__head svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.9;
		stroke-linecap: round;
	}

	.tin-mobile-grid-enabled .tin-product-search label {
		display: block;
		margin-bottom: 7px;
		font-size: 14px;
		font-weight: 600;
	}

	.tin-mobile-grid-enabled .tin-product-search > div {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.tin-mobile-grid-enabled .tin-product-search input[type="search"] {
		min-width: 0;
		min-height: 48px;
		padding: 0 12px;
		border: 1px solid var(--tin-line);
		border-radius: 7px 0 0 7px;
		background: #ffffff;
		color: var(--tin-ink);
		font-size: 16px;
	}

	.tin-mobile-grid-enabled .tin-product-search input[type="search"]::placeholder {
		color: #62656d;
		opacity: 1;
	}

	.tin-mobile-grid-enabled .tin-product-search button {
		min-height: 48px;
		padding: 0 14px;
		border: 0;
		border-radius: 0 7px 7px 0;
		background: var(--tin-red);
		color: #ffffff;
		font-size: 14px;
		font-weight: 600;
	}

	.tin-mobile-grid-enabled .tin-mobile-nav__item:focus-visible,
	.tin-mobile-grid-enabled .tin-category-chip:focus-visible,
	.tin-mobile-grid-enabled .tin-search-dialog button:focus-visible,
	.tin-mobile-grid-enabled .tin-search-dialog input:focus-visible {
		outline: 3px solid var(--tin-focus);
		outline-offset: 2px;
	}

	.tin-mobile-grid-enabled .cky-btn-revisit-wrapper,
	.tin-mobile-grid-enabled .ct-back-to-top {
		bottom: calc(82px + env(safe-area-inset-bottom));
	}
}

@media (max-width: 359.98px) {
	.tin-mobile-grid-enabled {
		--theme-container-edge-spacing: calc(100vw - 16px);
	}

	.tin-mobile-grid-enabled [data-products] {
		--grid-columns-gap: 6px;
		--grid-rows-gap: 6px;
	}

	.tin-mobile-grid-enabled [data-products] .product {
		padding: 7px;
	}

	.tin-mobile-grid-enabled [data-products] .woocommerce-loop-product__title {
		font-size: 12.5px;
	}

	.tin-mobile-grid-enabled [data-products] .product .price {
		font-size: 13px;
	}

	.tin-mobile-grid-enabled .woo-listing-top select {
		max-width: 132px;
	}

	.tin-mobile-grid-enabled .tin-product-search button {
		padding-inline: 10px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tin-mobile-grid-enabled *,
	.tin-mobile-grid-enabled *::before,
	.tin-mobile-grid-enabled *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}
