/* ============================================================================
   SunSeason — Homepage stylesheet
   One stylesheet per template (no shared component CSS). This sheet also holds
   the shared chrome (top bar, menu) until sibling templates are built.

   Brand tokens carried over from the old design (logo + colours only):
     amber #f6a235 · navy/ink #1a1819 · cream #faf5ef · sand #e7dfd5
   ============================================================================ */

:root {
	--ss-amber: #f6a235;
	--ss-amber-dark: #e2860f;
	--ss-navy: #1a1819;
	--ss-ink: #1a1819;
	--ss-cream: #faf5ef;
	--ss-sand: #e7dfd5;
	--ss-white: #ffffff;
	--ss-topbar-bg: #17151a;
	--ss-topbar-fg: #cbc6bf;
	--ss-topbar-fg-strong: #ffffff;
	--ss-topbar-line: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }

.ss-home-page {
	font-family: "Catamaran", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ss-ink);
	overflow-x: clip;
}

/* ------------------------------------------------------------------ TOP BAR */

.ss-home-topbar {
	background: var(--ss-topbar-bg);
	color: var(--ss-topbar-fg);
	font-size: 13px;
	line-height: 1;
	border-bottom: 1px solid var(--ss-topbar-line);
}

.ss-home-topbar-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.ss-home-topbar-left,
.ss-home-topbar-right {
	display: flex;
	align-items: center;
	gap: 22px;
}

.ss-home-topbar-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ss-topbar-fg);
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

.ss-home-topbar-item:hover { color: var(--ss-topbar-fg-strong); }

.ss-home-topbar-icon { color: var(--ss-amber); flex: 0 0 auto; }

.ss-home-topbar-address span { letter-spacing: .1px; }

.ss-home-topbar-phone { font-weight: 600; }

.ss-home-topbar-divider {
	width: 1px;
	height: 18px;
	background: var(--ss-topbar-line);
}

/* socials */
.ss-home-topbar-socials { display: inline-flex; align-items: center; gap: 6px; }

.ss-home-topbar-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--ss-topbar-fg);
	background: transparent;
	transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.ss-home-topbar-social:hover {
	color: var(--ss-navy);
	background: var(--ss-amber);
	transform: translateY(-1px);
}

/* language switcher */
.ss-home-topbar-lang {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	letter-spacing: .3px;
}

.ss-home-topbar-lang-link {
	color: var(--ss-topbar-fg);
	text-decoration: none;
	transition: color .18s ease;
}

.ss-home-topbar-lang-link:hover { color: var(--ss-topbar-fg-strong); }

.ss-home-topbar-lang-link.is-active { color: var(--ss-amber); }

.ss-home-topbar-lang-sep { color: var(--ss-topbar-line); font-weight: 400; }

/* ------------------------------------------------------ TOP BAR responsive */

@media (max-width: 980px) {
	.ss-home-topbar-address { display: none; }
}

@media (max-width: 640px) {
	.ss-home-topbar-inner { padding: 8px 16px; flex-wrap: wrap; gap: 10px 16px; min-height: 0; }
	.ss-home-topbar-email span { display: none; }
	.ss-home-topbar-left, .ss-home-topbar-right { gap: 14px; }
}

/* ---------------------------------------------------------------- MENU BAR */

.ss-home-menu {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ss-white);
	box-shadow: 0 1px 0 rgba(26, 24, 25, 0.08), 0 6px 24px rgba(26, 24, 25, 0.05);
}

.ss-home-menu-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: 78px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.ss-home-menu-logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.ss-home-menu-logo img {
	height: 40px;
	width: auto;
	display: block;
}

/* nav panel (list + CTA) sits to the right, list pushed to the far side */
.ss-home-menu-panel {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-left: auto;
}

.ss-home-menu-list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-home-menu-item > a {
	display: inline-block;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--ss-ink);
	text-decoration: none;
	border-radius: 8px;
	position: relative;
	transition: color .18s ease, background-color .18s ease;
}

.ss-home-menu-item > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 4px;
	height: 2px;
	background: var(--ss-amber);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}

.ss-home-menu-item > a:hover { color: var(--ss-amber-dark); }
.ss-home-menu-item > a:hover::after { transform: scaleX(1); }

.ss-home-menu-item.is-active > a { color: var(--ss-amber-dark); }
.ss-home-menu-item.is-active > a::after { transform: scaleX(1); }

/* WhatsApp CTA */
.ss-home-menu-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	background: #25d366;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ss-home-menu-cta:hover {
	background: #1fb457;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

/* cart */
.ss-home-menu-cart {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ss-ink);
	border-radius: 50%;
	transition: color .18s ease, background-color .18s ease;
}

.ss-home-menu-cart:hover { color: var(--ss-amber-dark); background: var(--ss-cream); }

.ss-home-menu-cart-badge {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ss-amber);
	color: var(--ss-navy);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	border-radius: 999px;
}

.ss-home-menu-cart-badge[data-count="0"] { display: none; }

/* mobile burger — hidden on desktop */
.ss-home-menu-toggle-input,
.ss-home-menu-burger { display: none; }

/* ------------------------------------------------------- MENU responsive */

@media (max-width: 900px) {
	.ss-home-menu-inner { min-height: 66px; gap: 16px; }
	.ss-home-menu-logo img { height: 34px; }

	.ss-home-menu-burger {
		order: 3;
		margin-left: auto;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 10px;
		cursor: pointer;
		border-radius: 8px;
	}
	.ss-home-menu-burger span {
		display: block;
		height: 2px;
		width: 100%;
		background: var(--ss-ink);
		border-radius: 2px;
		transition: transform .22s ease, opacity .22s ease;
	}

	.ss-home-menu-cart { order: 2; }

	/* collapsed panel */
	.ss-home-menu-panel {
		order: 4;
		flex-basis: 100%;
		margin-left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height .28s ease, opacity .2s ease, padding .28s ease;
	}
	.ss-home-menu-list { flex-direction: column; align-items: stretch; gap: 2px; }
	.ss-home-menu-item > a { padding: 12px 8px; border-radius: 8px; }
	.ss-home-menu-item > a::after { display: none; }
	.ss-home-menu-item.is-active > a,
	.ss-home-menu-item > a:hover { background: var(--ss-cream); }

	.ss-home-menu-cta { justify-content: center; margin: 8px 0 14px; }

	/* open state */
	.ss-home-menu-toggle-input:checked ~ .ss-home-menu-panel {
		max-height: 420px;
		opacity: 1;
		padding-top: 8px;
	}
	.ss-home-menu-toggle-input:checked ~ .ss-home-menu-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.ss-home-menu-toggle-input:checked ~ .ss-home-menu-burger span:nth-child(2) { opacity: 0; }
	.ss-home-menu-toggle-input:checked ~ .ss-home-menu-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* -------------------------------------------------------------------- HERO */

.ss-home-hero {
	position: relative;
	background:
		radial-gradient(1100px 480px at 92% -8%, rgba(246, 162, 53, 0.16), transparent 60%),
		linear-gradient(180deg, var(--ss-cream) 0%, #ffffff 100%);
	overflow: hidden;
}

.ss-home-hero-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 76px 24px 88px;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: 56px;
}

/* copy */
.ss-home-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 20px;
	padding: 7px 15px 7px 12px;
	background: rgba(246, 162, 53, 0.12);
	border: 1px solid rgba(246, 162, 53, 0.32);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2px;
	color: var(--ss-amber-dark);
}
.ss-home-hero-kicker-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ss-amber);
	box-shadow: 0 0 0 4px rgba(246, 162, 53, 0.22);
}

.ss-home-hero-title {
	margin: 0 0 20px;
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.06;
	letter-spacing: -0.5px;
	font-weight: 800;
	color: var(--ss-ink);
}

.ss-home-hero-divider {
	display: block;
	width: 240px;
	max-width: 100%;
	height: 4px;
	margin: 0 0 22px;
	background: var(--ss-amber);
	border-radius: 999px;
}

.ss-home-hero-text {
	margin: 0 0 32px;
	max-width: 52ch;
	font-size: 17px;
	line-height: 1.7;
	color: #5a5652;
}

.ss-home-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.ss-home-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 26px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.ss-home-hero-btn svg { transition: transform .18s ease; }

.ss-home-hero-btn-primary {
	background: var(--ss-amber);
	color: var(--ss-navy);
	box-shadow: 0 10px 24px rgba(246, 162, 53, 0.32);
}
.ss-home-hero-btn-primary:hover {
	background: var(--ss-amber-dark);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(246, 162, 53, 0.4);
}
.ss-home-hero-btn-primary:hover svg { transform: translateX(3px); }

.ss-home-hero-btn-ghost {
	background: transparent;
	color: var(--ss-ink);
	border: 1.5px solid rgba(26, 24, 25, 0.2);
}
.ss-home-hero-btn-ghost:hover {
	border-color: var(--ss-navy);
	background: var(--ss-navy);
	color: #fff;
	transform: translateY(-2px);
}

/* visual */
.ss-home-hero-visual { position: relative; }

.ss-home-hero-media {
	position: relative;
	border-radius: 24px;
	overflow: visible;
}
.ss-home-hero-media > img,
.ss-home-hero-illus {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	box-shadow: 0 30px 60px rgba(26, 24, 25, 0.14);
}
.ss-home-hero-media > img {
	aspect-ratio: 64 / 52;
	object-fit: cover;
}

/* floating stat badge */
.ss-home-hero-stat {
	position: absolute;
	left: -22px;
	bottom: -22px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 24px;
	background: var(--ss-navy);
	color: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(26, 24, 25, 0.28);
}
.ss-home-hero-stat-value {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--ss-amber);
}
.ss-home-hero-stat-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2px;
	opacity: .9;
}

/* ------------------------------------------------------- HERO responsive */

@media (max-width: 960px) {
	.ss-home-hero-inner {
		grid-template-columns: 1fr;
		gap: 44px;
		padding: 52px 24px 72px;
	}
	.ss-home-hero-visual { order: 2; max-width: 560px; }
	.ss-home-hero-copy { order: 1; }
}

@media (max-width: 560px) {
	.ss-home-hero-actions { flex-direction: column; align-items: stretch; }
	.ss-home-hero-btn { justify-content: center; }
	.ss-home-hero-stat { left: 12px; bottom: -18px; padding: 14px 18px; }
	.ss-home-hero-stat-value { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.ss-home-hero-btn, .ss-home-hero-btn svg { transition: none; }
}

/* ---------------------------------------------------------------- SERVICES */

.ss-home-svc { background: var(--ss-white); }

.ss-home-svc-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 92px 24px;
}

.ss-home-svc-head { text-align: center; max-width: 1000px; margin: 0 auto 52px; }

.ss-home-svc-divider {
	display: block;
	width: 320px;
	max-width: 100%;
	height: 4px;
	margin: 4px auto 20px;
	background: var(--ss-amber);
	border-radius: 999px;
}

.ss-home-svc-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ss-amber-dark);
}
.ss-home-svc-kicker-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ss-amber);
	box-shadow: 0 0 0 4px rgba(246, 162, 53, 0.22);
}

.ss-home-svc-heading {
	margin: 0 0 16px;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.4px;
	color: var(--ss-ink);
}

.ss-home-svc-intro { margin: 0; font-size: 16px; line-height: 1.7; color: #5a5652; }

.ss-home-svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.ss-home-svc-card {
	display: block;
	padding: 38px 32px 32px;
	background: var(--ss-cream);
	border: 1px solid #efe6d8;
	border-radius: 18px;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.ss-home-svc-card:hover {
	transform: translateY(-6px);
	background: #fff;
	border-color: rgba(246, 162, 53, 0.5);
	box-shadow: 0 22px 44px rgba(26, 24, 25, 0.1);
}

.ss-home-svc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 22px;
	border-radius: 16px;
	background: var(--ss-navy);
	color: var(--ss-amber);
	transition: background-color .2s ease, color .2s ease;
}
.ss-home-svc-card:hover .ss-home-svc-icon { background: var(--ss-amber); color: var(--ss-navy); }

.ss-home-svc-title {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 700;
	color: var(--ss-ink);
}

.ss-home-svc-text { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: #6a655f; }

.ss-home-svc-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ss-amber-dark);
}
.ss-home-svc-more svg { transition: transform .18s ease; }
.ss-home-svc-card:hover .ss-home-svc-more svg { transform: translateX(4px); }

@media (max-width: 900px) {
	.ss-home-svc-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
	.ss-home-svc-inner { padding: 68px 24px; }
}

/* ------------------------------------------------------- FEATURED PRODUCTS */

.ss-home-prod { background: var(--ss-cream); }

.ss-home-prod-inner { max-width: 1280px; margin: 0 auto; padding: 92px 24px; }

.ss-home-prod-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
}

.ss-home-prod-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ss-amber-dark);
}
.ss-home-prod-kicker-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ss-amber);
	box-shadow: 0 0 0 4px rgba(246, 162, 53, 0.22);
}
.ss-home-prod-divider {
	display: block;
	width: 107px;
	max-width: 100%;
	height: 4px;
	margin: 2px 0 14px;
	background: var(--ss-amber);
	border-radius: 999px;
}
.ss-home-prod-heading {
	margin: 0;
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 800;
	letter-spacing: -0.4px;
	color: var(--ss-ink);
}

.ss-home-prod-viewall {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ss-navy);
	text-decoration: none;
	background: #fff;
	border: 1px solid #e7dbc9;
	border-radius: 999px;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.ss-home-prod-viewall svg { transition: transform .18s ease; }
.ss-home-prod-viewall:hover { background: var(--ss-amber); border-color: var(--ss-amber); transform: translateY(-1px); }
.ss-home-prod-viewall:hover svg { transform: translateX(3px); }

.ss-home-prod-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.ss-home-prod-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #efe6d8;
	border-radius: 16px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ss-home-prod-card:hover {
	transform: translateY(-5px);
	border-color: rgba(246, 162, 53, 0.5);
	box-shadow: 0 20px 40px rgba(26, 24, 25, 0.1);
}

.ss-home-prod-card-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: #f7f2ea;
	overflow: hidden;
}
.ss-home-prod-card-media img,
.ss-home-prod-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .3s ease;
}
.ss-home-prod-card:hover .ss-home-prod-card-media img { transform: scale(1.05); }

.ss-home-prod-noimg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #cdbfa8;
}

.ss-home-prod-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 10px;
	background: var(--ss-navy);
	color: var(--ss-amber);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	border-radius: 999px;
}

.ss-home-prod-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 18px 18px 20px;
}

.ss-home-prod-cat {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #a99a82;
	margin-bottom: 7px;
}

.ss-home-prod-title {
	margin: 0 0 10px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
}
.ss-home-prod-title a { color: var(--ss-ink); text-decoration: none; }
.ss-home-prod-title a:hover { color: var(--ss-amber-dark); }

.ss-home-prod-price {
	margin-top: auto;
	margin-bottom: 14px;
	font-size: 17px;
	font-weight: 800;
	color: var(--ss-ink);
}
.ss-home-prod-price del { color: #b4a98f; font-weight: 500; font-size: 14px; margin-right: 6px; }
.ss-home-prod-price ins { text-decoration: none; color: var(--ss-amber-dark); }

/* themed loop add-to-cart button (Woo outputs a.button) */
.ss-home-prod-card .button,
.ss-home-prod-card a.add_to_cart_button,
.ss-home-prod-card a.added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 16px;
	background: var(--ss-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.ss-home-prod-card .button:hover,
.ss-home-prod-card a.add_to_cart_button:hover { background: var(--ss-amber); color: var(--ss-navy); }
.ss-home-prod-card a.added_to_cart { margin-top: 8px; background: transparent; color: var(--ss-amber-dark); text-decoration: underline; }
.ss-home-prod-card .button.loading { opacity: .7; }

@media (max-width: 1040px) {
	.ss-home-prod-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
	.ss-home-prod-grid { grid-template-columns: repeat(2, 1fr); }
	.ss-home-prod-inner { padding: 66px 24px; }
	.ss-home-prod-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 400px) {
	.ss-home-prod-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- WHY CHOOSE */

.ss-home-why {
	position: relative;
	background:
		radial-gradient(900px 420px at 12% 0%, rgba(246, 162, 53, 0.14), transparent 62%),
		var(--ss-navy);
	color: #fff;
	overflow: hidden;
}

.ss-home-why-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 92px 24px;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	align-items: center;
	gap: 60px;
}

/* visual */
.ss-home-why-visual { position: relative; }
.ss-home-why-media { position: relative; }
.ss-home-why-media > img,
.ss-home-why-illus {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 22px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.ss-home-why-media > img { aspect-ratio: 52 / 48; object-fit: cover; }

.ss-home-why-tag {
	position: absolute;
	right: -14px;
	top: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	background: var(--ss-amber);
	color: var(--ss-navy);
	font-size: 14px;
	font-weight: 800;
	border-radius: 999px;
	box-shadow: 0 14px 30px rgba(246, 162, 53, 0.35);
}

/* copy */
.ss-home-why-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ss-amber);
}
.ss-home-why-kicker-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ss-amber);
	box-shadow: 0 0 0 4px rgba(246, 162, 53, 0.22);
}

.ss-home-why-divider {
	display: block;
	width: 160px;
	max-width: 100%;
	height: 4px;
	margin: 0 0 24px;
	background: var(--ss-amber);
	border-radius: 999px;
}
.ss-home-why-heading {
	margin: 0 0 16px;
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 800;
	letter-spacing: -0.5px;
	line-height: 1.1;
	color: #fff;
}
.ss-home-why-intro {
	margin: 0 0 30px;
	font-size: 16.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
	max-width: 54ch;
}

.ss-home-why-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 26px;
}
.ss-home-why-item { display: flex; gap: 13px; }

.ss-home-why-check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-top: 2px;
	border-radius: 9px;
	background: rgba(246, 162, 53, 0.16);
	color: var(--ss-amber);
}
.ss-home-why-item-body { display: flex; flex-direction: column; gap: 4px; }
.ss-home-why-item-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; }
.ss-home-why-item-text { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }

.ss-home-why-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 28px;
	background: var(--ss-amber);
	color: var(--ss-navy);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(246, 162, 53, 0.3);
	transition: background-color .18s ease, transform .18s ease;
}
.ss-home-why-cta svg { transition: transform .18s ease; }
.ss-home-why-cta:hover { background: #ffd06a; transform: translateY(-2px); }
.ss-home-why-cta:hover svg { transform: translateX(3px); }

@media (max-width: 960px) {
	.ss-home-why-inner { grid-template-columns: 1fr; gap: 44px; padding: 68px 24px; }
	.ss-home-why-visual { order: 2; max-width: 520px; }
	.ss-home-why-copy { order: 1; }
}
@media (max-width: 560px) {
	.ss-home-why-list { grid-template-columns: 1fr; gap: 18px; }
	.ss-home-why-tag { right: 12px; top: 12px; }
}

/* ------------------------------------------------------------------ FOOTER */

.ss-home-footer { background: var(--ss-navy); color: rgba(255, 255, 255, 0.72); }

.ss-home-footer-top { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.ss-home-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 68px 24px 56px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: 44px;
}

.ss-home-footer-logo { height: 38px; width: auto; display: block; margin-bottom: 20px; }
/* WooCommerce's `.woocommerce img, .woocommerce-page img { height:auto }` (0,1,1)
   out-specifies the line above on every store page and blows the mark up to its
   intrinsic 2532px. Pin it back with a 0,2,0 selector. */
.ss-home-footer .ss-home-footer-logo { height: 38px; width: auto; max-width: 100%; }

.ss-home-footer-tagline {
	margin: 0 0 22px;
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
	max-width: 34ch;
}

.ss-home-footer-socials { display: flex; gap: 10px; }
.ss-home-footer-socials a {
	display: inline-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-color .18s ease, color .18s ease, transform .18s ease;
}
.ss-home-footer-socials a:hover { background: var(--ss-amber); color: var(--ss-navy); transform: translateY(-2px); }

.ss-home-footer-title {
	margin: 0 0 18px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .3px;
	color: #fff;
}

.ss-home-footer-col ul { list-style: none; margin: 0; padding: 0; }
.ss-home-footer-col li { margin-bottom: 11px; }
.ss-home-footer-col a {
	color: rgba(255, 255, 255, 0.66);
	text-decoration: none;
	font-size: 14.5px;
	transition: color .16s ease, padding-left .16s ease;
}
.ss-home-footer-col a:hover { color: var(--ss-amber); }

.ss-home-footer-contact-item {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.66);
}
.ss-home-footer-contact-item svg { flex: 0 0 auto; margin-top: 2px; color: var(--ss-amber); }
.ss-home-footer-contact-item a { color: rgba(255, 255, 255, 0.66); text-decoration: none; }
.ss-home-footer-contact-item a:hover { color: var(--ss-amber); }

.ss-home-footer-bottom-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 22px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.ss-home-footer-copy,
.ss-home-footer-made { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.ss-home-footer-made { color: var(--ss-amber); font-weight: 600; }

@media (max-width: 900px) {
	.ss-home-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; padding: 52px 24px 44px; }
	.ss-home-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
	.ss-home-footer-inner { grid-template-columns: 1fr; }
	.ss-home-footer-bottom-inner { justify-content: center; text-align: center; }
}

/* ---------------------------------------------- temporary WIP placeholder */
.ss-home-wip {
	max-width: 720px;
	margin: 0 auto;
	padding: 96px 24px 120px;
	text-align: center;
}
.ss-home-wip-kicker {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ss-amber);
	margin: 0 0 14px;
}
.ss-home-wip-title { font-size: 44px; margin: 0 0 14px; color: var(--ss-ink); }
.ss-home-wip-text { font-size: 16px; line-height: 1.7; color: #5a5652; margin: 0; }
/* ------------------------------------------------- MENU DROPDOWN (submenus) */
.ss-home-menu-item { position: relative; }

/* caret on parents with children */
.ss-home-menu-item.menu-item-has-children > a { padding-right: 30px; }
.ss-home-menu-item.menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 13px;
	top: 44%;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	opacity: .8;
	transition: transform .2s ease;
}
.ss-home-menu-item.menu-item-has-children:hover > a::before,
.ss-home-menu-item.menu-item-has-children:focus-within > a::before {
	transform: translateY(-20%) rotate(225deg);
}

/* dropdown panel */
.ss-home-menu-list .sub-menu {
	position: absolute;
	top: calc(100% - 2px);
	left: 0;
	min-width: 210px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--ss-white);
	border: 1px solid #eee4d5;
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(26, 24, 25, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	z-index: 60;
}
.ss-home-menu-item:hover > .sub-menu,
.ss-home-menu-item:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ss-home-menu-list .sub-menu .menu-item { display: block; }
.ss-home-menu-list .sub-menu a {
	display: block;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ss-ink);
	text-decoration: none;
	white-space: nowrap;
}
.ss-home-menu-list .sub-menu a::after { display: none; }
.ss-home-menu-list .sub-menu a:hover { background: var(--ss-cream); color: var(--ss-amber-dark); }
.ss-home-menu-list .sub-menu .is-active > a,
.ss-home-menu-list .sub-menu .current-menu-item > a { color: var(--ss-amber-dark); background: var(--ss-cream); }

/* mobile: submenus render inline (static, indented) inside the burger panel */
@media (max-width: 900px) {
	.ss-home-menu-list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		background: transparent;
		min-width: 0;
		padding: 0 0 4px 14px;
	}
	.ss-home-menu-item.menu-item-has-children > a::before { display: none; }
	.ss-home-menu-list .sub-menu a { color: #5a5652; padding: 10px 8px; }
}
/* ---- account icon (left of cart) ---- */
.ss-home-menu-account {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ss-ink);
	border-radius: 50%;
	transition: color .18s ease, background-color .18s ease;
}
.ss-home-menu-account:hover { color: var(--ss-amber-dark); background: var(--ss-cream); }
@media (max-width: 900px) { .ss-home-menu-account { order: 2; } }

/* tighten gap between account + cart icons */
.ss-home-menu-account { margin-right: -14px; }
.ss-home-menu-account { margin-right: -19px; }
/* fix: let the collapsed nav panel wrap to its own line so the top-row icons
   (incl. the hamburger) keep their size instead of being squeezed */
@media (max-width: 900px) {
	.ss-home-menu-inner { flex-wrap: wrap; }
	.ss-home-menu-burger { flex: 0 0 auto; }
	.ss-home-menu-account,
	.ss-home-menu-cart { flex: 0 0 auto; }
}
/* ===== mobile menu: robust overlay (supersedes the flex-wrap approach) ===== */
@media (max-width: 900px) {
	.ss-home-menu-inner { flex-wrap: nowrap; position: relative; gap: 10px; }
	.ss-home-menu-logo { margin-right: auto; }
	.ss-home-menu-logo img { height: 30px; }
	.ss-home-menu-account,
	.ss-home-menu-cart,
	.ss-home-menu-burger { flex: 0 0 auto; }
	.ss-home-menu-burger { margin-left: 0; }

	/* nav panel becomes an absolute dropdown so the top row never wraps */
	.ss-home-menu-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		order: 0;
		margin: 0;
		background: var(--ss-white);
		border-top: 1px solid #eee4d5;
		box-shadow: 0 16px 30px rgba(26, 24, 25, 0.12);
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		padding: 0 20px;
		transition: max-height .3s ease, opacity .2s ease, padding .3s ease;
		z-index: 90;
	}
	.ss-home-menu-toggle-input:checked ~ .ss-home-menu-panel {
		max-height: calc(100vh - 110px);
		overflow-y: auto;
		opacity: 1;
		padding: 12px 20px 18px;
	}
}

/* ===== fix: burger panel — active parent and active child ran together =====
   Top-level links were inline-block (pill only as wide as the label) while
   submenu links are block, so an active parent sat directly on top of its
   active child and the two highlights read as one shape. Rows are now full
   width, the current section's parent keeps the amber label without a filled
   pill, and the submenu is a grouped, indented list with its own rail. */
@media (max-width: 900px) {
	.ss-home-menu-panel .ss-home-menu-item > a { display: block; }

	.ss-home-menu-list > .ss-home-menu-item.current-menu-ancestor:not(.current-menu-item) > a,
	.ss-home-menu-list > .ss-home-menu-item.current-menu-parent:not(.current-menu-item) > a,
	.ss-home-menu-list > .ss-home-menu-item.current_page_parent:not(.current-menu-item) > a {
		background: transparent;
		color: var(--ss-amber-dark);
	}

	.ss-home-menu-list .sub-menu {
		margin: 2px 0 10px;
		padding: 0 0 0 12px;
		border-left: 2px solid #efe6d8;
	}
	.ss-home-menu-list .sub-menu a { border-radius: 8px; }
	.ss-home-menu-list .sub-menu .is-active > a,
	.ss-home-menu-list .sub-menu .current-menu-item > a {
		background: var(--ss-cream);
		box-shadow: inset 2px 0 0 var(--ss-amber);
	}
}

/* ===== footer: Jelajahi + Layanan share one column, About gets its own =====
   The min-width guard matters: this block is appended after the footer's
   @media (max-width:900px) rules, so an unguarded grid declaration would
   re-apply four columns on mobile. */
.ss-home-footer-group + .ss-home-footer-group { margin-top: 26px; }
@media (min-width: 901px) {
	.ss-home-footer-inner { grid-template-columns: 1.5fr 1fr 1.15fr 1.25fr; }
}

/* ===== footer bottom bar: Terms / Privacy links ===== */
.ss-home-footer-legal { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.4); }
.ss-home-footer-legal a { color: rgba(255, 255, 255, 0.62); text-decoration: none; transition: color .16s ease; }
.ss-home-footer-legal a:hover { color: var(--ss-amber); }
@media (max-width: 520px) {
	.ss-home-footer-legal { justify-content: center; }
}

/* ===== top bar: legal links took the address slot (and its hide rule) ===== */
@media (max-width: 980px) {
	.ss-home-topbar-legal { display: none; }
}