/* ==========================================================================
   TAXSCO Ceiling products — 1:1 port of src/pages/ProductDetail.tsx
   --------------------------------------------------------------------------
   Every value below is translated straight from the Tailwind classes in the
   design file, so the rendered result matches the React build.

   Tailwind spacing 4 = 1rem = 16px. Reference conversions used throughout:
     py-16 = 64px    py-24 = 96px    gap-14 = 56px   gap-16 = 64px
     p-8 = 32px      p-6 = 24px      mb-12 = 48px    mb-20 = 80px
     tracking-[0.35em] = letter-spacing .35em        w-10 h-[3px] = 40x3px

   Breakpoints (Tailwind defaults):
     sm  = 640px
     md  = 768px
     lg  = 1024px

   The design is mobile-first with `lg:` stack points. We invert that into
   max-width queries so the desktop layout is the baseline and still matches
   at every width.

   Fonts: Manrope (display, headings) + Inter (body) — same as index.css.
   The palette is declared once on .txc-wrap and inherited by every child, so
   per-rule colour values stay identical to the design tokens.
   ========================================================================== */

.txc-wrap {
	--txc-red:      #D12920;
	--txc-navy:     #142B3D;
	--txc-charcoal: #20252A;
	--txc-gray:     #777777;
	--txc-light:    #F4F5F6;
	--txc-cream:    #FAFAF8;
	--txc-gold:     #B89B63;
	--txc-border:   #E8E9EA;
	--txc-red-dark: #b82218;

	background: #fff;
	color: var(--txc-charcoal);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.625;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* stray floats/long strings must never widen the page */
	min-width: 0;
}

/* --- Reset: commercial themes fight us on every one of these -------------- */
.txc-wrap *,
.txc-wrap *::before,
.txc-wrap *::after { box-sizing: border-box; }

.txc-wrap img { max-width: 100%; height: auto; display: block; border-radius: 0; box-shadow: none; }
.txc-wrap p  { margin: 0 0 1em; }
.txc-wrap ul,
.txc-wrap ol { margin: 0; padding: 0; list-style: none; }
.txc-wrap li { margin: 0; }
.txc-wrap table { border-collapse: collapse; border-spacing: 0; width: 100%; }
.txc-wrap h1,
.txc-wrap h2,
.txc-wrap h3,
.txc-wrap h4 {
	margin: 0;
	font-family: Manrope, Inter, sans-serif;
	font-weight: 800; /* design: font-extrabold */
	line-height: 1.15;
	color: var(--txc-navy);
}
.txc-wrap a { text-decoration: none; color: inherit; }
.txc-wrap button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.txc-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* design: max-w-[1280px] px-6 */
.txc-container--narrow { max-width: 900px; }                            /* design: max-w-[900px] */

/* ==========================================================================
   01. Breadcrumb
   ========================================================================== */
.txc-crumb {
	background: var(--txc-light);
	border-bottom: 1px solid var(--txc-border);
}
.txc-crumb__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 16px 0;       /* design: py-4 */
	font-size: 12px;
	font-weight: 500;      /* design: font-medium */
	line-height: 1.5;
}
.txc-crumb__link { color: var(--txc-gray); transition: color .15s ease; }
.txc-crumb__link:hover { color: var(--txc-red); }
.txc-crumb__sep { color: #ccc; }
.txc-crumb__current { color: var(--txc-navy); font-weight: 700; }

/* ==========================================================================
   Shared type scale
   ========================================================================== */
.txc-eyebrow {
	display: inline-block;
	color: var(--txc-red);
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .35em;   /* design: tracking-[0.35em] */
	text-transform: uppercase;
	margin-bottom: 16px;
}
.txc-eyebrow--dark { color: var(--txc-navy); font-size: 10px; margin-bottom: 16px; }

.txc-h1 { font-size: 2.6rem; margin-bottom: 16px; }              /* design: lg:text-[2.6rem] */
.txc-h2 { font-size: 1.875rem; }                                  /* design: text-3xl */
.txc-h2--lg { margin-bottom: 48px; }                              /* design: mb-12 */
.txc-h2--mb { margin-bottom: 16px; }
.txc-h2--light { color: #fff; }
.txc-h3 { font-size: 1.5rem; margin-bottom: 20px; }               /* design: text-2xl mb-5 */

/* design: w-10 h-[3px] bg-[#D12920] mb-6 */
.txc-rule {
	width: 40px;
	height: 3px;
	background: var(--txc-red);
	margin-bottom: 24px;
}
.txc-rule--short { width: 32px; margin-bottom: 20px; }            /* design: w-8 mb-5 */

.txc-lead,
.txc-body {
	color: var(--txc-gray);
	font-size: 15px;
	line-height: 1.625;    /* design: leading-relaxed */
}
.txc-body--last { margin-bottom: 32px; }                          /* design: mb-8 */
.txc-body--gap  { margin-bottom: 28px; }                          /* design: mb-7 */

/* ==========================================================================
   02. Product hero
   ========================================================================== */
.txc-hero-sec { padding: 64px 0; background: #fff; }              /* design: py-16 */

.txc-hero-sec__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));             /* design: lg:grid-cols-2 */
	gap: 56px;                                                    /* design: gap-14 */
	align-items: start;                                           /* design: items-start */
}
.txc-hero-sec__info { padding-top: 8px; }                         /* design: lg:pt-2 */

.txc-badge {
	display: inline-block;
	padding: 4px 12px;                                            /* design: px-3 py-1 */
	background: rgba(209, 41, 32, .1);                            /* design: bg-[#D12920]/10 */
	color: var(--txc-red);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .35em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.txc-highlights {
	background: var(--txc-light);
	padding: 24px;                                                /* design: p-6 */
	margin-bottom: 32px;                                          /* design: mb-8 */
}
.txc-dash-list { display: block; }
.txc-dash-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;                                                    /* design: gap-3 */
	margin-bottom: 12px;                                          /* design: space-y-3 */
}
.txc-dash-list li:last-child { margin-bottom: 0; }
.txc-dash {
	flex-shrink: 0;
	width: 20px;                                                  /* design: w-5 */
	height: 2px;                                                  /* design: h-[2px] */
	background: var(--txc-red);
	margin-top: 9px;                                              /* design: mt-[9px] */
}
.txc-dash-list li > span:last-child {
	font-size: 14px;                                              /* design: text-sm */
	color: var(--txc-navy);
	line-height: 1.375;                                           /* design: leading-snug */
}

.txc-hero-sec__actions { display: flex; gap: 12px; }              /* design: gap-3 */

.txc-btn-cta {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;                                           /* design: px-8 py-4 */
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;                                         /* design: tracking-widest */
	text-transform: uppercase;
	text-align: center;
	border: 2px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.txc-btn-cta--solid { background: var(--txc-red); color: #fff; }
.txc-btn-cta--solid:hover { background: var(--txc-red-dark); color: #fff; }
.txc-btn-cta--outline { border-color: var(--txc-navy); color: var(--txc-navy); background: transparent; }
.txc-btn-cta--outline:hover { background: var(--txc-navy); color: #fff; }
.txc-btn-cta--block { width: 100%; flex: none; }

/* --- Gallery ------------------------------------------------------------- */
.txc-gal { display: block; min-width: 0; }
.txc-gal__main {
	position: relative;
	aspect-ratio: 4 / 3;                                          /* design: aspect-[4/3] */
	overflow: hidden;
	background: var(--txc-light);
	margin-bottom: 12px;                                          /* design: mb-3 */
}
.txc-gal__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.txc-gal__img.is-active { opacity: 1; }
.txc-gal__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(135deg, #eceef0 0 16px, #f4f5f6 16px 32px);
	color: #9aa0a6;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.txc-gal__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));             /* design: grid-cols-4 */
	gap: 8px;                                                     /* design: gap-2 */
}
/* design: aspect-[4/3] border-2, red when active, #aaa on hover */
.txc-gal__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--txc-light);
	border: 2px solid transparent;
	transition: border-color .15s ease;
}
.txc-gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.txc-gal__thumb:hover { border-color: #aaa; }
.txc-gal__thumb.is-active { border-color: var(--txc-red); }
.txc-gal__thumb-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--txc-light);
	color: #b4b2a9;
	font-size: 12px;
	font-weight: 700;
}

/* ==========================================================================
   Generic media box — the 4/3 image used by every split section
   ========================================================================== */
.txc-media {
	aspect-ratio: 4 / 3;                                          /* design: aspect-[4/3] */
	overflow: hidden;
	background: var(--txc-border);                                /* design: bg-[#E8E9EA] */
}
.txc-media img { width: 100%; height: 100%; object-fit: cover; }
.txc-media__ph {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, #e4e7ea 0 16px, #eceef0 16px 32px);
}

/* ==========================================================================
   Shared section shell
   ========================================================================== */
.txc-sec { padding: 96px 0; background: #fff; }                   /* design: py-24 */
.txc-sec--cream { background: var(--txc-cream); }                 /* design: bg-[#FAFAF8] */
.txc-sec--light { background: var(--txc-light); }                 /* design: bg-[#F4F5F6] */
.txc-sec--navy  { background: var(--txc-navy); }                  /* design: bg-[#142B3D] */

.txc-sechead { display: block; }
.txc-sechead--center { text-align: center; margin-bottom: 56px; } /* design: text-center mb-14 */
.txc-sechead--center .txc-h2 { margin: 0; }

.txc-sec__intro {
	color: var(--txc-gray);
	font-size: 14px;                                              /* design: text-sm */
	max-width: 672px;                                             /* design: max-w-2xl */
	margin-bottom: 48px;                                          /* design: mb-12 */
}
.txc-sec__intro--center { margin-left: auto; margin-right: auto; max-width: 576px; } /* design: max-w-xl */
.txc-sec__note { color: var(--txc-gray); font-size: 14px; margin-bottom: 24px; }

/* design: grid lg:grid-cols-2 gap-16 items-center */
.txc-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;                                                    /* design: gap-16 */
	align-items: center;                                          /* design: items-center */
}

/* ==========================================================================
   03. Application tags
   ========================================================================== */
.txc-tags { display: flex; flex-wrap: wrap; gap: 8px; }            /* design: gap-2 */
.txc-tag {
	padding: 6px 12px;                                            /* design: px-3 py-1.5 */
	background: #fff;
	border: 1px solid var(--txc-border);
	color: var(--txc-navy);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .025em;                                       /* design: tracking-wide */
	text-transform: uppercase;
}

/* ==========================================================================
   04. Technical specifications table
   ========================================================================== */
.txc-tablewrap { overflow-x: auto; }                              /* design: overflow-x-auto */
.txc-table { min-width: 540px; }                                  /* design: min-w-[540px] */
.txc-table__th {
	background: var(--txc-navy);
	color: #fff;
	padding: 16px 24px;                                           /* design: px-6 py-4 */
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;                                         /* design: tracking-widest */
	text-transform: uppercase;
	text-align: left;
}
.txc-table__th--label { width: 40%; }                             /* design: w-2/5 */
.txc-table__td {
	padding: 16px 24px;
	font-size: 14px;                                              /* design: text-sm */
	border-bottom: 1px solid var(--txc-border);
	background: #fff;
	color: #555;                                                  /* design: text-[#555] */
}
.txc-table__td--label { font-weight: 700; color: var(--txc-navy); }
.txc-table__row--zebra .txc-table__td { background: var(--txc-light); }

/* ==========================================================================
   05. Color & finish swatches
   ========================================================================== */
.txc-finishes {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));             /* design: lg:grid-cols-6 */
	gap: 32px;                                                    /* design: gap-8 */
	margin-bottom: 40px;                                          /* design: mb-10 */
}
.txc-finish {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;                                                    /* design: gap-3 */
	cursor: pointer;
}
/* design: w-20 h-20 rounded-full shadow border-2, red border on hover */
.txc-finish__disc {
	width: 80px;
	height: 80px;
	border-radius: 9999px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
	border: 2px solid transparent;
	transition: border-color .15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.txc-finish:hover .txc-finish__disc { border-color: var(--txc-red); }
.txc-finish__disc img { width: 100%; height: 100%; object-fit: cover; }
.txc-finish__ph { width: 100%; height: 100%; background: var(--txc-light); }
.txc-finish__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--txc-navy);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .025em;
	line-height: 1.25;                                            /* design: leading-tight */
}

/* design: text-[11px] font-bold uppercase border-b-2 border-[#D12920] */
.txc-linkline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	color: var(--txc-navy);
	letter-spacing: .1em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--txc-red);
	padding-bottom: 2px;
	transition: color .15s ease;
}
.txc-linkline:hover { color: var(--txc-red); }

/* ==========================================================================
   06. Key benefits
   ========================================================================== */
.txc-benefits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));             /* design: lg:grid-cols-3 */
	gap: 24px;                                                    /* design: gap-6 */
}
/* design: p-8 bg-[#FAFAF8] border, hover red/30 + shadow-lg */
.txc-benefit {
	padding: 32px;
	background: var(--txc-cream);
	border: 1px solid var(--txc-border);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.txc-benefit:hover {
	border-color: rgba(209, 41, 32, .3);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
.txc-benefit__icon {
	width: 40px;                                                  /* design: w-10 h-10 */
	height: 40px;
	margin-bottom: 20px;                                          /* design: mb-5 */
	color: var(--txc-red);
}
.txc-benefit__icon svg { width: 100%; height: 100%; display: block; }
.txc-benefit__title {
	font-size: 16px;                                              /* design: text-base */
	margin-bottom: 8px;
	transition: color .15s ease;
}
.txc-benefit:hover .txc-benefit__title { color: var(--txc-red); }
.txc-benefit__desc { color: var(--txc-gray); font-size: 14px; line-height: 1.625; margin: 0; }

/* ==========================================================================
   07. Detailed product introduction — alternating rows
   ========================================================================== */
/* design: grid lg:grid-cols-2 gap-16 items-center mb-20 last:mb-0 */
.txc-detail {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
	align-items: center;
	margin-bottom: 80px;
}
.txc-detail:last-child { margin-bottom: 0; }
/* design: lg:[&>*:first-child]:order-2 — image moves to the right */
.txc-detail--flip > *:first-child { order: 2; }

/* ==========================================================================
   08. Why choose TAXSCO — navy band
   ========================================================================== */
.txc-why {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));             /* design: lg:grid-cols-4 */
	gap: 24px;
	margin-bottom: 64px;                                          /* design: mb-16 */
}
/* design: border border-white/10 p-7 hover:bg-white/5 */
.txc-why__card {
	border: 1px solid rgba(255, 255, 255, .1);
	padding: 28px;                                                /* design: p-7 */
	transition: background-color .15s ease;
}
.txc-why__card:hover { background: rgba(255, 255, 255, .05); }
.txc-why__title { font-size: 16px; color: #fff; margin-bottom: 12px; }   /* design: mb-3 */
.txc-why__desc { color: #8fa5b5; font-size: 14px; line-height: 1.625; margin: 0; }

.txc-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	border-top: 1px solid rgba(255, 255, 255, .1);                /* design: border-t border-white/10 */
	padding-top: 48px;                                            /* design: pt-12 */
}
.txc-stat { text-align: center; }
.txc-stat__num {
	font-family: Manrope, Inter, sans-serif;
	font-size: 2.25rem;                                           /* design: text-4xl */
	font-weight: 800;
	color: var(--txc-red);
	margin-bottom: 8px;
	line-height: 1.15;
}
.txc-stat__label {
	color: rgba(255, 255, 255, .6);
	font-size: 14px;
	letter-spacing: .05em;                                        /* design: tracking-wider */
	text-transform: uppercase;
}

/* ==========================================================================
   09. The TAXSCO Advantage checklist
   ========================================================================== */
.txc-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;                                                    /* design: gap-3 */
	margin-bottom: 12px;
}
.txc-check-list li:last-child { margin-bottom: 0; }
/* design: w-5 h-5 rounded-full bg-red with a white tick inside */
.txc-check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 9999px;
	background: var(--txc-red);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;                                              /* design: mt-0.5 */
	color: #fff;
}
.txc-check svg { width: 10px; height: 8px; display: block; }      /* design: w-2.5 h-2.5 */
.txc-check-list li > span:last-child { font-size: 14px; color: var(--txc-navy); }

/* ==========================================================================
   10. Product inquiry
   ==========================================================================
   The inquiry block itself is NOT styled here — it is rendered by the TAXCO
   Engineering Projects plugin (class TAXCO_Projects_Inquiry_Form), which
   ships its own self-contained .txpc-inquiry / .txpq styles and is rendered
   OUTSIDE .txc-wrap so our resets can't touch its form.

   The only local rule is the admin-facing notice shown when the plugin is
   inactive and no per-product shortcode override is set.
   ========================================================================== */
.txc-formnote {
	background: #fff;
	border: 1px dashed var(--txc-border);
	border-left: 4px solid #e6a700;
	padding: 20px 24px;
	font-size: 14px;
	color: var(--txc-gray);
}
.txc-formnote p { margin: 0; }
.txc-formnote strong { color: var(--txc-navy); }

/* ==========================================================================
   11. Latest blog
   ========================================================================== */
.txc-bloghead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 40px;                                          /* design: mb-10 */
}
.txc-bloghead .txc-eyebrow { margin-bottom: 12px; }
.txc-linkline--head { white-space: nowrap; border-bottom-width: 1px; }

.txc-blog {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));             /* design: md:grid-cols-3 */
	gap: 24px;
}
/* design: bg-[#FAFAF8] border overflow-hidden hover:shadow-lg */
.txc-post {
	display: block;
	background: var(--txc-cream);
	border: 1px solid var(--txc-border);
	overflow: hidden;
	transition: box-shadow .15s ease;
}
.txc-post:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.txc-post__cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--txc-border); } /* design: aspect-[16/9] */
.txc-post__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } /* design: duration-500 */
.txc-post:hover .txc-post__img { transform: scale(1.05); }        /* design: group-hover:scale-105 */
.txc-post__ph { width: 100%; height: 100%; background: var(--txc-border); }
.txc-post__body { padding: 20px; }                                /* design: p-5 */
.txc-post__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.txc-post__cat {
	padding: 2px 8px;                                             /* design: px-2 py-0.5 */
	background: var(--txc-light);
	color: var(--txc-red);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.txc-post__date { font-size: 11px; color: #aaa; }
.txc-post__title {
	font-size: 14px;                                              /* design: text-sm */
	line-height: 1.375;                                           /* design: leading-snug */
	transition: color .15s ease;
}
.txc-post:hover .txc-post__title { color: var(--txc-red); }
.txc-post__more {
	margin-top: 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--txc-red);
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* ==========================================================================
   Section listing page (taxonomy-ceiling_category.php)
   ==========================================================================
   Shares the shell above — .txc-sec, .txc-eyebrow, .txc-btn-cta, .txc-crumb.
   Only the listing-specific pieces live here.
   ========================================================================== */

/* --- Section hero — navy band with centred copy --- */
.txc-hero {
	background: var(--txc-navy);
	padding: 88px 0 80px;
	text-align: center;
}
.txc-hero__eyebrow {
	display: inline-block;
	color: var(--txc-gold);
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .35em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.txc-hero__title {
	font-size: 2.6rem;
	color: #fff;
	margin: 0 0 20px;
}
.txc-hero__rule {
	width: 40px;
	height: 3px;
	background: var(--txc-red);
	margin: 0 auto 24px;
}
.txc-hero__intro {
	max-width: 720px;
	margin: 0 auto;
	color: rgba(255, 255, 255, .78);
	font-size: 15px;
	line-height: 1.625;
}

/* --- Product card grid --- */
.txc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.txc-pcard.is-hidden { display: none; }

/* Card chrome mirrors .txc-post from the detail page so the two feel related */
.txc-pcard {
	display: block;
	background: #fff;
	border: 1px solid var(--txc-border);
	overflow: hidden;
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.txc-pcard:hover {
	border-color: var(--txc-navy);
	transform: translateY(-3px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
.txc-pcard__cover {
	position: relative;
	aspect-ratio: 4 / 3;                                          /* matches the design's 4:3 */
	overflow: hidden;
	background: var(--txc-light);
}
.txc-pcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.txc-pcard:hover .txc-pcard__img { transform: scale(1.045); }
.txc-pcard__ph {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, #e4e7ea 0 16px, #eceef0 16px 32px);
}
/* design: the red accent bar wipes in from the left on hover */
.txc-pcard__accent {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--txc-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.txc-pcard:hover .txc-pcard__accent { transform: scaleX(1); }

.txc-pcard__body { padding: 22px 24px 24px; }
.txc-pcard__name {
	font-size: 16px;
	margin-bottom: 8px;
	transition: color .15s ease;
}
.txc-pcard:hover .txc-pcard__name { color: var(--txc-red); }
.txc-pcard__desc {
	color: var(--txc-gray);
	font-size: 14px;
	line-height: 1.625;
	margin-bottom: 14px;
}
.txc-pcard__more {
	font-size: 11px;
	font-weight: 700;
	color: var(--txc-red);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.txc-gridfoot { display: flex; justify-content: center; margin-top: 56px; }
.txc-gridfoot .txc-btn-cta { flex: none; }

/* --- Empty state --- */
.txc-gridempty { text-align: center; padding: 48px 0; }
.txc-gridempty__title { font-size: 17px; font-weight: 700; color: var(--txc-navy); margin-bottom: 10px; }
.txc-gridempty__hint { color: var(--txc-gray); font-size: 14px; }

/* --- Closing CTA --- */
.txc-listcta {
	background: var(--txc-navy);
	padding: 64px 0;
}
.txc-listcta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.txc-listcta__title { font-size: 24px; color: #fff; margin-bottom: 8px; }
.txc-listcta__text { color: rgba(255, 255, 255, .72); font-size: 14px; margin: 0; }
.txc-listcta .txc-btn-cta { flex: none; }

/* ==========================================================================
   Responsive — mirrors the design's mobile-first lg: stack points
   ========================================================================== */

/* Tailwind lg (1024px) and below: the two-column grids collapse */
@media (max-width: 1023.98px) {
	.txc-hero-sec__grid { grid-template-columns: 1fr; gap: 56px; }
	.txc-split,
	.txc-detail { grid-template-columns: 1fr; gap: 48px; }
	.txc-detail { margin-bottom: 64px; }
	/* When stacked the image must always sit above its copy, so the
	   `order: 2` flip is neutralised — matching the design, where the order
	   utility only applies at lg and above. */
	.txc-detail--flip > *:first-child { order: 0; }
	.txc-hero-sec__info { padding-top: 0; }

	.txc-h1 { font-size: 1.875rem; }                              /* design: text-3xl below lg */
	.txc-benefits,
	.txc-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.txc-why,
	.txc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.txc-finishes { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* design: sm:grid-cols-4 */
	.txc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.txc-hero__title { font-size: 2rem; }
	.txc-hero { padding: 72px 0 64px; }
}

/* Tailwind md (768px) and below */
@media (max-width: 767.98px) {
	.txc-sec { padding: 64px 0; }
	.txc-hero-sec { padding: 48px 0; }
	.txc-blog { grid-template-columns: 1fr; }
	.txc-detail { gap: 32px; margin-bottom: 56px; }
	.txc-sechead--center { margin-bottom: 40px; }
	/* design: the "view all blog posts" link is hidden below sm */
	.txc-linkline--head { display: none; }
}

/* Tailwind sm (640px) and below */
@media (max-width: 639.98px) {
	.txc-container { padding: 0 20px; }
	.txc-h1 { font-size: 1.6rem; }
	.txc-h2 { font-size: 1.5rem; }
	.txc-h3 { font-size: 1.25rem; }

	.txc-finishes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.txc-finish__disc { width: 64px; height: 64px; }
	.txc-benefits { grid-template-columns: 1fr; gap: 16px; }
	.txc-benefit { padding: 24px; }
	.txc-why { grid-template-columns: 1fr; }
	.txc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.txc-stat__num { font-size: 1.875rem; }

	/* Stacked full-width CTAs — design: flex-col sm:flex-row */
	.txc-hero-sec__actions { flex-direction: column; }
	.txc-btn-cta { flex: 1 1 auto; width: 100%; }

	.txc-split,
	.txc-detail { gap: 28px; }
	.txc-grid { grid-template-columns: 1fr; gap: 20px; }
	.txc-hero__title { font-size: 1.75rem; }
	.txc-hero { padding: 56px 0 52px; }
	.txc-listcta__inner { flex-direction: column; align-items: flex-start; }
	.txc-listcta .txc-btn-cta { width: 100%; }
	.txc-gridfoot .txc-btn-cta { width: 100%; }
}

/* Very narrow phones */
@media (max-width: 400px) {
	.txc-finishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Respect reduced-motion preferences across every transition above */
@media (prefers-reduced-motion: reduce) {
	.txc-wrap *,
	.txc-wrap *::before,
	.txc-wrap *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* Guarantee the design fonts even if a plugin overrides heading stacks */
.txc-wrap .txc-h1,
.txc-wrap .txc-h2,
.txc-wrap .txc-h3,
.txc-wrap .txc-stat__num { font-family: Manrope, Inter, sans-serif; }

/* ==========================================================================
   [txc_products] — the Elementor-embeddable "Product Collection" grid
   design: NewCeiling.tsx 03 — grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5
   Kept AFTER every .txc-grid rule above so each breakpoint wins by order.
   ========================================================================== */
.txc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

@media (max-width: 1023.98px) {
	.txc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639.98px) {
	.txc-grid--4 { grid-template-columns: 1fr; }
}

/* Heading block of the embeddable grid — design: h2 + p.mt-4, no extra gap
   before the cards (the sechead's own mb handles the spacing). */
.txc-products .txc-sec__intro--center { margin-top: 16px; margin-bottom: 0; }

/* JS hook for the load-more button (styling comes from .txc-btn-cta--solid).
   .txc-products itself is the per-block root the init script tags with
   data-txc-init; neither needs visual rules of its own. */
.txc-products__more { flex: none; }