/* =========================================================
   SPECTRA BETTA — RESPONSIVE.CSS
   Semua media query global (768px & 480px) dikumpulkan di sini
   supaya mudah dicari & tidak tersebar di banyak file.
   Diisi bertahap seiring setiap section selesai (PHASE 11).
   ========================================================= */

/* --- PRODUCT GRID (PHASE 6): tablet 3 kolom ---
   Ditulis sebelum blok 768px supaya di layar sangat sempit,
   aturan 768px (2 kolom) yang menang (urutan cascade). */
@media (max-width: 1024px) {
	.sb-product-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	/* Tablet & mobile besar */

	/* --- HEADER MOBILE (PHASE 11): logo + hamburger + cart --- */
	.sb-nav {
		display: none;
	}

	.sb-icon-btn--desktop-only,
	.sb-btn-wa--desktop-only {
		display: none;
	}

	.sb-hamburger {
		display: flex;
	}

	.sb-topbar__live-text {
		display: none;
	}

	/* --- HERO (PHASE 3) ---
	   Urutan mobile: badge -> heading -> desc -> trust -> tombol -> gambar ikan. */
	.sb-hero {
		min-height: auto;
		padding: 36px 0 32px;
	}

	.sb-hero__glow-bg {
		opacity: 0.7;
	}

	.sb-hero__content {
		max-width: none;
	}

	.sb-hero__heading {
		font-size: 46px;
	}

	.sb-hero__trust {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px 16px;
		margin-bottom: 28px;
	}

	.sb-hero__cta {
		width: 100%;
	}

	.sb-hero__cta .sb-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* Gambar ikan pindah ke bawah konten, mengikuti alur normal (bukan absolute lagi). */
	.sb-hero__visual {
		position: relative;
		inset: auto;
		top: auto;
		right: auto;
		transform: none;
		width: 100%;
		max-width: 420px;
		margin: 8px auto 0;
	}

	/* --- STATS (PHASE 4) --- */
	.sb-stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sb-stats__item:nth-child(2) {
		border-left: 1px solid var(--sb-border);
	}

	.sb-stats__item:nth-child(3) {
		border-left: none;
		border-top: 1px solid var(--sb-border);
	}

	.sb-stats__item:nth-child(4) {
		border-top: 1px solid var(--sb-border);
	}

	/* --- NEW STOCK / PRODUCT GRID (PHASE 6) --- */
	.sb-new-stock__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.sb-new-stock__countdown {
		align-items: flex-start;
	}

	.sb-product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.sb-product-card__body {
		padding: 12px;
	}

	/* --- BENEFITS (PHASE 7): jadi horizontal slider --- */
	.sb-benefits__grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 4px;
		margin-top: 28px;
		padding-bottom: 6px;
	}

	.sb-benefits__item {
		scroll-snap-align: start;
		flex: 0 0 65%;
		border-left: none !important;
		border: 1px solid var(--sb-border);
		border-radius: var(--sb-radius-lg);
		padding: 24px 18px;
	}

	/* --- TESTIMONIALS (PHASE 8) --- */
	.sb-testimonials__inner {
		flex-direction: column;
	}

	.sb-testimonials__rating {
		width: 100%;
	}

	/* --- SHIPPING & PAYMENT (PHASE 9) --- */
	.sb-shipping__grid {
		grid-template-columns: 1fr;
	}

	/* --- CTA full width di mobile (PHASE 11) --- */
	.sb-btn--block {
		max-width: none;
	}

	/* --- FOOTER (PHASE 10) --- */
	.sb-footer__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sb-wa-float {
		width: 52px;
		height: 52px;
		right: 16px;
		bottom: 16px;
	}

	/* --- FOOTER ACCORDION (PHASE 11) ---
	   Kolom Informasi/Bantuan/Kontak Kami jadi bisa dibuka-tutup.
	   Kolom Brand & Newsletter tetap selalu terbuka. */
	.sb-footer__col {
		padding: 18px 0;
		border-bottom: 1px solid var(--sb-border);
	}

	.sb-footer__col--brand,
	.sb-footer__col:last-child {
		border-bottom: none;
	}

	.sb-footer__col:has(.sb-footer__accordion-toggle) {
		padding: 0;
	}

	.sb-footer__accordion-toggle {
		cursor: pointer;
		padding: 18px 0;
	}

	.sb-footer__accordion-icon {
		display: block;
	}

	.sb-footer__col.is-open .sb-footer__accordion-icon {
		transform: rotate(180deg);
	}

	.sb-footer__col ul {
		display: none;
		padding-bottom: 18px;
	}

	.sb-footer__col.is-open ul {
		display: flex;
	}
}

@media (max-width: 480px) {
	/* Mobile kecil */

	.sb-btn-wa span {
		display: none;
	}

	.sb-btn-wa {
		padding: 0 10px;
	}
}