/* =========================================================
   ShubhCraft — Homepage sections CSS (divine aesthetic)
   ========================================================= */

/* ----- Shared wrap ----- */
.sgc-home-wrap {
	font-family: var(--sgc-sans);
	color: var(--sgc-dark);
}

.sgc-home-wrap *,
.sgc-home-wrap *::before,
.sgc-home-wrap *::after {
	box-sizing: border-box;
}

/* Front-page: flush homepage sections against header (no wrapper gap) */
.sgc-site.home .site-content > .col-full,
.sgc-site.page-template-front-page .site-content > .col-full {
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.sgc-home-wrap {
	margin-top: 0;
}

/* Homepage: full-width sections with a slim edge gutter only */
.sgc-home-wrap .col-full {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: clamp(1rem, 2.5vw, 2.5rem);
	padding-right: clamp(1rem, 2.5vw, 2.5rem);
}

/* ----- Section shared ----- */
.sgc-section {
	width: 100%;
}

.sgc-section__head {
	text-align: center;
	padding: 3rem 0 1.5rem;
}

.sgc-section__head--light {
	color: var(--sgc-white);
}

.sgc-section__title {
	font-family: var(--sgc-serif);
	font-size: clamp(2rem, 3.8vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0;
	line-height: 1.12;
	color: var(--sgc-maroon-deep);
}

/* Dark sections: Storefront's h2 color rule would otherwise win over inheritance */
.sgc-section__head--light .sgc-section__title {
	color: var(--sgc-ivory);
}

.sgc-kicker {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--sgc-maroon);
	margin-bottom: 0.75rem;
	font-family: var(--sgc-sans);
	padding: 0.35em 1.25em;
	border: 1px solid rgba(212, 175, 55, 0.45);
	border-radius: 2rem;
	background: rgba(212, 175, 55, 0.12);
}

/* Kickers on dark surfaces stay pale gold */
.sgc-section__head--light .sgc-kicker,
.sgc-hero__inner .sgc-kicker,
.sgc-section--promo .sgc-kicker {
	color: var(--sgc-gold-light);
	border-color: rgba(240, 215, 140, 0.4);
	background: rgba(240, 215, 140, 0.08);
}

.sgc-section__title::after {
	content: "";
	display: block;
	width: 4rem;
	height: 3px;
	margin: 0.85rem auto 0;
	background: var(--sgc-gradient-gold);
	border-radius: 2px;
}

/* ----- Shared button overrides ----- */
.sgc-btn--accent,
.sgc-btn--accent:visited {
	background: var(--sgc-gradient-gold);
	border: none;
	color: var(--sgc-maroon-deep) !important;
	font-weight: 700;
	padding: 0.85em 2.25em;
	border-radius: 2rem;
	text-decoration: none;
	letter-spacing: 0.04em;
	box-shadow: var(--sgc-shadow-glow);
	transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}

.sgc-btn--accent:hover,
.sgc-btn--accent:focus {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(212, 175, 55, 0.4);
	filter: brightness(1.05);
	color: var(--sgc-maroon-deep) !important;
}

/* =====================================================
   1. HERO BANNER CAROUSEL
   ===================================================== */
.sgc-section--hero {
	position: relative;
	overflow: hidden;
	background-color: var(--sgc-maroon-deep);
}

.sgc-hero-carousel {
	width: 100%;
	min-height: clamp(420px, 82vh, 720px);
}

.sgc-hero-carousel .splide__track,
.sgc-hero-carousel .splide__list,
.sgc-hero-carousel .splide__slide {
	height: 100%;
}

.sgc-hero-carousel .splide__slide {
	width: 100%;
}

.sgc-hero__slide {
	position: relative;
	min-height: clamp(420px, 82vh, 720px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--sgc-maroon-deep);
	overflow: hidden;
}

/* Background image lives on its own layer so Ken Burns can use GPU-composited
   transform: scale() instead of repaint-heavy background-size animation. */
.sgc-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
}

/* Art direction on small screens: each slide sets --sgc-bg-pos-m so the
   subject stays composed instead of being blindly center-cropped. */
@media (max-width: 600px) {
	.sgc-hero__bg {
		background-position: var(--sgc-bg-pos-m, center);
	}
}

.sgc-hero-carousel .splide__slide.is-active .sgc-hero__bg {
	animation: sgc-hero-kenburns 18s ease-in-out infinite alternate;
}

@keyframes sgc-hero-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* Carousel controls */
.sgc-hero-carousel .splide__arrows {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
}

.sgc-hero-carousel .splide__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgba(30, 15, 26, 0.55);
	border: 2px solid rgba(240, 215, 140, 0.45);
	opacity: 1;
	pointer-events: auto;
	transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.sgc-hero-carousel .splide__arrow:hover {
	background: var(--sgc-gold);
	border-color: var(--sgc-gold);
	transform: translateY(-50%) scale(1.08);
}

.sgc-hero-carousel .splide__arrow svg {
	fill: var(--sgc-ivory);
	width: 1.1rem;
	height: 1.1rem;
}

.sgc-hero-carousel .splide__arrow:hover svg {
	fill: var(--sgc-maroon-deep);
}

.sgc-hero-carousel .splide__arrow--prev {
	left: 1.25rem;
}

.sgc-hero-carousel .splide__arrow--next {
	right: 1.25rem;
}

.sgc-hero-carousel .splide__pagination {
	position: absolute;
	bottom: 1.5rem;
	left: 0;
	right: 0;
	z-index: 6;
	padding: 0;
}

.sgc-hero-carousel .splide__pagination__page {
	width: 0.65rem;
	height: 0.65rem;
	margin: 0 0.35rem;
	background: rgba(255, 251, 245, 0.35);
	opacity: 1;
	transition: transform 0.25s, background 0.25s;
}

.sgc-hero-carousel .splide__pagination__page.is-active {
	background: var(--sgc-gold);
	transform: scale(1.35);
}

.sgc-hero-carousel--single .splide__arrows,
.sgc-hero-carousel--single .splide__pagination {
	display: none;
}

.sgc-hero__pattern {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0.12;
	background-image:
		radial-gradient(circle at 20% 30%, var(--sgc-gold) 1px, transparent 1px),
		radial-gradient(circle at 80% 70%, var(--sgc-saffron-light) 1px, transparent 1px);
	background-size: 48px 48px, 64px 64px;
	pointer-events: none;
}

.sgc-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(
		160deg,
		rgba(61, 12, 13, 0.75) 0%,
		rgba(30, 15, 26, 0.55) 45%,
		rgba(92, 26, 27, 0.65) 100%
	);
}

.sgc-hero__shimmer {
	position: absolute;
	inset: -50%;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		transparent 40%,
		rgba(240, 215, 140, 0.06) 50%,
		transparent 60%
	);
	animation: sgc-shimmer 8s ease-in-out infinite;
}

@keyframes sgc-shimmer {
	0%, 100% { transform: translateX(-30%) rotate(0deg); }
	50%      { transform: translateX(30%) rotate(0deg); }
}

.sgc-hero__inner {
	position: relative;
	z-index: 4;
	max-width: 52rem;
	padding: 4rem 1.5rem 5rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.sgc-hero-carousel .splide__slide.is-active .sgc-hero__inner {
	animation: sgc-fade-up 0.9s ease-out both;
}

@media (max-width: 600px) {
	.sgc-hero__title {
		font-size: 2.1rem;
	}
}

@keyframes sgc-fade-up {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sgc-hero__title {
	font-family: var(--sgc-serif);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 700;
	color: var(--sgc-ivory);
	line-height: 1.08;
	margin: 0 0 1rem;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.sgc-hero__lede {
	font-size: 1.125rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 1.75rem;
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
}

.sgc-hero__actions {
	margin: 0;
	padding: 0;
}

/* =====================================================
   PROMO TICKER (moving banner)
   ===================================================== */
.sgc-promo-ticker {
	overflow: hidden;
	padding: 0.7rem 0;
	border-top: 1px solid rgba(240, 215, 140, 0.2);
	border-bottom: 1px solid rgba(240, 215, 140, 0.2);
	position: relative;
}

.sgc-promo-ticker::before,
.sgc-promo-ticker::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3rem;
	z-index: 2;
	pointer-events: none;
}

.sgc-promo-ticker::before {
	left: 0;
	background: linear-gradient(90deg, currentColor 0%, transparent 100%);
	opacity: 0.15;
}

.sgc-promo-ticker::after {
	right: 0;
	background: linear-gradient(270deg, currentColor 0%, transparent 100%);
	opacity: 0.15;
}

.sgc-promo-ticker__track {
	display: flex;
	width: max-content;
	animation: sgc-ticker-scroll var(--sgc-ticker-speed, 35s) linear infinite;
}

.sgc-promo-ticker__content {
	display: flex;
	gap: 3rem;
	flex-shrink: 0;
}

.sgc-promo-ticker__item {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	white-space: nowrap;
	padding: 0 1.5rem;
}

@keyframes sgc-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* =====================================================
   2. TRUST BAR
   ===================================================== */
.sgc-section--trust {
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(212, 175, 55, 0.15);
	background: var(--sgc-ivory);
}

.sgc-trust__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0.5rem var(--sgc-gap);
}

.sgc-trust__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sgc-maroon);
	padding: 0.55rem 1.25rem;
	border-right: 1px solid rgba(212, 175, 55, 0.25);
	transition: transform 0.2s, color 0.2s;
}

.sgc-trust__item:hover {
	transform: translateY(-2px);
	color: var(--sgc-saffron);
}

.sgc-trust__item:last-child {
	border-right: none;
}

.sgc-trust__icon {
	font-size: 1.5rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

.sgc-trust__icon svg {
	width: 1.5rem;
	height: 1.5rem;
	stroke: var(--sgc-accent-dk);
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* =====================================================
   3. PRODUCT CARD — moved to assets/css/product-card.css
   (shared with the WooCommerce shop loop). Dark-section
   overrides remain further below in this file.
   ===================================================== */

/* =====================================================
   4. SPLIDE / SLIDER shared overrides
   ===================================================== */
.sgc-slider {
	padding-bottom: 2.5rem;
}

.sgc-slider .splide__list {
	align-items: stretch;
}

.sgc-slider .splide__slide {
	padding: 0 0.5rem;
}

.sgc-slider .splide__track {
	padding: 1rem 0 0.5rem;
}

.sgc-slider .splide__arrows {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.sgc-slider .splide__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.85rem;
	height: 2.85rem;
	border-radius: 50%;
	background: rgba(255, 251, 245, 0.94);
	border: 2px solid rgba(212, 175, 55, 0.5);
	box-shadow: var(--sgc-shadow-soft);
	opacity: 1;
	pointer-events: auto;
	backdrop-filter: blur(6px);
	outline: none;
	transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.sgc-slider .splide__arrow--prev {
	left: 0;
}

.sgc-slider .splide__arrow--next {
	right: 0;
}

.sgc-slider .splide__arrow:focus {
	outline: none;
	border-color: rgba(212, 175, 55, 0.5);
}

.sgc-slider .splide__arrow:focus-visible {
	outline: 2px solid var(--sgc-gold);
	outline-offset: 2px;
}

.sgc-slider .splide__arrow svg {
	fill: var(--sgc-maroon);
	width: 1rem;
	height: 1rem;
	transition: fill 0.25s;
}

.sgc-slider .splide__arrow:hover {
	background: var(--sgc-gradient-gold);
	border-color: var(--sgc-gold);
	box-shadow: var(--sgc-shadow-glow);
	transform: translateY(-50%) scale(1.06);
}

.sgc-slider .splide__arrow:hover svg {
	fill: var(--sgc-maroon-deep);
}

/* Dark sections — match hero carousel controls */
.sgc-section--limited .sgc-slider .splide__arrow {
	background: rgba(30, 15, 26, 0.62);
	border-color: rgba(240, 215, 140, 0.45);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}

.sgc-section--limited .sgc-slider .splide__arrow svg {
	fill: var(--sgc-gold-light);
}

.sgc-section--limited .sgc-slider .splide__arrow:hover {
	background: var(--sgc-gold);
	border-color: var(--sgc-gold-light);
}

.sgc-section--limited .sgc-slider .splide__arrow:hover svg {
	fill: var(--sgc-maroon-deep);
}

.sgc-slider.splide {
	position: relative;
	padding: 0 3.5rem 1rem;
}

/* =====================================================
   5. OFFER ZONE
   ===================================================== */
.sgc-section--offer-zone {
	padding-bottom: 3rem;
	background: var(--sgc-ivory);
}

.sgc-section--offer-zone .sgc-section__head {
	text-align: center;
	padding-bottom: 0.5rem;
}

/* =====================================================
   6. CATEGORY GRID
   ===================================================== */
.sgc-section--catgrid {
	padding-bottom: 4rem;
	background: linear-gradient(180deg, var(--sgc-ivory) 0%, var(--sgc-light) 55%, var(--sgc-gold-pale) 100%);
	position: relative;
	overflow: hidden;
}

.sgc-section--catgrid::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 50% at 15% 0%, rgba(212, 175, 55, 0.1) 0%, transparent 55%),
		radial-gradient(ellipse 60% 45% at 85% 100%, rgba(224, 123, 37, 0.07) 0%, transparent 55%);
	pointer-events: none;
}

.sgc-section--catgrid .sgc-section__head {
	text-align: center;
	position: relative;
}

.sgc-cattabs {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 0 2rem;
	position: relative;
}

.sgc-cattabs__btn {
	padding: 0.55em 1.5em;
	border: 1.5px solid var(--sgc-mid);
	background: rgba(255, 255, 255, 0.65);
	color: var(--sgc-dark);
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: 2rem;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
	font-family: var(--sgc-sans);
}

.sgc-cattabs__btn.is-active,
.sgc-cattabs__btn:hover {
	background: var(--sgc-gradient-gold);
	border-color: var(--sgc-gold);
	color: var(--sgc-maroon-deep);
	box-shadow: 0 4px 16px rgba(212, 175, 55, 0.25);
}

.sgc-catgrid-panel {
	padding: 0 0 2rem;
	position: relative;
}

.sgc-catgrid-panel.sgc-catgrid--hidden {
	display: none;
}

.sgc-cat-slider .splide__slide {
	display: flex;
	height: auto;
}

.sgc-cat-slider .sgc-catcard {
	flex: 1;
	width: 100%;
	transition-delay: 0s;
}

.sgc-catcard {
	width: 100%;
	min-width: 0;
	text-decoration: none;
	color: var(--sgc-dark);
	display: flex;
	flex-direction: column;
	border-radius: var(--sgc-radius-lg);
	overflow: hidden;
	box-shadow: var(--sgc-shadow-soft);
	border: 1px solid rgba(212, 175, 55, 0.18);
	background: var(--sgc-white);
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.55s ease,
		transform 0.55s ease,
		box-shadow 0.35s,
		border-color 0.35s;
	transition-delay: calc(0.07s * var(--catcard-i, 0));
}

.sgc-section--catgrid.is-visible .sgc-catcard {
	opacity: 1;
	transform: translateY(0);
}

.sgc-catcard:hover {
	box-shadow: var(--sgc-shadow-glow);
	border-color: rgba(212, 175, 55, 0.5);
	transform: translateY(-6px);
}

.sgc-catcard__img-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--sgc-temple);
	isolation: isolate;
}

.sgc-catcard__img-wrap .sgc-img-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sgc-catcard__img-wrap .sgc-img-slide__track,
.sgc-catcard__img-wrap .sgc-img-slide__track img {
	height: 100%;
}

.sgc-catcard__img-wrap .sgc-img-slide__track img {
	object-fit: cover;
	object-position: center center;
}

.sgc-catcard__fallback {
	width: 100%;
	height: 100%;
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--sgc-maroon-deep) 0%, var(--sgc-temple) 60%, #2a1520 100%);
}

.sgc-catcard__fallback span {
	font-family: var(--sgc-serif);
	font-size: clamp(2.5rem, 8vw, 3.5rem);
	font-weight: 600;
	color: var(--sgc-gold-light);
	opacity: 0.85;
}

.sgc-catcard__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.35rem 1.1rem;
	background: linear-gradient(
		0deg,
		rgba(30, 15, 26, 0.88) 0%,
		rgba(30, 15, 26, 0.35) 42%,
		transparent 68%
	);
	pointer-events: none;
}

.sgc-catcard__count {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sgc-gold-light);
	margin-bottom: 0.3rem;
}

.sgc-catcard__name {
	font-family: var(--sgc-serif);
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	font-weight: 600;
	margin: 0;
	line-height: 1.25;
	color: var(--sgc-white);
}

.sgc-catcard__cta {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sgc-gold-light);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.sgc-catcard:hover .sgc-catcard__cta {
	opacity: 1;
	transform: translateY(0);
}

.sgc-catcard__slides {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	display: flex;
	gap: 0.3rem;
	pointer-events: none;
}

.sgc-catcard__slide-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	transition: background-color 0.3s, transform 0.3s;
}

.sgc-catcard__slide-dot.is-active {
	background: var(--sgc-gold-light);
	transform: scale(1.25);
}

/* =====================================================
   7. LIMITED TIME OFFER
   ===================================================== */
.sgc-section--limited {
	padding-bottom: 3rem;
	color: var(--sgc-white);
}

.sgc-limited__subtitle {
	font-size: 1rem;
	opacity: 0.85;
	margin: 0.35rem 0 0;
}

/* Countdown */
.sgc-countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 1.75rem 0 2rem;
	flex-wrap: wrap;
}

.sgc-countdown__block {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--sgc-radius);
	padding: 1rem 1.25rem;
	min-width: 80px;
}

.sgc-countdown__num {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--sgc-gold-light);
	text-shadow: 0 0 20px rgba(240, 215, 140, 0.4);
}

.sgc-countdown__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.7;
	margin-top: 0.25rem;
}

.sgc-countdown__sep {
	font-size: 2rem;
	font-weight: 700;
	color: var(--sgc-accent);
	line-height: 1;
}

/* Limited slider on dark BG */
.sgc-section--limited .sgc-product-card {
	background: rgba(255, 255, 255, 0.06);
	color: var(--sgc-white);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.sgc-section--limited .sgc-product-card__title a {
	color: var(--sgc-white);
}

.sgc-section--limited .sgc-product-card__price ins,
.sgc-section--limited .sgc-product-card__price .amount {
	color: var(--sgc-accent);
}

/* Outline button must flip to pale gold on the dark cards (was invisible) */
.sgc-section--limited .sgc-btn--visit,
.sgc-section--limited .sgc-btn--visit:visited {
	border-color: rgba(240, 215, 140, 0.5);
	color: var(--sgc-gold-light) !important;
}

.sgc-section--limited .sgc-btn--visit:hover,
.sgc-section--limited .sgc-btn--visit:focus {
	border-color: var(--sgc-gold);
	color: var(--sgc-gold) !important;
}

/* =====================================================
   8. TESTIMONIALS
   ===================================================== */
.sgc-section--testimonials {
	padding-bottom: 3rem;
	background: linear-gradient(180deg, var(--sgc-cream) 0%, var(--sgc-ivory) 100%);
}

.sgc-review {
	padding: 1.75rem;
	background: var(--sgc-white);
	border-radius: var(--sgc-radius-lg);
	box-shadow: var(--sgc-shadow-soft);
	border: 1px solid rgba(212, 175, 55, 0.15);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: transform 0.3s, box-shadow 0.3s;
}

.sgc-review:hover {
	transform: translateY(-4px);
	box-shadow: var(--sgc-shadow-glow);
}

.sgc-review__stars {
	display: flex;
	gap: 0.1em;
}

.sgc-review__star {
	color: #d8d8d8;
	font-size: 1.25rem;
	line-height: 1;
}

.sgc-review__star.is-filled {
	color: #f5a623;
}

.sgc-review__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--sgc-muted);
	flex: 1;
}

.sgc-review__text p:last-child {
	margin-bottom: 0;
}

.sgc-review__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.sgc-review__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.sgc-review__name {
	display: block;
	font-weight: 700;
	font-style: normal;
	font-size: 1rem;
	color: var(--sgc-dark);
}

.sgc-review__role {
	display: block;
	font-size: 0.8125rem;
	color: var(--sgc-muted);
}

/* =====================================================
   9. POPULAR PRODUCTS
   ===================================================== */
.sgc-section--popular {
	padding-bottom: 3rem;
	background: var(--sgc-ivory);
}

/* =====================================================
   10. PROMO BANNER
   ===================================================== */
.sgc-section--promo {
	position: relative;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	color: var(--sgc-white);
	text-align: center;
}

.sgc-section--promo__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(61, 12, 13, 0.7) 0%, rgba(30, 15, 26, 0.55) 100%);
	z-index: 1;
}

.sgc-section--promo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(90deg, transparent, rgba(240, 215, 140, 0.08), transparent);
	animation: sgc-promo-sweep 6s ease-in-out infinite;
	pointer-events: none;
}

@keyframes sgc-promo-sweep {
	0%, 100% { transform: translateX(-100%); }
	50%      { transform: translateX(100%); }
}

.sgc-section--promo__inner {
	position: relative;
	z-index: 3;
	padding: 4rem var(--sgc-gap);
}

.sgc-promo__title {
	font-family: var(--sgc-serif);
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	font-weight: 600;
	color: var(--sgc-white);
	margin: 0.5rem 0 0.25rem;
	line-height: 1.1;
}

.sgc-promo__subtitle {
	font-size: 1.25rem;
	opacity: 0.9;
	margin: 0 0 1.5rem;
}

.sgc-promo__actions {
	margin: 0;
	padding: 0;
}

/* =====================================================
   11. INSTAGRAM GRID
   ===================================================== */
.sgc-section--instagram {
	padding-bottom: 3rem;
}

.sgc-instagram-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	padding: 0;
}

.sgc-instagram-grid__item {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--sgc-light);
}

.sgc-instagram-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.35s ease, opacity 0.2s;
	display: block;
}

.sgc-instagram-grid__item:hover img {
	transform: scale(1.08);
	opacity: 0.88;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
	.sgc-instagram-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.sgc-hero-carousel .splide__arrow {
		width: 2.4rem;
		height: 2.4rem;
	}

	.sgc-hero-carousel .splide__arrow--prev {
		left: 0.5rem;
	}

	.sgc-hero-carousel .splide__arrow--next {
		right: 0.5rem;
	}

	.sgc-trust__item {
		border-right: none;
		padding: 0.4rem 0.75rem;
	}

	.sgc-countdown {
		gap: 0.5rem;
	}

	.sgc-countdown__block {
		padding: 0.75rem 0.9rem;
		min-width: 64px;
	}

	.sgc-countdown__num {
		font-size: 1.75rem;
	}

	.sgc-slider.splide {
		padding-left: 2.85rem;
		padding-right: 2.85rem;
	}

	.sgc-slider .splide__arrow {
		width: 2.5rem;
		height: 2.5rem;
		border-width: 1.5px;
	}

	.sgc-slider .splide__arrow svg {
		width: 0.9rem;
		height: 0.9rem;
	}

}

@media (max-width: 600px) {
	.sgc-slider.splide {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}

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

/* =====================================================
   SCROLL REVEAL ANIMATIONS
   ===================================================== */
.sgc-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.sgc-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sgc-section--hero.sgc-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.sgc-promo-ticker__content,
	.sgc-hero__shimmer,
	.sgc-section--promo::before,
	.sgc-hero-carousel .splide__slide.is-active .sgc-hero__bg {
		animation: none !important;
	}

	.sgc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.sgc-catcard {
		opacity: 1;
		transform: none;
		transition: box-shadow 0.35s, border-color 0.35s;
	}

	.sgc-img-slide__track {
		transition: none;
		transform: none !important;
	}
}