/*
Theme Name: Bojastama
Template: blocksy
Version: 1.0.0
Description: Child theme Bojastama. Warna dan huruf diturunkan dari kartu kemasan.
*/

/* ==========================================================================
   1. TOKEN
   Ubah di sini, bukan di tiap komponen.
   ========================================================================== */

:root {
	--bj-cream:        #FFFBEF;
	--bj-paper:        #FFFFFF;
	--bj-blossom:      #EFA0B4;
	--bj-butter:       #F7E7AC;
	--bj-butter-deep:  #F7D67C;
	--bj-sage:         #DCE8CF;
	--bj-gingham:      #A8CDE8;
	--bj-line:         #F0E3C4;
	--bj-line-dash:    #DCC9A0;
	--bj-ink:          #3B3330;
	--bj-plum:         #A85570;
	--bj-muted:        #8A7855;

	--bj-r-card: 22px;
	--bj-r-img:  14px;
	--bj-r-pill: 999px;

	--bj-font-display: 'Mountains of Christmas', cursive;
	--bj-font-body:    'Karla', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Batas aman huruf dekoratif. Di bawah ini, pakai Karla. */
	--bj-display-floor: 25px;
}

/* ==========================================================================
   2. DASAR
   ========================================================================== */

body {
	background-color: var(--bj-cream);
	font-family: var(--bj-font-body);
	color: var(--bj-ink);
}

/* Huruf dekoratif HANYA untuk judul.
   Jangan tambahkan selector ukuran kecil ke daftar ini. */
h1, h2, h3,
.bj-display,
.site-title,
.woocommerce-products-header__title,
.product_title {
	font-family: var(--bj-font-display);
	font-weight: 700;
	line-height: 1.08;
	color: var(--bj-ink);
}

/* Mountains of Christmas lebih ramping dari font biasa,
   jadi ukurannya dinaikkan supaya bobotnya setara. */
h1, .product_title { font-size: clamp(34px, 5vw, 62px); }
h2 { font-size: clamp(28px, 3.4vw, 36px); }
h3 { font-size: clamp(25px, 2.4vw, 30px); }

/* h4 ke bawah sudah di bawah batas aman, kembalikan ke Karla */
h4, h5, h6 {
	font-family: var(--bj-font-body);
	font-weight: 800;
}

a { color: var(--bj-ink); }
a:hover { color: var(--bj-plum); }

/* Focus ring — jangan dihapus, ini untuk pengguna keyboard */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--bj-plum);
	outline-offset: 2px;
}

/* ==========================================================================
   3. POLA: GINGHAM & TEPI GERIGI
   Murni CSS, tanpa file gambar.
   ========================================================================== */

.bj-gingham {
	background-color: var(--bj-gingham);
	background-image:
		repeating-linear-gradient(0deg,  rgba(255, 255, 255, .34) 0 20px, transparent 20px 40px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 20px, transparent 20px 40px);
}

.bj-gingham--pink   { --bj-gingham: var(--bj-blossom); }
.bj-gingham--butter { --bj-gingham: #F0C458; }
.bj-gingham--sage   { --bj-gingham: #96BA7C; }

.bj-gingham .wp-block-columns {
	align-items: stretch;
}

.bj-gingham .wp-block-column {
	display: flex;
}

.bj-gingham .wp-block-column > * {
	width: 100%;
}

/* Tepi gerigi. Taruh div kosong <div class="bj-scallop"></div>
   di antara blok gingham dan blok krem. */
.bj-scallop {
	height: 18px;
	background-color: var(--bj-gingham);
	background-image: radial-gradient(circle at 9px 18px, var(--bj-cream) 9px, transparent 10px);
	background-size: 18px 18px;
	background-repeat: repeat-x;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Panel krem di atas gingham.
   Ini yang bikin teks kecil tetap kebaca — jangan taruh teks
   langsung di atas gingham. */
.bj-panel {
	background: var(--bj-cream);
	border-radius: 28px;
	padding: clamp(24px, 4vw, 48px);
	position: relative;
}

/* Logo bulat di kartu hero — diupload lewat Appearance > Customize.
   Kalau belum ada logo, tampil sebagai lingkaran kosong (placeholder)
   biar posisinya kelihatan duluan. */
.bj-hero-logo {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--bj-gingham);
	background: var(--bj-paper);
}

/* ==========================================================================
   4. MARQUEE
   ========================================================================== */

.bj-marquee {
	background: var(--bj-sage);
	overflow: hidden;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .14em;
	padding: 14px 0;
}

/* Track-nya berisi 2 <span> identik berdampingan (lihat functions.php).
   Animasi cuma geser separuh lebar track (-50%, bukan -100%) — begitu
   loop balik ke 0%, salinan kedua persis menggantikan posisi salinan
   pertama, jadi nggak ada "lompatan" pas nyambung ke ujung berikutnya. */
.bj-marquee__track {
	display: flex;
	width: max-content;
	/* Teksnya sekarang diulang 6x per salinan (lihat functions.php) biar
	   nggak ada celah kosong di layar lebar — durasinya ikut dikalikan 6
	   (32s -> 192s) biar kecepatan gesernya (px/detik) tetap sama. */
	animation: bj-marquee 48s linear infinite;
}

.bj-marquee__track span {
	flex-shrink: 0;
}

@keyframes bj-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Wajib: hormati pengguna yang mematikan animasi — tampilkan satu
   salinan aja, sembunyikan duplikatnya. */
@media (prefers-reduced-motion: reduce) {
	.bj-marquee__track {
		animation: none;
	}

	.bj-marquee__track span[aria-hidden] {
		display: none;
	}
}

/* ==========================================================================
   5. TOMBOL
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce a.added_to_cart,
.wp-block-button__link,
.bj-btn {
	background: var(--bj-blossom);
	color: var(--bj-ink);
	font-family: var(--bj-font-body);
	font-weight: 800;
	font-size: 17px;
	border: 0;
	border-radius: var(--bj-r-pill);
	padding: 16px 30px;
	line-height: 1.2;
	transition: transform .12s ease, filter .12s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.added_to_cart:hover,
.bj-btn:hover {
	background: var(--bj-blossom);
	color: var(--bj-ink);
	filter: brightness(.96);
}

/* ==========================================================================
   6. KARTU PRODUK
   Foto, nama, dan harga dalam satu kotak.

   CATATAN PENTING: Blocksy punya markup kartu sendiri. Selector di bawah
   sudah mencakup pola Woo standar dan Blocksy, tapi WAJIB kamu cek pakai
   inspect element. Kalau ada yang tidak kena, cari nama class-nya di
   inspector lalu tambahkan ke daftar selector — jangan tambah !important.
   ========================================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.ct-woo-card {
	background: var(--bj-paper);
	border: 2px solid var(--bj-line);
	border-radius: var(--bj-r-card);
	padding: 12px;
	overflow: hidden;
}

/* <figure> pembungkus foto punya margin-bottom 25px bawaan Blocksy,
   numpuk sama margin-bottom foto sendiri (10px) — jaraknya jadi 35px.
   Figure-nya dinolkan, cukup margin dari foto aja yang jalan. */
.woocommerce ul.products li.product figure {
	margin-bottom: 0;
}

.woocommerce ul.products li.product a img,
.ct-woo-card img {
	border-radius: var(--bj-r-img);
	margin-bottom: 10px;
	display: block;
	width: 100%;
	/* !important wajib — WordPress otomatis nyisipin style="aspect-ratio:
	   ..." langsung di tag <img> (berdasarkan rasio foto asli, biar nggak
	   ada layout shift pas loading). Inline style menang dari CSS file
	   manapun kecuali pakai !important. */
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.ct-woo-card .woocommerce-loop-product__title {
	font-family: var(--bj-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
	padding: 0 5px;
	margin: 0 0 8px;
	color: var(--bj-ink);
}

.woocommerce ul.products li.product .price,
.ct-woo-card .price {
	font-family: var(--bj-font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--bj-ink);
	padding: 0 5px 5px;
	display: block;
	margin: 0;
}

/* Label kategori ("UNCATEGORIZED", "ACTIVITY-KIT") — nggak sejajar
   sama judul/harga di atasnya karena title & price punya padding
   kiri 5px (buat kasih jarak dari tepi kartu), sementara ini nggak. */
.woocommerce ul.products li.product .entry-meta {
	padding: 0 5px;
}

/* Tombol "Add to cart" di kartu produk dihilangkan — tap kartu buat
   lihat produk sudah cukup, nggak perlu tombol tambahan. */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button {
	display: none;
}

/* Label "Tinggal 1" / stok tipis */
.bj-stock-badge {
	position: absolute;
	top: 9px;
	right: 9px;
	background: var(--bj-butter-deep);
	color: var(--bj-ink);
	padding: 5px 12px;
	border-radius: var(--bj-r-pill);
	font-size: 12px;
	font-weight: 800;
	z-index: 2;
}

.woocommerce ul.products li.product { position: relative; }

/* Produk habis: tetap tampil, jangan disembunyikan.
   Untuk toko craft, karya yang pernah dibuat itu bagian dari portofolio. */
.woocommerce ul.products li.product.outofstock img { opacity: .72; }

.woocommerce span.onsale {
	background: var(--bj-butter-deep);
	color: var(--bj-ink);
	font-weight: 800;
	border-radius: var(--bj-r-pill);
	padding: 5px 12px;
	min-height: 0;
	min-width: 0;
	line-height: 1.3;
}

/* ==========================================================================
   7. HALAMAN PRODUK
   ========================================================================== */

/* Galeri foto produk — Blocksy render lewat markup "flexy" sendiri
   (.woocommerce-product-gallery > .ct-product-gallery-container > ...),
   bukan div.images klasik WooCommerce. Selector lama (div.images)
   nggak pernah kena, makanya foto produk & thumbnail-nya kotak polos. */
.woocommerce div.product .flexy-view img {
	background: var(--bj-paper);
	border: 2px solid var(--bj-line);
	border-radius: 26px;
	padding: 14px;
	box-sizing: border-box;
}

.woocommerce div.product .flexy-pills img {
	border: 2px solid var(--bj-line);
	border-radius: var(--bj-r-img);
}

.woocommerce div.product .product_title { margin-bottom: 14px; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--bj-font-body);
	font-size: 28px;
	font-weight: 800;
	color: var(--bj-ink);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: none;
	border-color: var(--bj-line);
}

/* Warna link tab ("Description/Reviews/Cek Ongkir") biru bawaan Woo.
   Selector-nya harus persis "div.woocommerce-tabs" (bukan cuma
   ".woocommerce-tabs") biar spesifisitasnya nyamain punya Woo sendiri
   (".woocommerce div.product div.woocommerce-tabs ul.tabs li.active a") —
   tanpa "div" itu kalah karena jumlah elemen tag-nya lebih sedikit satu. */
.woocommerce div.product div.woocommerce-tabs ul.tabs li a {
	color: var(--bj-ink);
}

.woocommerce div.product div.woocommerce-tabs ul.tabs li.active a {
	color: var(--bj-plum);
}

/* Garis bawah tab aktif — warnanya dari ::before (bukan border), isinya
   var(--theme-palette-color-1) alias biru Blocksy. Selector-nya disamain
   persis biar menang tanpa !important. */
.woocommerce div.product div.woocommerce-tabs ul.tabs li.active::before {
	background: var(--bj-plum);
}

/* Judul "Reviews" — H2 kena font dekoratif sitewide, tapi ukurannya
   di-set kecil (16px) sama WooCommerce, di bawah batas aman huruf
   dekoratif (25px) jadi nggak kebaca. Disamain ke ukuran judul section
   lain kayak "Related products". */
/* Selector-nya harus ada tag h2 juga, bukan cuma class — soalnya
   punya Woo (".woocommerce-Reviews :is(h2, .comment-reply-title)")
   spesifisitasnya nyertain tag h2, jadi kalau kita cuma pakai satu
   class ".woocommerce-Reviews-title" tetap kalah. */
.woocommerce-Reviews h2.woocommerce-Reviews-title {
	font-size: 28px;
}

/* Judul form review ("Be the first to review...") — Woo kasih font
   sistem + warna navy sendiri, bukan Karla + ink kayak teks lain. */
#reply-title {
	font-family: var(--bj-font-body);
	color: var(--bj-ink);
}

/* Tombol submit review — biru pill kecil bawaan Woo, disamain ke
   tombol pill tema. */
#respond #submit {
	background: var(--bj-blossom);
	color: var(--bj-ink);
	font-family: var(--bj-font-body);
	font-weight: 800;
	border-radius: var(--bj-r-pill);
	padding: 16px 30px;
}

#respond #submit:hover {
	filter: brightness(.96);
}

/* Catatan handmade — pasang <div class="bj-note"> di deskripsi produk */
.bj-note {
	background: var(--bj-sage);
	border-radius: 20px;
	padding: 20px 26px;
	font-size: 16px;
	line-height: 1.65;
}

/* ==========================================================================
   8. KERANJANG & CHECKOUT
   Checkout klasik (shortcode), bukan block.
   ========================================================================== */

.woocommerce-checkout h3,
.woocommerce-cart h2 {
	font-family: var(--bj-font-body);
	font-weight: 800;
	font-size: 20px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	background: var(--bj-paper);
	border: 2px solid var(--bj-line-dash);
	border-radius: var(--bj-r-img);
	padding: 14px 16px;
	font-family: var(--bj-font-body);
	font-size: 16px;
	color: var(--bj-ink);
	height: auto;
	min-height: 52px;
	box-sizing: border-box;
}

.woocommerce form .form-row label {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 6px;
}

/* Negara dikunci ke Indonesia di setelan, jadi field ini disembunyikan.
   Tetap ada di DOM supaya nilainya terkirim dan ongkir tetap terhitung —
   JANGAN di-unset() di PHP. */
#billing_country_field,
#shipping_country_field {
	display: none;
}

.woocommerce-checkout #payment,
.woocommerce table.shop_table {
	background: var(--bj-paper);
	border: 2px solid var(--bj-line);
	border-radius: var(--bj-r-card);
}

/* border-radius nggak pernah kelihatan di <table> selama border-collapse
   masih "collapse" (dibatasi spec CSS-nya, bukan bug) — makanya sudut
   tabel keranjang kelihatan kotak padahal .cart_totals di sebelahnya
   bulat. Ganti ke "separate" + spacing 0 biar radius-nya kepakai. */
.woocommerce table.shop_table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

/* Judul kolom tabel keranjang — Blocksy kasih warna navy bawaan,
   gantikan ke warna tema. */
.woocommerce table.shop_table th {
	color: var(--bj-ink);
	font-weight: 800;
	border-bottom-color: var(--bj-line);
}

.woocommerce table.shop_table td {
	border-bottom-color: var(--bj-line);
}

.woocommerce table.shop_table.cart td.product-thumbnail img {
	border-radius: var(--bj-r-img);
}

/* Blocksy bikin kolom pertama & terakhir tiap baris mepet ke tepi tabel
   (padding-inline dibikin 0) — foto produk sampai nempel border kiri,
   ikon hapus nempel border kanan. Dikasih jarak lagi di sini. */
.woocommerce table.shop_table tr > :first-child {
	padding-inline-start: 20px;
}

.woocommerce table.shop_table tr > :last-child {
	padding-inline-end: 20px;
}

/* Kotak "Cart totals" — sebelumnya .cart_totals (pembungkus luar) dan
   tabelnya masing-masing punya border sendiri (dobel, warnanya beda:
   biru-abu bawaan Blocksy di luar, cream tema di dalam). Sekarang cukup
   satu kotak di pembungkus luar; tabelnya polos tanpa border/bg sendiri.
   Selector-nya harus sama spesifiknya kayak punya Blocksy
   (".ct-woocommerce-cart-form .cart_totals"), soalnya bare ".cart_totals"
   kalah spesifisitas dan keteveran border/padding abu-abu bawaannya. */
.ct-woocommerce-cart-form .cart_totals {
	background: var(--bj-paper);
	border: 2px solid var(--bj-line);
	border-radius: var(--bj-r-card);
	padding: 24px;
	box-sizing: border-box;
}

.cart_totals table.shop_table {
	background: none;
	border: 0;
	border-radius: 0;
}

.cart_totals table.shop_table tr td,
.cart_totals table.shop_table tr th {
	border-bottom-color: var(--bj-line);
}

/* Input jumlah (qty) di baris keranjang — border biru bawaan Blocksy
   diganti ke warna tema. Padding/height dibiarkan, itu dipakai Blocksy
   buat naruh tombol +/- di dalam input. */
.woocommerce .quantity .qty {
	border: 2px solid var(--bj-line-dash);
	border-radius: var(--bj-r-img);
	background: var(--bj-paper);
	color: var(--bj-ink);
	font-family: var(--bj-font-body);
}

.woocommerce .quantity .ct-increase,
.woocommerce .quantity .ct-decrease {
	color: var(--bj-ink);
}

/* Warna fill biru bawaan Blocksy pas tombol +/- di-hover */
.woocommerce div.quantity .ct-increase:hover,
.woocommerce div.quantity .ct-decrease:hover {
	background: var(--bj-blossom);
	color: var(--bj-ink);
}

/* Input kode kupon nggak kebungkus .form-row, jadi nggak kena styling
   input umum di atas — disamakan manual di sini. */
.coupon input.input-text {
	background: var(--bj-paper);
	border: 2px solid var(--bj-line-dash);
	border-radius: var(--bj-r-img);
	padding: 14px 16px;
	font-family: var(--bj-font-body);
	color: var(--bj-ink);
	height: auto;
	box-sizing: border-box;
}

/* Kolom "Kota Tujuan" dari plugin AgenWebsite — kotak abu bawaan
   plugin, disamakan ke tema (cream, radius, border putus-putus).
   Plugin-nya pasang !important di semua propertinya, jadi kita
   wajib !important juga di sini buat menang. */
.aw-cart-city-field-wrapper {
	background: var(--bj-cream) !important;
	border: 1px solid var(--bj-line-dash) !important;
	border-radius: var(--bj-r-img) !important;
}

.aw-cart-city-field-wrapper label {
	color: var(--bj-ink);
	font-weight: 700;
}

.aw-cart-city-field-wrapper .aw-cart-city-input {
	background: var(--bj-paper) !important;
	border: 2px solid var(--bj-line-dash) !important;
	border-radius: var(--bj-r-img) !important;
	font-family: var(--bj-font-body) !important;
	color: var(--bj-ink) !important;
}

/* Warna teal/biru pas pilih metode pengiriman (mis. "Paxel NEXTDAY")
   juga dari CSS variable plugin AgenWebsite, bukan hardcode langsung
   di selector-nya — jadi cukup timpa variable-nya, sama kayak
   pendekatan --theme-form-selection-field-active-color di atas. */
.woocommerce-shipping-methods,
.aw-shipping-preview {
	--aw-ship-accent: var(--bj-plum);
	--aw-ship-accent-soft: var(--bj-butter);
}

/* Kotak "Your order" di checkout — sama kasusnya kayak .cart_totals:
   Blocksy kasih border abu-abu kotak ke pembungkus luar (.ct-order-review),
   sementara tabel & kotak metode pembayaran di dalamnya masing-masing
   udah punya border/radius sendiri (dari rule .woocommerce table.shop_table
   & .woocommerce-checkout #payment). Hasilnya kotak dobel bersarang.
   Sekarang cukup satu kotak di pembungkus luar; isinya polos, dipisah
   jarak/garis putus-putus aja. */
.ct-order-review {
	background: var(--bj-paper);
	border: 2px solid var(--bj-line);
	border-radius: var(--bj-r-card);
	padding: 24px;
	box-sizing: border-box;
}

/* !important wajib di sini: rule ".woocommerce-checkout #payment" di atas
   pakai ID (#payment), yang otomatis lebih kuat dari selector class
   manapun — biar berapa banyak pun class-nya, ID tetap menang. Tanpa
   !important, border cream-nya #payment nempel lagi, jadi kelihatan
   kotak dobel (satu buat .ct-order-review, satu lagi buat kotak
   payment+place order di dalamnya). */
.ct-order-review table.shop_table,
.ct-order-review .woocommerce-checkout-payment {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Di HP (<= 689px), Blocksy narik .woocommerce-checkout-payment keluar
   lewat margin-inline:-26px — aslinya dirancang buat "bocor" pas ke tepi
   kartu bawaan Blocksy. Kita udah nggak butuh trik itu (kartu kita satu
   kotak polos, bukan kotak bersarang kayak punya Blocksy), jadi baris,
   tombol Place order, dst jadi kebablasan sampai nempel tepi kartu. */
@media (max-width: 689.98px) {
	.ct-order-review .woocommerce-checkout-payment {
		margin-inline: 0;
	}
}

.ct-order-review .woocommerce-checkout-payment {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 2px dashed var(--bj-line-dash);
}

/* Radio & checkbox (metode pembayaran, dll) — warna aksen biru bawaan
   browser diganti ke warna tema. */
input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--bj-plum);
}

/* Lingkaran radio yang kelihatan (metode pembayaran, metode pengiriman,
   dll) itu bukan <input>-nya sendiri — inputnya disembunyikan, yang
   digambar Blocksy adalah ::before di <label>-nya, warnanya dari CSS
   variable --theme-form-selection-field-active-color (isinya biru).
   Override input.input-radio di atas nggak ngefek karena bukan situ
   sumber warnanya. Timpa variable-nya langsung di sini — lebih aman
   & otomatis kebawa ke semua tempat yang pakai variable yang sama
   (radio pembayaran, pilihan kurir/pengiriman, dst), nggak perlu
   kejar satu-satu tiap selector. */
:root {
	--theme-form-selection-field-active-color: var(--bj-plum);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--bj-butter);
	color: var(--bj-ink);
	border-radius: var(--bj-r-img);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-info,
.woocommerce-message {
	background: var(--bj-sage);
	border-top-color: var(--bj-ink);
	color: var(--bj-ink);
	border-radius: var(--bj-r-img);
}

/* ==========================================================================
   9. HEADER & FOOTER
   ========================================================================== */

.site-header,
.ct-header {
	background: var(--bj-cream);
	border-bottom: 2px solid var(--bj-line);
}

.site-title,
.site-title a {
	font-family: var(--bj-font-display);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-decoration: none;
}

.site-footer,
.ct-footer {
	background: var(--bj-sage);
	color: var(--bj-ink);
}

/* Judul halaman arsip (Shop, kategori, dll) — Blocksy kasih background
   abu-abu + rata tengah + padding 50px + min-height 250px khusus buat
   header arsip Woo, beda sendiri dari halaman biasa kayak Cart/Checkout
   (transparan, rata kiri, tanpa padding/min-height itu).
   Di-scope ke ".hero-section:not(.is-width-constrained)" — Cart/Checkout
   (halaman Page biasa) hero-section-nya PUNYA class "is-width-constrained",
   arsip Woo nggak — jadi aman, nggak nyenggol Cart/Checkout yang udah pas.
   !important wajib — rule Blocksy-nya pakai attribute selector
   (".hero-section[data-type]", "[data-prefix] .hero-section[data-type]"),
   spesifisitasnya menang dari class biasa. */
.hero-section:not(.is-width-constrained) {
	background: none !important;
}

.hero-section:not(.is-width-constrained) .entry-header {
	text-align: left !important;
	min-height: 0 !important;
	/* Cuma padding ATAS yang disamain ke jarak Cart/Checkout (60px, dari
	   .ct-container-full yang cuma ada di template Page). Padding BAWAH
	   sengaja 0 — di bawah judul udah ada .ct-container lain (pembungkus
	   grid produk) yang juga punya padding-top 60px sendiri; kalau
	   .entry-header ditambah padding-bawah juga, jaraknya numpuk dobel. */
	padding: 60px 0 0 !important;
}

/* .ct-container-narrow bikin judul kebungkus kotak 750px yang di-center
   sendiri (margin:0 auto) — jadi walau teksnya udah rata kiri, kotaknya
   sendiri masih nangkring di tengah halaman, nggak sejajar sama konten
   di bawahnya (produk, dll). Dilebarin biar sejajar. Di-scope ke
   ".entry-header" doang — ".ct-container-narrow" sendiri kemungkinan
   dipakai juga di tempat lain buat lebar-konten normal (postingan, dst). */
.entry-header.ct-container-narrow {
	/* Var yang sama persis dipakai ".ct-container" (pembungkus konten
	   normal, termasuk grid produk di bawahnya) — biar lebar & posisinya
	   pas nyambung sejajar, bukan cuma ditebak angkanya. */
	max-width: var(--theme-normal-container-max-width);
	margin: 0 auto;
}

.site-footer a,
.ct-footer a { color: var(--bj-ink); }

/* ==========================================================================
   10. MOBILE
   Diuji di 375px. Kalau nambah komponen, uji di lebar itu juga.
   ========================================================================== */

@media (max-width: 767px) {
	.bj-panel { border-radius: 22px; }

	.bj-hero-logo {
		width: 56px;
		height: 56px;
		top: 16px;
		right: 16px;
		border-width: 2px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
	.woocommerce ul.products li.product .price { font-size: 14px; }
}

/* Grid produk 2 kolom di HP (kayak marketplace), bukan 1 kolom polos.
   --shop-columns itu CSS variable dari Blocksy sendiri (dipakai lewat
   grid-template-columns: var(--shop-columns) di woocommerce.min.css),
   breakpoint-nya juga disamakan sama punya Blocksy (689.98px) biar
   pas nyambung sama breakpoint produk lain (related products, dst). */
@media (max-width: 689.98px) {
	[data-products] {
		--shop-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.woocommerce ul.products li.product {
		padding: 8px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px;
	}

	.woocommerce ul.products li.product .price {
		font-size: 13px;
	}

	.woocommerce a.button,
	.woocommerce button.button,
	.bj-btn {
		font-size: 16px;
		padding: 14px 24px;
	}

	/* Tabel keranjang sering meluber di HP */
	.woocommerce table.shop_table { display: block; overflow-x: auto; }
}

/* ==========================================================================
   TAMBAHAN — tempel di paling bawah style.css

   Class di sini dipakai oleh markup blok halaman Beranda.
   Tanpa bagian ini, halaman tetap jalan tapi tampilannya polos.
   ========================================================================== */

/* Band — pembungkus tiap bagian halaman */
.bj-band {
	padding-top: clamp(32px, 5vw, 56px);
	padding-bottom: clamp(32px, 5vw, 56px);
}

.bj-band--butter { background: var(--bj-butter); }
.bj-band--sage   { background: var(--bj-sage); }

/* Eyebrow kecil di atas judul hero.
   Sengaja pakai Karla — 14px terlalu kecil untuk huruf dekoratif. */
.bj-eyebrow {
	font-family: var(--bj-font-body);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .06em;
	color: var(--bj-plum);
	margin: 0 0 4px;
}

/* Frame foto — dipakai di dua tempat: hero homepage (di dalam .bj-gingham)
   dan section cerita 2-kolom di halaman About/Workshop (bukan di dalam
   .bj-gingham). Rasio 1:1 dipaksa dipaksa di sini, tapi DI-SCOPE ke
   ".bj-gingham" doang — di luar itu (About/Workshop), foto dibiarkan
   pakai rasio aslinya lewat "height:auto" di ".bj-photo-frame img"
   (lihat di bawah), sebab dipaksa 1:1 di kolom setengah lebar (~630px)
   bikin fotonya jadi kotak raksasa, jauh lebih tinggi dari teks di
   sampingnya — kelihatan kayak ada jarak kosong gede di sekitar teksnya. */
.bj-photo-frame {
	background: var(--bj-cream);
	border-radius: 26px;
	padding: 12px;
	box-sizing: border-box;
}

.bj-gingham .bj-photo-frame {
	aspect-ratio: 1 / 1;
}

@media (min-width: 600px) {
	.bj-gingham .wp-block-column > .bj-photo-frame {
		width: fit-content;
		margin: 0 auto;
	}
}

.bj-photo-frame img {
	border-radius: 16px;
	display: block;
	width: 100%;
	height: auto;
}

/* Kartu kategori — gingham dengan label krem di atasnya */
.bj-cat {
	border-radius: var(--bj-r-card);
	padding: 26px 28px;
	min-height: 190px;
	display: flex;
	align-items: flex-end;
	height: 100%;
	box-sizing: border-box;
}

.bj-cat__label {
	background: var(--bj-cream);
	border-radius: var(--bj-r-img);
	padding: 12px 18px;
	width: 100%;
}

.bj-cat__label h3 {
	margin: 0 0 2px;
	font-size: 30px;
}

.bj-cat__label h3 a {
	text-decoration: none;
}

.bj-cat__label p {
	margin: 0;
	font-size: 15px;
}

/* Tombol sekunder lewat block editor.
   Gutenberg menaruh className di div pembungkus, bukan di <a>,
   jadi selector-nya harus turun satu tingkat. */
.bj-btn--ghost .wp-block-button__link {
	background: var(--bj-cream);
	border: 2px solid var(--bj-ink);
	color: var(--bj-ink);
	box-shadow: none;
	outline: none;
}

.bj-btn--ghost .wp-block-button__link:hover {
	background: var(--bj-butter);
	color: var(--bj-ink);
}

/* Blocksy kasih border ke pembungkusnya juga — matikan yang itu */
.bj-btn--ghost {
	border: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}

@media (max-width: 767px) {
	.bj-cat {
		min-height: 0;
		padding: 16px;
	}

	.bj-cat__label h3 { font-size: 26px; }
}

/* ==========================================================================
   SLIDER HERO — tempel di bawah style.css
   ========================================================================== */

/* --- slider --- */

.bj-slider {
	background: var(--bj-cream);
	border-radius: 26px;
	padding: 12px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	/* Jadi acuan posisi buat .bj-slider__dots (lihat di bawah). */
	position: relative;
}

.bj-slider__viewport {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #F3EEDF;
	flex-grow: 1;
}

.bj-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}

.bj-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.bj-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- titik indikator, di dalam area foto ---
   .bj-slider__dots itu anak langsung .bj-slider (bukan .viewport),
   jadi acuan position:absolute-nya .bj-slider (sudah diberi
   position:relative di atas), bukan .viewport atau .bj-photo-frame.
   Sebelumnya sempat dipaksa lewat margin negatif supaya "naik" ke atas
   foto — tapi itu bikin .bj-slider__viewport ikut tumbuh nggak simetris
   (flex-grow mengkompensasi margin negatifnya), jadi framenya kelihatan
   nggak presisi kotak. absolute+bottom di sini nggak ganggu ukuran
   .viewport sama sekali. */
.bj-slider__dots {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 9px;
	padding: 0;
}

.bj-slider__dot {
	position: relative;
	width: 11px;
	height: 11px;
	padding: 0;
	border: 2px solid #FFFFFF;
	border-radius: 999px;
	background: rgba(0, 0, 0, .28);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
	transition: background .2s ease, transform .2s ease;
}

.bj-slider__dot.is-active {
	background: #FFFFFF;
	transform: scale(1.2);
}

/* Area sentuh 43px tanpa membesarkan titiknya */
.bj-slider__dot::after {
	content: '';
	position: absolute;
	inset: -16px;
}

@media (prefers-reduced-motion: reduce) {
	.bj-slider__slide,
	.bj-slider__dot {
		transition: none;
	}
}

@media (max-width: 767px) {
	.bj-slider {
		width: 100%;
	}
}