/*
 * Deep Strike Fishing — gaya utama.
 *
 * Nilai warna, ukuran font, dan jarak di bawah disalin dari design token Figma
 * (file "Deep Strike Fishing", artboard "Beranda — Desktop 1440 (Usulan Baru)").
 * Kalau ingin mengubah warna theme secara menyeluruh, ubah variabel di :root —
 * bukan nilai satu per satu di bawahnya.
 *
 * Daftar isi
 * 01. Token
 * 02. Dasar
 * 03. Komponen umum (tombol, badge, ikon)
 * 04. Header
 * 04b. Saran pencarian, panel akun, mega menu
 * 05. Hero
 * 06. Pita jaminan
 * 07. Section & kepala section
 * 08. Kartu produk, carousel, grid
 * 09. Mozaik kategori
 * 10. Pita voucher
 * 11. Mancing Mania (artikel)
 * 12. Footer & tombol WhatsApp
 * 13. Halaman biasa, arsip, WooCommerce
 * 13b. Kepala halaman, katalog, dan filter
 * 13c. Halaman satu produk
 * 13d. Mancing Mania: daftar dan artikel
 * 13e. Wishlist dan halaman 404
 * 14. Responsif
 * 15. Hero berbilah banyak
 * 16. Tombol dan pita ajakan di halaman isi
 * 17. Artikel: halaman satu tulisan
 * 18. Halaman keranjang
 * 19. Halaman Data & Pengiriman
 * 20. Kepala berlangkah dan halaman Pesanan Diterima
 * 21. Masuk, daftar, dan kata sandi
 * 22. Wishlist
 * 23. Tata letak Akun Saya
 * 24. Detail Akun
 * 25. Buku alamat
 * 26. Pesanan, detail pesanan, dan dasbor
 * 27. Bilah bawah khusus ponsel
 * 28. Geseran di ponsel: pita jaminan dan kategori
 * 29. Panel Masuk dan tombol WhatsApp di layar ponsel
 * 30. Dasbor akun di layar ponsel
 * 31. Sapuan akhir layar ponsel
 * 32. Halaman satu produk di layar ponsel
 * 33. Voucher: daftar yang bisa dipilih
 * 34. Combo Hemat
 * 35. Tombol dan kolom isian di layar ponsel
 * 36. Pemilih alamat lewat peta
 * 37. Rekomendasi untuk Anda
 * 38. Flash Sale
 * 39. Hero di layar sempit
 * 40. Penyesuaian ponsel: hero, Flash Sale, tombol section, halaman produk, filter
 * 41. Kamus Angler dan artikel di ponsel
 * 42. Perbaikan keranjang dan rak artikel di ponsel
 * 43. Panah dropdown, bilah bawah, dan kotak pilihan di ponsel
 * 44. Daftar produk keranjang di ponsel
 * 45. Saran combo di keranjang
 * 46. Kotak pilihan provinsi dan negara
 * 47. Poin belanja
 * 48. Poin: lencana, tukar poin, dan halaman Poin
 * 49. Kabari saya saat stok ada
 * 50. Harga grosir di halaman produk
 * 51. Pre-order
 * 52. Retur
 * 53. Sering dibeli bersama
 * 54. Ulasan dengan foto
 * 55. Pengingat keranjang (checkout tamu)
 * 56. Referal
 * 57. Sasaran sentuh minimal
 * 58. Kartu produk di HP, wishlist di foto, stok ringkas
 * 59. Foto profil
 * 60. Tulisan tombol selalu satu baris
 * 61. Footer dan sasaran sentuh di HP (audit 17 Oktober 2026)
 * 62. Halaman Cara Pembayaran (ornamen latar)
 */

/* ============================================================ 01. Token */

:root {
	/* Warna — dari Figma variables. */
	--ds-bg-0: #04080a;
	--ds-bg-1: #070f11;
	--ds-bg-2: #0b1417;
	--ds-surface: #1a272b;
	/* Lebih gelap dari surface, dipakai untuk kolom isian di atas kartu:
	   kotak centang filter dan kotak urutkan. Di Figma namanya
	   Background/Canvas. */
	--ds-canvas: #111b1e;
	--ds-border: #2c4046;
	--ds-border-strong: #34474e;

	--ds-text: #f5f8f9;
	--ds-text-2: #9aa5ab;
	/* Sedikit lebih terang dari Figma (#7d8c93): teks kecil abu-abu di atas
	   kartu (#1a272b) hanya 4,41:1, di bawah batas WCAG AA 4,5:1. */
	--ds-text-3: #83929a;
	--ds-chrome-350: #c8d0d4;

	/* Hijau isi tombol. Dari Figma #2e9e77, digelapkan karena tulisan putih
	   di atasnya hanya 3,34:1 (batas WCAG AA untuk teks tombol 14px: 4,5:1).
	   #237f60 = 4,6:1 terhadap #f5f8f9 dan 4,9:1 terhadap putih. */
	--ds-accent: #237f60;
	/* Warna Figma yang asli tetap dipakai untuk TULISAN hijau di latar gelap -
	   di sana justru warna yang lebih terang yang lolos (4,58:1 di atas kartu). */
	--ds-accent-text: #2e9e77;
	--ds-accent-300: #72d2ae;
	--ds-accent-600: #1a6f52;
	--ds-accent-700: #12513c;
	--ds-accent-line: #46bc91;

	/* Merah potongan harga. Satu warna tidak bisa lolos untuk dua tugasnya:
	   sebagai LATAR lencana (-15%) tulisan terang di atasnya butuh merah yang
	   lebih gelap, sebagai TULISAN harga coret di atas kartu gelap butuh merah
	   yang lebih terang. Figma #d9483b gagal di keduanya (3,98:1 dan 3,6:1).
	   --ds-danger untuk latar: #c43d31 = 4,85:1 dengan #f5f8f9.
	   --ds-danger-text untuk tulisan: #ef6b5e = 5,07:1 di atas #1a272b. */
	--ds-danger: #c43d31;
	--ds-danger-text: #ef6b5e;
	/* Coral muda untuk teks di atas latar merah tipis - #d9483b sendiri terlalu
	   gelap untuk dibaca di sana. */
	--ds-danger-300: #f0968c;
	/* Emas penanda brand resmi di halaman produk. */
	--ds-gold: #e8b54a;
	--ds-new: #177a42;
	--ds-voucher-text: #a7ead2;
	--ds-article-kicker: #8fb6c7;
	--ds-white: #fff;
	/* Lingkaran tombol di atas foto (hati wishlist di galeri produk). */
	--ds-overlay: rgba(4, 8, 10, 0.72);
	--ds-overlay-line: rgba(255, 255, 255, 0.4);

	/* Tata letak.
	 *
	 * Isi halaman tidak pernah lebih lebar dari 1320px, dari header sampai
	 * footer, persis seperti kanvas Figma 1440 dengan margin 60 di kiri-kanan.
	 *
	 * Yang diatur cuma PADDING-nya, bukan lebar tiap bagian. Header, footer,
	 * hero, dan setiap section sudah memakai --ds-pad sebagai padding kiri-kanan,
	 * jadi satu nilai ini menahan semuanya sekaligus - tidak perlu membungkus
	 * ulang tiap bagian dengan div pembatas.
	 *
	 * max() membuatnya bekerja dua arah: di layar lebar sisa ruangnya dibagi dua
	 * menjadi margin, sehingga isinya berhenti di 1320 dan tetap di tengah; di
	 * layar sempit hasil pembagiannya negatif, jadi yang menang 24px - jarak
	 * minimum supaya teks tidak menempel di tepi layar.
	 *
	 * Di 1440 hasilnya (1440-1320)/2 = 60px, sama persis dengan Figma.
	 */
	--ds-maxw: 1320px;
	--ds-pad: max(24px, calc((100vw - var(--ds-maxw)) / 2));

	--ds-radius-sm: 9px;
	--ds-radius: 12px;
	--ds-radius-lg: 16px;

	--ds-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--ds-header-top: 76px;
	--ds-header-bar: 52px;
}

/* ============================================================ 02. Dasar */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.ds-theme {
	margin: 0;
	font-family: var(--ds-font);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ds-text);
	background-color: var(--ds-bg-0);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Jaring pengaman terhadap geseran menyamping.
 *
 * Setiap ornamen berukuran tetap di situs ini sudah dipotong wadahnya
 * masing-masing, tapi satu saja yang terlewat membuat SELURUH halaman bisa
 * digeser ke kanan di ponsel - dan peramban ponsel menanggapinya dengan
 * mengecilkan tampilan sendiri, sehingga seluruh teks halaman ikut mengecil.
 * Gejalanya jauh dari sebabnya, dan itu yang membuatnya mahal dicari.
 *
 * clip, bukan hidden: hidden akan menjadikan .ds-page kotak yang bisa digulir,
 * dan itu mematikan "scroll ke atas" milik peramban serta memotong panel yang
 * memang sengaja meluber ke bawah. clip cuma memotong, tanpa membuat kotak
 * gulir baru - dan hanya pada sumbu mendatar. */
.ds-page {
	position: relative;
	overflow-x: clip;
	min-height: 100vh;
	background-image:
		radial-gradient(90% 76% at 39% 97%, rgba(18, 81, 60, 0.4) 0%, rgba(18, 81, 60, 0.15) 42%, rgba(18, 81, 60, 0) 100%),
		radial-gradient(48% 58% at 8% 71%, rgba(46, 158, 119, 0.2) 0%, rgba(46, 158, 119, 0.08) 42%, rgba(46, 158, 119, 0) 100%),
		radial-gradient(82% 96% at 92% 10%, rgba(26, 111, 82, 0.34) 0%, rgba(26, 111, 82, 0.13) 42%, rgba(26, 111, 82, 0) 100%),
		linear-gradient(180deg, var(--ds-bg-0) 0%, var(--ds-bg-1) 45%, var(--ds-bg-2) 100%);
	background-attachment: scroll;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--ds-accent-300);
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ds-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 200;
	width: auto;
	height: auto;
	padding: 10px 18px;
	clip: auto;
	background: var(--ds-accent);
	border-radius: var(--ds-radius-sm);
	color: var(--ds-white);
}

/* Kotak abu-abu yang muncul saat gambar belum diupload. */
.ds-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 80px;
	color: rgba(154, 165, 171, 0.35);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 60%),
		var(--ds-surface);
	border-radius: inherit;
}

/* =============================================== 03. Komponen umum */

.ds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	border-radius: 10px;
	font-weight: 600;
	text-align: center;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ds-btn--primary {
	padding: 15px 34px;
	font-size: 13.5px;
	line-height: 21.6px;
	letter-spacing: 1.215px;
	text-transform: uppercase;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 2px solid rgba(255, 255, 255, 0.1);
}

.ds-btn--primary:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

.ds-btn--ghost {
	height: 46px;
	padding: 0 22px;
	font-size: 15px;
	line-height: 22.5px;
	color: var(--ds-text);
	background: transparent;
	border: 1px solid var(--ds-border-strong);
	white-space: nowrap;
}

/* Tombol yang berdiri di dalam isi halaman.
 *
 * .ds-entry__content a mewarnai setiap tautan hijau muda dan menggarisbawahinya
 * supaya paragraf tetap terbaca. Kekhususannya (0,1,1) mengalahkan
 * .ds-btn--primary (0,1,0), jadi tulisan di dalam tombol ikut kehijauan dan
 * bergaris bawah - paling terlihat di layar keranjang kosong, tempat tombolnya
 * hijau di atas hijau. Penawarnya ditaruh di sini, di tempat tombolnya
 * didefinisikan, bukan di bagian halaman yang kebetulan menemukannya. */
.ds-entry__content a.ds-btn {
	text-decoration: none;
}

.ds-entry__content a.ds-btn--primary,
.ds-entry__content a.ds-btn--primary:hover {
	color: var(--ds-white);
}

.ds-entry__content a.ds-btn--ghost {
	color: var(--ds-text);
}

.ds-btn--ghost:hover {
	color: var(--ds-text);
	border-color: var(--ds-accent);
	background: rgba(46, 158, 119, 0.1);
}

.ds-round-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: transparent;
	border: 1px solid var(--ds-border-strong);
	border-radius: 10px;
	transition: border-color 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}

.ds-round-btn:hover:not(:disabled) {
	border-color: var(--ds-accent);
	background: rgba(46, 158, 119, 0.1);
}

.ds-round-btn:disabled {
	opacity: 0.45;
	cursor: default;
}

[data-ds-carousel-prev] .ds-icon {
	transform: rotate(180deg);
}

.ds-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ds-radius-sm);
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.ds-icon-btn--outline {
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
}

.ds-icon-btn--outline:hover {
	border-color: var(--ds-accent);
	color: var(--ds-accent-300);
}

.ds-icon-btn--solid {
	width: 42px;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 0;
}

.ds-icon-btn--solid:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

.ds-icon-btn.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

.ds-badge {
	position: absolute;
	top: -1px;
	left: -1px;
	z-index: 2;
	padding: 6px 11px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 15px;
	letter-spacing: 0.25px;
	color: var(--ds-text);
	border-radius: 0 0 8px 0;
}

.ds-badge--sale {
	background: var(--ds-danger);
}

.ds-badge--new {
	background: var(--ds-new);
}

/* Catatan aksesibilitas dari desainer: kombinasi #9AA5AB + putih rasionya 2.52
 * dan gagal WCAG AA. Di sini latarnya digelapkan agar kontrasnya lolos. */
.ds-badge--muted {
	color: var(--ds-text);
	background: #4a5a61;
}

.ds-kicker {
	font-size: 13px;
	font-weight: 500;
	line-height: 20.8px;
	letter-spacing: 2.34px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
}

.ds-rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--ds-text-2);
}

.ds-rating .ds-icon {
	color: #e3a127;
}

/* ============================================================ 04. Header */

.ds-header {
	position: relative;
	z-index: 40;
}

.ds-header__top,
.ds-header__bar {
	display: flex;
	align-items: center;
	padding: 0 var(--ds-pad);
	background: var(--ds-surface);
	border-bottom: 1px solid var(--ds-border);
}

.ds-header__top {
	height: var(--ds-header-top);
	gap: 10px;
}

.ds-header__brand .custom-logo-link,
.ds-header__brand .ds-logo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ds-header__brand img {
	width: auto;
	max-height: 56px;
}

.ds-logo--text .ds-logo__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--ds-white);
	background: var(--ds-accent);
	border-radius: 999px;
}

.ds-logo--text .ds-logo__name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.ds-header__search {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 50px;
}

.ds-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 38px;
	padding: 10px 14px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

.ds-search__field {
	flex: 1 1 auto;
	min-width: 0;
	font-family: inherit;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text);
	background: transparent;
	border: 0;
	outline: none;
}

.ds-search__field::placeholder {
	color: var(--ds-text-2);
}

/* Kolom isiannya sendiri memakai outline: none (bingkainya milik .ds-search),
   jadi tanpa aturan ini fokus keyboard di kolom cari tidak terlihat sama
   sekali. Bingkai fokus dipasang di kotak luarnya. */
.ds-search:focus-within {
	border-color: var(--ds-accent-300);
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

/* Ikonnya 18px, tapi tombolnya 38x38: padding 10px di sekelilingnya, dan
   margin negatif yang sama supaya letak ikon dan lebar kolom cari tidak
   berubah. Sasaran 18px terlalu kecil untuk jari di ponsel. */
.ds-search__submit {
	display: inline-flex;
	padding: 10px;
	margin: -10px;
	color: var(--ds-text-2);
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-search__submit:hover {
	color: var(--ds-accent-300);
}

.ds-header__wa {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
	width: 260px;
}

.ds-header__wa-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--ds-white);
	background: var(--ds-accent);
	border-radius: 999px;
}

.ds-header__wa-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ds-header__wa-title {
	font-size: 14px;
	/* Tebal supaya ajakan menghubungi toko menonjol dari baris "melalui
	   WhatsApp" di bawahnya - keduanya sama-sama kecil, dan tanpa beda tebal
	   mata membaca keduanya sebagai satu paragraf abu. */
	font-weight: 700;
	line-height: 22.4px;
	color: var(--ds-text);
}

.ds-header__wa-sub {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-2);
}

.ds-header__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
}

/* Tombol akun adalah <button>, dan peramban memberi setiap <button> latar abu
 * terang bawaannya. Tanpa reset ini, satu-satunya elemen di header yang
 * berlatar putih justru tombol ini - persis yang terlihat di situs.
 *
 * font-family ikut disetel karena <button> juga tidak mewarisi font dari
 * halaman; tanpa itu namanya tampil dengan huruf sistem, bukan Inter. */
.ds-header__account {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 6px;
	font-family: inherit;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.ds-header__account:hover {
	color: var(--ds-accent-300);
}

.ds-header__icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 40px;
}

.ds-count {
	position: absolute;
	top: 2px;
	right: -4px;
	min-width: 17px;
	padding: 0 4px;
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
	color: var(--ds-white);
	background: var(--ds-accent);
	border-radius: 999px;
}

.ds-count.is-empty {
	display: none;
}

.ds-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

/* Garis tiga saat tertutup, silang saat terbuka - dipilih dari aria-expanded,
   atribut yang sama yang dibaca pembaca layar. */
.ds-header__burger-open,
.ds-header__burger-close {
	display: inline-flex;
}

.ds-header__burger-close,
.ds-header__burger[aria-expanded="true"] .ds-header__burger-open {
	display: none;
}

.ds-header__burger[aria-expanded="true"] .ds-header__burger-close {
	display: inline-flex;
}

.ds-header__bar {
	height: var(--ds-header-bar);
	justify-content: space-between;
}

.ds-header__catalog {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding-right: 20px;
	font-size: 13px;
	font-weight: 600;
	line-height: 20.8px;
	letter-spacing: 0.52px;
	text-transform: uppercase;
	white-space: nowrap;
}

.ds-menu {
	display: flex;
	align-items: center;
	gap: 25px;
	margin: 0;
}

.ds-menu li {
	position: relative;
}

/* Item "Katalog Produk" di menu utama hanya untuk tablet dan ponsel - di layar
   lebar tombol dropdown Katalog Produk sudah ada di kiri baris ini. */
.ds-menu__catalog {
	display: none;
}

.ds-menu a {
	display: inline-flex;
	align-items: center;
	padding: 0 20px;
	font-size: 13px;
	font-weight: 600;
	line-height: 20.8px;
	letter-spacing: 0.52px;
	text-transform: uppercase;
	white-space: nowrap;
}

.ds-menu--empty {
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ds-text-2);
}

/* Submenu sederhana. */
.ds-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	display: none;
	flex-direction: column;
	min-width: 220px;
	padding: 8px 0;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

.ds-menu li:hover > .sub-menu,
.ds-menu li:focus-within > .sub-menu {
	display: flex;
}

.ds-menu .sub-menu a {
	padding: 8px 16px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	font-size: 14px;
}

/* ====================== 04b. Saran pencarian, panel akun, mega menu */

/* ---- Saran pencarian ---- */

.ds-suggest {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 60;
	/* Tiga bagian sekaligus - riwayat, pernah dibeli, dan hasil pencocokan -
	   tidak muat di 420px, dan bagian ketiga itulah yang paling sering dituju.
	   vh dipakai supaya di layar pendek panelnya tetap tidak menutupi seluruh
	   halaman di belakangnya. */
	max-height: min(72vh, 480px);
	overflow-y: auto;
	padding: 6px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.ds-suggest[hidden] {
	display: none;
}

.ds-suggest__item {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px;
	border-radius: var(--ds-radius-sm);
}

.ds-suggest__item:hover,
.ds-suggest__item.is-active {
	background: rgba(46, 158, 119, 0.12);
}

.ds-suggest__img {
	flex: none;
	width: 44px;
	height: 44px;
	object-fit: cover;
	background: var(--ds-bg-2);
	border-radius: 8px;
}

.ds-suggest__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ds-suggest__name {
	overflow: hidden;
	font-size: 13.5px;
	line-height: 19px;
	color: var(--ds-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ds-suggest__price {
	font-size: 13px;
	font-weight: 600;
	color: var(--ds-accent-300);
}

.ds-suggest__all {
	display: block;
	margin-top: 4px;
	padding: 10px 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ds-accent-300);
	text-align: center;
	border-top: 1px solid var(--ds-border);
}

.ds-suggest__note {
	padding: 14px 10px;
	font-size: 13px;
	color: var(--ds-text-2);
	text-align: center;
}

/* ---- Tiga bagian di dalam panel pencarian ---- */

/* Garis pemisah dipasang di bagian KEDUA dan seterusnya, bukan di bawah setiap
   bagian. Dipasang di bawah, bagian terakhir mendapat garis yang tidak
   memisahkan apa pun - ia cuma menggantung di atas tepi panel. */
.ds-suggest__sec + .ds-suggest__sec {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--ds-border);
}

.ds-suggest__sec[hidden] {
	display: none;
}

.ds-suggest__head {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 8px 8px 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-text-3);
}

.ds-suggest__clear {
	padding: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-suggest__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 8px 8px;
}

/* Kata dan tombol hapusnya satu kotak, tapi dua tombol.
 *
 * Menaruh tombol hapus DI DALAM tombol kata tidak sah di HTML - tombol tidak
 * boleh memuat tombol - dan peramban akan memisahkannya sendiri di tempat yang
 * tidak terduga. Jadi keduanya bersanding di dalam satu pembungkus yang
 * digambar seperti satu chip. */
.ds-suggest__chip {
	display: inline-flex;
	align-items: center;
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 999px;
}

.ds-suggest__chip:hover {
	border-color: var(--ds-border-strong);
}

.ds-suggest__term {
	padding: 7px 4px 7px 12px;
	font-size: 13px;
	color: var(--ds-text);
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-suggest__drop {
	padding: 7px 10px 7px 4px;
	font-size: 14px;
	line-height: 1;
	color: var(--ds-text-3);
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-suggest__drop:hover {
	color: var(--ds-danger-300);
}

/* Penanda "Beli lagi" di baris produk yang pernah dibeli. Itu satu-satunya
   pembeda antara baris di bagian ini dan baris hasil pencarian di bawahnya -
   keduanya digambar sama persis. */
.ds-suggest__again {
	flex: none;
	margin-left: auto;
	padding: 4px 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.14);
	border-radius: 999px;
}

.ds-suggest__item[hidden] {
	display: none;
}

/* Chip kategori. Sengaja dibedakan dari chip riwayat: yang ini tautan ke
   halaman kategori, yang itu tombol yang mengisi ulang kolom pencarian. Garis
   hijau tipisnya yang memberi tahu bedanya sebelum diketuk. */
.ds-suggest__cat {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	font-size: 13px;
	color: var(--ds-text);
	background: rgba(46, 158, 119, 0.1);
	border: 1px solid rgba(70, 188, 145, 0.35);
	border-radius: 999px;
}

.ds-suggest__cat:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
	border-color: var(--ds-accent-line);
}

.ds-suggest__cat[hidden] {
	display: none;
}

/* ---- Panel akun ---- */

.ds-header__acct {
	position: relative;
}

.ds-dd {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 60;
	width: 320px;
	padding: 22px;
	color: var(--ds-text);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-lg);
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
}

.ds-dd[hidden] {
	display: none;
}

/* ---- Sudah masuk: sapaan ---- */

.ds-dd__user {
	display: flex;
	gap: 12px;
	align-items: center;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ds-border);
}

/* Lingkaran inisial, bukan foto profil. Sebagian besar pembeli tidak pernah
   mengunggah foto, dan avatar bawaan Gravatar adalah gambar acak yang tidak
   berarti apa-apa bagi mereka. Inisial selalu benar dan selalu ada. */
.ds-dd__avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ds-white);
	background: var(--ds-accent-600);
	border-radius: 999px;
}

.ds-dd__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ds-dd__name {
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	color: var(--ds-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ds-dd__email {
	overflow: hidden;
	font-size: 13px;
	color: var(--ds-text-2);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Sudah masuk: daftar pintasan ---- */

.ds-dd__links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ds-border);
}

.ds-dd__row {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	font-size: 14.5px;
	color: var(--ds-text);
	border-radius: var(--ds-radius-sm);
}

.ds-dd__row:hover {
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.12);
}

/* Halaman yang sedang dibuka ditandai dengan latar DAN warna, bukan hanya
   warna: di daftar sependek ini, satu baris hijau di antara lima baris putih
   mudah terbaca sebagai tautan yang disorot, bukan sebagai posisi sekarang. */
.ds-dd__row.is-here {
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.14);
}

.ds-dd__row .ds-icon {
	flex: none;
	opacity: 0.9;
}

.ds-dd__row--out {
	margin-top: 12px;
	color: var(--ds-danger-text);
}

.ds-dd__row--out:hover {
	color: var(--ds-danger-text);
	background: rgba(217, 72, 59, 0.12);
}

/* ---- Belum masuk: formulir ---- */

.ds-dd__title {
	margin-bottom: 18px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ds-text);
}

/* Formulir milik WordPress. Hanya penataannya yang diatur di sini — struktur
   dan nama kolomnya sengaja tidak disentuh, supaya wp-login.php tetap
   mengenalinya apa adanya. */
.ds-dd .login-username,
.ds-dd .login-password {
	margin-bottom: 14px;
}

.ds-dd label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-dd input[type="text"],
.ds-dd input[type="password"] {
	width: 100%;
	height: 42px;
	padding: 0 13px;
	font-family: inherit;
	font-size: 14px;
	color: var(--ds-text);
	background: var(--ds-bg-2);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

.ds-dd input:focus {
	outline: none;
	border-color: var(--ds-accent);
	box-shadow: 0 0 0 3px rgba(46, 158, 119, 0.18);
}

.ds-dd .login-remember {
	margin-bottom: 18px;
}

.ds-dd .login-remember label {
	display: flex;
	gap: 9px;
	align-items: center;
	margin: 0;
	font-size: 13.5px;
	color: var(--ds-text-2);
	cursor: pointer;
}

.ds-dd .login-remember input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--ds-accent);
}

.ds-dd .login-submit {
	margin: 0;
}

.ds-dd input[type="submit"] {
	width: 100%;
	height: 46px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 0;
	border-radius: var(--ds-radius-sm);
	cursor: pointer;
}

.ds-dd input[type="submit"]:hover {
	background: var(--ds-accent-600);
}

/* Dua tautan di kaki kartu, saling menjauh ke tepi masing-masing — sesuai
   desain, dan kebetulan juga membuat keduanya tidak pernah salah ditekan. */
.ds-dd__links-row {
	display: flex;
	gap: 14px;
	justify-content: space-between;
	margin-top: 18px;
	font-size: 13px;
}

.ds-dd__links-row a {
	color: var(--ds-accent-300);
}

.ds-dd__links-row a:hover {
	color: var(--ds-accent-line);
}

/* ---- Mega menu katalog ----
 *
 * Lebarnya mengikuti jalur isi header (1320px), bukan seluruh layar, dan
 * .ds-header__cat yang jadi acuan posisinya. Karena tombol Katalog Produk mulai
 * tepat di tepi jalur itu, "left:0" ditambah lebar 1320 membuat panel ini
 * sejajar dengan logo di atasnya.
 *
 * box-sizing:border-box penting di sini: dengan content-box, 1320 akan menjadi
 * 1320 + padding + border dan tepi kanannya melewati menu di atasnya.
 */

/* Setinggi baris nav, bukan setinggi isinya.
 *
 * Panel mega menu diposisikan dengan top:100% terhadap kotak ini. Kalau kotak
 * ini hanya setinggi tulisan "KATALOG PRODUK" dan dipusatkan di baris 52px,
 * maka 100% berhenti sekitar 6px SEBELUM dasar baris - dan panelnya menggantung
 * menutupi ujung bawah baris nav.
 *
 * align-self:stretch membuatnya setinggi barisnya, jadi top:100% jatuh tepat di
 * garis bawah .ds-header__bar. */
.ds-header__cat {
	position: relative;
	display: flex;
	align-items: center;
	align-self: stretch;
}
/* Panel akun harus menimpa baris nav di bawahnya, jadi urutan tumpukan kedua
   baris ditulis eksplisit, bukan mengandalkan urutan DOM. */
.ds-header__top {
	position: relative;
	z-index: 50;
}

.ds-header__bar {
	position: relative;
	z-index: 45;
}

.ds-mega {
	position: absolute;
	/* Tepat di garis bawah baris nav.
	   Dulu ditulis 39px. Angka itu berhenti beberapa piksel sebelum dasar
	   barisnya, jadi panelnya tampak menggantung di tengah baris. 100% jatuh
	   persis di garis bawah .ds-header__bar - dan ikut menyesuaikan sendiri
	   kalau tinggi barisnya suatu saat diubah, karena .ds-header__cat sudah
	   dibuat setinggi barisnya lewat align-self:stretch.

	   Ditambah 1% lagi atas permintaan, supaya tepinya sedikit melewati garis
	   itu dan tidak ada celah rambut di antara keduanya. */
	top: 101%;
	left: 0;
	z-index: 55;
	box-sizing: border-box;
	width: var(--ds-maxw);
	max-width: calc(100vw - 40px);
	padding: 24px 26px 20px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-top: 0;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
}

.ds-mega * {
	box-sizing: border-box;
}

.ds-mega[hidden] {
	display: none;
}

.ds-mega__layout {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	align-items: stretch;
}

/* ---- Daftar kategori utama di kiri ---- */

.ds-mega__rail {
	padding-right: 20px;
	border-right: 1px solid var(--ds-border);
}

.ds-mega__parent {
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 8px 10px;
	color: var(--ds-text);
	border-radius: 10px;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.ds-mega__parent:hover,
.ds-mega__parent.is-active {
	color: var(--ds-accent-text);
	background: rgba(46, 158, 119, 0.12);
}

.ds-mega__thumb {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	overflow: hidden;
	background: var(--ds-bg-2);
	border-radius: 9px;
}

.ds-mega__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-mega__thumb.is-icon {
	color: var(--ds-accent-text);
}

.ds-mega__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Panah tampil di SEMUA baris, bukan hanya yang sedang disorot.
 *
 * Versi sebelumnya menyembunyikannya sampai barisnya disentuh, dengan alasan
 * tujuh panah sekaligus membuat daftarnya ramai. Desainnya memutuskan
 * sebaliknya, dan itu keputusan yang lebih baik: panah yang muncul-hilang
 * membuat baris seolah bergeser, dan pengunjung tidak punya petunjuk bahwa
 * baris lain juga bisa dibuka sampai ia kebetulan melewatinya.
 */
.ds-mega__arrow {
	flex: none;
	opacity: 0.35;
	transition: opacity 0.12s ease;
}

.ds-mega__parent:hover .ds-mega__arrow,
.ds-mega__parent.is-active .ds-mega__arrow {
	opacity: 0.9;
}

/* ---- Kartu sub-kategori di kanan ---- */

.ds-mega__panes {
	min-height: 300px;
	padding-left: 26px;
}

.ds-mega__pane {
	display: none;
}

.ds-mega__pane.is-active {
	display: block;
}

.ds-mega__pane-title {
	display: flex;
	gap: 14px;
	align-items: baseline;
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ds-text);
}

.ds-mega__pane-title a {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ds-accent-text);
}

.ds-mega__pane-title a:hover {
	text-decoration: underline;
}

.ds-mega__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.ds-mega__card {
	display: block;
	color: var(--ds-text);
}

.ds-mega__card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ds-bg-2);
	border: 1px solid var(--ds-border);
	border-radius: 11px;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.ds-mega__card:hover .ds-mega__card-media {
	border-color: var(--ds-accent);
	transform: translateY(-2px);
}

.ds-mega__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-mega__card-media.is-icon {
	color: var(--ds-accent-text);
}

.ds-mega__card-name {
	display: block;
	margin-top: 9px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
}

.ds-mega__card:hover .ds-mega__card-name {
	color: var(--ds-accent-text);
}

.ds-mega__empty {
	margin-top: 14px;
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-mega__all {
	display: block;
	margin-top: 20px;
	padding-top: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ds-accent-text);
	border-top: 1px solid var(--ds-border);
}

.ds-mega__all:hover {
	text-decoration: underline;
}

@media (max-width: 1180px) {
	.ds-mega__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Di layar sempit daftar kategori pindah ke atas sebagai deretan mendatar,
   karena kolom 264px tidak menyisakan ruang untuk kartunya. */
@media (max-width: 900px) {
	.ds-mega {
		max-height: 70vh;
		overflow-y: auto;
	}

	.ds-mega__layout {
		grid-template-columns: 1fr;
	}

	.ds-mega__rail {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 0 0 14px;
		border-right: 0;
		border-bottom: 1px solid var(--ds-border);
	}

	.ds-mega__arrow {
		display: none;
	}

	.ds-mega__panes {
		min-height: 0;
		padding: 16px 0 0;
	}

	.ds-mega__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* ============================================================== 05. Hero */

/* Tinggi hero mengikuti tinggi LAYAR, bukan angka piksel tetap.
 *
 * 640px tetap membuat hero memakan hampir seluruh layar laptop pendek, dan
 * justru terlihat kecil di monitor tinggi. min() menjaga keduanya: 88% tinggi
 * layar di layar pendek, dan berhenti di 720px supaya tidak jadi lapangan
 * kosong di monitor jangkung.
 *
 * Ada batas bawah juga - di ponsel yang dipegang mendatar, 88vh bisa tinggal
 * 300px dan judulnya tidak lagi muat. */
.ds-hero {
	position: relative;
	height: min(88vh, 720px);
	min-height: 460px;
	overflow: hidden;
}

.ds-hero__media,
.ds-hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ds-hero__slide {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.ds-hero__slide.is-active {
	opacity: 1;
}

.ds-hero__slide--empty {
	background: linear-gradient(135deg, #12332c 0%, var(--ds-bg-0) 70%);
}

.ds-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(4, 8, 10, 0.8) 0%, rgba(4, 8, 10, 0) 47.5%),
		linear-gradient(180deg, rgba(4, 8, 10, 0.3) 0%, rgba(4, 8, 10, 0.1) 45%, rgba(4, 8, 10, 0.28) 100%);
}

/* Ornamen A — Sapuan Hero.
 *
 * SVG-nya membawa gradasi emerald-nya sendiri, jadi ia dipasang sebagai gambar
 * latar apa adanya - tidak ada warna yang perlu ditimpa dari sini.
 *
 * Duduk DI ATAS scrim tapi DI BAWAH teks: kalau di bawah scrim ia ikut
 * teredam sampai nyaris hilang, dan kalau di atas teks garis-garisnya melintasi
 * judul.
 *
 * background-size memakai tinggi, bukan lebar, supaya jarak antar garis tetap
 * sama di layar mana pun - kalau diregangkan mengikuti lebar, garisnya
 * merenggang di monitor lebar dan pola sapuannya hilang.
 */
.ds-hero__ornament {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: url("../images/ornaments/sapuan-hero.svg") no-repeat right top;
	background-size: auto 130%;
}

.ds-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 50px;
	height: 100%;
	padding: 96px var(--ds-pad) 210px;
}

.ds-hero__kicker {
	margin-bottom: 32px;
	font-size: 13px;
	font-weight: 600;
	line-height: 20.8px;
	letter-spacing: 2.34px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

.ds-hero__title {
	max-width: 560px;
	font-size: 56px;
	font-weight: 700;
	line-height: 63.84px;
	letter-spacing: -0.56px;
	color: var(--ds-white);
}

.ds-hero__nav {
	position: absolute;
	top: 248px;
	right: var(--ds-pad);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.ds-hero__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--ds-white);
	background: rgba(4, 8, 10, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
}

.ds-hero__arrow:hover {
	background: rgba(46, 158, 119, 0.8);
}

.ds-hero__arrow--up .ds-icon {
	transform: rotate(180deg);
}

.ds-hero__count {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 52px;
	font-size: 12px;
	line-height: 18px;
	color: rgba(255, 255, 255, 0.8);
	background: rgba(4, 8, 10, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
}

/* Garis miring pemisah nomor slide.
 *
 * Tanpa pemisah, "01" di atas "03" terbaca seperti dua angka lepas - orang
 * harus menebak sendiri bahwa yang bawah adalah jumlah keseluruhan. Garis
 * miringnya dimiringkan lebih rebah supaya tetap terbaca sebagai pemisah pada
 * susunan menurun, bukan sebagai huruf. */
.ds-hero__count-sep {
	font-size: 11px;
	line-height: 8px;
	color: rgba(255, 255, 255, 0.45);
	transform: rotate(24deg);
}

/* ==================================================== 06. Pita jaminan */

.ds-trust {
	position: relative;
	background: linear-gradient(90deg, rgba(11, 31, 25, 0.9) 0%, rgba(18, 81, 60, 0.55) 50%, rgba(11, 31, 25, 0.9) 100%);
	border-top: 1px solid transparent;
	border-image: linear-gradient(90deg, rgba(46, 158, 119, 0) 0%, rgba(70, 188, 145, 0.8) 50%, rgba(46, 158, 119, 0) 100%) 1;
}

.ds-trust__inner {
	display: flex;
	align-items: stretch;
	padding: 42px var(--ds-pad);
}

.ds-trust__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 0 34px;
}

.ds-trust__item:first-child {
	padding-left: 0;
}

.ds-trust__inner > .ds-trust__item:last-child {
	padding-right: 0;
}

.ds-trust__divider {
	flex: 0 0 1px;
	align-self: center;
	width: 1px;
	height: 90px;
	background: linear-gradient(180deg, rgba(46, 158, 119, 0) 0%, rgba(46, 158, 119, 0.55) 50%, rgba(46, 158, 119, 0) 100%);
}

/* Lingkarannya diperkecil bersama ikonnya, bukan hanya ikonnya. * * Mengecilkan ikon saja menyisakan cincin 48px berisi gambar 18px, dan ruang * kosong di dalamnya justru membuat ikonnya tampak lebih kecil lagi. Rasio * ikon terhadap lingkaran yang menentukan kesan ukurannya, bukan angka * piksel ikonnya sendiri. */
.ds-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 8px;
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.18);
	border: 1px solid rgba(70, 188, 145, 0.45);
	border-radius: 14px;
}

.ds-trust__title {
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	color: var(--ds-text);
}

.ds-trust__desc {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-2);
}

/* ======================================== 07. Section & kepala section */

.ds-section {
	padding: 80px var(--ds-pad) 37px;
}

.ds-section--voucher {
	padding-top: 0;
	padding-bottom: 0;
}

.ds-categories {
	padding: 58px var(--ds-pad) 84px;
}

.ds-section--articles {
	padding: 64px var(--ds-pad) 100px;
}

.ds-section__head {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-bottom: 50px;
}

.ds-section__head--stacked {
	margin-bottom: 36px;
}

.ds-section__heading {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ds-section__title {
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	color: var(--ds-text);
}

.ds-carousel__nav {
	display: flex;
	flex-shrink: 0;
	gap: 10px;
}

/* ============================ 08. Kartu produk, carousel, grid produk */

.ds-product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.ds-product:hover {
	border-color: rgba(46, 158, 119, 0.6);
	transform: translateY(-2px);
}

.ds-product__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 20px 25px;
	border-radius: var(--ds-radius) var(--ds-radius) 0 0;
	overflow: hidden;
}

/* Foto selalu bujur sangkar dan berlatar putih.
 *
 * Tingginya tidak dipatok angka tetap, melainkan aspect-ratio 1 - jadi satu
 * aturan ini berlaku untuk kartu selebar 315 di beranda dan halaman produk,
 * maupun 241 di katalog. Di 315 hasilnya 275, di 241 hasilnya 201, dua-duanya
 * persis seperti artboardnya.
 *
 * object-fit:contain, bukan cover. Alat pancing bentuknya memanjang; cover
 * akan memotong ujung joran dan ujung senar - bagian yang justru membedakan
 * satu produk dari yang lain. */
.ds-product__media > a,
.ds-product__media > .ds-placeholder,
.ds-product__media > .ds-product__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--ds-white);
	border-radius: 3px;
}

/* Foto membesar sedikit saat kartunya disentuh mouse. Kotaknya sudah
   overflow:hidden, jadi yang melebar tetap terpotong rapi di dalam kotak. */
.ds-product__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.35s ease;
}

.ds-product:hover .ds-product__image {
	transform: scale(1.06);
}

/* Judul dipotong tepat dua baris.
 *
 * DUA HAL YANG HARUS BENAR BERSAMAAN
 *
 * 1. Tingginya kelipatan pas dari line-height. 58px menyisakan 10px setelah
 *    dua baris (2 x 23.93 = 47.9), dan sisa itulah yang menampilkan potongan
 *    atas baris ketiga - persis yang terlihat sebagai judul terpotong.
 *
 * 2. Klem dipasang pada <a>, bukan pada <h3>.
 *
 *    -webkit-line-clamp hanya bekerja pada elemen yang display-nya benar-benar
 *    -webkit-box. Kartu produk adalah kolom flex, jadi <h3> di dalamnya adalah
 *    FLEX ITEM - dan peramban mem-blokifikasi display setiap flex item.
 *    -webkit-box berubah menjadi block, dan klemnya diam-diam tidak melakukan
 *    apa-apa. <a> di dalam <h3> bukan flex item, jadi di sanalah klem bekerja.
 */
.ds-product__title {
	height: 58px;
	padding: 0 20px;
	overflow: hidden;
	font-size: 16.5px;
	font-weight: 600;
	line-height: 23.93px;
	text-align: center;
	color: var(--ds-text);
}

.ds-product__title a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Jarak napas antara judul dan harga.
 *
 * Tanpa padding atas, harga menempel di baris kedua judul - dan karena judul
 * boleh dua baris, jarak yang cukup untuk judul satu baris menjadi terlalu
 * rapat begitu judulnya panjang. */
.ds-product__prices {
	display: flex;
	gap: 7px;
	align-items: baseline;
	justify-content: center;
	padding: 0 14px 6px;
}

/* Harga dibedakan dengan WARNA, bukan hanya ukuran.
 *
 * Sebelumnya harga 16px/600/putih dan judul 16.5px/600/putih - selisih setengah
 * piksel. Pada produk tanpa diskon, harga terbaca sebagai baris ketiga judul,
 * dan mata harus berhenti untuk memisahkannya.
 *
 * Emerald memisahkannya dalam sekali lihat, tanpa perlu membaca. Warna ini juga
 * sudah dipakai untuk harga di kartu wishlist, jadi harga selalu berwarna sama
 * di seluruh situs. Dipilih --ds-accent-300 yang lebih terang, bukan
 * --ds-accent, karena kartunya berlatar gelap. */
.ds-price {
	font-size: 17px;
	font-weight: 700;
	line-height: 20.4px;
	color: var(--ds-accent-300);
}

.ds-price--old {
	font-size: 13px;
	font-weight: 400;
	line-height: 15.6px;
	color: var(--ds-chrome-350);
	text-decoration: line-through;
}

/* Harga diskon memakai coral, penanda potongan di panduan merek. Ia menang
   atas emerald karena diskon memang pantas menarik perhatian lebih dulu. */
.ds-price--sale {
	color: var(--ds-danger-text);
}

.ds-price--old {
	font-size: 13px;
	font-weight: 400;
	line-height: 15.6px;
	color: var(--ds-chrome-350);
	text-decoration: line-through;
}

.ds-product__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding: 12px 14px;
}

.ds-product__actions {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-left: auto;
}

.ds-grid {
	display: grid;
	gap: 20px;
}

.ds-grid--products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Slider produk berhenti di batas konten, sama dengan section lain. Dulu ia
   menjulur sampai tepi kanan layar; di layar lebar itu membuat baris produk
   terlihat lebih lebar dari judul di atasnya dan dari kotak kategori di
   bawahnya. */

.ds-carousel {
	position: relative;
}

.ds-carousel__track {
	display: flex;
	gap: 20px;
	/* Sepuluh piksel di atas bukan hiasan: kartunya terangkat sedikit saat
	   disentuh kursor, dan overflow-x di baris bawah ikut memotong yang keluar
	   ke ATAS juga - satu sumbu tidak bisa dipotong sendirian. Tanpa ruang ini,
	   tepi atas kartu terpangkas tiap kali dilewati kursor. */
	padding-top: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ds-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Empat kartu penuh per layar lebar, dihitung dari lebar wadahnya sendiri -
   bukan 315px mati - supaya kartu keempat tidak terpotong di dalam kotak
   Flash Sale yang lebih sempit. Di layar kecil tidak pernah kurang dari
   260px; sisanya mengintip di tepi sebagai tanda bisa digeser. */
.ds-carousel__track > .ds-product {
	flex: 0 0 max(260px, calc((100% - 60px) / 4));
	width: max(260px, calc((100% - 60px) / 4));
	scroll-snap-align: start;
}

/* ================================================ 09. Mozaik kategori */

.ds-categories__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.ds-tile {
	position: relative;
	display: block;
	height: 246px;
	overflow: hidden;
	background: var(--tile-base, var(--ds-surface));
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-lg);
	isolation: isolate;
}

.ds-tile__accent {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 4;
	height: 3px;
	background: var(--tile-accent, var(--ds-accent));
}

.ds-tile__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	background-image: linear-gradient(143.2deg, var(--tile-from, #4e7370) 14.6%, var(--tile-to, #0b1817) 85.4%);
}

.ds-tile__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.92;
	transition: transform 0.35s ease;
}

.ds-tile:hover .ds-tile__image {
	transform: scale(1.04);
}

.ds-tile__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 8, 10, 0) 0%, rgba(4, 8, 10, 0.18) 42%, rgba(4, 8, 10, 0.62) 74%, rgba(4, 8, 10, 0.88) 100%);
}

.ds-tile__arrow {
	position: absolute;
	top: 15px;
	right: 17px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--ds-white);
	background: rgba(4, 8, 10, 0.45);
	border: 1px solid color-mix(in srgb, var(--tile-accent, #2a8f6a) 55%, transparent);
	border-radius: 10px;
}

.ds-tile__body {
	position: absolute;
	top: 160px;
	right: 0;
	left: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
}

.ds-tile__title {
	font-size: 17px;
	font-weight: 600;
	line-height: 24.14px;
	color: var(--ds-white);
}

.ds-tile__link {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	font-size: 13px;
	line-height: 20.8px;
	color: rgba(255, 255, 255, 0.82);
}

/* ================================================== 10. Pita voucher */

.ds-voucher {
	position: relative;
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	min-height: 244px;
	padding: 48px 56px;
	overflow: hidden;
	background: linear-gradient(90deg, var(--ds-accent-700) 0%, var(--ds-accent-600) 100%);
	border-radius: var(--ds-radius);
}

/* Ornamen B — Cahaya.
 *
 * Berkasnya tidak ikut diunggah, jadi ini disusun sebagai gradasi radial, bukan
 * gambar. Untuk sebuah cahaya itu justru pilihan yang lebih baik: ia menskala
 * mulus ke ukuran berapa pun, tidak menambah unduhan, dan tepinya tidak pernah
 * bergerigi seperti PNG yang diregangkan.
 *
 * Kalau nanti berkas Figma-nya menyusul dan bentuknya ternyata bukan lingkaran,
 * cukup ganti background di sini dengan url() ke berkasnya.
 */
.ds-voucher::before {
	content: "";
	position: absolute;
	top: -40%;
	right: 8%;
	z-index: 0;
	width: 560px;
	height: 560px;
	pointer-events: none;
	background: radial-gradient(circle, rgba(166, 229, 205, 0.35) 0%, rgba(70, 188, 145, 0.16) 38%, rgba(18, 81, 60, 0) 70%);
}

/* Ornamen B — Sapuan Bawah.
 *
 * Lebar aslinya 1320x244, sama persis dengan kartu voucher, jadi ia dipasang
 * menempel di dasar kartu dengan lebar penuh - itu ukuran yang memang
 * dirancang untuknya.
 */
.ds-voucher::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	height: 244px;
	pointer-events: none;
	background: url("../images/ornaments/sapuan-bawah.svg") no-repeat center bottom;
	background-size: 100% auto;
}

/* Isi kartu harus di atas kedua ornamen. */
.ds-voucher__text,
.ds-voucher__code {
	position: relative;
	z-index: 1;
}

.ds-voucher__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.ds-voucher__eyebrow {
	font-size: 13px;
	font-weight: 700;
	line-height: 20.8px;
	color: var(--ds-voucher-text);
}

.ds-voucher__title {
	font-size: 34px;
	font-weight: 600;
	line-height: 40.8px;
	color: var(--ds-white);
}

.ds-voucher__desc {
	max-width: 60ch;
	font-size: 14px;
	line-height: 22.4px;
	color: rgba(255, 255, 255, 0.8);
}

.ds-voucher__code {
	display: flex;
	flex-shrink: 0;
	gap: 12px;
	align-items: center;
}

.ds-voucher__value {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 409px;
	max-width: 100%;
	height: 64px;
	padding: 14px 18px;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 2.8px;
	color: var(--ds-white);
	background: rgba(255, 255, 255, 0.08);
	border: 2px dashed rgba(255, 255, 255, 0.5);
	border-radius: 10px;
}

.ds-voucher__copy {
	width: 77px;
	height: 64px;
	font-size: 14px;
	color: var(--ds-text);
	background: var(--ds-surface);
	border: 0;
	border-radius: 10px;
	transition: background-color 0.18s ease;
}

.ds-voucher__copy:hover {
	background: #223338;
}

.ds-voucher__copy.is-copied {
	color: var(--ds-white);
	background: var(--ds-accent);
}

/* ============================================== 11. Mancing Mania */

.ds-articles {
	display: flex;
	gap: 48px;
	align-items: flex-start;
}

.ds-article-lead {
	display: flex;
	flex: 0 0 640px;
	flex-direction: column;
	overflow: hidden;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-lg);
}

.ds-article-lead__media,
.ds-article-lead__media > a,
.ds-article-lead__image {
	display: block;
	width: 100%;
	height: 300px;
}

.ds-article-lead__media,
.ds-article-lead__media > a {
	overflow: hidden;
}

/* Gambar membesar sedikit ketika kartunya disentuh penunjuk.
 *
 * Yang bergerak hanya gambarnya; bingkai kartu ditahan overflow:hidden di
 * atas, jadi tata letak barisnya tidak ikut bergeser. Kartu utuh yang jadi
 * pemicunya, bukan gambarnya saja - pembaca mengarahkan penunjuk ke judul
 * sama seringnya dengan ke gambar. */
.ds-article-lead__image {
	object-fit: cover;
	transition: transform 0.45s ease;
}

.ds-article-lead:hover .ds-article-lead__image,
.ds-article-lead:focus-within .ds-article-lead__image {
	transform: scale(1.06);
}

/* Sebagian orang menyetel sistemnya untuk menekan animasi - biasanya karena
   gerakan membuat mereka pusing. Permintaan itu dihormati di sini. */
@media (prefers-reduced-motion: reduce) {
	.ds-article-lead__image {
		transition: none;
	}

	.ds-article-lead:hover .ds-article-lead__image,
	.ds-article-lead:focus-within .ds-article-lead__image {
		transform: none;
	}
}

.ds-article-lead__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 28px 28px;
}

.ds-article-lead__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ds-text);
}

.ds-article__kicker {
	font-size: 12px;
	font-weight: 600;
	line-height: 19.2px;
	color: var(--ds-accent-300);
}

.ds-article__kicker--alt {
	color: var(--ds-article-kicker);
}

.ds-article__excerpt {
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
}

.ds-article__meta {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-3);
}

.ds-article-list {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.ds-article-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 0;
}

.ds-article-row + .ds-article-row {
	border-top: 1px solid rgba(44, 64, 70, 0.9);
}

.ds-article-row__title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ds-text);
}

/* ======================================= 12. Footer & tombol WhatsApp */

/* Angka gradasinya diambil dari komponen footer Figma (59:7), bukan dikarang:
   empat sorotan emerald pada posisi tertentu di atas dasar abu gelap. Ditulis
   dalam piksel, bukan persen, supaya bentuk sorotannya tidak ikut memanjang
   ketika layarnya melebar. */
.ds-footer {
	position: relative;
	padding: 52px var(--ds-pad) 26px;
	overflow: hidden;
	background:
		radial-gradient(640px 530px at 330px 80px, rgba(46, 158, 119, 0.42), transparent 100%),
		radial-gradient(570px 490px at 97% 120px, rgba(46, 158, 119, 0.3), transparent 100%),
		radial-gradient(560px 480px at 102% 129%, rgba(46, 158, 119, 0.3), transparent 100%),
		radial-gradient(620px 430px at 51% 145%, rgba(46, 158, 119, 0.18), transparent 100%),
		linear-gradient(180deg, #1b1f26 0%, #15181e 100%);
}

/* Butiran halus, meniru efek NOISE di Figma. SVG feTurbulence dipakai sebagai
   data URI supaya tidak ada berkas gambar yang perlu diunduh, dan opacity-nya
   sengaja sangat rendah - tugasnya memecah gradasi agar tidak terlihat seperti
   pita warna, bukan untuk terlihat. */
.ds-footer__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

.ds-footer__inner {
	position: relative;
	z-index: 1;
}

/* Tiga kolom: brand 260, tentang maksimal 520, sisanya untuk menu. */
.ds-footer__top {
	display: grid;
	grid-template-columns: 260px minmax(0, 520px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.ds-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Logo dibatasi LEBARNYA juga, bukan tingginya saja.
 *
 * Dengan batas tinggi sendirian, logo yang gambarnya melebar - dan logo toko
 * biasanya memang melebar - berhenti di batas lain: lebar kolomnya. Di ponsel
 * kolom itu selebar layar, jadi logonya ikut selebar layar dan berdiri jauh
 * lebih besar daripada seluruh isi footer di bawahnya. */
.ds-footer__brand img {
	width: auto;
	max-width: 280px;
	max-height: 132px;
	object-fit: contain;
}

.ds-footer__tagline {
	font-size: 12px;
	line-height: 18px;
	color: rgba(255, 255, 255, 0.62);
}

.ds-footer__about {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.ds-footer__head {
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ds-white);
}

.ds-footer__head--follow {
	margin-top: 10px;
}

.ds-footer__note {
	max-width: 487px;
	font-size: 15px;
	line-height: 26.25px;
	color: rgba(255, 255, 255, 0.68);
}

.ds-socials {
	display: flex;
	gap: 10px;
}

.ds-socials__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.ds-socials__item:hover {
	border-color: var(--ds-accent);
	background: rgba(46, 158, 119, 0.15);
}

.ds-footer__menus {
	display: flex;
	gap: 24px;
}

/* Satu menu dibagi dua kolom.
 *
 * columns membagi berdasarkan TINGGI, bukan jumlah item, jadi kedua kolom
 * selalu seimbang berapa pun tautan yang ditambahkan - dan pemilik toko tidak
 * pernah perlu memutuskan tautan baru masuk kolom mana.
 *
 * break-inside pada <li> wajib: tanpa itu satu tautan yang cukup panjang bisa
 * terpotong di tengah, separuh di kolom kiri dan separuh di kanan.
 */
.ds-footer__list {
	flex: 1 1 auto;
	min-width: 0;
	columns: 2;
	column-gap: 24px;
	font-size: 15px;
	line-height: 22.4px;
	color: rgba(255, 255, 255, 0.68);
}

.ds-footer__list li {
	break-inside: avoid;
	margin-bottom: 12px;
}

.ds-footer__list a:hover {
	color: var(--ds-accent-300);
}

.ds-footer__hint {
	font-size: 13px;
	color: var(--ds-text-2);
}

/* ---- Blok yang bisa dilipat ----
 * Memakai <details> bawaan peramban. Segitiga bawaannya dimatikan dan diganti
 * tanda tambah/kurang buatan sendiri, yang hanya muncul di lebar layar tempat
 * blok itu memang bisa dilipat.
 */
.ds-fold {
	min-width: 0;
}

.ds-fold > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	list-style: none;
	cursor: default;
}

.ds-fold > summary::-webkit-details-marker {
	display: none;
}

.ds-fold__icon {
	position: relative;
	display: none;
	flex: none;
	width: 14px;
	height: 14px;
}

.ds-fold__icon::before,
.ds-fold__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: rgba(255, 255, 255, 0.7);
	transform: translate(-50%, -50%);
	transition: opacity 0.18s ease;
}

.ds-fold__icon::before {
	width: 12px;
	height: 1.5px;
}

.ds-fold__icon::after {
	width: 1.5px;
	height: 12px;
}

.ds-fold[open] .ds-fold__icon::after {
	opacity: 0;
}

.ds-fold__body {
	margin-top: 16px;
}

/* Pembayaran dan kurir berdampingan: 730px untuk delapan logo, sisanya kurir. */
.ds-footer__services {
	display: flex;
	gap: 34px;
	align-items: flex-start;
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ds-footer__services .ds-fold:first-child {
	flex: 0 0 730px;
}

.ds-footer__services .ds-fold:last-child {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-logos {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
}

.ds-tile-logo {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 39px;
	padding: 5px 8px;
	background: var(--ds-white);
	border-radius: 6px;
}

.ds-tile-logo img {
	width: auto;
	max-width: 100%;
	max-height: 27px;
	object-fit: contain;
}

.ds-tile-logo--text {
	font-size: 11px;
	font-weight: 600;
	color: #24333a;
	text-align: center;
	line-height: 1.2;
	overflow: hidden;
}

.ds-footer__legal {
	margin-top: 34px;
	padding-top: 22px;
	/* Tanpa ruang kanan khusus: "Website dibuat oleh" rata kanan, dan tombol
	   WhatsApp mengambang menyingkir sendiri saat menimpanya (data-ds-fab-avoid). */
	padding-right: 0;
	font-size: 13px;
	line-height: 20.8px;
	color: rgba(255, 255, 255, 0.6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ds-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 15px 22px 15px 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 22.5px;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 1px solid var(--ds-accent-line);
	border-radius: 30px;
	box-shadow: 0 0 24px rgba(46, 158, 119, 0.35), 0 6px 18px rgba(0, 0, 0, 0.45);
}

.ds-fab:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

/* Di bawah 1150px baris logo terlalu sempit untuk berdampingan, jadi keduanya
   ditumpuk dan tanda lipatnya mulai ditampilkan. */
@media (max-width: 1150px) {
	/* stretch, bukan flex-start: dengan flex-start setiap blok hanya selebar
	   judulnya, dan tanda tambahnya menempel tepat di ujung tulisan - tidak
	   sejajar dengan tanda tambah MENU yang berdiri di tepi kanan. */
	.ds-footer__services {
		flex-direction: column;
		gap: 8px;
		align-items: stretch;
	}

	.ds-footer__services .ds-fold:first-child {
		flex: 1 1 auto;
	}

	.ds-logos {
		flex-wrap: wrap;
	}

	.ds-tile-logo {
		flex: 0 1 auto;
		min-width: 78px;
	}

	.ds-fold[data-ds-acc] .ds-fold__icon {
		display: block;
	}

	.ds-fold[data-ds-acc] > summary {
		cursor: pointer;
	}
}

/* ============ 13. Halaman biasa, arsip, dan penyesuaian WooCommerce */

.ds-main {
	display: block;
}

.ds-shell {
	max-width: calc(var(--ds-maxw) + var(--ds-pad) * 2);
	margin: 0 auto;
}

.ds-shell--pad {
	padding: 56px var(--ds-pad) 80px;
}

.ds-entry__header {
	margin-bottom: 28px;
}

.ds-entry__title {
	font-size: 34px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ds-text);
}

.ds-entry__meta {
	margin-top: 10px;
	font-size: 13px;
	color: var(--ds-text-3);
}

.ds-entry__thumb {
	margin-bottom: 28px;
	overflow: hidden;
	border-radius: var(--ds-radius-lg);
}

.ds-entry__content {
	max-width: 78ch;
	font-size: 16px;
	line-height: 1.75;
	color: rgba(245, 248, 249, 0.86);
}

.ds-entry__content > * + * {
	margin-top: 1.1em;
}

.ds-entry__content h2 {
	font-size: 24px;
	font-weight: 600;
}

.ds-entry__content h3 {
	font-size: 19px;
	font-weight: 600;
}

.ds-entry__content a {
	color: var(--ds-accent-300);
	text-decoration: underline;
}

.ds-entry__content ul,
.ds-entry__content ol {
	padding-left: 1.4em;
	list-style: revert;
}

.ds-entry__content blockquote {
	padding-left: 18px;
	border-left: 3px solid var(--ds-accent);
	color: var(--ds-text-2);
}

.ds-entry__content img {
	border-radius: var(--ds-radius);
}

.ds-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.ds-card-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-lg);
}

.ds-card-post__media,
.ds-card-post__media img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.ds-card-post__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 24px;
}

.ds-card-post__title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.ds-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 44px;
}

.ds-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

.ds-pagination .page-numbers.current {
	color: var(--ds-white);
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

.ds-widget {
	margin-bottom: 28px;
}

.ds-widget__title {
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 600;
}

/* WooCommerce: samakan kartu produk bawaan dengan gaya theme. */
.ds-woo ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-woo ul.products::before,
.ds-woo ul.products::after {
	content: none;
}

.ds-woo ul.products li.product {
	width: 100%;
	margin: 0;
	padding: 18px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	text-align: center;
}

.ds-woo ul.products li.product img {
	margin-bottom: 14px;
	border-radius: 8px;
}

.ds-woo ul.products li.product .woocommerce-loop-product__title {
	font-size: 16.5px;
	font-weight: 600;
	line-height: 23.93px;
	color: var(--ds-text);
}

.ds-woo ul.products li.product .price {
	color: var(--ds-text);
	font-weight: 600;
}

.ds-woo ul.products li.product del {
	color: var(--ds-chrome-350);
	font-weight: 400;
}

.ds-woo ul.products li.product ins {
	color: var(--ds-danger-text);
	background: none;
	text-decoration: none;
}

.ds-woo .button,
.ds-woo button.button,
.ds-woo a.button,
.ds-woo input[type="submit"] {
	padding: 12px 22px;
	font-weight: 600;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 0;
	border-radius: 10px;
}

.ds-woo .button:hover,
.ds-woo button.button:hover,
.ds-woo a.button:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

.ds-woo .woocommerce-message,
.ds-woo .woocommerce-info,
.ds-woo .woocommerce-error {
	background: var(--ds-surface);
	border-top-color: var(--ds-accent);
	color: var(--ds-text);
}

.ds-woo input[type="text"],
.ds-woo input[type="email"],
.ds-woo input[type="tel"],
.ds-woo input[type="password"],
.ds-woo input[type="number"],
.ds-woo textarea,
.ds-woo select {
	padding: 10px 14px;
	color: var(--ds-text);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

/* ============================ 13b. Kepala halaman, katalog, dan filter */

/* ---- Kepala halaman ---- */

.ds-pagehead {
	padding: 34px var(--ds-pad) 0;
}

.ds-pagehead__inner {
	max-width: var(--ds-maxw);
	margin: 0 auto;
}

.ds-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-crumbs a {
	color: var(--ds-text-2);
}

.ds-crumbs a:hover {
	color: var(--ds-accent-300);
}

.ds-pagehead__title {
	margin-top: 10px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
}

.ds-pagehead__sub {
	margin-top: 8px;
	max-width: 640px;
	font-size: 14.5px;
	color: var(--ds-text-2);
}

/* ---- Langkah alur belanja ---- */

.ds-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 22px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ds-steps__item {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 13.5px;
	color: var(--ds-text-3);
}

.ds-steps__no {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 12.5px;
	font-weight: 600;
	border: 1px solid var(--ds-border);
	border-radius: 999px;
}

.ds-steps__item.is-now {
	color: var(--ds-text);
}

.ds-steps__item.is-now .ds-steps__no {
	color: var(--ds-white);
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

.ds-steps__item.is-done {
	color: var(--ds-accent-300);
}

.ds-steps__item.is-done .ds-steps__no {
	color: var(--ds-accent-300);
	border-color: var(--ds-accent);
}

/* ---- Susunan katalog ---- */

/* Ornamen sapuan di belakang kepala halaman.
 *
 * Di artboard ornamennya ditempatkan pada x -80, y -60 dengan ukuran
 * 1556 x 506 - artinya ia mulai di atas header dan menjorok keluar layar di
 * kiri. Karena <main> baru mulai setelah header setinggi 128, titik yang sama
 * jatuh di top -188 relatif terhadap <main>.
 *
 * Bagian yang menjorok keluar dipotong di sini, bukan diserahkan ke
 * overflow-x:hidden milik body. Kelihatannya sama, tapi tidak: ornamen selebar
 * 1556 yang mulai di -80 berakhir di 1476, dan halaman tetap punya lebar
 * gulir 1476 walaupun 36 piksel terakhirnya disembunyikan - yang terlihat
 * sebagai pita hitam di tepi kanan. Dipotong di <main>, lebar halamannya
 * benar-benar berhenti di 1440.
 *
 * Berkasnya sama dengan ornamen kepala halaman Syarat & Ketentuan dan FAQ -
 * memang satu komponen yang sama di Figma. */
.ds-main--shop {
	position: relative;
	overflow: hidden;
}

.ds-main--shop::before {
	content: "";
	position: absolute;
	top: -188px;
	left: -80px;
	width: 1556px;
	height: 506px;
	pointer-events: none;
	background: url("../images/ornaments/sapuan-atas.svg") no-repeat center/100% 100%;
}

/* Isinya diangkat selapis supaya teks dan kartu berdiri di atas ornamen,
   bukan tertimbun di bawahnya. */
.ds-main--shop > * {
	position: relative;
	z-index: 1;
}

.ds-shop {
	display: grid;
	grid-template-columns: 262px minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

.ds-shop__filter-btn {
	display: none;
	width: 100%;
	height: 42px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--ds-text);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

/* Baris atas jadi kartu tersendiri, sejajar dengan kartu filter di kirinya.
   Di artboard keduanya memang dua kotak yang sama tingginya - itu yang
   membuat mata membaca halaman ini sebagai dua kolom, bukan sebagai daftar
   panjang dengan sisa ruang di kiri. */
.ds-shop__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
	padding: 14px 18px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

/* Kotak urutkan: label dan pilihan dalam SATU kotak, seperti di artboard.
 *
 * Yang membuatnya satu kotak adalah select yang dilucuti habis - tanpa latar,
 * tanpa garis, tanpa tinggi sendiri. Kalau select-nya masih membawa kotaknya
 * sendiri, hasilnya kotak di dalam kotak, dan itulah yang terlihat berbeda
 * dari desain sebelum ini.
 *
 * Panah bawaan peramban ikut dimatikan (appearance:none) dan diganti chevron
 * yang ditanam sebagai background, supaya bentuknya sama di Chrome, Safari,
 * dan Firefox. */
.ds-shop__sort {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 8px 12px;
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 9px;
	cursor: pointer;
}

.ds-shop__sortlabel {
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text);
}

.ds-shop__sort select {
	height: 22.4px;
	padding: 0 22px 0 0;
	font-family: inherit;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text);
	background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f8f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right center / 16px 16px;
	border: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.ds-shop__sort select:focus {
	outline: none;
}

/* Daftar pilihan yang terbuka digambar peramban, bukan CSS ini. Tanpa
   color-scheme, Chrome menggambarnya putih di atas theme gelap. */
.ds-shop__sort select option {
	color: var(--ds-text);
	background: var(--ds-surface);
}

.ds-shop__count {
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
}

.ds-shop__empty {
	padding: 40px 0;
	font-size: 14.5px;
	color: var(--ds-text-2);
}

.ds-shop__empty a {
	color: var(--ds-accent-300);
	text-decoration: underline;
}

/* ---- Tampilan daftar ----
 * .ds-product__body dibungkus supaya tampilan daftar bisa menumpuk nama dan
 * keterangan dalam satu kolom di antara foto dan harga. Di tampilan kotak
 * pembungkus itu display:contents, jadi ia hilang sama sekali dari tata letak
 * dan gridnya tersusun persis seperti sebelum pembungkus ini ada.
 */
.ds-product__body {
	display: contents;
}

.ds-product__desc {
	display: none;
}

.ds-shop__grid.is-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ds-shop__grid.is-list .ds-product {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
}

.ds-shop__grid.is-list .ds-product__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.ds-shop__grid.is-list .ds-product__desc {
	display: block;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ds-text-2);
}

.ds-shop__grid.is-list .ds-product__prices,
.ds-shop__grid.is-list .ds-product__grosir,
.ds-shop__grid.is-list .ds-product__foot {
	grid-column: 3;
}

/* ---- Kartu produk di katalog ----
 *
 * Ukuran, latar putih, dan object-fit fotonya sudah jadi aturan dasar kartu
 * di bagian 08 - satu kartu yang sama dipakai beranda, katalog, dan halaman
 * produk, cuma lebarnya yang berbeda. Yang tersisa di sini hanya bedanya:
 * kartu katalog lebarnya 241, jadi padding judulnya 14 bukan 20 - dengan
 * padding 20 nama produk yang panjang pecah terlalu dini. */
.ds-shop__grid .ds-product__title {
	padding: 0 14px;
}

/* ---- Sidebar filter ---- */

.ds-filter {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 22px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
}

/* Judul kartu. Tombol "Filter" di atasnya hanya muncul di layar sempit, jadi
   di desktop kartunya butuh namanya sendiri. */
.ds-filter__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	color: var(--ds-text);
}

.ds-filter__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.ds-filter__group--price {
	gap: 10px;
}

/* Nama kelompok ditulis kecil dan huruf besar semua, bukan tebal sebesar
   judul. Bedanya penting: yang tebal cuma satu ("Filter"), sisanya rambu
   kecil - jadi mata tahu mana judul kartu dan mana pemisah bagian. */
.ds-filter__label {
	font-size: 12px;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--ds-text-2);
}

/* Daftar yang bisa digulir kalau kategorinya bertambah banyak.
   overscroll-behavior:contain menahan roda mouse supaya tidak lanjut
   menggulir seluruh halaman begitu daftarnya habis. */
.ds-filter__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 620px;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin-right: -6px;
	padding-right: 6px;
	scrollbar-width: thin;
}

/* Kategori yang punya anak jadi satu blok terlipat: barisnya sendiri di atas,
   daftar anaknya di bawah, dan tombol chevron yang membuka-tutupnya.
   Tanpa itu daftarnya 24 baris - lebih panjang dari kartu filternya sendiri,
   dan induk yang dicari tenggelam di antara anak-anak kategori lain. */
.ds-filter__branch {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ds-filter__parent {
	display: flex;
	gap: 6px;
	align-items: center;
}

.ds-filter__parent .ds-filter__row {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-filter__more {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	color: var(--ds-text-3);
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-filter__more:hover {
	color: var(--ds-accent-300);
}

.ds-filter__more .ds-icon {
	transition: transform 0.18s ease;
}

.ds-filter__branch.is-open .ds-filter__more .ds-icon {
	transform: rotate(180deg);
}

/* Sub-kategori menjorok 26px: selebar kotak centang (16) ditambah jaraknya
   (10). Hasilnya kotak centang anak berdiri lurus di bawah huruf pertama nama
   induknya, jadi tingkatannya terbaca sekilas tanpa perlu garis penghubung. */
.ds-filter__sub {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 26px;
}

/* Wajib ada. Atribut hidden bekerja lewat aturan bawaan peramban
   [hidden]{display:none}, dan aturan itu kekhususannya cuma (0,1,0) - kalah
   oleh display:flex di atas. Tanpa baris ini, semua sub-kategori tetap
   terbuka dan tombol lipatnya seolah tidak berfungsi. */
.ds-filter__sub[hidden] {
	display: none;
}

/* Angka jumlahnya harus berhenti di garis yang sama, punya chevron atau tidak.
 *
 * Baris yang punya chevron berbagi ruang dengan tombol selebar 22 plus jarak
 * 6, jadi angkanya berhenti 28px sebelum tepi kartu. Baris tanpa chevron -
 * kategori yang belum punya sub-kategori - memakai lebar penuh, dan angkanya
 * menonjol 28px ke kanan sendirian. Ruang itu disediakan balik lewat padding,
 * bukan lewat tombol kosong, supaya tidak ada tombol yang bisa di-Tab tapi
 * tidak melakukan apa-apa.
 *
 * Sub-kategori diperlakukan sama, jadi seluruh angka di kelompok Kategori
 * berdiri di satu garis.
 *
 * Ruangnya HANYA disediakan kalau kelompok itu memang punya chevron
 * (:has(.ds-filter__branch)). Selama belum ada kategori yang punya
 * sub-kategori, padding itu cuma menggeser angka Kategori 28px ke kiri dari
 * angka Brand dan Rating di bawahnya. */
.ds-filter__group--tree:has(.ds-filter__branch) .ds-filter__list > .ds-filter__row,
.ds-filter__group--tree:has(.ds-filter__branch) .ds-filter__sub .ds-filter__row {
	padding-right: 28px;
}

.ds-filter__row--sub {
	font-size: 13px;
}

.ds-filter__row--sub .ds-filter__name {
	color: var(--ds-text-2);
}

.ds-filter__row--sub input[type="checkbox"] {
	width: 14px;
	height: 14px;
}

.ds-filter__row--sub input[type="checkbox"]::before {
	width: 8px;
	height: 8px;
}

.ds-filter__row {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 14px;
	line-height: 22.4px;
	cursor: pointer;
}

/* Kotak centang digambar sendiri.
 *
 * Kotak bawaan peramban tidak bisa diberi warna latar, garis, maupun sudut
 * membulat - accent-color hanya mengganti warna isinya, dan bentuk sisanya
 * tetap milik sistem operasi. Di theme gelap hasilnya kotak putih kecil yang
 * tidak ada di desain mana pun.
 *
 * appearance:none mengosongkannya jadi kotak biasa, lalu centangnya digambar
 * dengan clip-path pada ::before - tanpa berkas gambar tambahan. */
.ds-filter__row input[type="checkbox"] {
	display: inline-grid;
	flex: none;
	place-content: center;
	width: 16px;
	height: 16px;
	margin: 0;
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border-strong);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.ds-filter__row input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--ds-white);
	transform: scale(0);
	transition: transform 0.12s ease;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.ds-filter__row input[type="checkbox"]:checked {
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

.ds-filter__row input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.ds-filter__row input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

.ds-filter__row:hover input[type="checkbox"] {
	border-color: var(--ds-accent);
}

/* Tombol radio filter rating, digambar dengan cara yang sama seperti kotak
   centang di atas - bawaan peramban berupa lingkaran putih sistem operasi yang
   tidak cocok dengan theme gelap. Bedanya cuma bentuk: lingkaran penuh, dan
   isinya titik, bukan centang, supaya terbaca "pilih salah satu". */
.ds-filter__row input[type="radio"] {
	display: inline-grid;
	flex: none;
	place-content: center;
	width: 16px;
	height: 16px;
	margin: 0;
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border-strong);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.ds-filter__row input[type="radio"]::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--ds-accent);
	border-radius: 999px;
	transform: scale(0);
	transition: transform 0.12s ease;
}

.ds-filter__row input[type="radio"]:checked {
	border-color: var(--ds-accent);
}

.ds-filter__row input[type="radio"]:checked::before {
	transform: scale(1);
}

.ds-filter__row input[type="radio"]:focus-visible {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

.ds-filter__row:hover input[type="radio"] {
	border-color: var(--ds-accent);
}

.ds-filter__stars {
	display: inline-flex;
	flex: none;
}

.ds-filter__stars .ds-stars {
	gap: 1px;
}

.ds-filter__name {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ds-text);
}

/* Pilihan rating selalu satu baris - labelnya sudah dipendekkan supaya muat. */
.ds-filter__row--rating .ds-filter__name {
	white-space: nowrap;
}

.ds-filter__count {
	flex: none;
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-2);
}

/* Tanpa garis pemisah di atasnya: jarak 24px antar kelompok sudah cukup, dan
   di kartu selebar 262px setiap garis tambahan membuatnya terlihat sesak. */
.ds-filter__reset {
	font-size: 13px;
	color: var(--ds-text-2);
	text-decoration: underline;
}

.ds-filter__reset:hover {
	color: var(--ds-accent-300);
}

/* ---- Penggeser harga ---- */

.ds-range {
	position: relative;
	height: 30px;
}

.ds-range__track {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 4px;
	background: var(--ds-border);
	border-radius: 999px;
	transform: translateY(-50%);
}

.ds-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--ds-accent);
	border-radius: 999px;
}

/* Dua input range ditumpuk di atas lintasan yang sama. pointer-events dimatikan
   pada bidang input dan dinyalakan lagi hanya pada kenopnya, supaya kenop yang
   di bawah tetap bisa diraih. */
.ds-range input[type="range"] {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 30px;
	margin: 0;
	padding: 0;
	background: none;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}

.ds-range input[type="range"]::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	background: var(--ds-white);
	border: 3px solid var(--ds-accent);
	border-radius: 999px;
	cursor: pointer;
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
}

.ds-range input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var(--ds-white);
	border: 3px solid var(--ds-accent);
	border-radius: 999px;
	cursor: pointer;
	pointer-events: auto;
}

/* Jaraknya diatur oleh gap kelompok filter, bukan margin di sini - kalau
   keduanya dipakai bersamaan, jaraknya jadi dua kali lipat. */
.ds-range__values {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text);
}

/* ---- Penomoran halaman ---- */

.ds-pager {
	margin-top: 34px;
}

.ds-pager ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	padding: 0;
	list-style: none;
}

/* li > .page-numbers, bukan .page-numbers saja.
 *
 * paginate_links() memberi class page-numbers DUA KALI: pada tiap tombolnya,
 * dan pada <ul> yang membungkus semuanya. Selektor tanpa "li >" ikut mengenai
 * <ul> itu, jadi pembungkusnya sendiri ikut diberi latar, garis, dan tinggi
 * 40px - dan yang terlihat adalah kotak abu-abu memanjang di belakang deretan
 * nomornya. */
.ds-pager li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	font-size: 14px;
	color: var(--ds-text);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

.ds-pager li > .page-numbers.current,
.ds-pager li > a.page-numbers:hover {
	color: var(--ds-white);
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

/* Titik-titik lompatan halaman ("…") bukan tombol, jadi tidak diberi kotak. */
.ds-pager li > .page-numbers.dots {
	background: none;
	border-color: transparent;
	color: var(--ds-text-3);
}

/* ---- Layar kosong (keranjang, wishlist) ---- */

.ds-empty {
	padding: 56px 20px;
	text-align: center;
}

.ds-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.12);
	border: 1px solid rgba(70, 188, 145, 0.4);
	border-radius: 999px;
}

.ds-empty__title {
	margin-top: 18px;
	font-size: 21px;
	font-weight: 700;
}

.ds-empty__text {
	max-width: 460px;
	margin: 10px auto 0;
	font-size: 14.5px;
	color: var(--ds-text-2);
}

.ds-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 22px;
}

/* .ds-btn--primary diberi tinggi lewat padding (15px atas-bawah), sedangkan
   .ds-btn--ghost memakai height:46px. Dua cara mengukur yang berbeda tidak
   pernah menghasilkan angka yang sama. Di sini keduanya dipatok tinggi yang
   sama, dan cuma di sini - tombol utama di beranda memang lebih besar. */
.ds-empty__actions .ds-btn {
	height: 46px;
	padding: 0 28px;
}

/* Tombol kedua yang dicetak cart-empty.php WooCommerce; tidak bisa dilepas
   lewat hook, jadi disembunyikan di sini. */
.ds-shop-page--cart .return-to-shop {
	display: none;
}

@media (max-width: 1099px) {
	.ds-shop {
		grid-template-columns: 1fr;
	}

	.ds-shop__filter-btn {
		display: block;
	}

	.ds-shop__side .ds-filter {
		display: none;
	}

	.ds-shop__side.is-open .ds-filter {
		display: flex;
		margin-top: 10px;
	}

	.ds-shop__grid.is-list .ds-product {
		grid-template-columns: 130px minmax(0, 1fr);
	}

	.ds-shop__grid.is-list .ds-product__prices,
	.ds-shop__grid.is-list .ds-product__grosir,
	.ds-shop__grid.is-list .ds-product__foot {
		grid-column: 2;
	}
}

/* ================================== 13c. Halaman satu produk */

/* Angkanya dari artboard "02 · Detail Produk" (node 107:333): isi selebar 1320
   dibagi dua kolom 636, berjarak 48. Galeri di kiri, ringkasan di kanan. */
.ds-product-page {
	display: grid;
	grid-template-columns: 636px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	margin-top: 22px;
}

/* ---- Galeri ---- */

.ds-gallery {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

/* Dengan satu foto, jalur thumbnail 88px tidak boleh ikut ada — kalau tidak,
   panggungnya menyusut dan fotonya sekecil perangko. */
.ds-gallery.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.ds-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: 532px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ds-gallery__thumb {
	padding: 0;
	overflow: hidden;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
	cursor: pointer;
}

.ds-gallery__thumb.is-active,
.ds-gallery__thumb:hover {
	border-color: var(--ds-accent);
}

.ds-gallery__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ds-gallery__stage {
	position: relative;
	overflow: hidden;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

/* contain, bukan cover.
 *
 * Alat pancing bentuknya memanjang: joran, senar dalam gulungan, tas selebar
 * satu meter. cover akan memotong ujungnya - dan pada joran, ujunglah yang
 * membedakan satu model dari model lain. Sisa ruang di kiri-kanan lebih murah
 * daripada foto yang terpotong. */
.ds-gallery__stage img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	padding: 16px;
	object-fit: contain;
}

/* ---- Ringkasan ---- */

/* Jaraknya diberikan satu per satu lewat margin-top, bukan satu gap seragam.
   Di artboard memang tidak seragam: 14 setelah chip, 10 setelah judul, 24
   sebelum tombol beli. Ritme itu yang mengelompokkan isinya - nama dan
   bintangnya rapat, panel harga berdiri sendiri. */
.ds-product-page__summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ds-pd__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ds-pd__chip {
	display: inline-flex;
	padding: 6px 12px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	border-radius: 99px;
}

.ds-pd__chip--cat {
	color: var(--ds-article-kicker);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
}

.ds-pd__chip--brand {
	color: var(--ds-gold);
	background: rgba(232, 181, 74, 0.1);
	border: 1px solid rgba(232, 181, 74, 0.45);
}

.ds-pd__chip--sale {
	color: var(--ds-danger-300);
	background: rgba(217, 72, 59, 0.16);
	border: 1px solid rgba(217, 72, 59, 0.5);
}

.ds-product-page__title {
	margin-top: 14px;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
}

.ds-pd__rating {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 10px;
	font-size: 14px;
}

.ds-stars {
	display: inline-flex;
	gap: 3px;
	align-items: center;
}

/* Bintang yang belum terisi tetap digambar, hanya diredupkan. Menghilangkannya
   sama sekali membuat "3 dari 5" terlihat seperti "3 dari 3". */
.ds-stars__one {
	display: inline-flex;
	color: #3a4a50;
}

.ds-stars__one.is-on {
	color: #e3a127;
}

.ds-pd__score {
	font-weight: 600;
	color: var(--ds-text);
}

.ds-pd__reviews {
	color: var(--ds-text-2);
}

.ds-pd__dot {
	color: var(--ds-text-3);
}

.ds-pd__seereviews {
	font-weight: 500;
	color: var(--ds-accent-300);
}

.ds-pd__lead {
	margin-top: 16px;
	font-size: 14px;
	line-height: 24px;
	color: var(--ds-text-2);
}

.ds-pd__lead p {
	margin: 0 0 8px;
}

.ds-pd__lead p:last-child {
	margin-bottom: 0;
}

/* ---- Panel harga ---- */

/* Harga berdiri langsung di atas latar halaman, tanpa kartu: sejajar rata kiri
   dengan judul dan deskripsi di atasnya. Padding atas-bawah dipertahankan
   supaya jaraknya ke judul dan ke baris fakta tetap sama. */
.ds-pd__pricebox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-top: 20px;
	padding: 20px 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.ds-pd__priceline {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: baseline;
}

.ds-pd__price {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ds-text);
}

.ds-pd__priceold {
	font-size: 15px;
	color: var(--ds-text-3);
}

.ds-pd__save {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-pd__save .ds-icon {
	flex: none;
	color: var(--ds-accent-300);
}

/* Pita Flash Sale di atas harga - lihat deepstrike_product_flash_strip().
   Warnanya mengikuti lencana merah section Flash Sale di beranda, supaya
   terbaca sebagai promo yang sama. */
.ds-pd__flash {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	margin-bottom: 14px;
	padding: 10px 14px;
	font-size: 13px;
	line-height: 20px;
	color: var(--ds-text-2);
	background: rgba(217, 72, 59, 0.12);
	border: 1px solid rgba(217, 72, 59, 0.4);
	border-radius: 12px;
}

.ds-pd__flashbadge {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-white);
	background: var(--ds-danger);
	border-radius: 999px;
}

.ds-pd__flashtime b {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ds-text);
}

.ds-pd__flashstock {
	margin-left: auto;
}

/* ---- Daftar fakta ---- */

.ds-pd__facts {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	width: 100%;
	margin-top: 20px;
	border-top: 1px solid rgba(44, 64, 70, 0.9);
	font-size: 13.5px;
}

/* dt boleh flex - isinya cuma satu kata, jadi labelnya rata tengah terhadap
   chip stok yang lebih tinggi dari sebaris teks biasa. */
.ds-pd__facts dt {
	display: flex;
	align-items: center;
	padding: 11px 0;
	color: var(--ds-text-3);
	border-bottom: 1px solid rgba(44, 64, 70, 0.9);
}

/* dd TIDAK boleh flex.
 *
 * Isinya sering berupa beberapa tautan yang dipisah koma - "Joran, Joran
 * Casting". Di dalam flex, setiap potongan teks di antara tautan menjadi item
 * tersendiri, dan gap ikut disisipkan di kiri-kanan komanya. Hasilnya koma
 * yang mengambang jauh dari kata sebelumnya. Sebagai blok biasa, teks dan
 * tautannya mengalir sebagaimana mestinya. */
.ds-pd__facts dd {
	margin: 0;
	padding: 11px 0 11px 16px;
	line-height: 25px;
	color: var(--ds-chrome-350);
	border-bottom: 1px solid rgba(44, 64, 70, 0.9);
}

.ds-pd__facts a {
	color: var(--ds-accent-300);
}

.ds-pd__brandall {
	font-size: 13px;
	color: var(--ds-article-kicker);
}

.ds-pd__stock {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 5px 12px 5px 10px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ds-accent-line);
	background: rgba(70, 188, 145, 0.12);
	border: 1px solid rgba(70, 188, 145, 0.35);
	border-radius: 99px;
}

.ds-pd__stock.is-out {
	color: var(--ds-danger-300);
	background: rgba(217, 72, 59, 0.14);
	border-color: rgba(217, 72, 59, 0.45);
}

.ds-pd__dotmark {
	width: 7px;
	height: 7px;
	background: currentColor;
	border-radius: 999px;
}

/* ---- Tombol beli ---- */

.ds-product-page__buy {
	width: 100%;
	margin-top: 24px;
}

/* WooCommerce mencetak formulirnya sendiri; hanya penataannya yang di sini. */
.ds-product-page__buy form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Jarak lega antara pilihan varian dan baris harga + keranjang di bawahnya. */
.ds-product-page__buy .variations {
	flex: 1 1 100%;
	margin-bottom: 20px;
}

.ds-product-page__buy .variations td,
.ds-product-page__buy .variations th {
	padding: 6px 0;
	text-align: left;
	vertical-align: middle;
}

/* ---- Produk bervarian (warna, ukuran, ...) ----
   Label pilihan di kiri, dropdown dan tautan "Ulangi pilihan" di kanan;
   harga varian yang dipilih tampil sebesar harga utama, supaya pembeli
   langsung melihat perubahannya. */
/* Nama pilihan di atas, tombolnya di bawah - tabel dua kolom bawaan
   WooCommerce terlalu sempit untuk deretan tombol di ponsel. */
.ds-product-page__buy .variations,
.ds-product-page__buy .variations tbody,
.ds-product-page__buy .variations tr,
.ds-product-page__buy .variations th,
.ds-product-page__buy .variations td {
	display: block;
	width: 100%;
}

.ds-product-page__buy .variations tr + tr {
	margin-top: 14px;
}

.ds-product-page__buy .variations th.label {
	padding: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-product-page__buy .variations td.value {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 0;
}

/* ---- Tombol pilihan varian (assets/js/main.js: initVariationSwatches) ---- */
.ds-swatch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ds-swatch__opt {
	min-width: 48px;
	height: 40px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 14px;
	line-height: 38px;
	color: var(--ds-text);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.ds-swatch__opt:hover:not(:disabled) {
	border-color: var(--ds-accent-line);
}

.ds-swatch__opt.is-on {
	font-weight: 600;
	color: var(--ds-text);
	background: rgba(46, 158, 119, .16);
	border-color: var(--ds-accent);
	box-shadow: inset 0 0 0 1px var(--ds-accent);
}

.ds-swatch__opt:focus-visible {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

.ds-swatch__opt:disabled {
	opacity: .4;
	text-decoration: line-through;
	cursor: not-allowed;
}

.ds-swatch__chosen {
	font-weight: 400;
	color: var(--ds-text-2);
}

/* Dropdown asli tetap di halaman untuk skrip WooCommerce, tapi tak terlihat. */
.ds-product-page__buy select.ds-swatch__select {
	position: absolute !important;
	width: 1px !important;
	min-width: 0 !important;
	height: 1px !important;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0 !important;
	opacity: 0;
	pointer-events: none;
}

.ds-product-page__buy .reset_variations {
	font-size: 13px;
	color: var(--ds-text-3);
	text-decoration: underline;
}

.ds-product-page__buy .reset_variations:hover {
	color: var(--ds-text);
}

.ds-product-page__buy .single_variation_wrap {
	flex: 1 1 100%;
}

/* Produk bervarian: jumlah, "Tambah ke keranjang", dan "Beli Sekarang" ada di
   dalam div pembungkus milik WooCommerce, bukan langsung di form.cart. Tanpa
   flex di sini ketiganya hanya berjajar sebagai teks (jarak 4px, bukan 12px
   seperti produk tanpa varian) dan di HP aturan "Beli Sekarang di baris
   sendiri" (bagian 40) tidak berlaku. */
.ds-product-page__buy .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.ds-product-page__buy .woocommerce-variation-price .price {
	display: block;
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ds-text);
}

.ds-product-page__buy .woocommerce-variation-availability p {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-product-page__buy select {
	height: 42px;
	min-width: 200px;
	padding: 0 12px;
	font-family: inherit;
	font-size: 14px;
	color: var(--ds-text);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

/* ---- Penambah jumlah ---- */

.ds-qty {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 12px;
}

.ds-qty__btn {
	width: 40px;
	height: 50px;
	font-size: 17px;
	line-height: 1;
	color: var(--ds-text-2);
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-qty__btn:hover {
	color: var(--ds-accent-300);
}

.ds-qty .quantity {
	margin: 0;
}

.ds-qty input.qty {
	width: 36px;
	height: 50px;
	padding: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ds-text);
	text-align: center;
	background: none;
	border: 0;
	appearance: textfield;
	-moz-appearance: textfield;
}

.ds-qty input.qty::-webkit-outer-spin-button,
.ds-qty input.qty::-webkit-inner-spin-button {
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
}

/* Selektornya panjang bukan karena rewel.
 *
 * WooCommerce memberi tombol ini class .button.alt, dan gaya bawaannya
 * memakai selektor .woocommerce button.button.alt - tiga class. Aturan yang
 * lebih pendek dari itu kalah, dan tombolnya tampil dengan warna ungu bawaan
 * WooCommerce, bukan hijau merek ini. Baris kedua menambah .alt supaya
 * hitungannya menang, dan baris pertama tetap ada untuk tombol yang tidak
 * membawa .alt (mis. produk bervariasi sebelum variasinya dipilih). */
.ds-product-page__buy button.button.single_add_to_cart_button,
.ds-product-page__buy button.button.single_add_to_cart_button.alt,
.ds-product-page__buy button.single_add_to_cart_button {
	height: 52px;
	padding: 0 28px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}

.ds-product-page__buy button.button.single_add_to_cart_button:hover,
.ds-product-page__buy button.button.single_add_to_cart_button.alt:hover,
.ds-product-page__buy button.single_add_to_cart_button:hover {
	background: var(--ds-accent-600);
}

/* WooCommerce mencetak "Stok 996" di dalam formulir belinya. Jumlah persisnya
   bukan urusan pembeli - yang ia perlu tahu sudah dijawab chip "Tersedia" di
   daftar fakta, dan angka empat digit di sebelah tombol beli malah terbaca
   seperti kode. */
.ds-product-page__buy .stock {
	display: none;
}

.ds-buy-now {
	height: 52px;
	padding: 0 24px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
	background: none;
	border: 1.5px solid rgba(46, 158, 119, 0.8);
	border-radius: 12px;
	cursor: pointer;
}

.ds-buy-now:hover {
	color: var(--ds-white);
	background: rgba(46, 158, 119, 0.16);
}

/* Badge jumlah keranjang di pojok tombol "Beli Sekarang".
 *
 * position: relative wajib ada di tombolnya - badge memakai posisi absolut, dan
 * tanpa ini ia akan berlabuh ke elemen berposisi terdekat berikutnya, yang bisa
 * saja seluruh kolom ringkasan produk.
 *
 * Ukurannya lebih besar daripada badge di ikon keranjang (17px), karena di sini
 * ia berdiri di sudut tombol setinggi 52px, bukan di sudut ikon 20px - badge
 * yang sama besar akan terbaca seperti noda, bukan angka. */
.ds-buy-now {
	position: relative;
	overflow: visible;
}

.ds-buy-now .ds-count--cart {
	top: -10px;
	right: -10px;
	min-width: 22px;
	padding: 0 6px;
	font-size: 11.5px;
	line-height: 22px;
	/* Garis segelap latar halaman memisahkan lingkaran hijau dari garis tepi
	   tombol yang juga hijau - tanpa itu keduanya menyatu jadi satu bentuk. */
	border: 2px solid var(--ds-bg-0);
}

/* Setelah barang masuk keranjang lewat AJAX, skrip WooCommerce menyisipkan
   tautan "Lihat keranjang" tepat sesudah tombolnya, dan memberi tombol itu
   tanda centang lewat ::after. Di baris tombol yang lebarnya sudah pas, dua
   tambahan itu mendorong "Beli Sekarang" ke baris baru, dan di layar HP
   tulisannya bertumpuk dengan teks tombol. Notifikasi di pojok sudah membawa
   tombol "Lihat Keranjang" sendiri, jadi keduanya tidak dibutuhkan. */
a.added_to_cart.wc-forward {
	display: none;
}

.ds-product-page__buy .single_add_to_cart_button.added::after {
	content: none;
	display: none;
}

.ds-wish-btn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-top: 16px;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	color: var(--ds-text-2);
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-wish-btn:hover,
.ds-wish-btn[aria-pressed="true"] {
	color: var(--ds-accent-300);
}

/* ---- Tiga jaminan kecil ---- */

.ds-pd__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	width: 100%;
	margin-top: 22px;
	padding: 16px 0 0;
	list-style: none;
	border-top: 1px solid rgba(44, 64, 70, 0.9);
}

.ds-pd__trust li {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-pd__trust .ds-icon {
	flex: none;
	color: var(--ds-accent-300);
}

.ds-pd__trust a {
	color: var(--ds-text-2);
}

.ds-pd__trust a:hover {
	color: var(--ds-accent-300);
}

/* ---- Sering dibeli bersama ---- */

/* .ds-section membawa padding kiri-kanan var(--ds-pad) untuk dipakai di
   beranda, yang section-nya memang selebar layar. Di sini ia sudah berada di
   dalam .ds-shell--pad, jadi padding itu terhitung dua kali dan gridnya
   menyempit sendiri. Dinolkan. */
.ds-section--related {
	padding: 64px 0 0;
}

.ds-section--related .ds-section__head {
	margin-bottom: 22px;
}

.ds-section--related .ds-section__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

/* ---- Tab produk ---- */

.woocommerce-tabs {
	margin-top: 56px;
}

/* Tanpa jarak antar tab: yang memisahkannya padding 22px di dalam masing-masing
   tab, jadi garis bawah tab aktif selebar tabnya sendiri - bukan selebar
   tulisannya. Itu yang membuatnya terbaca sebagai tab, bukan sebagai tautan
   yang kebetulan digarisbawahi. */
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--ds-border);
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	margin-bottom: -1px;
	padding: 14px 22px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ds-text-2);
	border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li a:hover {
	color: var(--ds-text);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--ds-white);
	border-bottom-color: var(--ds-accent);
}

.woocommerce-Tabs-panel {
	max-width: 900px;
	padding-top: 26px;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--ds-text-2);
}

/* Batas 900px itu untuk teks: baris sepanjang 1320px melelahkan dibaca. Tapi
   tab ulasan bukan paragraf melainkan dua kolom - 400 untuk ringkasan, sisanya
   untuk daftar - dan batas itu memotong kolom kanannya jadi separuh. */
.woocommerce-Tabs-panel--reviews {
	max-width: none;
}

.woocommerce-Tabs-panel > h2:first-child:empty {
	display: none;
}

/* Tabel spesifikasi. */
.shop_attributes {
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--ds-border);
	border-spacing: 0;
	border-collapse: separate;
	border-radius: var(--ds-radius);
}

.shop_attributes tr:nth-child(even) {
	background: var(--ds-surface);
}

.shop_attributes th,
.shop_attributes td {
	padding: 13px 18px;
	text-align: left;
}

.shop_attributes th {
	font-weight: 600;
	color: var(--ds-text-2);
}

.shop_attributes td p {
	margin: 0;
}

/* ---- Tab ulasan ----
 *
 * Angkanya dari artboard "02b · Detail Produk — Tab Ulasan" (node 262:1148):
 * kartu ringkasan 400 di kiri, daftar dan formulir 872 di kanan, berjarak 48.
 */

.ds-rv__grid {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* Kartu ringkasan penilaian. */
.ds-rv__summary {
	padding: 28px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-rv__scorerow {
	display: flex;
	gap: 14px;
	align-items: center;
}

.ds-rv__score {
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	color: var(--ds-text);
}

.ds-rv__scoreside {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ds-rv__basis {
	font-size: 13.5px;
	color: var(--ds-text-2);
}

.ds-rv__bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 20px;
}

.ds-rv__bar {
	display: flex;
	gap: 12px;
	align-items: center;
	height: 25px;
	font-size: 12.5px;
	color: var(--ds-text-2);
}

.ds-rv__barlabel {
	flex: none;
	width: 30px;
}

.ds-rv__track {
	flex: 1 1 auto;
	height: 6px;
	background: var(--ds-border);
	border-radius: 999px;
}

.ds-rv__fill {
	display: block;
	height: 100%;
	background: var(--ds-accent-line);
	border-radius: 999px;
}

.ds-rv__barcount {
	flex: none;
	min-width: 14px;
	text-align: right;
}

.ds-rv__note {
	margin-top: 18px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ds-text-3);
}

/* Kartu versi kosong: bentuk dan lebarnya sama, isinya yang berbeda. */
.ds-rv__emptyic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.12);
	border-radius: 999px;
}

.ds-rv__emptytitle {
	margin-top: 16px;
	font-size: 17px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-rv__summary--empty .ds-rv__note {
	margin-top: 8px;
}

/* Daftar ulasan. */
.ds-rv__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-rv__item {
	display: flex;
	gap: 16px;
	padding: 22px 0;
}

.ds-rv__item + .ds-rv__item {
	border-top: 1px solid rgba(44, 64, 70, 0.9);
}

.ds-rv__item:first-child {
	padding-top: 0;
}

/* Lingkaran inisial, bukan foto Gravatar. Hampir tidak ada pembeli di sini
   yang punya Gravatar, jadi yang muncul akan berupa siluet abu-abu yang sama
   untuk semua orang - dan deretan siluet identik justru membuat ulasannya
   terlihat palsu. */
.ds-rv__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--ds-accent-300);
	background: var(--ds-accent-700);
	border-radius: 999px;
}

.ds-rv__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-rv__who {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.ds-rv__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-rv__verified {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 4px 12px 4px 9px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ds-accent-line);
	background: rgba(70, 188, 145, 0.12);
	border: 1px solid rgba(70, 188, 145, 0.35);
	border-radius: 99px;
}

.ds-rv__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 8px;
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-rv__text {
	margin-top: 10px;
	font-size: 14px;
	line-height: 22px;
	color: var(--ds-chrome-350);
}

.ds-rv__text p {
	margin: 0 0 8px;
}

.ds-rv__text p:last-child {
	margin-bottom: 0;
}

.ds-rv__more {
	margin-top: 18px;
	font-size: 14px;
}

.ds-rv__more ul {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 0;
	list-style: none;
}

.ds-rv__more a {
	color: var(--ds-accent-300);
}

.ds-rv__more .current {
	color: var(--ds-text-3);
}

.ds-rv__empty {
	padding: 18px 20px;
	font-size: 14px;
	color: var(--ds-text-2);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
}

/* Belum ada ulasan: kotak syarat/formulir di kanan sejajar dengan atas kartu
   ringkasan, tidak turun 24px. */
.ds-rv__main > .ds-rv__empty + .ds-rv__empty,
.ds-rv__main > .ds-rv__list + .ds-rv__empty {
	margin-top: 16px;
}

.ds-rv__main > .ds-rv__form:first-child {
	margin-top: 0;
}

/* ---- Formulir ulasan ---- */

.ds-rv__form {
	margin-top: 24px;
	padding: 28px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-rv__formtitle {
	font-size: 18px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-rv__formnote {
	margin-top: 12px;
	font-size: 13.5px;
	color: var(--ds-text-2);
}

/* Nama dan email berdampingan, sisanya selebar penuh. Grid dipakai supaya
   dua kolom itu tetap sama lebarnya walaupun salah satunya sedang menampilkan
   pesan kesalahan yang lebih panjang. */
.ds-rv__respond form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 20px;
}

.ds-rv__field {
	grid-column: 1 / -1;
	margin: 0;
}

.ds-rv__field--half {
	grid-column: auto;
}

.ds-rv__respond label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ds-text-2);
}

.ds-rv__respond .required {
	color: var(--ds-accent-300);
}

.ds-rv__respond input[type="text"],
.ds-rv__respond input[type="email"],
.ds-rv__respond textarea,
.ds-rv__respond select {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14px;
	color: var(--ds-text);
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

.ds-rv__respond input::placeholder,
.ds-rv__respond textarea::placeholder {
	color: var(--ds-text-3);
}

.ds-rv__respond input:focus,
.ds-rv__respond textarea:focus,
.ds-rv__respond select:focus {
	outline: none;
	border-color: var(--ds-accent);
}

.ds-rv__respond textarea {
	min-height: 144px;
	line-height: 1.6;
	resize: vertical;
}

/* ---- Bintang penilaian di formulir ----
 *
 * Bintangnya radio button sungguhan yang disembunyikan secara tampilan, dan
 * labelnya yang terlihat (alasannya panjang, ada di single-product-reviews.php).
 *
 * Semua keadaannya diurus CSS, tanpa JavaScript sama sekali. Kuncinya dua:
 * markup-nya dicetak dari bintang 5 ke 1, dan barisnya dibalik lagi dengan
 * row-reverse. Dengan begitu "bintang yang lebih kecil" selalu berada SESUDAH
 * di DOM, jadi bisa dijangkau selektor saudara "~" yang cuma melihat ke depan
 * - sementara di layar ia tetap tampil di sebelah kiri. */
.ds-rv__fieldlabel {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ds-text-2);
}

.ds-rv__pick {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 6px;
}

/* clip, bukan display:none. Input yang display:none tidak bisa difokuskan dan
   dilewati validasi "required" milik peramban - formulirnya akan terkirim
   tanpa penilaian, tanpa pesan apa pun. */
.ds-rv__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ds-rv__pickstar {
	display: inline-flex;
	margin: 0;
	color: #3a4a50;
	cursor: pointer;
	transition: color 0.12s ease;
}

.ds-rv__radio:checked ~ .ds-rv__pickstar {
	color: #e3a127;
}

/* Selama mouse menggantung di atas grupnya, pratinjau menang atas pilihan yang
   sudah tersimpan: semua dipadamkan dulu, lalu yang ditunjuk beserta yang
   lebih kecil dinyalakan. Urutan ketiga aturan ini yang menentukan, bukan
   kekhususannya - ketiganya sama-sama (0,3,0). */
.ds-rv__pick:hover .ds-rv__pickstar {
	color: #3a4a50;
}

.ds-rv__pick .ds-rv__pickstar:hover,
.ds-rv__pick .ds-rv__pickstar:hover ~ .ds-rv__pickstar {
	color: #e3a127;
}

.ds-rv__radio:focus-visible + .ds-rv__pickstar {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 3px;
	border-radius: 3px;
}

.ds-rv__respond .form-submit {
	grid-column: 1 / -1;
	margin: 0;
}

.ds-rv__respond input.ds-rv__submit,
.ds-rv__respond input[type="submit"] {
	height: 45px;
	padding: 0 26px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}

.ds-rv__respond input[type="submit"]:hover {
	background: var(--ds-accent-600);
}

.ds-rv__respond .comment-form-cookies-consent {
	grid-column: 1 / -1;
	display: flex;
	gap: 9px;
	align-items: center;
	margin: 0;
}

.ds-rv__respond .comment-form-cookies-consent label {
	margin: 0;
	font-size: 12.5px;
	font-weight: 400;
}

.ds-rv__respond .comment-form-cookies-consent input {
	width: 16px;
	height: 16px;
	accent-color: var(--ds-accent);
}

@media (max-width: 1099px) {
	.ds-rv__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 599px) {
	.ds-rv__respond form {
		grid-template-columns: 1fr;
	}

	.ds-rv__field--half {
		grid-column: 1 / -1;
	}
}

/* Di bawah 1200px, galeri 636px tetap yang dipakai artboard - tapi sisa
   ruangnya tinggal 300-an, dan panel harga 32px tidak muat di sana. Dua kolom
   sama lebar menahan keduanya tetap terbaca sampai layar benar-benar sempit. */
@media (max-width: 1199px) {
	.ds-product-page {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 899px) {
	.ds-product-page {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.ds-gallery {
		grid-template-columns: 1fr;
	}

	.ds-gallery__thumbs {
		flex-direction: row;
		order: 2;
		max-height: none;
		overflow-x: auto;
	}

	.ds-gallery__thumb {
		flex: 0 0 72px;
	}
}

/* ============================= 13d. Mancing Mania: daftar dan artikel
 *
 * Angkanya dari artboard "04 - Mancing Mania" (node 95:724): kepala halaman
 * rata tengah dengan judul 44px, satu artikel pilihan melintang setinggi 454,
 * lalu dua kolom berjarak 48 - daftar di kiri, sisi kanan selebar 400.
 *
 * DAFTAR, BUKAN GRID
 *
 * Susunannya sengaja berbaris ke bawah. Judul artikel di sini panjangnya satu
 * kalimat penuh, dan kalimat penuh jauh lebih mudah dibaca ketika berbaris
 * daripada ketika dipaksa muat di kotak selebar sepertiga layar.
 */

.ds-mm__inner {
	box-sizing: border-box;
	width: 100%;
	padding-right: var(--ds-pad);
	padding-left: var(--ds-pad);
}

.ds-mm * {
	box-sizing: border-box;
}

.ds-mm__kicker {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 20.8px;
	letter-spacing: 2.34px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
}

/* ---- Kepala halaman ---- */

.ds-mm__hero {
	position: relative;
	padding: 88px 0;
	overflow: hidden;
}

/* Ornamen yang sama dengan kepala FAQ, pada posisi yang sama pula: keduanya
   halaman isi yang dibuka dari menu utama, dan sapuan di tempat berbeda akan
   terbaca sebagai dua situs. */
.ds-mm__ornament {
	position: absolute;
	top: -188px;
	left: -80px;
	width: 1556px;
	height: 483px;
	pointer-events: none;
	background: url("../images/ornaments/sapuan-atas.svg") no-repeat center/100% 100%;
}

.ds-mm__heroinner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	text-align: center;
}

.ds-mm__title {
	margin: 0;
	font-size: 44px;
	font-weight: 600;
	line-height: 52px;
	letter-spacing: -0.44px;
	color: var(--ds-text);
}

.ds-mm__lead {
	margin: 0;
	max-width: 660px;
	font-size: 16px;
	line-height: 25.6px;
	color: var(--ds-text-2);
}

/* ---- Susunan majalah ---- */

.ds-mm__layout {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-top: 24px;
	padding-bottom: 100px;
}

/* ---- Artikel pilihan ---- */

.ds-mm__feature {
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 18px;
}

.ds-mm__featurephoto {
	display: block;
	flex: none;
	width: 555px;
	height: 380px;
	margin: 37px 0 37px 45px;
	overflow: hidden;
	background: #24333a;
	border-radius: 12px;
}

.ds-mm__featurephoto img,
.ds-mm__rowphoto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

/* Gambar membesar sedikit ketika kartunya disentuh penunjuk. Yang bergerak
   hanya gambarnya, ditahan overflow bingkainya, jadi barisnya tidak ikut
   bergeser. */
.ds-mm__feature:hover .ds-mm__featurephoto img,
.ds-mm__feature:focus-within .ds-mm__featurephoto img,
.ds-mm__row:hover .ds-mm__rowphoto img,
.ds-mm__row:focus-within .ds-mm__rowphoto img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.ds-mm__featurephoto img,
	.ds-mm__rowphoto img {
		transition: none;
	}

	.ds-mm__feature:hover .ds-mm__featurephoto img,
	.ds-mm__feature:focus-within .ds-mm__featurephoto img,
	.ds-mm__row:hover .ds-mm__rowphoto img,
	.ds-mm__row:focus-within .ds-mm__rowphoto img {
		transform: none;
	}
}

.ds-mm__featurebody {
	flex: 1 1 auto;
	min-width: 0;
	padding: 36px 40px 36px 80px;
}

.ds-mm__crumb {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 19.2px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ds-mm__crumbmark {
	color: var(--ds-accent-300);
}

.ds-mm__crumbcat {
	color: #8fb6c7;
}

.ds-mm__dot {
	width: 4px;
	height: 4px;
	background: var(--ds-text-3);
	border-radius: 999px;
}

.ds-mm__featuretitle {
	margin: 12px 0 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ds-text);
}

.ds-mm__featuretitle a,
.ds-mm__rowtitle a,
.ds-mm__poptitle a {
	color: inherit;
}

.ds-mm__featuretitle a:hover,
.ds-mm__rowtitle a:hover,
.ds-mm__poptitle a:hover {
	color: var(--ds-accent-300);
}

.ds-mm__excerpt {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
}

.ds-mm__meta {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-3);
}

.ds-mm__read {
	display: inline-block;
	margin-top: 22px;
	padding: 11px 18px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ds-white);
	background: var(--ds-accent);
	border-radius: 10px;
	text-decoration: none;
}

.ds-mm__read:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

/* ---- Dua kolom ---- */

.ds-mm__body {
	display: flex;
	gap: 48px;
	align-items: flex-start;
}

.ds-mm__list {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-mm__listhead {
	margin-bottom: 18px;
}

.ds-mm__row {
	display: flex;
	gap: 28px;
	align-items: center;
	padding: 26px 0;
	border-top: 1px solid rgba(44, 64, 70, 0.9);
}

.ds-mm__row:first-of-type {
	border-top: 0;
}

.ds-mm__rowphoto {
	display: block;
	flex: none;
	width: 220px;
	height: 140px;
	overflow: hidden;
	background: #24333a;
	border-radius: 10px;
}

.ds-mm__rowbody {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-mm__cat {
	display: inline-block;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 19.2px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8fb6c7;
	text-decoration: none;
}

a.ds-mm__cat:hover {
	color: var(--ds-accent-300);
}

.ds-mm__rowtitle {
	margin: 8px 0 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ds-text);
}

.ds-mm__row .ds-mm__excerpt,
.ds-mm__row .ds-mm__meta {
	margin-top: 8px;
}

.ds-mm__empty {
	padding: 26px 0;
	font-size: 15px;
	color: var(--ds-text-2);
}

/* ---- Sisi kanan ---- */

.ds-mm__side {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 24px;
	width: 400px;
}

.ds-mm__card {
	padding: 26px 26px 14px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 16px;
}

.ds-mm__card--quiet {
	padding: 26px;
	background: rgba(26, 39, 43, 0.52);
}

.ds-mm__poplist {
	margin-top: 10px;
}

.ds-mm__pop {
	padding: 16px 0;
	border-top: 1px solid rgba(44, 64, 70, 0.8);
}

.ds-mm__pop:first-child {
	border-top: 0;
}

.ds-mm__poptitle {
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ds-text);
}

.ds-mm__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.ds-mm__chip {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ds-text-2);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 999px;
	text-decoration: none;
}

.ds-mm__chip:hover {
	color: var(--ds-text);
	border-color: var(--ds-accent);
}

.ds-mm__chip.is-on {
	color: var(--ds-text);
	background: var(--ds-accent-700);
	border-color: rgba(46, 158, 119, 0.7);
}

/* Kartu tanya berupa tautan utuh, bukan kotak dengan tautan kecil di dalamnya:
   seluruh permukaannya bisa ditekan, dan di layar sentuh itu bedanya besar. */
.ds-mm__ask {
	display: block;
	padding: 24px 26px;
	background: rgba(70, 188, 145, 0.08);
	border: 1px solid rgba(70, 188, 145, 0.3);
	border-radius: 16px;
	text-decoration: none;
}

.ds-mm__ask:hover {
	background: rgba(70, 188, 145, 0.14);
}

.ds-mm__asktitle {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-mm__asktext {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
}

/* ---- Layar sempit ---- */

@media (max-width: 1100px) {
	.ds-mm__body {
		flex-direction: column;
	}

	.ds-mm__side {
		width: 100%;
	}

	.ds-mm__featurephoto {
		width: 42%;
		height: 300px;
	}

	.ds-mm__featurebody {
		padding: 28px 28px 28px 40px;
	}
}

@media (max-width: 900px) {
	.ds-mm__hero {
		padding: 64px 0 48px;
	}

	.ds-mm__title {
		font-size: 32px;
		line-height: 40px;
	}

	.ds-mm__ornament {
		display: none;
	}

	.ds-mm__feature {
		flex-direction: column;
		align-items: stretch;
	}

	.ds-mm__featurephoto {
		width: auto;
		height: 240px;
		margin: 16px 16px 0;
	}

	.ds-mm__featurebody {
		padding: 24px;
	}

	.ds-mm__featuretitle {
		font-size: 22px;
	}

	.ds-mm__layout {
		padding-bottom: 72px;
	}
}

@media (max-width: 600px) {
	.ds-mm__row {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.ds-mm__rowphoto {
		width: 100%;
		height: 180px;
	}
}

/* ============================== 13e. Wishlist dan halaman 404 */

/* ---- Tombol hati ---- */

.ds-wish-btn.is-on,
.ds-icon-btn.is-on {
	color: var(--ds-accent-text);
	border-color: var(--ds-accent);
}

.ds-wish-btn.is-on svg,
.ds-icon-btn.is-on svg {
	fill: var(--ds-accent-text);
}

/* Gaya kartu wishlist lama dilepas bersama halamannya. Daftarnya sekarang
   berupa baris di dalam Akun Saya (bagian 22), bukan grid kartu di halaman
   tersendiri. */

/* ---- Halaman 404 ----
   Kepalanya deepstrike_center_hero() (sama dengan halaman Masuk). Bagian ini
   hanya isi di bawahnya: satu kalimat, kotak cari, dua tombol. */

/* Transparan: latar gelap dan ornamen kepala halaman menyambung ke isi,
   seperti halaman FAQ. Dulu berwarna kotak (--ds-surface) sehingga latarnya
   terlihat terpotong tepat di bawah judul. */
.ds-404 {
	background: transparent;
}

.ds-404__inner {
	max-width: 620px;
	margin: 0 auto;
	padding: 44px 24px 96px;
	text-align: center;
}

.ds-404__text {
	margin: 0 auto 28px;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--ds-text-2);
}

/* Kotak cari yang sama dengan di kepala situs, dibuat selebar kolom. */
.ds-404__search {
	margin: 0 auto 24px;
	text-align: left;
}

.ds-404__search .ds-search {
	width: 100%;
	max-width: none;
}

.ds-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* Kedua tombol sama tinggi dan sama gaya hurufnya; yang membedakan hanya
   warnanya (utama hijau, kedua bergaris). */
.ds-404__actions .ds-btn {
	height: 54px;
	padding: 0 30px;
	font-size: 13.5px;
	line-height: 21.6px;
	letter-spacing: 1.215px;
	text-transform: uppercase;
}

.ds-404__actions .ds-btn--ghost:hover {
	color: var(--ds-accent-text);
	border-color: var(--ds-accent);
}

@media (max-width: 600px) {
	/* Tepi kiri-kanan 24px, sama dengan header dan halaman lain di HP: dengan
	   20px kotak cari 404 tampak 4px lebih lebar dari kotak cari header tepat
	   di atasnya. */
	.ds-404__inner {
		padding: 28px 24px 64px;
	}

	.ds-404__text {
		font-size: 14.5px;
	}

	.ds-404__actions .ds-btn {
		flex: 1 1 100%;
	}
}

/* ======================================================= 14. Responsif */

@media (max-width: 1439px) {
	.ds-hero__title {
		font-size: 48px;
		line-height: 1.14;
	}
}

@media (max-width: 1199px) {
	.ds-header__search {
		padding: 0 24px;
	}

	.ds-header__wa {
		display: none;
	}

	.ds-grid--products,
	.ds-categories__grid,
	.ds-woo ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ds-articles {
		flex-direction: column;
		gap: 32px;
	}

	.ds-article-lead {
		flex: 1 1 auto;
		width: 100%;
	}

	.ds-article-list {
		width: 100%;
	}

	.ds-footer__top {
		grid-template-columns: 260px minmax(0, 1fr);
	}

	.ds-footer__menu {
		grid-column: 1 / -1;
	}

	.ds-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	:root {
		--ds-pad: 24px;
	}

	.ds-header__burger {
		display: inline-flex;
	}

	.ds-header__account span {
		display: none;
	}

	/* Baris menu hanya tampil saat tombol garis tiga dibuka.
	 *
	 * Tombol dropdown Katalog Produk disembunyikan di sini dan dipindah menjadi
	 * item pertama menu garis tiga (.ds-menu__catalog). Tanpa tombol itu
	 * barisnya tidak berisi apa pun selama menu tertutup. */
	.ds-header__bar {
		position: relative;
		display: none;
		flex-wrap: wrap;
		height: auto;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.ds-header__bar.is-open {
		display: flex;
	}

	.ds-header__cat {
		display: none;
	}

	.ds-menu__catalog {
		display: block;
	}

	.ds-header__nav {
		display: none;
		width: 100%;
	}

	.ds-header__nav.is-open {
		display: block;
	}

	.ds-menu {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
		padding: 8px 0;
	}

	.ds-menu a {
		padding: 12px 0;
	}

	.ds-menu .sub-menu {
		position: static;
		display: flex;
		border: 0;
		background: transparent;
		padding: 0 0 0 16px;
	}

	/* Tinggi hero mengikuti LEBAR layar, bukan angka piksel tetap.
	 *
	 * Fotonya di Figma berukuran 1440x640 - lebarnya dua seperempat kali
	 * tingginya. Dengan tinggi tetap 520px di layar selebar 400px, object-fit:
	 * cover harus membuang lebih dari separuh lebar foto supaya kotaknya penuh:
	 * yang tersisa cuma potongan tengah yang seolah dizoom, dan orang di
	 * fotonya terpotong. Rasio menjaga pemotongan itu tetap wajar di lebar
	 * layar berapa pun.
	 *
	 * Ditulis sebagai vw, bukan aspect-ratio: teks slide di dalamnya memakai
	 * height 100%, dan persentase itu hanya berarti kalau tinggi induknya
	 * berupa angka pasti. Dengan aspect-ratio tingginya "auto", dan teksnya
	 * berhenti menempel di dasar hero. */
	.ds-hero {
		/* 16:11 - 11/16 = 0.6875 */
		height: 68.75vw;
		min-height: 420px;
		max-height: 560px;
	}

	.ds-hero__inner {
		gap: 28px;
		padding: 72px var(--ds-pad) 84px;
	}

	/* Ornamen sapuan ikut dikecilkan. Pada 130% ia lebih tinggi daripada
	   hero-nya sendiri di layar sempit, dan garis-garisnya jatuh menimpa
	   judul. */
	.ds-hero__ornament {
		background-size: auto 100%;
	}

	/* Peredup diganti dari kiri-ke-kanan menjadi atas-ke-bawah.
	 *
	 * Di desktop teks duduk di separuh kiri, jadi peredup mendatar cukup. Di
	 * ponsel teks memakai seluruh lebar, dan separuh kanannya berdiri di atas
	 * foto tanpa peredup sama sekali - persis tempat judul putih hilang
	 * tertelan langit terang. */
	.ds-hero__scrim {
		background: linear-gradient(180deg, rgba(4, 8, 10, 0.45) 0%, rgba(4, 8, 10, 0.25) 32%, rgba(4, 8, 10, 0.88) 100%);
	}

	.ds-hero__title {
		max-width: none;
		font-size: 34px;
		line-height: 1.18;
	}

	.ds-hero__nav {
		top: auto;
		right: var(--ds-pad);
		bottom: 24px;
		flex-direction: row;
	}

	.ds-hero__count {
		flex-direction: row;
		gap: 2px;
		width: 52px;
		height: 36px;
	}

	/* Susunan pita jaminan di ponsel diatur di bagian 28 - di sana ia menjadi
	   geseran satu poin per layar, bukan dua kolom seperti dulu. Garis
	   pemisahnya tidak dipakai lagi begitu poinnya tidak lagi bersebelahan. */
	.ds-trust__divider {
		display: none;
	}

	.ds-section,
	.ds-categories,
	.ds-section--articles {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.ds-section__head {
		flex-wrap: wrap;
		margin-bottom: 28px;
	}

	.ds-section__title {
		font-size: 24px;
		line-height: 32px;
	}

	.ds-grid--products,
	.ds-categories__grid,
	.ds-woo ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Kartu voucher menyusut mengikuti isinya.
	 *
	 * min-height 244px datang dari artboard desktop, di mana kartu itu memang
	 * melebar 1320px dan tingginya wajar. Di ponsel lebarnya tinggal 312px
	 * sedangkan tinggi minimumnya tidak ikut turun - jadi yang muncul kotak
	 * hijau hampir bujur sangkar dengan ruang kosong di bawah teksnya, dan ia
	 * memakan hampir seluruh layar. */
	.ds-voucher {
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
		min-height: 0;
		padding: 22px 18px;
	}

	.ds-voucher__eyebrow {
		font-size: 11px;
		line-height: 17px;
	}

	.ds-voucher__title {
		font-size: 20px;
		line-height: 1.25;
	}

	.ds-voucher__desc {
		font-size: 12.5px;
		line-height: 19px;
	}

	.ds-voucher__code {
		width: 100%;
	}

	.ds-voucher__value {
		flex: 1 1 auto;
		width: auto;
		height: 52px;
		padding: 10px 12px;
		font-size: 16px;
		letter-spacing: 1.6px;
	}

	.ds-voucher__copy {
		width: 68px;
		height: 52px;
	}

	/* Kedua ornamen ikut mengecil bersama kartunya. Cahaya selebar 560px di
	   kartu selebar 312px bukan lagi cahaya di satu sudut - ia menyelimuti
	   seluruh kartu dan membuat teks putihnya kehilangan kontras. */
	.ds-voucher::before {
		width: 300px;
		height: 300px;
	}

	.ds-voucher::after {
		height: 120px;
	}

	.ds-footer__menus {
		flex-wrap: wrap;
	}

	.ds-footer__top {
		grid-template-columns: 1fr;
	}

	/* Jarak baris hak cipta di ponsel diatur di bagian 31. */

	.ds-fab__label {
		display: none;
	}

	.ds-fab {
		padding: 16px;
		border-radius: 999px;
	}
}

@media (max-width: 599px) {
	.ds-header__top {
		flex-wrap: wrap;
		height: auto;
		padding-top: 12px;
		padding-bottom: 12px;
		gap: 12px;
	}

	.ds-header__search {
		order: 3;
		width: 100%;
		padding: 0;
	}

	.ds-header__actions {
		margin-left: auto;
	}

	/* Di ponsel rasionya dibuat tegak, mengikuti bentuk layarnya sendiri.
	 *
	 * max-height menjaga tablet kecil selebar 599px tidak mendapat hero
	 * setinggi 749px, dan min-height menjaga ponsel sempit tetap punya ruang
	 * untuk kicker, judul, dan tombol. */
	.ds-hero {
		/* 4:5 - 5/4 = 1.25 */
		height: 125vw;
	}

	.ds-hero__inner {
		gap: 20px;
		padding: 56px var(--ds-pad) 72px;
	}

	.ds-hero__kicker {
		margin-bottom: 14px;
		font-size: 11px;
		letter-spacing: 1.6px;
	}

	.ds-hero__title {
		font-size: 28px;
	}

	.ds-hero__checks {
		margin-top: 12px;
	}

	.ds-hero__checks li {
		font-size: 13px;
	}

	/* Dua kartu per baris, bukan satu.
	 *
	 * Satu kartu selebar layar berarti delapan produk menjadi delapan layar
	 * penuh yang harus digulir satu per satu, dan pembeli tidak pernah melihat
	 * dua pilihan berdampingan untuk dibandingkan - padahal membandingkan
	 * justru cara orang memilih alat pancing. */
	.ds-grid--products,
	.ds-archive__grid,
	.ds-woo ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	/* Isi kartu ikut dirapatkan. Pada kartu selebar ~150px, padding 20px di
	   kiri dan kanan menyisakan 110px untuk judul - dan nama produk alat
	   pancing hampir tidak pernah muat di sana. */
	.ds-product__media {
		padding: 12px 10px 14px;
	}

	.ds-product__title {
		height: 46px;
		padding: 0 10px;
		font-size: 13.5px;
		line-height: 19px;
	}

	.ds-price {
		font-size: 15px;
	}

	.ds-price--old {
		font-size: 12px;
	}

	/* text-align: rentang harga yang turun dua baris tetap di tengah, sejajar
	   dengan harga tunggal di kartu sebelahnya (dulu rata kiri). */
	.ds-product__prices {
		flex-wrap: wrap;
		padding: 0 10px 6px;
		text-align: center;
	}

	.ds-product__foot {
		flex-wrap: wrap;
		gap: 6px;
		padding: 10px;
	}

	/* Dua kartu utuh per layar ponsel, seperti grid produk lain di ponsel.
	   Jaraknya dirapatkan ke 12px supaya kartunya tidak terlalu sempit. */
	.ds-carousel__track {
		gap: 12px;
	}

	.ds-carousel__track > .ds-product {
		flex: 0 0 calc((100% - 12px) / 2);
		width: calc((100% - 12px) / 2);
	}

	.ds-entry__title {
		font-size: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============ 15. Hero berbilah banyak: teks per slide dan titik penunjuk */

/* Semua teks slide dicetak ke HTML, dan hanya satu yang terlihat.
 *
 * Dicetak semua, bukan disisipkan JavaScript, karena mesin pencari membaca
 * HTML dan bukan hasil skrip - judul slide kedua tetap terbaca meski tidak
 * pernah tampil di layar. */
.ds-hero__inner {
	display: none;
}

.ds-hero__inner.is-active {
	display: flex;
}

.ds-hero__checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 18px;
}

.ds-hero__checks li {
	display: flex;
	gap: 9px;
	align-items: center;
	font-size: 15px;
	color: var(--ds-text);
}

.ds-hero__checks svg {
	flex: none;
	color: var(--ds-accent-300);
}

/* Titik penunjuk untuk layar sempit.
 *
 * Panah hero duduk di rel tegak di tepi kanan, dan rel itu disembunyikan di
 * bawah 600px - tidak ada ruang untuknya di samping judul. Tanpa titik, ponsel
 * mendapat banner yang berganti sendiri tanpa tanda bahwa ada slide lain, dan
 * tanpa cara kembali ke slide yang baru saja lewat.
 *
 * Titik dipilih daripada panah yang diperkecil karena ia sekaligus memberi tahu
 * ADA BERAPA slide - sesuatu yang panah tidak pernah lakukan - dan sasaran
 * sentuhnya lebih besar di tempat ibu jari memang berada. */
/* Titiknya tetap 9px, tapi area sentuhnya 25x41px: tombolnya transparan, dan
 * titiknya digambar ::before di tengahnya. (Bukan background-clip: sudut
 * membulat dihitung dari kotak tombol yang besar, dan titik 9px di tengahnya
 * jadi bersudut siku.)
 * Titik 9px saja terlalu kecil untuk jari - di uji ponsel, menekan titik
 * kedua sering mengenai yang pertama. Karena padding itu, jarak antartitik
 * sekarang datang dari padding (8+8), bukan dari gap, dan posisi bawahnya
 * dikurangi 16px supaya titiknya tetap di tempat yang sama. */
.ds-hero__dots {
	position: absolute;
	bottom: 6px;
	left: 50%;
	z-index: 3;
	display: none;
	gap: 0;
	transform: translateX(-50%);
}

.ds-hero__dot {
	position: relative;
	width: 25px;
	height: 41px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-hero__dot::before {
	content: "";
	position: absolute;
	inset: 16px 8px;
	background: rgba(245, 248, 249, 0.4);
	border-radius: 999px;
}

.ds-hero__dot.is-active {
	width: 38px;
}

.ds-hero__dot.is-active::before {
	background: var(--ds-accent);
}

@media (max-width: 599px) {
	.ds-hero__nav {
		display: none;
	}

	.ds-hero__dots {
		display: flex;
	}
}

/* Gambar unggahan di pita jaminan, sebagai ganti ikon garis.
 *
 * contain, bukan cover: yang diunggah pemilik toko biasanya logo atau ikon
 * dengan ruang kosong di tepinya, dan cover justru memotong ruang kosong itu
 * sampai gambarnya terlihat jauh lebih besar daripada ikon bawaan di kotak
 * sebelahnya. Dengan contain, gambar muat utuh di dalam padding kotaknya.
 */
.ds-trust__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ==================== 16. Tombol dan pita ajakan di halaman isi
 *
 * Dipakai bersama halaman Tentang Kami dan FAQ, dan artboard Figma-nya memang
 * memakai komponen yang sama. Dulu tinggal di gaya halaman Tentang Kami, dan
 * halaman kedua yang membutuhkannya hanya punya dua pilihan: menyalinnya, atau
 * memakai nama kelas halaman lain. Keduanya salah, jadi tempatnya dipindah ke
 * sini.
 */

.ds-pg__btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 26px;
	font-size: 15px;
	font-weight: 600;
	line-height: 22.5px;
	text-transform: uppercase;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 1px solid transparent;
	border-radius: 10px;
	text-decoration: none;
}

.ds-pg__btn:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

.ds-pg__btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.45);
}

.ds-pg__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.16);
}

.ds-pg__btn--white {
	color: #0b2a20;
	background: #fff;
}

.ds-pg__btn--white:hover {
	color: #0b2a20;
	background: #e8f5ef;
}

.ds-pg__btn--line {
	color: var(--ds-white);
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
}

.ds-pg__btn--line:hover {
	color: var(--ds-white);
	background: rgba(255, 255, 255, 0.12);
}

/* ---- Pita ajakan ---- */

.ds-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(151.4deg, #1a6f52 10.9%, #12513c 53.9%, #0b2a20 89.1%);
	border-radius: 18px;
}

/* Dua ornamen ditumpuk dalam satu kotak: cahaya di atas sapuan. Di Figma
   keduanya dipotong oleh bentuk sapuannya; di sini keduanya cukup ditumpuk
   dengan tembus pandang, dan pada 62% bedanya tidak terlihat. */
.ds-cta__ornament {
	position: absolute;
	top: -165px;
	left: -76px;
	width: 1556px;
	height: 539px;
	opacity: 0.62;
	pointer-events: none;
	background:
		url("../images/ornaments/cahaya.svg") no-repeat center/100% 100%,
		url("../images/ornaments/sapuan-bawah.svg") no-repeat center/100% 100%;
}

.ds-cta__in {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 40px;
	align-items: center;
	min-height: 260px;
	padding: 44px 48px;
}

.ds-cta__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-cta__head {
	margin: 12px 0 0;
	font-size: 32px;
	font-weight: 600;
	line-height: 40px;
	color: var(--ds-white);
}

.ds-cta__note {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 25.6px;
	color: #c7eede;
}

.ds-cta__actions {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 12px;
}

.ds-cta__actions .ds-pg__btn {
	width: 280px;
}

@media (max-width: 900px) {
	.ds-cta__in {
		flex-direction: column;
		align-items: flex-start;
		padding: 34px 28px;
	}

	.ds-cta__head {
		font-size: 26px;
		line-height: 34px;
	}

	.ds-cta__actions,
	.ds-cta__actions .ds-pg__btn {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.ds-pg__btn {
		width: 100%;
	}
}

/* ================================= 17. Artikel: halaman satu tulisan
 *
 * Angkanya dari artboard "05 - Artikel Details" (node 97:894): kepala artikel
 * selebar 820, foto utama setinggi 520 radius 16, badan artikel selebar 772
 * dengan rel bagikan selebar 88 di kirinya.
 *
 * LEBAR BACAAN 772 ITU BUKAN ANGKA ACAK
 *
 * Pada ukuran huruf 17-18px, itu sekitar 75 huruf per baris - jarak yang
 * membuat mata menemukan awal baris berikutnya tanpa tersesat. Dibiarkan penuh
 * 1320, tiap baris jadi dua kali lebih panjang dan pembaca kehilangan barisnya
 * di paragraf ketiga.
 */

/* Ornamen sapuan, sama seperti di FAQ, Mancing Mania, dan halaman akun.
 *
 * <main class="ds-art"> mulai tepat di bawah header setinggi 128px, jadi -188
 * di sini jatuh di -60 dari puncak halaman - persis titik yang sama dengan
 * ornamen di artboard lain.
 *
 * Tidak ada overflow: hidden di sini. Lebar berlebihnya sudah dipotong body,
 * dan memotongnya di <main> akan mematikan rel bagikan yang menempel sambil
 * halaman digulir. */
/* overflow: hidden karena alasan yang sama dengan kepala halaman akun:
   ornamen di bawah ini selebar 1556px, dan tanpa dipotong ia melebarkan dokumen
   sampai halaman artikel bisa digeser ke samping di ponsel. Wadah ornamen lain
   di berkas ini - .ds-main--shop, .ds-hero-step, .ds-cta, .ds-mm__hero -
   semuanya sudah memotong; hanya yang ini yang terlewat. */
.ds-art {
	position: relative;
	overflow: hidden;
}

.ds-art::before {
	content: "";
	position: absolute;
	top: -188px;
	left: -80px;
	width: 1556px;
	height: 506px;
	pointer-events: none;
	background: url("../images/ornaments/sapuan-atas.svg") no-repeat center/100% 100%;
}

/* Isinya berdiri selapis di atas ornamen. Tanpa ini, sapuan yang berposisi
   absolut menutupi foto utama artikelnya. */
.ds-art > * {
	position: relative;
	z-index: 1;
}

.ds-art__inner {
	box-sizing: border-box;
	width: 100%;
	padding-right: var(--ds-pad);
	padding-left: var(--ds-pad);
}

.ds-art * {
	box-sizing: border-box;
}

/* ---- Kepala artikel ---- */

.ds-art__head {
	padding: 72px 0 40px;
}

.ds-art__head .ds-art__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
}

.ds-art__headbox {
	width: 100%;
	max-width: 820px;
}

.ds-art__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-2);
}

.ds-art__crumbs a {
	color: var(--ds-text-2);
}

.ds-art__crumbs a:hover {
	color: var(--ds-accent-300);
}

.ds-art__title {
	margin: 16px 0 0;
	font-size: 42px;
	font-weight: 600;
	line-height: 51.24px;
	letter-spacing: -0.42px;
	color: var(--ds-text);
}

.ds-art__meta {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 22.4px;
	color: #c8d0d4;
}

.ds-art__meta .ds-icon {
	flex: none;
	color: var(--ds-text-3);
}

.ds-art__photo {
	width: 100%;
	max-width: var(--ds-maxw);
	height: 520px;
	margin: 0;
	overflow: hidden;
	background: #24333a;
	border-radius: 16px;
}

.ds-art__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Badan artikel ---- */

.ds-art__body {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	justify-content: center;
	padding-top: 48px;
	padding-bottom: 72px;
}

/* Rel bagikan ikut menggulir sampai artikelnya habis, lalu berhenti bersama
   kolomnya. Yang membuatnya berhenti sendiri adalah induk flex-nya: sticky
   menempel di dalam kotak induk, dan kotak itu setinggi badan artikel. */
.ds-art__share {
	position: sticky;
	top: 108px;
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 10px;
	width: 88px;
}

.ds-art__sharelabel {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ds-text-2);
}

.ds-art__sharebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--ds-text-2);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 9px;
	cursor: pointer;
}

.ds-art__sharebtn:hover {
	color: var(--ds-accent-300);
	border-color: var(--ds-accent);
}

.ds-art__content {
	flex: none;
	width: 100%;
	max-width: 772px;
}

/* Isi artikel ditulis pemilik toko di editor, jadi tagnya apa saja bisa
   datang. Yang diatur di sini hanya yang benar-benar dipakai menulis. */
.ds-art__content > *:first-child {
	margin-top: 0;
}

.ds-art__content p {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 30px;
	color: var(--ds-text-2);
}

/* Paragraf pembuka lebih besar dan lebih terang - di artboard ia memang
   berdiri sebagai ringkasan, bukan sebagai paragraf biasa yang pertama. */
.ds-art__content > p:first-child {
	font-size: 18px;
	line-height: 31px;
	color: var(--ds-text);
}

.ds-art__content h2 {
	margin: 32px 0 20px;
	font-size: 26px;
	font-weight: 600;
	line-height: 34px;
	letter-spacing: 0.26px;
	color: var(--ds-text);
}

.ds-art__content h3 {
	margin: 28px 0 16px;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: var(--ds-text);
}

.ds-art__content ul,
.ds-art__content ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.ds-art__content li {
	margin-bottom: 10px;
	font-size: 17px;
	line-height: 30px;
	color: var(--ds-text-2);
}

.ds-art__content a {
	color: var(--ds-accent-300);
}

.ds-art__content strong {
	color: var(--ds-text);
}

.ds-art__content img {
	height: auto;
	border-radius: 12px;
}

.ds-art__content blockquote {
	margin: 0 0 20px;
	padding: 18px 22px;
	background: rgba(46, 158, 119, 0.08);
	border-left: 3px solid var(--ds-accent);
	border-radius: 0 12px 12px 0;
}

.ds-art__content blockquote p:last-child {
	margin-bottom: 0;
}

/* ---- Dua rak di bawah artikel ---- */

.ds-art__shelf {
	padding: 64px 0 72px;
	background: rgba(26, 39, 43, 0.52);
}

.ds-art__more-posts {
	padding: 72px 0 88px;
}

.ds-art__shelfhead {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.ds-art__shelfhead h2 {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 31.2px;
	color: var(--ds-text);
}

.ds-art__more {
	flex: none;
	padding: 12px 22px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ds-text-2);
	border: 1px solid var(--ds-border);
	border-radius: 9px;
}

.ds-art__more:hover {
	color: var(--ds-accent-300);
	border-color: var(--ds-accent);
}

.ds-art__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.ds-art__posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.ds-art__postphoto {
	display: block;
	height: 263px;
	overflow: hidden;
	background: #24333a;
	border-radius: 12px;
}

.ds-art__postphoto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.ds-art__post:hover .ds-art__postphoto img,
.ds-art__post:focus-within .ds-art__postphoto img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.ds-art__postphoto img {
		transition: none;
	}

	.ds-art__post:hover .ds-art__postphoto img,
	.ds-art__post:focus-within .ds-art__postphoto img {
		transform: none;
	}
}

.ds-art__postcat {
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-accent-text);
}

.ds-art__postcat:hover {
	color: var(--ds-accent-300);
}

.ds-art__posttitle {
	margin: 10px 0 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 24.14px;
	color: var(--ds-text);
}

.ds-art__posttitle a {
	color: inherit;
}

.ds-art__posttitle a:hover {
	color: var(--ds-accent-300);
}

.ds-art__postexcerpt {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
}

.ds-art__postmeta {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-3);
}

.ds-art__comments {
	padding-bottom: 72px;
}

/* ---- Layar sempit ---- */

@media (max-width: 1100px) {
	.ds-art__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ds-art__posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.ds-art__head {
		padding: 48px 0 28px;
	}

	.ds-art__title {
		font-size: 30px;
		line-height: 38px;
	}

	.ds-art__photo {
		height: 300px;
	}

	/* Rel bagikan pindah ke atas artikel dan berbaring mendatar. Di layar
	   sempit tidak ada ruang di kiri, dan menumpuknya di bawah artikel berarti
	   tidak pernah terlihat. */
	.ds-art__body {
		flex-direction: column;
		gap: 24px;
		padding-top: 32px;
		padding-bottom: 56px;
	}

	.ds-art__share {
		position: static;
		flex-direction: row;
		gap: 8px;
		align-items: center;
		width: 100%;
	}

	.ds-art__sharelabel {
		margin-right: 4px;
	}

	.ds-art__content {
		max-width: none;
	}

	.ds-art__shelf {
		padding: 48px 0 56px;
	}

	.ds-art__more-posts {
		padding: 48px 0 64px;
	}
}

@media (max-width: 600px) {
	.ds-art__title {
		font-size: 26px;
		line-height: 34px;
	}

	.ds-art__photo {
		height: 220px;
	}

	.ds-art__products,
	.ds-art__posts {
		grid-template-columns: minmax(0, 1fr);
	}

	.ds-art__shelfhead {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.ds-art__content p,
	.ds-art__content li {
		font-size: 16px;
		line-height: 28px;
	}

	.ds-art__content h2 {
		font-size: 22px;
		line-height: 30px;
	}
}

/* ==================================== 18. Halaman keranjang
 *
 * Angkanya dari artboard "03 · Keranjang" (node 111:585): isi 1320 dibagi dua,
 * 906 untuk tabelnya dan 380 untuk ringkasan, berjarak 34.
 */

/* Halaman keranjang, checkout, dan akun adalah halaman biasa, jadi isinya
   masuk ke .ds-entry__content yang dibatasi 78ch - batas untuk paragraf yang
   nyaman dibaca. Tabel enam kolom bukan paragraf; batas itu memerasnya jadi
   separuh lebar layar. */
.ds-shop-page .ds-entry__content {
	max-width: none;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.ds-cart > * {
	min-width: 0;
}

.ds-cart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 34px;
	align-items: start;
	margin-top: 26px;
}

/* woocommerce.css berasal dari zaman float: ia memberi .cart-collaterals dan
   .cart_totals lebar persen plus float:right. Di dalam grid, persen itu dihitung
   dari lebar kolomnya sendiri - 48% dari 380 jadi 182 - dan float-nya membuat
   kartunya menumpuk di atas tabel. Dinolkan di sini, bukan di berkas lain,
   supaya yang membaca aturan grid di atas langsung melihat apa yang
   melawannya. */
.ds-cart .cart-collaterals,
.ds-cart .cart-collaterals .cart_totals,
.ds-cart .woocommerce-cart-form {
	float: none;
	width: 100%;
}

/* Sisa zaman float yang kedua: pseudo-element pembersih.
 *
 * woocommerce.css menaruh ::before dan ::after berisi content:" " pada
 * .cart-collaterals dan pada kotak kupon, sebagai clearfix. Di dalam flex atau
 * grid, keduanya bukan lagi pembersih melainkan ITEM - dua kotak kosong yang
 * ikut kebagian jarak dan mendorong isinya. Karena itu dimatikan, bukan
 * dibiarkan "toh tidak kelihatan". */
.ds-cart .cart-collaterals::before,
.ds-cart .cart-collaterals::after,
.ds-cart table.ds-cart__table td.actions .ds-cart__coupon::before,
.ds-cart table.ds-cart__table td.actions .ds-cart__coupon::after {
	display: none;
}

/* ---- Tabel keranjang ---- */

/* border-collapse:separate wajib di sini: dengan collapse, sudut membulat
   pada tabel tidak berlaku - garis-garis selnya menggambar sudut siku di
   atasnya. Jadi garis pemisahnya dipasang sebagai border-top tiap sel, bukan
   sebagai border tabel. */
.ds-cart table.ds-cart__table {
	width: 100%;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
	border-spacing: 0;
	border-collapse: separate;
	overflow: hidden;
}

.ds-cart table.ds-cart__table th {
	padding: 16px 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	text-align: left;
	color: var(--ds-text-2);
	border-bottom: 1px solid var(--ds-border);
}

.ds-cart table.ds-cart__table td {
	padding: 18px 0;
	vertical-align: middle;
}

.ds-cart table.ds-cart__table tbody tr + tr td {
	border-top: 1px solid var(--ds-border);
}

/* Lebar kolomnya dipatok supaya nama produk yang panjang tidak mendorong harga
   dan subtotal keluar dari barisnya. Nama produk satu-satunya kolom yang boleh
   melar, karena ia yang dibaca. */
.ds-cart table.ds-cart__table td.product-remove {
	width: 78px;
	padding-left: 22px;
}

.ds-cart table.ds-cart__table td.product-thumbnail {
	width: 96px;
}

.ds-cart table.ds-cart__table td.product-name {
	width: auto;
	min-width: 220px;
}

.ds-cart table.ds-cart__table td.product-price {
	width: 130px;
	font-size: 15px;
	color: var(--ds-chrome-350);
}

.ds-cart table.ds-cart__table td.product-quantity {
	width: 132px;
}

.ds-cart table.ds-cart__table td.product-subtotal {
	width: 130px;
	padding-right: 22px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ds-text);
}

/* .woocommerce a.remove memakai color:!important dan ukuran dalam em, jadi
   penawarnya harus ikut !important pada warnanya - bukan karena malas, tapi
   karena !important hanya bisa dikalahkan !important. */
.ds-cart table.ds-cart__table td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 17px;
	line-height: 1;
	color: var(--ds-text-2) !important;
	border: 1px solid var(--ds-border);
	border-radius: 999px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.ds-cart table.ds-cart__table td.product-remove a.remove:hover {
	color: var(--ds-danger-300) !important;
	background: none;
	border-color: rgba(217, 72, 59, 0.6);
}

.ds-cart table.ds-cart__table td.product-thumbnail img {
	display: block;
	width: 68px;
	height: 68px;
	object-fit: contain;
	background: var(--ds-white);
	border-radius: 8px;
}

.ds-cart__name {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--ds-text);
}

a.ds-cart__name:hover {
	color: var(--ds-accent-300);
}

.ds-cart__sku {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--ds-text-3);
}

/* Penambah jumlah di keranjang sedikit lebih pendek daripada di halaman
   produk: di sana ia berdiri sendiri sebagai ajakan, di sini ia satu di antara
   tiga baris. */
.ds-cart table.ds-cart__table .ds-qty {
	border-radius: 10px;
}

.ds-cart table.ds-cart__table .ds-qty__btn {
	width: 34px;
	height: 38px;
}

.ds-cart table.ds-cart__table .ds-qty input.qty {
	width: 36px;
	height: 38px;
}

/* ---- Baris kupon ---- */

/* WooCommerce membungkus tombol perbaruinya di sel yang sama dengan kupon,
   jadi keduanya ditata di satu baris flex. margin-left:auto yang mendorong
   tombol perbarui ke ujung kanan, bukan lebar tetap - dengan begitu ia tetap
   di ujung berapa pun panjang tulisannya setelah diterjemahkan. */
.ds-cart table.ds-cart__table td.actions {
	padding: 20px 22px;
}

.ds-cart table.ds-cart__table td.actions .ds-cart__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.ds-cart table.ds-cart__table td.actions .ds-cart__coupon {
	display: flex;
	flex: 1 1 auto;
	float: none;
	padding-bottom: 0;
	gap: 12px;
	align-items: center;
}

.ds-cart table.ds-cart__table td.actions .ds-cart__coupon input.input-text {
	width: 370px;
	max-width: 100%;
	height: 50px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ds-text);
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

.ds-cart table.ds-cart__table td.actions .ds-cart__coupon input.input-text::placeholder {
	color: var(--ds-text-3);
}

.ds-cart table.ds-cart__table td.actions .ds-cart__coupon input.input-text:focus {
	outline: none;
	border-color: var(--ds-accent);
}

.ds-cart table.ds-cart__table td.actions button.ds-cart__coupbtn {
	height: 50px;
	padding: 0 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
	background: none;
	border: 1px solid var(--ds-border-strong);
	border-radius: 10px;
	cursor: pointer;
}

.ds-cart table.ds-cart__table td.actions button.ds-cart__coupbtn:hover {
	color: var(--ds-accent-300);
	border-color: var(--ds-accent);
}

/* Tombol perbarui disembunyikan lewat .screen-reader-text di markup-nya, jadi
   tidak ada gaya tampilan yang perlu ditulis untuknya di sini. Ia tetap ada
   sebagai jalan cadangan kalau JavaScript gagal dimuat - lihat catatannya di
   woocommerce/cart/cart.php. */

.ds-cart__back {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-top: 20px;
	font-size: 15px;
	color: var(--ds-accent-300);
}

.ds-cart__back:hover {
	color: var(--ds-accent-line);
}

/* ---- Ringkasan belanja ---- */

.ds-cart__side .cross-sells {
	display: none;
}

.ds-sum {
	padding: 26px 24px 28px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 16px;
}

.ds-sum__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
}

.ds-sum__row {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-top: 18px;
}

.ds-sum__key {
	font-size: 16px;
	line-height: 25.6px;
	color: var(--ds-text-2);
}

/* nowrap: nama baris yang panjang ("Combo Hemat: Paket Casting Pemula")
   menghimpit kolom angka, dan tanpa ini tanda minus potongan terpisah dari
   angkanya ke baris lain. Yang boleh patah adalah namanya, bukan angkanya. */
.ds-sum__val {
	flex: none;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--ds-text);
}

.ds-sum__row--coupon .ds-sum__val {
	color: var(--ds-accent-300);
}

.ds-sum__ship {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 14px;
}

.ds-sum__note {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-3);
}

.ds-sum__line {
	height: 1px;
	margin-top: 18px;
	background: var(--ds-border);
}

.ds-sum__row--total .ds-sum__key {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	color: var(--ds-text);
}

.ds-sum__row--total .ds-sum__val {
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
}

.ds-sum__go {
	margin-top: 22px;
}

/* Selektornya sepanjang ini karena alasan yang sama dengan tombol tambah ke
   keranjang: WooCommerce memberinya .button.alt, dan gaya bawaannya memakai
   tiga class. Aturan yang lebih pendek kalah, dan tombolnya tampil ungu. */
.ds-sum__go a.checkout-button,
.ds-sum__go a.checkout-button.button.alt {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 0;
	border-radius: 10px;
}

.ds-sum__go a.checkout-button.button.alt:hover {
	background: var(--ds-accent-600);
}

.ds-sum__go a.checkout-button::after {
	content: "\203A";
	font-size: 20px;
	line-height: 1;
}

.ds-sum__safe {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-2);
}

.ds-sum__safe .ds-icon {
	flex: none;
	color: var(--ds-accent-300);
}

@media (max-width: 1099px) {
	.ds-cart {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
}

/* Di layar sempit tabelnya berhenti jadi tabel: tiap produk jadi satu kartu
   bertumpuk, dengan nama kolomnya dicetak dari atribut data-title. Enam kolom
   selebar 60px masing-masing tidak bisa dibaca siapa pun. */
@media (max-width: 760px) {
	.ds-cart table.ds-cart__table,
	.ds-cart table.ds-cart__table tbody,
	.ds-cart table.ds-cart__table tr,
	.ds-cart table.ds-cart__table td {
		display: block;
		width: auto;
	}

	.ds-cart table.ds-cart__table thead {
		display: none;
	}

	/* Satu produk = satu kartu tiga baris, bukan lima baris bertumpuk.
	 *
	 * Sebelumnya tiap sel berdiri sendiri-sendiri sebagai blok: nama, "Harga:",
	 * kotak jumlah, lalu "Subtotal:" - empat baris di bawah foto, dan satu
	 * produk memakan 240px tinggi layar. Dengan grid, foto memayungi nama dan
	 * harga di sebelahnya, lalu kotak jumlah dan subtotal berbagi baris
	 * terakhir. Tingginya turun ke sekitar 150px tanpa satu pun angka hilang. */
	/* Hanya baris produk yang jadi grid, bukan setiap <tr>.
	 *
	 * Baris terakhir tabel ini bukan produk melainkan sel kupon dan tombol
	 * perbarui. Kalau ia ikut kena, kotak kuponnya mendarat di kolom pertama -
	 * kolom selebar 68px yang disediakan untuk foto produk. */
	.ds-cart table.ds-cart__table tbody tr.woocommerce-cart-form__cart-item {
		position: relative;
		display: grid;
		grid-template-columns: 68px minmax(0, 1fr) auto;
		gap: 6px 14px;
		align-items: center;
		padding: 16px;
		border-top: 1px solid var(--ds-border);
	}

	.ds-cart table.ds-cart__table tbody tr {
		padding: 0;
		border-top: 1px solid var(--ds-border);
	}

	.ds-cart table.ds-cart__table tbody tr.woocommerce-cart-form__cart-item td.product-thumbnail {
		position: static;
		grid-area: 1 / 1 / 3 / 2;
		width: auto;
	}

	.ds-cart table.ds-cart__table tbody td.product-name {
		grid-area: 1 / 2 / 2 / 4;
		/* Ruang untuk tombol silang di pojok kanan. Tanpa ini nama produk yang
		   panjang berjalan tepat menembus tombolnya, dan tombol hapus itu
		   berhenti terlihat sebagai tombol. */
		padding-right: 30px;
	}

	.ds-cart table.ds-cart__table tbody td.product-price {
		grid-area: 2 / 2 / 3 / 4;
	}

	.ds-cart table.ds-cart__table tbody td.product-quantity {
		grid-area: 3 / 1 / 4 / 3;
	}

	.ds-cart table.ds-cart__table tbody td.product-subtotal {
		grid-area: 3 / 3 / 4 / 4;
		justify-self: end;
	}

	.ds-cart table.ds-cart__table tbody tr:first-child {
		border-top: 0;
	}

	.ds-cart table.ds-cart__table tbody tr + tr td {
		border-top: 0;
	}

	.ds-cart table.ds-cart__table td {
		padding: 4px 0;
	}

	.ds-cart table.ds-cart__table td.product-remove {
		position: absolute;
		top: 14px;
		right: 14px;
		width: auto;
		padding: 0;
	}

	.ds-cart table.ds-cart__table td.product-price::before,
	.ds-cart table.ds-cart__table td.product-subtotal::before {
		content: attr(data-title) ": ";
		color: var(--ds-text-3);
	}

	.ds-cart table.ds-cart__table td.actions {
		padding: 18px;
	}

	.ds-cart table.ds-cart__table td.actions .ds-cart__actions {
		width: 100%;
	}

	/* Kotak kupon dan tombolnya ditumpuk, masing-masing selebar kartu.
	 *
	 * Berdampingan, keduanya meluber 58px keluar layar: kolom isian membawa
	 * lebar bawaannya sendiri (sekitar 176px, dari atribut size milik peramban)
	 * dan flex TIDAK BOLEH menyusutkannya di bawah itu selama min-width-nya
	 * masih auto. Itulah kenapa min-width: 0 di bawah bukan hiasan - tanpa
	 * baris itu, flex-basis 100% pun tidak menolongnya. */
	.ds-cart table.ds-cart__table td.actions .ds-cart__coupon {
		flex: 1 1 100%;
		flex-wrap: wrap;
	}

	.ds-cart table.ds-cart__table td.actions .ds-cart__coupon input.input-text {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
	}

	.ds-cart table.ds-cart__table td.actions button.ds-cart__coupbtn {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* ============================ 19. Halaman Data & Pengiriman
 *
 * Angkanya dari artboard "04 · Data & Pengiriman" (node 112:755): isi 1320
 * dibagi 733 untuk formulir dan 555 untuk kolom kanan, berjarak 32.
 *
 * Kolom kanannya satu elemen, bukan tiga yang ditaruh berurutan di grid.
 * Alasannya sudah dibayar sekali di proyek ini: tiga item yang masing-masing
 * diberi grid-row menghasilkan lubang, karena item yang membentang lebih
 * tinggi daripada baris yang ditutupinya dan sisa tingginya dibagi rata ke
 * baris-baris itu. Satu pembungkus (.ds-ck__side) tidak punya masalah itu.
 */

.ds-shop-page--checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 555px;
	gap: 32px;
	align-items: start;
	margin-top: 26px;
}

.ds-shop-page--checkout form.checkout > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.ds-shop-page--checkout form.checkout > #customer_details {
	grid-column: 1;
	grid-row: 1;
}

.ds-shop-page--checkout form.checkout > .ds-ck__side {
	display: flex;
	flex-direction: column;
	gap: 20px;
	grid-column: 2;
	grid-row: 1;
}

/* Pseudo-element pembersih milik WooCommerce jadi item grid kalau dibiarkan -
   dua kotak kosong yang kebagian jarak 32px. */
.ds-shop-page--checkout form.checkout::before,
.ds-shop-page--checkout form.checkout::after,
.ds-shop-page--checkout #customer_details::before,
.ds-shop-page--checkout #customer_details::after,
.ds-shop-page--checkout .col2-set::before,
.ds-shop-page--checkout .col2-set::after {
	display: none !important;
	content: none !important;
}

/* Daftar "harus diisi". Dipindah ke puncak kolom formulir oleh
   inc/shop-pages/checkout-errors.php - di sana juga alasannya. Warnanya sama
   dengan pesan gagal di kartu masuk, supaya dua kesalahan formulir di situs ini
   terlihat sama. Tanpa aturan ini ia memakai kotak putih bawaan woocommerce.css:
   teks hijau muda di atas putih yang nyaris tak terbaca, dengan ikon yang
   menutupi huruf pertama. */
.ds-shop-page--checkout .ds-ck__errors {
	margin: 0 0 24px;
	scroll-margin-top: calc(var(--ds-header-top) + var(--ds-header-bar) + 16px);
}

.ds-shop-page--checkout .ds-ck__errors ul.woocommerce-error {
	margin: 0;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 22px;
	color: var(--ds-danger-300);
	list-style: none;
	background: rgba(217, 72, 59, 0.14);
	border: 1px solid rgba(217, 72, 59, 0.45);
	border-radius: 12px;
	outline: none;
}

.ds-shop-page--checkout .ds-ck__errors ul.woocommerce-error::before {
	display: none;
}

.ds-shop-page--checkout .ds-ck__errors li {
	list-style: none;
}

.ds-shop-page--checkout .ds-ck__errors a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ds-shop-page--checkout .ds-ck__errors strong {
	font-weight: 600;
}

/* Kolom yang ditunjuk daftar di atas ikut ditandai. WooCommerce sudah memberi
   .woocommerce-invalid pada baris kolomnya; tanpa garis merah, pembeli harus
   mencocokkan nama kolom satu per satu. */
.ds-shop-page--checkout form.checkout .form-row.woocommerce-invalid input.input-text,
.ds-shop-page--checkout form.checkout .form-row.woocommerce-invalid textarea,
.ds-shop-page--checkout form.checkout .form-row.woocommerce-invalid select {
	border-color: var(--ds-danger);
}

/* WooCommerce membagi #customer_details jadi dua kolom mengambang: alamat
   penagihan di kiri, alamat kirim dan catatan di kanan. Artboard menumpuknya
   dalam satu kolom, karena di kolom selebar 733 dua kolom lagi berarti kolom
   selebar 350 untuk alamat lengkap. */
.ds-shop-page--checkout #customer_details,
.ds-shop-page--checkout .col2-set,
.ds-shop-page--checkout .col2-set .col-1,
.ds-shop-page--checkout .col2-set .col-2 {
	float: none;
	width: 100%;
	max-width: none;
}

.ds-shop-page--checkout .col2-set .col-2 {
	margin-top: 26px;
}

/* ---- Formulir ---- */

.ds-shop-page--checkout .woocommerce-billing-fields > h3,
.ds-shop-page--checkout .woocommerce-shipping-fields > h3,
.ds-shop-page--checkout .woocommerce-additional-fields > h3,
.ds-shop-page--checkout #order_review_heading {
	margin: 0 0 20px;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
}

/* Judul "Ringkasan Pesanan" milik WooCommerce dicetak sebagai <h3> DI LUAR
   kartunya. Di artboard judul itu ada di dalam kartu, jadi yang dicetak
   template ringkasan sendiri; yang di luar disembunyikan. */
.ds-shop-page--checkout #order_review_heading {
	display: none;
}

/* Dua kolom untuk nama depan/belakang, kota/provinsi, kode pos/HP. Kelas
   form-row-first dan form-row-last memang sudah dipasang WooCommerce; yang
   perlu ditambah cuma gridnya. */
.ds-shop-page--checkout .woocommerce-billing-fields__field-wrapper,
.ds-shop-page--checkout .woocommerce-shipping-fields__field-wrapper,
.ds-shop-page--checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.ds-shop-page--checkout form.checkout .form-row {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
}

/* woocommerce.css memberi kedua kolom ini width:47% dan float. Di dalam grid,
   47% dihitung dari lebar kolomnya sendiri - kolom 320px jadi kolom isian
   150px, dan itulah yang terlihat sebagai kotak nama yang kekecilan. */
.ds-shop-page--checkout form.checkout .form-row-first,
.ds-shop-page--checkout form.checkout .form-row-last {
	grid-column: auto;
	width: auto;
	float: none;
	margin-right: 0;
}

/* Pasangan kolom yang lain dibidik lewat ID, bukan lewat class.
 *
 * Pasangannya: kota dengan provinsi, nomor HP dengan email (keduanya tepat di
 * bawah nama - lihat inc/shop-pages/checkout-fields.php). Kode pos berdiri
 * sendiri selebar penuh sejak pasangannya, nomor HP, naik ke atas.
 * Percobaan pertama mengubah class kolomnya lewat filter woocommerce_checkout_fields
 * - dan class itu kembali sendiri beberapa saat setelah halaman terbuka, karena
 * address-i18n.js milik WooCommerce menulis ulang seluruh atribut class tiap
 * kolom alamat begitu negaranya diketahui. Yang tidak ditulis ulang JavaScript
 * itu adalah ID-nya, jadi penempatannya dipasang dari sini. */
.ds-shop-page--checkout form.checkout #billing_city_field,
.ds-shop-page--checkout form.checkout #billing_phone_field,
.ds-shop-page--checkout form.checkout #shipping_city_field,
.ds-shop-page--checkout form.checkout #shipping_phone_field {
	grid-column: 1;
}

.ds-shop-page--checkout form.checkout #billing_state_field,
.ds-shop-page--checkout form.checkout #billing_email_field,
.ds-shop-page--checkout form.checkout #shipping_state_field {
	grid-column: 2;
}

.ds-shop-page--checkout form.checkout #billing_postcode_field,
.ds-shop-page--checkout form.checkout #shipping_postcode_field {
	grid-column: 1 / -1;
}

/* Izin promo WhatsApp duduk di bawah kolom nomor WhatsApp, di kolom kiri.
 *
 * Urutannya nomor WhatsApp → izin promo → email (lihat priority di
 * whatsapp-data.php). Di grid dua kolom, email yang datang terakhir akan
 * jatuh di sebelah izin promo, bukan di sebelah nomor WhatsApp. Dua hal yang
 * membetulkannya: "dense" mengizinkan email naik ke sel kosong di sebelah
 * nomor WhatsApp, dan email dibuat setinggi dua baris supaya sel di sebelah
 * izin promo ikut terisi - tanpa itu, "dense" akan menarik kolom provinsi dari
 * bawah naik ke sel kosong tersebut.
 *
 * Keduanya hanya berlaku kalau kolom izin promo memang ada (:has). Tanpa kolom
 * itu - misalnya nomor telepon dimatikan di setelan WooCommerce - email
 * setinggi dua baris menyisakan sel kosong, dan "dense" akan menarik kolom
 * kota naik mengisinya. Peramban lama yang belum mengenal :has melewati
 * aturan ini: izin promo tetap di bawah nomor WhatsApp, hanya emailnya turun
 * sejajar dengan izin promo. */
.ds-shop-page--checkout .woocommerce-billing-fields__field-wrapper:has(#billing_ds_wa_promo_field) {
	grid-auto-flow: row dense;
}

.ds-shop-page--checkout form.checkout #billing_ds_wa_promo_field {
	grid-column: 1;
}

/* ---- Kotak centang seragam (izin promo WhatsApp, syarat & ketentuan,
 * buat akun, kirim ke alamat lain, dan kotak lain dari plugin) ----
 *
 * Pemilik toko (18 Okt 2026): kotak izin promo tampak lebih besar dari kotak
 * lain. Dulu tiap kotak diatur sendiri-sendiri (24px bawaan sistem, 20px
 * gambar sendiri), sekarang SATU aturan untuk semua kotak di formulir
 * pembayaran: 20px, digambar sendiri seperti kotak di penyaring katalog.
 *
 * Label WooCommerce berisi kotak + teks + <span>(opsional)</span>. Kalau
 * labelnya dijadikan flex/grid, span itu menjadi kolom sendiri dan tulisannya
 * terpotong aneh. Jadi labelnya tetap blok biasa dengan jarak kiri 30px
 * (20px kotak + 10px jarak), dan kotaknya diletakkan absolut di kiri:
 * baris kedua tulisan otomatis sejajar dengan awal baris pertama, dan
 * kotaknya tepat di tengah baris pertama (tinggi baris 22px, kotak 20px,
 * jadi top 1px). */
.ds-shop-page--checkout form.checkout input[type="checkbox"] {
	display: inline-grid;
	flex: none;
	place-content: center;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: 0;
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border-strong);
	border-radius: 5px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.ds-shop-page--checkout form.checkout input[type="checkbox"]::before {
	content: "";
	width: 12px;
	height: 12px;
	background: var(--ds-white);
	transform: scale(0);
	transition: transform 0.12s ease;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.ds-shop-page--checkout form.checkout input[type="checkbox"]:checked {
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

.ds-shop-page--checkout form.checkout input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.ds-shop-page--checkout form.checkout input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ds-accent-line);
	outline-offset: 2px;
}

/* :not(...) - "Kirim ke alamat lain?" adalah judul berlabel flex dengan
   tulisan di dalam <span>, jadi sudah sejajar; aturannya di bawah. */
.ds-shop-page--checkout form.checkout label.checkbox:not(#ship-to-different-address label) {
	position: relative;
	display: block;
	margin-bottom: 0;
	padding-left: 30px;
	font-size: 13.5px;
	line-height: 22px;
	text-indent: 0;
	color: var(--ds-text-2);
	cursor: pointer;
}

.ds-shop-page--checkout form.checkout label.checkbox:not(#ship-to-different-address label) > input[type="checkbox"] {
	position: absolute;
	top: 1px;
	left: 0;
}

/* Tanda bintang "wajib" (syarat & ketentuan) dan "(opsional)" tetap satu
   baris tulisan dengan kalimatnya. */
.ds-shop-page--checkout form.checkout label.checkbox .optional,
.ds-shop-page--checkout form.checkout label.checkbox .required {
	display: inline;
}

/* Catatan akun di bawah email mulai sejajar dengan tulisan izin promo.
 *
 * Izin promo ada di baris grid berikutnya, jadi jaraknya dari kolom di atasnya
 * sama dengan jarak antarbaris grid (18px). Kolom email setinggi dua baris,
 * dan catatannya duduk di dalamnya - memberinya jarak yang sama membuat baris
 * pertamanya jatuh tepat di ketinggian baris izin promo. Tinggi barisnya
 * disamakan juga (22px), supaya baris-baris berikutnya tetap berdampingan. */
.ds-shop-page--checkout .woocommerce-billing-fields__field-wrapper:has(#billing_ds_wa_promo_field) .ds-acctnote {
	margin-top: 18px;
	font-size: 13px;
	line-height: 22px;
}

/* "Buat akun?" disembunyikan: akun SELALU dibuat (lihat
 * inc/shop-pages/checkout-account.php, yang memaksa createaccount = 1 di
 * server). Kotak centang yang boleh dilepas tapi tidak berpengaruh apa-apa
 * hanya membingungkan - dan bertentangan dengan catatan di bawah email.
 *
 * Disembunyikan lewat CSS, bukan menyalin template form-billing.php milik
 * WooCommerce hanya untuk membuang satu baris. Yang disembunyikan hanya
 * paragraf kotak centangnya; kolom akun tambahan (kalau suatu saat
 * WooCommerce disetel meminta kata sandi) tetap tampil. */
.ds-shop-page--checkout .woocommerce-account-fields p.create-account {
	display: none;
}

.ds-shop-page--checkout form.checkout .woocommerce-billing-fields__field-wrapper:has(#billing_ds_wa_promo_field) #billing_email_field {
	grid-row: span 2;
}

/* ---- Kartu judul metode pembayaran ---- */

.ds-ck__paytitle {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
}

/* Pilihan kurir tanpa label sendiri: judul "Pengiriman" sudah dicetak
   ringkasan pesanan tepat di atasnya. */
.ds-ordersum__ship .ds-ship + .ds-ship {
	margin-top: 10px;
}

.ds-ordersum__ship .ds-ship__pack {
	margin-bottom: 6px;
	font-size: 12.5px;
	color: var(--ds-text-3);
}

.ds-ordersum__ship .ds-ship__none {
	margin-top: 10px;
	font-size: 13px;
	line-height: 20px;
	color: var(--ds-text-2);
}

.ds-shop-page--checkout form.checkout .form-row label {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ds-text-2);
}

.ds-shop-page--checkout form.checkout .form-row .required {
	color: var(--ds-danger-300);
	text-decoration: none;
}

.ds-shop-page--checkout form.checkout .form-row .optional {
	color: var(--ds-text-3);
}

.ds-shop-page--checkout form.checkout .form-row input.input-text,
.ds-shop-page--checkout form.checkout .form-row textarea,
.ds-shop-page--checkout form.checkout .form-row select,
.ds-shop-page--checkout form.checkout .select2-container .select2-selection--single {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ds-text);
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

.ds-shop-page--checkout form.checkout .form-row textarea {
	height: 108px;
	padding: 14px;
	line-height: 1.6;
	resize: vertical;
}

/* Negara yang tidak bisa dipilih.
 *
 * Toko hanya menjual ke Indonesia, dan kalau hanya satu negara yang
 * diizinkan, WooCommerce mencetak namanya sebagai <strong> biasa (nilainya
 * terkirim lewat kolom tersembunyi). Dibentuk seperti kotak isian lain supaya
 * barisnya tidak terlihat bolong, tapi lebih redup dan tanpa panah: jelas
 * terbaca sebagai sudah terisi dan tidak untuk diubah. */
.ds-shop-page--checkout form.checkout #billing_country_field .woocommerce-input-wrapper > strong,
.ds-shop-page--checkout form.checkout #shipping_country_field .woocommerce-input-wrapper > strong,
.ds-shop-page--checkout form.checkout .form-row select.country_to_state--single,
.ds-shop-page--checkout form.checkout .form-row select.ds-sel__locked {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 14px;
	font-size: 15px;
	font-weight: 400;
	color: var(--ds-text-2);
	background: var(--ds-bg-2);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
	cursor: default;
}

/* Kotak negara berisi satu pilihan: tidak menerima klik, dan panah bawaan
   peramban dimatikan - panah menjanjikan pilihan lain yang memang tidak ada. */
.ds-shop-page--checkout form.checkout .form-row select.country_to_state--single,
.ds-shop-page--checkout form.checkout .form-row select.ds-sel__locked {
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Judul "Alamat" di atas tombol lokasi: bentuknya sama dengan judul
   "Data Pemesan", dengan jarak tambahan dari kolom kontak di atasnya supaya
   terbaca sebagai bagian baru, bukan kelanjutan kolom email. */
.ds-shop-page--checkout .ds-ck__subhead {
	margin: 14px 0 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
}

/* Kolom "Kirim ke alamat lain" yang terbuka diberi jarak dari kotak
   centangnya. Tanpa ini kolom pertamanya menempel tepat di bawah tulisan
   kotak centang, dan keduanya terbaca sebagai satu baris yang berdesakan. */
.ds-shop-page--checkout .woocommerce-shipping-fields .shipping_address {
	margin-top: 24px;
}

.ds-shop-page--checkout form.checkout .form-row input.input-text::placeholder,
.ds-shop-page--checkout form.checkout .form-row textarea::placeholder {
	color: var(--ds-text-3);
}

.ds-shop-page--checkout form.checkout .form-row input.input-text:focus,
.ds-shop-page--checkout form.checkout .form-row textarea:focus,
.ds-shop-page--checkout form.checkout .form-row select:focus {
	outline: none;
	border-color: var(--ds-accent);
}

/* Select2 milik WooCommerce menggambar dropdown-nya sendiri. Yang bisa diatur
   dari sini cuma kotak tertutupnya; isi dropdown yang terbuka dibuat di dalam
   <body>, jauh dari kotak ini, jadi diberi aturannya sendiri di bawah. */
.ds-shop-page--checkout form.checkout .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.ds-shop-page--checkout form.checkout .select2-container .select2-selection__rendered {
	padding: 0;
	line-height: inherit;
	color: var(--ds-text);
}

.ds-shop-page--checkout form.checkout .select2-container .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.select2-dropdown {
	color: var(--ds-text);
	background: var(--ds-surface);
	border-color: var(--ds-border);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--ds-accent);
}

.select2-search--dropdown .select2-search__field {
	color: var(--ds-text);
	background: var(--ds-canvas);
	border-color: var(--ds-border);
}

/* Negara yang cuma satu dicetak WooCommerce sebagai teks biasa, bukan pilihan.
   Dibuat mirip kolom terkunci supaya barisnya tidak terlihat setengah jadi. */
.ds-shop-page--checkout form.checkout .form-row strong {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 14px;
	font-size: 15px;
	font-weight: 400;
	color: var(--ds-text-2);
	background: var(--ds-bg-2);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

/* float:none membatalkan float:left dari woocommerce.css
   (.woocommerce-checkout .checkout .col-2 h3#ship-to-different-address) -
   selektornya ditulis sedikit lebih spesifik dari milik WooCommerce supaya
   menang. Kotak alamat di bawahnya diberi clear:both oleh WooCommerce, dan
   saat sebuah elemen "dibersihkan" melewati elemen yang mengambang, jarak
   atasnya ikut termakan: jarak 24px di .shipping_address tercatat oleh
   peramban tapi tidak pernah terlihat. Judul ini sudah display:flex, jadi
   float tidak dibutuhkan. */
.ds-shop-page--checkout form.checkout .col-2 h3#ship-to-different-address {
	float: none;
}

.ds-shop-page--checkout #ship-to-different-address {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 26px 0 0;
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ds-text);
}

.ds-shop-page--checkout #ship-to-different-address label {
	display: flex;
	/* 10px, sama dengan jarak kotak-tulisan kotak centang lain (bagian 19). */
	gap: 10px;
	align-items: center;
	margin: 0;
	font-size: 16px;
	color: var(--ds-text);
	cursor: pointer;
}

/* accent-color cuma mengganti warna centangnya; kotaknya sendiri tetap putih
   milik sistem operasi, dan di theme gelap itu bercak paling terang di seluruh
   formulir. Digambar sendiri, sama dengan kotak centang di penyaring katalog. */
.ds-shop-page--checkout #ship-to-different-address input[type="checkbox"] {
	display: inline-grid;
	flex: none;
	place-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border-strong);
	border-radius: 5px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.ds-shop-page--checkout #ship-to-different-address input[type="checkbox"]::before {
	content: "";
	width: 12px;
	height: 12px;
	background: var(--ds-white);
	transform: scale(0);
	transition: transform 0.12s ease;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.ds-shop-page--checkout #ship-to-different-address input[type="checkbox"]:checked {
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

.ds-shop-page--checkout #ship-to-different-address input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.ds-shop-page--checkout .woocommerce-additional-fields {
	margin-top: 26px;
	padding-top: 26px;
	border-top: 1px solid var(--ds-border);
}

/* ---- Kartu kupon ---- */

.ds-ck__side .ds-cpn {
	padding: 22px 24px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-ck__side .ds-cpn__label {
	display: block;
	font-size: 16px;
	line-height: 26px;
	color: var(--ds-text);
}

/* Selebar kartunya, bukan selebar tulisannya. Di kolom kanan tombol ini
   satu-satunya yang bisa ditekan, dan tombol setengah lebar di sana terbaca
   seperti keterangan tambahan di sebelah ruang kosong. Bentuknya sengaja
   dipertahankan sama dengan tombol "Pakai" yang dulu ada di sini. */
.ds-ck__side .ds-cpn__pick {
	display: block;
	width: 100%;
	height: 48px;
	margin-top: 14px;
	padding: 0 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
	background: none;
	border: 1px solid var(--ds-accent);
	border-radius: 10px;
	cursor: pointer;
}

.ds-ck__side .ds-cpn__pick:hover {
	color: var(--ds-white);
	background: rgba(46, 158, 119, 0.16);
}

.ds-ck__side .ds-cpn__pick:focus-visible {
	outline: 2px solid var(--ds-accent);
	outline-offset: 2px;
}

.ds-ck__side .ds-cpn__hint {
	margin-top: 10px;
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-3);
}

/* Belum ada voucher: tombolnya disembunyikan lewat [hidden], yang kalah oleh
   display:block di atas kalau tidak ditegaskan di sini. Kalimat penggantinya
   jadi satu-satunya isi panel, jadi ukurannya dinaikkan dari catatan kaki
   menjadi teks biasa. */
.ds-ck__side .ds-cpn__pick[hidden] {
	display: none;
}

.ds-ck__side .ds-cpn__pick[hidden] + .ds-cpn__hint {
	margin-top: 6px;
	font-size: 14px;
	line-height: 21px;
	color: var(--ds-text-2);
}

/* ---- Ringkasan pesanan ---- */

.ds-shop-page--checkout #order_review,
.ds-shop-page--checkout #payment {
	width: 100%;
	padding: 22px 24px 26px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-ordersum__title,
.ds-shop-page--checkout #payment > h3,
.ds-shop-page--checkout .ds-ck__paytitle {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
}

.ds-ordersum__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 18px;
}

/* Baris produk: foto | nama + jumlah | harga.
 *
 * Pemilik toko (18 Okt 2026): foto tidak persegi, nama terlalu mepet ke
 * harga, dan ketiganya tidak sejajar. Penyebab fotonya: pembungkusnya ikut
 * menyusut (flex-shrink) saat nama produk panjang, jadi foto 48px tinggal
 * 45px lebarnya. Sekarang foto dikunci 56×56 dan tidak boleh menyusut.
 *
 * Semua rata ATAS, bukan tengah: nama boleh dua baris, dan harga harus
 * sebaris dengan baris pertama nama - di tengah, harga melayang di antara dua
 * baris nama dan tampak milik baris lain. */
.ds-ordersum__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.ds-ordersum__pic {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
}

.ds-ordersum__pic img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	background: var(--ds-white);
	border-radius: 8px;
}

.ds-ordersum__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Paling banyak dua baris; sisanya diringkas "…" supaya satu produk
   bernama panjang tidak memanjangkan ringkasan. Nama lengkap tetap ada di
   halaman keranjang. */
.ds-ordersum__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 15px;
	line-height: 22px;
	color: var(--ds-text);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ds-ordersum__qty {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--ds-text-3);
}

/* Jarak ke nama 16px (12px gap + 4px), tinggi baris sama dengan nama supaya
   angkanya duduk tepat di baris pertama nama, dan tidak pernah terpotong ke
   baris kedua. */
.ds-ordersum__money {
	flex: none;
	margin-left: 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	white-space: nowrap;
	color: var(--ds-text);
}

.ds-ordersum__line {
	height: 1px;
	margin-top: 18px;
	background: var(--ds-border);
}

.ds-ordersum__row {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
}

.ds-ordersum__key {
	font-size: 16px;
	line-height: 26px;
	color: var(--ds-text-2);
}

/* Keterangan hitungan Biaya COD, tepat di bawah barisnya (inc/shop-pages/cod-fee.php). */
.ds-codfee__note {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--ds-text-3, var(--ds-text-2));
}

/* nowrap dengan alasan yang sama seperti .ds-sum__val di keranjang. */
.ds-ordersum__val {
	flex: none;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--ds-text);
}

.ds-ordersum__val--cut {
	color: var(--ds-accent-300);
}

.ds-ordersum__row--total .ds-ordersum__key {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	color: var(--ds-text);
}

.ds-ordersum__row--total .ds-ordersum__val {
	font-size: 20px;
	line-height: 26px;
}

.ds-ordersum__label {
	margin-top: 16px;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-text-2);
}

/* Pilihan kurir dicetak WooCommerce sebagai <ul id="shipping_method"> berisi
   radio. Harganya ikut di label yang sama, jadi tidak ada elemen terpisah yang
   bisa didorong ke kanan - yang mendorongnya justified space-between pada
   labelnya sendiri. */
.ds-ordersum__ship ul#shipping_method {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.ds-ordersum__ship ul#shipping_method li {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 0;
}

.ds-ordersum__ship ul#shipping_method li input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ds-accent);
}

.ds-ordersum__ship ul#shipping_method li label {
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	font-size: 15px;
	color: var(--ds-text);
}

.ds-ordersum__ship .woocommerce-shipping-destination,
.ds-ordersum__ship .shipping-calculator-button {
	display: none;
}

/* ---- Metode pembayaran ---- */

.ds-shop-page--checkout #payment ul.payment_methods {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	border: 0;
}

/* Grid dua kolom: radio di kiri, tulisan dan keterangannya di kanan.
 *
 * Radio dan labelnya dicetak WooCommerce sebagai dua elemen BERSEBELAHAN,
 * bukan radio di dalam label - jadi jarak dan rata tengah yang diatur pada
 * label tidak pernah mengenai radionya. Radio jatuh ke garis dasar teks
 * (terlihat terlalu tinggi) dan menempel ke tulisan. Di grid, jaraknya pasti
 * (14px), dan radio diratakan ke tengah BARIS PERTAMA tulisan - bukan ke
 * tengah seluruh label, yang di HP bisa dua baris ("Pembayaran melalui /
 * Midtrans") dan membuat radio melayang di antara keduanya. Keterangan
 * metodenya ikut di kolom kanan sehingga mulai sejajar dengan tulisan. */
.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
	padding: 16px;
	background: rgba(46, 158, 119, 0.08);
	border: 1px solid rgba(46, 158, 119, 0.45);
	border-radius: 12px;
}

.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box {
	grid-column: 2;
}

/* Hanya SATU metode (mis. COD tidak ditawarkan sama sekali): skrip
   WooCommerce menyembunyikan radionya dengan style="display: none". Tanpa
   aturan ini label jatuh ke kolom radio 18px dan tulisannya bertumpuk
   dengan keterangan di sebelahnya. Label dan keterangan dibentang penuh. */
.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method > input[style*="none"] ~ label,
.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method > input[style*="none"] ~ div.payment_box {
	grid-column: 1 / -1;
}

/* woocommerce.css memasang clearfix (::before dan ::after berisi spasi,
   display:table) di tiap baris ini. Di dalam grid, keduanya dihitung sebagai
   sel sungguhan: ::before merebut sel pertama dan radionya terdorong ke
   kolom tulisan. Grid tidak memakai float, jadi clearfix tidak dibutuhkan.
   Kelasnya ditulis dua kali dengan sengaja: tanpa itu kekuatan selektor ini
   sama persis dengan milik WooCommerce, dan pemenangnya bergantung pada
   berkas CSS mana yang kebetulan dimuat belakangan. */
.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method.wc_payment_method::before,
.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method.wc_payment_method::after {
	content: none;
	display: none;
}

.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method + li {
	margin-top: 12px;
}

.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method label {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	font-size: 16px;
	line-height: 24px;
	color: var(--ds-text);
}

.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"] {
	width: 18px;
	height: 18px;
	/* (24px tinggi baris - 18px radio) / 2: tepat di tengah baris pertama. */
	margin: 3px 0 0;
	accent-color: var(--ds-accent);
}

/* Logo penyedia pembayaran yang ikut dicetak gateway-nya. Dibatasi tingginya
   supaya satu gambar besar tidak mendorong barisnya. */
.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method label img {
	/* !important karena plugin Midtrans menulis max-height: 2em dan padding
	   langsung di atribut style gambarnya, dan gaya di atribut selalu menang
	   atas lembar gaya. Tanpa ini logonya 30px, lebih tinggi dari baris teks
	   24px, dan tulisan di sebelahnya bergeser turun dari radio. border-box
	   memasukkan padding bawaan plugin ke dalam batas 24px itu. */
	box-sizing: border-box;
	max-height: 24px !important;
	width: auto;
}

.ds-shop-page--checkout #payment div.payment_box {
	margin: 10px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--ds-text-2);
	background: none;
	border-radius: 0;
}

.ds-shop-page--checkout #payment div.payment_box::before {
	display: none;
}

/* "Bayar di tempat" yang tidak bisa dipakai untuk kurir/total ini.
 *
 * Plugin (modules/cod/cod-syarat.php) tidak lagi membuang pilihan COD,
 * melainkan mematikan tombol radionya dan mencetak alasannya
 * (<small class="ds-cod-off">) di dalam label. Di sini tampilannya
 * diselaraskan dengan theme: tulisan abu redup (bukan transparan, supaya
 * kontrasnya tetap terukur), kursor dilarang, dan bingkai kartu tidak
 * menyala saat disentuh. Alasan boleh membungkus beberapa baris; judul
 * metodenya tidak. */
.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method.is-cod-off,
.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method.is-cod-off:hover {
	background: transparent;
	border-color: var(--ds-border);
	box-shadow: none;
	cursor: not-allowed;
}

/* Label metode berupa flex satu baris; flex-wrap membuat alasannya
   (flex-basis 100%) turun ke baris sendiri di bawah judul "Bayar di tempat",
   bukan memeras judulnya jadi tiga baris. */
.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method.is-cod-off > label {
	flex-wrap: wrap;
	row-gap: 2px;
	opacity: 1;
	color: var(--ds-text-3);
	cursor: not-allowed;
}

.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method.is-cod-off > input[type="radio"] {
	opacity: 0.45;
	cursor: not-allowed;
}

.ds-shop-page--checkout #payment ul.payment_methods li.wc_payment_method .ds-cod-off {
	display: block;
	flex: 0 0 100%;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ds-text-2);
	white-space: normal;
}

.ds-shop-page--checkout #payment div.payment_box p {
	margin: 0;
}

/* Jarak bawahnya yang penting, bukan atasnya. Tanpa itu kalimat kebijakan
   privasi menempel di tombol Buat Pesanan, dan dua hal yang bunyinya sangat
   berbeda - keterangan hukum dan tindakan yang tidak bisa dibatalkan - terbaca
   sebagai satu blok. */
.ds-shop-page--checkout #payment .woocommerce-privacy-policy-text {
	margin: 20px 0 24px;
}

.ds-shop-page--checkout .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: 12.5px;
	line-height: 19px;
	color: var(--ds-text-3);
}

.ds-shop-page--checkout .woocommerce-privacy-policy-text a {
	color: var(--ds-accent-300);
}

/* Paragraf persetujuan yang ditambahkan plugin Xendit ("Dengan menggunakan
   metode pembayaran ini...") tidak punya class dan langsung menempel di atas
   tombol Buat Pesanan dengan huruf 16px putih. Disamakan dengan tulisan
   privasi di atasnya, dan diberi jarak 16px dari tombol. */
.ds-shop-page--checkout #payment .place-order > p:not([class]) {
	margin: -8px 0 16px;
	font-size: 12.5px;
	line-height: 19px;
	color: var(--ds-text-3);
}

/* div.form-row ikut ditulis: tanpa itu aturan woocommerce.css
   (.woocommerce-checkout #payment div.form-row, padding 1em) lebih kuat, dan
   tulisan privasi + tombol Buat Pesanan menjorok 14px dari kartu metode
   pembayaran di atasnya. */
.ds-shop-page--checkout #payment .place-order,
.ds-shop-page--checkout #payment div.form-row.place-order {
	margin: 18px 0 0;
	padding: 0;
}

/* Selektor sepanjang ini karena tombolnya membawa .button.alt milik
   WooCommerce, dan gaya bawaannya memakai tiga class. Aturan yang lebih pendek
   kalah, dan tombolnya tampil ungu. */
.ds-shop-page--checkout #payment button#place_order,
.ds-shop-page--checkout #payment button.button.alt#place_order {
	width: 100%;
	height: 54px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}

.ds-shop-page--checkout #payment button.button.alt#place_order:hover {
	background: var(--ds-accent-600);
}

@media (max-width: 1199px) {
	.ds-shop-page--checkout form.checkout {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.ds-shop-page--checkout form.checkout > #customer_details,
	.ds-shop-page--checkout form.checkout > .ds-ck__side {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (max-width: 599px) {
	.ds-shop-page--checkout .woocommerce-billing-fields__field-wrapper,
	.ds-shop-page--checkout .woocommerce-shipping-fields__field-wrapper,
	.ds-shop-page--checkout .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Penempatan lewat ID di atas ikut dikembalikan ke satu kolom. Tanpa ini
	   aturan ID - yang lebih kuat dari aturan class - memaksa grid satu kolom
	   membuat kolom kedua, dan semua kolom isian menyempit jadi 80-an piksel. */
	.ds-shop-page--checkout form.checkout .form-row-first,
	.ds-shop-page--checkout form.checkout .form-row-last,
	.ds-shop-page--checkout form.checkout #billing_city_field,
	.ds-shop-page--checkout form.checkout #billing_state_field,
	.ds-shop-page--checkout form.checkout #billing_phone_field,
	.ds-shop-page--checkout form.checkout #billing_email_field,
	.ds-shop-page--checkout form.checkout #billing_postcode_field,
	.ds-shop-page--checkout form.checkout #shipping_city_field,
	.ds-shop-page--checkout form.checkout #shipping_state_field,
	.ds-shop-page--checkout form.checkout #shipping_phone_field,
	.ds-shop-page--checkout form.checkout #shipping_postcode_field,
	.ds-shop-page--checkout form.checkout #billing_ds_wa_promo_field {
		grid-column: 1 / -1;
	}

	/* Satu kolom: urutan dari priority sudah menaruh izin promo tepat di
	   bawah nomor WhatsApp. Email setinggi dua baris di sini hanya akan
	   menyisakan baris kosong di bawahnya. */
	.ds-shop-page--checkout form.checkout .woocommerce-billing-fields__field-wrapper:has(#billing_ds_wa_promo_field) #billing_email_field {
		grid-row: auto;
	}

	.ds-shop-page--checkout .woocommerce-billing-fields__field-wrapper:has(#billing_ds_wa_promo_field) {
		grid-auto-flow: row;
	}

	/* Satu kolom: izin promo sudah di atas email, jadi catatannya kembali
	   menempel ke kolom emailnya sendiri. */
	.ds-shop-page--checkout .woocommerce-billing-fields__field-wrapper:has(#billing_ds_wa_promo_field) .ds-acctnote {
		margin-top: 6px;
		font-size: 12.5px;
		line-height: 19px;
	}
}

/* ================== 20. Kepala berlangkah dan halaman Pesanan Diterima
 *
 * Angkanya dari artboard "04 · Data & Pengiriman" (node 112:814) dan
 * "05 · Pesanan Diterima" (node 114:930).
 */

/* ---- Kepala rata tengah untuk dua langkah terakhir ---- */

/* Tinggi dan ornamennya disamakan dengan kepala FAQ dan Mancing Mania.
   Artboard alur belanja memakai hero yang lebih pendek (221px), tapi tiga
   halaman ini duduk di situs yang sama dengan halaman isi - dan kepala yang
   tingginya berbeda-beda per halaman terbaca sebagai situs yang berbeda-beda. */
.ds-hero-step {
	position: relative;
	overflow: hidden;
	padding: 88px var(--ds-pad) 96px;
	text-align: center;
}

/* Ornamennya menempel di hero, bukan di <main>.
 *
 * Di halaman katalog, kepala halaman berada DI DALAM <main>, jadi ornamen yang
 * digambar .ds-main--shop jatuh tepat di belakangnya. Di keranjang dan
 * checkout, hero dicetak SEBELUM <main> - jadi ornamen yang sama muncul satu
 * blok terlalu rendah, di belakang isi halaman, bukan di belakang judulnya. */
.ds-hero-step::before {
	content: "";
	position: absolute;
	top: -188px;
	left: -80px;
	width: 1556px;
	height: 483px;
	pointer-events: none;
	background: url("../images/ornaments/sapuan-atas.svg") no-repeat center/100% 100%;
}

.ds-hero-step > * {
	position: relative;
	z-index: 1;
}

/* Isi halaman menyusul tepat di bawah hero.
 *
 * .ds-shell--pad memberi 56px padding atas untuk halaman biasa, dan di sini
 * jaraknya terhitung dua kali: 44px dari kaki hero ditambah 56px lagi. Di
 * artboard jaraknya 52 - satu kali, bukan dua. */
.ds-shop-page .ds-main.ds-shell--pad {
	padding-top: 8px;
}

.ds-hero-step__kicker {
	font-size: 13px;
	font-weight: 500;
	line-height: 21px;
	letter-spacing: 2.34px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
}

.ds-hero-step__title {
	margin-top: 10px;
	font-size: 34px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-text);
}

.ds-hero-step__line {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	align-items: center;
	justify-content: center;
	margin-top: 28px;
	padding: 0;
	list-style: none;
}

.ds-hero-step__item {
	display: flex;
	gap: 10px;
	align-items: center;
}

.ds-hero-step__no {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ds-text-3);
	border: 1px solid var(--ds-border-strong);
	border-radius: 999px;
}

.ds-hero-step__label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-text-3);
}

.ds-hero-step__item.is-done .ds-hero-step__no {
	color: var(--ds-white);
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

/* Langkah yang sedang berjalan diberi cincin, bukan isian penuh. Bedanya
   dengan langkah yang sudah lewat harus terlihat tanpa membaca isinya -
   yang satu sudah beres, yang satu sedang dikerjakan. */
.ds-hero-step__item.is-now .ds-hero-step__no {
	color: var(--ds-white);
	background: var(--ds-accent-700);
	border: 2px solid var(--ds-accent);
}

.ds-hero-step__item.is-done .ds-hero-step__label,
.ds-hero-step__item.is-now .ds-hero-step__label {
	color: var(--ds-text);
}

/* Garis penghubung: 64px garis di tengah ruang 100px, sesuai artboard. */
.ds-hero-step__link {
	flex: none;
	width: 64px;
	height: 2px;
	margin: 0 18px;
	background: var(--ds-border-strong);
}

.ds-hero-step__link.is-done {
	background: var(--ds-accent);
}

/* ---- Halaman Pesanan Diterima ---- */

.ds-done {
	max-width: 860px;
	margin: 0 auto;
	padding: 56px 0 40px;
	text-align: center;
}

.ds-done__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	color: var(--ds-white);
	background: var(--ds-accent-600);
	border-radius: 999px;
}

.ds-done__title {
	margin-top: 20px;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
}

.ds-done__sub {
	max-width: 700px;
	margin: 10px auto 0;
	font-size: 16px;
	line-height: 26px;
	color: var(--ds-text-2);
}

.ds-done__sub strong {
	font-weight: 600;
	color: var(--ds-text);
}

/* Empat fakta pesanan dalam satu kartu, rata kiri. Angkanya yang dibaca,
   bukan kalimatnya, jadi label kecil di atas dan nilainya di bawah - bukan
   berdampingan, yang membuat mata harus mencari pasangannya. */
.ds-done__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 30px;
	padding: 22px 24px;
	text-align: left;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-done__fact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ds-done__factkey {
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-text-3);
}

.ds-done__factval {
	font-size: 16px;
	line-height: 23px;
	color: var(--ds-text);
	overflow-wrap: anywhere;
}

.ds-done__factval--money {
	font-weight: 600;
	color: var(--ds-accent-300);
}

.ds-done__status {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--ds-text-3);
}

.ds-done__card {
	margin-top: 20px;
	padding: 24px;
	text-align: left;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-done__cardtitle {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
}

.ds-done__items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 18px;
}

.ds-done__item {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 8px 0;
}

.ds-done__name {
	font-size: 15px;
	line-height: 23px;
	color: var(--ds-text);
}

.ds-done__qty {
	flex: none;
	font-size: 12.5px;
	color: var(--ds-text-3);
}

.ds-done__money {
	flex: 1 1 auto;
	font-size: 15px;
	text-align: right;
	color: var(--ds-text);
}

.ds-done__line {
	height: 1px;
	margin-top: 8px;
	background: var(--ds-border);
}

.ds-done__row {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 14px;
}

.ds-done__key {
	font-size: 16px;
	line-height: 26px;
	color: var(--ds-text-2);
}

.ds-done__val {
	font-size: 16px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-done__row--total .ds-done__key {
	font-size: 15px;
	font-weight: 700;
	color: var(--ds-text);
}

.ds-done__row--total .ds-done__val {
	font-size: 20px;
	line-height: 26px;
}

.ds-done__addrs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.ds-done__card--addr {
	margin-top: 20px;
}

.ds-done__addr {
	margin-top: 14px;
	font-size: 15px;
	font-style: normal;
	line-height: 25px;
	color: var(--ds-text-2);
}

/* Pesan "bayar dulu" untuk pesanan yang belum lunas, tepat di atas tombolnya. */
.ds-done__pay {
	display: inline-block;
	margin: 30px auto 0;
	padding: 14px 18px;
	font-size: 14.5px;
	line-height: 22px;
	color: var(--ds-gold);
	background: rgba(232, 181, 74, 0.1);
	border: 1px solid rgba(232, 181, 74, 0.4);
	border-radius: 12px;
}

.ds-done__pay + .ds-done__actions {
	margin-top: 18px;
}

.ds-done__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 28px;
}

/* Halaman ini duduk di dalam .ds-entry__content, yang menggarisbawahi setiap
   tautan DAN mewarnainya hijau muda. Aturan itu (0,1,1) mengalahkan
   .ds-done__btn (0,1,0), jadi tulisan di dalam tombol ikut kehijauan dan
   bergaris bawah. Diperpanjang satu class supaya menang. */
.ds-done .ds-done__btn {
	color: var(--ds-white);
	text-decoration: none;
}

.ds-done .ds-done__btn:hover {
	color: var(--ds-white);
}

.ds-done .ds-done__btn--line {
	color: var(--ds-text);
}

.ds-done .ds-done__btn--line:hover {
	color: var(--ds-accent-300);
}

.ds-done__btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 26px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-white);
	background: var(--ds-accent);
	border-radius: 10px;
}

.ds-done__btn:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

.ds-done__btn--line {
	color: var(--ds-text);
	background: none;
	border: 1px solid var(--ds-border-strong);
}

.ds-done__btn--line:hover {
	color: var(--ds-accent-300);
	background: none;
	border-color: var(--ds-accent);
}

/* Blok "Informasi Pembayaran" yang dicetak Midtrans (gateway lama) lewat hook
 * woocommerce_thankyou disembunyikan.
 *
 * Isinya satu baris: tautan ke halaman bayarnya. Hal yang sama sudah
 * ditawarkan tombol "Lanjutkan Pembayaran" di atas, dengan kata-kata yang
 * lebih jelas dan hanya muncul saat memang belum dibayar.
 *
 * Disembunyikan lewat CSS, bukan dengan melepas hook-nya, karena hook yang
 * sama dipakai plugin analitik dan piksel iklan untuk menandai pesanan
 * berhasil. Melepasnya mematikan semua itu diam-diam. */
.ds-done > h2:not(.ds-done__title),
.ds-done table.midtrans_payment_info {
	display: none;
}

/* Layar gagal bayar memakai bentuk yang sama, cuma tanpa kartu-kartunya. */
.ds-done--failed .ds-done__title {
	margin-top: 0;
	color: var(--ds-danger-300);
}

@media (max-width: 899px) {
	.ds-hero-step__label {
		display: none;
	}

	.ds-hero-step__link {
		width: 32px;
		margin: 0 10px;
	}

	/* Jarak yang sama dengan kepala FAQ di layar sempit. */
	.ds-hero-step {
		padding: 64px var(--ds-pad) 72px;
	}

	.ds-hero-step::before {
		display: none;
	}

	.ds-hero-step__title {
		font-size: 26px;
		line-height: 34px;
	}

	.ds-done__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ds-done__addrs {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599px) {
	.ds-done__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.ds-done__item {
		flex-wrap: wrap;
	}

	.ds-done__money {
		flex: 1 1 100%;
		text-align: left;
	}
}

/* ================================ 21. Masuk, daftar, dan kata sandi
 *
 * Angkanya dari artboard "01 · Masuk" (node 116:2): kartu 520 di tengah,
 * padding 34, kolom isian setinggi 50, tombol setinggi 52.
 */

/* Kepala tanpa penunjuk langkah memakai jarak yang sedikit lebih rapat: tidak
   ada deretan langkah di bawah judul yang perlu diberi ruang. */
.ds-hero-step--plain {
	padding-bottom: 72px;
}

.ds-auth {
	display: flex;
	justify-content: center;
	padding: 0 0 24px;
}

.ds-auth__card {
	width: 100%;
	max-width: 520px;
	padding: 34px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 16px;
}

.ds-auth__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
}

.ds-auth__sub {
	margin-top: 8px;
	font-size: 14.5px;
	line-height: 22.5px;
	color: var(--ds-text-2);
}

/* Kotak milik WooCommerce dilucuti.
 *
 * woocommerce.css membungkus form.login dan form.register dengan garis abu,
 * padding 20, dan sudut membulat sendiri - kartu di dalam kartu. Ia juga
 * memberinya float, dan itu yang membuat garis pemisah "atau" di bawahnya
 * terjepit jadi selebar enam piksel di ujung kanan: sebuah blok yang mengalir
 * di samping float, bukan di bawahnya. */
.ds-auth__card form,
.ds-auth__card form.login,
.ds-auth__card form.register,
.ds-auth__card form.woocommerce-form {
	float: none;
	width: 100%;
	margin: 26px 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.ds-auth__card form::before,
.ds-auth__card form::after {
	display: none;
	content: none;
}

.ds-auth__field {
	margin: 0 0 18px;
}

/* Nama depan dan belakang berdampingan: keduanya pendek, dan berdampingan
   membuat kartunya turun satu baris. */
.ds-auth__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

/* Persetujuan kebijakan privasi. Kotaknya rata atas, bukan rata tengah:
   kalimatnya bisa dua baris, dan kotak yang melayang di tengah dua baris
   terlihat seperti tidak menempel pada apa pun. */
.ds-auth__consent {
	align-items: flex-start;
	margin-top: 4px;
	font-size: 13.5px;
	line-height: 20px;
	color: var(--ds-text-2);
}

.ds-auth__consent input[type="checkbox"] {
	margin-top: 1px;
}

.ds-auth__consent a {
	color: var(--ds-accent-300);
}

/* Jawaban atas tombol yang baru ditekan, tepat di bawah tombolnya. Pesan
   bawaan WooCommerce membawa gaya terang miliknya sendiri, jadi warnanya
   ditulis ulang di sini. */
.ds-auth__notice {
	margin-top: 18px;
}

.ds-auth__notice ul,
.ds-auth__notice .woocommerce-message,
.ds-auth__notice .woocommerce-error,
.ds-auth__notice .woocommerce-info {
	margin: 0;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 21px;
	list-style: none;
	border-radius: 12px;
}

.ds-auth__notice .woocommerce-message,
.ds-auth__notice .woocommerce-info {
	color: var(--ds-accent-line);
	background: rgba(70, 188, 145, 0.12);
	border: 1px solid rgba(70, 188, 145, 0.35);
}

.ds-auth__notice .woocommerce-error {
	color: var(--ds-danger-300);
	background: rgba(217, 72, 59, 0.14);
	border: 1px solid rgba(217, 72, 59, 0.45);
}

.ds-auth__notice li {
	list-style: none;
}

.ds-auth__notice a {
	color: inherit;
	text-decoration: underline;
}

.ds-auth__notice .button {
	display: none;
}

/* woocommerce.css menempelkan ikon centang lewat ::before yang berposisi
   absolut di kiri. Tanpa ruang yang disediakan untuknya, ikon itu duduk tepat di
   atas huruf pertama. */
.ds-auth__notice .woocommerce-message::before,
.ds-auth__notice .woocommerce-error::before,
.ds-auth__notice .woocommerce-info::before {
	display: none;
}

.ds-auth__field label {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 20px;
	color: var(--ds-text-2);
}

.ds-auth__field .required {
	color: var(--ds-danger-300);
	text-decoration: none;
}

/* Selektornya menyebut input.input-text, bukan input saja: woocommerce.css
   memakai ".woocommerce form .form-row input.input-text" untuk kolom-kolomnya,
   dan aturan yang lebih pendek dari itu kalah hitung. */
.ds-auth__card input.input-text,
.ds-auth__card input[type="text"],
.ds-auth__card input[type="email"],
.ds-auth__card input[type="password"] {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ds-text);
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

.ds-auth__card input::placeholder {
	color: var(--ds-text-3);
}

.ds-auth__card input:focus {
	outline: none;
	border-color: var(--ds-accent);
}

/* WooCommerce menyisipkan tombol mata pengintip ke dalam kolom kata sandi.
   Kolomnya jadi anak dari pembungkus itu, bukan dari <p>, jadi lebar 100%
   perlu diberikan ke pembungkusnya juga. */
.ds-auth__card .woocommerce-password-input,
.ds-auth__card .password-input {
	display: block;
	position: relative;
	width: 100%;
}

.ds-auth__card .show-password-input {
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--ds-text-3);
	transform: translateY(-50%);
	cursor: pointer;
}

.ds-auth__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin: 16px 0 0;
}

.ds-auth__check {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	font-size: 14.5px;
	color: var(--ds-text);
	cursor: pointer;
}

/* Kotak centang digambar sendiri, sama dengan yang di penyaring katalog dan
   checkout: accent-color hanya mewarnai centangnya, kotaknya tetap putih milik
   sistem operasi. */
.ds-auth__check input[type="checkbox"] {
	display: inline-grid;
	flex: none;
	place-content: center;
	width: 18px;
	height: 18px;
	margin: 0;
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border-strong);
	border-radius: 5px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.ds-auth__check input[type="checkbox"]::before {
	content: "";
	width: 11px;
	height: 11px;
	background: var(--ds-white);
	transform: scale(0);
	transition: transform 0.12s ease;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.ds-auth__check input[type="checkbox"]:checked {
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

.ds-auth__check input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.ds-auth__forgot {
	font-size: 14.5px;
	color: var(--ds-accent-300);
}

.ds-auth__note {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 20px;
	color: var(--ds-text-3);
}

.ds-auth__submit {
	margin: 24px 0 0;
	clear: both;
}

/* Selektornya diperpanjang sampai mengalahkan ".woocommerce button.button.alt"
   milik WooCommerce, yang kalau menang membuat tombolnya ungu.

   float:none juga wajib. woocommerce.css memberi setiap .button float:left -
   sisa zaman tombol berjajar - dan float itu membuat paragraf pembungkusnya
   setinggi nol, lalu garis pemisah "atau" di bawahnya mengalir di SAMPING
   tombol, bukan di bawahnya. Itu yang membuatnya terlihat terlempar ke ujung
   kanan kartu. */
.ds-auth__card .ds-auth__btn,
.ds-auth__card button.button.ds-auth__btn,
.ds-auth__card a.ds-auth__btn {
	display: flex;
	float: none;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding: 0 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-white);
	text-decoration: none;
	background: var(--ds-accent);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}

.ds-auth__card button.button.ds-auth__btn:hover {
	background: var(--ds-accent-600);
}

.ds-auth__card a.ds-auth__btn--line {
	margin-top: 22px;
	color: var(--ds-text);
	background: none;
	border: 1px solid var(--ds-border-strong);
}

.ds-auth__card a.ds-auth__btn--line:hover {
	color: var(--ds-accent-300);
	background: none;
	border-color: var(--ds-accent);
}

/* Garis pemisah dengan kata "atau" di tengahnya. Dua garis dibuat dari elemen
   pembungkusnya sendiri lewat flex, bukan dari dua <span> tambahan - lebih
   sedikit markup untuk hal yang murni hiasan. */
.ds-auth__split {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 22px;
	font-size: 12.5px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ds-text-3);
}

.ds-auth__split::before,
.ds-auth__split::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ds-border);
}

/* Pesan WooCommerce (mis. "kata sandi salah") muncul di atas kartu. Dibuat
   selebar kartunya supaya keduanya terbaca sebagai satu tumpukan. */
.ds-shop-page--guest .woocommerce-notices-wrapper {
	max-width: 520px;
	margin: 0 auto 18px;
}

@media (max-width: 599px) {
	.ds-auth__card {
		padding: 24px 20px;
	}
}

/* ================================================= 22. Wishlist
 *
 * Angkanya dari artboard "10 · Wishlist" (node 119:1695): baris setinggi 120
 * di dalam kartu, foto 84, tombol aksi di ujung kanan.
 */

.ds-wl__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.ds-wl__count {
	font-size: 14px;
	color: var(--ds-text-2);
}

/* Tombol utama halaman ini (node 266:1870): hijau penuh, teks putih.

   Selektornya sengaja diperpanjang dengan .ds-wl. .ds-entry__content a memberi
   garis bawah ke semua tautan di isi halaman, dan kekhususannya (0,1,1)
   mengalahkan .ds-wl__all (0,1,0) - jadi garis bawahnya tetap muncul. */
/* Formulirnya tidak ikut jadi kotak, jadi tombolnya berdiri langsung di
   barisan yang sama dengan hitungan produk di sebelah kiri. */
.ds-wl__allform {
	display: contents;
}

.ds-wl .ds-wl__all {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	height: 50px;
	padding: 0 20px;
	font-family: inherit;
	cursor: pointer;
	border: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-white);
	text-decoration: none;
	background: var(--ds-accent);
	border: 0;
	border-radius: 12px;
}

.ds-wl .ds-wl__all:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

.ds-wl__list {
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
	overflow: hidden;
}

.ds-wl__row {
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 18px 24px;
}

.ds-wl__row + .ds-wl__row {
	border-top: 1px solid var(--ds-border);
}

.ds-wl__pic {
	flex: none;
	width: 84px;
	height: 84px;
	overflow: hidden;
	background: var(--ds-white);
	border-radius: 10px;
}

.ds-wl__pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ds-wl__info {
	flex: 1 1 auto;
	min-width: 0;
}

/* Sama seperti tombolnya: .ds-entry__content a menggarisbawahi semua tautan di
   isi halaman, jadi selektornya diperpanjang. Di desain nama produk polos. */
.ds-wl .ds-wl__name {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 19px;
	color: var(--ds-text);
	text-decoration: none;
}

.ds-wl__name:hover {
	color: var(--ds-accent-300);
}

.ds-wl__price {
	margin-top: 6px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-wl__price del {
	margin-left: 10px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--ds-text-3);
}

.ds-wl__price ins {
	text-decoration: none;
}

.ds-wl__stock {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--ds-accent-line);
}

.ds-wl__stock.is-out {
	color: var(--ds-text-3);
}

.ds-wl__dot {
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 999px;
}

.ds-wl__act {
	display: flex;
	flex: none;
	gap: 10px;
	align-items: center;
}

/* Tombol di tiap baris bukan tombol utama - yang utama "Tambah semua" di atas.
   Desainnya (node 266:1889) memberinya isi hijau tipis dan garis hijau, supaya
   delapan baris tidak berubah jadi delapan tombol yang berebut perhatian. */
.ds-wl__act .ds-wl__add {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
	text-decoration: none;
	background: rgba(46, 158, 119, 0.14);
	border: 1px solid rgba(46, 158, 119, 0.6);
	border-radius: 10px;
}

.ds-wl__act .ds-wl__add:hover {
	color: var(--ds-white);
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

/* Produk yang stoknya habis tetap punya tombol, cuma tujuannya berbeda:
   melihat produknya, bukan membelinya. Tombol yang mati begitu saja membuat
   pembeli mengira barisnya rusak. */
.ds-wl__act .ds-wl__add--line {
	color: var(--ds-text-2);
	background: #24333a;
	border-color: transparent;
}

.ds-wl__act .ds-wl__add--line:hover {
	color: var(--ds-text);
	background: #2b3d45;
	border-color: transparent;
}

.ds-wl__del {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--ds-text-3);
	background: none;
	border: 1px solid var(--ds-border);
	border-radius: 10px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.ds-wl__del:hover {
	color: var(--ds-danger-300);
	border-color: rgba(217, 72, 59, 0.6);
}

.ds-wl__note {
	margin-top: 14px;
	font-size: 12.5px;
	line-height: 19px;
	color: var(--ds-text-3);
}

@media (max-width: 767px) {
	.ds-wl__row {
		flex-wrap: wrap;
		padding: 18px;
	}

	.ds-wl__act {
		flex: 1 1 100%;
		justify-content: flex-start;
	}

	.ds-wl__act .ds-wl__add {
		flex: 1 1 auto;
	}
}

/* ============================================= 23. Tata letak Akun Saya
 *
 * Angkanya dari artboard "10 · Wishlist" (node 119:1759): sidebar 300, isi 990,
 * berjarak 30.
 */

/* Dua kolom hanya untuk yang sudah masuk.

   Layar masuk, daftar, dan pemulihan kata sandi memakai pembungkus .woocommerce
   yang sama, tapi isinya cuma satu kartu. Ikut jadi grid dua kolom, kartunya
   mendarat di kolom kanan - dan kartu yang sudah rata tengah pun jadi terlihat
   bergeser ke kanan, karena yang dibagi dua cuma kolomnya. */
.ds-shop-page--account:not(.ds-shop-page--guest) .woocommerce {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	margin-top: 26px;
}

/* Pemberitahuan melintang di atas kedua kolom, bukan menyempil di salah
   satunya. */
.ds-shop-page--account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* Sisa zaman float lagi: woocommerce.css memberi navigasi 25% dan isinya 75%,
   dua-duanya mengambang. Di dalam grid, persen itu dihitung dari lebar
   kolomnya sendiri - sidebar 300px menyusut jadi 75px. */
.ds-shop-page--account .woocommerce-MyAccount-navigation,
.ds-shop-page--account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

/* Kolomnya ditunjuk satu per satu, tidak diserahkan ke penempatan otomatis.

   Diserahkan otomatis, keduanya tertukar: sidebar mendarat di kolom kanan dan
   isinya di kolom kiri selebar 300px. Menebak-nebak sebabnya tidak ada gunanya
   ketika menyebutkan kolomnya cuma dua baris - dan dua baris itu juga yang
   membuat urutannya tidak bisa berubah lagi karena aturan lain. */
.ds-shop-page--account .woocommerce > .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 1;
}

.ds-shop-page--account .woocommerce > .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1;
}

/* Ornamen sapuan digambar kepala halaman, bukan <main>.
 *
 * Di katalog, kepala halaman berada DI DALAM <main>, jadi ornamen milik
 * .ds-main--shop jatuh tepat di belakangnya. Di halaman akun, kepalanya dicetak
 * SEBELUM <main> - ornamen yang sama muncul satu blok terlalu rendah, di
 * belakang kartu, bukan di belakang judulnya.
 *
 * Catatan lama di tempat ini mengatakan overflow: hidden tidak diperlukan
 * karena body sudah memotong lebar berlebih. Itu keliru - lihat aturan
 * berikutnya. */
.ds-shop-page--account .ds-main--shop::before {
	content: none;
}

/* Ornamennya selebar 1556px dengan left -80px, dan itu ikut melebarkan
 * DOKUMEN, bukan cuma meluber di dalam kotaknya.
 *
 * Di ponsel selebar 390px, dokumennya jadi 1476px: halaman akun bisa digeser
 * 1086px ke kanan, dan peramban ponsel mengecilkan tampilannya sendiri supaya
 * muat. Itu terjadi di Dasbor, Pesanan, Lacak Resi, Wishlist, Alamat, dan
 * Detail Akun sekaligus - keenamnya memakai kepala halaman yang sama.
 *
 * body memang punya overflow-x: hidden, tapi itu hanya menyembunyikan yang
 * meluber; lebar dokumennya tetap 1476px, dan lebar dokumen itulah yang
 * menentukan halaman bisa digeser atau tidak.
 *
 * Ornamennya jadi terpotong di tepi kepala halaman. Untuk hiasan latar, itu
 * memang yang seharusnya terjadi. */
.ds-shop-page--account .ds-pagehead {
	position: relative;
	overflow: hidden;
}

.ds-shop-page--account .ds-pagehead::before {
	content: "";
	position: absolute;
	top: -188px;
	left: -80px;
	width: 1556px;
	height: 506px;
	pointer-events: none;
	background: url("../images/ornaments/sapuan-atas.svg") no-repeat center/100% 100%;
}

/* Kepalanya sendiri dan seluruh isi halaman berdiri di atas ornamen. Tanpa ini
   ornamen yang berposisi absolut menutupi <main> yang mengalir biasa. */
.ds-shop-page--account .ds-pagehead__inner,
.ds-shop-page--account .ds-main--shop {
	position: relative;
	z-index: 1;
}

.ds-acc__card {
	padding: 22px 20px;
	text-align: center;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-acc__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--ds-accent-300);
	background: var(--ds-accent-700);
	border-radius: 999px;
}

.ds-acc__name {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--ds-text);
	overflow-wrap: anywhere;
}

.ds-acc__email {
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 18px;
	color: var(--ds-text-3);
	overflow-wrap: anywhere;
}

/* .ds-entry__content ul memberi setiap daftar di isi halaman bulatan dan
   indentasi - benar untuk paragraf, salah untuk menu. Kekhususannya (0,1,1)
   mengalahkan .ds-acc__menu (0,1,0), jadi selektornya diperpanjang. */
.ds-shop-page--account .ds-acc__menu,
.ds-acc__menu {
	margin: 20px 0 0;
	padding: 12px;
	list-style: none;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-shop-page--account .ds-acc__menu li,
.ds-acc__menu li {
	margin: 0;
	list-style: none;
}

.ds-acc__menu li a {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	font-size: 15px;
	color: var(--ds-text-2);
	text-decoration: none;
	border-radius: 10px;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.ds-acc__menu li a:hover {
	color: var(--ds-text);
	background: rgba(255, 255, 255, 0.04);
}

.ds-acc__menu li.is-active > a {
	color: var(--ds-white);
	background: var(--ds-accent);
}

.ds-acc__menu li.is-active > a .ds-icon {
	color: var(--ds-white);
}

/* Keluar dipisah garis: ia bukan satu lagi tempat yang bisa dikunjungi,
   melainkan tindakan yang mengakhiri semuanya. */
.ds-acc__menu li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid var(--ds-border);
}

@media (max-width: 991px) {
	.ds-shop-page--account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	/* Penempatan kolom yang ditulis eksplisit di atas HARUS ikut dibatalkan.
	 *
	 * Menjadikan gridnya satu kolom saja tidak cukup: isi halaman masih
	 * dipatok ke "grid-column: 2", dan kolom kedua itu sudah tidak ada lagi.
	 * Peramban tidak mengabaikannya - ia membuatkan kolom kedua secara diam-diam
	 * di sebelah kanan layar, selebar isinya. Hasilnya seluruh isi halaman akun
	 * berdiri di luar layar ponsel: sidebar terlihat penuh, dan wishlist,
	 * dasbor, atau daftar pesanan cuma terlihat sepotong di tepi kanan.
	 *
	 * Ini berlaku untuk SEMUA halaman akun sekaligus, karena semuanya memakai
	 * kerangka dua kolom yang sama. */
	.ds-shop-page--account .woocommerce > .woocommerce-MyAccount-navigation,
	.ds-shop-page--account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: auto;
	}

	/* Kartu sapaan jadi tiga bagian dalam satu grid.
	 *
	 * Nama dan email adalah dua elemen sejajar, bukan satu blok - sebagai
	 * baris flex keduanya berdiri BERDAMPINGAN, jadi "Budi Santoso" pecah dua
	 * baris di kiri sementara alamat emailnya pecah di tengah kata di kanan.
	 * Grid menaruh keduanya bertumpuk di kolom kanan avatar, tanpa perlu
	 * menambah pembungkus di template WooCommerce. */
	.ds-acc__card {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 2px 14px;
		align-items: center;
		text-align: left;
	}

	.ds-acc__avatar {
		grid-row: 1 / 3;
		flex: none;
		width: 52px;
		height: 52px;
		font-size: 17px;
	}

	.ds-acc__name {
		grid-column: 2;
		align-self: end;
		margin-top: 0;
	}

	.ds-acc__email {
		grid-column: 2;
		align-self: start;
		margin-top: 0;
		/* Ellipsis, bukan pemenggalan di tengah kata: "budi@email.co" dengan
		   "m" sendirian di baris berikutnya terbaca sebagai alamat yang salah,
		   sedangkan "budi@email..." jelas cuma dipendekkan. */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow-wrap: normal;
	}

	/* Menu akun jadi dua kolom seragam.
	 *
	 * Sebagai chip yang mengalir, lebar tiap tautan mengikuti panjang katanya:
	 * "Alamat" jadi setengah lebar "Detail Akun", dan tidak ada satu pun tepi
	 * yang sejajar. Dua kolom membuat semuanya sama besar - dan sasaran sentuh
	 * yang seragam lebih mudah dituju daripada yang berubah-ubah. */
	.ds-acc__menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}

	/* Padding dan hurufnya dirapatkan sedikit supaya "Detail Akun" - label
	   terpanjang di menu ini - muat satu baris di kolom selebar 145px. */
	.ds-acc__menu li a {
		gap: 9px;
		height: 100%;
		padding: 11px 10px;
		font-size: 14px;
	}

	/* Keluar mengambil barisnya sendiri: ia bukan satu lagi tempat yang bisa
	   dikunjungi, melainkan tindakan yang mengakhiri semuanya. */
	.ds-shop-page--account .ds-acc__menu li.woocommerce-MyAccount-navigation-link--customer-logout,
	.ds-acc__menu li.woocommerce-MyAccount-navigation-link--customer-logout {
		grid-column: 1 / -1;
	}
}

/* ============================================= 24. Detail Akun
 *
 * Angkanya dari artboard "09 · Detail Akun" (node 119:1495): tiga kartu selebar
 * kolom isi, berpadding 24, berjarak 20, dengan kolom isian setinggi 50.
 *
 * Selektornya di sini panjang-panjang bukan karena selera. Isi halaman akun
 * berada di dalam .ds-entry__content, yang memberi jarak ke setiap <p> dan <h2>
 * dengan kekhususan (0,1,1) - satu class bernama sendiri (0,1,0) kalah. Tombol
 * .button juga sudah dipegang woocommerce.css lewat ".woocommerce button.button"
 * (0,2,1), jadi tombol di sini perlu tiga class untuk menang.
 */

.ds-acct {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ds-acct__card {
	padding: 24px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-acct__card .ds-acct__head {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-text);
}

.ds-acct__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 18px;
}

.ds-acct__form .ds-acct__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
}

.ds-acct__form .ds-acct__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.ds-acct__form .ds-acct__field label {
	font-size: 12px;
	font-weight: 600;
	line-height: 19.2px;
	color: var(--ds-text-2);
}

.ds-acct__form .ds-acct__field input {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text);
	background: var(--ds-border);
	border: 1px solid var(--ds-border);
	border-radius: 9px;
	appearance: none;
}

.ds-acct__form .ds-acct__field input::placeholder {
	color: var(--ds-text-3);
}

.ds-acct__form .ds-acct__field input:focus {
	outline: none;
	border-color: var(--ds-accent);
}

/* Tombol mata pengintip yang disisipkan WooCommerce ke kolom kata sandi
   membungkus kolomnya, jadi lebar 100% perlu diberikan ke pembungkusnya juga. */
.ds-acct__form .woocommerce-password-input,
.ds-acct__form .password-input {
	display: block;
	position: relative;
	width: 100%;
}

.ds-acct__form .show-password-input {
	position: absolute;
	top: 50%;
	right: 14px;
	color: var(--ds-white);
	transform: translateY(-50%);
	cursor: pointer;
}

.ds-acct__form .ds-acct__note {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-3);
}

.ds-acct__card .ds-acct__act {
	margin: 20px 0 0;
}

.ds-shop-page--account .ds-acct__card .ds-acct__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 22.5px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
}

.ds-shop-page--account .ds-acct__card .ds-acct__btn:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

/* Kartu kedua bukan tindakan utama halaman ini. Kata sandi diganti sekali dalam
   berbulan-bulan, sedangkan data pribadi diperbaiki jauh lebih sering. */
.ds-shop-page--account .ds-acct__card .ds-acct__btn--line {
	color: var(--ds-text);
	background: none;
	border-color: var(--ds-border-strong);
}

.ds-shop-page--account .ds-acct__card .ds-acct__btn--line:hover {
	color: var(--ds-accent-300);
	background: none;
	border-color: var(--ds-accent);
}

/* ---- Kartu Preferensi ---- */

.ds-prefs {
	margin-top: 20px;
}

.ds-prefs .ds-prefs__row {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--ds-border);
}

.ds-prefs .ds-prefs__row:first-of-type {
	margin-top: 18px;
}

.ds-prefs__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	cursor: pointer;
}

.ds-prefs__label {
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text);
}

/* Tanda "Tersimpan" di samping judul kartu: muncul sebentar setiap saklar
   berubah, karena penyimpanannya tidak memuat ulang halaman. */
.ds-prefs__saved {
	margin-left: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ds-success, #1a6f52);
	opacity: 0;
	transition: opacity .2s ease;
}

.ds-prefs__saved.is-on {
	opacity: 1;
}

.ds-prefs__saved.is-bad {
	color: #b42318;
}

.ds-prefs__sub {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-3);
}

/* Saklarnya kotak centang biasa yang dibuat tembus pandang dan dibentangkan
   menutupi gambar saklarnya. Yang menerima klik, fokus keyboard, dan spasi
   tetap kotak centang itu - jadi tidak ada satu pun perilaku yang perlu ditulis
   ulang dengan JavaScript. */
.ds-prefs__switch {
	position: relative;
	flex: none;
	width: 46px;
	height: 26px;
}

.ds-prefs__switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ds-prefs__track {
	display: block;
	width: 46px;
	height: 26px;
	background: var(--ds-border);
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.ds-prefs__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: var(--ds-white);
	border-radius: 999px;
	transition: transform 0.15s ease;
}

.ds-prefs__switch input:checked ~ .ds-prefs__track {
	background: var(--ds-accent);
}

.ds-prefs__switch input:checked ~ .ds-prefs__track::after {
	transform: translateX(20px);
}

.ds-prefs__switch input:focus-visible ~ .ds-prefs__track {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.ds-acct__form .ds-acct__pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.ds-acct__card {
		padding: 18px;
	}

	.ds-shop-page--account .ds-acct__card .ds-acct__btn {
		width: 100%;
	}
}

/* ============================================= 25. Buku alamat
 *
 * Angkanya dari artboard "08 · Alamat" (node 119:1293): dua kartu 485 berjajar
 * dengan jarak 20, lalu satu kartu formulir selebar kolom isi.
 */

.ds-addr {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ds-addr__bar {
	display: flex;
	gap: 16px;
	align-items: center;
}

.ds-addr .ds-addr__hint {
	flex: 1 1 auto;
	margin: 0;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
}

.ds-addr .ds-addr__add {
	display: inline-flex;
	flex: none;
	gap: 8px;
	align-items: center;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	line-height: 22.5px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-white);
	text-decoration: none;
	background: var(--ds-accent);
	border-radius: 10px;
}

.ds-addr .ds-addr__add:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

.ds-addr__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.ds-addr__card {
	padding: 24px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

/* Alamat utama dibedakan garisnya, bukan cuma lencananya: kartu yang isinya
   dipakai kasir sebaiknya terlihat berbeda dari seberang ruangan. */
.ds-addr__card.is-utama {
	border-color: var(--ds-accent);
}

.ds-addr__head {
	display: flex;
	gap: 10px;
	align-items: center;
}

.ds-addr__head .ds-icon {
	flex: none;
	color: var(--ds-text-2);
}

.ds-addr__card .ds-addr__label {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-text);
}

.ds-addr__chip {
	padding: 4px 10px;
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-accent-300);
	background: #12513a;
	border-radius: 8px;
}

.ds-addr__card .ds-addr__body {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
}

.ds-addr__act {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/* Tiap tombol punya formulirnya sendiri - hapus dan jadikan utama adalah dua
   perintah yang berbeda. display:contents membuat formulirnya tidak ikut jadi
   kotak, jadi tombolnya berdiri langsung di barisan yang sama. */
.ds-addr__inline {
	display: contents;
}

/* Tiga class, bukan dua. inc/shop-pages/account-address.php memberi setiap
   tombol kirim di Akun Saya isi hijau lewat
   ".woocommerce-MyAccount-content form button[type=submit]" (0,2,1) - dan tombol
   Hapus yang seharusnya bergaris malah ikut jadi hijau penuh. */
.ds-addr .ds-addr__act .ds-addr__btn {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 22.4px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
	text-decoration: none;
	background: none;
	border: 1px solid var(--ds-border-strong);
	border-radius: 9px;
	cursor: pointer;
}

.ds-addr .ds-addr__act .ds-addr__btn:hover {
	border-color: var(--ds-text-3);
}

.ds-addr .ds-addr__act .ds-addr__btn--danger {
	color: var(--ds-danger-text);
}

.ds-addr .ds-addr__act .ds-addr__btn--danger:hover {
	color: var(--ds-danger-300);
	border-color: var(--ds-danger);
}

.ds-addr .ds-addr__act .ds-addr__btn--primary {
	color: var(--ds-accent-300);
	border-color: var(--ds-accent);
}

.ds-addr .ds-addr__act .ds-addr__btn--primary:hover {
	color: var(--ds-white);
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

.ds-addr .ds-addr__empty {
	margin: 0;
	padding: 24px;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
	background: var(--ds-surface);
	border: 1px dashed var(--ds-border-strong);
	border-radius: 14px;
}

/* Kolom pilihan memakai bentuk yang sama dengan kolom isian di bagian 24,
   supaya provinsi tidak terlihat seperti kolom dari halaman lain. */
.ds-acct__form .ds-acct__field select {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 14px;
	color: var(--ds-text);
	background: var(--ds-border);
	border: 1px solid var(--ds-border);
	border-radius: 9px;
	appearance: none;
	cursor: pointer;
}

.ds-acct__form .ds-acct__field select:focus {
	outline: none;
	border-color: var(--ds-accent);
}

@media (max-width: 767px) {
	.ds-addr__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ds-addr__bar {
		flex-direction: column;
		align-items: stretch;
	}

	.ds-addr .ds-addr__add {
		justify-content: center;
	}
}

/* Ikon mata di kolom kata sandi.
 *
 * Ia bukan huruf melainkan gambar SVG yang ditempelkan woocommerce.css sebagai
 * latar ::before - dan warnanya sudah dibakar hitam di dalam berkas gambarnya.
 * Karena itu "color: putih" tidak menyentuhnya sama sekali; yang menyentuh
 * gambar adalah filter.
 *
 * invert(1) membalik hitam jadi putih, dan ikut membalik versi "mata dicoret"
 * yang muncul saat kata sandinya sedang ditampilkan. */
.ds-acct__form .show-password-input::before,
.ds-auth__card .show-password-input::before {
	filter: invert(1);
}

/* ============================================= 26. Pesanan, detail, dasbor
 *
 * Angkanya dari artboard "05 · Dasbor" (117:713), "06 · Pesanan Saya" (117:898),
 * dan "07 · Detail Pesanan" (117:1111). Ketiganya memakai bentuk kartu yang sama
 * dengan bagian 24, jadi yang ditulis di sini cuma yang khas ketiga layar itu.
 */

/* ---- Saringan status ---- */

.ds-ord {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ds-ord__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ds-ord .ds-ord__pill {
	padding: 10px 16px;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
	text-decoration: none;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

.ds-ord .ds-ord__pill:hover {
	color: var(--ds-text);
	border-color: var(--ds-border-strong);
}

.ds-ord .ds-ord__pill.is-on {
	color: #c7eede;
	background: #12513c;
	border-color: var(--ds-accent);
}

/* Tawaran menautkan pesanan lama. Sengaja tinggal di halaman, bukan diangkat
   jadi toast: ia berbicara tentang daftar tepat di bawahnya. */
.ds-ord__hint {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 20px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 12px;
}

.ds-ord__hint > span {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-ord__hint .ds-ord__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
	text-decoration: none;
	border: 1px solid var(--ds-border-strong);
	border-radius: 9px;
}

.ds-ord__hint .ds-ord__btn:hover {
	color: var(--ds-accent-300);
	border-color: var(--ds-accent);
}

/* Jawaban WooCommerce setelah tombol konfirmasi ditekan mendarat di kotak yang
   sama. Gaya bawaannya putih dengan garis hijau di atas dan ikon centang yang
   ditempel sebagai gambar latar - benar di tema terang, menyilaukan di sini. */
.ds-ord__hint .woocommerce-message,
.ds-ord__hint .woocommerce-info,
.ds-ord__hint .woocommerce-error {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-accent-300);
	background: none;
	border: 0;
	border-radius: 0;
}

.ds-ord__hint .woocommerce-error {
	color: var(--ds-danger-300);
}

.ds-ord__hint .woocommerce-message::before,
.ds-ord__hint .woocommerce-info::before,
.ds-ord__hint .woocommerce-error::before {
	display: none;
}

/* Tombol yang kadang ikut diselipkan WooCommerce ke dalam pesannya. */
.ds-ord__hint .woocommerce-message a.button,
.ds-ord__hint .woocommerce-info a.button {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ds-text);
	text-decoration: none;
	background: none;
	border: 1px solid var(--ds-border-strong);
	border-radius: 9px;
}

@media (max-width: 767px) {
	.ds-ord__hint {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Panel daftar pesanan ---- */

.ds-ord__panel {
	padding: 24px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-ord__head,
.ds-ord__row {
	display: flex;
	gap: 16px;
	align-items: center;
}

.ds-ord__head {
	padding-bottom: 14px;
	font-size: 12px;
	font-weight: 600;
	line-height: 19.2px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-text-3);
	border-bottom: 1px solid var(--ds-border);
}

.ds-ord__row {
	padding: 16px 0;
	border-bottom: 1px solid var(--ds-border);
}

/* Lebar kolomnya tetap, mengikuti desain. Yang terakhir memakan sisa ruang,
   jadi tombolnya selalu menempel di kanan berapa pun panjang isian lain. */
.ds-ord__c1 {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 3px;
	width: 150px;
}

.ds-ord__c2 {
	flex: none;
	width: 130px;
	font-size: 14px;
	color: var(--ds-text-2);
}

.ds-ord__c3,
.ds-ord__c4 {
	flex: none;
	width: 150px;
}

.ds-ord__c4 {
	font-size: 16px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-ord__c5 {
	display: flex;
	flex: 1 1 auto;
	justify-content: flex-end;
	/* Jarak antara tombol Lihat dan Ajukan retur (modul retur). */
	gap: 8px;
	min-width: 0;
}

.ds-ord__no {
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text);
}

.ds-ord__sub {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-3);
}

/* ---- Lencana status ---- */

.ds-ord__chip {
	display: inline-block;
	padding: 5px 11px;
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
	border-radius: 8px;
}

.ds-ord__chip--wait {
	color: #141a16;
	background: var(--ds-text-2);
}

.ds-ord__chip--work {
	color: #141a16;
	background: #e0a32e;
}

.ds-ord__chip--done {
	color: var(--ds-white);
	background: #177a42;
}

.ds-ord__chip--off {
	color: var(--ds-white);
	background: var(--ds-danger);
}

/* Dipakai begitu ada tempat menyimpan nomor resi - lihat catatan di
   inc/shop-pages/orders-screen.php. */
.ds-ord__chip--ship {
	color: var(--ds-white);
	background: #3e8bd1;
}

/* ---- Tombol kecil, dipakai ketiga layar ---- */

.ds-ord .ds-ord__btn,
.ds-od .ds-ord__btn,
.ds-dash .ds-ord__btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 22.4px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-text);
	text-decoration: none;
	background: none;
	border: 1px solid var(--ds-border-strong);
	border-radius: 9px;
	cursor: pointer;
}

.ds-ord .ds-ord__btn:hover,
.ds-od .ds-ord__btn:hover,
.ds-dash .ds-ord__btn:hover {
	color: var(--ds-accent-300);
	border-color: var(--ds-accent);
}

.ds-ord .ds-ord__btn--primary,
.ds-od .ds-ord__btn--primary,
.ds-dash .ds-ord__btn--primary {
	color: var(--ds-white);
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

.ds-ord .ds-ord__btn--primary:hover,
.ds-od .ds-ord__btn--primary:hover,
.ds-dash .ds-ord__btn--primary:hover {
	color: var(--ds-white);
	background: var(--ds-accent-600);
	border-color: var(--ds-accent-600);
}

.ds-ord__pages {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
}

.ds-ord__kosong {
	text-align: center;
}

.ds-ord__panel.ds-ord__kosong h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--ds-text);
}

.ds-ord__panel.ds-ord__kosong p {
	max-width: 520px;
	margin: 10px auto 20px;
	font-size: 14.5px;
	line-height: 22.4px;
	color: var(--ds-text-2);
}

/* ---- Detail pesanan ---- */

.ds-od {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ds-od .ds-od__back {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	align-self: flex-start;
	font-size: 14px;
	color: var(--ds-text-2);
	text-decoration: none;
}

.ds-od .ds-od__back:hover {
	color: var(--ds-accent-300);
}

/* Baris atas: kembali di kiri, "Cetak invoice" di kanan. */
.ds-od__top {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.ds-od .ds-od__invoice {
	height: 40px;
	padding: 0 18px;
	font-size: 14px;
}

.ds-od .ds-od__invoice:hover {
	color: var(--ds-accent-text);
	border-color: var(--ds-accent);
}

.ds-od__card {
	padding: 24px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-od__head {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 18px;
}

.ds-od__card .ds-od__head h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-text);
}

.ds-od__head .ds-dash__more {
	margin-left: auto;
}

.ds-od .ds-dash__more,
.ds-dash .ds-dash__more {
	font-size: 14px;
	color: var(--ds-accent-300);
	text-decoration: none;
}

.ds-od .ds-dash__more:hover,
.ds-dash .ds-dash__more:hover {
	text-decoration: underline;
}

.ds-od__card .ds-od__note,
.ds-od__card .ds-od__body {
	margin: 0;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
}

.ds-od__card .ds-od__note {
	margin-bottom: 14px;
	color: var(--ds-danger-300);
}

/* ---- Garis waktu ---- */

.ds-od .ds-od__time {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-od .ds-od__step {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

.ds-od__dot {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 13px;
	color: var(--ds-white);
	border: 1.5px solid var(--ds-border-strong);
	border-radius: 999px;
}

.ds-od__step.is-done .ds-od__dot {
	background: var(--ds-accent-600);
	border-color: var(--ds-accent-600);
}

.ds-od__what {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ds-od__label {
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-3);
}

.ds-od__step.is-done .ds-od__label {
	color: var(--ds-text);
}

.ds-od__when {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-3);
}

.ds-od__card .ds-od__resi {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 10px 0 0;
	padding: 14px 16px;
	font-size: 14px;
	color: var(--ds-text-2);
	background: var(--ds-border);
	border-radius: 10px;
}

.ds-od__resi .ds-icon {
	flex: none;
}

/* ---- Barang dan total ---- */

.ds-od__item {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--ds-border);
}

.ds-od__pic {
	display: block;
	flex: none;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: var(--ds-border);
	border-radius: 9px;
}

.ds-od__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-od__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ds-od__name {
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text);
}

.ds-od .ds-od__name a {
	color: inherit;
	text-decoration: none;
}

.ds-od .ds-od__name a:hover {
	color: var(--ds-accent-300);
}

.ds-od__qty {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-3);
}

.ds-od__harga {
	flex: none;
	font-size: 16px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-od__aksi {
	flex: none;
}

.ds-od__sum {
	margin-top: 14px;
}

.ds-od__sumrow {
	display: flex;
	gap: 16px;
	align-items: baseline;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 14px;
	color: var(--ds-text-2);
}

.ds-od__sumrow span:last-child {
	color: var(--ds-text);
}

.ds-od__sumrow.is-total {
	padding-top: 14px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ds-text);
	border-top: 1px solid var(--ds-border);
}

/* Tombolnya menempel langsung di bawah keterangan pembayaran, tanpa satu pun
   jarak - terbaca seperti baris kelima dari daftar di atasnya, bukan sebagai
   tindakan tersendiri. */
.ds-od__card .ds-od__body + .ds-ord__btn {
	margin-top: 18px;
}

.ds-od__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

/* ---- Dasbor ---- */

.ds-dash {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ds-dash__stats {
	display: grid;
	/* Empat angka: pesanan berjalan, total pesanan, wishlist, dan poin. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

/* Program poin mati: kartu Poin tidak dicetak, jadi tiga kartu sisanya
   dibagi rata selebar baris - bukan menyisakan satu kolom kosong. */
.ds-dash__stats:not(:has(.ds-dash__stat--poin)) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ds-dash__stat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding: 22px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-dash__stat .ds-icon {
	color: var(--ds-accent-300);
}

.ds-dash__stat:last-child .ds-icon {
	color: var(--ds-gold);
}

.ds-dash__angka {
	font-size: 28px;
	font-weight: 600;
	line-height: 34px;
	color: var(--ds-text);
}

.ds-dash__label {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-2);
}

/* Seluruh barisnya sebuah <a>, jadi .ds-entry__content a (0,1,1) menggarisbawahi
   nomor, tanggal, harga - semuanya sekaligus. Di desain tidak ada satu pun
   garis bawah di kartu ini. */
.ds-dash a,
.ds-dash a:hover {
	text-decoration: none;
}

.ds-dash__row,
.ds-dash__pay,
.ds-dash__wish {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	text-decoration: none;
	border-bottom: 1px solid var(--ds-border);
}

.ds-dash__list > *:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.ds-dash__no {
	flex: none;
	font-size: 14px;
	color: var(--ds-text);
}

.ds-dash__tgl {
	flex: none;
	font-size: 12px;
	color: var(--ds-text-3);
}

.ds-dash__st {
	margin-left: auto;
}

.ds-dash__tot {
	flex: none;
	margin-left: auto;
	font-size: 16px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-dash__row .ds-dash__tot {
	margin-left: 0;
}

.ds-dash__arrow {
	flex: none;
	font-size: 14px;
	color: var(--ds-accent-300);
}

.ds-dash .ds-dash__row:hover .ds-dash__arrow,
.ds-dash .ds-dash__wish:hover .ds-dash__wname {
	color: var(--ds-accent-300);
}

.ds-dash__wname {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	color: var(--ds-text);
}

.ds-dash__pay .ds-ord__btn {
	flex: none;
}

/* Keterangan di baris pesanan COD, di tempat tombol "Bayar" pada tagihan
   online: tidak ada yang bisa dibayar di sini. */
.ds-dash__cod {
	flex: none;
	font-size: 12.5px;
	color: var(--ds-text-2);
}

@media (max-width: 991px) {
	.ds-dash__stats {
		gap: 12px;
	}

	.ds-od__pair {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	/* Barisnya berhenti jadi baris. Lima kolom berlebar tetap di layar 360px
	   berarti menggeser ke samping cuma untuk membaca totalnya sendiri. */
	.ds-ord__head {
		display: none;
	}

	.ds-ord__row {
		flex-wrap: wrap;
		gap: 8px 14px;
	}

	.ds-ord__c1,
	.ds-ord__c2,
	.ds-ord__c3,
	.ds-ord__c4 {
		width: auto;
	}

	.ds-ord__c1 {
		flex: 1 1 100%;
	}

	.ds-ord__c5 {
		flex: 1 1 100%;
		justify-content: flex-start;
	}

	/* Susunan dasbor di ponsel diatur di bagian 30. */

	.ds-od__item {
		flex-wrap: wrap;
	}

	.ds-od__aksi {
		flex: 1 1 100%;
	}
}

/* ========================================== 27. Bilah bawah khusus ponsel */

/* Lima pintasan tetap di kaki layar: Home, Produk, Pesanan, Keranjang, Akun.
 *
 * Disembunyikan di layar lebar. Di sana header sudah memuat semuanya sekaligus,
 * dan bilah tambahan hanya akan memakan tinggi layar tanpa menambah apa pun. */
.ds-tabbar {
	display: none;
}

@media (max-width: 899px) {
	.ds-tabbar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 70;
		display: flex;
		align-items: stretch;
		/* Ruang aman iPhone. Tanpa ini, label paling bawah tertimpa garis geser
		   sistem dan sasaran sentuhnya ikut tertelan. */
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: var(--ds-bg-1);
		border-top: 1px solid var(--ds-border);
		box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.45);
	}

	/* Wishlist, keranjang, dan akun tidak lagi berdiri di header ponsel.
	 *
	 * Ketiganya sudah ada di bilah bawah, jadi yang di header cuma
	 * menggandakannya - dan di baris header ketiganya berdesakan dengan tombol
	 * menu dalam ruang selebar ibu jari, sehingga yang tertekan sering bukan
	 * yang dituju. Yang tersisa di header ponsel tinggal logo, kolom pencarian,
	 * dan tombol menu.
	 *
	 * Panel Masuk ikut hilang bersama tombolnya. Itu bukan kehilangan: menekan
	 * Akun di bilah bawah membuka halaman akun, dan halaman itu memuat formulir
	 * masuk yang sama dengan ruang yang jauh lebih lapang. */
	.ds-header__icon-link,
	.ds-header__acct {
		display: none;
	}

	.ds-tabbar__item {
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		gap: 3px;
		align-items: center;
		justify-content: center;
		/* Tinggi sasaran sentuh dijaga tetap 56px ke atas - di bawah itu ibu
		   jari mulai sering meleset ke tetangganya. */
		min-height: 56px;
		padding: 8px 4px 9px;
		font-size: 11px;
		line-height: 15px;
		color: var(--ds-text-2);
		text-align: center;
	}

	.ds-tabbar__item.is-here,
	.ds-tabbar__item:hover,
	.ds-tabbar__item:focus-visible {
		color: var(--ds-accent-300);
	}

	.ds-tabbar__icon {
		position: relative;
		display: inline-flex;
	}

	/* Badge jumlah keranjang di bilah ini dipasang lebih rapat ke ikonnya
	   daripada di header: ikonnya 24px dan tidak punya padding di sekelilingnya,
	   jadi angka yang dipasang selebar header akan menggantung di luar kotak
	   sentuhnya. */
	.ds-tabbar__icon .ds-count {
		top: -5px;
		right: -9px;
	}

	.ds-tabbar__label {
		display: block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Tombol WhatsApp naik ke atas bilah. Tanpa ini keduanya berebut pojok
	   kanan bawah, dan tombol bundar itu menutupi ikon Akun. */
	.ds-fab {
		bottom: calc(80px + env(safe-area-inset-bottom, 0px));
	}

	/* Ruang untuk bilah ini diberikan ke seluruh footer di bagian 31, bukan ke
	   baris hak cipta - baris itu bisa saja kosong. */
}

/* ================ 28. Geseran di ponsel: pita jaminan dan kategori */

/* Titik penunjuk pita jaminan. Dicetak di HTML apa pun lebarnya, dan hanya
   ditampilkan begitu pitanya benar-benar berubah jadi geseran. */
/* Area sentuh diperbesar dengan cara yang sama seperti titik hero: titiknya
   tetap 8px, sasaran jarinya 24x40px. Padding wadahnya dikurangi 16px di atas
   dan bawah supaya tinggi pita tidak berubah. */
.ds-trust__dots {
	display: none;
	gap: 0;
	justify-content: center;
	padding: 2px 0 10px;
}

.ds-trust__dot {
	position: relative;
	width: 24px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	transition: width 0.2s ease;
}

.ds-trust__dot::before {
	content: "";
	position: absolute;
	inset: 16px 8px;
	background: rgba(245, 248, 249, 0.32);
	border-radius: 999px;
	transition: background 0.2s ease;
}

.ds-trust__dot.is-active {
	width: 38px;
}

.ds-trust__dot.is-active::before {
	background: var(--ds-accent-line);
}

@media (max-width: 899px) {
	/* Pita jaminan menjadi satu poin per layar.
	 *
	 * Empat poin berdampingan tidak muat di ponsel, dan menumpuknya jadi dua
	 * baris membuat pita setinggi 260px yang harus dilewati setiap pengunjung
	 * sebelum sampai ke produk. Sebagai geseran, ia kembali setinggi satu poin
	 * saja - dan yang ingin membaca sisanya tinggal menggeser.
	 *
	 * scroll-snap dipakai, bukan animasi buatan sendiri: dengan snap, jari
	 * pengunjung dan tombol titik menggerakkan hal yang sama persis, dan
	 * peramban sendiri yang mengurus inersia geseran. */
	.ds-trust__inner {
		flex-wrap: nowrap;
		gap: 0;
		padding: 30px 0 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ds-trust__inner::-webkit-scrollbar {
		display: none;
	}

	.ds-trust__item,
	.ds-trust__item:first-child,
	.ds-trust__inner > .ds-trust__item:last-child {
		flex: 0 0 100%;
		align-items: center;
		width: 100%;
		/* Padding kiri-kanan poin pertama dan terakhir ikut disebut ulang.
		   Di layar lebar keduanya sengaja rata dengan tepi isi halaman, dan
		   aturan itu lebih kuat daripada aturan poin biasa - kalau tidak ditulis
		   ulang di sini, slide pertama menempel ke tepi layar sedangkan slide di
		   tengah tidak. */
		padding: 0 var(--ds-pad);
		text-align: center;
		scroll-snap-align: center;
	}

	.ds-trust__dots {
		display: flex;
	}

	/* Mozaik kategori juga menjadi geseran.
	 *
	 * Delapan kotak setinggi 246px dua per baris berarti empat baris yang harus
	 * dilewati. Digeser menyamping, kedelapannya memakan tinggi satu kotak.
	 *
	 * Lebar kotaknya 78% layar supaya kotak berikutnya selalu terlihat
	 * sepotong - itulah yang memberi tahu bahwa daftarnya masih berlanjut ke
	 * kanan, tanpa perlu tulisan atau panah. */
	.ds-categories__grid {
		display: flex;
		gap: 14px;
		margin-right: calc(var(--ds-pad) * -1);
		padding-right: var(--ds-pad);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ds-categories__grid::-webkit-scrollbar {
		display: none;
	}

	.ds-categories__grid > .ds-tile {
		flex: 0 0 78%;
		height: 210px;
		scroll-snap-align: start;
	}

	/* Isi kotak ikut naik: tinggi kotaknya berkurang 36px, dan tanpa ini
	   judulnya tetap duduk di 160px - yaitu di luar kotaknya. */
	.ds-tile__body {
		top: auto;
		bottom: 0;
	}
}

/* Tablet (600-899px): pita jaminan menjadi kotak 2x2, bukan geseran.
 *
 * Geseran satu-poin-per-layar dibuat untuk ponsel. Di tablet ia menyisakan
 * ruang kosong lebar di kiri-kanan satu poin, dan tiga poin lainnya
 * tersembunyi di balik titik. Dua kolom muat dengan lega, jadi keempatnya
 * langsung terbaca. Batas layar untuk penggeraknya (data-ds-trust-mq di
 * template-parts/home/trust-bar.php) ikut diturunkan ke 599px, supaya
 * pergantian otomatisnya tidak berjalan di sini. */
@media (min-width: 600px) and (max-width: 899px) {
	.ds-trust__inner {
		flex-wrap: wrap;
		row-gap: 28px;
		padding: 34px var(--ds-pad);
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.ds-trust__item,
	.ds-trust__item:first-child,
	.ds-trust__inner > .ds-trust__item:last-child {
		flex: 0 0 50%;
		width: 50%;
		padding: 0 16px;
	}

	.ds-trust__divider,
	.ds-trust__dots {
		display: none;
	}
}

/* ============ 29. Panel Masuk dan tombol WhatsApp di layar ponsel */

@media (max-width: 599px) {
	/* CATATAN: sejak tombol akun disembunyikan dari header ponsel (bagian 27),
	 * panel ini tidak lagi muncul di ponsel - masuk dilakukan lewat halaman
	 * akun dari bilah bawah. Aturannya sengaja ditinggalkan: kalau suatu saat
	 * tombol akun dikembalikan ke header, tanpa aturan ini panelnya akan
	 * terpotong lagi persis seperti dulu.
	 *
	 * Panel Masuk dilepas dari tombolnya dan ditambatkan ke layar.
	 *
	 * Kartunya selebar 320px dan digantung dari tepi KANAN tombol akun -
	 * padahal di ponsel tombol itu bukan yang paling kanan: ikon wishlist dan
	 * keranjang masih ada di sebelahnya. Kartu selebar 320 yang tepi kanannya
	 * berhenti 80px dari tepi layar berarti 40px sisi kirinya keluar dari
	 * layar, dan di situlah label serta isian formulirnya terpotong.
	 *
	 * position: fixed melepaskan lebarnya dari posisi tombol: kartunya kini
	 * mengambil lebar layar dikurangi 12px di kiri dan kanan, berapa pun lebar
	 * ponselnya. Ia ditambatkan di bawah supaya berada dekat ibu jari, dan
	 * duduk persis di atas bilah navigasi. */
	.ds-dd {
		position: fixed;
		top: auto;
		right: 12px;
		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
		left: 12px;
		z-index: 80;
		width: auto;
		/* Formulir masuk lebih tinggi daripada layar ponsel yang pendek, jadi
		   isinya digulir di dalam kartunya sendiri - bukan meluber keluar. */
		max-height: min(76vh, 560px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* Tombol WhatsApp bisa dipindahkan sendiri oleh pengunjung.
 *
 * Di tempat tetapnya, ia menutupi sudut kanan bawah - persis tempat tombol
 * "Masukkan keranjang" pada kartu terakhir, dan tempat tombol berikutnya di
 * halaman checkout. Sekarang ia bisa diseret ke mana saja, dan posisinya
 * diingat di peramban pengunjung itu sendiri.
 *
 * touch-action: none wajib ada. Tanpa itu, peramban memperlakukan sentuhan di
 * atas tombol sebagai awal menggulir halaman dan langsung merebut sentuhannya,
 * jadi pointermove tidak pernah sampai ke skrip. */
.ds-fab {
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Menyingkir selama ada tombol lain di bawahnya (baris bagikan di halaman
   produk) - diatur initFab() di main.js. visibility ikut dimatikan supaya
   tombol yang tak terlihat juga tidak bisa ditekan atau difokus. */
.ds-fab {
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ds-fab.is-tucked {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ds-fab.is-dragging {
	cursor: grabbing;
	transition: none;
	opacity: 0.92;
}

/* ================================ 30. Dasbor akun di layar ponsel */

@media (max-width: 767px) {
	/* Tiga kartu angka tetap berdampingan, hanya mengecil.
	 *
	 * Ditumpuk satu per baris, ketiganya memakan 330px tinggi layar untuk
	 * menyampaikan tiga angka - dan pesanan terakhir, yang justru alasan orang
	 * membuka dasbor, terdorong keluar layar. Berdampingan, ketiganya cukup
	 * 90px dan tetap terbaca. */
	.ds-dash__stats {
		/* Di ponsel empat kotak berdampingan terlalu sempit untuk angka
		   ribuan; dua baris berisi dua kotak lebih terbaca. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* Tanpa poin tinggal tiga kotak: tetap satu baris berdampingan. */
	.ds-dash__stats:not(:has(.ds-dash__stat--poin)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ds-dash__stat {
		gap: 4px;
		padding: 12px 10px;
	}

	.ds-dash__angka {
		font-size: 22px;
		line-height: 28px;
	}

	.ds-dash__label {
		font-size: 10.5px;
		line-height: 15px;
	}

	.ds-od__card {
		padding: 16px;
	}

	.ds-od__head {
		margin-bottom: 14px;
	}

	/* Setiap baris daftar menjadi kartu kecil dua kolom.
	 *
	 * Lima kolom - nomor, tanggal, status, total, "Detail" - berdiri sebaris
	 * pada layar 360px berarti nomor pesanannya sendiri sudah terpotong. Sebagai
	 * kartu, keduanya terbaca: nomor dan tanggal di baris atas, status dan total
	 * di baris bawah, dan kanan-kirinya sejajar antar kartu. */
	.ds-dash__list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.ds-dash__row,
	.ds-dash__pay,
	.ds-dash__wish {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px 10px;
		align-items: center;
		padding: 12px;
		background: rgba(255, 255, 255, 0.035);
		border: 1px solid var(--ds-border);
		border-radius: 10px;
	}

	/* Baris terakhir tidak lagi perlu dikecualikan.
	 *
	 * Sebagai baris, ia sengaja kehilangan padding dan garis bawahnya supaya
	 * daftarnya tidak berakhir dengan garis menggantung. Sebagai kartu, aturan
	 * itu justru menghapus satu sisi kotaknya - jadi keduanya dikembalikan di
	 * sini. Ditulis dengan selektor yang sama persis, karena selektor itu lebih
	 * kuat daripada nama kartunya sendiri. */
	.ds-dash__list > *:last-child {
		padding-bottom: 12px;
		border-bottom: 1px solid var(--ds-border);
	}

	.ds-dash__tgl,
	.ds-dash__tot {
		justify-self: end;
		margin-left: 0;
		text-align: right;
	}

	.ds-dash__st {
		margin-left: 0;
	}

	.ds-dash__wname {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* "Detail" dilepas: seluruh kartunya memang satu tautan, jadi kata itu
	   cuma mengambil satu baris untuk mengulang apa yang sudah bisa dilakukan
	   dengan mengetuk di mana saja. */
	.ds-dash__arrow {
		display: none;
	}

	/* Tombol Bayar mengambil baris sendiri selebar kartu - sasaran sentuh yang
	   jelas, dan tidak berdesakan dengan angka total di sebelahnya. */
	.ds-dash__pay .ds-ord__btn {
		grid-column: 1 / -1;
		/* Tombolnya inline-flex, jadi teksnya dipusatkan lewat justify-content -
		   text-align tidak menggerakkan apa pun di dalam kotak flex. */
		justify-content: center;
		width: 100%;
	}
}

/* ==================================== 31. Sapuan akhir layar ponsel */

@media (max-width: 899px) {
	/* Logo footer disamakan dengan logo header: 56px, angka yang sama persis
	   dengan .ds-header__brand img. Di layar lebar logo footer memang sengaja
	   lebih besar - ia berdiri sendiri di kolom pertama footer. Di ponsel kolom
	   itu selebar layar, dan logo setinggi 96px di sana berdiri lebih besar
	   daripada seluruh tulisan di bawahnya. */
	.ds-footer__brand img {
		max-width: 100%;
		max-height: 84px;
	}

	/* Ruang untuk bilah navigasi dipindahkan ke footer, bukan ke baris hak
	   cipta.
	 *
	 * Baris hak cipta hanya muncul kalau pemilik toko mengisinya. Selama
	 * ruangnya menempel di sana, satu kolom kosong di setelan berarti bilah
	 * bawah menutupi baris terakhir footer di seluruh halaman situs. */
	.ds-footer {
		padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	}

	.ds-footer__legal {
		padding-right: 0;
		padding-bottom: 0;
	}
}

@media (max-width: 599px) {
	/* Setiap kolom isian minimal 16px.
	 *
	 * Di bawah 16px, Safari iOS memperbesar seluruh halaman begitu kolomnya
	 * disentuh - dan setelah selesai mengetik, halamannya tetap membesar.
	 * Pengunjung harus mencubit layar untuk kembali, di tengah mengisi alamat
	 * pengiriman. Angka 16 bukan pilihan gaya; itu ambang yang dipakai Safari
	 * untuk memutuskan perlu-tidaknya memperbesar. */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px;
	}

	/* Judul halaman ikut turun satu tingkat. 30px di layar 360px berarti judul
	   seperti "Kebijakan Privasi" memakan tiga baris sebelum isinya mulai. */
	.ds-pagehead__title {
		font-size: 24px;
	}

	.ds-pagehead__sub {
		font-size: 13.5px;
	}
}

/* ============================ 32. Halaman satu produk di layar ponsel */

@media (max-width: 599px) {
	/* Foto produk dipendekkan dari bujur sangkar menjadi 4:3.
	 *
	 * Bujur sangkar selebar layar berarti foto setinggi 342px di ponsel 390px -
	 * ditambah thumbnail, chip, dan judul, harga produknya sendiri baru terlihat
	 * setelah menggulir. Padding 16px di dalamnya juga dipangkas: dengan
	 * object-fit: contain, padding itu ruang kosong dua kali - fotonya sudah
	 * menyisakan ruangnya sendiri di dalam kotak. */
	.ds-gallery__stage img {
		aspect-ratio: 4 / 3;
		padding: 8px;
	}

	.ds-gallery__thumb {
		flex: 0 0 56px;
	}

	.ds-gallery__thumbs {
		gap: 10px;
	}

	.ds-product-page {
		gap: 18px;
	}

	/* Judul dan harga turun satu tingkat. 30px dan 32px adalah ukuran untuk
	   kolom selebar 600px di desktop; di layar 390px keduanya memakan empat
	   baris untuk dua keterangan. */
	.ds-product-page__title {
		margin-top: 10px;
		font-size: 22px;
	}

	.ds-pd__price {
		font-size: 26px;
	}

	.ds-pd__pricebox {
		padding: 14px 0;
	}

	.ds-pd__lead {
		font-size: 13.5px;
	}

	.ds-pd__chip {
		padding: 5px 10px;
		font-size: 10.5px;
	}

	/* Kolom label 130px menyisakan 180px untuk isinya - cukup untuk "Tersedia",
	   tidak cukup untuk daftar kategori yang dipisah koma. */
	.ds-pd__facts {
		grid-template-columns: 96px minmax(0, 1fr);
		font-size: 12.5px;
	}
}

/* ================================= 33. Voucher: daftar yang bisa dipilih */

/* Kolom ketik kupon SELALU disembunyikan - pembeli tidak mengetik kode
 * voucher, keputusan pemilik toko. Kolomnya hanya perantara tersembunyi yang
 * diisi saat "Pakai" ditekan di daftar voucher (lihat woocommerce/cart/cart.php).
 *
 * Dulu kolom ini baru disembunyikan setelah JavaScript memasang tombol "Pilih
 * voucher" (.is-picker), dan kalau daftar voucher kosong tombol itu tidak
 * dipasang - kolom ketiknya muncul lagi.
 *
 * Selektornya sepanjang ini karena harus mengalahkan aturan yang memberi kolom
 * itu lebar 370px di bagian 18 - aturan itu menyebut lima class, dan yang lebih
 * pendek darinya kalah berapa pun urutannya di berkas. [data-ds-coupon] menambah
 * satu tingkat supaya aturan layar kecil di bagian akhir berkas juga kalah. */
.ds-cart table.ds-cart__table td.actions .ds-cart__coupon[data-ds-coupon] input.input-text,
.ds-cart table.ds-cart__table td.actions .ds-cart__coupon[data-ds-coupon] button.ds-cart__coupbtn,
.ds-cart__coupon[data-ds-coupon] input.input-text,
.ds-cart__coupon[data-ds-coupon] .ds-cart__coupbtn {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ds-cart__voucherbtn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	height: 50px;
	padding: 0 22px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.12);
	border: 1px solid rgba(70, 188, 145, 0.5);
	border-radius: 10px;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.ds-cart__voucherbtn:hover {
	color: var(--ds-white);
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

/* Pengganti tombol "Pilih voucher" saat belum ada voucher yang bisa dipakai.
   Tingginya disamakan dengan tombol itu, supaya baris di bawah daftar barang
   tidak berubah ukuran saat voucher muncul atau habis. */
.ds-cart__novoucher {
	display: flex;
	align-items: center;
	min-height: 50px;
	margin: 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--ds-text-2);
}

/* ---- Jendela daftar voucher ---- */

.ds-vou[hidden] {
	display: none;
}

.ds-vou {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.ds-vou__scrim {
	position: absolute;
	inset: 0;
	background: rgba(4, 8, 10, 0.72);
}

.ds-vou__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(520px, 100%);
	max-height: min(80vh, 620px);
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 16px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.ds-vou__head {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--ds-border);
}

.ds-vou__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ds-text);
}

.ds-vou__x {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--ds-text-2);
	background: none;
	border: 1px solid var(--ds-border);
	border-radius: 10px;
	cursor: pointer;
}

.ds-vou__x:hover {
	color: var(--ds-text);
	border-color: var(--ds-border-strong);
}

.ds-vou__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ds-vou__item {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px;
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 12px;
}

/* Voucher yang belum memenuhi syarat tetap terbaca, hanya lebih redup.
 *
 * Kalau ia dibuat samar sampai hampir hilang, alasannya - "belanja minimal
 * sekian" - ikut hilang, dan justru alasan itulah satu-satunya hal berguna
 * pada baris yang belum bisa ditekan. */
.ds-vou__item.is-off {
	background: transparent;
	border-style: dashed;
}

.ds-vou__item.is-off .ds-vou__amount,
.ds-vou__item.is-off .ds-vou__code {
	color: var(--ds-text-3);
}

.ds-vou__item.is-on {
	border-color: rgba(70, 188, 145, 0.6);
	background: rgba(46, 158, 119, 0.1);
}

.ds-vou__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ds-vou__amount {
	font-size: 15px;
	font-weight: 700;
	color: var(--ds-text);
}

/* Kodenya digambar seperti kode: satu spasi huruf lebih lebar dan huruf
   kapital, supaya bisa dibaca ulang dan diketik ulang tanpa salah. */
.ds-vou__code {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
}

.ds-vou__desc,
.ds-vou__until {
	font-size: 12.5px;
	line-height: 18px;
	color: var(--ds-text-2);
}

.ds-vou__until {
	color: var(--ds-text-3);
}

/* "Syarat: khusus pelanggan lama · minimal belanja Rp200.000". Tertulis di
   setiap voucher - lihat deepstrike_coupon_requirements(). */
.ds-vou__req {
	font-size: 12.5px;
	line-height: 18px;
	color: var(--ds-chrome-350);
}

.ds-vou__why {
	font-size: 12.5px;
	line-height: 18px;
	color: var(--ds-danger-300);
}

.ds-vou__use {
	flex: none;
	margin-left: auto;
	padding: 10px 18px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 0;
	border-radius: 9px;
	cursor: pointer;
}

.ds-vou__use:hover:not([disabled]) {
	background: var(--ds-accent-600);
}

.ds-vou__use[disabled] {
	color: var(--ds-text-3);
	background: #24333a;
	cursor: not-allowed;
}

.ds-vou__badge {
	flex: none;
	margin-left: auto;
	padding: 8px 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.16);
	border: 1px solid rgba(70, 188, 145, 0.45);
	border-radius: 999px;
}

/* Halaman di belakang jendela tidak ikut bergulir saat jari menyapu di atas
   daftar voucher. */
body.ds-noscroll {
	overflow: hidden;
}

@media (max-width: 599px) {
	/* Di ponsel jendelanya menempel ke dasar layar, bukan melayang di tengah:
	   di sanalah ibu jari berada, dan daftar yang panjang tetap punya tempat
	   tumbuh ke atas. */
	.ds-vou {
		align-items: flex-end;
		padding: 0;
	}

	.ds-vou__panel {
		width: 100%;
		max-height: 78vh;
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: 16px 16px 0 0;
	}

	.ds-vou__item {
		flex-wrap: wrap;
	}

	.ds-vou__use,
	.ds-vou__badge {
		flex: 1 1 100%;
		margin-left: 0;
		text-align: center;
	}

	.ds-cart__voucherbtn {
		width: 100%;
		justify-content: center;
	}
}

/* ========================================================== 34. Combo Hemat */

/* ---- Baris penanda di bawah harga ----
 *
 * Bentuknya tautan selebar panel harga, bukan tombol: fungsinya menunjuk ke
 * section di bawah, bukan membeli. Garis putus-putus membedakannya dari panel
 * harga di atasnya tanpa menambah satu kotak padat lagi ke kolom yang sudah
 * penuh kotak. */
.ds-combo-hint {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
	margin-top: 12px;
	padding: 12px 16px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ds-text);
	background: rgba(46, 158, 119, 0.08);
	border: 1px dashed rgba(70, 188, 145, 0.55);
	border-radius: 12px;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.ds-combo-hint:hover {
	color: var(--ds-text);
	background: rgba(46, 158, 119, 0.14);
	border-color: var(--ds-accent-line);
}

.ds-combo-hint__icon,
.ds-combo-hint__arrow {
	flex: none;
	display: inline-flex;
	color: var(--ds-accent-300);
}

.ds-combo-hint__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-combo-hint__text strong {
	color: var(--ds-accent-300);
}

/* Gulir ke section combo berhenti di bawah header yang menempel, bukan di
   baliknya. */
#ds-combo {
	scroll-margin-top: calc(var(--ds-header-top) + var(--ds-header-bar) + 16px);
}

/* ---- Section di halaman produk ---- */

.ds-combo {
	padding: 64px 0 0;
}

.ds-combo .ds-section__head {
	margin-bottom: 22px;
}

.ds-combo .ds-section__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.ds-combo__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Kolom produk selebar isinya, dan panel harga paling lebar 420px.
 *
 * Panel yang mengambil seluruh sisa lebar melar sampai 760px pada combo dua
 * produk - isinya cuma harga, dua baris keterangan, dan satu tombol, jadi yang
 * terlihat adalah kotak besar yang hampir kosong. Sisa ruangnya dibiarkan di
 * kanan; susunannya tetap terbaca dari kiri: produk, lalu harganya. */
.ds-combo__item {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(320px, 420px);
	justify-content: start;
	gap: 24px;
	align-items: stretch;
}

.ds-combo__prods {
	display: flex;
	gap: 12px;
	align-items: center;
	min-width: 0;
}

/* Lebar eksplisit, bukan hanya angka dasar flex. Lebar "sesuai isi" kolom
   grid dihitung dari lebar isi kartu - panjang nama produknya - bukan dari
   flex-basis, jadi tanpa width kartunya menyusut sampai selebar judulnya.
   flex-shrink tetap 1: combo empat produk boleh mengecil supaya muat. */
.ds-combo__prod {
	flex: 0 1 260px;
	width: 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	overflow: hidden;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
}

.ds-combo__prod.is-current {
	border-color: rgba(70, 188, 145, 0.6);
}

/* Produk yang tidak dicentang tetap terlihat, hanya diredupkan: pembeli harus
   tetap bisa melihat apa yang ia lepas dan mencentangnya kembali. */
.ds-combo__prod.is-off {
	opacity: 0.5;
	border-color: var(--ds-border);
}

/* Foto persegi di latar putih, sama seperti kartu produk: foto katalog
   biasanya berlatar putih, dan menaruhnya di latar gelap membuat tepinya
   terlihat seperti kotak yang ditempel. */
.ds-combo__media {
	position: relative;
	aspect-ratio: 1 / 1;
	margin: 10px 10px 0;
	overflow: hidden;
	background: var(--ds-white);
	border-radius: 8px;
}

/* Kotak centang di sudut foto. Labelnya sengaja lebih besar dari kotaknya
   supaya mudah diketuk jempol. */
.ds-combo__pick {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	cursor: pointer;
}

.ds-combo__pick input {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--ds-accent);
	cursor: pointer;
}

.ds-combo__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ds-combo__meta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px 14px;
}

.ds-combo__tag {
	align-self: flex-start;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.14);
	border-radius: 999px;
}

.ds-combo__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ds-text);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

a.ds-combo__name:hover {
	color: var(--ds-accent-300);
}

.ds-combo__price {
	margin-top: auto;
	font-size: 14px;
	color: var(--ds-text-2);
}

.ds-combo__plus {
	flex: none;
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	color: var(--ds-text-3);
}

/* ---- Panel harga combo ---- */

.ds-combo__panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-lg);
}

.ds-combo__kicker {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ds-gold);
}

.ds-combo__priceline {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
}

.ds-combo__total {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ds-text);
}

.ds-combo__normal {
	font-size: 15px;
	color: var(--ds-text-3);
}

.ds-combo__save {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ds-accent-300);
}

.ds-combo__points {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 4px 0 6px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ds-chrome-350);
}

.ds-combo__points li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.ds-combo__points .ds-icon {
	flex: none;
	margin-top: 1px;
	color: var(--ds-accent-300);
}

/* Padding samping tombol utama (34px) terlalu lebar untuk kalimat empat kata
   di panel 340px: tulisannya patah jadi dua baris. */
.ds-combo__need,
.ds-combo__block {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ds-gold);
}

.ds-combo__add:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ds-combo__add {
	width: 100%;
	margin-top: auto;
	padding-right: 16px;
	padding-left: 16px;
	letter-spacing: 0.8px;
	cursor: pointer;
}

.ds-combo__add.is-loading,
.ds-combo-cart__add.is-loading {
	opacity: 0.65;
	cursor: progress;
}

/* ---- Saran di keranjang ---- */

.ds-combo-cart {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.ds-combo-cart__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
	background: rgba(46, 158, 119, 0.08);
	border: 1px dashed rgba(70, 188, 145, 0.55);
	border-radius: var(--ds-radius);
}

.ds-combo-cart__title {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-combo-cart__title strong {
	color: var(--ds-accent-300);
}

.ds-combo-cart__need {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ds-text-2);
}

.ds-combo-cart__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.ds-combo-cart__list li {
	display: flex;
	gap: 12px;
	align-items: center;
}

.ds-combo-cart__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	color: var(--ds-text);
}

.ds-combo-cart__price {
	flex: none;
	font-size: 14px;
	color: var(--ds-text-2);
}

.ds-combo-cart__add {
	flex: none;
	height: 36px;
	padding: 0 16px;
	font-size: 13.5px;
	cursor: pointer;
}

/* Alasan combo tidak dipasang, di ringkasan keranjang dan pembayaran. */
.ds-combo-note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ds-gold);
}

/* Label kecil di bawah nama barang keranjang yang sedang memberi potongan. */
.ds-combo-chip {
	display: inline-block;
	margin: 4px 0 2px;
	padding: 1px 8px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 18px;
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.14);
	border-radius: 999px;
}

/* ---- Layar sedang dan ponsel ---- */

@media (max-width: 991px) {
	.ds-combo__item {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 599px) {
	.ds-combo {
		padding-top: 44px;
	}

	.ds-combo .ds-section__title {
		font-size: 20px;
		line-height: 28px;
	}

	/* Di ponsel isi combo ditumpuk sebagai baris: foto kecil di kiri, nama
	   dan harga di kanan. Dua sampai empat kartu persegi berjajar di layar
	   360px akan menyisakan foto sebesar prangko. */
	.ds-combo__prods {
		flex-direction: column;
		gap: 6px;
		align-items: stretch;
	}

	/* flex: none, bukan 260px: di tumpukan tegak angka dasar itu akan
	   berlaku sebagai tinggi kartu. */
	.ds-combo__prod {
		flex: none;
		width: auto;
		flex-direction: row;
		align-items: center;
	}

	.ds-combo__media {
		flex: none;
		width: 72px;
		margin: 8px 0 8px 8px;
	}

	.ds-combo__meta {
		padding: 8px 12px;
	}

	.ds-combo__price {
		margin-top: 0;
	}

	.ds-combo__plus {
		align-self: center;
		font-size: 20px;
	}

	.ds-combo__panel {
		padding: 20px;
	}

	.ds-combo__total {
		font-size: 24px;
	}

	.ds-combo-cart__item {
		padding: 14px 16px;
	}

	.ds-combo-cart__list li {
		flex-wrap: wrap;
		gap: 4px 12px;
	}

	.ds-combo-cart__name {
		flex-basis: 100%;
	}
}

/* =============================== 35. Tombol dan kolom isian di layar ponsel */

/*
 * Tinggi tombol dan kolom isian di desktop - 50 sampai 56px - dirancang untuk
 * kursor di layar lebar. Di layar 390px ukuran yang sama memakan seperempat
 * lebar layar per tombol, dan formulir pembayaran jadi tiga kali lebih panjang
 * digulir. Di sini semuanya turun ke 44px: ukuran terkecil yang masih nyaman
 * diketuk jempol menurut pedoman Apple dan Google. Lebih kecil dari itu,
 * tombol mulai sering meleset.
 *
 * Ukuran huruf kolom isian sengaja tidak diturunkan di bawah 15px. Safari di
 * iPhone memperbesar seluruh halaman setiap kali pembeli mengetuk kolom yang
 * hurufnya lebih kecil, dan halaman yang tiba-tiba membesar terasa rusak.
 *
 * Selektornya disalin persis dari aturan aslinya, dan bagian ini sengaja
 * ditaruh paling akhir berkas: dengan kekhususan yang sama, aturan yang datang
 * belakangan yang menang. Kalau selektor asli di atas diubah, ubah juga di sini.
 */

@media (max-width: 599px) {

	/* ---- Tombol ---- */

	.ds-btn--primary {
		padding: 10px 20px;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 0.9px;
	}

	.ds-btn--ghost,
	.ds-empty__actions .ds-btn,
	.ds-dd input[type="submit"] {
		height: 42px;
		padding: 0 18px;
		font-size: 14px;
	}

	.ds-round-btn {
		width: 40px;
		height: 40px;
	}

	.ds-product-page__buy button.button.single_add_to_cart_button,
	.ds-product-page__buy button.button.single_add_to_cart_button.alt,
	.ds-product-page__buy button.single_add_to_cart_button,
	.ds-buy-now {
		height: 44px;
		padding: 0 16px;
		font-size: 13.5px;
	}

	.ds-sum__go a.checkout-button,
	.ds-sum__go a.checkout-button.button.alt,
	.ds-shop-page--checkout #payment button#place_order,
	.ds-shop-page--checkout #payment button.button.alt#place_order,
	.ds-auth__card .ds-auth__btn,
	.ds-auth__card button.button.ds-auth__btn,
	.ds-auth__card a.ds-auth__btn,
	.ds-done__btn,
	.ds-wl .ds-wl__all,
	.ds-pg__btn {
		height: 44px;
		font-size: 14px;
	}

	.ds-cart table.ds-cart__table td.actions button.ds-cart__coupbtn,
	.ds-cart__voucherbtn,
	.ds-ck__side .ds-cpn__pick,
	.ds-wl__act .ds-wl__add {
		height: 42px;
		font-size: 13.5px;
	}

	/* Penambah jumlah: tombol - dan + ikut mengecil bersama kolom angkanya,
	   supaya ketiganya tetap satu baris yang rata. */
	.ds-qty__btn,
	.ds-qty input.qty {
		height: 42px;
	}

	/* ---- Kolom isian ---- */

	.ds-shop-page--checkout form.checkout .form-row input.input-text,
	.ds-shop-page--checkout form.checkout .form-row select,
	.ds-shop-page--checkout form.checkout .select2-container .select2-selection--single,
	.ds-shop-page--checkout form.checkout .form-row strong,
	.ds-cart table.ds-cart__table td.actions .ds-cart__coupon input.input-text,
	.ds-auth__card input.input-text,
	.ds-auth__card input[type="text"],
	.ds-auth__card input[type="email"],
	.ds-auth__card input[type="password"],
	.ds-acct__form .ds-acct__field input,
	.ds-acct__form .ds-acct__field select {
		height: 44px;
		font-size: 15px;
	}

	/* Kotak catatan pesanan tidak ikut aturan di atas - ia memang perlu
	   beberapa baris - cukup dipendekkan sedikit. */
	.ds-shop-page--checkout form.checkout .form-row textarea {
		height: 88px;
	}
}

/* ======================================= 36. Pemilih alamat lewat peta */

/* Dua tombol di atas kolom alamat: "Gunakan lokasi saat ini" dan "Pilih di
   peta". Satu terisi, satu bergaris - yang terisi adalah jalan tercepat, dan
   dua tombol yang sama beratnya membuat orang berhenti untuk memilih. */
.ds-map {
	margin: 0 0 18px;
}

.ds-map__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ds-map__btn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 1px solid var(--ds-accent);
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ds-map__btn:hover {
	background: var(--ds-accent-600);
	border-color: var(--ds-accent-600);
}

.ds-map__btn--line {
	color: var(--ds-accent-300);
	background: transparent;
	border-color: rgba(70, 188, 145, 0.55);
}

.ds-map__btn--line:hover {
	color: var(--ds-white);
	background: rgba(46, 158, 119, 0.16);
}

.ds-map__panel {
	margin-top: 14px;
	padding: 14px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: 14px;
}

.ds-map__panel[hidden] {
	display: none;
}

/* Kotak pencarian Google adalah elemen buatan Google dengan gayanya sendiri.
   Yang diatur di sini cuma lebarnya dan jaraknya ke peta di bawahnya. */
.ds-map__search gmp-place-autocomplete,
.ds-map__search gmp-placeautocomplete {
	display: block;
	width: 100%;
	margin-bottom: 12px;
	color-scheme: light;
}

.ds-map__canvas {
	position: relative;
	height: 300px;
	overflow: hidden;
	background: var(--ds-bg-2);
	border-radius: 10px;
}

.ds-map__view {
	position: absolute;
	inset: 0;
}

/* Penanda tetap di tengah. Ujung lancipnya - bukan titik tengah gambarnya -
 * yang harus jatuh tepat di titik tengah peta, karena ujung itulah yang
 * dibaca pembeli sebagai "di sini". Jadi gambarnya digeser naik setinggi
 * dirinya sendiri, dan titik pusat peta berada di ujung bawahnya.
 *
 * pointer-events: none supaya jari yang kebetulan menyentuh penanda tetap
 * menggeser petanya. */
.ds-map__pin {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 30px;
	height: 30px;
	margin: -30px 0 0 -15px;
	pointer-events: none;
	background: var(--ds-danger);
	border: 3px solid var(--ds-white);
	border-radius: 50% 50% 50% 0;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
	transform: rotate(-45deg);
	transform-origin: 50% 50%;
}

.ds-map__preview {
	min-height: 22px;
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 21px;
	color: var(--ds-text);
}

.ds-map__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.ds-map__use,
.ds-map__close {
	height: 44px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;
}

.ds-map__use {
	color: var(--ds-white);
	background: var(--ds-accent);
	border: 0;
}

.ds-map__use:hover:not([disabled]) {
	background: var(--ds-accent-600);
}

.ds-map__use[disabled] {
	color: var(--ds-text-3);
	background: #24333a;
	cursor: not-allowed;
}

.ds-map__close {
	color: var(--ds-text-2);
	background: transparent;
	border: 1px solid var(--ds-border-strong);
}

.ds-map__close:hover {
	color: var(--ds-text);
}

.ds-map__msg {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--ds-accent-300);
}

.ds-map__msg[hidden] {
	display: none;
}

/* Pengingat untuk admin kalau kunci API belum diisi. Bergaris putus supaya
   jelas terbaca sebagai catatan, bukan bagian formulir. */
.ds-map__note {
	margin: 0 0 16px;
	padding: 10px 14px;
	font-size: 12.5px;
	line-height: 19px;
	color: var(--ds-text-2);
	border: 1px dashed var(--ds-border-strong);
	border-radius: 10px;
}

@media (max-width: 599px) {
	.ds-map__btn,
	.ds-map__use,
	.ds-map__close {
		flex: 1 1 100%;
	}

	.ds-map__canvas {
		height: 260px;
	}
}

/* Tombol peta di halaman pembayaran berdiri di barisnya sendiri, di antara
   email dan negara (priority 30 - lihat inc/shop-pages/address-map.php).
   Jarak antar-barisnya sudah diurus grid formulir, jadi margin bawaan
   pemilihnya dilepas. */
.ds-shop-page--checkout form.checkout #billing_ds_map_field .ds-map,
.ds-shop-page--checkout form.checkout #shipping_ds_map_field .ds-map {
	margin: 0;
}

/* "(opsional)" pada Nomor WhatsApp disembunyikan atas permintaan pemilik
   toko - kolomnya tetap tidak wajib. Disembunyikan lewat CSS, bukan dibuang
   di PHP: skrip alamat WooCommerce memasang tulisan itu kembali di peramban
   setiap kali negara berubah. */
.ds-shop-page--checkout form.checkout #billing_phone_field .optional,
.ds-shop-page--checkout form.checkout #shipping_phone_field .optional {
	display: none;
}

/* ======================================= 37. Rekomendasi untuk Anda */

/* Kalimat untuk pembeli yang belum punya riwayat: menjelaskan kenapa isinya
   masih produk terlaris. Warna teks kedua, bukan aksen - ini keterangan,
   bukan ajakan. */
.ds-foryou__note {
	margin: -8px 0 20px;
	max-width: 720px;
	font-size: 14px;
	line-height: 22px;
	color: var(--ds-text-2);
}

/* ======================================= 38. Flash Sale */

/* Satu-satunya section beranda yang dibungkus kotak, dan bingkainya hidup:
   dua berkas cahaya merah-emas berkeliling tanpa henti, masing-masing di
   sisi yang berseberangan, dengan pendar samar di luar bingkai. Merah
   (--ds-danger) di situs ini sudah berarti "potongan harga" lewat lencana
   diskon, jadi kotak ini langsung terbaca sebagai promo.

   CARA KERJANYA - TIGA LAPIS DI BELAKANG ISI KOTAK

     .ds-flash__glow   cahaya berputar yang sama, dikaburkan: pendar di luar
     ::before          cahaya berputar tajam di atas garis merah redup
     ::after           latar gelap kotak, 1,5px lebih kecil dari ::before -
                       yang tersisa dari ::before hanya tepinya, jadi itulah
                       bingkainya

   Yang berputar bukan elemennya, melainkan sudut gradasinya
   (--ds-flash-angle, didaftarkan dengan @property supaya bisa dianimasikan).
   Cara lama memutar kotak gradasi raksasa selebar ribuan piksel - berat
   untuk ponsel. Peramban yang belum mengenal @property tetap menampilkan
   bingkai dengan cahaya diam, bukan kotak rusak. */
@property --ds-flash-angle {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

@keyframes ds-flash-spin {
	to {
		--ds-flash-angle: 360deg;
	}
}

.ds-flash__box {
	--ds-flash-light: conic-gradient(
		from var(--ds-flash-angle),
		transparent 0deg,
		transparent 25deg,
		var(--ds-danger) 70deg,
		var(--ds-gold) 88deg,
		transparent 92deg,
		transparent 205deg,
		var(--ds-danger) 250deg,
		var(--ds-gold) 268deg,
		transparent 272deg
	);
	position: relative;
	padding: 28px 28px 30px;
	border-radius: var(--ds-radius-lg);
	box-shadow: 0 24px 60px -32px rgba(217, 72, 59, 0.7);
	isolation: isolate;
	animation: ds-flash-spin 8s linear infinite;
}

.ds-flash__glow {
	position: absolute;
	inset: 0;
	z-index: -3;
	border-radius: inherit;
	background: var(--ds-flash-light);
	filter: blur(14px);
	opacity: 0.55;
	pointer-events: none;
}

.ds-flash__box::before,
.ds-flash__box::after {
	content: "";
	position: absolute;
	border-radius: inherit;
	pointer-events: none;
}

.ds-flash__box::before {
	inset: 0;
	z-index: -2;
	/* Lapis bawah merah redup: bingkai tetap terlihat di sela dua berkas
	   cahaya. */
	background: var(--ds-flash-light), rgba(217, 72, 59, 0.35);
}

.ds-flash__box::after {
	inset: 1.5px;
	z-index: -1;
	border-radius: calc(var(--ds-radius-lg) - 1.5px);
	background:
		radial-gradient(120% 160% at 0% 0%, rgba(217, 72, 59, 0.24) 0%, rgba(217, 72, 59, 0) 55%),
		linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg-1) 100%);
}

.ds-flash__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-bottom: 22px;
}

.ds-flash__brand {
	display: grid;
	gap: 10px;
	margin-right: auto;
}

.ds-flash__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: max-content;
	padding: 6px 12px 6px 10px;
	border-radius: 999px;
	background: var(--ds-danger);
	color: var(--ds-white);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ds-flash__badge .ds-icon {
	color: var(--ds-gold);
	animation: ds-flash-pulse 1.4s ease-in-out infinite;
}

@keyframes ds-flash-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.55;
		transform: scale(0.85);
	}
}

.ds-flash__title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ds-text);
}

.ds-flash__timer {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ds-flash__label {
	font-size: 14px;
	color: var(--ds-text-2);
}

.ds-flash__clock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Kotak angka putih di atas latar gelap: bagian paling terang di kotak ini,
   jadi mata langsung jatuh ke sisa waktunya. */
.ds-flash__clock b {
	min-width: 44px;
	padding: 8px 6px;
	border-radius: 8px;
	background: var(--ds-white);
	color: var(--ds-bg-0);
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ds-flash__clock i {
	font-style: normal;
	font-weight: 800;
	color: var(--ds-danger-300);
}

.ds-flash__days {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 6px;
}

.ds-flash__days[hidden] {
	display: none;
}

.ds-flash__days small {
	font-size: 13px;
	color: var(--ds-text-2);
}

/* "Segera dimulai": kotaknya sama, tapi lebih tenang - belum ada yang bisa
   dibeli dengan harga flash, jadi belum waktunya berteriak. */
.ds-flash--soon .ds-flash__box {
	--ds-flash-light: conic-gradient(
		from var(--ds-flash-angle),
		transparent 0deg,
		transparent 40deg,
		var(--ds-gold) 88deg,
		transparent 92deg,
		transparent 220deg,
		var(--ds-gold) 268deg,
		transparent 272deg
	);
	box-shadow: none;
	animation-duration: 14s;
}

.ds-flash--soon .ds-flash__glow {
	display: none;
}

.ds-flash--soon .ds-flash__box::before {
	background: var(--ds-flash-light), var(--ds-border-strong);
}

.ds-flash--soon .ds-flash__box::after {
	background:
		radial-gradient(120% 160% at 0% 0%, rgba(232, 181, 74, 0.14) 0%, rgba(232, 181, 74, 0) 55%),
		linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg-1) 100%);
}

.ds-flash--soon .ds-flash__badge {
	background: var(--ds-surface);
	color: var(--ds-gold);
	border: 1px solid var(--ds-border-strong);
}

.ds-flash--soon .ds-flash__clock b {
	background: var(--ds-surface);
	color: var(--ds-text);
	border: 1px solid var(--ds-border);
}

/* Bilah kuota di kartu produk. */
/* Jarak kiri-kanannya sama dengan baris harga di atasnya (14px), dan
   tulisannya ikut di tengah seperti harga. */
.ds-flash-bar {
	display: grid;
	gap: 6px;
	margin-top: 4px;
	padding: 0 14px;
	text-align: center;
}

.ds-flash-bar__track {
	height: 6px;
	border-radius: 999px;
	background: var(--ds-border);
	overflow: hidden;
}

.ds-flash-bar__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ds-danger) 0%, var(--ds-gold) 100%);
}

.ds-flash-bar__text {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-2);
}

.ds-flash--soon .ds-flash-bar__text {
	color: var(--ds-gold);
	font-weight: 600;
}

.ds-flash-bar__text--out {
	color: var(--ds-text-3);
}

@media (prefers-reduced-motion: reduce) {
	.ds-flash__badge .ds-icon,
	.ds-flash__box {
		animation: none;
	}
}

@media (max-width: 767px) {
	.ds-flash__box {
		padding: 22px 16px 20px;
	}

	.ds-flash__title {
		font-size: 22px;
	}

	.ds-flash__timer {
		order: 3;
		width: 100%;
		justify-content: space-between;
	}

	.ds-flash__clock b {
		min-width: 36px;
		font-size: 17px;
	}

	/* Di ponsel kartu digeser dengan jari; tombol panah hanya memakan satu
	   baris sendiri di antara judul dan jam. */
	.ds-flash .ds-carousel__nav {
		display: none;
	}

	.ds-flash__label {
		white-space: nowrap;
	}

	.ds-flash-bar {
		padding: 0 10px;
	}
}

/* ======================================= 39. Hero di layar sempit */

/* Foto hero lebar dipotong kiri-kanannya di layar sempit. Setiap slide
   menyimpan titik tengahnya sendiri (--ds-hero-focus, diatur di blok Slider
   Utama: "Titik tengah foto di HP"), supaya objek utamanya - biasanya orang
   di sisi kanan foto - tetap di tengah layar, bukan terpotong. */
@media (max-width: 899px) {
	.ds-hero__image {
		object-position: var(--ds-hero-focus, 50%) center;
	}
}

/* ======================================= 40. Penyesuaian ponsel: hero, Flash Sale, tombol section, halaman produk, filter */

/* Label jam Flash Sale versi pendek hanya untuk ponsel. */
.ds-flash__label--short {
	display: none;
}

/* Tombol Filter: tulisan dan panah berdampingan di tengah. Panahnya berputar
   saat panel filter terbuka. */
.ds-shop__filter-btn .ds-icon {
	transition: transform 0.2s ease;
}

.ds-shop__side.is-open .ds-shop__filter-btn .ds-icon {
	transform: rotate(180deg);
}

/* Kotak "Produk ini" di Combo Hemat terkunci tercentang. */
.ds-combo__pick.is-locked,
.ds-combo__pick.is-locked input {
	cursor: not-allowed;
}

.ds-combo__pick.is-locked input {
	opacity: 0.75;
}

/* Titik penunjuk "Kenapa Kami" hanya terlihat saat kartunya menjadi geseran. */
.ds-ab__dots {
	display: none;
}

/* 1099px, sama dengan batas munculnya tombol ini (bagian 13b). Dulu 899px:
   di 900-1099px (tablet mendatar, laptop kecil) tombolnya masih display:block
   dan panahnya jatuh ke baris kedua di pojok kiri bawah tombol. */
@media (max-width: 1099px) {
	.ds-shop__filter-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}
}

@media (max-width: 600px) {
	/* "Kenapa Kami": satu kartu per layar, seperti pita jaminan di beranda.
	   Jarak antar kartu dinolkan - penggeraknya melangkah selebar satu kartu,
	   dan jarak tambahan membuat setiap langkah meleset sedikit. */
	.ds-ab__why .ds-ab__whyrow {
		gap: 0;
		margin-right: 0;
		padding-right: 0;
	}

	.ds-ab__why .ds-ab__whycol {
		flex: 0 0 100%;
		padding: 0 2px;
	}

	/* Titiknya memakai .ds-trust__dot, yang sekarang berupa tombol transparan
	   dengan ruang 8px di kiri-kanan dan 16px di atas-bawah titiknya sebagai area sentuh. Jaraknya karena
	   itu nol di sini, dan margin atasnya dikurangi 16px - titiknya tetap di
	   tempat dan berjarak sama seperti sebelumnya. */
	.ds-ab__dots {
		display: flex;
		justify-content: center;
		gap: 0;
		margin-top: 4px;
	}
}

@media (max-width: 599px) {
	/* 1. Ornamen garis di hero dihapus: di layar sempit garisnya menimpa
	      wajah dan judul, dan tidak ada ruang kosong yang bisa dihiasnya. */
	.ds-hero__ornament {
		display: none;
	}

	/* 4. Teks hero rata tengah. */
	.ds-hero__inner {
		align-items: center;
		text-align: center;
	}

	.ds-hero__text {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.ds-hero__checks {
		align-items: center;
	}

	.ds-hero__checks li {
		justify-content: center;
	}

	/* 2. Jam Flash Sale selalu di dalam kotak: label dipendekkan menjadi
	      "Tinggal", dan kotak angkanya dirapatkan. */
	.ds-flash__label--long {
		display: none;
	}

	.ds-flash__label--short {
		display: inline;
	}

	.ds-flash__timer {
		flex-wrap: wrap;
		gap: 8px;
		min-width: 0;
	}

	.ds-flash__clock {
		flex-wrap: wrap;
		gap: 4px;
	}

	.ds-flash__clock b {
		min-width: 34px;
		padding: 7px 4px;
		font-size: 16px;
	}

	.ds-flash__days {
		margin-right: 4px;
	}

	/* 5 & 6. Tombol geser dan "Lihat Semua" pindah ke BAWAH produk.
	 *
	 * Kepala section dibuat display:contents - kotaknya "dilebur", jadi judul,
	 * tombol geser, dan tombol Lihat Semua menjadi anak langsung section dan
	 * bisa diurutkan ulang dengan order tanpa mengubah markup. Di layar lebar
	 * tidak ada yang berubah. Tombol Lihat Semua mengisi sisa baris di samping
	 * tombol geser, atau selebar baris kalau section-nya tidak punya tombol
	 * geser. */
	.ds-section--foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 12px;
	}

	.ds-section--foot > .ds-section__head {
		display: contents;
	}

	.ds-section--foot .ds-section__heading {
		order: 1;
		flex: 1 1 100%;
		margin-bottom: 24px;
	}

	.ds-section--foot > .ds-foryou__note {
		order: 2;
		flex: 1 1 100%;
	}

	.ds-section--foot > .ds-carousel,
	.ds-section--foot > .ds-grid,
	.ds-section--foot > .ds-articles {
		order: 3;
		flex: 1 1 100%;
		min-width: 0;
	}

	.ds-section--foot .ds-carousel__nav {
		order: 4;
		margin-top: 20px;
	}

	.ds-section--foot > .ds-section__head > .ds-btn {
		order: 5;
		flex: 1 1 0;
		justify-content: center;
		margin-top: 20px;
		margin-left: 0;
	}

	/* 7. Jumlah dan "Tambah ke keranjang" berdampingan; "Beli Sekarang" di
	      baris sendiri di bawahnya. */
	.ds-product-page__buy form.cart,
	.ds-product-page__buy .woocommerce-variation-add-to-cart {
		flex-wrap: wrap;
		gap: 10px;
	}

	.ds-product-page__buy form.cart .ds-qty {
		flex: 0 0 auto;
	}

	.ds-product-page__buy form.cart .ds-qty__btn {
		width: 34px;
		height: 44px;
	}

	.ds-product-page__buy form.cart .ds-qty input.qty {
		width: 34px;
		height: 44px;
	}

	.ds-product-page__buy button.button.single_add_to_cart_button,
	.ds-product-page__buy button.button.single_add_to_cart_button.alt,
	.ds-product-page__buy button.single_add_to_cart_button {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 10px;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.ds-product-page__buy .ds-buy-now {
		flex: 1 1 100%;
		justify-content: center;
	}

	/* 10. "Sering dibeli bersama" menjadi geseran. Sedikit kurang dari dua
	       kartu per layar, supaya kartu ketiga mengintip di tepi - tanda
	       bahwa barisnya bisa digeser. */
	.ds-section--related .ds-grid--products {
		display: flex;
		gap: 12px;
		margin-right: calc(var(--ds-pad) * -1);
		padding-right: var(--ds-pad);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ds-section--related .ds-grid--products::-webkit-scrollbar {
		display: none;
	}

	.ds-section--related .ds-grid--products > .ds-product {
		flex: 0 0 calc((100% - 12px) / 2.15);
		scroll-snap-align: start;
	}
}

/* ======================================= 41. Kamus Angler dan artikel di ponsel */

/* Tab topik dan tombol "Lihat semua artikel" di bawah geseran hanya ada di
   ponsel; di layar lebar topik tetap di kolom samping. */
.ds-mm__tabs,
.ds-art__more--foot {
	display: none;
}

@media (max-width: 600px) {
	/* Tab topik: satu baris yang bisa digeser, tepat di atas daftar artikel.
	   Menjulur sampai tepi kanan layar supaya tab yang terpotong di tepi
	   menjadi tanda barisnya bisa digeser. */
	.ds-mm__tabs {
		display: flex;
		gap: 8px;
		margin: 0 calc(var(--ds-pad) * -1) 24px 0;
		padding: 2px var(--ds-pad) 6px 0;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.ds-mm__tabs::-webkit-scrollbar {
		display: none;
	}

	.ds-mm__tab {
		flex: none;
		padding: 9px 16px;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		color: var(--ds-text-2);
		white-space: nowrap;
		text-decoration: none;
		background: var(--ds-surface);
		border: 1px solid var(--ds-border);
		border-radius: 999px;
		scroll-snap-align: start;
	}

	.ds-mm__tab.is-on {
		color: var(--ds-white);
		background: var(--ds-accent-600);
		border-color: var(--ds-accent);
	}

	/* Kartu Topik di kolom samping tidak dicetak dua kali. */
	.ds-mm__card--topics {
		display: none;
	}

	/* "Baca Juga" menjadi geseran; kartu berikutnya mengintip di tepi. */
	.ds-art__more-posts .ds-art__posts {
		display: flex;
		gap: 14px;
		margin-right: calc(var(--ds-pad) * -1);
		padding-right: var(--ds-pad);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ds-art__more-posts .ds-art__posts::-webkit-scrollbar {
		display: none;
	}

	.ds-art__more-posts .ds-art__post {
		flex: 0 0 82%;
		min-width: 0;
		scroll-snap-align: start;
	}

	/* Tombol pindah dari kepala ke bawah geseran. */
	.ds-art__more-posts .ds-art__more--head {
		display: none;
	}

	.ds-art__more--foot {
		display: flex;
		justify-content: center;
		margin-top: 24px;
	}
}

/* ======================================= 42. Perbaikan keranjang dan rak artikel di ponsel */

/* Tombol "Perbarui Keranjang" yang tersembunyi tidak boleh ikut melebarkan
   halaman.
   
   woocommerce-smallscreen.css memberi SETIAP tombol di sel actions
   width:100% lewat selektor bertiga class, dan itu mengalahkan .screen-reader-text
   yang cuma satu class. Akibatnya tombol tak terlihat itu tetap selebar 497px,
   dan seluruh halaman keranjang - termasuk header dan footer - ikut melebar
   sampai keluar layar ponsel. Ukurannya dikunci di sini, dengan selektor yang
   lebih berat dan !important supaya tidak kalah lagi. */
.ds-cart table.ds-cart__table td.actions button.ds-cart__update.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

@media (max-width: 600px) {
	/* Rak "Produk Terkait" di artikel: geseran dua kartu per layar, dengan
	   tombolnya di bawah - sama dengan "Baca Juga" di bawahnya. */
	.ds-art__shelf .ds-art__products {
		display: flex;
		gap: 12px;
		margin-right: calc(var(--ds-pad) * -1);
		padding-right: var(--ds-pad);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ds-art__shelf .ds-art__products::-webkit-scrollbar {
		display: none;
	}

	.ds-art__shelf .ds-art__products > .ds-product {
		flex: 0 0 calc((100% - 12px) / 2);
		min-width: 0;
		scroll-snap-align: start;
	}

	.ds-art__shelf .ds-art__more--head {
		display: none;
	}
}

/* ======================================= 43. Panah dropdown, bilah bawah, dan kotak pilihan di ponsel */

/* Satu panah untuk semua kotak pilihan.
 *
 * Panah bawaan sistem digambar peramban sendiri: di Windows dan Android ia
 * hitam, dan di atas kotak gelap toko ini hampir tidak terlihat. Panah bawaan
 * dimatikan (appearance:none) dan diganti satu panah putih yang sama di setiap
 * halaman, termasuk halaman pembayaran dan buku alamat.
 *
 * Kotak urutkan di katalog punya panahnya sendiri yang lebih rapat ke
 * tulisannya, jadi ia dikecualikan. */
select:not(.ds-shop__sort select):not([multiple]) {
	padding-right: 38px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f8f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
	appearance: none;
	-webkit-appearance: none;
}

/* Panah select2 milik WooCommerce (halaman pembayaran) memakai segitiga yang
   digambar dari border, warnanya abu-abu bawaan. Disamakan menjadi putih. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--ds-text) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--ds-text) transparent;
}

@media (max-width: 899px) {
	/* Bilah menu bawah: ikon disamakan ukurannya.
	 *
	 * Ikon hati, keranjang, dan akun digambar dalam kotak 20x20, sedangkan
	 * rumah dan tas 24x24 - jadi tiga ikon terakhir duduk sedikit lebih tinggi
	 * dan tulisannya ikut naik. Kotak ikonnya dikunci 24px dan isinya
	 * ditengahkan, sehingga kelimanya sejajar. */
	.ds-tabbar__icon {
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
	}

	.ds-tabbar__icon .ds-icon {
		width: 22px;
		height: 22px;
	}
}

/* ======================================= 44. Daftar produk keranjang di ponsel */

@media (max-width: 760px) {
	/* Foto produk kembali muncul.
	 *
	 * woocommerce-smallscreen.css menyembunyikan kolom foto pada setiap tabel
	 * responsif - masuk akal untuk tabel bawaannya yang menumpuk satu sel per
	 * baris, tapi kartu keranjang di sini memang dirancang dengan foto di kiri.
	 * Selektornya diperpanjang sampai menang, dan !important dipakai karena
	 * aturan yang disembunyikannya pun memakai !important. */
	.ds-cart table.ds-cart__table tbody tr.woocommerce-cart-form__cart-item td.product-thumbnail {
		display: block !important;
	}

	.ds-cart table.ds-cart__table td.product-thumbnail img {
		width: 64px;
		height: 64px;
	}

	/* Nama, SKU, harga, dan subtotal dirapatkan supaya satu produk cukup satu
	   layar ibu jari, bukan setengah halaman. */
	.ds-cart table.ds-cart__table tbody tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 64px minmax(0, 1fr) auto;
		gap: 4px 12px;
		padding: 14px;
	}

	/* min-width 0: lebar minimal 220px versi tabel desktop membuat sel nama
	   lebih lebar dari kolomnya di HP 360px, sehingga nama produk berjalan
	   di bawah tombol hapus (x) dan melewati tepi kartu. */
	.ds-cart table.ds-cart__table td.product-name {
		min-width: 0;
		padding-bottom: 0;
	}

	/* Garis atas tiap sel bawaan woocommerce.css (table.shop_table td) masih
	   ikut tercetak setelah sel-selnya disusun jadi grid kartu: muncul
	   potongan-potongan garis pendek di atas foto, nama, harga, dan jumlah
	   yang tidak saling menyambung. Kartu sudah punya bingkainya sendiri. */
	.ds-cart table.ds-cart__table tbody tr.woocommerce-cart-form__cart-item td {
		border-top: 0;
	}

	.ds-cart .ds-cart__name {
		font-size: 15px;
		line-height: 21px;
	}

	.ds-cart .ds-cart__sku {
		font-size: 11.5px;
	}

	.ds-cart table.ds-cart__table tbody td.product-price {
		font-size: 13.5px;
		color: var(--ds-text-2);
	}

	.ds-cart table.ds-cart__table tbody td.product-subtotal {
		align-self: center;
		font-size: 15px;
		font-weight: 700;
	}

	.ds-cart table.ds-cart__table tbody td.product-quantity {
		padding-top: 10px;
	}
}

/* ======================================= 45. Saran combo di keranjang */

/* Setiap saran kini membawa foto dan tautan produknya: nama joran dan reel
   sering hanya berbeda di angka terakhir, dan foto lebih cepat dibaca
   daripada nama. */
.ds-combo-cart__photo {
	flex: none;
	display: block;
	width: 52px;
	height: 52px;
	overflow: hidden;
	background: var(--ds-white);
	border-radius: 8px;
}

.ds-combo-cart__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

a.ds-combo-cart__name {
	color: var(--ds-text);
	text-decoration: none;
}

a.ds-combo-cart__name:hover,
a.ds-combo-cart__name:focus-visible {
	color: var(--ds-accent-300);
	text-decoration: underline;
}

@media (max-width: 599px) {
	/* Di ponsel satu baris tidak muat memuat foto, nama, harga, dan tombol
	   sekaligus - tombolnya terdorong keluar layar. Jadi foto memayungi nama
	   dan harga di sebelahnya, lalu tombol Tambah turun ke baris sendiri
	   selebar kartu. */
	.ds-combo-cart__item {
		padding: 14px;
	}

	.ds-combo-cart__list li {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 4px 12px;
		padding: 12px 0 0;
		border-top: 1px solid rgba(70, 188, 145, 0.25);
	}

	.ds-combo-cart__list li:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.ds-combo-cart__photo {
		grid-area: 1 / 1 / 3 / 2;
		align-self: start;
	}

	.ds-combo-cart__price {
		grid-column: 2;
		font-size: 13.5px;
	}

	.ds-combo-cart__add {
		grid-column: 1 / -1;
		width: 100%;
		justify-content: center;
		margin-top: 4px;
	}
}

/* ======================================= 46. Kotak pilihan provinsi dan negara */

/* Kotak aslinya tetap ada supaya nilainya terkirim, tapi tidak terlihat.
   display:none tidak dipakai - kotak yang begitu tidak bisa difokuskan
   peramban saat validasi "wajib diisi" gagal, dan pesannya jadi tidak muncul
   di mana pun. */
.ds-sel__native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	opacity: 0;
}

.ds-sel {
	position: relative;
	width: 100%;
}

.ds-sel__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	height: 50px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15px;
	text-align: left;
	color: var(--ds-text);
	background: var(--ds-canvas) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f8f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
	border: 1px solid var(--ds-border);
	border-radius: 10px;
	cursor: pointer;
	padding-right: 38px;
}

.ds-sel__btn.is-empty {
	color: var(--ds-text-3);
}

.ds-sel__btn:focus-visible {
	outline: none;
	border-color: var(--ds-accent);
}

.ds-sel__panel {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	padding: 10px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border-strong);
	border-radius: 12px;
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

.ds-sel__panel[hidden] {
	display: none;
}

.ds-sel__search {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	font-family: inherit;
	font-size: 14px;
	color: var(--ds-text);
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 9px;
}

.ds-sel__search:focus {
	outline: none;
	border-color: var(--ds-accent);
}

/* Selektornya diperpanjang karena WooCommerce memberi bulatan pada setiap
   daftar di dalam formulirnya, dan aturan yang lebih pendek kalah. */
.ds-sel .ds-sel__list,
.ds-sel__list {
	max-height: min(320px, 45vh);
	margin: 8px 0 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	overscroll-behavior: contain;
}

.ds-sel .ds-sel__list li,
.ds-sel__list li {
	margin: 0;
	list-style: none;
}

.ds-sel__opt {
	padding: 11px 12px;
	font-size: 14.5px;
	line-height: 20px;
	color: var(--ds-text);
	border-radius: 8px;
	cursor: pointer;
}

.ds-sel__opt[hidden] {
	display: none;
}

.ds-sel__opt:hover,
.ds-sel__opt:focus-visible {
	outline: none;
	background: var(--ds-canvas);
}

.ds-sel__opt[aria-selected="true"] {
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.14);
}

.ds-sel__empty {
	margin: 10px 4px 2px;
	font-size: 13.5px;
	color: var(--ds-text-2);
}

/* ======================================= 47. Poin belanja */

/* Satu bentuk untuk poin di mana pun ia muncul - kartu produk, halaman
   produk, keranjang, pembayaran - supaya pembeli mengenalinya sekali saja.
   Emas, bukan hijau: hijau di situs ini berarti "tersedia" dan "tombol",
   sedangkan poin adalah hadiah. */
.ds-points {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	margin: 0;
}

.ds-points__chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	color: var(--ds-gold);
	background: rgba(232, 181, 74, 0.12);
	border: 1px solid rgba(232, 181, 74, 0.4);
	border-radius: 999px;
	white-space: nowrap;
}

.ds-points__note {
	font-size: 12px;
	line-height: 18px;
	color: var(--ds-text-2);
}

.ds-points--card {
	justify-content: center;
	margin-top: -2px;
	padding: 0 14px 2px;
}

.ds-points--product {
	margin: -4px 0 18px;
}

/* Baris poin di ringkasan keranjang dan pembayaran mengikuti baris lain di
   tabel yang sama; hanya isinya yang diberi warna poin. */
.ds-points-row td {
	text-align: right;
}

.ds-points-row .ds-points__note {
	display: block;
	margin-top: 4px;
}

/* Kartu "Poin saya" di dasbor akun. */
.ds-points-card__num {
	margin: 4px 0 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ds-gold);
}

.ds-points-card__note {
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 21px;
	color: var(--ds-text-2);
}

@media (max-width: 599px) {
	.ds-points--card {
		padding: 0 10px 2px;
	}

	.ds-points-card__num {
		font-size: 28px;
	}
}

/* ======================================= 48. Poin: lencana, tukar poin, dan halaman Poin */

/* Lencana poin di pojok kanan atas foto produk, sepasang dengan lencana
   diskon di kiri. Emas, bukan merah: merah berarti potongan harga, emas
   berarti hadiah. */
.ds-points-badge {
	position: absolute;
	z-index: 3;
	top: 12px;
	right: 12px;
	padding: 4px 10px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 16px;
	color: var(--ds-bg-0);
	background: var(--ds-gold);
	border-radius: 999px;
	white-space: nowrap;
}

/* Keterangan kecil di baris Poin pada tabel fakta produk. */
.ds-pd__pointnote {
	margin-left: 8px;
	font-size: 13px;
	color: var(--ds-text-2);
}

/* Baris "Poin didapat" di ringkasan keranjang dan pembayaran.
   Diberi jarak dari baris di atasnya supaya tidak terbaca menempel pada
   ongkos kirim, dan keterangannya turun ke baris sendiri. */
.ds-points-row {
	flex-wrap: wrap;
	margin-top: 14px;
}

.ds-points-row__note {
	flex: 1 1 100%;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 19px;
	color: var(--ds-text-2);
}

/* Kotak "Pakai poin" di halaman pembayaran. */
.ds-usepoints {
	margin: 0 0 22px;
	padding: 18px 20px;
	background: rgba(232, 181, 74, 0.07);
	border: 1px dashed rgba(232, 181, 74, 0.45);
	border-radius: var(--ds-radius);
}

.ds-usepoints__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ds-text);
}

.ds-usepoints__have {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--ds-text-2);
}

.ds-usepoints__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.ds-usepoints__row input {
	width: 140px;
	height: 46px;
	padding: 0 12px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ds-text);
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

.ds-usepoints__clear {
	padding: 0;
	font-size: 13.5px;
	color: var(--ds-text-2);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}

.ds-usepoints__note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 19px;
	color: var(--ds-text-2);
}

/* Halaman Akun Saya → Poin. */
.ds-poin__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.ds-poin__card {
	padding: 18px 20px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
}

.ds-poin__card--main {
	background: rgba(232, 181, 74, 0.08);
	border-color: rgba(232, 181, 74, 0.4);
}

.ds-poin__label {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ds-text-2);
}

.ds-poin__num {
	margin: 6px 0 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ds-gold);
}

.ds-poin__num--small {
	font-size: 24px;
	color: var(--ds-text);
}

.ds-poin__sub {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-poin__head {
	margin: 28px 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ds-text);
}

.ds-poin__empty {
	margin: 0;
	color: var(--ds-text-2);
}

.ds-poin__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	overflow: hidden;
}

.ds-poin__table th,
.ds-poin__table td {
	padding: 12px 16px;
	font-size: 14px;
	text-align: left;
}

.ds-poin__table th {
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ds-text-2);
	border-bottom: 1px solid var(--ds-border);
}

.ds-poin__table tbody tr + tr td {
	border-top: 1px solid var(--ds-border);
}

.ds-poin__delta {
	font-weight: 700;
	color: var(--ds-accent-300);
	text-align: right;
}

.ds-poin__delta.is-minus {
	color: var(--ds-danger-300);
}

/* Kalimat kecil di bawah kolom email checkout. */
.ds-acctnote {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 19px;
	color: var(--ds-text-2);
}

@media (max-width: 599px) {
	.ds-points-row {
		margin-top: 12px;
	}

	.ds-usepoints {
		padding: 16px;
	}

	.ds-usepoints__row input {
		flex: 1 1 120px;
		width: auto;
	}

	.ds-poin__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.ds-poin__table thead {
		display: none;
	}

	.ds-poin__table,
	.ds-poin__table tbody,
	.ds-poin__table tr,
	.ds-poin__table td {
		display: block;
		width: auto;
	}

	.ds-poin__table tr {
		padding: 12px 14px;
		border-top: 1px solid var(--ds-border);
	}

	.ds-poin__table tr:first-child {
		border-top: 0;
	}

	.ds-poin__table td {
		padding: 2px 0;
		border: 0;
	}

	.ds-poin__delta {
		text-align: left;
	}
}

/* Kotak poin di dasbor akun adalah tautan ke halaman Poin - warnanya emas,
   sama dengan poin di tempat lain. */
.ds-dash__stat--poin {
	color: inherit;
	text-decoration: none;
	background: rgba(232, 181, 74, 0.08);
	border-color: rgba(232, 181, 74, 0.35);
}

.ds-dash__stat--poin .ds-icon,
.ds-dash__stat--poin .ds-dash__angka {
	color: var(--ds-gold);
}

.ds-dash__stat--poin:hover {
	border-color: rgba(232, 181, 74, 0.6);
}

/* Daftar saran combo di keranjang tidak ikut indentasi daftar bawaan
   WooCommerce - selektornya diperpanjang supaya menang tanpa !important. */
.ds-cart .ds-combo-cart .ds-combo-cart__list,
.ds-combo-cart .ds-combo-cart__list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.ds-cart .ds-combo-cart .ds-combo-cart__list li,
.ds-combo-cart .ds-combo-cart__list li {
	margin: 0;
	list-style: none;
}

/* ======================================= Voucher spesial dan tanggal lahir */

/*
 * Voucher spesial (bisa digabung) punya kelompok sendiri di daftar voucher,
 * di bawah voucher biasa - lihat deepstrike_voucher_items() di
 * inc/shop-pages/coupons.php. Warnanya emas, bukan hijau aksen: hijau sudah
 * berarti "terpakai" di daftar yang sama, dan emas di situs ini dipakai untuk
 * hal yang istimewa (poin, brand resmi).
 */
.ds-vou__group {
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--ds-gold);
}

.ds-vou__item.is-special:not(.is-on):not(.is-off) {
	border-color: rgba(232, 181, 74, 0.35);
}

.ds-vou__chip {
	align-self: flex-start;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-gold);
	background: rgba(232, 181, 74, 0.12);
	border: 1px solid rgba(232, 181, 74, 0.45);
	border-radius: 999px;
}

/* Tanggal lahir yang sudah terisi: tetap berbentuk kolom supaya sejajar
   dengan kolom lain, tapi redup dan tanpa kursor ketik - tanda bahwa isinya
   memang tidak bisa diubah dari sini. */
.ds-acct__form .ds-acct__field input.ds-acct__locked {
	color: var(--ds-text-2);
	background: transparent;
	cursor: default;
}

.ds-acct__form .ds-acct__field input.ds-acct__locked:focus {
	border-color: var(--ds-border);
}

/* Kalender bawaan kolom tanggal ikut warna gelap situs. */
.ds-acct__form .ds-acct__field input[type="date"] {
	color-scheme: dark;
}

/* Pengingat tanggal lahir di dasbor akun. Satu baris kecil, bukan kartu
   penuh: ini tawaran, bukan tugas yang harus diselesaikan. */
.ds-od__card.ds-bday {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	padding: 16px 20px;
	border-color: rgba(232, 181, 74, 0.3);
}

.ds-bday .ds-bday__text {
	flex: 1 1 260px;
	margin: 0;
	font-size: 14px;
	line-height: 22.4px;
	color: var(--ds-text-2);
}

.ds-bday .ds-bday__text strong {
	color: var(--ds-gold);
}

/* ============ Ornamen kepala halaman yang tidak terpotong (404, Akun Saya)
 *
 * Gambar sapuan-atas.svg memudar sendiri di bagian bawahnya. Di FAQ kepala
 * halamannya cukup tinggi sehingga seluruh gambar muat; di 404 (231px) dan
 * Akun Saya (102px), overflow:hidden memotong garis-garisnya di tengah jalan,
 * tepat di bawah judul. Di sini ornamen boleh menjulur ke bawah sampai habis
 * memudar: pemotongan hanya ke samping (overflow-x: clip, supaya halaman tidak
 * bisa digeser ke samping), dan ornamennya ditaruh di belakang isi halaman
 * (lihat aturan kedua di bawah), jadi kartu dan teks tetap di atasnya. */
body.error404 .ds-hero-step,
.woocommerce-account .ds-pagehead,
.woocommerce-account .ds-hero-step {
	overflow: visible;
	overflow-x: clip;
}

/* Ornamen tetap di lapisannya sendiri (z-index -1 menenggelamkannya di
   belakang latar gradasi .ds-page); isi di bawah kepala halaman yang dinaikkan
   satu lapis, jadi garis-garisnya lewat di belakang kartu dan teks. */
body.error404 .ds-404,
.woocommerce-account .ds-pagehead ~ .ds-main,
.woocommerce-account .ds-hero-step ~ .ds-main {
	position: relative;
	z-index: 1;
}


/* ---------------------------------------------------------------------------
   Tombol bagikan di halaman produk (inc/shop-pages/product-share.php)
   --------------------------------------------------------------------------- */
.ds-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
}

/* Jarak tetap antara blok beli dan baris "Bagikan". Isi blok beli berganti-
   ganti (tombol beli, kotak "Kabari saya", pilihan varian), masing-masing
   dengan margin bawah sendiri, sehingga dulu jaraknya kadang cuma ~14px dan
   baris bagikan terlihat menempel. Margin bawah anak terakhir dinolkan supaya
   jaraknya selalu persis 24px (20px di HP, lihat media query di bawah). */
.ds-product-page__buy > :last-child {
	margin-bottom: 0;
}

.ds-product-page__buy + .ds-share {
	margin-top: 24px;
}

.ds-share__label {
	margin-right: 4px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(230, 238, 240, .7);
}

.ds-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	/* Halaman produk berlatar gelap: tombol transparan bergaris tipis, ikon terang. */
	border: 1px solid rgba(230, 238, 240, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	color: #e6eef0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.ds-share__btn:hover,
.ds-share__btn:focus-visible,
.ds-share__btn.is-copied {
	border-color: #3ddc97;
	color: #3ddc97;
}

.ds-share__btn[disabled] {
	opacity: .6;
	cursor: progress;
}

.ds-share__note {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(230, 238, 240, .75);
}

/* ---------------------------------------------------------------------------
   Persetujuan cookie (inc/shop-pages/cookie-consent.php)
   --------------------------------------------------------------------------- */
/* Baris hak cipta dan tautan "Pengaturan cookie" berdampingan. */
.ds-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 24px;
}

.ds-footer__legal p {
	margin: 0;
}

/* Tautan pembuat situs di baris hak cipta (sebelumnya gaya ini milik tautan cookie, yang kini pindah ke menu footer). */
.ds-footer__credit {
	margin-left: auto !important;
	text-align: right;
}

.ds-footer__credit a {
	color: inherit;
	text-decoration: underline;
}

.ds-footer__credit a:hover {
	color: var(--ds-accent-300);
}

.ds-cookie {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 70;
	display: flex;
	justify-content: center;
}

.ds-cookie[hidden],
.ds-cookie-modal[hidden] {
	display: none;
}

.ds-cookie__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	width: 100%;
	max-width: 1120px;
	padding: 18px 22px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	background: #0f1a1e;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
	color: rgba(255, 255, 255, 0.82);
}

.ds-cookie__text {
	flex: 1 1 420px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.ds-cookie__text strong {
	display: block;
	margin-bottom: 2px;
	color: #fff;
	font-size: 15px;
}

.ds-cookie__text a,
.ds-cookie-modal a {
	color: var(--ds-accent-300);
}

.ds-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ds-cookie__btn {
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid var(--ds-accent);
	border-radius: 999px;
	background: var(--ds-accent);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.ds-cookie__btn:hover {
	background: var(--ds-accent-600);
	border-color: var(--ds-accent-600);
}

.ds-cookie__btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.ds-cookie__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--ds-accent-300);
}

.ds-cookie-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(4, 8, 10, 0.7);
}

.ds-cookie-modal__box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 32px 32px 28px;
	border-radius: 18px;
	background: #0f1a1e;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	line-height: 1.6;
}

.ds-cookie-modal__box h2 {
	margin: 0 48px 10px 0;
	color: #fff;
	font-size: 20px;
}

.ds-cookie-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
}

/* Jarak antarteks dan antartombol dilonggarkan supaya isi jendela tidak terasa berdesakan. */
.ds-cookie-modal__box > p {
	margin: 0 0 20px;
}

.ds-cookie-modal__group {
	margin: 0 0 14px;
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
}

.ds-cookie-modal__group p {
	margin: 10px 0 0;
}

.ds-cookie-modal__group .ds-cookie-modal__names {
	margin-top: 12px;
}

.ds-cookie-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #fff;
	cursor: default;
}

label.ds-cookie-modal__head {
	cursor: pointer;
}

.ds-cookie-modal__always {
	font-size: 12px;
	font-weight: 600;
	color: var(--ds-accent-300);
}

.ds-cookie-modal__names {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	word-break: break-word;
}

.ds-cookie-modal__box > .ds-cookie-modal__note {
	margin: 20px 0 0;
	line-height: 1.65;
}

.ds-cookie-modal__box > .ds-cookie__actions {
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ds-cookie-modal__box .ds-cookie__btn {
	min-height: 44px;
	padding: 0 22px;
}

.ds-cookie-modal__note {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.6);
}

.ds-cookie-modal__switch {
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
}

.ds-cookie-modal__switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ds-cookie-modal__switch span {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	transition: background 0.15s ease;
	pointer-events: none;
}

.ds-cookie-modal__switch span::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}

.ds-cookie-modal__switch input:checked + span {
	background: var(--ds-accent);
}

.ds-cookie-modal__switch input:checked + span::after {
	transform: translateX(20px);
}

.ds-cookie-modal__switch input:focus-visible + span {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

.ds-cookie-open {
	overflow: hidden;
}

/* Tautan di teks bilah cookie hanya dibedakan warnanya (kontras 1,24:1
   terhadap teks di sekitarnya) - garis bawah membuatnya terbaca sebagai
   tautan oleh semua orang, bukan hanya yang bisa membedakan warna. */
.ds-cookie__text a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Selama bilah cookie tampil, elemen yang difokus dengan Tab digulir ke atas
   bilah, bukan ke belakangnya. Tingginya diisi skrip modul cookie di plugin
   (--ds-cookie-h). Padding bawah body menjaga isi paling bawah halaman tetap
   bisa digulir keluar dari balik bilah. */
html.ds-cookie-bar {
	scroll-padding-bottom: calc(var(--ds-cookie-h, 160px) + 16px);
}

html.ds-cookie-bar body {
	padding-bottom: var(--ds-cookie-h, 160px);
}

/* Fokus dipindah ke <main> sesudah bilah cookie ditutup; itu bukan elemen
   yang bisa diklik, jadi tidak perlu bingkai fokus. */
main[tabindex="-1"]:focus {
	outline: 0;
}

/* Di HP bilahnya pernah setinggi 283-306px (sepertiga layar) dan menutupi
   tombol utama hero. Sekarang menjadi lembaran tipis yang menempel di dasar
   layar: teks lebih kecil, judul sebaris dengan kalimatnya, dan tiga tombol
   dalam satu baris - sekitar 160px, di bawah seperempat layar. */
@media (max-width: 599px) {
	.ds-cookie {
		left: 0;
		right: 0;
		bottom: 0;
		/* Di atas bilah navigasi bawah (.ds-tabbar) dan tombol WhatsApp. */
		z-index: 95;
	}

	.ds-cookie__bar {
		gap: 10px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		border-width: 1px 0 0;
		border-radius: 16px 16px 0 0;
	}

	.ds-cookie__text {
		flex-basis: 100%;
		font-size: 12.5px;
		line-height: 1.45;
	}

	.ds-cookie__text strong {
		display: inline;
		margin: 0 4px 0 0;
		font-size: 13px;
	}

	.ds-cookie__actions {
		flex-wrap: nowrap;
		gap: 8px;
		width: 100%;
	}

	/* Lebar awal mengikuti tulisannya (auto, bukan 0) dan tulisan dilarang
	   turun baris: dengan basis 0 ketiga tombol dibagi sama rata, sehingga
	   "Hanya yang wajib" terjepit jadi dua baris di HP 360-390px. Total ketiga
	   tulisan tetap muat di 360px (sekitar 280 dari 312px yang tersedia). */
	.ds-cookie__btn {
		flex: 1 1 auto;
		min-width: 0;
		min-height: 44px;
		padding: 4px 8px;
		font-size: 13px;
		line-height: 1.2;
		white-space: nowrap;
	}

	/* "Terima semua" sedikit lebih lebar - pilihan yang paling sering. */
	.ds-cookie__bar > .ds-cookie__actions .ds-cookie__btn:not(.ds-cookie__btn--ghost) {
		flex-grow: 1.3;
	}

	.ds-cookie__bar > .ds-cookie__actions .ds-cookie__btn--ghost:first-child {
		flex-grow: 0.7;
	}
}

/* ---------------------------------------------------------------------------
   Perapian tampilan mobile (Oktober 2026)
   --------------------------------------------------------------------------- */
@media (max-width: 899px) {
	/* Menu garis tiga: subkategori Katalog Produk sejajar dengan menu utama.
	   Sebelumnya padding submenu (16px) ditambah padding tautan versi desktop
	   (16px) membuatnya menjorok 32px. Tingkatannya dibedakan lewat warna dan
	   ketebalan huruf, bukan indentasi. */
	.ds-menu .sub-menu {
		padding: 0 0 6px;
	}

	.ds-menu .sub-menu a {
		padding: 10px 0;
		font-size: 15px;
		color: var(--ds-text-2);
	}

	/* Footer: Metode Pembayaran dan Kurir Pengiriman diberi jarak dan garis
	   pemisah yang sama dengan blok Menu di atasnya. */
	.ds-footer__services {
		gap: 0;
		margin-top: 28px;
		padding-top: 0;
	}

	.ds-footer__services .ds-fold {
		padding: 20px 0;
	}

	.ds-footer__services .ds-fold + .ds-fold {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	/* Teks di bawah 12px sulit dibaca di ponsel. */
	.ds-hero__kicker,
	.ds-pd__chip {
		font-size: 12px;
	}
}

/* Tombol bagikan produk selalu satu baris di ponsel.
   Lima tombol plus tulisan "Bagikan" butuh ~360px, sedangkan ruang di layar
   375px hanya 327px. Tulisan "Bagikan" naik menjadi judul kecil di atas, dan
   kelima tombol berbagi lebar baris secara rata. */
@media (max-width: 560px) {
	.ds-share {
		gap: 10px 6px;
	}

	.ds-product-page__buy + .ds-share {
		margin-top: 20px;
	}

	.ds-share__label {
		flex-basis: 100%;
		margin: 0;
	}

	.ds-share__btn {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0 8px;
	}
}

@media (max-width: 991px) {
	/* Grid dua kolom akun dibatalkan dengan selektor yang SAMA kuatnya dengan
	   aturan desktop (yang memakai :not(.ds-shop-page--guest)). Selektor
	   pendek di blok mobile lama kalah, sehingga seluruh isi akun di ponsel
	   tetap terkunci selebar 300px dan menyisakan ruang kosong di kanan. */
	.ds-shop-page--account:not(.ds-shop-page--guest) .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	/* Menu akun: satu baris yang bisa digeser, bukan kotak dua kolom yang
	   memakan setengah layar sebelum isi halaman terlihat. */
	.ds-shop-page--account .ds-acc__menu,
	.ds-acc__menu {
		display: flex;
		gap: 6px;
		padding: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ds-acc__menu::-webkit-scrollbar {
		display: none;
	}

	.ds-shop-page--account .ds-acc__menu li,
	.ds-acc__menu li {
		flex: none;
	}

	.ds-acc__menu li a {
		height: auto;
		padding: 10px 14px;
		white-space: nowrap;
	}

	.ds-shop-page--account .ds-acc__menu li.woocommerce-MyAccount-navigation-link--customer-logout,
	.ds-acc__menu li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0 0 0 4px;
		padding: 0 0 0 10px;
		border-top: 0;
		border-left: 1px solid var(--ds-border);
	}
}

/* Tab di ponsel: selalu satu baris yang bisa digeser, tidak pernah turun ke
   baris kedua. Tab yang terbagi dua baris tidak lagi terbaca sebagai satu
   deret pilihan, dan garis bawah tab aktif melayang di tengah. Berlaku untuk
   tab halaman produk (Deskripsi / Spesifikasi / Ulasan) dan saringan status
   pesanan di Akun Saya. Topik Kamus Angler dan menu akun sudah memakai pola
   yang sama. */
@media (max-width: 767px) {
	.woocommerce-tabs ul.tabs,
	.ds-ord__filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce-tabs ul.tabs::-webkit-scrollbar,
	.ds-ord__filter::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-tabs ul.tabs li,
	.ds-ord__filter > * {
		flex: none;
	}

	.woocommerce-tabs ul.tabs li a,
	.ds-ord .ds-ord__pill {
		white-space: nowrap;
	}

	.woocommerce-tabs ul.tabs li a {
		padding: 14px 16px;
	}

	.ds-ord__filter {
		gap: 8px;
	}
}

/* ---------------------------------------------------------------------------
   Hero gaya baru (Figma: "Website — Promo (Usulan Oktober 2026)", A · Hero
   Slider). Judul besar berhuruf kapital dengan baris kedua hijau, kotak harga
   kuning, tombol putih membulat, panah di kiri-kanan, titik dan nomor slide
   di bawah. Ditulis di akhir berkas supaya menimpa gaya hero lama tanpa harus
   membongkar bagian 05 dan 39-40.
   --------------------------------------------------------------------------- */
.ds-hero {
	--ds-hero-yellow: #ffd133;
}

/* Garis-garis emerald tidak ada di desain baru: di atas foto yang ramai ia
   bersaing dengan judul. */
.ds-hero__ornament {
	display: none;
}

.ds-hero__scrim {
	background:
		linear-gradient(90deg, rgba(4, 8, 10, 0.88) 0%, rgba(4, 8, 10, 0.55) 45%, rgba(4, 8, 10, 0) 75%),
		linear-gradient(180deg, rgba(4, 8, 10, 0) 65%, rgba(4, 8, 10, 0.6) 100%);
}

.ds-hero__inner {
	justify-content: center;
	gap: 28px;
	padding: 80px calc(var(--ds-pad) + 72px) 96px;
}

.ds-hero__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ds-hero__kicker {
	margin: 0;
	font-size: 14px;
	letter-spacing: 2.4px;
	color: var(--ds-accent-300);
}

.ds-hero__title {
	max-width: 960px;
	font-size: clamp(40px, 6vw, 88px);
	font-weight: 900;
	line-height: 0.94;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ds-white);
}

.ds-hero__accent {
	display: block;
	color: var(--ds-accent-300);
}

.ds-hero__desc {
	max-width: 560px;
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.ds-hero__checks {
	margin-top: 0;
}

.ds-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.ds-hero__price {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 10px 20px 12px;
	color: #04080a;
	background: var(--ds-hero-yellow);
	border-radius: 4px;
}

.ds-hero__price-label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.ds-hero__price-value {
	font-size: 34px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.ds-hero__cta {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 60px;
	padding: 0 28px 0 32px;
	font-size: 17px;
	font-weight: 700;
	color: #04080a;
	text-decoration: none;
	background: var(--ds-white);
	border-radius: 999px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.ds-hero__cta:hover,
.ds-hero__cta:focus-visible {
	color: #04080a;
	background: var(--ds-accent-200, #a6e5cd);
}

/* Panah di tengah kiri dan kanan, nomor slide di kanan bawah. Pembungkus
   .ds-hero__nav menutupi seluruh hero tapi tidak menangkap klik; hanya
   tombolnya yang bisa ditekan. */
.ds-hero__nav {
	position: absolute;
	inset: 0;
	top: 0;
	right: 0;
	z-index: 3;
	display: block;
	pointer-events: none;
}

.ds-hero__arrow {
	position: absolute;
	top: 50%;
	width: 56px;
	height: 56px;
	color: var(--ds-white);
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	transform: translateY(-50%);
	backdrop-filter: blur(12px);
	pointer-events: auto;
}

.ds-hero__arrow:hover {
	background: rgba(255, 255, 255, 0.28);
}

.ds-hero__arrow--up {
	left: 24px;
}

.ds-hero__arrow--down {
	right: 24px;
}

.ds-hero__arrow--up .ds-icon {
	transform: rotate(90deg);
}

.ds-hero__arrow--down .ds-icon {
	transform: rotate(-90deg);
}

.ds-hero__count {
	position: absolute;
	right: calc(var(--ds-pad) + 72px);
	bottom: 34px;
	flex-direction: row;
	gap: 6px;
	width: auto;
	height: auto;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.5px;
	background: none;
	border: 0;
}

.ds-hero__count-sep {
	font-size: 14px;
	line-height: 1;
	transform: none;
}

/* Titik slide selalu tampil, tidak hanya di ponsel. */
.ds-hero__dots {
	display: flex;
	bottom: 14px;
}

.ds-hero__dot::before {
	background: rgba(255, 255, 255, 0.45);
}

.ds-hero__dot.is-active {
	width: 52px;
}

.ds-hero__dot.is-active::before {
	background: var(--ds-white);
}

@media (max-width: 899px) {
	.ds-hero__inner {
		padding: 72px var(--ds-pad) 84px;
	}

	.ds-hero__arrow {
		display: none;
	}

	.ds-hero__count {
		right: var(--ds-pad);
		bottom: 28px;
	}
}

@media (max-width: 599px) {
	.ds-hero__scrim {
		background: linear-gradient(180deg, rgba(4, 8, 10, 0.25) 0%, rgba(4, 8, 10, 0.55) 45%, rgba(4, 8, 10, 0.85) 100%);
	}

	.ds-hero__inner {
		justify-content: flex-end;
		gap: 20px;
		padding: 48px var(--ds-pad) 64px;
	}

	.ds-hero__text {
		gap: 14px;
	}

	.ds-hero__kicker {
		font-size: 12px;
		letter-spacing: 1.8px;
	}

	.ds-hero__title {
		font-size: 40px;
	}

	.ds-hero__desc {
		font-size: 15px;
	}

	.ds-hero__actions {
		justify-content: center;
		gap: 10px;
	}

	.ds-hero__price {
		padding: 6px 14px 8px;
	}

	.ds-hero__price-value {
		font-size: 24px;
	}

	.ds-hero__cta {
		min-height: 52px;
		padding: 0 22px;
		font-size: 15px;
	}

	.ds-hero__count {
		display: none;
	}
}

@media (max-width: 599px) {
	/* Judul dua baris, kalimat penjelas, kotak harga, dan tombol tidak muat di
	   tinggi 68.75vw (sekitar 260px di ponsel); hero dibuat lebih tinggi
	   dengan foto tetap memenuhi kotaknya. */
	.ds-hero {
		height: auto;
		min-height: 560px;
		max-height: none;
	}

	.ds-hero__inner.is-active {
		min-height: 560px;
	}
}

/* ---------------------------------------------------------------------------
   Banner promo tengah halaman (blok "Banner Promo",
   template-parts/home/promo-banner.php). Figma: "B · Banner Promo Tengah".
   --------------------------------------------------------------------------- */
.ds-section--promo {
	padding-top: 24px;
	padding-bottom: 24px;
}

.ds-promo {
	--ds-promo-panel: #1a6f52;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 420px;
	max-width: var(--ds-max, 1312px);
	margin: 0 auto;
	overflow: hidden;
	background: #12513c;
	border-radius: 20px;
}

.ds-promo--biru {
	--ds-promo-panel: #1a466f;
	background: #12314e;
}

.ds-promo--merah {
	--ds-promo-panel: #a7362a;
	background: #6f221a;
}

.ds-promo--gelap {
	--ds-promo-panel: #111b1e;
	background: #04080a;
}

.ds-promo__media {
	position: absolute;
	inset: 0 0 0 36%;
}

.ds-promo__image,
.ds-promo__media .ds-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tepi kanan panel dimiringkan: 100% di atas, 83% di bawah. */
.ds-promo__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
	justify-content: center;
	width: 50%;
	padding: 48px 120px 48px 56px;
	color: var(--ds-white);
	background: var(--ds-promo-panel);
	clip-path: polygon(0 0, 100% 0, 83% 100%, 0 100%);
}

.ds-promo__label {
	margin: 0;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	background: #04080a;
	border-radius: 999px;
}

.ds-promo__big {
	margin: 0;
	font-size: clamp(72px, 9vw, 120px);
	font-weight: 900;
	line-height: 0.86;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--ds-white);
}

.ds-promo__highlight {
	margin: 0;
	padding: 4px 14px 6px;
	font-size: 36px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #04080a;
	background: #ffd133;
	border-radius: 4px;
}

.ds-promo__desc {
	max-width: 360px;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

.ds-promo__btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 50px;
	padding: 0 22px 0 26px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ds-white);
	text-decoration: none;
	background: #04080a;
	border-radius: 999px;
}

.ds-promo__btn:hover,
.ds-promo__btn:focus-visible {
	color: #04080a;
	background: var(--ds-white);
}

@media (max-width: 899px) {
	.ds-promo {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.ds-promo__media {
		position: relative;
		inset: auto;
		order: -1;
		aspect-ratio: 16 / 9;
	}

	.ds-promo__panel {
		width: 100%;
		padding: 28px 24px 32px;
		clip-path: none;
	}

	.ds-promo__big {
		font-size: 72px;
	}

	.ds-promo__highlight {
		font-size: 28px;
	}
}

/* ---------------------------------------------------------------------------
   Popup promo (inc/shop-pages/promo-popup.php). Figma: "C · Popup Promo".
   --------------------------------------------------------------------------- */
.ds-popup {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(4, 8, 10, 0.72);
	animation: ds-popup-in 0.25s ease;
}

.ds-popup[hidden] {
	display: none;
}

.ds-popup-open {
	overflow: hidden;
}

@keyframes ds-popup-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.ds-popup__box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	width: 100%;
	max-width: 880px;
	max-height: calc(100vh - 32px);
	overflow: hidden;
	color: var(--ds-white);
	background: #111b1e;
	border-radius: 20px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.ds-popup__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 40px;
	height: 40px;
	font-size: 24px;
	line-height: 1;
	color: var(--ds-white);
	background: rgba(4, 8, 10, 0.7);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.ds-popup__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
	padding: 48px;
	overflow-y: auto;
}

.ds-popup__tag {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ds-accent-300);
}

.ds-popup__title {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 44px;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ds-white);
}

/* Garis lengkung kuning di bawah baris pertama - SVG sebagai latar supaya
   ikut selebar tulisannya, berapa pun panjangnya. */
.ds-popup__swash {
	align-self: flex-start;
	padding-bottom: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 60 3 150 1 237 7' fill='none' stroke='%23ffd133' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 14px;
}

.ds-popup__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

.ds-popup__voucher {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	background: rgba(18, 81, 60, 0.55);
	border: 1.5px dashed var(--ds-accent-300);
	border-radius: 12px;
}

.ds-popup__value {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	height: 64px;
	padding: 0 8px;
	font-size: 21px;
	font-weight: 900;
	color: #04080a;
	background: #ffd133;
	border-radius: 10px;
}

.ds-popup__vinfo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
}

.ds-popup__vinfo strong {
	font-size: 16px;
	color: var(--ds-white);
}

.ds-popup__cta {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	margin-top: 6px;
	padding: 0 24px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ds-white);
	text-decoration: none;
	background: var(--ds-accent);
	border-radius: 999px;
}

.ds-popup__cta:hover,
.ds-popup__cta:focus-visible {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

.ds-popup__later {
	align-self: center;
	padding: 6px 10px;
	font: inherit;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-popup__media {
	position: relative;
	min-height: 100%;
}

.ds-popup__image,
.ds-popup__media .ds-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 760px) {
	.ds-popup {
		align-items: flex-end;
		padding: 0;
	}

	.ds-popup__box {
		grid-template-columns: 1fr;
		max-height: 92vh;
		border-radius: 20px 20px 0 0;
	}

	.ds-popup__media {
		order: -1;
		height: 200px;
		min-height: 0;
	}

	.ds-popup__body {
		gap: 14px;
		padding: 24px 20px 20px;
	}

	.ds-popup__title {
		font-size: 32px;
	}
}

@media (max-width: 599px) {
	/* 34px: "PULANG BAWA IKAN" muat satu baris di layar 375px. */
	.ds-hero__title {
		font-size: 34px;
	}
}

/* ---------------------------------------------------------------------------
   Penyeragaman hero, banner promo, dan popup dengan antarmuka situs.

   - Teks hero dan kartu banner berdiri di lebar konten yang SAMA dengan
     section lain (--ds-pad, maks. 1320px), bukan menjorok sendiri.
   - Tombol memakai .ds-btn--primary situs: sudut 10px, huruf kapital kecil.
   - Judul tebal 700 dengan huruf biasa, label kecil seperti .ds-kicker.
   - Panah dan penanda slide memakai bentuk tombol bulat situs, berkumpul di
     kanan bawah supaya tidak menabrak teks yang kini rata dengan tepi.
   --------------------------------------------------------------------------- */
.ds-hero__kicker {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2.34px;
}

.ds-hero__title {
	font-size: clamp(36px, 4.6vw, 64px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: none;
}

.ds-hero__desc {
	font-size: 17px;
}

.ds-hero__price {
	padding: 8px 18px 10px;
	border-radius: var(--ds-radius-sm);
}

.ds-hero__price-value {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Tombol hero = tombol utama situs; hanya tingginya disamakan dengan kotak harga. */
.ds-hero__cta.ds-btn--primary {
	min-height: 0;
	padding: 15px 34px;
	font-size: 13.5px;
	color: var(--ds-white);
	background: var(--ds-accent);
	border-radius: 10px;
}

.ds-hero__cta.ds-btn--primary:hover,
.ds-hero__cta.ds-btn--primary:focus-visible {
	color: var(--ds-white);
	background: var(--ds-accent-600);
}

@media (max-width: 599px) {
	.ds-hero__title {
		font-size: 30px;
	}

	.ds-hero__price-value {
		font-size: 22px;
	}

	.ds-hero__cta.ds-btn--primary {
		padding: 14px 24px;
	}
}

/* Banner promo: selebar konten section lain. */
.ds-promo {
	max-width: none;
	border-radius: var(--ds-radius-lg);
}

.ds-promo__panel {
	padding-left: 48px;
}

.ds-promo__label {
	font-weight: 500;
	letter-spacing: 2px;
}

.ds-promo__big {
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ds-promo__highlight {
	font-size: 30px;
	font-weight: 700;
	border-radius: var(--ds-radius-sm);
}

/* Di atas panel hijau tombol hijau tidak terlihat: bentuknya tetap tombol
   utama situs, warnanya gelap. */
.ds-promo__btn.ds-btn--primary {
	min-height: 0;
	padding: 15px 34px;
	font-size: 13.5px;
	color: var(--ds-white);
	background: #04080a;
	border-radius: 10px;
}

.ds-promo__btn.ds-btn--primary:hover,
.ds-promo__btn.ds-btn--primary:focus-visible {
	color: #04080a;
	background: var(--ds-white);
}

@media (max-width: 899px) {
	.ds-promo__panel {
		padding-left: 24px;
	}

	.ds-promo__big {
		font-size: 64px;
	}

	.ds-promo__highlight {
		font-size: 24px;
	}
}

/* Popup. */
.ds-popup__box {
	border-radius: var(--ds-radius-lg);
}

.ds-popup__tag {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2.34px;
	text-transform: uppercase;
}

.ds-popup__title {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.15;
}

.ds-popup__voucher {
	border-radius: var(--ds-radius);
}

.ds-popup__value {
	font-size: 19px;
	font-weight: 700;
	border-radius: var(--ds-radius-sm);
}

.ds-popup__cta.ds-btn--primary {
	min-height: 0;
	padding: 15px 34px;
	font-size: 13.5px;
	border-radius: 10px;
}

.ds-popup__close {
	width: 40px;
	height: 40px;
	background: rgba(4, 8, 10, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.28);
}

@media (max-width: 760px) {
	.ds-popup__box {
		border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
	}

	.ds-popup__title {
		font-size: 28px;
	}
}

/* Tautan "Kebijakan Privasi" di bilah cookie tidak terpisah baris. */
.ds-cookie__text a {
	white-space: nowrap;
}

/* Judul hero kembali huruf kapital supaya menonjol; ketebalan dan tombol
   tetap mengikuti gaya situs. */
.ds-hero__title {
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

/* Ikon panah SVG di tombol, sama seperti tombol lain di situs. */
.ds-hero__cta .ds-icon,
.ds-promo__btn .ds-icon,
.ds-popup__cta .ds-icon {
	flex: none;
}

/* Isi hero sejajar dengan tepi konten section lain (--ds-pad), sama seperti
   kartu banner promo dan judul section. Panah duduk di tengah ruang kosong di
   sampingnya; di layar yang ruang sampingnya kurang dari selebar panah,
   panah disembunyikan dan slide digeser lewat titik. */
.ds-hero__inner {
	padding-right: var(--ds-pad);
	padding-left: var(--ds-pad);
}

.ds-hero__arrow {
	width: 44px;
	height: 44px;
}

.ds-hero__arrow--up {
	left: calc((var(--ds-pad) - 44px) / 2);
}

.ds-hero__arrow--down {
	right: calc((var(--ds-pad) - 44px) / 2);
}

.ds-hero__count {
	right: var(--ds-pad);
}

@media (max-width: 1439px) {
	.ds-hero__arrow {
		display: none;
	}
}

/* ============================================================ 49. Kabari saya saat stok ada */

/* Formulir di bawah teks stok untuk produk/varian yang habis
   (plugin: modules/stok/back-in-stock.php). Disisipkan WooCommerce di dalam
   teks ketersediaan, jadi ia juga muncul saat varian habis dipilih. */
.ds-notify {
	margin: 12px 0 4px;
	padding: 16px;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	background: var(--ds-canvas);
}

.ds-notify__title {
	margin: 0 0 4px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-notify__text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ds-text-2);
}

.ds-notify__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ds-notify__form[hidden] {
	display: none;
}

.ds-notify__form input[type="email"] {
	flex: 1 1 220px;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ds-border-strong);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-bg-2);
	color: var(--ds-text);
	font: inherit;
}

.ds-notify__form input[type="email"]:focus {
	outline: 2px solid var(--ds-accent-line);
	outline-offset: 1px;
}

.ds-notify__form .ds-btn {
	flex: 0 0 auto;
	min-height: 44px;
}

/* Tanpa kolom email lagi: tombol "Kabari saya" diikuti keterangan kecil
   "Kami kirim ke email@akun", sejajar di layar lebar dan turun ke baris
   berikutnya di HP. Tamu mendapat tautan "Masuk untuk dikabari". */
.ds-notify__form {
	align-items: center;
}

.ds-notify__to {
	min-width: 0;
	font-size: 13px;
	color: var(--ds-text-2);
	overflow-wrap: anywhere;
}

/* Kotak "Anda akan dikabari" berakhir di teksnya; jarak bawah 12px untuk
   tombol tidak dibutuhkan lagi. */
.ds-notify__text:has(+ .ds-notify__msg:empty) {
	margin-bottom: 0;
}

.ds-notify__title + .ds-notify__form {
	margin-top: 10px;
}

.ds-notify__login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

.ds-notify__msg {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-notify__msg:empty {
	display: none;
}

.ds-notify.is-done .ds-notify__msg {
	color: var(--ds-accent-300);
}

.ds-notify.is-error .ds-notify__msg {
	color: var(--ds-danger-300);
}

/* Dua kolom (permintaan pemilik): kiri judul + keterangan email, kanan
   tombol. Di HP tetap bertumpuk, tombol selebar kotak supaya mudah diketuk. */
.ds-notify__info .ds-notify__text {
	margin-bottom: 0;
}

.ds-notify__info + .ds-notify__form,
.ds-notify__info + .ds-notify__login {
	margin-top: 14px;
}

@media (max-width: 767px) {
	.ds-notify__form .ds-btn,
	.ds-notify__login {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.ds-notify:has(> .ds-notify__info) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 24px;
		padding: 20px 24px;
	}

	.ds-notify__info + .ds-notify__form,
	.ds-notify__info + .ds-notify__login {
		margin-top: 0;
	}

	.ds-notify__form .ds-btn,
	.ds-notify__login {
		min-width: 180px;
	}

	.ds-notify:has(> .ds-notify__info) > .ds-notify__msg {
		grid-column: 1 / -1;
	}
}

/* ============================================================ 50. Harga grosir di halaman produk */

/* Tabel "Beli lebih banyak, lebih hemat" dari modul grosir plugin
   (modules/grosir/grosir.php), dicetak tepat di atas kolom jumlah. Bentuknya
   sengaja serupa kotak "Kabari saya": kotak berbingkai di atas kanvas, karena
   keduanya sama-sama keterangan tambahan untuk tombol beli di bawahnya. */
.ds-grosir {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	background: var(--ds-canvas);
}

.ds-grosir__title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-grosir__tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-grosir__tier {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 112px;
	padding: 8px 12px;
	border: 1px solid var(--ds-border-strong);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-bg-2);
}

.ds-grosir__tier[hidden] {
	display: none;
}

.ds-grosir__qty {
	font-size: 12px;
	color: var(--ds-text-2);
}

.ds-grosir__price {
	font-size: 14px;
	font-weight: 600;
	color: var(--ds-text);
}

/* Tingkat yang sedang dicapai jumlah di kolom jumlah. */
.ds-grosir__tier.is-on {
	border-color: var(--ds-accent-line);
	background: var(--ds-accent-700);
}

.ds-grosir__tier.is-on .ds-grosir__qty,
.ds-grosir__tier.is-on .ds-grosir__price {
	color: var(--ds-voucher-text);
}

.ds-grosir__hint {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ds-accent-300);
}

.ds-grosir__hint:empty {
	display: none;
}

.ds-grosir__note {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ds-text-3);
}

@media (max-width: 600px) {
	.ds-grosir__tier {
		flex: 1 1 calc(50% - 4px);
		min-width: 0;
	}
}

/* Lencana "Harga grosir mulai N pcs" di kartu produk (template-parts/
   card-product.php). Pil kecil bergaris hijau di bawah harga: cukup terlihat
   untuk pembeli partai besar, tapi tidak bersaing dengan harga itu sendiri. */
.ds-product__grosir {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0 14px 8px;
}

.ds-product__grosir span {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--ds-accent-600);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ds-accent-300);
}

.ds-shop__grid.is-list .ds-product__grosir {
	justify-content: flex-start;
}

/* ============================================================ 51. Pre-order */

/* Kotak pre-order dari modul plugin (modules/preorder/preorder.php). Ia
   menggantikan teks stok WooCommerce, jadi muncul di tempat yang sama dengan
   kotak "Kabari saya" - termasuk saat varian dipilih. Warnanya emas, bukan
   hijau "Tersedia": pembeli harus berhenti sejenak dan membaca tanggalnya. */
.ds-preorder {
	margin: 0 0 16px;
	padding: 14px 16px;
	background: rgba(232, 181, 74, 0.08);
	border: 1px solid rgba(232, 181, 74, 0.45);
	border-radius: var(--ds-radius);
}

.ds-preorder__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: center;
	margin: 0;
}

.ds-preorder__badge {
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ds-bg-0);
	background: var(--ds-gold);
	border-radius: 99px;
}

.ds-preorder__eta {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-preorder__note,
.ds-preorder__quota,
.ds-preorder__how {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ds-text-2);
}

.ds-preorder__quota {
	font-weight: 600;
	color: var(--ds-gold);
}

.ds-preorder__how {
	font-size: 12px;
	color: var(--ds-text-3);
}

/* Produk "hanya saat stok habis" yang masih punya stok: satu baris petunjuk. */
.ds-preorder-hint {
	margin: 0 0 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ds-text-2);
}

/* Chip "Ketersediaan" di daftar fakta, sejajar dengan .ds-pd__stock. */
.ds-pd__stock.is-preorder {
	color: var(--ds-gold);
	background: rgba(232, 181, 74, 0.12);
	border-color: rgba(232, 181, 74, 0.45);
}

/* Lencana di kartu produk. Teks gelap di atas emas: kontrasnya di atas 9:1,
   sedangkan teks putih di atas emas gagal WCAG AA. */
.ds-badge--preorder {
	color: var(--ds-bg-0);
	background: var(--ds-gold);
}

/* ============================================================ 52. Retur */

/* Halaman Akun Saya → Retur dan kotak "Retur barang" di rincian pesanan, dari
   modul plugin (modules/retur/retur.php). Kerangkanya memakai kartu, garis
   waktu, lencana, dan tombol rincian pesanan (.ds-od, .ds-ord__btn) supaya
   retur terasa bagian dari halaman pesanan, bukan halaman tempelan. Yang
   ditulis di sini hanya bagian yang tidak dimiliki halaman pesanan:
   formulir, daftar barang, foto, dan kotak alamat. */

.ds-retur [hidden] {
	display: none !important;
}

/* Kotak di rincian pesanan dicetak sesudah .ds-od milik template, jadi diberi
   jarak sendiri supaya tidak menempel pada kartu alamat di atasnya. */
.ds-retur--box {
	margin-top: 20px;
}

.ds-retur .ds-od__head {
	flex-wrap: wrap;
}

.ds-retur .ds-retur__cta {
	margin-top: 14px;
}

.ds-retur__hint {
	margin-bottom: 14px !important;
}

/* ---- Daftar kecil: retur sebuah pesanan, pesanan yang bisa diretur ---- */

.ds-retur__mini,
.ds-retur__orders,
.ds-retur__items,
.ds-retur__pick {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-retur__mini {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-bottom: 14px;
}

.ds-retur__mini li {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	font-size: 14px;
	color: var(--ds-text);
}

.ds-retur__orders li {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-top: 1px solid var(--ds-border);
}

.ds-retur__orders li:first-child {
	padding-top: 0;
	border-top: 0;
}

.ds-retur__ordinfo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ds-retur__ordinfo strong {
	font-size: 15px;
	color: var(--ds-text);
}

.ds-retur__ordinfo span {
	font-size: 13px;
	color: var(--ds-text-2);
}

/* ---- Kartu satu retur ---- */

.ds-retur__items li {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 14px;
	color: var(--ds-text);
	border-bottom: 1px solid var(--ds-border);
}

.ds-retur__items li span:last-child {
	flex: none;
	color: var(--ds-text-2);
}

.ds-retur__facts {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 8px 16px;
	margin: 16px 0 0;
	font-size: 14px;
}

.ds-retur__facts dt {
	color: var(--ds-text-2);
}

.ds-retur__facts dd {
	margin: 0;
	color: var(--ds-text);
	overflow-wrap: anywhere;
}

.ds-retur__facts a {
	color: var(--ds-accent-300);
}

.ds-retur__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.ds-retur__photos a {
	display: block;
	overflow: hidden;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

.ds-retur__photos img {
	width: 84px;
	height: 84px;
	object-fit: cover;
}

.ds-retur .ds-retur__time {
	margin-top: 16px;
	padding-top: 6px;
	border-top: 1px solid var(--ds-border);
}

/* Kotak alamat pengembalian dan alasan penolakan. Hijau tipis untuk langkah
   yang harus dikerjakan pembeli, merah tipis untuk penolakan. */
.ds-retur__note {
	margin-top: 16px;
	padding: 16px 18px;
	font-size: 14px;
	line-height: 22px;
	color: var(--ds-text-2);
	background: rgba(46, 158, 119, 0.08);
	border: 1px solid rgba(46, 158, 119, 0.4);
	border-radius: var(--ds-radius);
}

.ds-retur__note strong {
	color: var(--ds-text);
}

.ds-retur__note p {
	margin: 8px 0 0;
}

.ds-retur__note--off {
	background: rgba(217, 72, 59, 0.08);
	border-color: rgba(217, 72, 59, 0.45);
}

.ds-retur__note--off p {
	color: var(--ds-danger-300);
}

.ds-retur__note .ds-retur__addr {
	padding: 10px 12px;
	font-weight: 600;
	color: var(--ds-text);
	background: var(--ds-canvas);
	border-radius: var(--ds-radius-sm);
}

.ds-retur__resi {
	margin-top: 16px;
}

.ds-retur__lead {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--ds-text);
}

.ds-retur__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.ds-retur__cancel {
	margin-top: 14px;
}

.ds-retur__link {
	padding: 0;
	font: inherit;
	font-size: 13.5px;
	color: var(--ds-text-2);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-retur__link:hover {
	color: var(--ds-danger-300);
}

/* ---- Formulir pengajuan ---- */

.ds-retur__error {
	margin: 0;
	padding: 14px 18px;
	font-size: 14px;
	line-height: 22px;
	color: var(--ds-danger-300);
	background: rgba(217, 72, 59, 0.08);
	border: 1px solid rgba(217, 72, 59, 0.45);
	border-radius: var(--ds-radius);
}

.ds-retur__error ul {
	margin: 6px 0 0;
	padding-left: 18px;
}

.ds-retur__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ds-retur__pick li {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid var(--ds-border);
}

.ds-retur__pick li:first-child {
	border-top: 0;
}

.ds-retur__pick li.is-off {
	opacity: 0.55;
}

.ds-retur__thumb {
	flex: none;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: var(--ds-canvas);
	border-radius: var(--ds-radius-sm);
}

.ds-retur__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-retur__name {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ds-retur__name strong {
	font-size: 14.5px;
	color: var(--ds-text);
}

.ds-retur__name span {
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-retur__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

/* Pilihan berbentuk tombol: radionya tetap ada (untuk papan ketik dan
   pembaca layar), hanya disembunyikan dari pandangan. */
.ds-retur__choice {
	position: relative;
	cursor: pointer;
}

.ds-retur__choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ds-retur__choice span {
	display: inline-block;
	padding: 9px 16px;
	font-size: 14px;
	color: var(--ds-text-2);
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 999px;
}

.ds-retur__choice:hover span {
	border-color: var(--ds-accent);
}

.ds-retur__choice input:checked + span {
	font-weight: 600;
	color: var(--ds-text);
	background: rgba(46, 158, 119, 0.14);
	border-color: var(--ds-accent);
}

.ds-retur__choice input:focus-visible + span {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

.ds-retur__field,
.ds-retur__fields label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--ds-text);
}

.ds-retur__fields label {
	margin-bottom: 0;
}

.ds-retur__field > span,
.ds-retur__fields label > span {
	font-weight: 600;
}

.ds-retur__req {
	font-style: normal;
	font-weight: 400;
	color: var(--ds-gold);
}

.ds-retur__field small {
	font-size: 12.5px;
	line-height: 19px;
	color: var(--ds-text-3);
}

.ds-retur input[type="text"],
.ds-retur input[type="number"],
.ds-retur textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--ds-text);
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

.ds-retur textarea {
	min-height: 110px;
	resize: vertical;
}

.ds-retur input:focus,
.ds-retur textarea:focus {
	border-color: var(--ds-accent);
	outline: none;
}

.ds-retur input[type="file"] {
	padding: 10px;
	font-size: 14px;
	color: var(--ds-text-2);
	background: var(--ds-canvas);
	border: 1px dashed var(--ds-border-strong);
	border-radius: 10px;
}

/* Kolom jumlah per barang sengaja sempit: isinya paling banyak dua angka. */
.ds-retur .ds-retur__qty input {
	width: 84px;
	text-align: center;
}

@media (max-width: 599px) {
	.ds-retur__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.ds-retur__facts dd {
		margin-bottom: 8px;
	}

	.ds-retur__pick li {
		flex-wrap: wrap;
	}

	/* Kolom jumlah turun ke bawah nama barang, sejajar dengan teksnya
	   (lebar foto 56px + jarak 14px). */
	.ds-retur__qty {
		margin-left: 70px;
	}

	.ds-retur__orders .ds-ord__btn {
		justify-content: center;
		width: 100%;
	}
}

/* ============================================================ 53. Sering dibeli bersama */

/* Section "Sering dibeli bersama" / "Cocok dipakai bersama" di halaman produk
 * (template-parts/product/bundel.php). Bentuknya sengaja sekeluarga dengan
 * Combo Hemat (bagian 19): kartu gelap, foto di latar putih, kotak centang di
 * sudut foto - pembeli sudah belajar membacanya di sana.
 */

/* Gulir ke section berhenti di bawah header yang menempel. */
#ds-fbt {
	scroll-margin-top: calc(var(--ds-header-top) + var(--ds-header-bar) + 16px);
}

/* Padding kiri-kanan .ds-section dinolkan: section ini sudah di dalam
   .ds-shell--pad (alasan yang sama dengan .ds-section--related). */
.ds-fbt {
	padding: 48px 0 0;
}

.ds-fbt .ds-section__head {
	margin-bottom: 22px;
}

.ds-fbt .ds-section__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

/* Barang di kiri, panel total di kanan. Panel dibatasi 360px supaya tidak
   melar jadi kotak besar yang hampir kosong. */
.ds-fbt__box {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(280px, 360px);
	justify-content: start;
	gap: 24px;
	align-items: stretch;
}

.ds-fbt__items {
	display: flex;
	gap: 12px;
	align-items: stretch;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-fbt__item {
	display: flex;
	flex: 0 1 auto;
	gap: 12px;
	align-items: center;
	min-width: 0;
}

.ds-fbt__plus {
	flex: none;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	color: var(--ds-text-3);
}

/* Lebar eksplisit, sama alasannya dengan .ds-combo__prod: kolom grid
   "selebar isi" dihitung dari panjang nama, bukan dari flex-basis. */
.ds-fbt__card {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	width: 200px;
	min-width: 0;
	overflow: hidden;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	transition: opacity 0.18s ease, border-color 0.18s ease;
}

.ds-fbt__item.is-current .ds-fbt__card {
	border-color: var(--ds-accent-line);
}

/* Barang yang dilepas diredupkan, bukan dihilangkan - pembeli harus bisa
   melihat apa yang ia lepas dan mencentangnya lagi. */
.ds-fbt__item.is-off .ds-fbt__card {
	opacity: 0.5;
	border-color: var(--ds-border);
}

/* Foto katalog biasanya berlatar putih; di latar gelap tepinya terlihat
   seperti kotak tempelan. */
.ds-fbt__media {
	position: relative;
	aspect-ratio: 1 / 1;
	margin: 10px 10px 0;
	overflow: hidden;
	background: var(--ds-white);
	border-radius: 8px;
}

.ds-fbt__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Sasaran sentuh 44px, lebih besar dari kotaknya sendiri. */
.ds-fbt__pick {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	cursor: pointer;
}

.ds-fbt__pick input {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--ds-accent);
	cursor: pointer;
}

.ds-fbt__meta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px 14px;
}

.ds-fbt__tag {
	align-self: flex-start;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-accent-300);
	background: var(--ds-accent-700);
	border-radius: 999px;
}

.ds-fbt__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ds-text);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

a.ds-fbt__name:hover {
	color: var(--ds-accent-300);
}

.ds-fbt__price {
	margin-top: auto;
	font-size: 14px;
	color: var(--ds-text-2);
}

.ds-fbt__price del {
	margin-right: 4px;
	font-size: 12px;
	color: var(--ds-text-3);
}

.ds-fbt__price ins {
	text-decoration: none;
	color: var(--ds-text);
}

.ds-fbt__variant {
	align-self: flex-start;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ds-accent-300);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ds-fbt__variant:hover {
	color: var(--ds-text);
}

/* ---- Panel total ---- */

.ds-fbt__panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	padding: 24px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-lg);
}

.ds-fbt__label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ds-text-2);
}

.ds-fbt__total {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ds-text);
}

.ds-fbt__combo {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ds-accent-300);
}

.ds-fbt__combo[hidden] {
	display: none;
}

.ds-fbt__combo .ds-icon {
	flex: none;
	margin-top: 1px;
}

.ds-fbt__note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ds-text-2);
}

/* Padding samping tombol utama (34px) terlalu lebar untuk kalimat lima kata
   di panel 360px - tulisannya patah jadi dua baris. */
.ds-fbt__add {
	width: 100%;
	margin-top: 8px;
	padding-right: 16px;
	padding-left: 16px;
	letter-spacing: 0.8px;
	cursor: pointer;
}

.ds-fbt__add:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ds-fbt__add.is-loading {
	opacity: 0.65;
	cursor: progress;
}

/* Kotak centang barang bervarian baru muncul setelah variannya dipilih. */
.ds-fbt__pick[hidden] {
	display: none;
}

.ds-fbt__chosen {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ds-accent-300);
}

.ds-fbt__chosen[hidden] {
	display: none;
}

/* ---- Popup "Pilih varian" ---- */

.ds-fbt__dialog {
	width: min(480px, calc(100vw - 32px));
	max-height: min(640px, calc(100dvh - 32px));
	padding: 0;
	overflow: hidden;
	color: var(--ds-text);
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border-strong);
	border-radius: var(--ds-radius-lg);
}

.ds-fbt__dialog::backdrop {
	background: var(--ds-overlay);
}

.ds-fbt__dlg {
	display: flex;
	flex-direction: column;
	max-height: inherit;
}

.ds-fbt__dlg-head {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 18px 18px 14px;
	border-bottom: 1px solid var(--ds-border);
}

.ds-fbt__dlg-media {
	flex: none;
	width: 72px;
	height: 72px;
	overflow: hidden;
	background: var(--ds-white);
	border-radius: 8px;
}

.ds-fbt__dlg-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ds-fbt__dlg-info {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-fbt__dlg-title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ds-fbt__dlg-price {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 700;
}

.ds-fbt__dlg-price del {
	margin-right: 4px;
	font-size: 12px;
	font-weight: 400;
	color: var(--ds-text-3);
}

.ds-fbt__dlg-price ins {
	text-decoration: none;
}

.ds-fbt__dlg-x {
	flex: none;
	align-self: flex-start;
	width: 36px;
	height: 36px;
	font-size: 24px;
	line-height: 1;
	color: var(--ds-text-2);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 50%;
}

.ds-fbt__dlg-x:hover {
	color: var(--ds-text);
	background: var(--ds-surface);
}

.ds-fbt__dlg-opts {
	min-height: 0;
	margin: 0;
	padding: 14px 18px;
	overflow-y: auto;
	border: 0;
}

.ds-fbt__dlg-legend {
	margin-bottom: 10px;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ds-text-2);
}

/* Yang digulir daftarnya, bukan <fieldset>-nya. Chrome tidak membatasi
 * tinggi isi fieldset di dalam kolom flex: varian ke-8 dan seterusnya
 * menumpuk di belakang tombol Batal / Pakai varian ini dan tidak bisa
 * digulir sama sekali. Tinggi maksimal = tinggi popup dikurangi kepala
 * (foto + nama, sampai ~130px), judul "Pilih varian" + padding (~60px), dan
 * kaki tombol (~80px), dibulatkan ke 290px. */
.ds-fbt__dlg-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: max(120px, calc(min(640px, 100dvh - 32px) - 290px));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ds-fbt__opt {
	display: flex;
	gap: 12px;
	align-items: center;
	min-height: 48px;
	padding: 10px 14px;
	cursor: pointer;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
}

.ds-fbt__opt:hover {
	border-color: var(--ds-border-strong);
}

.ds-fbt__opt:has(input:checked) {
	border-color: var(--ds-accent-line);
	box-shadow: inset 0 0 0 1px var(--ds-accent-line);
}

.ds-fbt__opt input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ds-accent);
}

.ds-fbt__opt-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
}

.ds-fbt__opt-price {
	flex: none;
	font-size: 13px;
	color: var(--ds-text-2);
	white-space: nowrap;
}

.ds-fbt__opt-price del {
	margin-right: 4px;
	font-size: 12px;
	color: var(--ds-text-3);
}

.ds-fbt__opt-price ins {
	text-decoration: none;
	color: var(--ds-text);
}

.ds-fbt__opt.is-sold {
	cursor: not-allowed;
	opacity: 0.5;
}

.ds-fbt__dlg-foot {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding: 14px 18px 18px;
	border-top: 1px solid var(--ds-border);
}

.ds-fbt__dlg-foot .ds-btn {
	cursor: pointer;
}

.ds-fbt__dlg-foot .ds-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.ds-fbt__dlg-foot .ds-btn {
		flex: 1 1 0;
		padding-right: 12px;
		padding-left: 12px;
	}
}

/* ---- Layar sedang dan ponsel ---- */

/* Panel pindah ke bawah barang; barang yang tidak muat digulir ke samping. */
@media (max-width: 1199px) {
	.ds-fbt__box {
		grid-template-columns: minmax(0, 1fr);
	}

	.ds-fbt__items {
		overflow-x: auto;
		padding-bottom: 6px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.ds-fbt__item {
		flex: none;
		scroll-snap-align: start;
	}
}

@media (max-width: 599px) {
	.ds-fbt {
		padding-top: 40px;
	}

	.ds-fbt .ds-section__title {
		font-size: 20px;
		line-height: 28px;
	}

	/* 150px: di layar 375px dua kartu dan sebagian kartu ketiga terlihat,
	   jadi jelas ada yang bisa digeser. */
	.ds-fbt__items,
	.ds-fbt__item {
		gap: 8px;
	}

	.ds-fbt__card {
		width: 150px;
	}

	.ds-fbt__media {
		margin: 8px 8px 0;
	}

	.ds-fbt__meta {
		padding: 10px 10px 12px;
	}

	.ds-fbt__name,
	.ds-fbt__price {
		font-size: 13px;
	}

	.ds-fbt__plus {
		font-size: 18px;
	}

	.ds-fbt__panel {
		padding: 20px;
	}

	.ds-fbt__total {
		font-size: 24px;
	}
}

/* ============================================================ 54. Ulasan dengan foto */

/* Foto di ulasan produk (plugin modules/ulasan/review-photos.php): kolom foto
 * di formulir, gambar kecil di bawah tiap ulasan, deretan "Foto dari pembeli"
 * di atas daftar, dan lightbox <dialog>. Semua warna dari token :root.
 */

/* ---- Deretan "Foto dari pembeli" ---- */

.ds-rvp-strip {
	margin-bottom: 22px;
	padding: 18px 20px;
	background: var(--ds-surface);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
}

.ds-rvp-strip__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ds-text);
}

/* Di HP deretannya digeser ke samping, bukan dibungkus ke bawah: delapan
   foto bertumpuk empat baris mendorong ulasan pertama jauh dari layar. */
.ds-rvp-strip__list {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0 0 4px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
}

.ds-rvp-strip__list li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.ds-rvp-strip .ds-rvp-thumb {
	width: 88px;
	height: 88px;
}

/* ---- Gambar kecil (dipakai deretan dan tiap ulasan) ---- */

.ds-rvp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ds-rvp-thumb {
	display: block;
	width: 72px;
	height: 72px;
	padding: 0;
	overflow: hidden;
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
	cursor: zoom-in;
}

.ds-rvp-thumb:hover {
	border-color: var(--ds-accent-line);
}

.ds-rvp-thumb:focus-visible {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

.ds-rvp-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Kolom foto di formulir ---- */

.ds-rvp-field[hidden] {
	display: none;
}

.ds-rvp-field__label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ds-text-2);
}

.ds-rvp-field__hint {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 18px;
	color: var(--ds-text-3);
}

/* Input aslinya disembunyikan secara tampilan; yang diklik tombol "Tambah
   foto" (lebih mudah diberi gaya dan dibaca pembaca layar). */
.ds-rvp-field__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ds-rvp-field__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-rvp-field__list:not(:empty) {
	margin-bottom: 10px;
}

.ds-rvp-field__item {
	position: relative;
	width: 76px;
	height: 76px;
}

.ds-rvp-field__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

/* Tombol hapus 28px dengan area sentuh cukup di HP. */
.ds-rvp-field__remove {
	position: absolute;
	top: -8px;
	right: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: var(--ds-text);
	background: var(--ds-bg-2);
	border: 1px solid var(--ds-border-strong);
	border-radius: 50%;
	cursor: pointer;
}

.ds-rvp-field__remove:hover {
	color: var(--ds-danger-300);
	border-color: var(--ds-danger);
}

.ds-rvp-field__add {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	min-height: 42px;
	padding: 0 16px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ds-accent-300);
	background: transparent;
	border: 1px dashed var(--ds-accent-line);
	border-radius: 10px;
	cursor: pointer;
}

.ds-rvp-field__add:hover {
	background: var(--ds-canvas);
}

.ds-rvp-field__add:focus-visible,
.ds-rvp-field__remove:focus-visible {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

.ds-rvp-field__add:disabled {
	color: var(--ds-text-3);
	border-color: var(--ds-border);
	cursor: not-allowed;
}

.ds-rvp-field__error {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--ds-danger-300);
}

.ds-rvp-field__error:empty {
	display: none;
}

/* ---- Lightbox ---- */

.ds-rvp-box {
	width: min(960px, 100vw - 32px);
	max-width: none;
	max-height: calc(100vh - 32px);
	padding: 0;
	color: var(--ds-text);
	background: var(--ds-bg-1);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-lg);
}

.ds-rvp-box::backdrop {
	background: color-mix(in srgb, var(--ds-bg-0) 88%, transparent);
}

.ds-rvp-box__inner {
	position: relative;
	padding: 16px;
}

.ds-rvp-box__fig {
	margin: 0;
}

.ds-rvp-box__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100vh - 140px);
	object-fit: contain;
	background: var(--ds-bg-0);
	border-radius: var(--ds-radius);
}

.ds-rvp-box__cap {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	padding: 12px 48px 0 2px;
	font-size: 14px;
}

.ds-rvp-box__stars {
	letter-spacing: 1px;
	color: var(--ds-gold);
}

.ds-rvp-box__count {
	margin-left: auto;
	font-size: 13px;
	color: var(--ds-text-2);
}

.ds-rvp-box__close,
.ds-rvp-box__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--ds-text);
	background: var(--ds-bg-2);
	border: 1px solid var(--ds-border-strong);
	border-radius: 50%;
	cursor: pointer;
}

.ds-rvp-box__close {
	top: 24px;
	right: 24px;
	z-index: 1;
}

.ds-rvp-box__nav {
	top: calc(50% - 40px);
}

.ds-rvp-box__nav--prev {
	left: 24px;
}

.ds-rvp-box__nav--next {
	right: 24px;
}

.ds-rvp-box__nav[hidden] {
	display: none;
}

.ds-rvp-box__close:hover,
.ds-rvp-box__nav:hover {
	border-color: var(--ds-accent-line);
}

.ds-rvp-box__close:focus-visible,
.ds-rvp-box__nav:focus-visible {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.ds-rvp-strip {
		padding: 14px;
	}

	.ds-rvp-strip .ds-rvp-thumb {
		width: 76px;
		height: 76px;
	}

	.ds-rvp-thumb {
		width: 64px;
		height: 64px;
	}

	/* Di HP lightbox memenuhi layar, tombol panah turun ke bawah foto supaya
	   tidak menutupi bagian tengahnya. */
	.ds-rvp-box {
		width: 100vw;
		max-height: 100vh;
		border-radius: 0;
	}

	.ds-rvp-box__inner {
		padding: 12px 12px 68px;
	}

	.ds-rvp-box__close {
		top: 18px;
		right: 18px;
	}

	.ds-rvp-box__nav {
		top: auto;
		bottom: 12px;
	}

	.ds-rvp-box__nav--prev {
		left: calc(50% - 52px);
	}

	.ds-rvp-box__nav--next {
		right: calc(50% - 52px);
	}
}

/* ============================================================ 55. Pengingat keranjang (checkout tamu) */

/* Pemberitahuan kecil di bawah kolom email untuk pembeli tamu (dicetak plugin,
   modules/email/guest-cart.php). Sengaja tenang - teks abu kecil, bukan kotak
   peringatan - karena isinya keterangan jujur, bukan sesuatu yang harus
   dikerjakan pembeli. Tombol "Jangan ingatkan saya" tampil seperti tautan
   tapi tetap <button>, supaya bisa dijangkau keyboard tanpa berpindah halaman. */
.ds-gc-note {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ds-text-3);
}

.ds-gc-note__off {
	display: inline;
	padding: 0;
	font: inherit;
	color: var(--ds-text-2);
	text-decoration: underline;
	text-underline-offset: 2px;
	background: none;
	border: 0;
	cursor: pointer;
}

.ds-gc-note__off:hover {
	color: var(--ds-accent-300);
}

.ds-gc-note__off:focus-visible {
	outline: 2px solid var(--ds-accent-line);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Sesudah memilih "Jangan ingatkan saya": kalimat penegasan berwarna aksen,
   supaya pembeli tahu pilihannya sudah tercatat. */
.ds-gc-note.is-off {
	color: var(--ds-accent-300);
}

/* ============================================================ 56. Referal */

/* Program referal dari modul plugin (modules/referal/referal.php): kotak
   "Bagikan & dapat komisi" di halaman produk dan halaman Akun Saya → Referal.
   Halaman akunnya memakai kartu dan tombol rincian pesanan (.ds-od,
   .ds-ord__btn) supaya terasa satu keluarga dengan Pesanan dan Retur; yang
   ditulis di sini hanya bagian yang tidak dimiliki halaman itu. */

.ds-ref [hidden] {
	display: none !important;
}

/* ---- Baris tautan: kolom + Salin + WhatsApp (dipakai di dua tempat) ---- */

.ds-ref-link {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.ds-ref-link__input {
	flex: 1 1 220px;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--ds-text-2);
	background: var(--ds-bg-2);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
}

.ds-ref-link__input:focus {
	color: var(--ds-text);
	border-color: var(--ds-accent);
	outline: none;
}

.ds-ref-link__btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ds-text);
	text-decoration: none;
	background: none;
	border: 1px solid var(--ds-border-strong);
	border-radius: var(--ds-radius-sm);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ds-ref-link__btn:hover,
.ds-ref-link__btn:focus-visible,
.ds-ref-link__btn.is-copied {
	color: var(--ds-accent-300);
	border-color: var(--ds-accent);
}

.ds-ref-link__btn:focus-visible {
	outline: 2px solid var(--ds-accent-line);
	outline-offset: 2px;
}

/* Tombol WhatsApp diberi warna aksen: tujuan utama kotak ini adalah
   membagikan, dan WhatsApp jalur yang paling sering dipakai pembeli. */
.ds-ref-link__btn--wa {
	color: var(--ds-white);
	background: var(--ds-accent);
	border-color: var(--ds-accent);
}

.ds-ref-link__btn--wa:hover,
.ds-ref-link__btn--wa:focus-visible {
	color: var(--ds-white);
	background: var(--ds-accent-600);
	border-color: var(--ds-accent-600);
}

/* ---- Kotak di halaman produk ---- */

/* Bentuknya sama dengan kotak grosir dan "Kabari saya": kotak berbingkai di
   atas kanvas, karena sama-sama keterangan tambahan di kolom beli. */
.ds-ref-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0 0;
	padding: 14px 16px;
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
}

.ds-ref-box__title {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: baseline;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-ref-box__amount {
	padding: 2px 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ds-voucher-text);
	background: rgba(46, 158, 119, 0.14);
	border-radius: 999px;
}

.ds-ref-box__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ds-text-2);
}

.ds-ref-box__cta {
	margin-left: 4px;
	font-weight: 600;
	color: var(--ds-accent-300);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ds-ref-box__cta:hover {
	color: var(--ds-text);
}

/* ---- Halaman Akun Saya → Referal ---- */

.ds-ref__flash {
	margin: 0;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 22px;
	border-radius: var(--ds-radius);
}

.ds-ref__flash--ok {
	color: var(--ds-voucher-text);
	background: rgba(46, 158, 119, 0.1);
	border: 1px solid rgba(46, 158, 119, 0.45);
}

.ds-ref__flash--error {
	color: var(--ds-danger-300);
	background: rgba(217, 72, 59, 0.08);
	border: 1px solid rgba(217, 72, 59, 0.45);
}

.ds-ref__small {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 19px;
	color: var(--ds-text-3);
}

/* Tiga langkah bernomor di halaman gabung. */
.ds-ref__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: ds-ref-step;
}

.ds-ref__steps li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: var(--ds-bg-2);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	counter-increment: ds-ref-step;
}

.ds-ref__steps li::before {
	content: counter(ds-ref-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ds-white);
	background: var(--ds-accent);
	border-radius: 50%;
}

.ds-ref__steps strong {
	font-size: 14px;
	color: var(--ds-text);
}

.ds-ref__steps span {
	font-size: 13px;
	line-height: 1.55;
	color: var(--ds-text-2);
}

.ds-ref__join {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--ds-border);
}

.ds-ref__agree {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 22px;
	color: var(--ds-text);
	cursor: pointer;
}

.ds-ref__agree input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--ds-accent);
}

.ds-ref__join .ds-ref__small {
	margin: 0;
}

/* Kode dicetak besar: itulah yang paling sering disalin atau didiktekan. */
.ds-ref__code {
	margin: 0 0 18px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 3px;
	color: var(--ds-accent-300);
}

.ds-ref__stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-ref__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 12px 14px;
	background: var(--ds-bg-2);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
}

.ds-ref__stat span {
	font-size: 12.5px;
	color: var(--ds-text-3);
}

.ds-ref__stat strong {
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	color: var(--ds-text);
	overflow-wrap: anywhere;
}

.ds-ref__stat--paid strong {
	color: var(--ds-accent-300);
}

/* ---- Pencarian dan daftar produk berkomisi ---- */

.ds-ref__search {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.ds-ref__search input[type="search"] {
	flex: 1;
	min-width: 0;
}

.ds-ref__products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-ref__prod {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 12px 14px;
	align-items: center;
	padding: 14px 0;
	border-top: 1px solid var(--ds-border);
}

.ds-ref__prod:first-child {
	padding-top: 0;
	border-top: 0;
}

.ds-ref__thumb img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	background: var(--ds-bg-2);
	border-radius: var(--ds-radius-sm);
}

.ds-ref__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ds-ref__info a {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ds-text);
	text-decoration: none;
}

.ds-ref__info a:hover {
	color: var(--ds-accent-300);
}

.ds-ref__info span {
	font-size: 13px;
	color: var(--ds-voucher-text);
}

.ds-ref__products + .ds-ref__small {
	margin-top: 18px;
	margin-bottom: 8px;
}

/* ---- Tabel rekap dan pesanan ---- */

/* Bergeser ke samping di layar sempit, bukan menekan kolom angka sampai
   terbelah dua baris. */
.ds-ref__scroll {
	overflow-x: auto;
}

.ds-ref__table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 14px;
}

.ds-ref__table th,
.ds-ref__table td {
	padding: 10px 12px 10px 0;
	text-align: left;
	vertical-align: middle;
	color: var(--ds-text);
	border-bottom: 1px solid var(--ds-border);
}

.ds-ref__table thead th {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ds-text-3);
}

.ds-ref__table tbody th {
	font-weight: 500;
}

.ds-ref__table tr:last-child td,
.ds-ref__table tr:last-child th {
	border-bottom: 0;
}

.ds-ref__table .num {
	padding-right: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ds-ref__table .num + td {
	padding-left: 16px;
}

.ds-ref__chip {
	display: inline-block;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 999px;
}

.ds-ref__chip--menunggu {
	color: var(--ds-gold);
	background: rgba(232, 181, 74, 0.12);
}

.ds-ref__chip--disetujui {
	color: var(--ds-accent-300);
	background: rgba(46, 158, 119, 0.14);
}

.ds-ref__chip--dibayar {
	color: var(--ds-article-kicker);
	background: rgba(143, 182, 199, 0.14);
}

.ds-ref__chip--dibatalkan {
	color: var(--ds-text-3);
	background: rgba(154, 165, 171, 0.12);
}

/* ---- Rekening dan kolom isian ---- */

.ds-ref__bank {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-top: 16px;
}

.ds-ref__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	width: 100%;
}

.ds-ref__fields label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ds-text);
}

.ds-ref input[type="text"]:not(.ds-ref-link__input),
.ds-ref input[type="search"] {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	color: var(--ds-text);
	background: var(--ds-canvas);
	border: 1px solid var(--ds-border);
	border-radius: 10px;
}

.ds-ref input[type="text"]:not(.ds-ref-link__input):focus,
.ds-ref input[type="search"]:focus {
	border-color: var(--ds-accent);
	outline: none;
}

.ds-ref__search .ds-ord__btn {
	justify-content: center;
	min-height: 46px;
}

.ds-ref__more summary {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ds-text);
	cursor: pointer;
}

.ds-ref__more[open] summary {
	margin-bottom: 14px;
}

@media (max-width: 899px) {
	.ds-ref__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Kotak kelima (Dibayar) melebar penuh supaya tidak ada sel kosong. */
	.ds-ref__stat--paid {
		grid-column: 1 / -1;
	}

	.ds-ref__prod {
		grid-template-columns: 56px minmax(0, 1fr);
	}

	.ds-ref__prod .ds-ref-link {
		grid-column: 1 / -1;
	}
}

@media (max-width: 599px) {
	.ds-ref__steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.ds-ref__code {
		font-size: 24px;
	}

	.ds-ref-link__btn {
		flex: 1 1 0;
	}

	.ds-ref__join .ds-ord__btn,
	.ds-ref__bank .ds-ord__btn {
		justify-content: center;
		width: 100%;
	}
}

/* ============================================ 57. Sasaran sentuh minimal
 *
 * Audit Oktober 2026: banyak tautan dan tombol kecil di HP hanya setinggi
 * 15-22px (remah roti, brand, "Tanya lewat WhatsApp", wishlist, urutkan,
 * ikon kata sandi, kotak centang). WCAG 2.2 AA meminta minimal 24px; untuk
 * jari, 44px jauh lebih aman.
 *
 * Caranya dibuat tanpa menggeser tata letak: padding atas-bawah memperbesar
 * area yang bisa diketuk, dan margin negatif yang sama besar mengembalikan
 * jaraknya. Tulisan tetap di tempat yang sama, hanya "kotak ketuknya" yang
 * membesar.
 */

/* Tombol garis tiga: 40 -> 44px di semua lebar (hanya tampil di layar kecil). */
.ds-header__burger {
	width: 44px;
	height: 44px;
}

/* Ikon "Tampilkan kata sandi" 22px: padding 11px menjadikannya 44px, dan
   posisinya digeser 11px supaya ikonnya tetap di tempat semula. Selektornya
   panjang karena gaya WooCommerce dan bagian 21/24 sama-sama mengaturnya. */
html body .password-input button.show-password-input {
	right: 3px;
	box-sizing: content-box;
	width: 22px;
	height: 22px;
	padding: 11px;
	background: transparent;
	border: 0;
}

/* Kotak centang yang berdiri sendiri: 13-18px -> 24px, di semua lebar layar
   (batas WCAG berlaku juga untuk mouse). */
.ds-auth__check input[type="checkbox"],
.ds-fbt__pick input[type="checkbox"] {
	width: 24px;
	height: 24px;
}

/* Kotak centang di halaman pembayaran TIDAK ikut 24px: pemilik toko meminta
   semua kotak di sana seragam (bagian 19, "Kotak centang seragam"). Kotak
   20px itu tetap mudah diketuk karena seluruh tulisannya ikut menjadi area
   ketuk (label), dan di HP labelnya setinggi 44px (lihat di bawah). */

@media (max-width: 899px) {
	.ds-crumbs a {
		display: inline-block;
		padding: 12px 0;
		margin: -12px 0;
	}

	/* Baris fakta produk (brand, kategori) berjarak rapat, jadi cukup 10px:
	   tinggi ketuk sekitar 35px tanpa saling menumpuk dengan baris lain. */
	.ds-pd__seereviews,
	.ds-pd__facts a,
	.ds-pd__trust a,
	.ds-auth__forgot {
		display: inline-block;
		padding: 10px 0;
		margin: -10px 0;
	}

	/* 22px -> 44px; margin atas 16px semula dikurangi 11px dan margin bawah
	   -11px, jadi jarak ke tombol bagikan di bawahnya tidak berubah. */
	.ds-wish-btn {
		min-height: 44px;
		margin-top: 5px;
		margin-bottom: -11px;
	}

	/* Kotak Urutkan: select-nya sendiri hanya 22px. Kotak luarnya dibuat
	   44px dan select mengisi tingginya, jadi seluruh kotak bisa diketuk. */
	.ds-shop__sort {
		min-height: 44px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.ds-shop__sort select {
		height: 42px;
		line-height: 42px;
	}

	/* Kartu produk: tautan judul hanya setinggi satu baris tulisan (19px).
	   Tetap -webkit-box (bukan inline-block): pemotong dua baris
	   (-webkit-line-clamp) hanya bekerja pada -webkit-box. Dengan inline-block
	   judul panjang tampil tiga-empat baris dan baris ketiganya terpotong
	   setengah di atas harga. Padding hanya di atas: padding bawah ikut
	   memperlihatkan potongan baris ketiga yang disembunyikan pemotong. */
	.ds-product__title a {
		display: -webkit-box;
		padding: 6px 0 0;
		margin: -6px 0 0;
	}

	/* Baris filter (kategori, brand, rating): 22px tinggi dengan jarak 12px
	   menjadi baris setinggi 40px tanpa jarak - jarak antarbaris di layar
	   hampir sama (34 -> 40px), tapi seluruh baris kini bisa diketuk. */
	.ds-filter__list {
		gap: 0;
	}

	.ds-filter__row {
		min-height: 40px;
	}

	.ds-filter__reset {
		display: inline-block;
		padding: 12px 0;
		margin: -12px 0;
	}

	/* Label kotak centang ikut menjadi area ketuk setinggi 44px. */
	.ds-auth__check {
		min-height: 44px;
	}

	/* Label kotak centang halaman pembayaran: area ketuk diperbesar dengan
	   padding + margin negatif yang sama, jadi kotak dan tulisannya tidak
	   bergeser (tata letaknya tetap dari bagian 19). */
	.ds-shop-page--checkout form.checkout label.checkbox:not(#ship-to-different-address label) {
		padding-top: 11px;
		padding-bottom: 11px;
		margin-top: -11px;
		margin-bottom: -11px;
	}

	.ds-shop-page--checkout form.checkout label.checkbox:not(#ship-to-different-address label) > input[type="checkbox"] {
		top: 12px;
	}

	/* Judul FAQ: seluruh kepala kartu (termasuk padding-nya) bisa diketuk,
	   bukan hanya baris tulisannya yang 22px. Selektor diperpanjang karena
	   gaya FAQ dicetak sesudah berkas ini. */
	html .ds-faq__item > summary {
		margin: -20px -24px 0;
		padding: 20px 24px 0;
	}
}

/* Di bawah 600px padding kartu FAQ 16px 18px (inc/pages/faq-css.php). */
@media (max-width: 600px) {
	html .ds-faq__item > summary {
		margin: -16px -18px 0;
		padding: 16px 18px 0;
	}
}

/* ===================== 58. Kartu produk di HP, wishlist di foto, stok ringkas */

/* Tombol hati di pojok kanan atas foto produk (deepstrike_product_gallery()).
 *
 * Lingkaran gelap setengah tembus dengan garis terang: foto produk hampir
 * selalu berlatar putih, sedangkan panggung galeri sendiri gelap - lingkaran
 * gelap bergaris terang terbaca jelas di atas keduanya. 48px di layar lebar,
 * 44px di HP, keduanya memenuhi sasaran sentuh minimal. */
.ds-gallery__wish {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	color: var(--ds-white);
	background: var(--ds-overlay);
	border: 1px solid var(--ds-overlay-line);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.ds-gallery__wish:hover {
	color: var(--ds-accent-300);
	background: var(--ds-bg-0);
}

.ds-gallery__wish:active {
	transform: scale(0.94);
}

/* Cincin fokus dua lapis (terang di dalam bayangan gelap) supaya tetap
   terlihat di atas foto putih maupun latar gelap. */
.ds-gallery__wish:focus-visible {
	outline: 3px solid var(--ds-accent-300);
	outline-offset: 2px;
	border-radius: 50%;
	box-shadow: 0 0 0 6px var(--ds-bg-0);
}

/* Tersimpan: hati terisi. Garis path ikon diberi fill="none" di markup, jadi
   isinya dipasang langsung ke path, bukan ke svg. */
.ds-gallery__wish[aria-pressed="true"] {
	color: var(--ds-accent-300);
}

.ds-gallery__wish[aria-pressed="true"] svg path {
	fill: currentColor;
}

@media (max-width: 599px) {
	.ds-gallery__wish {
		top: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
	}

	/* Chip "Stok habis" tetap satu baris pendek di HP. Chip lain (mis.
	   pre-order) boleh membungkus karena kalimatnya memang panjang. */
	.ds-pd__stock.is-out {
		white-space: nowrap;
	}

	/* Kartu produk: tombol hati dan keranjang mengisi seluruh lebar kartu.
	 *
	 * Dulu keduanya 40px rata kanan, menyisakan ruang kosong di kiri dan dua
	 * sasaran ketuk yang sempit. Sekarang hati kotak 44px dan keranjang
	 * mengisi sisanya - tombol yang paling sering dipakai jadi yang paling
	 * besar. Berlaku untuk semua kartu (katalog, beranda, Flash Sale, produk
	 * serupa, rekomendasi) karena semuanya memakai template-parts/card-product.php. */
	.ds-product__actions {
		flex: 1 1 100%;
		width: 100%;
		margin-left: 0;
	}

	.ds-product__actions > .ds-icon-btn {
		height: 44px;
	}

	.ds-product__actions > .ds-icon-btn--outline {
		flex: 0 0 44px;
		width: 44px;
	}

	.ds-product__actions > .ds-icon-btn--solid {
		flex: 1 1 auto;
		width: auto;
	}

	/* Rating di tengah, segaris dengan judul dan harga di atasnya. */
	.ds-product__foot .ds-rating {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ============================================================ 59. Foto profil
 *
 * Kartu "Foto profil" di Detail Akun (modul Foto profil di plugin, markup di
 * deepstrike_foto_account_card()) dan foto di lingkaran inisial yang sudah ada:
 * kartu akun, panel akun di header, dan ulasan produk.
 *
 * Kartunya memakai .ds-acct__card dan tombol .ds-acct__btn milik bagian 24,
 * jadi padding, sudut, dan tinggi tombolnya sama persis dengan dua kartu di
 * bawahnya. Yang ditambahkan di sini hanya susunan foto + tombol.
 */

/* Lingkaran yang sudah ada (bagian 04b, 13c, 23) tinggal diisi foto. */
.ds-acc__avatar.has-photo,
.ds-dd__avatar.has-photo,
.ds-rv__avatar.has-photo {
	overflow: hidden;
	background: var(--ds-canvas);
}

.ds-avatar-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Kartu berdiri di luar <form class="ds-acct">, jadi jarak 20 ke kartu
   berikutnya diberikan sendiri - sama dengan gap .ds-acct. */
.ds-foto {
	margin-bottom: 20px;
}

/* Tombol .ds-acct__btn memakai display:inline-flex, yang mengalahkan atribut
   hidden bawaan peramban. Tanpa ini tombol Simpan/Batal tampil terus. */
.ds-foto [hidden] {
	display: none !important;
}

.ds-foto .ds-foto__form {
	display: flex;
	gap: 24px;
	align-items: center;
	margin: 18px 0 0;
}

.ds-foto__frame {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	overflow: hidden;
	color: var(--ds-accent-300);
	background: var(--ds-accent-700);
	border: 1px solid var(--ds-border);
	border-radius: 999px;
}

.ds-foto__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ds-foto__initials {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.ds-foto__side {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.ds-foto .ds-foto__hint,
.ds-foto .ds-foto__msg {
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--ds-text-2);
}

.ds-foto .ds-foto__msg:empty {
	display: none;
}

.ds-foto .ds-foto__msg.is-error {
	color: var(--ds-danger-text);
}

.ds-foto__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Tombol di kartu ini lebih ramping dari tombol simpan formulir (bagian 24):
   tiga tombol berjajar, dan 44px sudah memenuhi sasaran sentuh minimal. */
.ds-shop-page--account .ds-foto .ds-acct__btn {
	min-height: 44px;
	margin: 0;
	padding: 10px 22px;
	font-size: 14px;
}

/* "Hapus foto" tindakan yang membuang sesuatu: merah saat disorot, bukan hijau. */
.ds-shop-page--account .ds-foto .ds-foto__remove:hover,
.ds-shop-page--account .ds-foto .ds-foto__remove:focus-visible {
	color: var(--ds-danger-300);
	border-color: var(--ds-danger-text);
}

/* Kolom berkas asli disembunyikan secara visual tapi tetap bisa difokus dengan
   Tab (Enter/Spasi membuka pemilih berkas). Cincin fokusnya diperlihatkan pada
   tombol "Pilih foto" tepat sesudahnya. */
.ds-foto__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ds-foto__input:focus-visible + .ds-foto__pick {
	outline: 2px solid var(--ds-accent-300);
	outline-offset: 2px;
}

.ds-foto__pick {
	cursor: pointer;
}

@media (max-width: 767px) {
	/* Satu kolom di HP: foto di tengah, tombol selebar kartu. */
	.ds-foto .ds-foto__form {
		flex-direction: column;
		gap: 18px;
		align-items: stretch;
	}

	.ds-foto__frame {
		align-self: center;
	}

	.ds-foto .ds-foto__hint,
	.ds-foto .ds-foto__msg {
		text-align: center;
	}

	.ds-foto__btns {
		flex-direction: column;
		align-items: stretch;
	}

	.ds-shop-page--account .ds-foto .ds-acct__btn {
		width: 100%;
	}
}

/* ================================= 60. Tulisan tombol selalu satu baris
 *
 * Aturan pemilik toko: tulisan tombol tidak boleh turun ke baris kedua, di HP
 * sekalipun. Tombol yang tulisannya patah dua terlihat seperti kotak teks,
 * bukan tombol, dan tingginya jadi tidak sama dengan tombol di sebelahnya.
 *
 * Daftar ini sengaja berupa kelas tombol yang jelas, bukan selektor umum
 * seperti "semua button": tombol akordeon, pilihan varian, dan menu juga
 * memakai <button> dan memang boleh berisi kalimat panjang.
 *
 * max-width: 100% menjaga tombol tidak pernah lebih lebar dari wadahnya, jadi
 * nowrap tidak membuat halaman bisa digeser ke samping. Tombol baru yang
 * memakai .ds-btn atau .button otomatis ikut aturan ini; tombol dengan kelas
 * sendiri: tambahkan kelasnya di sini.
 */
.ds-btn,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input[type="submit"],
.single_add_to_cart_button,
.checkout-button,
#place_order,
.ds-hero__cta,
.ds-promo__btn,
.ds-popup__cta,
.ds-popup__later,
.ds-pg__btn,
.ds-done__btn,
.ds-map__btn,
.ds-map__use,
.ds-auth__btn,
.ds-auth__submit,
.ds-acct__btn,
.ds-addr__btn,
.ds-addr__add,
.ds-ord__btn,
.ds-cookie__btn,
.ds-cart__voucherbtn,
.ds-cart__coupbtn,
.ds-cpn__pick,
.ds-vou__use,
.ds-voucher__copy,
.ds-mm__read,
.ds-shop__filter-btn,
.ds-share__btn,
.ds-ref-link__btn,
.ds-ref-box__cta,
.ds-wl__add,
.ds-wl__all,
.ds-foto__pick,
.ds-art__more,
.ds-dash__more,
.ds-mega__all {
	max-width: 100%;
	white-space: nowrap;
}

/* ======================== 61. Footer dan sasaran sentuh di HP (audit 17 Oktober 2026)
 *
 * Perbaikan cacat kecil dari pemeriksaan tampilan di 360-899px. Tidak ada
 * yang mengubah susunan desain; hanya kotak ketuk dan perataan.
 */

@media (max-width: 899px) {
	/* Ikon Facebook/Instagram di footer: 36 -> 40px, batas minimal sasaran
	   sentuh di HP. */
	.ds-socials__item {
		width: 40px;
		height: 40px;
	}

	/* Tautan menu footer hanya setinggi tulisannya (18px). Padding + margin
	   negatif yang sama besar membesarkan kotak ketuk jadi 40px tanpa
	   menggeser tulisan; tumpang tindih 5px dengan baris sebelahnya tidak
	   terlihat dan tidak membuat ketukan salah sasaran. */
	.ds-footer__list a {
		display: inline-block;
		padding: 11px 0;
		margin: -11px 0;
	}

	/* Tombol bagikan produk (WhatsApp, salin, email, Post, Story): 38 -> 40px. */
	.ds-share__btn {
		height: 40px;
	}

	/* Tab kategori Kamus Angler: pil 32px -> 40px lewat padding, tulisan
	   tetap di tengah. */
	.ds-mm__tab {
		padding-top: 13px;
		padding-bottom: 13px;
	}

	/* Chip kategori/brand di atas judul produk (31px): bentuk pilnya tidak
	   diubah, kotak ketuknya diperluas lewat lapisan tak terlihat 5px ke atas
	   dan ke bawah. */
	.ds-pd__chip {
		position: relative;
	}

	.ds-pd__chip::after {
		content: "";
		position: absolute;
		inset: -5px 0;
	}

	/* Tautan teks kecil yang hanya setinggi tulisannya: "Pilih varian" di
	   Sering dibeli bersama (21px) dan label kategori di kartu artikel
	   (19px). Margin negatif mengembalikan jaraknya; margin atas 4px milik
	   "Pilih varian" tetap dihitung. */
	.ds-fbt__variant {
		display: inline-block;
		padding: 10px 0;
		margin: -6px 0 -10px;
	}

	a.ds-mm__cat {
		padding: 11px 0;
		margin: -11px 0;
	}
}

/* Panel saran pencarian: bilah gulirnya digambar peramban. Tanpa
   color-scheme gelap Chrome menggambarnya putih terang di tepi panel gelap
   (sama seperti kalender kolom tanggal di bagian 24). */
.ds-suggest {
	color-scheme: dark;
}

/* Tombol hapus (x) bawaan kolom pencarian berwarna biru sistem, satu-satunya
   warna biru di seluruh situs. Diganti silang abu-abu yang sama warnanya
   dengan ikon kaca pembesar di sebelahnya; fungsinya tetap sama. */
.ds-search__field::-webkit-search-cancel-button {
	width: 14px;
	height: 14px;
	margin-left: 8px;
	background-color: var(--ds-text-2);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ds-search__field::-webkit-search-cancel-button:hover {
	background-color: var(--ds-text);
}

/* Baris hak cipta di HP: begitu "Website dibuat oleh" turun ke baris kedua,
   ia ikut rata kiri seperti baris hak cipta di atasnya. Rata kanan (bagian
   persetujuan cookie, .ds-footer__credit) hanya masuk akal saat keduanya
   berdampingan di layar lebar. */
@media (max-width: 767px) {
	.ds-footer__legal {
		flex-direction: column;
		justify-content: flex-start;
	}

	.ds-footer__credit {
		margin-left: 0 !important;
		text-align: left;
	}
}

/* ============================================================ 62. Halaman Cara Pembayaran (ornamen latar)
 *
 * Isi halamannya dicetak plugin (shortcode [cf_cara_bayar], kelas body
 * cf-cb-page); theme hanya menambah sapuan ornamen di atas, sama seperti
 * halaman Syarat & Ketentuan dan Kebijakan Privasi, supaya halaman ini tidak
 * tampil polos sendiri. Ornamen di belakang isi dan tidak bisa diklik.
 */
.cf-cb-page .ds-main {
	position: relative;
	overflow: hidden;
}

.cf-cb-page .ds-main::before {
	content: "";
	position: absolute;
	top: -188px;
	left: 50%;
	width: 1556px;
	height: 483px;
	transform: translateX(-50%);
	background: url("../images/ornaments/sapuan-atas.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 0;
}

.cf-cb-page .ds-main > * {
	position: relative;
	z-index: 1;
}