/* =========================================================
   SAKALAM DESIGN SYSTEM
   Brand: saffron #FF8C00 primary, maroon #9C0000 secondary,
   cream #FFFDE9 backgrounds, blue #0E83CD links only.
   Fonts: Poppins (headings) / DM Sans (body) -- enqueue via
   wp_enqueue_style with Google Fonts, or self-host, separately.
   ========================================================= */

:root {
	--sk-primary: #FF8C00;
	--sk-secondary: #9C0000;
	--sk-cream: #FFFDE9;
	--sk-bg: #FCFCFC;
	--sk-link: #0E83CD;
	--sk-text: #2F2F2F;
	--sk-border: #E8E3D5;
}

/* ---------- Horizontal TOC ---------- */
.sk-toc-wrap { width: 100%; max-width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 12px 14px; margin: 0 0 24px; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; }
.sk-toc-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b6a63; flex-shrink: 0; }
.sk-toc-track { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; }
.sk-toc-track::-webkit-scrollbar { display: none; }
.sk-toc-pill { flex-shrink: 0; background: var(--sk-cream); color: #2c2c2a; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; text-decoration: none; white-space: nowrap; }
.sk-toc-pill.is-active { background: var(--sk-secondary); color: #fff; }
.sk-toc-nav { flex-shrink: 0; display: flex; gap: 4px; }
.sk-toc-nav-btn { width: auto; height: auto; border: none; background: none; color: var(--sk-secondary); cursor: pointer; font-size: 20px; font-weight: 700; line-height: 1; padding: 2px 5px; display: inline-flex; align-items: center; justify-content: center; transition: opacity .15s ease; }
.sk-toc-nav-btn:hover { opacity: .6; }
.sk-toc-prev { display: none; }
@media (max-width: 600px) {
	.sk-toc-nav { display: none; }
	.sk-toc-label { display: none; }
}

/* ---------- Section Boxes ---------- */
.sk-section-box { width: 100%; max-width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--sk-border); border-radius: 16px; overflow: hidden; margin: 0 0 18px; }
.sk-section-box-head { background: var(--sk-cream); padding: 14px 20px; border-bottom: 2px solid var(--sk-primary); }
.sk-section-box-head h2 { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: var(--sk-secondary); margin: 0; }
.sk-section-box-body { padding: 18px 20px; }
.sk-section-box-body a { color: var(--sk-link); }
.sk-styled-para { margin: 0 0 14px; line-height: 1.7; color: var(--sk-text); }
.sk-styled-para p { margin: 0 0 14px; }
.sk-styled-para p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
	.sk-section-box-head { padding: 12px 16px; }
	.sk-section-box-head h2 { font-size: 16px; }
	.sk-section-box-body { padding: 14px 16px; }
}

/* ---------- Card-List Styling ---------- */
.sk-card-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; padding: 0; margin: 1.2rem 0; }
.sk-card-list li { background: var(--sk-cream); border: 1px solid var(--sk-primary); border-radius: 12px; padding: 14px 16px; }
.sk-card-list li strong { display: block; color: var(--sk-secondary); font-family: 'Poppins', sans-serif; font-size: 14px; margin-bottom: 4px; }
@media (max-width: 600px) {
	.sk-card-list { grid-template-columns: 1fr; }
}

/* ---------- Responsive Tables ---------- */
.sk-table-scroll { margin: 1.2rem 0; }
.sk-table-scroll table { width: 100%; border-collapse: collapse; background: #fff; }
.sk-table-scroll th, .sk-table-scroll td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee; }
.sk-table-scroll th { background: var(--sk-primary); color: #fff !important; font-weight: 700; border-bottom: none; }
.sk-table-scroll tbody tr:nth-child(even) { background: var(--sk-cream); }
@media (max-width: 600px) {
	.sk-table-scroll thead { display: none; }
	.sk-table-scroll table, .sk-table-scroll tbody, .sk-table-scroll tr, .sk-table-scroll td { display: block; width: 100%; }
	.sk-table-scroll tr { border: 1px solid #eee; border-radius: 10px; margin-bottom: 10px; padding: 4px 12px; }
	.sk-table-scroll td { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f4f2ec; text-align: right; }
	.sk-table-scroll td:last-child { border-bottom: none; }
	.sk-table-scroll td[data-label]::before { content: attr(data-label); font-weight: 700; color: var(--sk-secondary); text-align: left; }
}

/* ---------- Temple & Festival Hero ---------- */
.sk-page-hero { width: 100%; max-width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--sk-border); border-radius: 16px; padding: 18px; display: flex; gap: 18px; align-items: center; margin: 0 0 18px; }
.sk-page-hero-img { width: 38%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--sk-secondary), #5c0000); display: flex; align-items: center; justify-content: center; }
.sk-page-hero-img--compact { aspect-ratio: 16 / 10; }
.sk-page-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-hero-fallback-icon { font-size: 32px; color: #fff; opacity: .9; }
.sk-page-hero-text { flex: 1; min-width: 0; }
.sk-page-hero-tagrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.sk-page-hero-tag { font-size: 11px; color: var(--sk-secondary); font-weight: 700; }
.sk-page-hero-simpletag { font-size: 11px; color: var(--sk-secondary); font-weight: 700; margin: 0 0 6px; }
.sk-open-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.sk-open-badge--open { background: #e7f5e9; color: #2e7d32; }
.sk-open-badge--closed { background: #f4e5e5; color: var(--sk-secondary); }
.sk-open-badge--upcoming { background: #e6f1fb; color: #185fa5; }
.sk-page-hero-title { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 700; color: #2c2c2a; margin: 0 0 5px; }
.sk-page-hero-mantra { font-size: 13px; color: #8a6a2f; font-style: italic; margin: 0 0 2px; }
.sk-page-hero-mantra-iast { font-size: 10px; color: #a08654; margin: 0 0 8px; }
.sk-page-hero-desc { font-size: 12px; color: #6b6a63; line-height: 1.5; margin: 0 0 8px; }
.sk-hero-author-date { font-size: 11px; color: #a89f9f; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #f0eee7; }
.sk-page-hero-facts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: #6b6a63; }
.sk-page-hero-datebadge { display: inline-block; background: #e6f1fb; color: #185fa5; padding: 3px 10px; border-radius: 10px; font-weight: 700; font-size: 12px; }
@media (max-width: 600px) {
	.sk-page-hero { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
	.sk-page-hero-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px 16px 0 0; }
	.sk-page-hero-text { padding: 14px; }
	.sk-page-hero-title { font-size: 17px; }
}

/* ---------- Homa Hero ---------- */
.sk-homa-hero { background: linear-gradient(135deg, var(--sk-secondary), #5c0000); border-radius: 16px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.sk-homa-hero-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.sk-homa-hero-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-homa-hero-icon span { font-size: 26px; }
.sk-homa-hero-deity { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85); letter-spacing: .03em; margin: 0 0 4px; }
.sk-homa-hero-title { font-family: 'Poppins', sans-serif; font-size: 21px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.sk-homa-hero-tagline { font-size: 13px; color: rgba(255,255,255,.85); margin: 0; }
@media (max-width: 600px) {
	.sk-homa-hero { padding: 16px 18px; gap: 12px; }
	.sk-homa-hero-icon { width: 46px; height: 46px; }
	.sk-homa-hero-title { font-size: 18px; }
}

/* ---------- Related Sidebar ---------- */
.sk-content-with-sidebar { width: 100%; max-width: 100%; box-sizing: border-box; display: flex; gap: 28px; align-items: flex-start; }
.sk-content-main { flex: 1; min-width: 0; max-width: 100%; }
.sk-related-sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; }
@media (max-width: 1024px) {
	.sk-content-with-sidebar { flex-direction: column; }
	.sk-related-sidebar { width: 100%; position: static; }
}
.sk-sidebar-deity-card { background: linear-gradient(135deg, var(--sk-secondary), #5c0000); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sk-sidebar-deity-row { display: flex; align-items: center; gap: 10px; }
.sk-sidebar-deity-row + .sk-sidebar-deity-row { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.15); }
.sk-sidebar-deity-icon { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.14); align-items: center; justify-content: center; font-size: 15px; color: #fff; flex-shrink: 0; }
.sk-sidebar-deity-name { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; color: #fff; flex: 1; }
.sk-sidebar-deity-link { flex-shrink: 0; font-size: 11px; color: var(--sk-cream); text-decoration: none; white-space: nowrap; }
.sk-sidebar-deity-link:hover { color: #fff; font-weight: 700; }
.sk-sidebar-block { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 12px 14px; }
.sk-sidebar-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sk-secondary); margin: 0 0 8px; }
.sk-sidebar-item { display: block; padding: 7px 0; border-bottom: 1px solid #f4f2ec; text-decoration: none; }
.sk-sidebar-item:last-child { border-bottom: none; }
.sk-sidebar-item-title { display: block; font-size: 12px; font-weight: 600; color: #2c2c2a; line-height: 1.4; }
.sk-sidebar-item-tag { display: block; font-size: 10px; color: #6b6a63; margin-top: 2px; }

/* ---------- Happening Now/Soon Banner ---------- */
.sk-happening-banner { background: var(--sk-secondary); border-radius: 12px; padding: 12px 18px; color: #fff; font-size: 13px; margin: 0 0 18px; }

/* ---------- Visit This Temple ---------- */
.sk-visit-body { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; }
@media (max-width: 782px) {
	.sk-visit-body { grid-template-columns: 1fr; }
}
.sk-visit-card { background: var(--sk-cream); border-radius: 12px; padding: 14px 16px; }
.sk-visit-card-title { font-size: 13px; font-weight: 700; color: var(--sk-secondary); margin: 0 0 10px; }
.sk-visit-day-label { font-size: 11px; font-weight: 700; color: var(--sk-secondary); margin: 10px 0 4px; }
.sk-visit-day-label:first-of-type { margin-top: 0; }
.sk-visit-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #f4e9d0; font-size: 12px; }
.sk-visit-row:last-of-type { border-bottom: none; }
.sk-visit-label { font-size: 11px; color: #6b6a63; margin: 0 0 2px; }
.sk-visit-value { font-size: 12px; color: #2c2c2a; margin: 0 0 10px; }
.sk-visit-note { border-top: 1px dashed #e5cfa8; margin-top: 8px; padding-top: 8px; font-size: 11px; color: #8a6a2f; font-style: italic; line-height: 1.5; }
.sk-visit-address { font-size: 12px; color: #2c2c2a; line-height: 1.5; margin: 0 0 8px; }
.sk-visit-phone a { font-size: 12px; color: var(--sk-link); text-decoration: none; }
.sk-visit-map { display: flex; flex-direction: column; gap: 8px; }
.sk-visit-map-embed { width: 100%; height: 140px; border: none; border-radius: 12px; }
.sk-directions-btn { display: block; text-align: center; background: var(--sk-primary); color: #fff !important; font-size: 12px; font-weight: 700; padding: 10px; border-radius: 10px; text-decoration: none; }

/* ---------- Forms & Avatars ---------- */
.sk-fa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 1.5rem; }
@media (max-width: 782px) {
	.sk-fa-grid { grid-template-columns: 1fr 1fr; }
}
.sk-fa-card { display: block; background: var(--sk-cream); border: 1px solid var(--sk-primary); border-radius: 12px; padding: 14px; text-decoration: none; text-align: center; }
.sk-fa-name { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; color: var(--sk-secondary); margin: 0 0 6px; }
.sk-fa-mantra { font-size: 13px; color: #2c2c2a; margin: 0 0 3px; }
.sk-fa-iast { font-size: 10px; color: #6b6a63; font-style: italic; margin: 0; }

/* ---------- Related Grid (temple->festival/homa/stotra) ---------- */
.sk-related-heading { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: #2c2c2a; margin: 2rem 0 12px; }
.sk-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 1.5rem; }
@media (max-width: 782px) {
	.sk-related-grid { grid-template-columns: 1fr; }
}

/* ---------- Homepage Sections ---------- */
/* Card width formula and 782px breakpoint taken directly from the
   old site's proven CSS -- flex: 0 0 calc(...) gives an exact,
   predictable width for however many cards should sit per row,
   rather than flex:1's open-ended equal-share approach. */

.sk-home-section { margin: 0 0 40px; width: 100%; max-width: 100%; box-sizing: border-box; }
.sk-home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0; }
.sk-home-section-title { font-family: 'Poppins', sans-serif; font-size: 23px; font-weight: 600; color: var(--sk-secondary); margin: 0 0 4px; }
.sk-home-section-subtitle { font-size: 13px; color: #6b6a63; margin: 0; }
.sk-home-section-subrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 0 16px; }
.sk-home-section-cta { flex-shrink: 0; font-size: 14px; font-weight: 500; color: var(--sk-primary); text-decoration: none; white-space: nowrap; }
.sk-home-section-cta:hover { text-decoration: underline; }
.sk-carousel-empty { font-size: 13px; color: #6b6a63; padding: 16px 0; }

.sk-carousel-track { display: flex; gap: 18px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; max-width: 100%; box-sizing: border-box; padding-top: 12px; margin-top: -12px; }
.sk-carousel-track::-webkit-scrollbar { display: none; }

/* Base: 3 cards per row on desktop, 85% peek on mobile -- proven old-site values */
.sk-carousel-item { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
/* sakalam_archive_card() (used for temple cards site-wide, in both
   grid and carousel contexts) always outputs .sk-archive-item, not
   .sk-carousel-item -- without this, a carousel with only one or
   two cards stretched to fill the available flex space, producing
   wildly inconsistent sizes depending on how many cards happened to
   be in that particular section. Grid contexts (.sk-archive-grid)
   are untouched by this, since this only applies inside a carousel
   track specifically. */
.sk-carousel-track .sk-archive-item { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
@media (max-width: 782px) {
	.sk-carousel-item { flex: 0 0 80%; }
	.sk-carousel-track .sk-archive-item { flex: 0 0 80%; }
	.sk-carousel-track { gap: 12px; }
	.sk-home-section-title { font-size: 18px; }
	.sk-carousel-nav { display: none; } /* hidden on mobile -- swipe + dots instead */
	/* Previously forced a fixed 105px height here, overriding the
	   normal 16:9 ratio -- combined with the card's ~80% viewport
	   width, that created a very short, wide crop window that cut
	   off too much of tall subjects (temple towers, gopurams).
	   Keeping the same ratio as desktop shows a proportional crop
	   instead, so photos stay recognizable on mobile too. */
}

.sk-carousel-dots { display: none; justify-content: center; gap: 7px; margin-top: 12px; }
@media (max-width: 782px) {
	.sk-carousel-dots { display: flex; }
}
.sk-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; border: none; padding: 0; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.sk-carousel-dot.is-active { background: var(--sk-primary); transform: scale(1.3); }
/* Invisible padding extends the dot's tappable area to 44x44 without changing its visual size */
.sk-carousel-dot { position: relative; }
.sk-carousel-dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }

/* Hindu Months: 4 per row on desktop, inherits the 85% mobile peek */
@media (min-width: 783px) {
	.sk-month-item { flex: 0 0 calc((100% - 54px) / 4) !important; }
}

.sk-carousel-nav { display: flex; gap: 6px; flex-shrink: 0; }
.sk-carousel-btn { width: 26px !important; height: 26px !important; min-width: 26px !important; padding: 0 !important; border-radius: 50% !important; border: 1.5px solid var(--sk-primary); background: #fff; color: var(--sk-primary); cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; display: flex !important; align-items: center; justify-content: center; transition: opacity .15s ease; }
.sk-carousel-btn:hover { opacity: .7; }

/* ---------- Temple/Festival/International cards -- badges on image ---------- */
.sk-home-card { display: block; background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; overflow: hidden; text-decoration: none; height: 100%; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: box-shadow .25s ease, transform .25s ease; }
.sk-home-card--current { border: 2px solid var(--sk-primary); box-shadow: 0 0 15px rgba(255,140,0,0.4); }
.sk-home-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.14); transform: translateY(-2px); }
.sk-home-card-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--sk-secondary), #5c0000); overflow: hidden; }
.sk-home-card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sk-home-card-om { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 28px; color: #fff; }
.sk-home-card-badge { position: absolute; top: 10px; background: #fff; color: #2c2c2a; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 20px; border: 1px solid #ccc; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
.sk-home-card-badge-left { left: 10px; }
.sk-home-card-badge-right { right: 10px; }

/* Multi-deity vertical stack -- overrides the single-line badge
   behavior above, since this variant needs to show up to 3 full
   lines, not one truncated line. */
.sk-home-card-deities { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: normal; overflow: visible; text-overflow: clip; max-width: 55%; border-radius: 10px; padding: 5px 9px; }
.sk-home-card-deity-line { line-height: 1.3; white-space: nowrap; }
.sk-coll-order-badge { left: 50%; transform: translateX(-50%); background: var(--sk-primary); color: #fff; border-color: var(--sk-primary); font-weight: 700; }
.sk-home-card-body { display: block; padding: 12px 14px; border-top: 1px solid; border-top-color: color-mix(in srgb, var(--sk-secondary) 15%, transparent); }
.sk-home-card-body-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sk-home-card-region { display: block; font-size: 12px; font-weight: 600; color: #2c2c2a; margin-top: 6px; }
.sk-home-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: var(--sk-secondary); line-height: 1.3; }

.sk-home-card-collections-overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 5px; padding: 18px 8px 8px; background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%); z-index: 2; }
.sk-home-card-collection-pill { display: inline-block; background: var(--sk-cream); color: var(--sk-secondary); font-size: 10px; font-weight: 500; border-radius: 10px; padding: 3px 8px; white-space: nowrap; }
.sk-home-card-collection-more { background: #f0f0f0; color: #6b6a63; }
.sk-home-card-arrow { flex-shrink: 0; color: var(--sk-secondary); font-size: 18px; font-weight: 700; line-height: 1; transition: transform .2s ease; }
.sk-home-card:hover .sk-home-card-arrow { transform: translateX(3px); }

/* ---------- Hindu Month card ---------- */
.sk-month-card { display: block; position: relative; background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 12px 14px 8px; width: 100%; box-sizing: border-box; text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }
.sk-month-card--current { border: 2px solid var(--sk-primary); box-shadow: 0 0 15px rgba(255,140,0,0.4); }
.sk-month-badge-current { position: absolute; top: -9px; left: 16px; background: var(--sk-primary); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.sk-month-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--sk-secondary); text-decoration: none; margin: 0 0 6px; }
.sk-month-row { padding: 5px 0; border-top: 1px solid #f4f2ec; }
.sk-month-row:first-of-type { border-top: none; }
.sk-month-label { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #6b6a63; margin-bottom: 2px; }
.sk-month-badge-now { background: var(--sk-cream); color: var(--sk-primary); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: none; letter-spacing: normal; }
.sk-month-dates { display: block; font-size: 13px; font-weight: 700; color: #2c2c2a; }

/* ---------- Sacred Collections -- horizontal row, slider ---------- */
.sk-coll-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 10px 12px; text-decoration: none; height: 100%; box-sizing: border-box; transition: box-shadow .25s ease, transform .25s ease; }
.sk-coll-row:hover { box-shadow: 0 6px 16px rgba(0,0,0,.10); transform: translateY(-2px); border-color: #ccc; }
.sk-coll-thumb { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--sk-primary); display: flex; align-items: center; justify-content: center; }
.sk-coll-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-coll-thumb-om { font-size: 22px; color: #fff; opacity: .9; }
.sk-coll-info { flex: 1; min-width: 0; }
.sk-coll-name { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; color: var(--sk-secondary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-coll-meta { display: block; font-size: 12px; color: #6b6a63; margin-top: 2px; }
.sk-coll-arrow { flex-shrink: 0; color: var(--sk-primary); opacity: .8; font-size: 16px; }

/* ---------- Religious Fairs -- distinct pattern, kept separate ---------- */

/* ---------- Stotras -- list rows with a small thumbnail ---------- */
.sk-stotra-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 10px 14px; text-decoration: none; height: 100%; box-sizing: border-box; transition: box-shadow .25s ease, transform .25s ease; }
.sk-stotra-row:hover { box-shadow: 0 6px 16px rgba(0,0,0,.10); transform: translateY(-2px); border-color: #ccc; }
.sk-stotra-thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--sk-primary); display: flex; align-items: center; justify-content: center; }
.sk-stotra-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-stotra-thumb-om { font-size: 18px; color: #fff; opacity: .9; }
.sk-stotra-title { flex: 1; min-width: 0; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; color: var(--sk-secondary); line-height: 1.3; }
.sk-stotra-arrow { flex-shrink: 0; color: var(--sk-primary); font-size: 16px; }

.sk-seemore-wrap { text-align: center; margin-top: 18px; }
.sk-seemore-btn { display: inline-block; padding: 11px 26px; background: var(--sk-primary); color: #fff !important; border-radius: 6px; font-weight: 500; font-size: 14px; text-decoration: none; transition: filter .15s ease; }
.sk-seemore-btn:hover { filter: brightness(0.9); }

/* ---------- Hero Slider ---------- */
.sk-hero-wrap { position: relative; width: 100%; border-radius: 14px; overflow: hidden; margin-bottom: 32px; }
.sk-hero-track { display: flex; overflow-x: hidden; scroll-behavior: smooth; }
.sk-hero-slide { position: relative; display: block; flex: 0 0 100%; width: 100%; height: 280px; text-decoration: none; color: inherit; cursor: default; }
a.sk-hero-slide { cursor: pointer; }
.sk-hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-hero-overlay-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.1) 100%); }
.sk-hero-slide-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 32px; }
.sk-hero-slide-text h1 { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 700; color: #fff; margin: 0; text-shadow: 0 2px 6px rgba(0,0,0,.4); max-width: 700px; }
.sk-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.85); color: #2c2c2a; font-size: 20px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; transition: background .15s ease; }
.sk-hero-nav:hover { background: #fff; }
.sk-hero-prev { left: 16px; }
.sk-hero-next { right: 16px; }
.sk-hero-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; z-index: 3; }
.sk-hero-dots .sk-carousel-dot { width: 9px; height: 9px; background: rgba(255,255,255,.5); }
.sk-hero-dots .sk-carousel-dot.is-active { background: #fff; transform: scale(1.3); }

@media (max-width: 782px) {
	.sk-hero-slide { height: 220px; }
	.sk-hero-slide-text { padding: 18px 20px; }
	.sk-hero-slide-text h1 { font-size: 20px; }
	.sk-hero-nav { width: 34px; height: 34px; font-size: 16px; }
}

/* ---------- Festival/Vrat hero -- additional fields below the title ---------- */
.sk-fv-deities { font-size: 13px; font-weight: 600; color: var(--sk-secondary); margin: 0 0 6px; }
.sk-deity-label-line { font-size: 13px; color: #4a4944; margin: 0 0 4px; }
.sk-deity-label-line strong { color: #2c2c2a; font-weight: 700; }
.sk-fv-celebrated { font-size: 13px; color: #4a4944; line-height: 1.5; margin: 0 0 6px; }
.sk-fv-date { font-size: 13px; font-weight: 600; color: #2c2c2a; margin: 0 0 6px; }
.sk-location-intro { font-size: 15px; color: var(--sk-text); line-height: 1.6; margin: 0 0 20px; }
.sk-fv-altnames { font-size: 12px; color: #6b6a63; margin: 0; }

/* ---------- Temple Highlights -- exact spec provided, informational facts not status indicators ---------- */
.sk-temple-highlights { display: flex; flex-wrap: wrap; margin: 0 0 8px; }
.highlight-badge {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  color: #9c0000;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  padding: 4px 12px;
  margin: 0 6px 6px 0;
  text-decoration: none;
}
.highlight-badge:not(.highlight-badge--static):hover {
  border-color: #ff8c00;
  color: #ff8c00;
}

/* ---------- Hindu Month & Stotra heroes -- no image column ---------- */
.sk-page-hero--no-image { align-items: flex-start; }
.sk-fv-altnames-inline { font-size: 14px; font-weight: 400; color: #6b6a63; }
.sk-month-hero-calendars { display: flex; gap: 28px; flex-wrap: wrap; margin: 10px 0 8px; }
.sk-month-hero-cal { max-width: 240px; }
.sk-month-hero-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #6b6a63; margin: 0 0 3px; }
.sk-month-hero-dates { font-size: 14px; font-weight: 700; color: #2c2c2a; margin: 0 0 4px; }
.sk-month-hero-states { font-size: 11px; color: #a89f9f; line-height: 1.4; margin: 0; }

/* ---------- Archive pages ---------- */
.sk-archive-page { width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 0; }
.sk-archive-title { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 700; color: var(--sk-secondary); margin: 0 0 4px; }
.sk-archive-subtitle { font-size: 14px; color: #6b6a63; margin: 0 0 20px; }

.sk-archive-filters,
.sk-archive-collection-jump { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 8px 10px; }
.sk-archive-collection-jump { background: var(--sk-cream); border-color: #f0e5c0; }
.sk-archive-search { flex: 1; min-width: 140px; border: 1px solid #ddd; border-radius: 8px; padding: 5px 10px; font-size: 13px; }
.sk-archive-select { border: 1px solid #ddd; border-radius: 8px; padding: 5px 10px; font-size: 13px; background: #fff; }
.sk-archive-apply-btn { background: var(--sk-secondary); color: #fff; font-size: 13px; font-weight: 600; padding: 5px 14px; border: none; border-radius: 8px; cursor: pointer; }
.sk-archive-reset-btn { background: #fff; color: #6b6a63; font-size: 13px; font-weight: 600; padding: 5px 14px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; }
.sk-archive-reset-btn:hover { background: #f7f5f0; }

@media (max-width: 782px) {
	.sk-archive-filters { justify-content: center; padding: 8px; }
	.sk-archive-search { flex: 1 1 100%; }
}
.sk-archive-collection-label { font-size: 13px; color: #4a4944; white-space: nowrap; }

@media (min-width: 783px) {
	.sk-archive-filter-row { display: flex; gap: 10px; align-items: stretch; }
	.sk-archive-filters { flex: 2; }
	.sk-archive-collection-jump { flex: 1; min-width: 220px; }
}
@media (max-width: 782px) {
	.sk-archive-filter-row { position: sticky; top: 0; z-index: 15; background: #fffdf9; padding: 8px 0; display: flex; flex-direction: column; gap: 8px; }
}

.sk-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.sk-archive-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
@media (max-width: 782px) {
	.sk-archive-list { grid-template-columns: 1fr; }
}
.sk-archive-stotra-row { align-items: flex-start !important; }
.sk-archive-stotra-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 782px) {
	.sk-archive-grid { grid-template-columns: 1fr; }
}
.sk-archive-excerpt { display: block; font-size: 11px; color: #6b6a63; line-height: 1.4; margin-top: 4px; }

.sk-archive-pagination { display: flex; justify-content: center; gap: 6px; margin: 24px 0; }
.sk-archive-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; color: #4a4944; text-decoration: none; }
.sk-archive-pagination .page-numbers.current { background: var(--sk-secondary); color: #fff; border-color: var(--sk-secondary); }

/* ---------- FAQ section -- native details/summary, no JS needed for the accordion ---------- */
.sk-faq-item { border-bottom: 1px solid #f0eee7; padding: 4px 0; }
.sk-faq-item:last-child { border-bottom: none; }
.sk-faq-question { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: var(--sk-secondary); padding: 12px 4px; cursor: pointer; list-style: none; position: relative; padding-right: 28px; }
.sk-faq-question::-webkit-details-marker { display: none; }
.sk-faq-question::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--sk-primary); font-weight: 400; }
.sk-faq-item[open] .sk-faq-question::after { content: '−'; }
.sk-faq-answer { font-size: 13px; color: #4a4944; line-height: 1.6; padding: 0 4px 14px; }
.sk-faq-answer p { margin: 0 0 8px; }
.sk-faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Breadcrumbs ---------- */
.sk-breadcrumbs { font-size: 12px; color: #6b6a63; margin: 0 0 12px; }
.sk-breadcrumbs a { color: #6b6a63; text-decoration: none; }
.sk-breadcrumbs a:hover { text-decoration: underline; }

/* ---------- Fix: clicking a TOC item scrolls the target heading
   underneath the sticky TOC bar, making it unreadable. scroll-margin-top
   tells the browser to stop short of the very top by the sticky bar's
   own height, so the heading lands visibly below it instead. ---------- */
.sk-section-box-head h2[id] { scroll-margin-top: 80px; }

/* ---------- Comments section -- more compact, matching the site's visual language ---------- */
.comments-area { max-width: 100%; margin: 24px 0; padding: 20px; background: #fffdf9; border-radius: 14px; }
.comments-area .comments-title,
.comments-area .comment-reply-title { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--sk-secondary); margin: 0 0 12px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .comment { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.comment-list .comment-body { display: flex; flex-direction: column; gap: 4px; }
.comment-list .comment-author { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.comment-list .comment-author .avatar { width: 28px; height: 28px; border-radius: 50%; }
.comment-list .comment-author .fn { font-weight: 600; color: #2c2c2a; font-style: normal; }
.comment-list .comment-metadata { font-size: 11px; color: #a89f9f; }
.comment-list .comment-content { font-size: 13px; color: #4a4944; line-height: 1.5; margin-top: 4px; }
.comment-list .comment-content p { margin: 0 0 6px; }
.comment-list .reply { margin-top: 4px; }
.comment-list .comment-reply-link { font-size: 11px; font-weight: 600; color: var(--sk-primary); text-decoration: none; }
#respond { margin-top: 16px; }
.comment-form p { margin: 0 0 10px; }
.comment-form label { display: block; font-size: 12px; color: #6b6a63; margin-bottom: 3px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.comment-form textarea { min-height: 90px; }
.comment-form #submit { background: var(--sk-secondary); color: #fff; border: none; border-radius: 8px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; }
.comment-notes, .logged-in-as { font-size: 12px; color: #6b6a63; margin: 0 0 10px; }

/* ---------- Do's and Don'ts ---------- */
.sk-dos-donts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 782px) { .sk-dos-donts-grid { grid-template-columns: 1fr; } }
.sk-dos-donts-heading { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.sk-dos-heading { color: #2e7d32; }
.sk-donts-heading { color: var(--sk-secondary); }
.sk-dos-col ul, .sk-donts-col ul { margin: 0; padding-left: 18px; }
.sk-dos-col li, .sk-donts-col li { font-size: 13px; color: #4a4944; line-height: 1.6; margin-bottom: 4px; }

/* ---------- How to Reach & Must-See Nearby ---------- */
.sk-reach-grid { display: flex; flex-direction: column; gap: 10px; }
.sk-reach-item { display: flex; gap: 8px; font-size: 13px; }
.sk-reach-label { font-weight: 600; color: var(--sk-secondary); min-width: 70px; }
.sk-reach-value { color: #4a4944; }

.sk-plan-visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sk-plan-visit-item { display: flex; flex-direction: column; gap: 2px; }
.sk-plan-visit-label { font-size: 12px; color: #8a8378; text-transform: uppercase; letter-spacing: .3px; }
.sk-plan-visit-value { font-size: 14px; font-weight: 700; color: var(--sk-text); }

@media (max-width: 480px) {
	.sk-plan-visit-grid { grid-template-columns: 1fr; }
}
.sk-nearby-list { margin: 0; padding-left: 18px; }
.sk-nearby-list li { font-size: 13px; color: #4a4944; line-height: 1.6; margin-bottom: 4px; }
.sk-nearby-distance { color: #a89f9f; font-size: 12px; }

/* ---------- Near Me button ---------- */
.sk-archive-nearme-btn { background: #fff; border: 1px solid var(--sk-secondary); color: var(--sk-secondary); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 8px; cursor: pointer; }
#sk-state-geolocate-btn { display: block; margin: 0 0 12px; }
.sk-archive-nearme-btn:hover { background: var(--sk-cream); }

/* ---------- Trust Strip -- card design with icon circle and ribbon-tail shape ---------- */
.sk-trust-strip { margin: 0 0 28px; }

.sk-trust-icon { display: block; font-size: 30px; line-height: 1; margin: 0 auto 10px; }
.sk-trust-stat { display: block; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px; color: var(--sk-secondary); line-height: 1.2; }
.sk-trust-label { display: block; font-size: 12px; font-weight: 700; color: var(--sk-text); margin-top: 4px; line-height: 1.4; }

.sk-trust-strip-desktop { display: none; gap: 18px; justify-content: center; }
.sk-trust-card {
	position: relative;
	background: var(--sk-cream);
	border: 1px solid var(--sk-border);
	border-radius: 16px 16px 4px 4px;
	padding: 22px 18px 26px;
	text-align: center;
	flex: 1 1 0;
	max-width: 220px;
}
/* Ribbon-tail notch at the bottom, same silhouette as the reference
   image, built with a CSS triangle rather than a complex clip-path
   so it stays simple and well-supported. */
.sk-trust-card::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 10px solid var(--sk-cream);
}

.sk-trust-strip-mobile { display: block; }
.sk-trust-mobile-track { display: flex; overflow: hidden; }
.sk-trust-mobile-slide {
	position: relative;
	flex: 0 0 100%;
	background: var(--sk-cream);
	border: 1px solid var(--sk-border);
	border-radius: 16px 16px 4px 4px;
	padding: 18px 14px 22px;
	text-align: center;
}
.sk-trust-mobile-slide::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 10px solid var(--sk-cream);
}
.sk-trust-mobile-dots { display: flex; justify-content: center; gap: 5px; margin-top: 16px; }
.sk-trust-mobile-dots .sk-carousel-dot { width: 5px; height: 5px; }

@media (min-width: 783px) {
	.sk-trust-strip-desktop { display: flex; }
	.sk-trust-strip-mobile { display: none; }
}

/* ---------- Darshan & Entry Options ---------- */
.sk-darshan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.sk-darshan-item { background: #fffdf9; border: 1px solid #eee; border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
.sk-darshan-type { font-size: 13px; font-weight: 600; color: #2c2c2a; }
.sk-darshan-fee { font-size: 13px; color: var(--sk-secondary); font-weight: 700; }

/* ---------- Archive intro content + Read More ---------- */
.sk-archive-intro { font-size: 14px; color: #4a4944; line-height: 1.7; margin: 0 0 20px; }
.sk-archive-intro p { margin: 0 0 10px; }
.sk-archive-intro--collapsible .sk-archive-intro-content { max-height: 90px; overflow: hidden; position: relative; }
.sk-archive-intro--collapsible.is-expanded .sk-archive-intro-content { max-height: none; }
.sk-archive-intro--collapsible:not(.is-expanded) .sk-archive-intro-content::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: linear-gradient(transparent, #fff); }
.sk-archive-readmore-btn { background: none; border: none; color: var(--sk-primary); font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 0; }

/* ---------- Deity page Read More -- JS hides/shows direct-child
   sections of .sk-deity-content-wrap directly, so no CSS-based
   collapse rule is needed here; this only styles the button itself.
   Starts hidden via inline style set in PHP-adjacent markup logic;
   JS reveals it only when there's actually more than 2 sections to
   expand, so a page with 2 or fewer sections never shows a
   non-functional button. ---------- */
.sk-deity-readmore-btn {
	display: none;
	width: fit-content;
	margin: 16px auto 0;
	background: var(--sk-secondary);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 28px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
}
.sk-deity-readmore-btn:hover { opacity: 0.9; }

/* ---------- Location hero -- small circular Om icon, no hero image ---------- */
.sk-location-hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--sk-secondary), #5c0000); color: #fff; font-size: 16px; margin-right: 10px; vertical-align: middle; }

/* ---------- Load More button -- Deity/Location temple lists ---------- */
.sk-load-more-btn { display: block; width: fit-content; margin: 16px auto 0; background: var(--sk-secondary); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 28px; border: none; border-radius: 999px; cursor: pointer; }
.sk-load-more-btn:hover { opacity: 0.9; }
.sk-load-more-btn:disabled { opacity: 0.6; cursor: default; }

/* ---------- Reviews ---------- */
.sk-review-card { background: var(--sk-cream); border: 1px solid var(--sk-border); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.sk-review-stars { color: #E8A317; font-size: 16px; letter-spacing: 2px; margin-bottom: 10px; }
.sk-review-text { font-size: 14px; color: var(--sk-text); line-height: 1.6; flex-grow: 1; margin: 0 0 14px; font-style: italic; }
.sk-review-author { font-size: 14px; font-weight: 700; color: var(--sk-secondary); margin: 0; }
.sk-review-place { display: block; font-size: 12px; font-weight: 500; color: #6b6a63; margin-top: 2px; }

/* ---------- Social share buttons ---------- */
.sk-share-row { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.sk-share-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; color: #8a8378; cursor: pointer; text-decoration: none; transition: color .2s ease; }
.sk-share-btn:hover { color: var(--sk-secondary); }
.sk-share-whatsapp { color: #25D366 !important; } /* WhatsApp's own brand green, not the shared muted gray */
.sk-share-whatsapp:hover { color: #1DA851 !important; }
.sk-share-whatsapp svg { width: 21px; height: 21px; } /* slightly larger than the other two */
.sk-share-row-hero .sk-share-whatsapp svg { width: 17px; height: 17px; }
.sk-share-copied-msg { font-size: 11px; color: var(--sk-secondary); font-weight: 600; }
.sk-share-row-hero { margin-left: 12px; padding-left: 12px; border-left: 1px solid #e5e0d5; }
.sk-share-row-hero svg { width: 14px; height: 14px; }
.sk-share-row-bottom-wrap { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid #f0eee7; text-align: center; }
.sk-share-row-bottom-wrap .sk-share-row { gap: 16px; }

/* ---------- Homa booking widget ---------- */
.sk-homa-booking-box .sk-section-box-body { text-align: center; padding: 24px; }
.sk-homa-booking-box .quantity, .sk-seva-modal-form-wrap .quantity { display: none; } /* quantity doesn't apply to a booking with its own specific personal details -- scoped to these two booking contexts only */

/* ---------- Booking form fields -- shared by the embedded Homa widget and the popup modal ---------- */
.sk-homa-booking-box form.cart, .sk-seva-modal-form-wrap form.cart { text-align: left; }
.sk-puja-booking-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.sk-puja-booking-fields .form-row { margin: 0; }
.sk-puja-booking-fields label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sk-text); margin-bottom: 4px; }
.sk-field-icon { display: inline-flex; color: var(--sk-primary); flex-shrink: 0; }
.sk-puja-booking-fields label .required { color: var(--sk-secondary); margin-left: -2px; }
.sk-puja-booking-fields input.input-text, .sk-puja-booking-fields textarea.input-text { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid #e8e4d9; border-radius: 10px; font-size: 14px; color: var(--sk-text); background: #faf8f3; transition: border-color .2s ease; font-family: inherit; }
.sk-puja-booking-fields textarea.input-text { resize: none; min-height: 50px; }
.sk-puja-booking-fields input.input-text:focus, .sk-puja-booking-fields textarea.input-text:focus { outline: none; border-color: var(--sk-secondary); background: #fff; }
.sk-puja-booking-fields input.input-text::placeholder, .sk-puja-booking-fields textarea.input-text::placeholder { color: #b3ada0; }

.sk-homa-booking-box .single_add_to_cart_button, .sk-seva-modal-form-wrap .single_add_to_cart_button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--sk-primary); color: #fff; font-size: 16px; font-weight: 700; padding: 13px; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 3px 10px rgba(255,140,0,.3); transition: opacity .2s ease, transform .15s ease; }
.sk-homa-booking-box .single_add_to_cart_button::after, .sk-seva-modal-form-wrap .single_add_to_cart_button::after { content: '\2192'; font-size: 16px; }
.sk-homa-booking-box .single_add_to_cart_button:hover, .sk-seva-modal-form-wrap .single_add_to_cart_button:hover { opacity: 0.92; transform: translateY(-1px); }
.sk-homa-booking-box .single_add_to_cart_button:disabled, .sk-seva-modal-form-wrap .single_add_to_cart_button:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

/* Trust message -- reassurance text just below the button, right
   before the moment someone might hesitate about payment. */
.sk-puja-trust-list { list-style: none; margin: 8px 0 0; padding: 0; text-align: left; display: inline-block; }
.sk-puja-trust-list li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5f5e5a; margin-bottom: 4px; line-height: 1.3; }
.sk-puja-trust-check { display: inline-flex; align-items: center; justify-content: center; color: #639922; font-size: 14px; flex-shrink: 0; }
.sk-homa-booking-box .stock { display: block; font-size: 13px; font-weight: 700; color: #b32d2e; margin: -6px 0 14px; }
.sk-seva-modal-form-wrap .stock { display: none; } /* already shown once in the modal's own header band above -- this would otherwise be a duplicate */
.sk-homa-booking-price { font-size: 22px; margin-bottom: 16px; }
.sk-homa-booking-price del { color: #999; font-size: 16px; margin-right: 8px; }
.sk-homa-booking-price ins { text-decoration: none; color: var(--sk-secondary); font-weight: 800; }
.sk-homa-booking-btn { display: inline-block; background: var(--sk-secondary); color: #fff; font-weight: 700; font-size: 15px; padding: 12px 32px; border-radius: 999px; text-decoration: none; transition: opacity .2s ease; }
.sk-homa-booking-btn:hover { opacity: 0.9; color: #fff; }
.sk-puja-schedule { background: var(--sk-cream); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 12px 0; }
.sk-puja-schedule-note { font-size: 13px; color: #6b6a63; }

/* ---------- Site-wide footer announcement ---------- */
.sk-footer-announcement { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: var(--sk-secondary); color: #fff; padding: 12px 44px 12px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 14px; }
.sk-footer-announcement-link { background: #fff; color: var(--sk-secondary); font-weight: 700; padding: 5px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.sk-footer-announcement-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; }
@media (max-width: 600px) {
	.sk-footer-announcement { font-size: 13px; padding: 10px 40px 10px 12px; }
}

/* ---------- Seva booking popup ---------- */
/* ---------- Seva promotional block ---------- */
/* Orange is this site's actual PRIMARY brand color (--sk-primary),
   with maroon as secondary -- this block uses orange as its main
   accent specifically because it deserves to be primary here. A
   white background (not the same cream as surrounding sections)
   plus a layered shadow gives this real embossed depth and makes
   it read as a distinct, separate element rather than blending
   into the article around it. */
.sk-seva-promo {
	background: #fff;
	border: 1px solid #f0d9b5;
	border-top: 4px solid var(--sk-primary);
	border-radius: 14px;
	padding: 24px 22px;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	margin: 24px 0;
	box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.08);
}
.sk-seva-promo-headline { font-size: 19px; font-weight: 800; color: var(--sk-secondary); margin: 0 auto 8px; line-height: 1.35; max-width: 600px; }
.sk-seva-promo-headline-accent { color: var(--sk-primary); }
.sk-seva-promo-subtext { font-size: 14px; color: #4a4a45; margin: 0 auto 18px; line-height: 1.55; max-width: 600px; }

.sk-seva-promo-timer { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.sk-timer-unit { display: flex; flex-direction: column; align-items: center; background: #fff8ee; border: 1px solid #f0d9b5; border-radius: 8px; padding: 7px 11px; min-width: 48px; }
.sk-timer-num { font-size: 19px; font-weight: 800; color: var(--sk-primary); line-height: 1.1; }
.sk-timer-label { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: #8a8378; margin-top: 2px; }
.sk-seva-promo-timer-ended { font-size: 13px; font-weight: 700; color: #b32d2e; }

button.sk-seva-promo-btn, a.sk-seva-promo-btn {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--sk-primary);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	padding: 13px 28px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(255,140,0,.35);
	transition: opacity .2s ease, transform .15s ease;
}
button.sk-seva-promo-btn:hover, a.sk-seva-promo-btn:hover { opacity: 0.92; transform: translateY(-1px); color: #fff; }
button.sk-seva-promo-btn::after, a.sk-seva-promo-btn::after { content: '\2192'; font-size: 15px; }
.sk-seva-promo-price { font-size: 14px; opacity: 0.95; border-left: 1px solid rgba(255,255,255,.5); padding-left: 10px; }
.sk-seva-promo-price del { opacity: 0.75; margin-right: 4px; }
.sk-seva-promo-price ins { text-decoration: none; font-weight: 800; }

@media (max-width: 480px) {
	.sk-seva-promo { padding: 18px 16px; margin: 18px 0; }
	.sk-seva-promo-headline { font-size: 16.5px; }
	.sk-timer-unit { min-width: 40px; padding: 5px 6px; }
	.sk-timer-num { font-size: 16px; }
}

.sk-seva-modal { position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.sk-seva-modal-overlay { position: absolute; inset: 0; background: rgba(20,15,10,.68); }
.sk-seva-modal-box {
	position: relative;
	background: #fff;
	border-radius: 16px;
	max-width: 400px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 4px 8px rgba(0,0,0,.08), 0 20px 48px rgba(0,0,0,.28);
}
.sk-seva-modal-header { background: #fff4e5; padding: 18px 22px 16px; position: relative; border-radius: 16px 16px 0 0; }
.sk-seva-modal-eyebrow { font-size: 12px; font-weight: 700; color: var(--sk-secondary); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 3px; }
.sk-seva-modal-header h3 { margin: 0 0 8px; font-family: 'Poppins', sans-serif; color: var(--sk-secondary); font-size: 19px; }
.sk-seva-modal-price { text-align: left; font-size: 20px; margin-bottom: 8px; }
.sk-seva-modal-price del { color: #999; font-size: 15px; margin-right: 8px; }
.sk-seva-modal-price ins { text-decoration: none; color: var(--sk-secondary); font-weight: 800; }
.sk-seva-modal-header .stock { display: inline-flex; align-items: center; gap: 6px; background: #f7c1c1; color: #501313; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin: 0; }
.sk-seva-modal-close { position: absolute; top: 12px; right: 14px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: none; font-size: 18px; line-height: 1; color: var(--sk-secondary); cursor: pointer; transition: background .2s ease; }
.sk-seva-modal-close:hover { background: #f0e0c0; }
.sk-seva-modal-body { padding: 16px 22px 20px; }
.sk-seva-modal-status { min-height: 18px; font-size: 13px; margin: 10px 0 0; }
.sk-seva-modal-status-error { color: #b32d2e; font-weight: 600; }

/* ---------- Checkout page remove banner ---------- */
.sk-checkout-remove-banner { background: var(--sk-cream); border: 1px solid var(--sk-border); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.sk-checkout-remove-banner-title { font-size: 12px; font-weight: 700; color: var(--sk-text); margin: 0 0 4px; }
.sk-checkout-remove-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; flex-wrap: wrap; }
.sk-checkout-remove-row + .sk-checkout-remove-row { border-top: 1px solid #e5e0d5; }
.sk-checkout-remove-banner-text { font-size: 13px; color: var(--sk-text); }
.sk-checkout-remove-btn { background: none; border: none; color: #b32d2e; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sk-checkout-remove-btn:hover { text-decoration: underline; }
.sk-checkout-remove-btn:disabled { opacity: 0.6; cursor: default; text-decoration: none; }

/* ---------- E-commerce style hero -- Homa/Vrat pages with a linked bookable product ---------- */
.sk-hero-ecommerce { background: #fff; border-radius: 16px; border: 1px solid #f0eee7; padding: 24px; margin-bottom: 24px; }
.sk-hero-ecommerce-title { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 700; color: var(--sk-secondary); margin: 0 0 10px; }
.sk-hero-ecommerce-desc { font-size: 15px; color: #5f5e5a; line-height: 1.6; margin: 0 0 20px; max-width: 640px; }
.sk-hero-gallery { max-width: 480px; margin: 0 0 16px; }
.sk-hero-gallery-main { width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--sk-secondary), #5c0000); }
.sk-hero-gallery-img { width: 100%; height: 100%; object-fit: cover; display: none; position: absolute; inset: 0; }
.sk-hero-gallery-img.active { display: block; }
.sk-hero-gallery-placeholder { width: 100%; height: 100%; }
.sk-hero-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sk-hero-gallery-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e0d5; cursor: pointer; transition: border-color .2s ease; }
.sk-hero-gallery-thumb.active { border: 2px solid var(--sk-primary); }
.sk-hero-ecommerce-buy-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; max-width: 480px; }
.sk-hero-ecommerce-price { font-size: 26px; }
.sk-hero-ecommerce-price del { color: #999; font-size: 15px; margin-right: 8px; }
.sk-hero-ecommerce-price ins { text-decoration: none; color: var(--sk-secondary); font-weight: 800; }
.sk-hero-ecommerce .sk-seva-promo-btn { padding: 12px 26px; white-space: nowrap; }
.sk-hero-ecommerce .stock { display: block; font-size: 12px; font-weight: 700; color: #b32d2e; margin: 10px 0 0; }

.sk-hero-ecommerce-sticky-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; background: #fff; border-top: 1px solid #f0eee7; padding: 12px 16px; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -4px 12px rgba(0,0,0,.08); }
.sk-hero-ecommerce-sticky-bar .sk-hero-ecommerce-price { font-size: 18px; }
.sk-hero-ecommerce-sticky-bar .sk-seva-promo-btn { padding: 10px 22px; font-size: 14px; }

/* Desktop: gallery-left, content-right, matching the originally
   approved mockup. The HTML itself stays in one single order
   (title, description, gallery, meta, timer, buy) which is exactly
   right for mobile's simple top-to-bottom stacking below -- named
   grid areas here just visually reposition those same elements
   into two columns on wider screens, without needing separate
   markup or duplicated content for each screen size. */
@media (min-width: 783px) {
	.sk-hero-ecommerce {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"gallery title"
			"gallery desc"
			"gallery meta"
			"gallery timer"
			"gallery buy"
			"gallery stock";
		column-gap: 32px;
		align-items: start;
	}
	.sk-hero-gallery { grid-area: gallery; max-width: none; margin: 0; }
	.sk-hero-ecommerce-title { grid-area: title; align-self: end; margin-bottom: 6px; }
	.sk-hero-ecommerce-desc { grid-area: desc; max-width: none; }
	.sk-hero-ecommerce .sk-hero-author-date { grid-area: meta; margin-top: 0; }
	.sk-hero-ecommerce .sk-seva-promo-timer { grid-area: timer; justify-content: flex-start; }
	.sk-hero-ecommerce-buy-row { grid-area: buy; max-width: none; }
	.sk-hero-ecommerce .stock { grid-area: stock; margin-top: 4px; }
}

@media (max-width: 782px) {
	.sk-hero-ecommerce { padding: 16px; margin-bottom: 70px; } /* bottom margin makes room so the sticky bar below doesn't overlap the hero's own content */
	.sk-hero-ecommerce-title { font-size: 20px; }
	.sk-hero-ecommerce-buy-row { display: none; } /* replaced by the sticky bottom bar on mobile, so this doesn't show twice */
	.sk-hero-ecommerce-sticky-bar { display: flex; }
}

/* ---------- Pandit registration form ---------- */
.sk-pandit-form { max-width: 520px; }
.sk-pandit-form .form-row { margin-bottom: 16px; }
.sk-pandit-form label { display: block; font-size: 14px; font-weight: 700; color: var(--sk-text); margin-bottom: 6px; }
.sk-pandit-form input[type="text"], .sk-pandit-form input[type="email"], .sk-pandit-form input[type="tel"], .sk-pandit-form textarea { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--sk-border); border-radius: 10px; font-size: 15px; font-family: inherit; }
.sk-pandit-form textarea { resize: vertical; }
.sk-pandit-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sk-pandit-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; background: var(--sk-cream); border: 1px solid var(--sk-border); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.sk-pandit-submit-btn { background: var(--sk-primary); color: #fff; font-size: 16px; font-weight: 700; padding: 13px 32px; border: none; border-radius: 999px; cursor: pointer; }
.sk-pandit-submit-btn:hover { opacity: 0.92; }
.sk-pandit-form-success { background: #eaf3de; color: #27500a; padding: 16px 20px; border-radius: 10px; font-size: 15px; }
.sk-pandit-form-error { background: #fcebeb; color: #791f1f; padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }

/* ---------- Promotional Blocks -- media, counters, footer-sticky wrapper ---------- */
.sk-promo-block { padding: 18px 20px; margin: 16px 0; }
.sk-promo-block .sk-seva-promo-subtext { margin-bottom: 12px; }
.sk-promo-block-has-media { display: flex; align-items: center; gap: 18px; text-align: left; }
.sk-promo-block-has-media .sk-promo-block-media { flex-shrink: 0; margin: 0; width: 100px; height: 100px; max-height: none; }
.sk-promo-block-has-media .sk-promo-block-media img { width: 100px; height: 100px; object-fit: cover; object-position: top center; }
.sk-promo-block-has-media .sk-promo-block-content { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sk-promo-block-text { flex: 1; min-width: 0; }
.sk-promo-block-has-media .sk-seva-promo-headline, .sk-promo-block-has-media .sk-seva-promo-subtext { margin: 0 0 4px; max-width: none; }
.sk-promo-block-has-media .sk-seva-promo-subtext { margin-bottom: 0; }
.sk-promo-block-has-media .sk-seva-promo-btn { display: inline-flex; flex-shrink: 0; }
/* Promotional Blocks specifically get a darker, more neutral
   heading color -- the maroon used elsewhere reads too much like a
   regular content heading (e.g. "Who Should Perform..." on the same
   page uses that same color), so the promotional block risked
   blending into the article rather than standing apart from it. */
.sk-promo-block .sk-seva-promo-headline { color: #2c2c2a; }

.sk-promo-block-media { margin: 0 0 16px; border-radius: 10px; overflow: hidden; max-height: 220px; }
.sk-promo-block-media img { width: 100%; height: 220px; object-fit: cover; object-position: top center; display: block; border-radius: 10px; }
.sk-promo-counters { display: flex; flex-direction: column; gap: 16px; margin: 0 0 18px; }
.sk-promo-counter-item { text-align: left; }
.sk-promo-counter-title { font-size: 15px; font-weight: 700; color: #2c2c2a; margin-bottom: 8px; }
.sk-promo-counter-stats { display: flex; gap: 24px; }
.sk-promo-counter-stat { text-align: left; }
.sk-promo-counter-num { font-size: 22px; font-weight: 800; color: #2c2c2a; font-family: 'Poppins', sans-serif; }
.sk-promo-counter-num-booked { color: var(--sk-secondary); }
.sk-promo-counter-label { font-size: 11px; color: #5f5e5a; text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.sk-promo-counter-bar { background: #f0d9b5; border-radius: 999px; height: 6px; margin-top: 10px; overflow: hidden; }
.sk-promo-counter-bar-fill { background: var(--sk-primary); height: 100%; }

.sk-promo-block-footer-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 997; background: #fff; border-top: 2px solid var(--sk-primary); box-shadow: 0 -6px 16px rgba(0,0,0,.15); padding: 2px 40px 2px 16px; }
.sk-promo-block-footer-close { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: #f1efe8; border: none; font-size: 15px; line-height: 1; color: #5f5e5a; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sk-promo-block-footer-close:hover { background: #f0e0c0; }
.sk-promo-block-footer-sticky .sk-seva-promo { border: none; box-shadow: none; padding: 0; }
.sk-promo-block-footer-sticky .sk-promo-block-content { display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 700px; margin: 0 auto; text-align: left; }
.sk-promo-block-footer-sticky .sk-promo-block-media, .sk-promo-block-footer-sticky .sk-promo-counters { display: none; } /* the sticky bar is deliberately compact -- media and full counter breakdowns belong on the after-hero placement, not a slim persistent strip */
.sk-promo-block-footer-sticky .sk-seva-promo-headline, .sk-promo-block-footer-sticky .sk-seva-promo-subtext { margin: 0; }
.sk-promo-block-footer-sticky .sk-seva-promo-btn { padding: 5px 16px; font-size: 13px; box-shadow: none; flex-shrink: 0; }

@media (max-width: 600px) {
	.sk-promo-block-footer-sticky .sk-promo-block-content { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
	.sk-promo-block-footer-sticky .sk-seva-promo-headline { font-size: 14px; line-height: 1.3; max-width: 280px; }
	.sk-promo-block-has-media { flex-direction: column; text-align: center; }
	.sk-promo-block-has-media .sk-promo-block-media { width: 90px; height: 90px; margin: 0 auto; }
	.sk-promo-block-has-media .sk-promo-block-media img { width: 90px; height: 90px; }
	.sk-promo-block-has-media .sk-promo-block-content { flex-direction: column; align-items: center; gap: 12px; }
}

/* ---------- Donation tiers ---------- */
.sk-donation-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.sk-donation-tier { display: block; border: 1px solid var(--sk-border); border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; transition: border-color .2s ease; }
.sk-donation-tier input { display: none; }
.sk-donation-tier-selected { border: 2px solid var(--sk-primary); background: #fff4e5; }
.sk-donation-tier-label { display: block; font-size: 14px; font-weight: 700; color: var(--sk-text); }
.sk-donation-tier-price { display: block; font-size: 12px; color: #5f5e5a; margin-top: 2px; }
.sk-donation-custom-amount-row label { display: block; font-size: 13px; font-weight: 700; color: var(--sk-text); margin-bottom: 6px; }
.sk-donation-custom-amount-row input { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid #e8e4d9; border-radius: 10px; background: #faf8f3; font-size: 14px; }

@media (max-width: 480px) {
	.sk-donation-tiers { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Temple page additions ---------- */
.sk-temple-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.sk-temple-gallery-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; cursor: pointer; }
.sk-puja-services-table { width: 100%; border-collapse: collapse; }
.sk-puja-services-table th { text-align: left; font-size: 13px; font-weight: 700; color: var(--sk-text); padding: 10px 14px; background: #faf8f3; border-bottom: 2px solid var(--sk-border); }
.sk-puja-services-table td { font-size: 14px; padding: 10px 14px; border-bottom: 1px solid #f0eee7; }
.sk-puja-services-table tr:nth-child(even) td { background: #faf8f3; }
.sk-puja-services-table td:last-child { font-weight: 700; color: var(--sk-secondary); white-space: nowrap; }
.sk-puja-services-online-cta { font-size: 13px; margin: 14px 0 0; }
.sk-puja-services-online-cta a { color: var(--sk-primary); font-weight: 700; }
.sk-facilities-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sk-facilities-list li { font-size: 14px; color: var(--sk-text); }

@media (max-width: 480px) {
	.sk-temple-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Key Dates table (Hindu/Tamil Month pages) ---------- */
.sk-key-dates-table { width: 100%; border-collapse: collapse; }
.sk-key-dates-table th { text-align: left; font-size: 13px; font-weight: 700; color: var(--sk-text); padding: 10px 14px; background: #faf8f3; border-bottom: 2px solid var(--sk-border); }
.sk-key-dates-table td { font-size: 14px; padding: 10px 14px; border-bottom: 1px solid #f0eee7; }
.sk-key-dates-table tr:nth-child(even) td { background: #faf8f3; }
.sk-key-dates-table td:first-child { font-weight: 700; white-space: nowrap; }

/* ---------- Related Sevas booking link ---------- */
.sk-related-seva-book-link { color: var(--sk-primary); font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }
.sk-related-seva-book-link:hover { text-decoration: underline; }

/* ---------- Stotra Print ---------- */
.sk-stotra-actions { margin-top: 10px; }
.sk-stotra-print-btn { background: none; border: 1px solid #e8e4d9; color: #5f5e5a; font-size: 13px; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: border-color .2s, color .2s; }
.sk-stotra-print-btn:hover { border-color: var(--sk-primary); color: var(--sk-primary); }

@media print {
	/* Hide everything except the actual stotra content */
	header, footer, nav, .site-header, .site-footer,
	.sk-page-hero, .sk-toc-wrap, .sk-sidebar, .sk-cross-links,
	.sk-faq-section, .sk-stotra-actions, .sk-promo-block,
	.sk-promo-block-footer-sticky, .sk-section-box-head,
	.sk-share-icons, .sk-breadcrumb, .sk-archive-nearme-btn,
	.highlight-badge, .sk-temple-highlights,
	.comment-respond, .comments-area,
	#wpadminbar, .generate-back-to-top,
	.sk-toc-nav, .sk-carousel-btn { display: none !important; }

	body, .site-content, .inside-article, .entry-content { 
		margin: 0 !important; padding: 10px !important; 
		max-width: 100% !important; font-size: 14pt !important; 
		line-height: 1.6 !important; color: #000 !important;
		background: #fff !important;
	}

	.sk-section-box { border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
	.sk-section-box-body { padding: 0 !important; }
	
	h1, h2, h3 { color: #000 !important; page-break-after: avoid; }
	a { color: #000 !important; text-decoration: none !important; }
	img { max-width: 200px !important; }

	@page { margin: 1.5cm; }
}