/* CA Harsh Gupta — custom homepage, mobile-first, lightweight (no JS deps) */

/* Declared on :root (not just #hg-home) because the footer — the one piece of
   the custom design outside #hg-home — reuses .hg-btn, .hg-card and friends. */
:root {
	--hg-primary: #2f7fa3;
	--hg-accent: #61CE70;
	--hg-whatsapp: #25D366;
	--hg-dark: #1a1a2e;
	--hg-text: #4a4a4a;
	--hg-bg-soft: #F7FBFD;
}

#hg-home {
	font-family: 'Roboto', sans-serif;
	color: var(--hg-text);
	/* clip (not hidden): hidden would make #hg-home a scroll container and
	   silently disable position:sticky for everything inside it. */
	overflow-x: hidden;
	overflow-x: clip;
}

#hg-home .hg-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* .hg-wrap provides the side gutter; Astra pads its container on some templates
   (WooCommerce archives, posts), which doubled the gutter on phones. */
#content .ast-container:has(> #hg-home) { padding-left: 0; padding-right: 0; }

/* ===== Custom header (replaces the old Elementor-HF header entirely) =====
   Two-tier layout: dark navy utility bar (secondary links + social icons)
   above the white main nav row (logo, shopping nav, account/cart). */
.hg-topbar { background: var(--hg-dark); }
.hg-topbar__inner {
	position: relative;
	max-width: 1300px; margin: 0 auto; padding: 12px 20px 10px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hg-topbar__inner::-webkit-scrollbar { display: none; }
.hg-topbar__phone {
	display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
	color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.hg-topbar__links { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; margin: 0 auto; }
.hg-topbar__links a {
	font-family: 'Roboto Slab', serif; color: rgba(255,255,255,.85); text-decoration: none;
	font-size: 19px; font-weight: 600; letter-spacing: .3px; white-space: nowrap;
	padding-bottom: 2px; border-bottom: 1.5px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.hg-topbar__links a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.7); }
.hg-topbar__right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.hg-topbar__track {
	background: #fff; color: var(--hg-dark); text-decoration: none; font-size: 12px; font-weight: 700;
	padding: 6px 14px; border-radius: 5px; white-space: nowrap; transition: background .15s ease;
}
.hg-topbar__track:hover { background: #e9edf2; }
.hg-topbar__social { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.hg-topbar__social a { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); transition: color .15s ease; }
.hg-topbar__social svg { width: 19px; height: 19px; }
.hg-topbar__social a:hover { color: #fff; }

.hg-masthead { position: sticky; top: 0; z-index: 999; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.08); font-family: 'Roboto', sans-serif; }
.hg-masthead__inner { position: relative; max-width: 1300px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 20px; }

.hg-logo { flex: 0 0 auto; display: flex; align-items: center; }
.hg-logo img { max-height: 56px !important; width: auto !important; height: auto !important; display: block; }
.hg-logo span { font-weight: 700; font-size: 18px; color: #20085F; }

.hg-nav { display: flex; align-items: center; justify-content: center; gap: 30px; flex: 1; flex-wrap: nowrap; padding: 0 10px; min-width: 0; }
.hg-nav > a, .hg-nav__drop > a { color: #20085F; text-decoration: none; font-weight: 600; font-size: 17px; white-space: nowrap; padding: 6px 2px; letter-spacing: .2px; }
.hg-nav > a:hover, .hg-nav__drop > a:hover { color: #2f7fa3; }
.hg-nav__drop { position: relative; }
.hg-nav__menu {
	position: absolute; top: 100%; left: 0; background: #fff; min-width: 180px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12); border-radius: 6px; padding: 8px 0;
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .15s ease; z-index: 10;
}
.hg-nav__drop:hover .hg-nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hg-nav__menu a { display: block; padding: 8px 16px; color: #333; font-size: 13px; font-weight: 500; text-decoration: none; }
.hg-nav__menu a:hover { background: #F7FBFD; color: #2f7fa3; }

.hg-masthead__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.hg-btn-account {
	background: var(--hg-dark); color: #fff; font-size: 13px; font-weight: 700;
	padding: 9px 20px; border-radius: 6px; text-decoration: none; white-space: nowrap;
	transition: background .15s ease;
}
.hg-btn-account:hover { background: #2a2a4a; }
.hg-masthead__actions .hg-topbar__track {
	background: transparent; color: var(--hg-dark); font-size: 13px; font-weight: 700;
	padding: 8px 18px; border: 1.5px solid var(--hg-dark); border-radius: 6px;
}
.hg-masthead__actions .hg-topbar__track:hover { background: var(--hg-dark); color: #fff; }
.hg-cart { position: relative; text-decoration: none; color: var(--hg-dark); display: inline-flex; align-items: center; padding: 4px; }
.hg-cart__count { position: absolute; top: -4px; right: -6px; background: #e6413c; color: #fff; font-size: 10px; font-weight: 700; border-radius: 50%; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; line-height: 1; }

.hg-menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; }
.hg-menu-toggle span { display: block; height: 2px; background: #20085F; border-radius: 2px; }

/* The full desktop header needs ~1160px to fit on one line, so anything
   narrower gets the hamburger layout instead of a wrapping/overflowing nav. */
@media (max-width: 1199px) {
	.hg-topbar__inner { padding: 6px 16px; gap: 10px; }
	.hg-topbar__phone { font-size: 11px; }
	.hg-topbar__phone svg { width: 11px; height: 11px; }
	.hg-topbar__links { gap: 14px; }
	.hg-topbar__links a { font-size: 13px; }
	.hg-topbar__right { gap: 10px; }
	.hg-topbar__track { padding: 5px 10px; font-size: 11px; }
	.hg-topbar__social { gap: 8px; }
	.hg-topbar__social svg { width: 13px; height: 13px; }
	.hg-masthead__inner { flex-wrap: wrap; }
	.hg-menu-toggle { display: flex; order: 2; margin-left: auto; }
	.hg-logo { order: 1; }
	.hg-masthead__actions { order: 3; }
	.hg-btn-account { padding: 8px 14px; font-size: 12px; }
	.hg-masthead__actions .hg-topbar__track { padding: 7px 12px; font-size: 11px; }
	.hg-nav {
		order: 4 !important; flex-basis: 100% !important; width: 100% !important;
		flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 2px;
		max-height: 0 !important; overflow: hidden !important; transition: max-height .25s ease;
	}
	.hg-nav.is-open { max-height: 600px !important; padding-top: 10px; }
	.hg-nav > a, .hg-nav__drop { width: 100% !important; }
	.hg-nav__drop > a { display: block; }
	.hg-nav__menu { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; padding-left: 12px; }
	.hg-nav__drop:hover .hg-nav__menu { display: none; }
	.hg-nav__drop.is-open .hg-nav__menu { display: block; }
}
@media (max-width: 480px) {
	.hg-topbar__inner { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; justify-content: center; }
	.hg-topbar__links { flex: 1 1 auto; justify-content: center; flex-wrap: wrap; row-gap: 4px; }
	.hg-topbar__right { flex: 0 0 100%; justify-content: center; order: 3; }
}
@media (min-width: 1200px) {
	.hg-btn-pill { display: flex; }
	/* True-center both header rows on the same axis, independent of how wide
	   the social-icon block / logo+actions blocks are on either side — plain
	   flex centering (justify-content:center within leftover space) drifts
	   off axis whenever the two sides aren't equal width, which is why the
	   top-bar links and main nav previously lined up at different x-positions. */
	.hg-topbar__links {
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
	}
	.hg-topbar__right { margin-left: auto; }
	.hg-masthead__inner { justify-content: space-between; }
	.hg-nav {
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
		flex: 0 0 auto; padding: 0;
	}
}

#hg-home h1, #hg-home h2, #hg-home h3, #hg-home h4 {
	font-family: 'Roboto Slab', serif;
	color: #1a1a1a;
	line-height: 1.25;
	margin: 0 0 16px;
}
#hg-home p { line-height: 1.7; margin: 0 0 16px; }
#hg-home img { max-width: 100%; height: auto; display: block; }
#hg-home a { text-decoration: none; }
#hg-home .hg-section-sub { text-align: center; margin-top: -12px; color: #777; }

/* Buttons */
.hg-btn { display: inline-block; padding: 14px 28px; border-radius: 6px; font-weight: 600; font-size: 16px; text-align: center; transition: transform .15s ease, background .15s ease; }
.hg-btn:active { transform: scale(0.98); }
.hg-btn--primary { background: var(--hg-primary); color: #fff; }
.hg-btn--primary:hover { background: #24647f; color: #fff; }
.hg-blog-carousel__cta .hg-btn--primary { background: var(--hg-dark); }
.hg-blog-carousel__cta .hg-btn--primary:hover { background: #2a2a4a; }
.hg-btn--whatsapp { background: var(--hg-whatsapp); color: #fff; }
.hg-btn--whatsapp:hover { background: #1fb558; color: #fff; }
.hg-btn--lg { padding: 16px 36px; font-size: 18px; }

/* Hero — shared base used by the homepage banner below AND by the About
   page's intro (page-about.php reuses .hg-hero/.hg-hero__media/.hg-badge
   as a plain photo+copy block, no carousel). Keep this part unscoped so
   About keeps working; everything full-bleed-specific lives under the
   .hg-hero--banner modifier further down. */
.hg-hero { padding: 40px 0 28px; background: var(--hg-bg-soft); overflow: hidden; }
.hg-hero__grid { display: flex; flex-direction: column-reverse; gap: 40px; }
.hg-hero h1 { font-size: 28px; }
.hg-hero h1 span { color: var(--hg-primary); }
.hg-hero__lead { font-size: 16px; }
.hg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 480px) {
	.hg-hero__actions { flex-wrap: nowrap; gap: 8px; }
	.hg-hero__actions .hg-btn { flex: 1; padding: 12px 6px; font-size: 13px; white-space: nowrap; }
}
.hg-hero__media { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.hg-hero__media::before {
	content: ''; position: absolute; inset: -6%; z-index: -1;
	background: linear-gradient(135deg, #e3f0f6, #cfe8f2);
	border-radius: 32px;
}
.hg-hero__media img { border-radius: 12px; }

.hg-badge {
	position: absolute;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.15);
	padding: 8px 12px;
	font-weight: 700;
	font-size: 15px;
	color: var(--hg-primary);
	line-height: 1.2;
	text-align: center;
}
.hg-badge span { display: block; font-size: 10px; font-weight: 500; color: #666; text-transform: uppercase; letter-spacing: .3px; }
.hg-badge--tl { top: -10px; left: -10px; }
.hg-badge--tr { top: -10px; right: -10px; }
.hg-badge--bl { bottom: -10px; left: -10px; }
.hg-badge--br { bottom: -10px; right: -10px; }

/* Lightweight fade carousel (vanilla JS, no libraries) — the track/slide/dot
   mechanics are shared, sizing differs per use (currently only the homepage
   banner below uses it, in full-bleed form). */
.hg-carousel { position: relative; overflow: hidden; }
.hg-carousel__track { position: relative; width: 100%; height: 100%; }
/* .hg-carousel__slide is an <a> when that slide has a click-through link,
   or a plain <span> when it doesn't — either way it's the positioned box;
   the <img> inside fills it via height:100%. That only resolves correctly
   if THIS box has an explicit height (not just top/bottom insets) — an
   absolutely-positioned box sized purely by insets has a computed height
   of 'auto', which makes percentage heights on its children indefinite, so
   the <img> was falling back to its own intrinsic (square) aspect ratio
   instead of filling the banner. Both top/left/right/bottom AND height/width
   are needed here. */
.hg-carousel__slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
/* The real cause of the img not filling its box on very wide (2300x622)
   banner photos: #hg-home img { height: auto } below is an ID selector and
   was beating this rule on specificity regardless of source order (same
   issue as the #hg-home h1 color rule elsewhere in this file) — it was
   never a percentage-resolution/positioning problem. #hg-home prefix here
   wins that battle. */
#hg-home .hg-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-carousel__slide.is-active { opacity: 1; }
.hg-carousel__dots { position: absolute; display: flex; gap: 8px; z-index: 5; }
.hg-carousel__dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,0.6); padding: 0; cursor: pointer; }
.hg-carousel__dots button.is-active { background: #fff; width: 22px; border-radius: 5px; transition: width .2s ease; }
.hg-carousel__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
	width: 38px; height: 38px; padding: 0; margin: 0; box-sizing: border-box; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(20,24,40,0.35); border: 1px solid rgba(255,255,255,0.55); color: #fff;
	cursor: pointer; transition: background .2s ease; backdrop-filter: blur(3px);
}
.hg-carousel__arrow svg { width: 20px; height: 20px; display: block; pointer-events: none; }
.hg-carousel__arrow:hover { background: rgba(20,24,40,0.55); }
.hg-carousel__arrow--prev { left: 12px; }
.hg-carousel__arrow--next { right: 12px; }
@media (max-width: 480px) {
	.hg-carousel__arrow { width: 32px; height: 32px; }
	.hg-carousel__arrow svg { width: 17px; height: 17px; }
}

/* ===== Wake Up — full-bleed photo with typewriter headline ===== */
.hg-wake {
	position: relative; overflow: hidden;
	min-height: 220px; display: flex; align-items: center; justify-content: center;
	padding: 28px 16px;
	margin-bottom: 36px;
	background-color: #191919; /* fallback while the photo (set inline via PHP) loads */
	background-position: center center; background-size: cover; background-repeat: no-repeat;
}
.hg-wake__overlay { position: absolute; inset: 0; background: #191919; opacity: 0.83; }
.hg-wake__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; }
.hg-wake__eyebrow {
	color: #fff; font-size: 13px; letter-spacing: 4px; text-transform: uppercase;
	font-weight: 600; margin: 0 0 12px;
}
/* #hg-home prefixed to out-specificity the #hg-home h1,h2,h3,h4 color rule. */
#hg-home .hg-wake__headline {
	margin: 0; color: #fff; font-family: 'Times New Roman', serif; font-weight: 600;
	font-size: 24px; line-height: 1.2;
}
.hg-wake__typed { display: inline-block; min-width: 1ch; }
.hg-wake__cursor { font-weight: 400; margin-left: 2px; animation: hg-wake-blink 1s step-end infinite; }
@keyframes hg-wake-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.hg-wake__ctas {
	display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
	gap: 10px; margin-top: 18px;
}
.hg-wake__btn {
	display: inline-block; white-space: nowrap; text-decoration: none;
	background: #1e4ab8; color: #fff; font-weight: 700; font-size: 12px;
	padding: 10px 16px; border-radius: 100px; border: 2px solid #080808;
	transition: background .2s, transform .2s;
}
.hg-wake__btn--alt { background: transparent; border-color: #fff; }
.hg-wake__btn:hover { background: #163a94; transform: translateY(-1px); color: #fff; }
.hg-wake__btn--alt:hover { background: rgba(255,255,255,0.12); }

@media (min-width: 480px) {
	.hg-wake__btn { font-size: 13px; padding: 11px 22px; border-width: 3px; }
	.hg-wake__ctas { gap: 14px; }
}
@media (min-width: 640px) {
	.hg-wake { min-height: 300px; }
	.hg-wake__headline { font-size: 44px; }
	.hg-wake__eyebrow { font-size: 15px; letter-spacing: 6px; }
}
@media (min-width: 1024px) {
	.hg-wake { min-height: 340px; }
	.hg-wake__eyebrow { font-size: 19px; }
	.hg-wake__headline { font-size: 54px; }
}

/* ===== Homepage hero banner (full-bleed carousel with overlaid text) ===== */
.hg-hero--banner { position: relative; padding: 0; background: var(--hg-dark); overflow: hidden; }
.hg-hero__carousel {
	/* Matches the current hero slides' own 1600x533 canvas at every width,
	   so object-fit:cover never has to crop fixed-position banner
	   text/photos on narrow screens. Update this if the slide images'
	   native aspect ratio ever changes. */
	position: relative; width: 100%;
	aspect-ratio: 1600 / 533;
}
.hg-hero__carousel .hg-carousel__slide img { object-position: center center; }
.hg-hero__carousel .hg-carousel__dots { top: 16px; left: 50%; transform: translateX(-50%); }

.hg-hero__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(12,16,32,.1) 0%, rgba(12,16,32,.35) 45%, rgba(12,16,32,.86) 100%);
}

.hg-hero__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.hg-hero__overlay .hg-wrap { width: 100%; padding-top: 24px; padding-bottom: 28px; }
.hg-hero--banner .hg-hero__copy { max-width: 560px; }
/* #hg-home prefixed to out-specificity the earlier #hg-home h1 { color: #1a1a1a } rule. */
#hg-home .hg-hero--banner .hg-hero__copy h1 { color: #fff; font-size: 26px; margin-bottom: 10px; }
#hg-home .hg-hero--banner .hg-hero__copy h1 span { color: #9fd6ea; }
.hg-hero--banner .hg-hero__lead { color: rgba(255,255,255,.9); font-size: 14px; margin-bottom: 14px; }
.hg-hero--banner .hg-hero__lead strong { color: #fff; }

.hg-hero__stats { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 0 0 18px; }
.hg-hero__stats strong { display: block; font-family: 'Roboto Slab', serif; font-size: 17px; color: #fff; line-height: 1.2; }
.hg-hero__stats span { display: block; font-size: 10px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }

@media (min-width: 640px) {
	.hg-hero--banner .hg-hero__copy h1 { font-size: 34px; }
	.hg-hero--banner .hg-hero__lead { font-size: 16px; }
	.hg-hero__stats strong { font-size: 19px; }
}
@media (min-width: 1024px) {
	.hg-hero__overlay .hg-wrap { padding-bottom: 56px; }
	.hg-hero--banner .hg-hero__copy { max-width: 620px; }
	.hg-hero--banner .hg-hero__copy h1 { font-size: 42px; }
	.hg-carousel__arrow { width: 46px; height: 46px; font-size: 26px; }
	.hg-carousel__arrow--prev { left: 24px; }
	.hg-carousel__arrow--next { right: 24px; }
}

/* Ticker (pure CSS marquee) */
.hg-ticker { background: var(--hg-dark); overflow: hidden; white-space: nowrap; padding: 10px 0; }
.hg-ticker__track { display: inline-flex; animation: hg-scroll 28s linear infinite; }
.hg-ticker__track span { color: #fff; font-size: 13px; font-weight: 600; padding: 0 32px; border-right: 1px solid rgba(255,255,255,.35); }
@keyframes hg-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hg-ticker__track { animation: none; } }

/* ===== New homepage sections (staged for review): About CA Harsh Gupta /
   Batch Details / Result Highlights / Google Reviews — all pure white bg
   with dark-navy accents, per the site's white + dark-navy theme decision. */

/* About CA Harsh Gupta — leads the new sections, right after the ticker. */
.hg-aboutus { padding: 54px 0 48px; background: #fff; }
.hg-aboutus__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.hg-aboutus__photo { position: relative; max-width: 340px; margin: 0 auto; }
.hg-aboutus__photo::before {
	content: ''; position: absolute; top: 22px; left: 22px; right: -22px; bottom: -22px;
	background: var(--hg-dark); border-radius: 22px; z-index: 0;
}
.hg-aboutus__photo img {
	position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
	border-radius: 18px; display: block; border: 6px solid #fff;
	box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}
.hg-aboutus__photo-badge {
	position: absolute; z-index: 2; bottom: -18px; left: 50%; transform: translateX(-50%);
	background: #fff; color: var(--hg-dark); padding: 10px 22px; border-radius: 10px;
	font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 15px; white-space: nowrap;
	text-align: center; box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
.hg-aboutus__photo-badge span { display: block; font-size: 10px; font-weight: 500; color: #777; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.hg-aboutus__eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--hg-primary); margin-bottom: 6px; text-align: center; }
.hg-aboutus__body h2 { font-size: 28px; margin-bottom: 14px; text-align: center; }
.hg-aboutus__body p { font-size: 15px; line-height: 1.75; color: var(--hg-text); margin: 0 0 14px; text-align: center; }
.hg-aboutus__quote {
	position: relative; margin: 18px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--hg-dark);
	font-family: 'Roboto Slab', serif; font-style: italic; font-size: 16px; line-height: 1.6; color: var(--hg-dark); text-align: left;
}
.hg-aboutus__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0; }
.hg-aboutus__stat { background: #fff; border: 1.5px solid var(--hg-dark); border-radius: 10px; padding: 14px 10px; text-align: center; }
.hg-aboutus__stat strong { display: block; font-family: 'Roboto Slab', serif; font-size: 19px; color: var(--hg-dark); line-height: 1.2; }
.hg-aboutus__stat span { display: block; font-size: 11px; color: #667; margin-top: 2px; }
.hg-aboutus__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hg-aboutus__body .hg-btn { display: block; width: fit-content; }
.hg-aboutus__ctas .hg-btn--primary { background: var(--hg-dark); }
.hg-aboutus__ctas .hg-btn--primary:hover { background: #2a2a4a; }

/* Batch Details / Result Highlights — full-bleed carousels, same treatment
   as the hero banner (no .hg-wrap around the carousel itself). */
.hg-promo { padding: 40px 0; background: #fff; }
.hg-promo__head { text-align: center; }
.hg-promo h2 { font-size: 26px; margin-bottom: 20px; }
.hg-promo__carousel .hg-carousel {
	/* Batch Details' banner is a custom 1580x490 build — see the same fix
	   on .hg-hero__carousel above. */
	aspect-ratio: 1580 / 490;
}
.hg-promo--alt .hg-promo__carousel .hg-carousel {
	/* Result Highlights uses the real 1600x533 production banner instead. */
	aspect-ratio: 1600 / 533;
}
.hg-promo--alt .hg-promo__carousel .hg-carousel__slide img { object-position: center center; }

.hg-reviews { padding: 44px 0; background: #fff; text-align: center; }
.hg-reviews h2 { font-size: 26px; }
.hg-reviews__row { position: relative; margin-top: 24px; }
.hg-reviews__scroll {
	display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
	padding: 4px 4px 8px; scrollbar-width: none; text-align: left;
}
.hg-reviews__scroll::-webkit-scrollbar { display: none; }
.hg-review-card {
	flex: 0 0 82%; scroll-snap-align: start;
	background: #fff; border: 1px solid #e7e9eb; border-radius: 10px; padding: 20px; margin: 0;
	box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.hg-review-card p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; color: var(--hg-text); }
.hg-review-card cite { font-style: normal; font-weight: 700; font-size: 13px; color: var(--hg-dark); }

@media (min-width: 700px) {
	.hg-aboutus__grid { grid-template-columns: 340px 1fr; text-align: left; }
	.hg-aboutus__photo { margin: 0; }
	.hg-aboutus__eyebrow, .hg-aboutus__body h2, .hg-aboutus__body p { text-align: left; }
	.hg-aboutus__photo-badge { left: 24px; transform: none; }
	.hg-aboutus__stats { grid-template-columns: repeat(4, 1fr); }
	.hg-aboutus__ctas { justify-content: flex-start; }
	.hg-review-card { flex: 0 0 calc((100% - 32px) / 2.3); }
}
@media (min-width: 1024px) {
	.hg-review-card { flex: 0 0 calc((100% - 48px) / 3.3); }
	.hg-reviews__row .hg-hotsell__arrow--prev { left: -16px; }
	.hg-reviews__row .hg-hotsell__arrow--next { right: -16px; }
}

/* Why us */
.hg-why { padding: 32px 0; background: #fff; }
.hg-why__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.hg-why__item { display: flex; align-items: flex-start; gap: 12px; background: var(--hg-bg-soft); padding: 14px 16px; border-radius: 8px; }
.hg-why__item span { font-size: 22px; }
.hg-why__item p { margin: 0; font-size: 14px; }

/* Browse by category */
.hg-categories { padding: 36px 0 8px; }
.hg-categories h2 { text-align: center; font-size: 26px; margin-bottom: 24px; }
.hg-categories__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hg-cat-tile {
	display: flex; flex-direction: column; gap: 6px;
	background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 18px;
	color: inherit; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.hg-cat-tile:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-2px); border-color: transparent; }
.hg-cat-tile__icon {
	width: 42px; height: 42px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 4px;
}
.hg-cat-tile__icon--book { background: #e9f3f8; color: var(--hg-primary); }
.hg-cat-tile__icon--play { background: #eafbe9; color: #2e9e4f; }
.hg-cat-tile__name { font-weight: 700; font-size: 14px; color: var(--hg-dark); }
.hg-cat-tile__count { font-size: 12px; color: #888; }

/* Pathways */
.hg-pathways { padding: 40px 0; }
.hg-pathways h2 { text-align: center; font-size: 26px; margin-bottom: 6px; }
.hg-pathways__grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
.hg-pathway { display: block; border: 1px solid #e5e5e5; border-radius: 10px; padding: 22px; color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
.hg-pathway:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.1); transform: translateY(-2px); }
.hg-pathway__tag { display: inline-block; background: var(--hg-bg-soft); color: var(--hg-primary); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; margin-bottom: 10px; letter-spacing: .3px; }
.hg-pathway h3 { font-size: 18px; margin-bottom: 8px; }
.hg-pathway p { font-size: 14px; margin-bottom: 10px; }
.hg-pathway__link { color: var(--hg-primary); font-weight: 700; font-size: 14px; }

/* Courses */
.hg-courses { padding: 40px 0; background: var(--hg-bg-soft); }
/* Hot Selling Lectures / Books / New Launch sit back-to-back with the same
   .hg-courses styling — alternate the background so they read as 3 distinct
   sections instead of one long blurred block. */
.hg-hotsell--alt { background: #fff; }
/* Hot Selling Lectures/Books, New Launch: an "indicational" peek carousel —
   deliberately shows a partial next card at the edge as a visual hint that
   there's more, rather than a row of exactly-fitting cards. No native
   scrollbar (arrows + swipe instead), no autoplay — the visitor drives it. */
.hg-hotsell__row { position: relative; }
/* scroll-snap-type (inherited from the base .hg-courses__scroll rule) fights
   the arrow buttons' JS smooth-scroll — the browser's own snap-settling
   can cancel/revert the animated scrollBy(), so disable it here; these rows
   are driven by the arrows (and free swipe on touch), not native snap. */
.hg-hotsell .hg-courses__scroll { scrollbar-width: none; scroll-snap-type: none; }
.hg-hotsell .hg-courses__scroll::-webkit-scrollbar { display: none; }
.hg-hotsell .hg-courses__scroll .hg-card { flex: 0 0 calc((100% - 24px) / 2.5); } /* ~2 full + half of the 3rd */
.hg-hotsell .hg-courses__scroll .hg-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.hg-hotsell__arrow {
	display: none; position: absolute; top: 44%; transform: translateY(-50%); z-index: 3;
	width: 32px; height: 32px; padding: 0; margin: 0; box-sizing: border-box; border-radius: 50%;
	border: 1px solid #dfe6ea; background: #fff; color: var(--hg-dark);
	box-shadow: 0 2px 6px rgba(0,0,0,0.12); cursor: pointer; align-items: center; justify-content: center;
}
.hg-hotsell__arrow svg { width: 16px; height: 16px; display: block; pointer-events: none; }
.hg-hotsell__arrow:hover { border-color: var(--hg-primary); color: var(--hg-primary); }
.hg-hotsell__arrow--prev { left: -4px; }
.hg-hotsell__arrow--next { right: -4px; }
/* Arrows only for mouse users — touch users swipe, same as the blog pills. */
@media (hover: hover) and (pointer: fine) {
	.hg-hotsell__row.can-prev .hg-hotsell__arrow--prev,
	.hg-hotsell__row.can-next .hg-hotsell__arrow--next { display: flex; }
}
.hg-courses h2 { text-align: center; font-size: 26px; margin-bottom: 28px; }
.hg-courses__scroll {
	position: relative;
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 4px 4px 16px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.hg-card {
	/* Contains WooCommerce's absolutely-positioned screen-reader price labels;
	   without it they escape the scroll row and widen the page. The card is
	   the link itself — no separate button, the whole thing goes to the
	   product page, same as shubhamsinghal.com's cards. */
	position: relative;
	flex: 0 0 200px;
	scroll-snap-align: start;
	display: block;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	transition: box-shadow .2s ease, transform .2s ease;
	color: inherit;
	text-decoration: none;
}
.hg-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-2px); }
.hg-card img { width: 200px; height: 200px; object-fit: cover; }
.hg-card__body { padding: 14px; }
.hg-card__body h4 {
	font-size: 15px; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden; line-height: 1.35;
}
.hg-card__body h4 span { display: block; font-size: 12px; font-weight: 400; color: #777; }
.hg-card__badge {
	position: absolute; top: 8px; left: 8px; z-index: 2;
	background: #e6413c; color: #fff; font-size: 10px; font-weight: 700;
	padding: 3px 8px; border-radius: 4px; letter-spacing: .3px; text-transform: uppercase;
}
/* No star ratings on any product card (homepage, post pages, category grids,
   related/up-sell lists), even if a theme or plugin setting turns them on. */
.hg-card .star-rating, .hg-pcard .star-rating, ul.products li.product .star-rating { display: none !important; }
/* Price on one line — a struck-through regular price (if on sale) followed
   by the real price, same as shubhamsinghal.com's cards. Shrinks to fit
   rather than wrap, since variable-product price RANGES ("₹8,999 – ₹9,999")
   run noticeably longer than a single sale price. */
.hg-price { color: var(--hg-primary); font-weight: 700; font-size: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-price .price { white-space: nowrap; }
.hg-price del { font-size: 0.7em; font-weight: 400; color: #9aa6ac; margin-right: 4px; }
.hg-price del .amount { font-size: inherit; }
.hg-price ins { text-decoration: none; }
.hg-courses__cta { text-align: center; margin-top: 8px; }

.hg-courses__filters { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -14px 0 22px; }
.hg-courses__filters a {
	padding: 7px 18px; border-radius: 20px; border: 1px solid #dfe6ea;
	font-size: 13px; font-weight: 600; color: var(--hg-dark); text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.hg-courses__filters a:hover { background: var(--hg-bg-soft); border-color: var(--hg-primary); color: var(--hg-primary); }

/* About / timeline */
.hg-about { padding: 44px 0; background: #fff; }
.hg-about__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.hg-tl-item { display: flex; gap: 14px; margin-bottom: 14px; align-items: baseline; }
.hg-tl-year { flex: 0 0 90px; font-weight: 700; color: var(--hg-primary); font-size: 13px; }
.hg-tl-item p { margin: 0; font-size: 14px; }
.hg-about__quote { font-style: italic; border-left: 3px solid var(--hg-primary); padding-left: 14px; margin-top: 20px; color: #333; }
.hg-about__achievements { background: var(--hg-bg-soft); border-radius: 10px; padding: 24px; }
.hg-about__achievements h3 { font-size: 17px; }
.hg-about__achievements ul { list-style: none; margin: 0; padding: 0; }
.hg-about__achievements li { padding: 8px 0; border-bottom: 1px solid #e5e5e5; font-size: 14px; font-weight: 600; color: #1a1a1a; }
.hg-about__achievements li:last-child { border-bottom: none; }

/* Results */
.hg-results { padding: 36px 0; background: var(--hg-bg-soft); text-align: center; }
.hg-results h2 { font-size: 24px; }
.hg-results__img { border-radius: 10px; margin: 0 auto; }

/* Reviews strip */
.hg-testimonials { padding: 44px 0; background: #fff8e6; text-align: center; }
.hg-testimonials h2 { font-size: 26px; }
.hg-testimonials__row { position: relative; margin-top: 24px; }
/* Auto-advancing carousel — up to 10 reviews, oldest (site copy) first then
   newest Google reviews, cycles continuously via JS (see front-page.php). */
.hg-testimonials__scroll {
	display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch; padding: 4px 4px 8px; text-align: left;
	scrollbar-width: none;
}
.hg-testimonials__scroll::-webkit-scrollbar { display: none; }
.hg-testimonial {
	background: #fff; border-radius: 10px; padding: 20px; margin: 0;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06); flex: 0 0 85%; scroll-snap-align: start;
}
.hg-testimonial p {
	font-size: 14px; font-style: italic; margin: 0 0 10px; color: #333;
	display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.hg-testimonial cite { font-size: 13px; font-weight: 700; font-style: normal; color: var(--hg-primary); }

/* Latest blogs carousel */
.hg-blog-carousel { padding: 40px 0; }
.hg-blog-carousel h2 { text-align: center; font-size: 26px; margin-bottom: 8px; }
.hg-blog-carousel .hg-section-sub { text-align: center; margin-bottom: 28px; }
.hg-blog-carousel__scroll {
	position: relative;
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 4px 4px 16px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.hg-blog-carousel__scroll .hg-blog-card { flex: 0 0 250px; scroll-snap-align: start; }
.hg-blog-carousel__cta { text-align: center; margin-top: 8px; }

/* CTA */
.hg-cta { padding: 48px 0; background: var(--hg-dark); text-align: center; }
#hg-home .hg-cta h2 { color: #fff; font-size: 24px; }
.hg-cta p { color: #d8d8e0; }

/* FunnelKit's floating cart bubble (cart-for-woocommerce plugin) is hidden
   everywhere, on every screen size — the sticky header's own cart icon
   (with its item-count badge) is already on every page, so the floating
   bubble is always redundant, and it would otherwise sit on top of our
   WhatsApp button. The plugin itself is untouched, this is styling only. */
#fkcart-floating-toggler { display: none !important; }

/* Tablet and up */
@media (min-width: 768px) {
	.hg-hero h1 { font-size: 38px; }
	.hg-why__grid { grid-template-columns: repeat(2, 1fr); }
	.hg-categories__grid { grid-template-columns: repeat(3, 1fr); }
	.hg-pathways__grid { grid-template-columns: repeat(2, 1fr); }
	.hg-testimonials__scroll .hg-testimonial { flex: 0 0 calc((100% - 36px) / 2.3); }
	.hg-card { flex-basis: 220px; }
	.hg-card img { width: 220px; height: 220px; }
	.hg-about__grid { grid-template-columns: 2fr 1fr; }
}

/* Desktop */
@media (min-width: 1024px) {
	.hg-hero__grid { flex-direction: row; align-items: center; gap: 72px; }
	.hg-hero__copy { flex: 1; }
	.hg-hero__media { flex: 1.15; max-width: 480px; margin: 0; }
	.hg-hero h1 { font-size: 44px; }
	.hg-why__grid { grid-template-columns: repeat(4, 1fr); }
	.hg-categories__grid { grid-template-columns: repeat(6, 1fr); }
	.hg-blog-carousel__scroll { display: grid; grid-template-columns: repeat(4, 1fr); overflow-x: visible; padding: 4px 4px 8px; }
	.hg-blog-carousel__scroll .hg-blog-card { flex-basis: auto; }
	.hg-courses__scroll { display: grid; grid-template-columns: repeat(5, 1fr); overflow-x: visible; padding: 4px 4px 8px; }
	.hg-courses__scroll .hg-card { flex-basis: auto; }
	.hg-courses__scroll .hg-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
	/* All .hg-hotsell rows (Top Rated Courses/Books, Newly Launched, Featured
	   Courses) stay a real arrow-controlled scroll row at every screen size,
	   not a static grid — overrides the plain .hg-courses__scroll grid above. */
	.hg-hotsell .hg-courses__scroll { display: flex; overflow-x: auto; grid-template-columns: none; }
	.hg-hotsell .hg-courses__scroll .hg-card { flex: 0 0 calc((100% - 56px) / 4.5); } /* ~4 full + half of the 5th */
	.hg-hotsell .hg-courses__scroll .hg-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
	.hg-hotsell__arrow--prev { left: -16px; }
	.hg-hotsell__arrow--next { right: -16px; }
	.hg-testimonials__scroll .hg-testimonial { flex: 0 0 calc((100% - 54px) / 3.3); }
}

/* ===== Blog index page ===== */
.hg-blog-index { padding: 44px 0 60px; }
.hg-blog-index h1 { font-size: 30px; text-align: center; margin-bottom: 8px; }
.hg-blog-index .hg-section-sub { margin-bottom: 24px; }

/* Category pills: a swipeable row. Scrolling happens inside .hg-blog-pills,
   so the page itself never gets wider than the screen. */
.hg-pills { position: relative; margin: 0 0 32px; max-width: 100%; }
.hg-blog-pills {
	position: relative; display: flex; flex-wrap: nowrap; gap: 8px;
	overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px;
}
.hg-blog-pills::-webkit-scrollbar { display: none; }
/* Auto margins centre the row when it fits, and collapse to 0 when it overflows. */
.hg-blog-pills > .hg-blog-pill:first-child { margin-left: auto; }
.hg-blog-pills > .hg-blog-pill:last-child { margin-right: auto; }

.hg-pills::before, .hg-pills::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none; z-index: 1;
	opacity: 0; transition: opacity .2s ease;
}
.hg-pills::before { left: 0; background: linear-gradient(to right, rgb(243,246,246), rgba(243,246,246,0)); }
.hg-pills::after { right: 0; background: linear-gradient(to left, rgb(243,246,246), rgba(243,246,246,0)); }
.hg-pills.can-prev::before, .hg-pills.can-next::after { opacity: 1; }

.hg-pills__arrow {
	display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 32px; height: 32px; border-radius: 50%; border: 1px solid #dfe6ea; background: #fff !important;
	color: var(--hg-dark) !important; font-size: 20px; line-height: 1; padding: 0 0 2px !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12); cursor: pointer;
}
.hg-pills__arrow--prev { left: 0; }
.hg-pills__arrow--next { right: 0; }
.hg-pills__arrow:hover { border-color: var(--hg-primary); color: var(--hg-primary) !important; }
/* Arrows only for mouse users; touch users swipe. */
@media (hover: hover) and (pointer: fine) {
	.hg-pills.can-prev .hg-pills__arrow--prev,
	.hg-pills.can-next .hg-pills__arrow--next { display: flex; align-items: center; justify-content: center; }
}

.hg-blog-pill {
	flex: 0 0 auto; scroll-snap-align: start;
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px;
	border: 1px solid #dfe6ea; background: #fff; color: var(--hg-dark); font-size: 13px; font-weight: 600;
	text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hg-blog-pill span {
	font-size: 11px; font-weight: 700; color: #8a9aa3; background: var(--hg-bg-soft);
	border-radius: 10px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.hg-blog-pill:hover { background: var(--hg-bg-soft); border-color: var(--hg-primary); color: var(--hg-primary); }
.hg-blog-pill.is-active { background: var(--hg-primary); border-color: var(--hg-primary); color: #fff; }
.hg-blog-pill.is-active span { background: rgba(255,255,255,0.22); color: #fff; }

@media (max-width: 480px) {
	.hg-pills { margin-bottom: 24px; }
	.hg-blog-pills { gap: 6px; }
	.hg-blog-pill { padding: 6px 11px; font-size: 12px; }
}

.hg-blog-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.hg-blog-card { display: block; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: box-shadow .2s ease, transform .2s ease; color: inherit; }
.hg-blog-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-2px); }
.hg-blog-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hg-bg-soft); }
.hg-blog-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-blog-card__img--placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #F7FBFD, #e6eef2); }
.hg-blog-card__cat { position: absolute; top: 10px; left: 10px; background: var(--hg-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
.hg-blog-card__body { padding: 16px; }
.hg-blog-card__date { font-size: 12px; color: #999; font-weight: 600; }
.hg-blog-card__body h3 { font-size: 16px; margin: 6px 0 8px; line-height: 1.35; }
.hg-blog-card__body p { font-size: 13px; color: #666; margin: 0 0 10px; line-height: 1.6; }
.hg-blog-card__link { color: var(--hg-dark); font-weight: 700; font-size: 13px; }

.hg-pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; flex-wrap: wrap; }
.hg-page-btn { background: var(--hg-primary); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 20px; border-radius: 6px; text-decoration: none; }
.hg-page-btn:hover { background: #24647f; }
.hg-page-info { font-size: 13px; color: #777; font-weight: 600; }

@media (min-width: 640px) {
	.hg-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.hg-blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Single post ---------- */
#hg-home .hg-post__wrap { max-width: 760px; }

.hg-post { padding: 24px 0 0; }
.hg-post__main { min-width: 0; }

.hg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #8a9aa3; margin-bottom: 14px; }
.hg-crumbs a { color: #6b7c85; text-decoration: none; }
.hg-crumbs a:hover { color: var(--hg-primary); text-decoration: underline; }

.hg-post__cat { position: static; display: inline-block; margin-bottom: 12px; text-decoration: none; }

/* Desktop: TOC in a sidebar. The aside stretches to the article's row height,
   so its sticky inner box can never travel past the end of the article. */
.hg-post__aside { display: none; }
@media (min-width: 1100px) {
	#hg-home .hg-post__wrap { max-width: 1140px; }
	.hg-post__layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; }
	.hg-post__aside { display: block; }
	.hg-post__aside-inner { position: sticky; top: 110px; max-height: calc(100vh - 130px); overflow-y: auto; }
	.hg-toc--inline { display: none; }
}
.hg-toc--side { background: #fff; margin: 0; }
.hg-toc__header--static { cursor: default; }
.hg-toc--side .hg-toc__list { display: block; }
.hg-toc--side .hg-toc__list a.is-current { color: var(--hg-primary); font-weight: 700; }

.hg-post__title { font-size: 28px; line-height: 1.3; margin: 0 0 14px; }

.hg-post__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: #888; font-weight: 600; margin-bottom: 22px; }

.hg-post__thumb { border-radius: 12px; overflow: hidden; margin-bottom: 26px; background: var(--hg-bg-soft); aspect-ratio: 16 / 9; max-height: 260px; }
.hg-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 640px) {
	.hg-post__thumb { max-height: 420px; }
}

/* Table of contents */
.hg-toc { border: 1px solid #e3edf1; border-radius: 12px; background: var(--hg-bg-soft); margin: 0 0 30px; overflow: hidden; }
.hg-toc__header,
.hg-toc__header:hover,
.hg-toc__header:focus,
.hg-toc__header:active {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	background: none !important; border: none; padding: 15px 18px; cursor: pointer;
	font-size: 15px; font-weight: 700; color: var(--hg-dark) !important; font-family: inherit;
	box-shadow: none !important; outline: none;
}
.hg-toc__header:focus-visible { outline: 2px solid var(--hg-primary); outline-offset: -2px; }
.hg-toc__header-label { display: flex; align-items: center; gap: 10px; color: var(--hg-primary); }
.hg-toc__chevron { flex-shrink: 0; transition: transform .25s ease; color: var(--hg-primary); }
.hg-toc.is-open .hg-toc__chevron { transform: rotate(180deg); }

.hg-toc__list { list-style: none; margin: 0; padding: 0 20px 18px; display: none; }
.hg-toc.is-open .hg-toc__list { display: block; }
.hg-toc__list li { margin: 0 0 9px; }
.hg-toc__list a { font-size: 14px; color: var(--hg-text); text-decoration: none; line-height: 1.5; }
.hg-toc__list a:hover { color: var(--hg-primary); text-decoration: underline; }
.hg-toc__sublist { list-style: none; margin: 8px 0 0; padding: 0 0 0 18px; border-left: 2px solid #dfeaf0; }
.hg-toc__sublist li { margin: 0 0 8px; }
.hg-toc__sublist a { font-size: 13px; color: #777; }

@media (min-width: 901px) {
	.hg-toc__header { cursor: default; }
	.hg-toc__chevron { display: none; }
	.hg-toc__list { display: block !important; padding-top: 2px; }
}

/* Post body typography */
.hg-post-content { font-size: 16px; line-height: 1.75; color: var(--hg-text); overflow-wrap: break-word; }
.hg-post-content iframe, .hg-post-content embed, .hg-post-content video { max-width: 100%; }
.hg-post-content h2 { font-size: 22px; line-height: 1.35; margin: 34px 0 14px; color: var(--hg-dark); scroll-margin-top: 90px; }
.hg-post-content h3 { font-size: 18px; line-height: 1.4; margin: 26px 0 12px; color: var(--hg-dark); scroll-margin-top: 90px; }
.hg-post-content p { margin: 0 0 18px; }
.hg-post-content ul, .hg-post-content ol { margin: 0 0 18px; padding-left: 22px; }
.hg-post-content li { margin-bottom: 8px; }
.hg-post-content a { color: var(--hg-primary); }
.hg-post-content img { max-width: 100%; height: auto; border-radius: 8px; }
.hg-post-content blockquote { border-left: 3px solid var(--hg-primary); margin: 20px 0; padding: 4px 0 4px 18px; color: #555; font-style: italic; }
.hg-post-content strong { color: var(--hg-dark); }

.hg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 22px; border-radius: 8px; border: 1px solid #eee; }
.hg-post-content table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 14px; }
.hg-post-content table th, .hg-post-content table td { padding: 10px 14px; border-bottom: 1px solid #eee; text-align: left; white-space: nowrap; }
.hg-post-content table th { background: var(--hg-bg-soft); font-weight: 700; color: var(--hg-dark); }

/* Share row */
.hg-share {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	margin: 36px 0 0; padding: 16px 0; border-top: 1px solid #e3edf1; border-bottom: 1px solid #e3edf1;
}
.hg-share__label { font-size: 14px; font-weight: 700; color: var(--hg-dark); }
.hg-share__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.hg-share__btn,
.hg-share__btn:hover,
.hg-share__btn:focus {
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px;
	font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none;
	border: 1px solid transparent; cursor: pointer; box-shadow: none;
}
.hg-share__btn--wa, .hg-share__btn--wa:hover, .hg-share__btn--wa:focus { background: #e9f9ef !important; color: #1a9e4f !important; }
.hg-share__btn--tg, .hg-share__btn--tg:hover, .hg-share__btn--tg:focus { background: #e8f3fb !important; color: #2a8ac8 !important; }
.hg-share__btn--copy, .hg-share__btn--copy:hover, .hg-share__btn--copy:focus { background: #fff !important; border-color: #dfe6ea !important; color: var(--hg-dark) !important; }
.hg-share__btn:hover { filter: brightness(0.96); }

/* "Learn with" box */
.hg-about-box {
	display: flex; gap: 16px; align-items: flex-start; margin-top: 28px; padding: 20px;
	border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.hg-about-box img { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; object-fit: cover; }
.hg-about-box__body { min-width: 0; }
.hg-about-box__eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #8a9aa3; }
.hg-about-box__name { display: block; font-family: 'Roboto Slab', serif; font-size: 18px; color: var(--hg-dark); margin: 2px 0 6px; }
.hg-about-box p { font-size: 14px; line-height: 1.6; color: var(--hg-text); margin: 0 0 12px; }
.hg-about-box__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hg-about-box__actions .hg-btn { padding: 9px 16px; font-size: 13px; }

/* Previous / next */
.hg-post-nav { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 28px 0 0; }
.hg-post-nav__item {
	display: block; padding: 14px 16px; border-radius: 12px; border: 1px solid #e3edf1; background: #fff;
	text-decoration: none; transition: border-color .15s ease;
}
.hg-post-nav__item:hover { border-color: var(--hg-primary); }
.hg-post-nav__item span { display: block; font-size: 12px; font-weight: 700; color: var(--hg-primary); margin-bottom: 4px; }
.hg-post-nav__item strong {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 14px; line-height: 1.4; color: var(--hg-dark);
}
.hg-post-nav__item--next { text-align: right; }

/* Related posts + courses under the article */
.hg-post-related { padding: 48px 0 8px; }
.hg-post-courses { margin-top: 32px; }
.hg-post-courses h2 { margin-bottom: 24px; }
.hg-card__view { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--hg-primary); }
@media (min-width: 640px) {
	.hg-post-nav { grid-template-columns: 1fr 1fr; }
	.hg-post-nav__item--next:only-child { grid-column: 2; }
}
@media (min-width: 1024px) {
	.hg-post-related .hg-blog-carousel__scroll,
	.hg-post-courses .hg-courses__scroll { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
	.hg-about-box { flex-direction: column; }
	.hg-about-box__actions .hg-btn { flex: 1; }
	.hg-share { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 640px) {
	.hg-post__title { font-size: 34px; }
}

/* ---------- Shop + product category pages (archive-product.php) ---------- */
/* Astra's default body background (#f3f6f6) shows through on these pages
   otherwise — pure white requested instead. */
body.woocommerce-page { background: #fff; }
.hg-shop { padding: 28px 0 60px; }
.hg-shop h1 { font-size: 30px; text-align: center; margin-bottom: 8px; }
.hg-shop .hg-section-sub { margin-bottom: 24px; }
.hg-shop__crumbs { justify-content: center; }

/* ---------- Filter sidebar (Course + Subject checkboxes) ----------
   Mobile/tablet: the sidebar is an off-canvas drawer opened by the
   "Filters" toggle button, over a dimmed backdrop. Desktop (≥960px):
   it's a plain static left column, toggle/backdrop hidden. */
.hg-shop__layout { display: block; }
.hg-shop__filter-toggle {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 16px;
	border: 1.5px solid #dfe6ea; border-radius: 10px; background: #fff; color: var(--hg-dark);
	font-size: 14px; font-weight: 700; cursor: pointer;
}
.hg-shop__filter-toggle:hover { border-color: var(--hg-primary); color: var(--hg-primary); }
.hg-shop__filter-backdrop {
	position: fixed; inset: 0; background: rgba(20,24,40,.45); z-index: 998;
	opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.hg-shop__filter-backdrop.is-open { opacity: 1; pointer-events: auto; }
.hg-shop__sidebar {
	position: fixed; top: 0; bottom: 0; left: 0; z-index: 999; width: 82%; max-width: 320px;
	background: #fff; box-shadow: 2px 0 18px rgba(0,0,0,.15); overflow-y: auto;
	transform: translateX(-105%); transition: transform .25s ease;
}
.hg-shop__sidebar.is-open { transform: translateX(0); }
.hg-shop__sidebar-head {
	display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
	border-bottom: 1px solid #eef1f3; position: sticky; top: 0; background: #fff; z-index: 1;
}
.hg-shop__sidebar-head strong { font-family: 'Roboto Slab', serif; font-size: 17px; color: var(--hg-dark); }
.hg-shop__filter-close { width: 30px; height: 30px; border: none; background: none; font-size: 22px; line-height: 1; color: var(--hg-muted, #888); cursor: pointer; }
.hg-shop__sidebar form { padding: 6px 18px 20px; }
.hg-shop__filter-group { border: none; margin: 0 0 20px; padding: 0; }
.hg-shop__filter-group legend { font-family: 'Roboto Slab', serif; font-size: 15px; font-weight: 700; color: var(--hg-dark); margin-bottom: 10px; padding: 0; }
.hg-shop__filter-option {
	display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 14px; color: var(--hg-text, #4a4a4a); cursor: pointer;
}
.hg-shop__filter-option input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--hg-primary); flex: 0 0 auto; cursor: pointer; }
.hg-shop__filter-option span { margin-left: auto; font-size: 12px; color: var(--hg-muted, #888); }
.hg-shop__filter-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.hg-shop__filter-actions .hg-btn {
	flex: 1 1 auto; padding: 12px 16px; font-size: 14px; border-radius: 10px;
	text-transform: none; letter-spacing: normal; border: none;
}
.hg-shop__filter-clear { font-size: 13px; font-weight: 700; color: var(--hg-muted, #888); white-space: nowrap; }
.hg-shop__filter-clear:hover { color: var(--hg-primary); }

@media (min-width: 960px) {
	.hg-shop__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
	.hg-shop__filter-toggle, .hg-shop__filter-close, .hg-shop__filter-backdrop { display: none; }
	.hg-shop__sidebar {
		position: static; width: auto; max-width: none; box-shadow: none; transform: none;
		border: 1px solid #e3edf1; border-radius: 14px; overflow: visible;
		/* z-index:999 (for stacking above the mobile drawer's backdrop) still
		   applies here even though position is static, because this element
		   is now a CSS grid item (z-index affects grid/flex items regardless
		   of position) — without resetting it, it paints over the theme's
		   sticky header once that becomes fixed on scroll. */
		z-index: auto;
	}
	.hg-shop__sidebar-head { display: none; }
	.hg-shop__sidebar form { padding: 20px; }
}

/* WooCommerce's own notices, result count and sort dropdown, laid out in one row. */
.hg-shop__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; }
.hg-shop__toolbar .woocommerce-notices-wrapper { flex: 0 0 100%; }
.hg-shop__toolbar .woocommerce-notices-wrapper:empty { display: none; }
#hg-home .hg-shop__toolbar .woocommerce-result-count { float: none; margin: 0; font-size: 13px; color: #6b7c85; }
#hg-home .hg-shop__toolbar .woocommerce-ordering { float: none; margin: 0; max-width: 100%; }
.hg-shop__toolbar select.orderby {
	-webkit-appearance: none; appearance: none; max-width: 100%; height: 38px; padding: 0 34px 0 12px;
	border: 1px solid #dfe6ea; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--hg-dark); cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.hg-shop__toolbar select.orderby:focus { border-color: var(--hg-primary); outline: none; }

/* Cards: compact rows on phones, image-on-top cards from 600px. */
.hg-shop__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hg-pcard {
	/* Also contains WooCommerce's absolutely-positioned screen-reader price labels. */
	position: relative;
	display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px;
	background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	transition: box-shadow .2s ease, transform .2s ease;
}
.hg-pcard:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.12); transform: translateY(-2px); }
.hg-pcard__img { position: relative; display: block; align-self: start; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--hg-bg-soft); }
#hg-home .hg-pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.hg-pcard.is-soldout .hg-pcard__img img { opacity: .55; }
.hg-pcard__badge {
	position: absolute; top: 6px; left: 6px; background: #e6413c; color: #fff; font-size: 10px; font-weight: 700;
	padding: 3px 7px; border-radius: 4px; letter-spacing: .3px; text-transform: uppercase;
}
.hg-pcard__badge--out { background: #5d6d75; }
.hg-pcard__body { display: flex; flex-direction: column; min-width: 0; }
#hg-home .hg-pcard__title { font-size: 15px; line-height: 1.35; margin: 0 0 4px; overflow-wrap: anywhere; }
.hg-pcard__title a { color: var(--hg-dark); }
.hg-pcard__title a:hover { color: var(--hg-primary); }
#hg-home .hg-pcard__note { font-size: 12px; line-height: 1.5; color: #7a8a92; margin: 0 0 6px; }
.hg-pcard__price { margin: 0 0 10px; }
#hg-home .hg-pcard__price .price { display: block; margin: 0; color: var(--hg-primary); font-weight: 700; font-size: 16px; line-height: 1.4; }
#hg-home .hg-pcard__price .price del { color: #9aa6ac; font-weight: 400; font-size: 13px; }
#hg-home .hg-pcard__price .price ins { text-decoration: none; }
.hg-pcard__add { margin-top: auto; }
#hg-home .hg-pcard__add .button {
	display: block; width: 100%; margin: 0; padding: 9px 10px; border-radius: 7px; text-align: center;
	background: var(--hg-accent); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; text-transform: none; letter-spacing: 0;
	transition: background .2s ease;
}
#hg-home .hg-pcard__add .button:hover { background: #4fb85f; color: #fff; }
#hg-home .hg-pcard.is-soldout .hg-pcard__add .button { background: #eef3f5; color: var(--hg-dark); }
#hg-home .hg-pcard__add .button.added::after { content: ' ✓'; font-family: inherit; margin: 0; }
#hg-home .hg-pcard__add .added_to_cart { display: block; margin-top: 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--hg-primary); }

/* WooCommerce pagination */
#hg-home .woocommerce-pagination { margin-top: 36px; text-align: center; }
#hg-home .woocommerce-pagination ul.page-numbers { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; border: 0; white-space: normal; }
#hg-home .woocommerce-pagination ul.page-numbers li { float: none; border: 0; overflow: visible; }
#hg-home .woocommerce-pagination .page-numbers a,
#hg-home .woocommerce-pagination .page-numbers span {
	display: flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
	border: 1px solid #dfe6ea; border-radius: 8px; background: #fff; color: var(--hg-dark); font-size: 14px; font-weight: 600;
}
#hg-home .woocommerce-pagination .page-numbers a:hover { border-color: var(--hg-primary); color: var(--hg-primary); background: var(--hg-bg-soft); }
#hg-home .woocommerce-pagination .page-numbers span.current { background: var(--hg-primary); border-color: var(--hg-primary); color: #fff; }

/* "Need help choosing?" box under the grid */
.hg-shop-help { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; padding: 20px; border-radius: 14px; background: #fff; border: 1px solid #e3edf1; }
.hg-shop-help__text strong { display: block; font-family: 'Roboto Slab', serif; font-size: 17px; color: var(--hg-dark); margin-bottom: 4px; }
#hg-home .hg-shop-help__text p { font-size: 14px; line-height: 1.6; margin: 0; }
.hg-shop-help__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hg-shop-help__actions .hg-btn { flex: 1 1 auto; padding: 11px 18px; font-size: 14px; }
.hg-btn--ghost { background: #fff; color: var(--hg-primary); box-shadow: inset 0 0 0 1px var(--hg-primary); }
.hg-btn--ghost:hover { background: var(--hg-bg-soft); color: var(--hg-primary); }

@media (min-width: 600px) {
	.hg-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.hg-pcard { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
	.hg-pcard__img { border-radius: 0; }
	.hg-pcard__badge { top: 10px; left: 10px; font-size: 11px; }
	.hg-pcard__body { padding: 14px 16px 16px; }
}
@media (min-width: 768px) {
	.hg-shop-help { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 28px; }
	.hg-shop-help__actions { flex: 0 0 auto; }
	.hg-shop-help__actions .hg-btn { flex: 0 0 auto; }
}
@media (min-width: 900px) {
	.hg-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
	.hg-shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Cart + My Account (plain [woocommerce_cart] / [woocommerce_my_account]
   shortcode pages — styling only, no template or markup changes). Checkout is a
   separate FunnelKit/Elementor funnel template and is NOT covered by this block. ---------- */
.woocommerce-cart #primary, .woocommerce-account #primary { padding: 28px 0 60px; }
.woocommerce-cart .entry-header, .woocommerce-account .entry-header { max-width: 1200px; margin: 0 auto; padding: 0 20px 20px; }
.woocommerce-cart .entry-title, .woocommerce-account .entry-title { font-family: 'Roboto Slab', serif; font-size: 28px; }
.woocommerce-cart .woocommerce, .woocommerce-account .woocommerce { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Cart table */
.woocommerce-cart table.shop_table {
	border: 1px solid #e3edf1; border-radius: 14px; border-collapse: separate; border-spacing: 0;
	overflow: hidden; background: #fff;
}
.woocommerce-cart table.shop_table th { background: #F7FBFD; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #6b7c85; font-weight: 700; border-bottom: 1px solid #e3edf1; }
.woocommerce-cart table.shop_table td { border-bottom: 1px solid #eef3f5; vertical-align: middle; }
.woocommerce-cart table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce-cart table.shop_table td.product-thumbnail img { border-radius: 8px; max-width: 72px; }
.woocommerce-cart table.shop_table td.product-name a { color: var(--hg-dark); font-weight: 700; }
.woocommerce-cart table.shop_table td.product-name a:hover { color: var(--hg-primary); }
.woocommerce-cart table.shop_table .product-subtotal, .woocommerce-cart table.shop_table td.product-price { color: var(--hg-primary); font-weight: 700; }
.woocommerce-cart a.remove { color: #8a9aa3 !important; border-radius: 50% !important; }
.woocommerce-cart a.remove:hover { color: #fff !important; background: #e6413c !important; }

/* Quantity stepper — same pattern as the single-product page (product.css) */
.woocommerce-cart .quantity { display: inline-flex; align-items: stretch; border: 1.5px solid #e3edf1; border-radius: 10px; overflow: hidden; background: #fff; height: 40px; }
.woocommerce-cart .quantity .qty { width: 44px; height: 100% !important; margin: 0 !important; border: none !important; text-align: center; font-weight: 700; background: none; }

/* Coupon + Update cart row */
.woocommerce-cart #coupon_code { height: 44px; padding: 0 14px; border: 1.5px solid #e3edf1; border-radius: 10px; font-size: 14px; }
.woocommerce-cart #coupon_code:focus { border-color: var(--hg-primary); outline: none; }
.woocommerce-cart .actions .button {
	height: 44px; padding: 0 22px; border-radius: 10px !important; font-weight: 700; font-size: 13px !important;
	background: var(--hg-primary) !important; color: #fff !important; border: none !important; letter-spacing: .3px;
}
.woocommerce-cart .actions .button:disabled { background: #c9d6dc !important; color: #fff !important; }
.woocommerce-cart .actions .button:not(:disabled):hover { background: var(--hg-primary-dark, #24647f) !important; }

/* Cart totals card + Proceed to Checkout */
.woocommerce-cart .cart_totals { background: #fff; border: 1px solid #e3edf1; border-radius: 14px; padding: 24px; }
.woocommerce-cart .cart_totals h2 { font-family: 'Roboto Slab', serif; font-size: 19px; margin-bottom: 14px; }
.woocommerce-cart .cart_totals table.shop_table { border: none; width: 100%; }
.woocommerce-cart .cart_totals .order-total .amount { color: var(--hg-primary); font-size: 20px; font-weight: 700; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block; text-align: center; padding: 15px 16px !important; border-radius: 10px !important;
	background: var(--hg-primary) !important; color: #fff !important; font-weight: 700 !important; font-size: 14px !important;
	text-transform: none !important; letter-spacing: 0 !important; white-space: normal; line-height: 1.3;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--hg-primary-dark, #24647f) !important; }

/* "You may be interested in…" up-sells — same card look as the single-product page */
.woocommerce-cart .cross-sells > h2 { font-family: 'Roboto Slab', serif; font-size: 20px; margin-bottom: 16px; }
.woocommerce-cart .cross-sells ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; margin: 0 !important; }
.woocommerce-cart .cross-sells ul.products::before, .woocommerce-cart .cross-sells ul.products::after { display: none !important; }
.woocommerce-cart .cross-sells ul.products li.product {
	width: auto !important; max-width: none !important; margin: 0 !important; float: none !important;
	background: #fff; border: 1px solid #e3edf1; border-radius: 12px; padding: 10px 10px 14px !important;
}
.woocommerce-cart .cross-sells ul.products li.product img { border-radius: 8px; }
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; font-weight: 700 !important; color: var(--hg-dark); }
.woocommerce-cart .cross-sells ul.products li.product .price { color: var(--hg-primary) !important; font-weight: 700; font-size: 13px !important; }
.woocommerce-cart .cross-sells ul.products li.product .button {
	background: var(--hg-accent) !important; color: #fff !important; border-radius: 7px !important; font-size: 12px !important; padding: 8px 10px !important;
}

@media (min-width: 900px) {
	/* .cart-collaterals only exists to wrap cross-sells + cart_totals in WooCommerce's
	   markup; "dissolving" it with display:contents lets both become direct grid
	   items here, placed into the layout below by their own grid-area. */
	.woocommerce-cart .woocommerce {
		display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px 28px; align-items: start;
		grid-template-areas: "notices notices" "form totals" "cross cross";
	}
	.woocommerce-cart .woocommerce-notices-wrapper { grid-area: notices; }
	.woocommerce-cart .woocommerce-cart-form { grid-area: form; }
	.woocommerce-cart .cart-collaterals { display: contents; }
	.woocommerce-cart .cart_totals { grid-area: totals; }
	.woocommerce-cart .cross-sells { grid-area: cross; margin-top: 12px; }

	/* The sidebar is narrow (320px), too tight for WooCommerce's default side-by-side
	   label | value row — stack each one. Scoped to this breakpoint because below
	   it Astra already converts this table its own way (shop_table_responsive). */
	.woocommerce-cart .cart_totals table.shop_table tr { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid #eef3f5; }
	.woocommerce-cart .cart_totals table.shop_table tr:last-child { border-bottom: none; }
	.woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { display: block; padding: 0; border: none; }
	.woocommerce-cart .cart_totals table.shop_table th { font-size: 11px; text-transform: uppercase; color: #8a9aa3; font-weight: 700; margin-bottom: 4px; white-space: nowrap; }
}
@media (min-width: 1024px) {
	.woocommerce-cart .cross-sells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* My Account */
.woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account form.edit-account,
.woocommerce-account .woocommerce-address-fields {
	background: #fff; border: 1px solid #e3edf1; border-radius: 14px; padding: 26px;
}
.woocommerce-account .col2-set { display: grid; grid-template-columns: 1fr; gap: 20px; }
/* WooCommerce's own stylesheet floats these two columns (float:left / float:right)
   for its default non-grid layout; explicit placement (rather than relying on grid
   auto-flow) keeps them side by side regardless of that leftover float/clear. */
.woocommerce-account .col2-set .col-1 { float: none; clear: none; grid-column: 1; grid-row: 1; }
.woocommerce-account .col2-set .col-2 { float: none; clear: none; grid-column: 1; grid-row: 2; }
@media (min-width: 700px) {
	.woocommerce-account .col2-set { grid-template-columns: 1fr 1fr; }
	.woocommerce-account .col2-set .col-2 { grid-column: 2; grid-row: 1; }
}
.woocommerce-account .woocommerce-form-login h3, .woocommerce-account .woocommerce-form-register h2 { font-family: 'Roboto Slab', serif; font-size: 19px; margin-bottom: 16px; }
.woocommerce-account input.input-text, .woocommerce-account select {
	height: 44px; padding: 0 14px; border: 1.5px solid #e3edf1; border-radius: 10px; font-size: 14px; width: 100%; box-sizing: border-box;
}
.woocommerce-account textarea { padding: 12px 14px; border: 1.5px solid #e3edf1; border-radius: 10px; font-size: 14px; width: 100%; box-sizing: border-box; }
.woocommerce-account input.input-text:focus, .woocommerce-account select:focus, .woocommerce-account textarea:focus { border-color: var(--hg-primary); outline: none; }

/* "Show password" toggle: WooCommerce normally draws this as an eye icon via its
   own icon font, which isn't loading here, so it was rendering as a plain empty
   button. Pure CSS fix (an inline icon), nothing about the password field itself
   changes — still the same input, same toggle behavior. */
.woocommerce-account .password-input { position: relative; }
.woocommerce-account .password-input input.input-text { padding-right: 42px; }
.woocommerce-account .show-password-input {
	position: absolute; top: 0; right: 0; height: 44px; width: 38px; padding: 0;
	border: none !important; background: none !important; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.woocommerce-account .show-password-input::after {
	content: ''; width: 18px; height: 18px; opacity: .55;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.woocommerce-account .show-password-input.display-password::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7fa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='M6.61 6.61A18.5 18.5 0 0 0 1 12s4 8 11 8a9.26 9.26 0 0 0 5.39-1.61'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E");
	opacity: .8;
}
.woocommerce-account .woocommerce-form-login .button, .woocommerce-account .woocommerce-form-register .button,
.woocommerce-account form.edit-account .button, .woocommerce-account .woocommerce-address-fields .button,
.woocommerce-account .woocommerce-MyAccount-content .button {
	background: var(--hg-primary) !important; color: #fff !important; border-radius: 10px !important; font-weight: 700 !important;
	padding: 12px 24px !important; border: none !important;
}
.woocommerce-account .woocommerce-form-login .button:hover, .woocommerce-account .woocommerce-form-register .button:hover,
.woocommerce-account form.edit-account .button:hover, .woocommerce-account .woocommerce-MyAccount-content .button:hover {
	background: var(--hg-primary-dark, #24647f) !important;
}

/* Dashboard navigation tabs (shown after login) */
.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 20px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block; padding: 10px 18px; border-radius: 20px; border: 1px solid #e3edf1; background: #fff;
	font-size: 13px; font-weight: 600; color: var(--hg-dark); text-decoration: none; transition: all .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { border-color: var(--hg-primary); color: var(--hg-primary); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--hg-primary); border-color: var(--hg-primary); color: #fff; }

/* Orders table inside My Account */
.woocommerce-account table.woocommerce-orders-table { border: 1px solid #e3edf1; border-radius: 14px; overflow: hidden; border-collapse: collapse; background: #fff; width: 100%; }
.woocommerce-account table.woocommerce-orders-table th { background: #F7FBFD; font-size: 12px; text-transform: uppercase; color: #6b7c85; font-weight: 700; padding: 12px 14px; }
.woocommerce-account table.woocommerce-orders-table td { padding: 12px 14px; border-top: 1px solid #eef3f5; }
.woocommerce-account .woocommerce-orders-table__cell-order-status mark { background: none; color: var(--hg-primary); font-weight: 700; }
.woocommerce-account a.woocommerce-button.view { color: var(--hg-primary); font-weight: 700; }

/* ---------- Simple text pages (template-simple-page.php — policy pages) ---------- */
.hg-policy-page { padding: 32px 0 60px; }
.hg-policy-page .hg-crumbs { margin-bottom: 14px; }
.hg-policy-page h1 { font-size: 30px; margin-bottom: 24px; }
/* Some of this content was pasted from policy-generator tools with its own
   mid-document <h1> tags; shown at h2 size so the real page title (above)
   stays the only large heading. The text itself is untouched. */
.hg-policy-content h1 { font-size: 22px; line-height: 1.35; margin: 34px 0 14px; color: var(--hg-dark); }

/* ---------- Shared simple page intro (Contact, policy pages) ---------- */
.hg-page-intro { padding: 36px 0 8px; text-align: center; }
.hg-page-intro .hg-crumbs { justify-content: center; }
.hg-page-intro h1 { font-size: 30px; margin-bottom: 8px; }

/* ---------- Contact page (page-contact.php) ---------- */
.hg-contact { padding: 28px 0 60px; }
.hg-contact__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.hg-contact-card { background: #fff; border: 1px solid #e3edf1; border-radius: 14px; padding: 28px; }
.hg-contact-card h3 { font-size: 19px; margin-bottom: 10px; }
.hg-contact-card > p { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }

.hg-contact-item { display: flex; gap: 14px; margin-bottom: 24px; }
.hg-contact-item svg { flex: 0 0 auto; color: var(--hg-primary); margin-top: 2px; }
.hg-contact-item > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hg-contact-item a { color: var(--hg-dark); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.hg-contact-item a:hover { color: var(--hg-primary); }
.hg-contact-item a small { display: block; font-size: 12px; font-weight: 400; color: #8a9aa3; }
.hg-contact-item__label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--hg-primary); margin-bottom: 8px; }
.hg-contact-item__label--social { margin-bottom: 12px; }

.hg-contact-social { display: flex; gap: 10px; }
.hg-contact-social a {
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	border-radius: 50%; background: var(--hg-bg-soft); color: var(--hg-primary); transition: background .15s ease, color .15s ease, transform .15s ease;
}
.hg-contact-social a:hover { background: var(--hg-primary); color: #fff; transform: translateY(-2px); }

@media (min-width: 768px) {
	.hg-contact__grid { grid-template-columns: 1fr 1.2fr; align-items: start; }
}

/* ---------- About page (page-about.php) ---------- */
.hg-about-intro .hg-crumbs { margin-bottom: 10px; }
.hg-about-intro__stats { display: flex; gap: 28px; margin: 4px 0 24px; }
.hg-about-intro__stats strong { display: block; font-family: 'Roboto Slab', serif; font-size: 22px; color: var(--hg-dark); line-height: 1.2; }
.hg-about-intro__stats span { font-size: 12px; color: #777; }

/* ---------- Footer (footer.php) — sitewide, lives outside #hg-home ---------- */
.hg-footer { background: var(--hg-dark); color: #b9bfd6; font-family: 'Roboto', sans-serif; }
.hg-footer a { text-decoration: none; }
.hg-footer__wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hg-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 48px 20px 36px; }
.hg-footer__col h3 {
	font-family: 'Roboto Slab', serif; font-size: 14px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .5px; color: #fff; margin: 0 0 16px; padding-left: 12px; border-left: 3px solid #fff;
}
.hg-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hg-footer__col ul a { color: #b9bfd6; font-size: 14px; transition: color .15s ease; }
.hg-footer__col ul a:hover { color: #fff; }

.hg-footer__logo { display: inline-block; margin-bottom: 14px; }
.hg-footer__logo img { max-height: 46px; width: auto; border-radius: 50%; background: #fff; }
.hg-footer__col--about p { font-size: 14px; line-height: 1.6; margin: 0 0 16px; color: #b9bfd6; }
.hg-footer__wa { padding: 10px 20px; font-size: 13px; }

.hg-footer__social { display: flex; gap: 10px; }
.hg-footer__social a {
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
	border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; transition: background .15s ease, transform .15s ease;
}
.hg-footer__social a:hover { background: var(--hg-primary); transform: translateY(-2px); }

.hg-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 18px 20px; }
.hg-footer__bottom .hg-footer__wrap { font-size: 12px; color: #8891ad; text-align: center; }

@media (min-width: 640px) {
	.hg-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.hg-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 40px; padding: 56px 20px 40px; }
}