/*
 * TxSoo theme — utilities + component styles.
 * Hand-written equivalent of the Tailwind v4 subset used by the React source,
 * plus reusable component classes. Loaded via functions.php after style.css.
 */

/* ---------------------------------------------------------------------------
 * DISPLAY & FLEX / GRID
 * ------------------------------------------------------------------------- */
.block { display: block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.grow { flex-grow: 1; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.place-items-center { place-items: center; }
.place-content-center { place-content: center; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------------------
 * POSITION & Z-INDEX
 * ------------------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.-inset-5 { inset: -20px; }

.top-0 { top: 0; }
.top-1\/2 { top: 50%; }
.top-3 { top: 12px; }
.top-5 { top: 20px; }
.top-6 { top: 24px; }
.top-16 { top: 64px; }
.top-20 { top: 80px; }
.top-24 { top: 96px; }
.top-full { top: 100%; }
.-top-1 { top: -4px; }
.-top-16 { top: -64px; }
.-top-20 { top: -80px; }
.-top-24 { top: -96px; }

.left-0 { left: 0; }
.left-3 { left: 12px; }
.left-4 { left: 16px; }
.left-1\/2 { left: 50%; }
.left-1\/3 { left: 33.3333%; }
.-left-4 { left: -16px; }
.-left-6 { left: -24px; }
.-left-16 { left: -64px; }

.right-0 { right: 0; }
.right-5 { right: 20px; }
.right-6 { right: 24px; }
.-right-1 { right: -4px; }
.-right-4 { right: -16px; }
.-right-6 { right: -24px; }
.-right-16 { right: -64px; }
.-right-20 { right: -80px; }

.bottom-0 { bottom: 0; }

.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* ---------------------------------------------------------------------------
 * WIDTH / HEIGHT
 * ------------------------------------------------------------------------- */
.w-full { width: 100%; }
.w-max { width: max-content; }
.w-5 { width: 20px; }
.w-8 { width: 32px; }
.w-80 { width: 320px; }
.h-full { height: 100%; }
.h-fit { height: fit-content; }
.h-px { height: 1px; }
.h-0\.5 { height: 2px; }
.h-11 { height: 44px; }
.h-12 { height: 48px; }
.min-w-0 { min-width: 0; }
.min-h-screen { min-height: 100vh; }

.max-w-xs { max-width: 20rem; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-none { max-width: none; }

.aspect-square { aspect-ratio: 1 / 1; }
.object-cover { object-fit: cover; }

/* size-* (width + height) */
.size-2 { width: 8px; height: 8px; }
.size-3 { width: 12px; height: 12px; }
.size-3\.5 { width: 14px; height: 14px; }
.size-4 { width: 16px; height: 16px; }
.size-5 { width: 20px; height: 20px; }
.size-6 { width: 24px; height: 24px; }
.size-7 { width: 28px; height: 28px; }
.size-8 { width: 32px; height: 32px; }
.size-9 { width: 36px; height: 36px; }
.size-10 { width: 40px; height: 40px; }
.size-11 { width: 44px; height: 44px; }
.size-12 { width: 48px; height: 48px; }
.size-16 { width: 64px; height: 64px; }
.size-32 { width: 128px; height: 128px; }
.size-36 { width: 144px; height: 144px; }
.size-40 { width: 160px; height: 160px; }
.size-52 { width: 208px; height: 208px; }
.size-72 { width: 288px; height: 288px; }
.size-80 { width: 320px; height: 320px; }
.size-96 { width: 384px; height: 384px; }
.size-full { width: 100%; height: 100%; }
.size-\[20rem\] { width: 20rem; height: 20rem; }
.size-\[22rem\] { width: 22rem; height: 22rem; }
.size-\[26rem\] { width: 26rem; height: 26rem; }

/* ---------------------------------------------------------------------------
 * SPACING
 * ------------------------------------------------------------------------- */
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-7 { padding: 28px; }
.p-8 { padding: 32px; }
.p-9 { padding: 36px; }
.p-10 { padding: 40px; }

.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-2\.5 { padding-left: 10px; padding-right: 10px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.px-7 { padding-left: 28px; padding-right: 28px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.px-10 { padding-left: 40px; padding-right: 40px; }

.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.py-10 { padding-top: 40px; padding-bottom: 40px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-14 { padding-top: 56px; padding-bottom: 56px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.py-20 { padding-top: 80px; padding-bottom: 80px; }
.py-24 { padding-top: 96px; padding-bottom: 96px; }

.pt-2 { padding-top: 8px; }
.pt-4 { padding-top: 16px; }
.pt-5 { padding-top: 20px; }
.pt-6 { padding-top: 24px; }
.pt-14 { padding-top: 56px; }
.pt-20 { padding-top: 80px; }
.pt-24 { padding-top: 96px; }
.pb-1 { padding-bottom: 4px; }
.pb-8 { padding-bottom: 32px; }
.pb-12 { padding-bottom: 48px; }
.pb-16 { padding-bottom: 64px; }
.pl-2 { padding-left: 8px; }
.pl-4 { padding-left: 16px; }
.pl-11 { padding-left: 44px; }
.pr-4 { padding-right: 16px; }

.mt-0\.5 { margin-top: 2px; }
.mt-1 { margin-top: 4px; }
.mt-1\.5 { margin-top: 6px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-7 { margin-top: 28px; }
.mt-8 { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-12 { margin-top: 48px; }
.mt-14 { margin-top: 56px; }
.mt-16 { margin-top: 64px; }
.mt-24 { margin-top: 96px; }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.ml-1\.5 { margin-left: 6px; }
.ml-2 { margin-left: 8px; }
.mb-3 { margin-bottom: 12px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.gap-0\.5 { gap: 2px; }
.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2 { gap: 8px; }
.gap-2\.5 { gap: 10px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-7 { gap: 28px; }
.gap-8 { gap: 32px; }
.gap-10 { gap: 40px; }
.gap-12 { gap: 48px; }
.gap-x-5 { column-gap: 20px; }
.gap-x-8 { column-gap: 32px; }
.gap-y-2 { row-gap: 8px; }
.gap-y-4 { row-gap: 16px; }

.space-y-2 > * + * { margin-top: 8px; }
.space-y-2\.5 > * + * { margin-top: 10px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-5 > * + * { margin-top: 20px; }
.space-y-6 > * + * { margin-top: 24px; }

/* ---------------------------------------------------------------------------
 * BORDERS & RADIUS
 * ------------------------------------------------------------------------- */
.border { border: 1px solid var(--border); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-y { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.border-border { border-color: var(--border); }
.border-border\/60 { border-color: color-mix(in oklab, var(--border) 60%, transparent); }
.border-border\/60 { border-color: rgba(91, 88, 120, 0.6); }
.border-primary { border-color: var(--primary); }
.border-input { border-color: var(--input); }
.border-accent { border-color: var(--accent); }
.border-destructive { border-color: var(--destructive); }
.border-transparent { border-color: transparent; }

.rounded-md { border-radius: 6px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.rounded-full { border-radius: 9999px; }

/* ---------------------------------------------------------------------------
 * TYPOGRAPHY
 * ------------------------------------------------------------------------- */
.font-display { font-family: "Space Grotesk", "Hind Siliguri", sans-serif; }
.font-sans { font-family: "DM Sans", "Hind Siliguri", sans-serif; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs { font-size: 12px; }
.text-\[11px\] { font-size: 11px; }
.text-sm { font-size: 14px; }
.text-base { font-size: 16px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-3xl { font-size: 30px; }
.text-4xl { font-size: 36px; }
.text-5xl { font-size: 48px; }
.text-6xl { font-size: 60px; }
.text-7xl { font-size: 72px; }

.leading-snug { line-height: 1.375; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.06\] { line-height: 1.06; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.uppercase { text-transform: uppercase; }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.line-clamp-1 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}
.line-clamp-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Text colors */
.text-foreground { color: var(--foreground); }
.text-foreground\/90 { color: color-mix(in oklab, var(--foreground) 90%, transparent); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-muted-foreground\/60 { color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
.text-accent { color: var(--accent); }
.text-accent\/15 { color: color-mix(in oklab, var(--accent) 15%, transparent); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-success { color: var(--success); }
.text-destructive { color: var(--destructive); }
.text-destructive-foreground { color: var(--destructive-foreground); }
.text-gold { color: var(--gold); }
.text-background { color: var(--background); }
.text-border { color: var(--border); }

/* ---------------------------------------------------------------------------
 * BACKGROUNDS
 * ------------------------------------------------------------------------- */
.bg-background { background-color: var(--background); }
.bg-background\/75 { background-color: color-mix(in oklab, var(--background) 75%, transparent); }
.bg-surface { background-color: var(--surface); }
.bg-surface-2 { background-color: var(--surface-2); }
.bg-surface\/40 { background-color: color-mix(in oklab, var(--surface) 40%, transparent); }
.bg-surface\/50 { background-color: color-mix(in oklab, var(--surface) 50%, transparent); }
.bg-surface\/60 { background-color: color-mix(in oklab, var(--surface) 60%, transparent); }
.bg-surface\/70 { background-color: color-mix(in oklab, var(--surface) 70%, transparent); }
.bg-card { background-color: var(--card); }
.bg-primary { background-color: var(--primary); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.bg-primary\/35 { background-color: color-mix(in oklab, var(--primary) 35%, transparent); }
.bg-primary\/90 { background-color: color-mix(in oklab, var(--primary) 90%, transparent); }
.bg-accent { background-color: var(--accent); }
.bg-accent\/15 { background-color: color-mix(in oklab, var(--accent) 15%, transparent); }
.bg-accent\/25 { background-color: color-mix(in oklab, var(--accent) 25%, transparent); }
.bg-neon\/15 { background-color: color-mix(in oklab, var(--neon) 15%, transparent); }
.bg-neon\/30 { background-color: color-mix(in oklab, var(--neon) 30%, transparent); }
.bg-destructive { background-color: var(--destructive); }
.bg-gold\/90 { background-color: color-mix(in oklab, var(--gold) 90%, transparent); }
.bg-success\/15 { background-color: color-mix(in oklab, var(--success) 15%, transparent); }

.bg-gradient-to-t {
	background-image: linear-gradient(to top, var(--from, var(--card)), var(--via, transparent), var(--to, transparent));
}
.from-card { --from: var(--card); }
.via-transparent { --via: transparent; }
.to-transparent { --to: transparent; }

/* ---------------------------------------------------------------------------
 * EFFECTS & TRANSITIONS
 * ------------------------------------------------------------------------- */
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-40 { opacity: 0.4; }
.opacity-45 { opacity: 0.45; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-\[0\.08\] { opacity: 0.08; }

.blur-2xl { filter: blur(40px); }
.blur-3xl { filter: blur(64px); }
.backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }

.transition-colors { transition-property: color, background-color, border-color; }
.transition-transform { transition-property: transform; }
.transition-opacity { transition-property: opacity; }
.transition-all { transition-property: all; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.ease-out { transition-timing-function: ease-out; }

.origin-left { transform-origin: left; }
.scale-x-0 { transform: scaleX(0); }
.scale-x-100 { transform: scaleX(1); }
.scale-105 { transform: scale(1.05); }
.scale-108 { transform: scale(1.08); }
.rotate-180 { transform: rotate(180deg); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-x-1 { transform: translateX(4px); }

.fill-gold { fill: var(--gold); }

.accent-primary { accent-color: var(--primary); }
.pointer-events-none { pointer-events: none; }

.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ---------------------------------------------------------------------------
 * COMPONENTS — HEADER
 * ------------------------------------------------------------------------- */
.txsoo-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
	background-color: color-mix(in oklab, var(--background) 75%, transparent);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	box-shadow: var(--shadow-header);
}
/* Homepage: the header floats over the full-viewport hero, transparent at the
   top of the page, and fades into the glass look once the page is scrolled. */
body.home .txsoo-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	border-bottom-color: transparent;
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	transition: background-color 0.35s ease, border-bottom-color 0.35s ease, box-shadow 0.35s ease;
}
body.home .txsoo-header.is-scrolled,
body.home .txsoo-header:has(.collapse-row.is-open) {
	border-bottom-color: color-mix(in oklab, var(--border) 60%, transparent);
	background-color: color-mix(in oklab, var(--background) 75%, transparent);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	box-shadow: var(--shadow-header);
}
/* Logged-in admins: keep the overlay header clear of the admin bar. */
body.admin-bar.home .txsoo-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar.home .txsoo-header { top: 46px; }
}
/* Readability scrim behind the transparent header — tints with the theme
   background so logo/nav stay legible over any hero image, then fades out
   once the glass state takes over. */
body.home .txsoo-header::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 180px;
	background: linear-gradient(to bottom, color-mix(in oklab, var(--background) 82%, transparent) 0%, transparent 100%);
	pointer-events: none;
	z-index: -1;
	opacity: 1;
	transition: opacity 0.35s ease;
}
body.home .txsoo-header.is-scrolled::before,
body.home .txsoo-header:has(.collapse-row.is-open)::before {
	opacity: 0;
}
.txsoo-header__topline { height: 1px; background-image: var(--gradient-brand); }
.txsoo-header__row {
	max-width: 80rem;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
}
.txsoo-header__right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.site-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	font-family: "Space Grotesk", "Hind Siliguri", sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* Site logo (Customizer → Site Identity) */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.custom-logo-link img {
	display: block;
	width: auto;
	height: 44px;
	max-width: 100%;
	object-fit: contain;
}

.nav-list { display: flex; align-items: center; gap: 28px; margin: 0; }
.nav-list li { display: block; }
.nav-link {
	position: relative;
	padding: 4px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted-foreground);
	transition: color 0.3s;
}
.nav-link:hover,
.nav-link.is-current { color: var(--foreground); }
.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 9999px;
	background-image: var(--gradient-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ease-smooth);
}
.nav-link:hover::after,
.nav-link.is-current::after { transform: scaleX(1); }

.icon-btn {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: color-mix(in oklab, var(--surface) 70%, transparent);
	color: var(--muted-foreground);
	transition: all 0.3s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn.is-active { border-color: var(--accent); background-color: var(--surface-2); color: var(--accent); }
.icon-btn.is-danger:hover { border-color: var(--destructive); color: var(--destructive); }
.icon-btn--danger:hover { border-color: var(--destructive); color: var(--destructive); }

/* Mobile menu nav links (override underline style inside the drawer) */
[data-mobile-menu] .nav-link {
	display: block;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted-foreground);
	transition: color 0.3s, background-color 0.3s;
}
[data-mobile-menu] .nav-link::after { display: none; }
[data-mobile-menu] .nav-link:hover,
[data-mobile-menu] .nav-link.is-current { background-color: var(--surface); color: var(--foreground); }

.theme-icon { display: inline-flex; }
.theme-icon[hidden] { display: none; }

/* Category trigger + dropdown */
.cat-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: 9999px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	transition: all 0.3s;
}
.cat-trigger:not(.is-open) { color: var(--muted-foreground); }
.cat-trigger:not(.is-open):hover { color: var(--accent); }
.cat-trigger.is-open { color: var(--primary-foreground); }
.cat-trigger .chevron { transition: transform 0.3s; }
.cat-trigger.is-open .chevron { transform: rotate(180deg); }

.cat-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	margin-top: 8px;
	width: 320px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background-color: var(--background);
	padding: 8px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	transform: translateY(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth), visibility 0.2s;
}
.cat-menu.is-open {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}
.cat-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px 4px;
}
.cat-menu__title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}
.cat-menu__all {
	font-size: 12px;
	font-weight: 600;
	color: var(--accent);
	transition: opacity 0.2s;
}
.cat-menu__all:hover { opacity: 0.8; }
.cat-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--muted-foreground);
	transition: color 0.2s, background-color 0.2s;
}
.cat-item:hover { background-color: var(--surface); color: var(--accent); }
.cat-item__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cat-item__meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cat-item__chev {
	display: flex;
	align-items: center;
	color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
	transition: transform 0.2s, color 0.2s;
}
.cat-item__chev svg { transform: rotate(-90deg); stroke-width: 3; } /* down chevron → flyout indicator */
.cat-item-wrap.has-children > .cat-item:hover .cat-item__chev { color: var(--accent); }

/* Multi-level dropdown (up to 3 levels deep) — flyouts open on hover/focus */
.cat-level { list-style: none; margin: 0; padding: 0; }
.cat-item-wrap { position: relative; }
.cat-item-wrap.has-children > .cat-item::after {
	content: '';
	position: absolute;
	top: 0;
	right: -12px;
	width: 12px;
	height: 100%;
}
.cat-item-wrap > .cat-level {
	position: absolute;
	top: -8px;
	left: 100%;
	z-index: 51;
	margin-left: 8px;
	width: 280px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background-color: var(--background);
	padding: 8px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	transform: translateX(-8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth), visibility 0.2s;
}
.cat-item-wrap.has-children:hover > .cat-level,
.cat-item-wrap.has-children:focus-within > .cat-level,
.cat-item-wrap.has-children.is-open > .cat-level {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
}
.cat-item-wrap.has-children:hover > .cat-item .cat-item__chev,
.cat-item-wrap.has-children:focus-within > .cat-item .cat-item__chev {
	color: var(--accent);
}

/* Cart pill */
.cart-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: 9999px;
	padding: 8px 16px 8px 8px;
	transition: border-color 0.3s;
}
.cart-pill:hover { border-color: var(--accent); }
.cart-pill__icon {
	position: relative;
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border-radius: 9999px;
	color: var(--primary-foreground);
}
.cart-pill__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	display: grid;
	width: 16px;
	height: 16px;
	place-items: center;
	border-radius: 9999px;
	background-color: var(--destructive);
	color: var(--destructive-foreground);
	font-size: 10px;
	font-weight: 700;
}
.cart-pill__total { font-size: 14px; font-weight: 600; }

/* Search row + mobile menu (animated height) */
.collapse-row {
	overflow: hidden;
	border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
	max-height: 0;
	opacity: 0;
	transition: max-height 0.35s var(--ease-smooth), opacity 0.3s var(--ease-smooth);
}
.collapse-row.is-open {
	max-height: 640px;
	opacity: 1;
}
/* Search row needs a smaller cap */
[data-search-row].collapse-row.is-open { max-height: 80px; }
.collapse-row__inner {
	max-width: 80rem;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}

.mobile-menu__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.mobile-menu__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
	background-color: color-mix(in oklab, var(--surface) 40%, transparent);
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--muted-foreground);
	transition: all 0.3s;
}
.mobile-menu__item:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------------------
 * COMPONENTS — BUTTONS
 * ------------------------------------------------------------------------- */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 9999px;
	background-image: var(--gradient-brand);
	box-shadow: var(--shadow-glow);
	color: var(--primary-foreground);
	font-weight: 600;
	transition: transform 0.3s var(--ease-smooth);
}
.btn-primary:hover { transform: scale(1.02); }
.btn-primary:active { transform: scale(0.95); }

.btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 9999px;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--glass-border);
	background-image: var(--gradient-card);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	font-weight: 600;
	transition: color 0.3s;
}
.btn-ghost:hover { color: var(--accent); }

.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: color-mix(in oklab, var(--surface) 70%, transparent);
	font-weight: 600;
	transition: all 0.3s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------------------
 * COMPONENTS — SECTIONS & CARDS
 * ------------------------------------------------------------------------- */
.container-tx {
	max-width: 80rem;
	margin-inline: auto;
	padding-left: 16px;
	padding-right: 16px;
}
@media (min-width: 640px) {
	.container-tx { padding-left: 24px; padding-right: 24px; }
}

.section-head { max-width: 42rem; }
.kicker {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
}
.section-title { margin-top: 12px; font-size: 30px; font-weight: 700; }
@media (min-width: 640px) {
	.section-title { font-size: 36px; }
}
.section-sub { margin-top: 12px; color: var(--muted-foreground); }

/* Page hero (inner pages) */
.page-hero { position: relative; overflow: hidden; }
.page-hero__inner {
	position: relative;
	max-width: 80rem;
	margin-inline: auto;
	padding: 80px 16px 64px;
}
@media (min-width: 640px) {
	.page-hero__inner { padding-left: 24px; padding-right: 24px; }
}

/* Product card */
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background-image: var(--gradient-card);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-card);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: transform 0.55s var(--ease-smooth);
}
.product-card:hover { transform: translateY(-8px); }
.product-card__media { overflow: hidden; position: relative; }
.product-card__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.7s ease-out;
}
.product-card:hover .product-card__img { transform: scale(1.08); }
.product-card__overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, var(--card), transparent);
	opacity: 0.8;
	pointer-events: none;
}
.product-card__badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.badge-off {
	border-radius: 9999px;
	background-color: var(--destructive);
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--destructive-foreground);
}
.badge-tag {
	border-radius: 9999px;
	background-color: color-mix(in oklab, var(--gold) 90%, transparent);
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--background);
}
.product-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 16px; }
.product-card__title {
	font-family: "Space Grotesk", "Hind Siliguri", sans-serif;
	font-weight: 600;
	line-height: 1.375;
	transition: color 0.3s;
}
.product-card:hover .product-card__title { color: var(--accent); }
.product-card__tagline { font-size: 12px; color: var(--muted-foreground); }
.product-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.price { font-size: 18px; font-weight: 700; color: var(--accent); }
.price-old { font-size: 14px; color: var(--muted-foreground); text-decoration: line-through; }

/* Icon tile (gradient square) */
.icon-tile {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 12px;
	background-image: var(--gradient-brand);
	color: var(--primary-foreground);
}
.icon-tile--lg { width: 56px; height: 56px; border-radius: 16px; }
.icon-tile--sm { width: 40px; height: 40px; border-radius: 10px; }

/* Stat card */
.stat-card {
	border-radius: 16px;
	background-image: var(--gradient-card);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-card);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	padding: 16px;
	text-align: center;
}

/* Chips (category pill / payment badge) */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: var(--surface-2);
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
}

/* Category filter carousel */
.cat-scroller {
	display: flex;
	align-items: center;
	gap: 12px;
}
.cat-scroller__viewport { overflow-x: auto; scrollbar-width: none; flex: 1; }
.cat-scroller__viewport::-webkit-scrollbar { display: none; }
.cat-scroller__track { display: flex; gap: 8px; width: max-content; }
.cat-pill {
	white-space: nowrap;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: color-mix(in oklab, var(--surface) 70%, transparent);
	padding: 8px 16px;
	font-size: 14px;
	color: var(--muted-foreground);
	transition: all 0.3s;
}
.cat-pill:hover { border-color: var(--accent); color: var(--accent); }
.cat-pill.is-active {
	border-color: transparent;
	background-image: var(--gradient-brand);
	color: var(--primary-foreground);
	font-weight: 600;
}
.scroller-btn {
	display: none;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	place-items: center;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: var(--surface);
	color: var(--foreground);
	transition: all 0.3s;
}
.scroller-btn:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 640px) {
	.scroller-btn { display: grid; }
}

/* Reviews carousel */
.reviews-scroller { overflow: hidden; }
.reviews-scroller__track {
	display: flex;
	scroll-snap-type: x mandatory;
	overflow-x: auto;
	scrollbar-width: none;
}
.reviews-scroller__track::-webkit-scrollbar { display: none; }
.review-slide { flex: 0 0 100%; padding-left: 16px; scroll-snap-align: start; }
@media (min-width: 640px) {
	.review-slide { flex-basis: 50%; }
}
@media (min-width: 1024px) {
	.review-slide { flex-basis: 33.3333%; }
}

.review-card {
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background-image: var(--gradient-card);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-card);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	padding: 24px;
}
.review-card__quote {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 32px;
	color: color-mix(in oklab, var(--accent) 15%, transparent);
	font-family: Georgia, serif;
}
.stars { display: flex; gap: 2px; }
.stars .star { color: var(--gold); }
.stars .star.is-empty { color: var(--border); }

.avatar {
	display: grid;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	place-items: center;
	border-radius: 9999px;
	background-image: var(--gradient-brand);
	color: var(--primary-foreground);
	font-size: 14px;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * COMPONENTS — HERO / MARQUEE
 * ------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.08;
	pointer-events: none;
}
.dark .hero__bg { opacity: 0.4; }
.hero__grid {
	position: relative;
	max-width: 80rem;
	margin-inline: auto;
	display: grid;
	align-items: center;
	gap: 40px;
	padding: 56px 16px 64px;
}
@media (min-width: 640px) {
	.hero__grid { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
	.hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.badge-live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 9999px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.025em;
	color: var(--accent);
}
.live-dot { position: relative; display: flex; width: 8px; height: 8px; }
.live-dot::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	background-color: var(--accent);
	animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.live-dot::after {
	content: "";
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background-color: var(--accent);
}
@keyframes ping {
	75%,
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

.hero-title {
	margin-top: 20px;
	font-size: 36px;
	line-height: 1.06;
	font-weight: 700;
}
@media (min-width: 640px) {
	.hero-title { font-size: 48px; }
}
@media (min-width: 1024px) {
	.hero-title { font-size: 60px; }
}

.hero-visual { position: relative; width: 100%; max-width: 28rem; margin-inline: auto; }
@media (min-width: 1024px) {
	.hero-visual { max-width: none; }
}
.hero-visual__glow {
	position: absolute;
	inset: -20px;
	border-radius: 40px;
	background-image: var(--gradient-brand);
	opacity: 0.2;
	filter: blur(40px);
}
.hero-visual__card {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	padding: 8px;
	background-image: var(--gradient-card);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-glow), var(--shadow-card);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	animation: floaty 7s var(--ease-smooth) infinite;
}
.hero-visual__img { width: 100%; border-radius: 12px; object-fit: cover; }
.hero-visual__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
}
.hero-visual__title {
	font-family: "Space Grotesk", "Hind Siliguri", sans-serif;
	font-size: 14px;
	font-weight: 600;
}
.hero-visual__tagline { font-size: 12px; color: var(--muted-foreground); }
.hero-visual__price {
	flex-shrink: 0;
	border-radius: 9999px;
	background-image: var(--gradient-brand);
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--primary-foreground);
}

.marquee { overflow: hidden; border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background-color: color-mix(in oklab, var(--surface) 50%, transparent); padding: 12px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
.marquee__item { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 14px; color: var(--muted-foreground); }
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
	.marquee { overflow-x: clip; }
}

/* ---------------------------------------------------------------------------
 * COMPONENTS — HERO SLIDER
 * ------------------------------------------------------------------------- */
.txsoo-hero-slider { position: relative; }

.txsoo-hero-slide {
	display: none;
	min-height: 100vh;
	min-height: 100svh;
}
.txsoo-hero-slide.is-active { display: flex; align-items: center; animation: txsoo-slide-in 0.65s var(--ease-smooth); }

.txsoo-hero-banner__slide {
	position: relative;
	display: none;
	height: 100vh;
	height: 100svh;
	min-height: 440px;
}
.txsoo-hero-banner__slide.is-active { display: flex; align-items: center; animation: txsoo-slide-in 0.65s var(--ease-smooth); }
.txsoo-hero-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.txsoo-hero-banner__overlay {
	position: relative;
	z-index: 2;
	width: 100%;
}
/* Banner slider: white typography over the image for readability. Scoped to the
   banner slide only — the hero slider keeps its own design untouched. */
.txsoo-hero-banner__slide h1 {
	color: #ffffff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.txsoo-hero-banner__slide h1 .text-gradient-animate {
	background-image: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: #ffffff;
}
.txsoo-hero-banner__slide p {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
/* Empty hero fields keep their reserved height (visibility hidden, not display
   none) so the content block stays vertically centered in both slider modes. */
.txsoo-hero-slide .is-empty,
.txsoo-hero-banner__slide .is-empty { visibility: hidden; }

@keyframes txsoo-slide-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.txsoo-hero-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	border: 1px solid var(--glass-border);
	background-color: var(--surface);
	color: var(--foreground);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, opacity 0.25s ease, visibility 0.25s ease;
}
.txsoo-hero-slider__arrow--prev { left: 16px; }
.txsoo-hero-slider__arrow--next { right: 16px; }
.txsoo-hero-slider:hover .txsoo-hero-slider__arrow,
.txsoo-hero-slider:focus-within .txsoo-hero-slider__arrow {
	opacity: 1;
	visibility: visible;
}
.txsoo-hero-slider__arrow:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.txsoo-hero-slider__dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 8px;
	transform: translateX(-50%);
}
.txsoo-hero-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background-color: var(--muted-foreground);
	opacity: 0.35;
	cursor: pointer;
	transition: width 0.3s var(--ease-smooth), opacity 0.3s ease, background-color 0.3s ease;
}
.txsoo-hero-slider__dot.is-active { width: 24px; opacity: 1; background-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
	.txsoo-hero-slide,
	.txsoo-hero-banner__slide { animation: none; }
}

/* ---------------------------------------------------------------------------
 * COMPONENTS — FORMS
 * ------------------------------------------------------------------------- */
.field-label {
	display: block;
	font-size: 14px;
	font-weight: 500;
}
.field-required { color: var(--destructive); }
.field-input,
.field-select {
	margin-top: 8px;
	width: 100%;
	height: 44px;
	border-radius: 9999px;
	border: 1px solid var(--input);
	background-color: color-mix(in oklab, var(--surface) 70%, transparent);
	padding: 0 16px;
	font-size: 14px;
	outline: none;
	transition: all 0.3s;
	color: var(--foreground);
}
.field-input:focus,
.field-select:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 40%, transparent);
}
.field-input::placeholder { color: var(--muted-foreground); }
.field-input.is-invalid {
	border-color: var(--destructive);
}
.field-input.is-invalid:focus {
	border-color: var(--destructive);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--destructive) 30%, transparent);
}
.field-error {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--destructive);
}
.field-error[hidden] { display: none; }
.field-textarea {
	margin-top: 8px;
	width: 100%;
	border-radius: 16px;
	border: 1px solid var(--input);
	background-color: color-mix(in oklab, var(--surface) 70%, transparent);
	padding: 12px 16px;
	font-size: 14px;
	outline: none;
	transition: all 0.3s;
	resize: vertical;
	color: var(--foreground);
}
.field-textarea:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 40%, transparent);
}
.field-textarea::placeholder { color: var(--muted-foreground); }

/* Accordion (FAQ) */
.accordion-item { border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.accordion-item:first-child { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 4px;
	font-family: "Space Grotesk", "Hind Siliguri", sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	transition: color 0.3s;
}
.accordion-trigger:hover { color: var(--accent); }
.accordion-trigger .chevron { flex-shrink: 0; transition: transform 0.3s; }
.accordion-item.is-open .accordion-trigger .chevron { transform: rotate(180deg); }
.accordion-content { overflow: hidden; max-height: 0; transition: max-height 0.35s var(--ease-smooth); }
.accordion-content__inner { padding: 0 4px 20px; color: var(--muted-foreground); line-height: 1.625; }

/* ---------------------------------------------------------------------------
 * COMPONENTS — FOOTER
 * ------------------------------------------------------------------------- */
.site-footer { margin-top: 96px; border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background-color: color-mix(in oklab, var(--surface) 40%, transparent); }
.newsletter-strip { border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.newsletter-strip__inner {
	max-width: 80rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 40px 16px;
}
@media (min-width: 640px) {
	.newsletter-strip__inner { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 768px) {
	.newsletter-strip__inner { flex-direction: row; }
}
.newsletter-form { display: flex; width: 100%; max-width: 28rem; gap: 8px; }
.newsletter-input {
	flex: 1;
	height: 48px;
	border-radius: 9999px;
	border: 1px solid var(--input);
	background-color: color-mix(in oklab, var(--surface) 70%, transparent);
	padding: 0 20px;
	font-size: 14px;
	outline: none;
	transition: all 0.3s;
	color: var(--foreground);
}
.newsletter-input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 40%, transparent);
}
.newsletter-input::placeholder { color: var(--muted-foreground); }
.newsletter-btn {
	display: grid;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	place-items: center;
	border-radius: 9999px;
	background-image: var(--gradient-brand);
	box-shadow: var(--shadow-glow);
	color: var(--primary-foreground);
	transition: transform 0.3s;
}
.newsletter-btn:hover { transform: scale(1.05); }
.newsletter-btn:active { transform: scale(0.95); }
.newsletter-btn.is-loading { opacity: 0.7; pointer-events: none; animation: spin 0.9s linear infinite; }
.newsletter-btn.is-loading svg { animation: none; }

.footer-columns {
	max-width: 80rem;
	margin-inline: auto;
	display: grid;
	gap: 40px;
	padding: 56px 16px;
}
@media (min-width: 640px) {
	.footer-columns { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 768px) {
	.footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.footer-columns { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer-heading {
	font-family: "Space Grotesk", "Hind Siliguri", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.footer-links { margin-top: 16px; }
.footer-links > li + li { margin-top: 10px; }
.footer-link {
	font-size: 14px;
	color: var(--muted-foreground);
	transition: color 0.3s;
}
.footer-link:hover { color: var(--accent); }

.social-btn {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: var(--surface-2);
	color: var(--muted-foreground);
	transition: all 0.3s;
}
.social-btn:hover { border-color: var(--accent); color: var(--accent); }

.contact-line {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--muted-foreground);
	font-size: 14px;
	transition: color 0.3s;
}
.contact-line:hover { color: var(--accent); }
.contact-line .icon { color: var(--accent); }

.footer-bottom {
	border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.footer-bottom__inner {
	max-width: 80rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 20px 16px;
	font-size: 12px;
	color: var(--muted-foreground);
}
@media (min-width: 640px) {
	.footer-bottom__inner { flex-direction: row; padding-left: 24px; padding-right: 24px; }
}

/* ---------------------------------------------------------------------------
 * COMPONENTS — CHECKOUT / MISC
 * ------------------------------------------------------------------------- */
.pay-method {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 12px 16px;
	font-size: 14px;
	transition: all 0.3s;
	background-color: color-mix(in oklab, var(--surface) 50%, transparent);
}
.pay-method:hover { border-color: color-mix(in oklab, var(--accent) 60%, transparent); }
.pay-method.is-active { border-color: var(--primary); background-color: var(--surface-2); }

.qty-control {
	display: flex;
	align-items: center;
	gap: 4px;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: color-mix(in oklab, var(--surface) 70%, transparent);
	padding: 4px;
}
.qty-control__btn {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border-radius: 9999px;
	transition: background-color 0.3s;
}
.qty-control__btn:hover { background-color: var(--surface-2); }
.qty-control__btn--sm { width: 28px; height: 28px; }
.qty-value { width: 32px; text-align: center; font-weight: 600; }
.qty-value--sm { width: 20px; font-size: 14px; }

.step-badge {
	display: grid;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	place-items: center;
	border-radius: 9999px;
	background-image: var(--gradient-brand);
	color: var(--primary-foreground);
	font-size: 12px;
	font-weight: 700;
}

/* Toast */
[data-toast-root] {
	position: fixed;
	z-index: 200;
	top: 24px;
	right: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
.toast {
	pointer-events: auto;
	background-color: var(--foreground);
	color: var(--background);
	padding: 12px 18px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--shadow-card);
	max-width: min(90vw, 360px);
	transform: translateY(-8px);
	opacity: 0;
	animation: toast-in 0.25s var(--ease-smooth) forwards;
}
.toast--error { background-color: var(--destructive); color: var(--destructive-foreground); }
.toast--leaving { animation: toast-out 0.22s var(--ease-smooth) forwards; }
@keyframes toast-in {
	to { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
	to { transform: translateY(-8px); opacity: 0; }
}

/* ---------------------------------------------------------------------------
 * ACCESSIBILITY & MISC
 * ------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

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

/* ---------------------------------------------------------------------------
 * REVIEWS CAROUSEL
 * ------------------------------------------------------------------------- */
.tx-carousel { position: relative; }
.tx-carousel__viewport { overflow: hidden; }
.tx-carousel__track { display: flex; transition: transform 0.45s var(--ease-smooth); will-change: transform; }
.tx-carousel__item { flex: 0 0 100%; min-width: 0; padding-left: 16px; }
@media (min-width: 640px) {
	.tx-carousel__item { flex-basis: 50%; }
}
@media (min-width: 1024px) {
	.tx-carousel__item { flex-basis: 33.3333%; }
}
.tx-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: var(--surface);
	color: var(--foreground);
	transition: color 0.3s, border-color 0.3s, transform 0.3s;
}
.tx-carousel__btn:hover { color: var(--accent); border-color: var(--accent); }
.tx-carousel__prev { left: -12px; }
.tx-carousel__next { right: -12px; }
@media (min-width: 640px) {
	.tx-carousel__prev { left: -20px; }
	.tx-carousel__next { right: -20px; }
}

/* ---------------------------------------------------------------------------
 * SCROLL REVEAL (data-reveal)
 * ------------------------------------------------------------------------- */
html.js [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}
html.js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Category pills (shop) */
.tx-scroll-pills {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.tx-scroll-pills::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
 * INTERACTION HELPERS (hover / focus / placeholder variants)
 * ------------------------------------------------------------------------- */
.hover\:text-accent:hover { color: var(--accent); }
.hover\:text-destructive:hover { color: var(--destructive); }
.hover\:border-accent:hover { border-color: var(--accent); }
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:bg-surface-2:hover { background-color: var(--surface-2); }
.hover\:bg-surface:hover { background-color: var(--surface); }
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
.hover\:scale-\[1\.03\]:hover { transform: scale(1.03); }
.hover\:scale-\[1\.04\]:hover { transform: scale(1.04); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-108:hover { transform: scale(1.08); }
.active\:scale-95:active { transform: scale(0.95); }
.focus\:border-primary:focus { border-color: var(--primary); }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 40%, transparent); }
.placeholder\:text-muted-foreground::placeholder { color: var(--muted-foreground); }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }

/* Group-hover variants */
.group:hover .group-hover\:translate-x-1 { transform: translateX(4px); }
.group:hover .group-hover\:translate-x-0\.5 { transform: translateX(2px); }
.group:hover .group-hover\:opacity-45 { opacity: 0.45; }
.group:hover .group-hover\:scale-108 { transform: scale(1.08); }

/* ---------------------------------------------------------------------------
 * PRODUCT CARD — image zooms from the center, card tilts on hover
 * ------------------------------------------------------------------------- */
html.js .tx-card {
	transition: opacity 0.7s var(--ease-smooth), transform 0.22s var(--ease-smooth);
}
.tx-card { position: relative; z-index: 0; }
.tx-card-media {
	position: relative;
	overflow: hidden;
	border-radius: 1rem 1rem 0 0;
}
.tx-card-media img {
	display: block;
	will-change: transform;
	transition: transform 1.1s var(--ease-smooth);
}
.tx-card:hover .tx-card-media img {
	transform: scale(1.12);
}

/* ---------------------------------------------------------------------------
 * CATEGORY CARDS — bold titles + arrow chip
 * ------------------------------------------------------------------------- */
.txsoo-cat-card {
	transition: opacity 0.7s var(--ease-smooth), transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth), border-color 0.35s var(--ease-smooth);
}
.txsoo-cat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-glow);
	border-color: color-mix(in oklab, var(--accent) 45%, transparent);
}
.txsoo-cat-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background-image: var(--gradient-brand);
	box-shadow: 0 10px 22px -12px var(--accent);
	color: var(--primary-foreground);
	transition: transform 0.3s var(--ease-smooth);
}
.txsoo-cat-card:hover .txsoo-cat-icon {
	transform: scale(1.08) rotate(-4deg);
}
.txsoo-cat-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: var(--surface-2);
	color: var(--accent);
	transition: background-color 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}
.group:hover .txsoo-cat-arrow {
	background-image: var(--gradient-brand);
	border-color: transparent;
	color: var(--primary-foreground);
	transform: translateX(3px);
}
.stroke-bold { stroke-width: 3; }

/* Opacity / color-mix variants */
.border-border\/60 { border-color: color-mix(in oklab, var(--border) 60%, transparent); }
.bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); }
.bg-accent\/15 { background-color: color-mix(in oklab, var(--accent) 15%, transparent); }
.bg-neon\/15 { background-color: color-mix(in oklab, var(--neon) 15%, transparent); }
.bg-success\/15 { background-color: color-mix(in oklab, var(--success) 15%, transparent); }

/* Checkout payment method states */
.payment-method {
	display: flex;
	cursor: pointer;
	align-items: center;
	gap: 12px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background-color: color-mix(in oklab, var(--surface) 50%, transparent);
	padding: 12px 16px;
	font-size: 14px;
	transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease-smooth);
}
.payment-method:hover { border-color: color-mix(in oklab, var(--accent) 60%, transparent); }
.payment-method.is-active {
	border-color: var(--primary);
	background-color: var(--surface-2);
}
.payment-method__radio {
	width: 16px;
	height: 16px;
	accent-color: var(--primary);
	margin: 0;
}
.payment-method__radio:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

/* Cart line controls */
.cart-qty-btn {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 9999px;
	transition: background-color 0.3s;
}
.cart-qty-btn:hover { background-color: var(--surface-2); }
.cart-qty-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
 * UTILITIES LAYER (last, so utilities always beat component display rules,
 * mirroring Tailwind's utility ordering). Base display utilities first, then
 * responsive overrides. sm ≥ 640, md ≥ 768, lg ≥ 1024.
 * ------------------------------------------------------------------------- */
.hidden { display: none; }
.flex { display: flex; }
.grid { display: grid; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex-1 { flex: 1 1 0%; }

@media (min-width: 640px) {
	.sm\:px-6 { padding-left: 24px; padding-right: 24px; }
	.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sm\:flex { display: flex; }
	.sm\:grid { display: grid; }
	.sm\:inline-block { display: inline-block; }
	.sm\:inline { display: inline; }
	.sm\:flex-row { flex-direction: row; }
	.sm\:items-center { align-items: center; }
	.sm\:justify-end { justify-content: flex-end; }
	.sm\:text-lg { font-size: 18px; }
	.sm\:text-5xl { font-size: 48px; }
	.sm\:basis-1\/2 { flex-basis: 50%; }
	.sm\:-left-6 { left: -24px; }
	.sm\:-right-6 { right: -24px; }
}

@media (min-width: 768px) {
	.md\:flex-row { flex-direction: row; }
	.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.md\:justify-end { justify-content: flex-end; }
}

@media (min-width: 1024px) {
	.lg\:block { display: block; }
	.lg\:flex { display: flex; }
	.lg\:hidden { display: none; }
	.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.lg\:text-6xl { font-size: 60px; }
	.lg\:max-w-none { max-width: none; }
}

/* Named grid templates (replaces Tailwind arbitrary grid-cols-[...]) */
.grid-hero { grid-template-columns: 1.3fr 0.7fr; }
.grid-checkout { grid-template-columns: 1.1fr 0.9fr; }
.grid-contact { grid-template-columns: 1fr 0.7fr; }
.grid-footer { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

@media (min-width: 1024px) {
	.lg\:grid-hero { grid-template-columns: 1.3fr 0.7fr; }
	.lg\:grid-checkout { grid-template-columns: 1.1fr 0.9fr; }
	.lg\:grid-contact { grid-template-columns: 1fr 0.7fr; }
	.lg\:grid-footer { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
 * ORDER SUCCESS SCREEN
 * ------------------------------------------------------------------------- */
.success-tick-ring {
	position: relative;
	background-image: var(--gradient-brand);
	box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 40%, transparent);
	animation: success-ring-pulse 0.7s var(--ease-smooth) forwards;
}
@keyframes success-ring-pulse {
	0%   { transform: scale(0.5); opacity: 0; box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 50%, transparent); }
	60%  { transform: scale(1.12); box-shadow: 0 0 0 14px color-mix(in oklab, var(--primary) 0%, transparent); }
	100% { transform: scale(1);   opacity: 1; box-shadow: 0 0 0 20px color-mix(in oklab, var(--primary) 0%, transparent); }
}

[data-checkout-success] {
	animation: fade-slide-up 0.45s var(--ease-smooth) both;
}
@keyframes fade-slide-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

/* Success items list divider */
[data-success-items] li + li {
	border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

/* ---------------------------------------------------------------------------
 * ADD-TO-CART → VIEW-CART BUTTON
 * ------------------------------------------------------------------------- */

/* "In cart" state — change button colour to a teal/accent shade */
[data-add-to-cart].btn-in-cart {
	background: none;
	background-color: var(--surface-2);
	border: 1.5px solid var(--accent);
	color: var(--accent);
	box-shadow: none;
}
[data-add-to-cart].btn-in-cart:hover {
	background-color: color-mix(in oklab, var(--accent) 12%, transparent);
	transform: scale(1.02);
}

/* Entrance animation when transitioning add → view */
[data-add-to-cart].btn-in-cart--animate {
	animation: btn-cart-flip 0.42s var(--ease-smooth) both;
}
@keyframes btn-cart-flip {
	0%   { transform: scale(0.88); opacity: 0.4; }
	55%  { transform: scale(1.06); opacity: 1; }
	100% { transform: scale(1); }
}

/* Ensure the view-icon span behaves like an inline-flex icon */
[data-view-icon] {
	display: inline-flex;
	align-items: center;
}

/* ---------------------------------------------------------------------------
 * MOBILE MENU REDESIGN
 * ------------------------------------------------------------------------- */

/* Scrollable mobile menu container */
[data-mobile-menu] > div {
	overflow-y: auto;
	max-height: calc(100svh - 72px);
	scrollbar-width: thin;
}

/* Nav links */
.mobile-nav-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mobile-nav-list li { display: block; }
.mobile-nav-list .nav-link {
	display: flex;
	align-items: center;
	padding: 11px 14px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--foreground);
	transition: background-color 0.2s, color 0.2s;
}
.mobile-nav-list .nav-link::after { display: none; }
.mobile-nav-list .nav-link:hover,
.mobile-nav-list .nav-link.is-current {
	background-color: var(--surface);
	color: var(--accent);
}

/* Categories section */
.mobile-menu__cats-section {
	padding-top: 4px;
	border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.mobile-menu__cats-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 4px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--accent);
}
.mobile-menu__cats-list {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.mobile-menu__cat-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid transparent;
	background-color: color-mix(in oklab, var(--surface) 50%, transparent);
	font-size: 14px;
	color: var(--muted-foreground);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.mobile-menu__cat-item:hover {
	background-color: var(--surface);
	border-color: color-mix(in oklab, var(--accent) 35%, transparent);
	color: var(--accent);
	transform: translateX(3px);
}
.mobile-menu__cat-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--accent);
	opacity: 0.7;
}
.mobile-menu__cat-name {
	flex: 1;
	font-weight: 500;
}
.mobile-menu__cat-count {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	border-radius: 9999px;
	background-color: color-mix(in oklab, var(--accent) 15%, transparent);
	color: var(--accent);
	font-size: 11px;
	font-weight: 700;
	padding: 0 6px;
}
.mobile-menu__view-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	padding: 10px;
	border-radius: 12px;
	border: 1px dashed color-mix(in oklab, var(--border) 80%, transparent);
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	transition: background-color 0.2s, border-color 0.2s;
}
.mobile-menu__view-all:hover {
	background-color: color-mix(in oklab, var(--accent) 8%, transparent);
	border-color: var(--accent);
}

/* Contact strip at the bottom of the mobile menu */
.mobile-menu__contact-strip {
	display: flex;
	gap: 10px;
	padding-top: 4px;
	border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.mobile-menu__contact-item {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
	background-color: color-mix(in oklab, var(--surface) 50%, transparent);
	font-size: 13px;
	font-weight: 600;
	color: var(--muted-foreground);
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.mobile-menu__contact-item:hover {
	border-color: var(--accent);
	color: var(--accent);
	background-color: color-mix(in oklab, var(--accent) 8%, transparent);
}

/* ---------------------------------------------------------------------------
 * SHIPPING OPTIONS (checkout page) — redesigned
 * ------------------------------------------------------------------------- */

/* Wrapper list spacing */
[data-chk-shipping-list] {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.txsoo-ship-empty {
	font-size: 14px;
	color: var(--muted-foreground);
	text-align: center;
	padding: 12px 0;
}

/* Individual option card */
.txsoo-ship-opt {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 16px;
	border: 1.5px solid var(--border);
	background-color: color-mix(in oklab, var(--surface) 55%, transparent);
	cursor: pointer;
	font-size: 14px;
	transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s, transform 0.2s;
	position: relative;
	overflow: hidden;
}
.txsoo-ship-opt::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--gradient-brand);
	opacity: 0;
	transition: opacity 0.25s;
	pointer-events: none;
	border-radius: inherit;
}
.txsoo-ship-opt:hover {
	border-color: color-mix(in oklab, var(--accent) 55%, transparent);
	box-shadow: 0 2px 12px color-mix(in oklab, var(--accent) 10%, transparent);
	transform: translateY(-1px);
}
.txsoo-ship-opt:has(input:checked) {
	border-color: var(--primary);
	background-color: color-mix(in oklab, var(--primary) 6%, transparent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 15%, transparent);
}

/* Radio button */
.txsoo-ship-opt input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--primary);
	flex-shrink: 0;
	cursor: pointer;
}

/* Label text + badge */
.txsoo-ship-label {
	flex: 1;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--foreground);
}

/* Cost display */
.txsoo-ship-cost {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 15px;
	color: var(--foreground);
	font-family: "Space Grotesk", sans-serif;
}
.txsoo-ship-cost--free {
	color: var(--success);
	font-size: 14px;
}

/* Bonus / free-shipping card variant */
.txsoo-ship--bonus {
	border-color: color-mix(in oklab, var(--success) 45%, transparent);
	background: linear-gradient(
		135deg,
		color-mix(in oklab, var(--success) 6%, transparent),
		color-mix(in oklab, var(--accent) 4%, transparent)
	);
}
.txsoo-ship--bonus:hover {
	border-color: var(--success);
	box-shadow: 0 2px 16px color-mix(in oklab, var(--success) 15%, transparent);
}
.txsoo-ship--bonus:has(input:checked) {
	border-color: var(--success);
	background: linear-gradient(
		135deg,
		color-mix(in oklab, var(--success) 10%, transparent),
		color-mix(in oklab, var(--accent) 6%, transparent)
	);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 20%, transparent);
}

/* Bonus tag pill */
.txsoo-ship-bonus-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--success);
	background-color: color-mix(in oklab, var(--success) 12%, transparent);
	border: 1px solid color-mix(in oklab, var(--success) 30%, transparent);
	border-radius: 9999px;
	padding: 2px 8px;
}

/* Free shipping notice banner */
[data-chk-free-shipping-notice] {
	background: linear-gradient(
		135deg,
		color-mix(in oklab, var(--success) 10%, transparent),
		color-mix(in oklab, var(--accent) 6%, transparent)
	);
	border: 1px solid color-mix(in oklab, var(--success) 35%, transparent);
	border-radius: 14px;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--success);
	display: flex;
	align-items: center;
	gap: 8px;
	animation: fade-slide-up 0.3s var(--ease-smooth) both;
}

/* ---------------------------------------------------------------------------
 * COUPON SECTION (cart + checkout) — redesigned
 * ------------------------------------------------------------------------- */

/* Outer wrapper */
[data-coupon-section] {
	border-radius: 16px;
	border: 1.5px dashed color-mix(in oklab, var(--border) 80%, transparent);
	background-color: color-mix(in oklab, var(--surface) 40%, transparent);
	padding: 16px 18px;
	transition: border-color 0.25s, background-color 0.25s;
}
[data-coupon-section]:has([data-coupon-form]:not(.hidden)) {
	border-style: solid;
	border-color: color-mix(in oklab, var(--accent) 40%, transparent);
	background-color: color-mix(in oklab, var(--surface) 60%, transparent);
}

/* Toggle trigger */
[data-coupon-toggle] {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted-foreground);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	text-align: left;
	transition: color 0.2s;
}
[data-coupon-toggle]:hover { color: var(--foreground); }
[data-coupon-toggle] svg { color: var(--accent); flex-shrink: 0; }
[data-coupon-toggle-text] {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s, text-decoration 0.2s;
}
[data-coupon-toggle]:hover [data-coupon-toggle-text] {
	text-decoration: none;
}

/* Coupon form (revealed after toggle) */
[data-coupon-form] {
	margin-top: 14px;
	animation: fade-slide-up 0.25s var(--ease-smooth) both;
}
[data-coupon-form].hidden { display: none; }

/* Input + button row */
[data-coupon-form] .txsoo-coupon-row {
	display: flex;
	gap: 8px;
}
[data-coupon-input] {
	flex: 1;
	height: 44px;
	border-radius: 12px;
	border: 1.5px solid var(--input);
	background-color: color-mix(in oklab, var(--surface) 70%, transparent);
	padding: 0 14px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.25s, box-shadow 0.25s;
	color: var(--foreground);
}
[data-coupon-input]:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent);
}
[data-coupon-input]::placeholder { color: var(--muted-foreground); }

[data-coupon-apply] {
	flex-shrink: 0;
	height: 44px;
	padding: 0 18px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	color: var(--primary-foreground);
	background-image: var(--gradient-brand);
	border: none;
	cursor: pointer;
	transition: transform 0.2s, opacity 0.2s;
	white-space: nowrap;
}
[data-coupon-apply]:hover { transform: scale(1.03); }
[data-coupon-apply]:active { transform: scale(0.97); }
[data-coupon-apply]:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Coupon message */
[data-coupon-msg] {
	min-height: 1.2em;
	font-size: 12px;
	margin-top: 6px;
	font-weight: 500;
	transition: color 0.2s;
}

/* Applied coupon row badge */
[data-coupon-row] {
	animation: fade-slide-up 0.25s var(--ease-smooth) both;
}
[data-coupon-row] button[data-coupon-remove] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 9999px;
	background: none;
	border: 1px solid var(--destructive);
	font-size: 10px;
	font-weight: 700;
	color: var(--destructive);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: background-color 0.2s, color 0.2s;
	font-family: inherit;
}
[data-coupon-row] button[data-coupon-remove]:hover {
	background-color: var(--destructive);
	color: var(--destructive-foreground);
}

/* ---------------------------------------------------------------------------
 * DISCOUNT / PROMOTION FEE ROWS
 * ------------------------------------------------------------------------- */
[data-discount-row],
[data-chk-discount-rows] > div {
	animation: fade-slide-up 0.25s var(--ease-smooth) both;
}

/* ---------------------------------------------------------------------------
 * PRODUCT GALLERY (single product page)
 * ------------------------------------------------------------------------- */
.txsoo-gallery__main {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	background: var(--surface);
	cursor: zoom-in;
	touch-action: pan-y;
}
.txsoo-gallery__main.is-zoomed { cursor: zoom-out; }

.txsoo-gallery__main-img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transform-origin: 50% 50%;
	transition: transform 0.35s var(--ease-smooth);
	will-change: transform;
}
.txsoo-gallery__main.is-zoomed .txsoo-gallery__main-img { transform: scale(1.8); }

.txsoo-gallery__prev,
.txsoo-gallery__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background: color-mix(in oklab, var(--surface) 80%, transparent);
	backdrop-filter: blur(8px);
	color: var(--foreground);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s, background-color 0.2s, color 0.2s;
}
.txsoo-gallery__prev { left: 12px; }
.txsoo-gallery__next { right: 12px; }
.txsoo-gallery__main:hover .txsoo-gallery__prev,
.txsoo-gallery__main:hover .txsoo-gallery__next,
.txsoo-gallery__main:focus-within .txsoo-gallery__prev,
.txsoo-gallery__main:focus-within .txsoo-gallery__next { opacity: 1; }
.txsoo-gallery__prev:hover,
.txsoo-gallery__next:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-foreground);
}

.txsoo-gallery__hint {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	color: var(--foreground);
	background: color-mix(in oklab, var(--surface) 75%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--border);
	padding: 6px 12px;
	border-radius: 9999px;
	opacity: 0;
	transition: opacity 0.25s;
	pointer-events: none;
}
.txsoo-gallery__main:hover .txsoo-gallery__hint { opacity: 1; }

.txsoo-gallery__count {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	font-size: 12px;
	font-weight: 700;
	color: var(--foreground);
	background: color-mix(in oklab, var(--surface) 75%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--border);
	padding: 4px 10px;
	border-radius: 9999px;
}

.txsoo-gallery__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.txsoo-gallery__thumbs::-webkit-scrollbar { display: none; }

.txsoo-gallery__thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	padding: 2px;
	border-radius: 14px;
	border: 2px solid var(--border);
	background: var(--surface);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s, transform 0.2s;
}
.txsoo-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}
.txsoo-gallery__thumb:hover { border-color: var(--accent); transform: translateY(-2px); }
.txsoo-gallery__thumb.is-active {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}

@media (hover: none) {
	.txsoo-gallery__hint { opacity: 1; }
	.txsoo-gallery__main { cursor: default; }
}

/* ---------------------------------------------------------------------------
 * PRODUCT GALLERY LIGHTBOX
 * ------------------------------------------------------------------------- */
.txsoo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(8, 9, 16, 0.92);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s;
}
.txsoo-lightbox.is-open { opacity: 1; visibility: visible; }

.txsoo-lightbox__img {
	max-width: min(92vw, 1100px);
	max-height: 82vh;
	object-fit: contain;
	border-radius: 12px;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
	transform: scale(0.96);
	transition: transform 0.25s var(--ease-smooth);
}
.txsoo-lightbox.is-open .txsoo-lightbox__img { transform: scale(1); }

.txsoo-lightbox__btn {
	position: absolute;
	z-index: 10;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s;
}
.txsoo-lightbox__btn:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); }
.txsoo-lightbox__close { top: 12px; right: 12px; }
.txsoo-lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.txsoo-lightbox__prev:hover { transform: translateY(-50%) scale(1.05); }
.txsoo-lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); }
.txsoo-lightbox__next:hover { transform: translateY(-50%) scale(1.05); }

.txsoo-lightbox__counter {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------------------
 * CALL FOR HELP / WHATSAPP BUTTONS
 * ------------------------------------------------------------------------- */
.txsoo-help {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 480px) {
	.txsoo-help { grid-template-columns: 1fr; }
}

.txsoo-help-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 18px;
	border: 1px solid transparent;
	font-weight: 600;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s;
}
.txsoo-help-btn:hover { transform: translateY(-2px); }
.txsoo-help-btn:active { transform: translateY(0) scale(0.98); }

.txsoo-help-btn--call {
	color: #fff;
	background: linear-gradient(100deg, #7c3aed, #d84a98 60%, #f04e7d);
	box-shadow: 0 12px 30px -12px rgba(216, 74, 152, 0.55);
}
.txsoo-help-btn--call:hover { box-shadow: 0 16px 38px -12px rgba(216, 74, 152, 0.7); }

.txsoo-help-btn--whatsapp {
	color: #fff;
	background: linear-gradient(100deg, #0e8a45, #25d366);
	box-shadow: 0 12px 30px -12px rgba(37, 211, 102, 0.5);
}
.txsoo-help-btn--whatsapp:hover { box-shadow: 0 16px 38px -12px rgba(37, 211, 102, 0.65); }

.txsoo-help-btn__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
}
.txsoo-help-btn__icon svg { position: relative; z-index: 1; }

.txsoo-help-btn__ring {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.35);
	animation: help-ring-pulse 2.2s var(--ease-smooth) infinite;
}

.txsoo-help-btn__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}
.txsoo-help-btn__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
	font-weight: 700;
}
.txsoo-help-btn__value { font-size: 15px; font-weight: 700; white-space: nowrap; }

.txsoo-help-btn--call::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	animation: help-shimmer 3.2s ease-in-out infinite;
}

.txsoo-help-btn--call .txsoo-help-btn__icon svg {
	animation: help-wiggle 2.6s ease-in-out infinite;
}

@keyframes help-ring-pulse {
	0% { transform: scale(1); opacity: 0.55; }
	70% { transform: scale(1.9); opacity: 0; }
	100% { opacity: 0; }
}
@keyframes help-shimmer {
	0% { left: -80%; }
	55%, 100% { left: 130%; }
}
@keyframes help-wiggle {
	0%, 12%, 100% { transform: rotate(0deg); }
	3% { transform: rotate(-14deg); }
	6% { transform: rotate(12deg); }
	9% { transform: rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
	.txsoo-help-btn__ring,
	.txsoo-help-btn--call::after,
	.txsoo-help-btn--call .txsoo-help-btn__icon svg { animation: none; }
}

/* ---------------------------------------------------------------------------
 * PRODUCT DESCRIPTION (HTML supported)
 * ------------------------------------------------------------------------- */
.txsoo-description {
	color: var(--muted-foreground);
	font-size: 15px;
	line-height: 1.75;
}
.txsoo-description > * + * { margin-top: 0.9em; }
.txsoo-description h1,
.txsoo-description h2,
.txsoo-description h3,
.txsoo-description h4 {
	color: var(--foreground);
	font-weight: 700;
	line-height: 1.3;
	margin-top: 1.4em;
}
.txsoo-description h1 { font-size: 1.7em; }
.txsoo-description h2 { font-size: 1.45em; }
.txsoo-description h3 { font-size: 1.2em; }
.txsoo-description h4 { font-size: 1.05em; }
.txsoo-description a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.txsoo-description ul,
.txsoo-description ol { padding-left: 1.4em; }
.txsoo-description ul { list-style: disc; }
.txsoo-description ol { list-style: decimal; }
.txsoo-description li { margin-top: 0.4em; }
.txsoo-description li::marker { color: var(--accent); }
.txsoo-description img { max-width: 100%; height: auto; border-radius: 12px; margin-top: 1.2em; }
.txsoo-description blockquote {
	border-left: 3px solid var(--accent);
	padding: 0.4em 1em;
	background: var(--surface);
	border-radius: 0 12px 12px 0;
	color: var(--foreground);
}
.txsoo-description table { width: 100%; border-collapse: collapse; font-size: 14px; }
.txsoo-description th,
.txsoo-description td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.txsoo-description th { background: var(--surface-2); color: var(--foreground); font-weight: 700; }
.txsoo-description code {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 2px 6px;
	font-size: 0.9em;
}
.txsoo-description pre {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 14px;
	overflow-x: auto;
}
.txsoo-description pre code { background: none; border: 0; padding: 0; }
.txsoo-description__note { display: flex; align-items: flex-start; gap: 12px; }
.txsoo-description__note svg { flex: 0 0 auto; margin-top: 2px; }
.txsoo-description__note p { margin: 0; }

/* Description toggle button + collapsible panel */
.txsoo-description__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 32px;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background-color: color-mix(in oklab, var(--surface) 70%, transparent);
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--accent);
	cursor: pointer;
	transition: border-color 0.3s, background-color 0.3s;
}
.txsoo-description__toggle:hover {
	border-color: var(--accent);
	background-color: color-mix(in oklab, var(--surface) 90%, transparent);
}
.txsoo-description__chevron {
	display: grid;
	place-items: center;
	transition: transform 0.3s var(--ease-smooth);
}
.txsoo-description__toggle[aria-expanded="true"] .txsoo-description__chevron {
	transform: rotate(180deg);
}
.txsoo-description-panel { display: none; }
.txsoo-description-panel.is-open { display: block; }

/* ---------------------------------------------------------------------------
 * PAGE CONTENT — Entry content styling for general pages
 * Ensures WordPress editor content renders beautifully inside .glass-card
 * ------------------------------------------------------------------------- */
.txsoo-page-content .entry-content {
	color: var(--foreground);
	font-size: 16px;
	line-height: 1.8;
}

/* ---- Headings ---- */
.txsoo-page-content .entry-content h1 {
	font-size: 2.25rem;
	font-weight: 700;
	margin: 2.5rem 0 1rem;
	line-height: 1.25;
}
.txsoo-page-content .entry-content h2 {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 2rem 0 0.75rem;
	line-height: 1.3;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border);
}
.txsoo-page-content .entry-content h3 {
	font-size: 1.375rem;
	font-weight: 600;
	margin: 1.75rem 0 0.625rem;
	line-height: 1.35;
}
.txsoo-page-content .entry-content h4 {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 1.5rem 0 0.5rem;
	line-height: 1.4;
}
.txsoo-page-content .entry-content h5,
.txsoo-page-content .entry-content h6 {
	font-size: 1rem;
	font-weight: 600;
	margin: 1.25rem 0 0.5rem;
	line-height: 1.45;
}
.txsoo-page-content .entry-content h2 span,
.txsoo-page-content .entry-content h3 span,
.txsoo-page-content .entry-content h4 span {
	background-image: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---- Paragraphs ---- */
.txsoo-page-content .entry-content p {
	margin: 0 0 1.25rem;
}

/* ---- Links ---- */
.txsoo-page-content .entry-content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s;
}
.txsoo-page-content .entry-content a:hover {
	color: var(--primary);
}

/* ---- Lists ---- */
.txsoo-page-content .entry-content ul,
.txsoo-page-content .entry-content ol {
	margin: 0 0 1.25rem;
	padding-left: 1.75rem;
}
.txsoo-page-content .entry-content li {
	margin-bottom: 0.375rem;
	line-height: 1.75;
}
.txsoo-page-content .entry-content ul li::marker {
	color: var(--accent);
}
.txsoo-page-content .entry-content ol li::marker {
	color: var(--accent);
	font-weight: 600;
}

/* ---- Blockquotes ---- */
.txsoo-page-content .entry-content blockquote {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--primary);
	border-radius: 0 12px 12px 0;
	background-color: color-mix(in oklab, var(--primary) 6%, transparent);
	font-style: italic;
}
.txsoo-page-content .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* ---- Tables ---- */
.txsoo-page-content .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--border);
}
.txsoo-page-content .entry-content thead {
	background-color: color-mix(in oklab, var(--primary) 8%, transparent);
}
.txsoo-page-content .entry-content th {
	padding: 0.875rem 1rem;
	text-align: left;
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--foreground);
	border-bottom: 2px solid var(--border);
}
.txsoo-page-content .entry-content td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border);
	font-size: 0.9375rem;
}
.txsoo-page-content .entry-content tr:last-child td {
	border-bottom: none;
}
.txsoo-page-content .entry-content tbody tr {
	transition: background-color 0.2s;
}
.txsoo-page-content .entry-content tbody tr:hover {
	background-color: color-mix(in oklab, var(--primary) 4%, transparent);
}

/* ---- Images ---- */
.txsoo-page-content .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 1.5rem 0;
}
.txsoo-page-content .entry-content .wp-caption {
	max-width: 100%;
}
.txsoo-page-content .entry-content .wp-caption-text {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--muted-foreground);
	text-align: center;
}

/* ---- Code ---- */
.txsoo-page-content .entry-content code {
	font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
	font-size: 0.875em;
	padding: 0.15em 0.4em;
	background-color: color-mix(in oklab, var(--muted) 60%, transparent);
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--foreground);
}
.txsoo-page-content .entry-content pre {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	background-color: color-mix(in oklab, var(--foreground) 92%, transparent);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow-x: auto;
	line-height: 1.6;
}
.txsoo-page-content .entry-content pre code {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 0.8125rem;
	color: var(--primary-foreground);
}

/* ---- Horizontal rule ---- */
.txsoo-page-content .entry-content hr {
	margin: 2rem 0;
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ---- WordPress gallery ---- */
.txsoo-page-content .entry-content .wp-block-gallery {
	margin: 1.5rem 0;
	gap: 0.75rem;
}
.txsoo-page-content .entry-content .wp-block-image {
	margin: 0;
}

/* ---- WordPress align classes ---- */
.txsoo-page-content .entry-content .alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}
.txsoo-page-content .entry-content .alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}
.txsoo-page-content .entry-content .aligncenter {
	display: block;
	margin: 1.5rem auto;
}
.txsoo-page-content .entry-content .alignwide {
	margin-left: -2rem;
	margin-right: -2rem;
	border-radius: 12px;
}
.txsoo-page-content .entry-content .alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	border-radius: 0;
	width: 100vw;
	max-width: 100vw;
}

/* ---- Page links (pagination) ---- */
.txsoo-page-content .page-links {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}
.txsoo-page-content .page-links span,
.txsoo-page-content .page-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 0.75rem;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 0.2s;
}
.txsoo-page-content .page-links span.page-number {
	background-color: color-mix(in oklab, var(--primary) 10%, transparent);
	color: var(--primary);
	font-weight: 700;
}
.txsoo-page-content .page-links a {
	border: 1px solid var(--border);
	color: var(--foreground);
}
.txsoo-page-content .page-links a:hover {
	border-color: var(--accent);
	color: var(--accent);
	background-color: color-mix(in oklab, var(--accent) 6%, transparent);
}

/* ---- Edit link (footer) ---- */
.txsoo-page-content .entry-footer .edit-link svg {
	opacity: 0.6;
}
.txsoo-page-content .entry-footer .edit-link:hover svg {
	opacity: 1;
}

/* ---- Responsive adjustments ---- */
@media (max-width: 639px) {
	.txsoo-page-content .entry-content {
		font-size: 15px;
	}
	.txsoo-page-content .entry-content h1 {
		font-size: 1.75rem;
	}
	.txsoo-page-content .entry-content h2 {
		font-size: 1.375rem;
	}
	.txsoo-page-content .entry-content h3 {
		font-size: 1.125rem;
	}
	.txsoo-page-content .entry-content .alignleft,
	.txsoo-page-content .entry-content .alignright {
		float: none;
		display: block;
		margin: 1rem auto;
	}
	.txsoo-page-content .entry-content .alignwide {
		margin-left: -1rem;
		margin-right: -1rem;
	}
	.txsoo-page-content .entry-content table {
		display: block;
		overflow-x: auto;
	}
	.txsoo-page-content .entry-content pre {
		padding: 1rem;
		font-size: 0.8125rem;
	}
}