/* ==========================================================================
   TirupatiHelps v3.0.0 — modules.css
   34. Unified search + autocomplete
   35. Mobile shell (tab bar, search overlay)
   36. Language switcher
   37. Temple timings
   38. Poojas & Sevas
   39. Section rails and premium homepage pieces
   40. Location pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   34. Unified search
   -------------------------------------------------------------------------- */

.th-usearch {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-lg);
	padding: 8px;
	box-shadow: var(--th-sh-lg);
}

.th-usearch__field {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

.th-usearch__field > svg {
	position: absolute;
	left: 14px;
	width: 18px;
	height: 18px;
	color: var(--th-faint);
	pointer-events: none;
	z-index: 1;
}

.th-usearch input[type="search"],
.th-usearch select {
	width: 100%;
	height: 52px;
	min-height: 52px;
	padding: 0 14px 0 42px;
	border: 0;
	border-radius: var(--th-r);
	background: var(--th-bg-soft);
	font-size: 15px;
	color: var(--th-ink);
}

.th-usearch input[type="search"]::placeholder {
	color: var(--th-faint);
}

.th-usearch input:focus,
.th-usearch select:focus {
	outline: none;
	background: #fff;
	box-shadow: 0 0 0 2px var(--th-red-soft);
}

.th-usearch .th-btn {
	height: 52px;
	padding-inline: 28px;
	border-radius: var(--th-r);
}

@media (max-width: 900px) {
	.th-usearch {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.th-usearch__field:first-child,
	.th-usearch .th-btn {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.th-usearch {
		grid-template-columns: minmax(0, 1fr);
		padding: 6px;
		box-shadow: var(--th-sh);
	}

	.th-usearch input[type="search"],
	.th-usearch select,
	.th-usearch .th-btn {
		height: 48px;
		min-height: 48px;
	}
}

/* Autocomplete panel */
.th-usearch__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 40;
	max-height: min(60vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	box-shadow: var(--th-sh-lg);
	padding: 6px;
	text-align: left;
}

.th-usearch__panel[hidden] {
	display: none;
}

.th-usearch__group + .th-usearch__group {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--th-line-soft);
}

.th-usearch__label {
	margin: 0;
	padding: 7px 12px 5px;
	font-family: var(--th-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--th-muted);
}

.th-usearch__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 12px;
	border-radius: var(--th-r-sm);
	color: var(--th-ink);
	text-decoration: none;
}

.th-usearch__item:hover,
.th-usearch__item.is-active {
	background: var(--th-red-tint);
	color: var(--th-red-dark);
}

.th-usearch__t {
	font-family: var(--th-font-head);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
}

.th-usearch__m {
	font-size: 12.5px;
	color: var(--th-muted);
}

.th-usearch__item:hover .th-usearch__m,
.th-usearch__item.is-active .th-usearch__m {
	color: var(--th-red);
}

.th-usearch__empty {
	margin: 0;
	padding: 14px 12px;
	font-size: 13.5px;
	color: var(--th-muted);
	text-align: center;
}

/* Scope chips on the results page */
.th-scopes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.th-scope {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-pill);
	background: #fff;
	font-family: var(--th-font-head);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--th-body);
}

.th-scope:hover {
	border-color: var(--th-red);
	color: var(--th-red);
}

.th-scope.is-on {
	background: var(--th-red);
	border-color: var(--th-red);
	color: #fff;
}

.th-scope__n {
	font-size: 11.5px;
	font-weight: 700;
	background: var(--th-bg-warm);
	color: var(--th-muted);
	border-radius: var(--th-r-pill);
	padding: 1px 8px;
}

.th-scope.is-on .th-scope__n {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* --------------------------------------------------------------------------
   35. Mobile shell
   -------------------------------------------------------------------------- */

.th-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 66;
	display: none;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-top: 1px solid var(--th-line);
	padding-bottom: env(safe-area-inset-bottom);
	transition: transform .24s var(--th-ease);
}

.th-tabbar.is-away {
	transform: translateY(100%);
}

.th-tabbar__in {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.th-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	/* 56px keeps every tab comfortably over the 44px touch-target minimum */
	min-height: 56px;
	padding: 7px 4px;
	background: none;
	border: 0;
	color: var(--th-muted);
	font-family: var(--th-font-head);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.th-tab svg {
	width: 21px;
	height: 21px;
}

.th-tab:hover,
.th-tab.is-on {
	color: var(--th-red);
}

.th-tab--accent {
	color: var(--th-red);
}

@media (max-width: 1024px) {
	.th-tabbar {
		display: block;
	}

	/* Clear the bar so nothing is trapped underneath it. */
	body {
		padding-bottom: calc(56px + env(safe-area-inset-bottom));
	}

	/* The listing action bar already sits there, so the tab bar steps aside. */
	body.th-has-mobilebar .th-tabbar {
		display: none;
	}

	body.th-has-mobilebar {
		padding-bottom: calc(68px + env(safe-area-inset-bottom));
	}

	.th-float {
		bottom: calc(68px + env(safe-area-inset-bottom));
	}

	.th-totop {
		bottom: calc(126px + env(safe-area-inset-bottom));
	}

	.th-float--stacked ~ .th-totop {
		bottom: calc(172px + env(safe-area-inset-bottom));
	}
}

/* Full-screen search overlay opened from the tab bar */
.th-searchoverlay {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: #fff;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s var(--th-ease), transform .2s var(--th-ease), visibility .2s;
}

.th-searchoverlay.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.th-searchoverlay__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--th-line);
}

.th-searchoverlay__head h2 {
	flex: 1 1 auto;
	margin: 0;
	font-size: 17px;
}

.th-searchoverlay__body {
	padding: 18px 16px 40px;
	overflow-y: auto;
}

.th-searchoverlay .th-usearch {
	grid-template-columns: minmax(0, 1fr);
	box-shadow: none;
	border: 0;
	padding: 0;
	gap: 10px;
}

.th-searchoverlay .th-usearch input[type="search"],
.th-searchoverlay .th-usearch select {
	background: var(--th-bg-soft);
	border: 1px solid var(--th-line);
}

.th-quicklinks {
	display: grid;
	gap: 8px;
	margin-top: 26px;
}

.th-quicklinks__title {
	font-family: var(--th-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--th-muted);
	margin: 0 0 4px;
}

.th-quicklink {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 15px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	font-family: var(--th-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--th-ink);
	min-height: 48px;
}

.th-quicklink svg {
	width: 19px;
	height: 19px;
	color: var(--th-red);
}

.th-quicklink:hover {
	border-color: var(--th-red);
	color: var(--th-red);
}

/* --------------------------------------------------------------------------
   36. Language switcher
   -------------------------------------------------------------------------- */

.th-langs {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-pill);
	background: var(--th-bg-soft);
	flex: none;
}

.th-lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0 12px;
	border-radius: var(--th-r-pill);
	font-family: var(--th-font-head);
	font-size: 13px;
	font-weight: 600;
	color: var(--th-muted);
	white-space: nowrap;
}

.th-lang:hover {
	color: var(--th-red);
}

.th-lang.is-on {
	background: #fff;
	color: var(--th-ink);
	box-shadow: var(--th-sh-xs);
}

.th-langs--list {
	display: grid;
	grid-auto-flow: column;
	width: 100%;
	border-radius: var(--th-r);
	padding: 4px;
}

.th-langs--list .th-lang {
	min-height: 42px;
	border-radius: var(--th-r-sm);
	font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   37. Temple timings
   -------------------------------------------------------------------------- */

.th-timecards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.th-timecard {
	padding: 16px 18px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.th-timecard__label {
	font-family: var(--th-font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--th-muted);
}

.th-timecard__value {
	font-family: var(--th-font-head);
	font-size: 21px;
	font-weight: 750;
	color: var(--th-ink);
	line-height: 1.2;
}

.th-timecard--open {
	border-color: #c9e4d5;
	background: var(--th-green-soft);
}

.th-timecard--open .th-timecard__value { color: var(--th-green-dark); }
.th-timecard--open .th-timecard__label { color: var(--th-green-dark); opacity: .8; }

.th-timecard--close {
	border-color: #f2d7d9;
	background: var(--th-red-tint);
}

.th-timecard--close .th-timecard__value { color: var(--th-red-dark); }
.th-timecard--close .th-timecard__label { color: var(--th-red-dark); opacity: .8; }

.th-timecard--break {
	border-color: #eedcb6;
	background: var(--th-gold-soft);
}

.th-timecard--break .th-timecard__value {
	color: var(--th-gold-dark);
	font-size: 16px;
}

.th-timecard--break .th-timecard__label { color: var(--th-gold-dark); opacity: .85; }

.th-timecard--status .th-timecard__value {
	font-size: 15px;
}

.th-sub {
	font-family: var(--th-font-head);
	font-size: 16px;
	font-weight: 700;
	color: var(--th-ink);
	margin: 26px 0 12px;
}

/* --------------------------------------------------------------------------
   38. Poojas & Sevas
   -------------------------------------------------------------------------- */

.th-poojahead {
	padding-block: 24px;
	background: linear-gradient(145deg, var(--th-gold-soft), #fff 62%);
	border-bottom: 1px solid var(--th-line);
}

.th-poojahead .th-eyebrow {
	color: var(--th-gold-dark);
}

.th-poojahead .th-eyebrow::before {
	background: var(--th-gold-dark);
}

.th-costbox {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 16px;
	padding: 18px 20px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
	margin-bottom: 20px;
}

.th-costbox__price {
	font-family: var(--th-font-head);
	font-size: 30px;
	font-weight: 800;
	color: var(--th-ink);
	line-height: 1;
}

.th-costbox__note {
	font-size: 13.5px;
	color: var(--th-muted);
}

.th-costbox__free {
	font-family: var(--th-font-head);
	font-size: 22px;
	font-weight: 750;
	color: var(--th-green-dark);
}

/* Linked temple strip on a pooja page */
.th-linked {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: var(--th-bg-soft);
}

.th-linked img {
	width: 56px;
	height: 56px;
	border-radius: var(--th-r-sm);
	object-fit: cover;
	flex: none;
}

.th-linked__label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--th-muted);
	display: block;
	margin-bottom: 2px;
}

.th-linked__name {
	font-family: var(--th-font-head);
	font-size: 16px;
	font-weight: 700;
	color: var(--th-ink);
	margin: 0;
}

.th-linked__name a:hover {
	color: var(--th-red);
}

/* --------------------------------------------------------------------------
   39. Homepage pieces
   -------------------------------------------------------------------------- */

/* A quieter hero than v2 — type-led, generous, no heavy image overlay */
.th-hero2 {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1100px 420px at 12% -10%, var(--th-red-tint), transparent 62%),
		radial-gradient(900px 400px at 92% 0%, var(--th-gold-soft), transparent 58%),
		#fff;
	border-bottom: 1px solid var(--th-line);
}

.th-hero2__in {
	position: relative;
	z-index: 2;
	padding-block: clamp(40px, 6vw, 78px);
	text-align: center;
}

.th-hero2 h1 {
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.1;
	margin-bottom: 14px;
	letter-spacing: -.025em;
}

.th-hero2 h1 em {
	font-style: normal;
	color: var(--th-red);
}

.th-hero2__sub {
	font-size: clamp(15.5px, 1.6vw, 18px);
	color: var(--th-muted);
	max-width: 620px;
	margin: 0 auto 30px;
}

.th-hero2 .th-usearch {
	max-width: 940px;
	margin-inline: auto;
	text-align: left;
}

.th-hero2__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}

.th-hero2__chips .th-chip {
	background: #fff;
}

.th-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 32px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--th-line);
}

.th-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: var(--th-muted);
}

.th-trust__item b {
	font-family: var(--th-font-head);
	font-size: 17px;
	font-weight: 750;
	color: var(--th-ink);
}

.th-trust__item svg {
	width: 16px;
	height: 16px;
	color: var(--th-green);
}

/* Category tiles, calmer than v2 */
.th-cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
	gap: 12px;
}

.th-cat {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 15px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
	min-height: 64px;
	transition: border-color .16s var(--th-ease), transform .16s var(--th-ease), box-shadow .16s var(--th-ease);
}

.th-cat:hover {
	border-color: var(--th-red);
	transform: translateY(-2px);
	box-shadow: var(--th-sh);
}

.th-cat__icon {
	width: 38px;
	height: 38px;
	border-radius: var(--th-r-sm);
	display: grid;
	place-items: center;
	background: var(--th-red-tint);
	color: var(--th-red);
	flex: none;
}

.th-cat__icon svg {
	width: 19px;
	height: 19px;
}

.th-cat__name {
	font-family: var(--th-font-head);
	font-size: 14px;
	font-weight: 650;
	color: var(--th-ink);
	line-height: 1.3;
}

.th-cat__n {
	display: block;
	font-size: 11.5px;
	font-weight: 450;
	color: var(--th-muted);
}

/* Two-up feature band */
.th-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 860px) {
	.th-duo {
		grid-template-columns: minmax(0, 1fr);
	}
}

.th-promo {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	min-height: 220px;
	padding: 26px;
	border-radius: var(--th-r-lg);
	border: 1px solid var(--th-line);
	background: linear-gradient(140deg, var(--th-red-tint), #fff 60%);
}

.th-promo--gold {
	background: linear-gradient(140deg, var(--th-gold-soft), #fff 60%);
}

.th-promo h3 {
	font-size: 22px;
	margin: 0;
}

.th-promo p {
	color: var(--th-muted);
	font-size: 14.5px;
	margin: 0;
	max-width: 42ch;
}

.th-promo__icon {
	position: absolute;
	top: 22px;
	right: 22px;
	width: 46px;
	height: 46px;
	border-radius: var(--th-r);
	display: grid;
	place-items: center;
	background: #fff;
	color: var(--th-red);
	box-shadow: var(--th-sh-sm);
}

.th-promo--gold .th-promo__icon {
	color: var(--th-gold-dark);
}

.th-promo__icon svg {
	width: 22px;
	height: 22px;
}

/* --------------------------------------------------------------------------
   40. Location pages
   -------------------------------------------------------------------------- */

.th-locgroup + .th-locgroup {
	margin-top: 42px;
}

.th-locgroup__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 20px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--th-line);
}

.th-locgroup__head h2 {
	margin: 0;
	font-size: 22px;
}

.th-locgroup__n {
	font-size: 13.5px;
	color: var(--th-muted);
}

/* --------------------------------------------------------------------------
   41. v3 header
   -------------------------------------------------------------------------- */

/*
 * One row on desktop: brand, navigation, actions. v2 carried a second nav row
 * and a header search field; both are gone — the nav sits inline and search
 * moved to the hero, the results page and the mobile overlay, which is where
 * people actually use it.
 */
.th-header__in {
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 26px;
	min-height: 70px;
}

.th-mainnav {
	min-width: 0;
	display: flex;
	justify-content: center;
}

.th-mainnav .th-menu {
	flex-wrap: nowrap;
	overflow: visible;
}

.th-mainnav .th-menu > li > a {
	font-size: 15px;
	padding: 10px 12px;
}

@media (max-width: 1100px) {
	.th-mainnav .th-menu > li > a {
		padding-inline: 9px;
		font-size: 14.5px;
	}

	.th-header__in {
		gap: 16px;
	}
}

@media (max-width: 1024px) {
	.th-mainnav {
		display: none;
	}

	.th-header__in {
		grid-template-columns: auto 1fr auto;
		min-height: 62px;
		gap: 10px;
	}
}

.th-iconbtn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-sm);
	background: #fff;
	color: var(--th-ink);
	flex: none;
}

.th-iconbtn:hover {
	border-color: var(--th-red);
	color: var(--th-red);
}

.th-iconbtn svg {
	width: 19px;
	height: 19px;
}

/* Breakpoint helpers tied to the nav collapse, not the generic mobile one */
.th-compact-only { display: none; }

@media (max-width: 1024px) {
	.th-compact-only { display: grid; }
	.th-wide-only { display: none !important; }
	.th-hactions .th-btn span { display: none; }
	.th-hactions .th-btn { padding-inline: 13px; }
	.th-langs { display: none; }
}

@media (max-width: 420px) {
	.th-hactions { gap: 6px; }
	.th-iconbtn { width: 38px; height: 38px; }
}

/* --------------------------------------------------------------------------
   42. Logo
   -------------------------------------------------------------------------- */

/*
 * The mark is a full-colour illustration, so it gets no background tile — a
 * coloured plate behind it would fight the logo's own saffron and red.
 */
.th-brand__mark--img {
	width: auto;
	height: 44px;
	background: none;
	border-radius: 0;
	object-fit: contain;
	flex: none;
}

@media (max-width: 600px) {
	.th-brand__mark--img { height: 38px; }
}

.th-footer .th-brand__mark--img { height: 48px; }

/* The wordmark picks up the logo's deep green for its tagline */
.th-brand__tag {
	color: var(--th-green);
	font-weight: 550;
}

/* --------------------------------------------------------------------------
   43. Devotional store (affiliate)
   -------------------------------------------------------------------------- */

/* Product shots are usually cut-outs on white, so they get padding and a
   neutral plate rather than the edge-to-edge crop used for photography. */
.th-card__media--pad {
	aspect-ratio: 1;
	background: var(--th-bg-soft);
	padding: 14px;
	display: grid;
	place-items: center;
}

.th-card__media--pad img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.th-card--product .th-card__foot {
	align-items: flex-end;
}

/* Price, always paired with when it was checked */
.th-price {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.th-price__value {
	font-family: var(--th-font-head);
	font-size: 18px;
	font-weight: 750;
	color: var(--th-ink);
}

.th-price__note {
	font-size: 11px;
	color: var(--th-faint);
}

.th-price--none {
	font-size: 12.5px;
	color: var(--th-muted);
	max-width: 14ch;
}

/* Disclosure. Low-key but never hidden, and never optional. */
.th-disclose {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 15px;
	margin: 16px 0;
	border: 1px solid var(--th-line);
	border-left: 3px solid var(--th-gold);
	border-radius: var(--th-r-sm);
	background: var(--th-gold-soft);
	font-size: 13.5px;
	line-height: 1.55;
	color: #6b4c10;
}

.th-disclose svg {
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 1px;
	color: var(--th-gold-dark);
}

.th-disclose strong {
	display: block;
	color: #5a3f0b;
	font-size: 13px;
}

.th-disclose--compact {
	display: block;
	margin: 0 0 16px;
	padding: 7px 12px;
	font-size: 12.5px;
	border-left-width: 2px;
}

/* Single product header */
.th-prodtop {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 30px;
	align-items: start;
	margin-bottom: 8px;
}

@media (max-width: 820px) {
	.th-prodtop {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

.th-prodtop__media {
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-lg);
	background: var(--th-bg-soft);
	padding: 20px;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
}

.th-prodtop__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.th-prodtop__ph {
	display: grid;
	place-items: center;
	color: var(--th-faint);
}

.th-prodtop__body h1 {
	font-size: clamp(24px, 3.2vw, 34px);
	margin-bottom: 10px;
}

.th-prodtop__lead {
	font-size: 15.5px;
	color: var(--th-muted);
	margin-bottom: 14px;
}

.th-prodtop__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--th-muted);
	margin-bottom: 16px;
}

.th-prodtop__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
}

.th-prodtop__buy .th-price__value {
	font-size: 26px;
}

.th-prodtop__note {
	font-size: 12.5px;
	color: var(--th-muted);
	margin: 10px 0 0;
	line-height: 1.6;
}

.th-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
	margin: 20px 0 0;
}

.th-specs div {
	padding: 11px 13px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-sm);
	background: var(--th-bg-soft);
}

.th-specs dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--th-muted);
	margin-bottom: 3px;
}

.th-specs dd {
	margin: 0;
	font-family: var(--th-font-head);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--th-ink);
}

.th-prodshot {
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: var(--th-bg-soft);
	padding: 10px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.th-prodshot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.th-prodblock {
	padding: 22px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-lg);
	background: var(--th-bg-soft);
	container-type: inline-size;
}

/*
 * The same block appears in a full-width column under an article and in a
 * ~320px sidebar beside a temple. The grid inside it has to answer to its own
 * width, not the window's — at four across in a sidebar the titles wrap to one
 * word per line and the prices fall off the card.
 */
@container (max-width: 420px) {
	.th-prodblock .th-grid,
	.th-prodblock .th-grid--4,
	.th-prodblock .th-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container (min-width: 421px) and (max-width: 700px) {
	.th-prodblock .th-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Browsers without container query support still get a sane sidebar. */
@supports not (container-type: inline-size) {
	.th-sidebar .th-prodblock .th-grid,
	aside .th-prodblock .th-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.th-prodblock .th-block__title {
	font-size: 17px;
}

/* --------------------------------------------------------------------------
   44. Devotional tools
   -------------------------------------------------------------------------- */

.th-tool {
	margin-bottom: 28px;
}

.th-tool__lead {
	font-size: 15px;
	color: var(--th-muted);
	margin-bottom: 18px;
}

/* Tool control bar */
.th-toolbar2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: var(--th-bg-soft);
	margin-bottom: 22px;
}

.th-toolbar2 label {
	font-family: var(--th-font-head);
	font-size: 13.5px;
	font-weight: 650;
	color: var(--th-ink);
}

.th-toolbar2 input[type="date"],
.th-toolbar2 select {
	width: auto;
	min-width: 150px;
	min-height: 42px;
	height: 42px;
	padding-block: 0;
	background: #fff;
}

.th-toolbar2__nav {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

@media (max-width: 640px) {
	.th-toolbar2__nav {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}
}

/* Panchangam header */
.th-pxhead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px 22px;
	padding: 20px 22px;
	border-radius: var(--th-r-lg);
	background: linear-gradient(135deg, var(--th-gold-soft), #fff 60%);
	border: 1px solid var(--th-line);
	margin-bottom: 18px;
}

.th-pxhead__date {
	font-family: var(--th-font-head);
	font-size: 21px;
	font-weight: 750;
	color: var(--th-ink);
	margin: 0 0 4px;
}

.th-pxhead__place {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: var(--th-muted);
	margin: 0;
}

.th-pxhead__place svg { width: 15px; height: 15px; }

.th-pxhead__sun {
	display: flex;
	gap: 20px;
	font-size: 13.5px;
	color: var(--th-muted);
}

.th-pxhead__sun b {
	display: block;
	font-family: var(--th-font-head);
	font-size: 17px;
	color: var(--th-ink);
}

/* The five limbs */
.th-pxgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.th-pxcell {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 15px 17px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
}

.th-pxcell__label {
	font-family: var(--th-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--th-muted);
}

.th-pxcell__value {
	font-family: var(--th-font-head);
	font-size: 19px;
	font-weight: 700;
	color: var(--th-ink);
	line-height: 1.25;
}

.th-pxcell__sub {
	font-size: 12.5px;
	color: var(--th-red);
}

.th-pxcell__tag {
	font-size: 11.5px;
	color: var(--th-muted);
}

/* Periods of the day */
.th-kalams {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

.th-kalam {
	padding: 14px 16px;
	border: 1px solid var(--th-line);
	border-left: 3px solid var(--th-line);
	border-radius: var(--th-r-sm);
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.th-kalam--good { border-left-color: var(--th-green); background: var(--th-green-soft); }
.th-kalam--bad  { border-left-color: var(--th-red); background: var(--th-red-tint); }

.th-kalam__name {
	font-family: var(--th-font-head);
	font-size: 14px;
	font-weight: 700;
	color: var(--th-ink);
}

.th-kalam__time {
	font-family: var(--th-font-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--th-ink);
}

.th-kalam--good .th-kalam__time { color: var(--th-green-dark); }
.th-kalam--bad  .th-kalam__time { color: var(--th-red-dark); }

.th-kalam__note {
	font-size: 11.5px;
	color: var(--th-muted);
}

.th-pxcaveat {
	font-size: 13px;
	color: var(--th-muted);
	font-style: normal;
	margin: 16px 0 0;
	padding-left: 12px;
	border-left: 2px solid var(--th-line);
	line-height: 1.6;
}

/* Year calendar */
.th-months {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.th-month {
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
	overflow: hidden;
}

.th-month__name {
	margin: 0;
	padding: 12px 16px;
	font-family: var(--th-font-head);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--th-red);
}

.th-month__days {
	display: grid;
	gap: 1px;
	background: var(--th-line-soft);
}

.th-day {
	display: grid;
	grid-template-columns: 34px 30px 1fr 1fr;
	align-items: baseline;
	gap: 8px;
	padding: 7px 14px;
	background: #fff;
	font-size: 12.5px;
}

.th-day.is-now {
	background: var(--th-gold-soft);
}

.th-day__n {
	font-family: var(--th-font-head);
	font-weight: 750;
	color: var(--th-ink);
	font-size: 13.5px;
}

.th-day__w { color: var(--th-faint); font-size: 11.5px; }
.th-day__t { color: var(--th-body); }
.th-day__k { color: var(--th-muted); }

/* Date lists (Ekadashi, moon days) */
.th-datelist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 10px;
}

.th-dateitem {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 2px 12px;
	align-items: baseline;
	padding: 12px 15px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r-sm);
	background: #fff;
}

.th-dateitem__d {
	grid-row: span 2;
	font-family: var(--th-font-head);
	font-size: 16px;
	font-weight: 750;
	color: var(--th-red);
}

.th-dateitem__w { font-size: 13px; color: var(--th-ink); font-weight: 600; }
.th-dateitem__p { font-size: 12px; color: var(--th-muted); }
.th-dateitem__e { grid-column: 2; font-size: 11.5px; color: var(--th-faint); }

.th-dateitem__p--full { color: var(--th-gold-dark); font-weight: 600; }
.th-dateitem__p--new  { color: var(--th-muted); font-weight: 600; }

/* Calculator result */
.th-result {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px;
	border-radius: var(--th-r-lg);
	background: var(--th-red-tint);
	border: 1px solid var(--th-red-soft);
	text-align: center;
	margin: 20px 0;
}

.th-result__value {
	font-family: var(--th-font-head);
	font-size: 42px;
	font-weight: 800;
	color: var(--th-red-dark);
	line-height: 1;
}

.th-result__value small {
	font-size: 18px;
	font-weight: 600;
}

.th-result__label {
	font-size: 14px;
	color: var(--th-muted);
}

.th-result--small { padding: 16px; }
.th-result--small .th-result__value { font-size: 26px; }

/* Trip planner */
.th-dayplan {
	margin-bottom: 20px;
}

.th-dayplan__title {
	font-family: var(--th-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--th-red);
	margin: 0 0 10px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--th-line);
}

/* Checklists */
.th-checkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.th-checkcard {
	padding: 18px 20px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
}

.th-checkcard__title {
	font-family: var(--th-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--th-ink);
	margin: 0 0 12px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--th-line-soft);
}

.th-checkcard ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.th-checkcard li { margin: 0; }
.th-checkcard .th-check { margin-bottom: 0; padding: 4px 0; }

/* Tool index cards */
.th-toolcard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-r);
	background: #fff;
	transition: border-color .16s var(--th-ease), transform .16s var(--th-ease), box-shadow .16s var(--th-ease);
}

.th-toolcard:hover {
	border-color: var(--th-red);
	transform: translateY(-2px);
	box-shadow: var(--th-sh);
}

.th-toolcard__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--th-r-sm);
	display: grid;
	place-items: center;
	background: var(--th-gold-soft);
	color: var(--th-gold-dark);
	flex: none;
}

.th-toolcard__icon svg { width: 21px; height: 21px; }

.th-toolcard__body { flex: 1 1 auto; min-width: 0; }

.th-toolcard__body b {
	display: block;
	font-family: var(--th-font-head);
	font-size: 15.5px;
	color: var(--th-ink);
	margin-bottom: 3px;
}

.th-toolcard__body span {
	font-size: 13px;
	color: var(--th-muted);
	line-height: 1.5;
}

.th-toolcard__go {
	color: var(--th-faint);
	flex: none;
}

.th-toolcard:hover .th-toolcard__go { color: var(--th-red); }

.th-tripform .th-catpick { max-height: 260px; overflow-y: auto; }