/* ============================================================
   TexaCoat 2026 — WordPress integration CSS
   (form AJAX, feature cards, WooCommerce, pagination, helpers)
   ============================================================ */

/* ---------- AJAX form (response banner + honeypot + loading) ---------- */
form[data-txc-form] .cf-hp {
	position: absolute !important; left: -9999px !important;
	width: 1px !important; height: 1px !important;
	overflow: hidden !important; opacity: 0 !important; pointer-events: none !important;
}
form[data-txc-form] .cf-field--error input,
form[data-txc-form] .cf-field--error textarea,
form[data-txc-form] .cf-field--error select {
	border-color: #e74c3c !important;
	box-shadow: 0 0 0 4px rgba(231, 76, 60, .12) !important;
}
.cf-response { display: none; }
.cf-response[hidden] { display: none !important; }
.cf-response:not([hidden]) {
	margin: 14px 0 4px; padding: 12px 16px; border-radius: 10px;
	font-size: 14.5px; font-weight: 500;
	display: flex; align-items: center; gap: 10px;
}
.cf-response--ok { background: rgba(0, 196, 180, .12); color: #0a8a7e; border: 1px solid rgba(0, 196, 180, .3); }
.cf-response--err { background: #fde2e2; color: #c0392b; border: 1px solid rgba(231, 76, 60, .3); }
.cf-response--ok::before, .cf-response--err::before {
	content: ""; width: 18px; height: 18px; flex: none; background: no-repeat center/contain;
}
.cf-response--ok::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C4B4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"); }
.cf-response--err::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.2'><circle cx='12' cy='12' r='10'/><path d='M12 8v5M12 16h.01'/></svg>"); }
form[data-txc-form].cf-loading .cf-submit { opacity: .7; cursor: wait; pointer-events: none; }
form[data-txc-form].cf-loading .cf-submit-icon { animation: txc-spin .8s linear infinite; display: inline-flex; }
@keyframes txc-spin { to { transform: rotate(360deg); } }

/* ---------- Generic popup modal (.txc-modal) ---------- */
html.txc-modal-lock, html.txc-modal-lock body { overflow: hidden; }
.txc-modal {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	opacity: 0; transition: opacity .25s ease;
}
.txc-modal[hidden] { display: none; }
.txc-modal.is-open { opacity: 1; }
.txc-modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 62%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; }
.txc-modal__dialog {
	position: relative; z-index: 2;
	width: 100%; max-width: 440px;
	max-height: 92vh; overflow-y: auto;
	background: #fff; border-radius: 16px;
	padding: 28px 26px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
	transform: translateY(14px) scale(.97); transition: transform .28s ease;
}
.txc-modal.is-open .txc-modal__dialog { transform: none; }
.txc-modal__close {
	position: absolute; top: 12px; right: 12px;
	width: 36px; height: 36px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ink-50); color: var(--ink-600); cursor: pointer; transition: var(--t-base);
}
.txc-modal__close:hover { background: var(--ink-100); color: var(--brand-primary); }
.txc-modal__close svg { width: 18px; height: 18px; }
.txc-modal__title { font-size: 20px; font-weight: 800; color: var(--ink-900); margin: 0 0 6px; padding-right: 32px; line-height: 1.3; }
.txc-modal__sub { font-size: 13.5px; color: var(--ink-600); line-height: 1.6; margin: 0 0 18px; }
.txc-modal__form .form__field { margin-bottom: 13px; }
.txc-modal__form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; }
.txc-modal__form .req { color: #e74c3c; }
.txc-modal__form input, .txc-modal__form textarea {
	width: 100%; border: 1px solid var(--border); border-radius: 10px;
	padding: 11px 14px; font: inherit; color: var(--ink-900); background: #fff;
}
.txc-modal__form textarea { resize: vertical; min-height: 84px; }
.txc-modal__form input:focus, .txc-modal__form textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(77, 46, 144, .1); }
.txc-modal__submit { width: 100%; justify-content: center; margin-top: 6px; }
/* Chosen-variation note (variable products) */
.txc-modal__variation {
	margin: 0 0 14px; padding: 9px 12px; border-radius: 8px;
	background: var(--brand-gradient-soft, #f0f1fb); color: var(--ink-700);
	font-size: 13px; line-height: 1.45;
}
.txc-modal__variation strong { color: var(--brand-primary); font-weight: 700; }

/* ---------- Feature cards (pillars / values / vision-mission) ---------- */
.fc-sec { padding: 70px 0; }
.fc-grid { display: grid; gap: 24px; }
.fc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.fc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.fc-cols-4 { grid-template-columns: repeat(4, 1fr); }
.fc-card {
	position: relative; background: var(--bg-card);
	border: 1px solid var(--border); border-radius: var(--radius-lg);
	padding: 30px 26px; transition: var(--t-base);
}
.fc-card:hover { transform: translateY(-4px); border-color: rgba(0, 196, 180, .35); box-shadow: var(--shadow); }
.fc-card__num {
	display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: .04em;
	color: var(--brand-accent); background: var(--brand-gradient-soft);
	border-radius: 999px; padding: 4px 12px; margin-bottom: 16px;
}
.fc-card__letter {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px;
	font-size: 24px; font-weight: 800; color: #fff; background: var(--brand-gradient);
}
.fc-card__ico {
	display: flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 14px; margin-bottom: 18px;
	color: var(--brand-primary); background: var(--brand-gradient-soft);
}
.fc-card__ico svg { width: 28px; height: 28px; }
.fc-style-icon .fc-card { text-align: center; }
.fc-style-icon .fc-card__ico { margin-left: auto; margin-right: auto; }
.fc-card__title { font-size: 18px; font-weight: 700; color: var(--ink-900); margin: 0 0 10px; }
.fc-card__text { font-size: 14.5px; color: var(--ink-600); line-height: 1.7; margin: 0; }

/* ab-cta light button helper */
.ab-cta__btn-light { background: #fff !important; color: var(--brand-primary) !important; }

/* ab-intro reverse */
.ab-intro--reverse .ab-intro__grid { direction: rtl; }
.ab-intro--reverse .ab-intro__grid > * { direction: ltr; }

/* ---------- Generic helpers ---------- */
/* Note: .page-hero__desc is styled in style.css (white text on the dark hero). */
.txc-empty { text-align: center; color: var(--ink-500); padding: 40px 0; }
.txc-search-form { display: flex; align-items: center; gap: 8px; max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 6px 6px 16px; }
.txc-search-form .search-ico svg { width: 18px; height: 18px; color: var(--ink-400); }
.txc-search-form input { flex: 1; border: 0; background: transparent; font: inherit; outline: none; padding: 8px 4px; }
.txc-search-form button { background: var(--brand-gradient); color: #fff; border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 600; cursor: pointer; }
.search-empty { text-align: center; padding: 30px 0; }
.error-404 { text-align: center; padding: 20px 0 40px; }

/* footer nav menus rendered as link lists (match the static .footer__links > a design) */
.footer__widget .footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__widget .footer__menu li { margin: 0; padding: 0; }
.footer__widget .footer__links .footer__menu a,
.footer__widget .footer__menu a { display: inline-flex; align-items: center; width: fit-content; }
.footer__bottom-menu .menu { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; align-items: center; }
.footer__bottom-menu .menu li { margin: 0; }

/* ---------- Category description + WP [gallery] ---------- */
.cat-desc { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
	gap: 12px;
	margin: 18px 0;
}
.entry-content .gallery-columns-1 { --gallery-cols: 1; }
.entry-content .gallery-columns-2 { --gallery-cols: 2; }
.entry-content .gallery-columns-3 { --gallery-cols: 3; }
.entry-content .gallery-columns-4 { --gallery-cols: 4; }
.entry-content .gallery-columns-5 { --gallery-cols: 5; }
.entry-content .gallery-columns-6 { --gallery-cols: 6; }
.entry-content .gallery .gallery-item {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: center;
}
.entry-content .gallery .gallery-icon { margin: 0; }
.entry-content .gallery .gallery-icon img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--border);
	border-radius: 10px;
	display: block;
	transition: transform .25s ease, box-shadow .25s ease;
}
.entry-content .gallery .gallery-icon a:hover img { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,14,44,.14); }
.entry-content .gallery .gallery-caption { font-size: 12px; color: var(--ink-500); padding: 6px 2px 0; }
@media (max-width: 640px) {
	.entry-content .gallery { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Single product (.pd) — dynamic-content hardening ---------- */
.pd__short p { margin: 0 0 10px; }
.pd__short p:last-child { margin-bottom: 0; }
.pd__meta-vl a { color: var(--brand-primary); }
.pd__meta-vl a:hover { text-decoration: underline; }
.pd-panel > *:last-child { margin-bottom: 0; }
.pd-panel ul { list-style: disc; padding-left: 20px; }
.pd-panel ol { list-style: decimal; padding-left: 20px; }
.pd-panel ul ul { list-style: circle; }
.pd-panel li { margin-bottom: 5px; }
.pd-panel li::marker { color: var(--brand-primary); }
.pd-panel img { max-width: 100%; height: auto; border-radius: 8px; }
.pd-panel h2, .pd-panel h3, .pd-panel h4 { font-weight: 800; color: var(--ink-900); line-height: 1.3; margin: 20px 0 10px; }
.pd-panel a { color: var(--brand-primary); text-decoration: underline; }
.pd-panel table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.pd-panel th, .pd-panel td { border: 1px solid var(--border); padding: 8px 10px; font-size: 14px; text-align: left; }
.pd-panel th { background: var(--bg-soft, var(--ink-50)); font-weight: 700; }
/* WooCommerce review form/list inside the reviews tab */
.pd-panel #reviews { margin: 0; }
.pd-panel #reviews .comment-form { margin-top: 16px; }
.pd-panel #reviews input[type="text"],
.pd-panel #reviews input[type="email"],
.pd-panel #reviews textarea {
	width: 100%; border: 1px solid var(--border); border-radius: 8px;
	padding: 10px 12px; font: inherit; margin-top: 4px;
}
.pd-panel #reviews .stars a { color: var(--brand-accent); }

/* ---------- Pagination ---------- */
.txc-pagination { margin-top: 36px; display: flex; justify-content: center; }
.txc-pagination .page-numbers {
	list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; flex-wrap: wrap; align-items: center;
}
.txc-pagination .page-numbers li { margin: 0; }
.txc-pagination .page-numbers a, .txc-pagination .page-numbers span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--border); border-radius: 12px; background: #fff;
	color: var(--ink-700); font-weight: 600; text-decoration: none; transition: var(--t-fast);
}
.txc-pagination .page-numbers a:hover { border-color: var(--brand-accent); color: var(--brand-primary); }
.txc-pagination .page-numbers .current { background: var(--brand-primary); border-color: transparent; color: #fff; }
.txc-pagination .page-numbers svg { width: 16px; height: 16px; }

/* ============================================================
   WooCommerce — single product brand layout + cart/account
   ============================================================ */
.single-product .pd { padding: 24px 0 50px; }
/* The single product layout is the custom `.pd` design — markup in
   woocommerce/content-single-product.php, styles in style.css (PRODUCT DETAIL).
   The wrapping div carries WC `product type-product` classes, so neutralize any
   inherited grid/float and let `.pd__grid` own the columns. */
.single-product .pd-product { display: block; margin: 0; }
.single-product .pd-product > .pd__grid,
.single-product .pd-product > .pd-tabs,
.single-product .pd-product > .pd-related { float: none; width: auto; }

/* ---------- My Account / Cart / Checkout ---------- */
.woocommerce-account .page-fw-content > .woocommerce,
.woocommerce-page .page-fw-content > .woocommerce { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; }
.woocommerce-account .page-fw-content > .woocommerce::before,
.woocommerce-account .page-fw-content > .woocommerce::after { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-page .woocommerce-MyAccount-navigation { width: auto !important; float: none !important; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px; position: sticky; top: 90px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 14px; border-radius: 10px; color: var(--ink-700); text-decoration: none; font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--brand-gradient); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-page .woocommerce-MyAccount-content { width: auto !important; float: none !important; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 26px 28px; }
@media (max-width: 820px) { .woocommerce-account .page-fw-content > .woocommerce { grid-template-columns: 1fr; } }

.woocommerce-cart .page-fw-content table.cart, .woocommerce table.cart { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.woocommerce-cart .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.wc-proceed-to-checkout .checkout-button, .checkout-button {
	display: block !important; text-align: center; background: var(--brand-gradient) !important; color: #fff !important;
	padding: 14px 22px !important; border-radius: 999px !important; font-weight: 700; font-size: 15px;
}
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr; } }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce .select2-container .select2-selection {
	border: 1px solid var(--border) !important; border-radius: 10px !important; padding: 11px 14px !important;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--brand-accent); border-radius: 10px; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--brand-accent); }
.woocommerce a.button, .woocommerce button.button:not(.single_add_to_cart_button), .woocommerce input.button {
	background: var(--brand-gradient); color: #fff; border-radius: 999px; font-weight: 600;
}

/* product card price (search results) */
.product-card__price { padding: 0 14px 12px; font-weight: 800; color: var(--brand-primary); }
.product-card__price del { color: var(--ink-400); font-weight: 500; margin-right: 6px; }