/* SHOP by EPOCHSTREAM — Tahap 1B
   Sengaja pakai variabel CSS tema (--es-primary, --es-line, dst) yang
   sudah didefinisikan di main.css tema EPOCHSTREAM, supaya warna &
   dark mode otomatis konsisten tanpa perlu duplikasi aturan warna. */

/* ── Lebar halaman toko — SINKRON dengan kontainer tema (v0.9.9) ────────
   Semua halaman plugin (arsip/kategori, single produk, keranjang, checkout,
   thankyou, baca ebook) memakai lebar & padding yang sama dengan
   .es-container tema EPOCHSTREAM: max-width var(--es-maxw) + padding 0 16px.
   Berlaku sama di desktop, tablet, dan mobile (tema tidak mengubah padding
   kontainer per breakpoint, jadi cukup satu aturan + penyesuaian kecil
   untuk layar sangat sempit). */
.ae-wrap {
    width: 100%;
    max-width: var(--es-maxw, 1200px);
    margin: 32px auto;
    padding: 0 16px 40px;
    box-sizing: border-box;
}
/* Modifier lama dipertahankan sebagai alias supaya markup/template & CSS
   turunan yang sudah ada tetap jalan, tapi lebarnya kini identik. */
.ae-wrap--full,

/* Kalau wrap plugin dirender DI DALAM kontainer tema (misalnya halaman
   /shop/ versi Page + shortcode yang dibungkus .es-container di page.php),
   jangan tumpuk lebar & padding-nya — cukup ikut kontainer induk. */
.es-container .ae-wrap,
.site-main .ae-wrap {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 480px) {
    .ae-wrap { margin-top: 20px; padding: 0 14px 40px; }
    .es-container .ae-wrap,
    .site-main .ae-wrap { padding-left: 0; padding-right: 0; }
}

/* ── Rata kiri dipaksa (v0.10.3) ─────────────────────────────────────────
   Tema EPOCHSTREAM membungkus output blok "HTML/Shortcode" Homepage
   Builder dengan inline style="text-align: center;" (lihat
   inc/homepage-builder.php, case 'html'). Inline style ini mengalahkan
   aturan CSS biasa, jadi judul, harga, dan brand kartu produk ikut ke
   tengah walau markupnya sendiri tidak dibuat untuk itu. Satu-satunya
   cara menimpa inline style adalah pakai !important di sini. */
.ae-kelas-card__title,
.ae-kelas-card__price,
.ae-kelas-card__brand,
.ae-kelas-card__preorder-note {
    text-align: left !important;
}

/* ── Banner Slider — geser pakai scroll-snap (mendukung swipe di HP
   otomatis), plus panah kiri-kanan buat desktop. 2 kartu per layar di
   desktop, 1 kartu per layar di mobile. ── */
.ae-banner-slider { position: relative; margin-bottom: 36px; }
.ae-banner-viewport {
    display: flex; align-items: stretch; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none; /* sembunyikan scrollbar bawaan browser */
}
.ae-banner-viewport::-webkit-scrollbar { display: none; }
/* v0.5.6: dulu dipaksa aspect-ratio 16/9 (gambar rasio lain jadi kepotong
   object-fit:cover). Sekarang tinggi kartu mengikuti rasio asli gambar yang
   diunggah — img ditampilkan apa adanya (width:100%, height:auto), tidak
   di-crop. align-items:stretch di viewport supaya antar-kartu sebaris tetap
   sejajar tingginya mengikuti kartu tertinggi kalau rasio gambarnya beda-beda. */
.ae-banner-card { position: relative; display: flex; border-radius: 12px; overflow: hidden; background: var(--es-bg-soft, #f5f6f8); text-decoration: none; scroll-snap-align: start; flex: 0 0 calc(50% - 8px); }
.ae-banner-card img { width: 100%; height: auto; display: block; }
.ae-banner-card__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(14px, 1.6vw, 24px); background: linear-gradient(to top, rgba(0,0,0,.75), transparent); display: flex; flex-direction: column; gap: 2px; }
.ae-banner-card__title { color: #fff; font-weight: 800; font-size: clamp(17px, 1.9vw, 28px); line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.ae-banner-card__subtitle { color: rgba(255,255,255,.88); font-size: clamp(12px, .95vw, 15px); line-height: 1.35; }
:root[data-theme="dark"] .ae-banner-card { background: var(--es-bg-soft, #1a1d24); }

.ae-banner-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 36px; height: 36px; border-radius: 999px; border: none; cursor: pointer;
    background: rgba(255,255,255,.92); color: var(--es-ink, #15171a); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.15); transition: opacity .15s;
}
.ae-banner-arrow--prev { left: 8px; }
.ae-banner-arrow--next { right: 8px; }
.ae-banner-arrow:hover { background: #fff; }
.ae-banner-arrow[disabled] { opacity: 0; pointer-events: none; }
:root[data-theme="dark"] .ae-banner-arrow { background: rgba(30,33,40,.92); color: #e8eaf0; }
:root[data-theme="dark"] .ae-banner-arrow:hover { background: #1e2128; }

@media (max-width: 680px) {
    .ae-banner-card { flex-basis: 100%; }
    .ae-banner-card__caption { padding: 12px; }
    .ae-banner-card__title { font-size: 20px; } /* v0.9.3: dari 15px, terlalu kecil di mobile */
    .ae-banner-card__subtitle { font-size: 14px; } /* v0.9.3: dari 11px, terlalu kecil di mobile */
}

/* ── Section wrapper umum (kategori, produk, pembayaran) ─────────────── */
.ae-section { margin-bottom: 40px; }
.ae-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.ae-section__title { font-size: 18px; font-weight: 700; margin: 0 0 16px; }
.ae-section--center { text-align: center; }
.ae-section--center .ae-section__title { text-align: center; }
.ae-section__head .ae-section__title { margin-bottom: 0; }
.ae-section__link { font-size: 13px; font-weight: 600; color: var(--es-primary, #e31e25); text-decoration: none; }
:root[data-theme="dark"] .ae-section__title { color: #e8eaf0; }

/* ── Grid kategori ────────────────────────────────────────────────────── */
.ae-category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ae-category-card {
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px;
    width: 108px; padding: 14px 10px; border-radius: 12px;
    border: 1px solid var(--es-line, #e7e9ee); text-decoration: none; color: inherit;
    background: var(--es-bg-soft, #f5f6f8); transition: border-color .15s, transform .15s;
}
.ae-category-card:hover { border-color: var(--es-primary, #e31e25); transform: translateY(-2px); }
.ae-category-card__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 24px; line-height: 1; }
.ae-category-card__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* v1.4.1: ikon mode mask-image — warnanya ikut currentColor dari .ae-category-card,
   otomatis ganti terang/gelap tanpa perlu unggah dua file. */
.ae-category-card__icon-mask { width: 100%; height: 100%; }
.ae-category-card__initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--es-primary, #e31e25); color: #fff; font-weight: 700; font-size: 18px; }
.ae-category-card__name { font-weight: 700; font-size: 13px; line-height: 1.25; }
.ae-category-card__count { font-size: 12px; color: var(--es-muted, #8a9099); }
:root[data-theme="dark"] .ae-category-card { background: #1e2128; border-color: #2a2d38; color: #e8eaf0; }
@media (max-width: 640px) {
    .ae-category-grid { gap: 10px; }
    .ae-category-card { width: 84px; padding: 10px 6px; gap: 6px; border-radius: 10px; }
    .ae-category-card__icon { width: 30px; height: 30px; font-size: 20px; }
    .ae-category-card__initial { font-size: 14px; }
    .ae-category-card__name { font-size: 11px; }
}

/* ── Logo metode pembayaran ───────────────────────────────────────────── */
.ae-payment-section { border-top: 1px solid var(--es-line, #e7e9ee); padding-top: 28px; }

.ae-about-section { border-top: 1px solid var(--es-line, #e7e9ee); padding-top: 32px; text-align: center; }
.ae-about-section__logo { max-width: 220px; max-height: 100px; object-fit: contain; margin: 0 auto 18px; display: block; }
.ae-about-section__desc { font-size: 14px; line-height: 1.7; color: var(--es-muted, #8a9099); white-space: pre-line; margin: 0 0 18px; }
.ae-about-section__socials { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.ae-about-section__socials a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #fff; border: 1px solid var(--es-line, #e7e9ee); border-radius: 6px; padding: 8px; box-sizing: border-box; }
.ae-about-section__socials img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 700px) {
    .ae-about-section__socials a { width: 56px; height: 56px; padding: 10px; }
}
:root[data-theme="dark"] .ae-about-section { border-color: #2a2d38; }
:root[data-theme="dark"] .ae-about-section__desc { color: #b7bcc8; }
:root[data-theme="dark"] .ae-about-section__socials a { background: #1e2128; border-color: #2a2d38; }
/* v2.0.4: logo & ikon sosmed sebelumnya tetap tampil warna aslinya di dark mode
   (beda dgn ikon Kategori yg sudah otomatis via mask-image — itu bisa karena
   filenya sengaja 1 warna). Logo/ikon sosmed di sini format PNG biasa & boleh
   multi-warna, jadi dipakai filter brightness(0)+invert(1): area buram di PNG
   (berapa pun warna aslinya) dipaksa jadi putih solid mengikuti alpha channel,
   area transparan tetap transparan — otomatis putih di dark mode TANPA perlu
   upload ulang versi khusus, berlaku utk file PNG/SVG apa pun asal latar
   transparan. Mode terang tidak disentuh (filter hanya aktif di dalam
   selector [data-theme="dark"]). */
:root[data-theme="dark"] .ae-about-section__logo,
:root[data-theme="dark"] .ae-about-section__socials img { filter: brightness(0) invert(1); }



.ae-payment-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ae-payment-logo { display: flex; align-items: center; justify-content: center; width: 72px; height: 44px; background: #fff; border: 1px solid var(--es-line, #e7e9ee); border-radius: 6px; padding: 6px; }
.ae-payment-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* v0.12.5: logo Metode Pembayaran & Layanan Pengiriman terasa kekecilan di
   Desktop. Dibesarkan sedikit (72x44 -> 104x64, kira-kira ukuran yang umum
   dipakai situs e-commerce) HANYA di layar >680px — ukuran mobile (72x44)
   dibiarkan seperti semula karena sudah pas. */
@media (min-width: 681px) {
    .ae-payment-logo { width: 104px; height: 64px; padding: 10px; }
}
:root[data-theme="dark"] .ae-payment-section { border-color: #2a2d38; }
:root[data-theme="dark"] .ae-payment-logo { background: #e9eaee; border-color: #d7d9e0; }


/* ── Ikon keranjang di header ─────────────────────────────────────────── */
.ae-cart-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 6px; } /* margin-left dihapus — spacing sudah rata otomatis dari .header-actions{gap:8px} di tema, nambah margin di sini malah bikin jarak ke search jadi 16px sementara ke dark-mode cuma 8px */
.ae-cart-badge {
    position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--es-primary, #e31e25); color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 999px; display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* ── Wrap sempit (keranjang/checkout) — disamakan dengan lebar plugin
   Kontributor (.ke-wrap) supaya konsisten antar-plugin. ── */

/* ── Halaman Keranjang ─────────────────────────────────────────────────── */
.ae-cart-list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
/* v2.2.4: kolom qty & harga dibuat lebar tetap supaya SEJAJAR antar baris
   (dulu 'auto' → tiap baris melebar sesuai panjang angkanya, jadi terlihat
   miring). Kolom pertama = checkbox pilih item (pola Shopee). */
.ae-cart-row {
    display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) 124px 130px 28px;
    align-items: center; gap: 14px;
    padding: 16px 0; border: 1px solid var(--es-line, #e7e9ee); border-radius: 10px; background: #fff;
}
/* Di dalam kartu toko, tiap produk cukup dipisah garis tipis + jarak lega. */
.ae-cart-group .ae-cart-row { border: none; border-radius: 0; background: transparent; padding: 18px 0; }
.ae-cart-group .ae-cart-row + .ae-cart-row { border-top: 1px solid var(--es-line, #e7e9ee); }
.ae-cart-row.is-unchecked { opacity: .55; }
.ae-cart-check { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ae-cart-check input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--es-primary, #e31e25); }
.ae-cart-row .ae-qty { justify-self: start; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ae-cart-row__thumb { width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--es-bg-soft, #f5f6f8); display: block; }
.ae-cart-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-cart-row__thumb--placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #eceef2, #f7f8fa); }
.ae-cart-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ae-cart-row__title { font-size: 14px; font-weight: 600; color: inherit; text-decoration: none; }
.ae-cart-row__price { font-size: 12px; color: var(--es-muted, #8a9099); }
.ae-cart-row__subtotal { font-weight: 700; font-size: 14px; white-space: nowrap; text-align: right; }
.ae-cart-row__remove { background: none; border: none; font-size: 20px; color: var(--es-muted, #8a9099); cursor: pointer; line-height: 1; padding: 4px; }
.ae-cart-row__remove:hover { color: var(--es-primary, #e31e25); }
:root[data-theme="dark"] .ae-cart-row { background: #1e2128; border-color: #2a2d38; }
:root[data-theme="dark"] .ae-cart-group .ae-cart-row { background: transparent; border-color: transparent; }
:root[data-theme="dark"] .ae-cart-group .ae-cart-row + .ae-cart-row { border-top: 1px solid #2a2d38; }
:root[data-theme="dark"] .ae-cart-row__thumb { background: var(--es-bg-soft, #1a1d24); }
:root[data-theme="dark"] .ae-cart-row__title { color: #e8eaf0; }

.ae-cart-summary { border-top: 1px solid var(--es-line, #e7e9ee); padding-top: 20px; }
.ae-cart-summary__row { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.ae-cart-summary__note { font-size: 12px; color: var(--es-muted, #8a9099); margin: 0 0 16px; }
:root[data-theme="dark"] .ae-cart-summary { border-color: #2a2d38; }

.ae-btn--block { display: block; width: 100%; text-align: center; }
.ae-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Halaman Checkout ─────────────────────────────────────────────────── */
.ae-checkout-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; margin-top: 20px; }
.ae-form-row { margin-bottom: 16px; }
.ae-form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ae-form-row input, .ae-form-row textarea, .ae-form-row select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--es-line, #e7e9ee); border-radius: 8px;
    font-size: 14px; font-family: inherit; background: #fff; color: inherit;
}
.ae-form-row select:disabled { opacity: .6; cursor: not-allowed; }
.ae-form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.ae-form-row--split .ae-form-row { margin-bottom: 0; }
:root[data-theme="dark"] .ae-form-row input, :root[data-theme="dark"] .ae-form-row textarea, :root[data-theme="dark"] .ae-form-row select { background: #1e2128; border-color: #2a2d38; color: #e8eaf0; }
/* Mobile: kotak isian dalam baris 2-kolom (mis. Harga/Harga Coret, Berat/Dimensi,
   Tanggal Mulai/Selesai) ditumpuk 1 kolom per baris supaya nyaman disentuh &
   tidak sempit di layar sempit (v1.7.5). */
@media (max-width: 640px) {
    .ae-form-row--split { grid-template-columns: 1fr; gap: 16px; }
}

.ae-pengambilan-opsi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ae-pengambilan-card { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.ae-pengambilan-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ae-pengambilan-card__box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 16px 10px; border: 1px solid var(--es-line, #e7e9ee); border-radius: 8px; background: #fff; text-align: center; transition: border-color .15s, background .15s, color .15s; }
.ae-pengambilan-card__title { font-weight: 700; font-size: 14px; }
.ae-pengambilan-card__sub { display: block; width: 100%; font-size: 11px; color: var(--es-muted, #8a9099); text-align: center; font-weight: 400; }
.ae-pengambilan-card:has(input:checked) .ae-pengambilan-card__box { border-color: var(--es-primary, #e31e25); background: rgba(227,30,37,.05); color: var(--es-primary, #e31e25); }
:root[data-theme="dark"] .ae-pengambilan-card__box { background: #1e2128; border-color: #2a2d38; color: #e8eaf0; }
:root[data-theme="dark"] .ae-pengambilan-card__sub { color: #9ea3b0; }
@media (max-width: 480px) { .ae-pengambilan-card__box { padding: 12px 6px; } .ae-pengambilan-card__title { font-size: 13px; } }
.ae-checkout-shipping { background: var(--es-bg-soft, #f5f6f8); border-radius: 8px; padding: 14px; margin-bottom: 18px; font-size: 13px; }
.ae-checkout-shipping strong { display: block; margin-bottom: 4px; }
.ae-checkout-shipping__hint { margin: 0 0 10px; color: var(--es-muted, #8a9099); }
:root[data-theme="dark"] .ae-checkout-shipping { background: #1a1d24; }
:root[data-theme="dark"] .ae-checkout-shipping__hint { color: #9ea3b0; }

.ae-checkout-shipping__options { display: flex; flex-direction: column; gap: 8px; }
.ae-shipping-option {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--es-line, #e7e9ee); border-radius: 8px; background: #fff;
    cursor: pointer; font-size: 13px;
}
.ae-shipping-option input[type="radio"] { flex: 0 0 auto; margin: 0; }
.ae-shipping-option:has(input:checked) { border-color: var(--es-primary, #e31e25); background: rgba(227,30,37,.05); }
.ae-shipping-option__info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.ae-shipping-option__name { font-weight: 600; }
.ae-shipping-option__duration { color: var(--es-muted, #8a9099); font-size: 12px; }
.ae-shipping-option__price { font-weight: 700; color: var(--es-primary, #e31e25); white-space: nowrap; }
:root[data-theme="dark"] .ae-shipping-option { background: #1e2128; border-color: #2a2d38; }
:root[data-theme="dark"] .ae-shipping-option__duration { color: #9ea3b0; }

.ae-checkout-note { font-size: 12px; color: var(--es-muted, #8a9099); margin-top: 10px; }
.ae-checkout-map { width: 100%; height: 220px; border-radius: 8px; border: 1px solid var(--es-line, #e7e9ee); margin-top: 8px; }
.ae-checkout-tos { display: flex; }
.ae-checkout-tos__label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.ae-checkout-tos__label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }
.ae-checkout-tos__label a { text-decoration: underline; }

.ae-checkout-summary { border: 1px solid var(--es-line, #e7e9ee); border-radius: 10px; padding: 18px; background: var(--es-bg-soft, #f5f6f8); }
.ae-checkout-summary__item { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; color: var(--es-muted, #8a9099); }
.ae-checkout-summary__row { display: flex; justify-content: space-between; font-size: 14px; padding-top: 10px; border-top: 1px solid var(--es-line, #e7e9ee); margin-top: 10px; }
.ae-checkout-summary__row--total { font-size: 18px; font-weight: 700; }
:root[data-theme="dark"] .ae-checkout-summary { background: #1e2128; border-color: #2a2d38; }
:root[data-theme="dark"] .ae-checkout-summary__item { color: #9ea3b0; }
:root[data-theme="dark"] .ae-checkout-summary__row { border-color: #2a2d38; }
:root[data-theme="dark"] .ae-thankyou__status { background: #1e2128; border-color: #2a2d38; color: #e8eaf0; }

@media (max-width: 720px) {
    .ae-checkout-layout { grid-template-columns: 1fr; }
    /* v0.5.9 FIX: dulu grid-template-areas di sini tidak berpengaruh sama
       sekali karena elemen anaknya (thumb/body/qty/subtotal/remove) tidak
       pernah diberi properti grid-area — jadi browser diam-diam balik ke
       auto-placement bawaan grid-template-columns:48px 1fr, hasilnya baris
       keranjang jadi berantakan (tombol hapus "×" nyangkut sendirian di
       bawah, dst). Sekarang area & grid-area anaknya dipasangkan dengan
       benar: thumbnail di kiri (menumpuk 3 baris), kanan-atas judul+harga +
       tombol hapus, tengah kontrol qty, bawah subtotal rata kanan. */
    .ae-cart-row {
        grid-template-columns: 22px 64px 1fr auto;
        grid-template-areas:
            "check thumb body     remove"
            "check thumb qty      qty"
            "check thumb subtotal subtotal";
        row-gap: 10px; column-gap: 12px;
    }
    .ae-cart-check { grid-area: check; align-self: start; margin-top: 4px; }
    .ae-cart-row__thumb { grid-area: thumb; align-self: start; }
    .ae-cart-row__body { grid-area: body; }
    .ae-qty { grid-area: qty; justify-self: start; }
    .ae-cart-row__subtotal { grid-area: subtotal; justify-self: end; }
    .ae-cart-row__remove { grid-area: remove; justify-self: end; align-self: start; }
}

/* ── Toast notifikasi kecil ────────────────────────────────────────────── */
.ae-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
    background: var(--es-ink, #15171a); color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 13px;
    opacity: 0; transition: opacity .2s, transform .2s; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.ae-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="dark"] .ae-toast { background: #2a2d38; }

/* ── Header halaman toko ─────────────────────────────────────────── */
.ae-ak-header { margin-bottom: 20px; }
.ae-ak-title { font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.ae-ak-sub { color: var(--es-muted, #8a9099); margin: 0; font-size: 14px; }
:root[data-theme="dark"] .ae-ak-sub { color: #9ea3b0; }

/* v0.5.6: header baris judul + tautan "Kembali" sejajar (dipakai di
   Checkout, dan di header Semua Produk/Kategori), plus varian judul dengan
   garis bawah (dipakai di Keranjang & Checkout). */
.ae-ak-title--underline { padding-bottom: 16px; border-bottom: 1px solid var(--es-line, #e7e9ee); margin-bottom: 20px; }
:root[data-theme="dark"] .ae-ak-title--underline { border-color: #2a2d38; }

.ae-page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ae-page-head .ae-ak-title { margin: 0; }
.ae-page-head--underline { padding-bottom: 16px; border-bottom: 1px solid var(--es-line, #e7e9ee); margin-bottom: 20px; }
:root[data-theme="dark"] .ae-page-head--underline { border-color: #2a2d38; }

.ae-breadcrumb--right { margin-bottom: 0; }

.ae-ak-header__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ae-ak-header__row .ae-ak-title { margin: 0; }

/* ── Tab kategori ─────────────────────────────────────────────────── */
.ae-cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ae-cat-tab {
    padding: 8px 16px; border-radius: 999px; border: 1px solid var(--es-line, #e7e9ee);
    font-size: 13px; font-weight: 600; text-decoration: none; color: var(--es-ink, #15171a);
    transition: background .15s, border-color .15s;
}
.ae-cat-tab:hover { background: var(--es-bg-soft, #f5f6f8); }
.ae-cat-tab.is-active { background: var(--es-primary, #e31e25); border-color: var(--es-primary, #e31e25); color: #fff; }
:root[data-theme="dark"] .ae-cat-tab { border-color: #2a2d38; color: #e8eaf0; }
:root[data-theme="dark"] .ae-cat-tab:hover { background: #1a1d24; }
:root[data-theme="dark"] .ae-cat-tab.is-active { color: #fff; }

/* ── Grid produk ──────────────────────────────────────────────────── */
.ae-kelas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.ae-kelas-card {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid var(--es-line, #e7e9ee); border-radius: 10px; overflow: hidden;
    background: #fff; transition: box-shadow .15s, transform .15s;
}
.ae-kelas-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.ae-kelas-card__thumb { position: relative; aspect-ratio: 1 / 1; background: var(--es-bg-soft, #f5f6f8); overflow: hidden; }
.ae-kelas-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-kelas-card__thumb--placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #eceef2, #f7f8fa); }
.ae-kelas-card.is-soldout .ae-kelas-card__thumb img { opacity: .5; }
.ae-kelas-card__body { padding: 14px; display: flex; flex-direction: column; }
.ae-kelas-card__title {
    font-size: 14px; font-weight: 600; margin: 0 0 8px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(1.4em * 2); /* selalu reservasi tinggi 2 baris, walau judul cuma 1 baris,
                                     supaya harga & brand di bawahnya sejajar antar-kartu. */
}
.ae-kelas-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
/* v0.12.5: warna label brand di-gelapkan dari var(--es-muted, #8a9099) (rasio kontras ±2.5:1,
   gagal WCAG AA & bikin skor Aksesibilitas Page Speed turun) ke var(--es-muted, #8a9099)
   (rasio kontras ±7.5:1 di atas latar putih) supaya tetap terbaca jelas
   tapi masih terasa "sekunder" dibanding judul produk. */
.ae-kelas-card__brand { font-size: 12px; color: var(--es-muted, #8a9099); }

:root[data-theme="dark"] .ae-kelas-card { background: #1e2128; border-color: #2a2d38; }
:root[data-theme="dark"] .ae-kelas-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.35); }
:root[data-theme="dark"] .ae-kelas-card__thumb { background: var(--es-bg-soft, #1a1d24); }
:root[data-theme="dark"] .ae-kelas-card__thumb--placeholder { background: linear-gradient(135deg, var(--es-bg-soft, #1a1d24), #1e2128); }
:root[data-theme="dark"] .ae-kelas-card__title { color: #e8eaf0; }
:root[data-theme="dark"] .ae-kelas-card__brand { color: #9ea3b0; }

/* v0.2.5: fix responsive mobile — sebelumnya .ae-kelas-grid pakai
   auto-fill minmax(220px,1fr), jadi di layar HP (±360-400px) cuma muat
   1 kolom (kartu ditumpuk memanjang ke bawah). Dipaksa 2 kolom di HP,
   dengan gap & padding kartu yang lebih ringkas biar tetap nyaman. */
@media (max-width: 680px) {
    .ae-kelas-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ae-kelas-card__body { padding: 10px; }
    .ae-kelas-card__title { font-size: 13px; margin-bottom: 6px; }
    .ae-price { font-size: 13px; }
    .ae-price-coret { font-size: 11px; }
    .ae-kelas-card__brand { font-size: 11px; }
}
@media (max-width: 380px) {
    .ae-kelas-grid { gap: 8px; }
}

/* ── Harga & badge ────────────────────────────────────────────────── */
.ae-price { font-weight: 700; color: var(--es-primary, #e31e25); font-size: 15px; }
.ae-price--lg { font-size: 26px; }
.ae-price-coret { font-size: 12px; color: var(--es-muted, #8a9099); text-decoration: line-through; }

.ae-badge { position: absolute; top: 8px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: #fff; }
/* v0.7.4: Diskon & Pre-Order dulu sama-sama nempel di kiri jadi bertabrakan.
   Sekarang badge status stok (Pre-Order/Stok Habis) selalu di kiri (dan
   keduanya mutually exclusive, jadi tidak akan tampil bareng), sedangkan
   Diskon selalu di kanan — otomatis tidak akan pernah bertabrakan lagi. */
.ae-badge--sale { right: 8px; background: var(--es-primary, #e31e25); }
.ae-badge--soldout { left: 8px; background: var(--es-muted, #8a9099); }
.ae-badge--preorder { left: 8px; background: #d97706; }
.ae-kelas-detail__price .ae-badge--sale,
.ae-kelas-detail__price .ae-badge--preorder { position: static; margin-left: 4px; }
.ae-badge--sm { position: static; display: inline-block; font-size: 10px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }

/* ── Pre-order ────────────────────────────────────────────────────── */
.ae-kelas-card__preorder-note { display: block; font-size: 11px; color: #b45309; font-weight: 600; margin-top: 2px; }
.ae-preorder-info { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
.ae-preorder-info p { margin: 0 0 4px; color: #92400e; }
.ae-preorder-info p:last-child { margin-bottom: 0; }
:root[data-theme="dark"] .ae-preorder-info { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.35); }
:root[data-theme="dark"] .ae-preorder-info p { color: #fbbf24; }
.ae-cart-summary__row--preorder,
.ae-checkout-summary__row--preorder { color: #b45309; font-weight: 600; }

/* ── Pagination & empty state ─────────────────────────────────────── */
.ae-pagination { margin-top: 32px; text-align: center; }
.ae-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; margin: 0 3px; border-radius: 6px;
    border: 1px solid var(--es-line, #e7e9ee); text-decoration: none; color: inherit; font-size: 13px;
}
.ae-pagination .page-numbers.current { background: var(--es-primary, #e31e25); border-color: var(--es-primary, #e31e25); color: #fff; }
:root[data-theme="dark"] .ae-pagination .page-numbers { border-color: #2a2d38; color: #e8eaf0; }
.ae-empty { text-align: center; padding: 60px 20px; color: var(--es-muted, #8a9099); }
:root[data-theme="dark"] .ae-empty { color: #9ea3b0; }

/* ── Halaman detail produk ────────────────────────────────────────── */
.ae-breadcrumb { margin-bottom: 20px; }
.ae-breadcrumb a { color: var(--es-primary, #e31e25); text-decoration: none; font-size: 13px; font-weight: 600; }
.ae-kelas-detail { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 40px; align-items: start; margin-bottom: 36px; }
.ae-kelas-detail__gallery { border-radius: 12px; } /* v0.2.3: background abu-abu di belakang foto dihapus sesuai permintaan — sekarang transparan, foto tampil bersih tanpa kotak abu-abu di sekelilingnya. */
.ae-kelas-detail__gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-kelas-detail__thumb--placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #eceef2, #f7f8fa); }
:root[data-theme="dark"] .ae-kelas-detail__thumb--placeholder { background: linear-gradient(135deg, var(--es-bg-soft, #1a1d24), #1e2128); }

.ae-kelas-detail__cats { display: flex; gap: 6px; margin-bottom: 10px; }
.ae-cat-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--es-primary, #e31e25); text-decoration: none; }
.ae-kelas-detail__title { font-size: 26px; font-weight: 700; margin: 0 0 14px; line-height: 1.3; }
:root[data-theme="dark"] .ae-kelas-detail__title { color: #e8eaf0; }
.ae-kelas-detail__price { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ae-kelas-detail__stock { display: flex; gap: 16px; font-size: 13px; margin-bottom: 24px; }
.ae-stock--ok { color: #16a34a; font-weight: 600; }
.ae-stock--out { color: #dc2626; font-weight: 600; }
:root[data-theme="dark"] .ae-stock--ok { color: #4ade80; }
:root[data-theme="dark"] .ae-stock--out { color: #f87171; }
.ae-sku { color: var(--es-muted, #8a9099); }

.ae-kelas-detail__cta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ae-qty { display: flex; align-items: center; border: 1px solid var(--es-line, #e7e9ee); border-radius: 8px; overflow: hidden; }
.ae-qty__btn { width: 36px; height: 40px; border: none; background: var(--es-bg-soft, #f5f6f8); font-size: 16px; cursor: pointer; }
.ae-qty__input { width: 44px; height: 40px; border: none; text-align: center; font-size: 14px; -moz-appearance: textfield; }
.ae-qty__input::-webkit-outer-spin-button, .ae-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:root[data-theme="dark"] .ae-qty { border-color: #2a2d38; }
:root[data-theme="dark"] .ae-qty__btn { background: #1a1d24; color: #e8eaf0; }
:root[data-theme="dark"] .ae-qty__input { background: #1e2128; color: #e8eaf0; }

.ae-btn { padding: 11px 22px; border-radius: 8px; border: none; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; }
.ae-btn--primary { background: var(--es-primary, #e31e25); color: #fff; }
/* v0.5.6: teks jadi ikut warna merah saat hover (ketiban style hover link
   umum dari tema, karena tombol ini dirender sebagai <a>) — dikunci putih. */
.ae-btn--primary:hover,
.ae-btn--primary:hover:visited { background: var(--es-primary-dark, #b01419); color: #fff !important; }
:root[data-theme="dark"] .ae-btn--primary:hover { background: var(--es-primary-dark, #b01419); color: #fff !important; }
.ae-btn--disabled, .ae-btn:disabled { background: var(--es-line, #e7e9ee); color: var(--es-muted, #8a9099); cursor: not-allowed; }
.ae-kelas-detail__note { font-size: 12px; color: var(--es-muted, #8a9099); margin: 0 0 24px; }

/* v0.7.4: tab "Deskripsi Produk" / "Informasi Produk" ala Tokopedia/Zalora
   menggantikan blok deskripsi polos (.ae-kelas-detail__desc) sebelumnya. */
.ae-kelas-tabs { border-top: 1px solid var(--es-line, #e7e9ee); padding-top: 20px; }
.ae-kelas-tabs__nav { display: flex; gap: 4px; border-bottom: 1px solid var(--es-line, #e7e9ee); margin-bottom: 20px; }
.ae-kelas-tabs__tab {
    appearance: none; border: none; background: none; cursor: pointer; font: inherit;
    font-size: 14px; font-weight: 600; color: var(--es-muted, #8a9099); padding: 10px 4px; margin-right: 24px;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.ae-kelas-tabs__tab:hover { color: var(--es-primary, #e31e25); }
.ae-kelas-tabs__tab.is-active { color: var(--es-primary, #e31e25); border-bottom-color: var(--es-primary, #e31e25); }
.ae-kelas-tabs__panel[hidden] { display: none; }
.ae-kelas-tabs__panel h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
:root[data-theme="dark"] .ae-kelas-tabs { border-color: #2a2d38; }
:root[data-theme="dark"] .ae-kelas-tabs__nav { border-color: #2a2d38; }
:root[data-theme="dark"] .ae-kelas-tabs__tab { color: var(--es-muted, #8a9099); }
:root[data-theme="dark"] .ae-kelas-tabs__panel { color: #e8eaf0; }

.ae-info-list { margin: 0; }
.ae-info-list__row {
    display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--es-line, #e7e9ee); font-size: 14px;
}
.ae-info-list__row:last-child { border-bottom: none; }
.ae-info-list__row dt { font-weight: 600; color: var(--es-muted, #8a9099); }
.ae-info-list__row dd { margin: 0; }
:root[data-theme="dark"] .ae-info-list__row { border-color: #2a2d38; }
:root[data-theme="dark"] .ae-info-list__row dt { color: var(--es-muted, #8a9099); }
@media (max-width: 480px) {
    .ae-info-list__row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 720px) {
    .ae-kelas-detail { grid-template-columns: 1fr; gap: 24px; }
}

/* v0.2.5: fix responsive mobile — di HP, gambar galeri & judul/harga
   masih pakai ukuran desktop (judul 26px, harga 26px, thumbnail 64px),
   jadi terasa kebesaran & bikin scroll horizontal. Diperkecil khusus
   mobile, dan .ae-wrap padding disempitkan biar konten tidak mepet. */
@media (max-width: 480px) {
    .ae-kelas-detail__title { font-size: 20px; margin-bottom: 10px; }
    .ae-price--lg { font-size: 21px; }
    .ae-kelas-gallery__thumb { flex: 0 0 52px; width: 52px; height: 52px; }
    .ae-kelas-gallery__arrow { width: 30px; height: 30px; }
    .ae-kelas-detail__cta { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════
   Galeri thumbnail, tombol share, & deskripsi pendek di halaman
   detail produk.
   ═══════════════════════════════════════════════════════════ */

/* v0.2.3: main foto sekarang jadi "slider" ala Tokopedia — foto polos tanpa
   kotak abu-abu di belakangnya, dengan panah kiri/kanan yang muncul di atas
   foto untuk pindah gambar (selain klik thumbnail di bawahnya). */
.ae-kelas-gallery__main { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; }
.ae-kelas-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ae-kelas-gallery__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.9); color: #1f2328; font-size: 14px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: background .15s ease;
}
.ae-kelas-gallery__arrow:hover { background: #fff; }
.ae-kelas-gallery__arrow--prev { left: 12px; }
.ae-kelas-gallery__arrow--next { right: 12px; }
.ae-kelas-gallery__arrow:disabled { opacity: .35; cursor: not-allowed; }
:root[data-theme="dark"] .ae-kelas-gallery__arrow { background: rgba(30,33,40,.85); color: #e8eaf0; }
:root[data-theme="dark"] .ae-kelas-gallery__arrow:hover { background: #1e2128; }

/* v0.2.4: scrollbar bawaan browser di strip thumbnail disembunyikan — sebelumnya
   overflow-x:auto tanpa styling scrollbar, jadi muncul bar tebal berwarna gelap
   di bawah galeri (terutama di Chrome/Edge Windows). Geser tetap bisa lewat drag/swipe. */
.ae-kelas-gallery__thumbs {
    display: flex; gap: 10px; margin-top: 12px; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.ae-kelas-gallery__thumbs::-webkit-scrollbar { display: none; }
.ae-kelas-gallery__thumb {
    flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
    border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--es-bg-soft, #f5f6f8);
}
.ae-kelas-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-kelas-gallery__thumb.is-active { border-color: var(--es-primary, #e31e25); }
:root[data-theme="dark"] .ae-kelas-gallery__thumb { background: var(--es-bg-soft, #1a1d24); }

/* v0.7.2: preview/lightbox foto utama — klik foto utama untuk lihat versi besar. */
[data-ae-gallery-zoomable] { cursor: zoom-in; }
.ae-lightbox {
    position: fixed; inset: 0; z-index: 9999; background: rgba(15,16,20,.92);
    display: flex; align-items: center; justify-content: center; padding: 40px;
}
.ae-lightbox[hidden] { display: none; }
.ae-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.ae-lightbox__close {
    position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ae-lightbox__close:hover { background: rgba(255,255,255,.22); }
.ae-lightbox__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.ae-lightbox__arrow:hover { background: rgba(255,255,255,.22); }
.ae-lightbox__arrow:disabled { opacity: .3; cursor: not-allowed; }
.ae-lightbox__arrow--prev { left: 16px; }
.ae-lightbox__arrow--next { right: 16px; }
@media (max-width: 640px) {
    .ae-lightbox { padding: 16px; }
    .ae-lightbox__arrow { width: 38px; height: 38px; }
}

/* v2.4.8: tombol share sekarang mandiri (SE\Share_Buttons, class "se-share-",
   assets/css/share.css) — TIDAK numpang lagi ke .es-share milik tema, jadi
   seluruh tambalan CSS lama untuk menyesuaikan/menyembunyikan bagian markup
   tema (v0.2.3–v0.5.7) sudah tidak relevan & dihapus dari sini. Sisa yang
   masih dipakai cuma jarak vertikal & perataan di Mobile (di bawah), keduanya
   sudah ditulis langsung menyasar .ae-share- milik plugin sendiri.
   v0.2.3 (dipertahankan): jarak ke tombol "Tambah ke Keranjang" di atasnya. */
.ae-kelas-detail__share--spaced { margin-top: 24px; }

/* Di mobile, tombol share dibuat rata tengah supaya lebih rapi di layar sempit. */
@media (max-width: 680px) {
    .ae-kelas-detail__share { text-align: center; }
    .ae-kelas-detail__share .ae-share { justify-content: center; }
}

.ae-kelas-detail__excerpt { color: var(--es-muted, #8a9099); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
:root[data-theme="dark"] .ae-kelas-detail__excerpt { color: #9ea3b0; }
/* v1.5.9: nama kolaborator penjual/pengunggah produk, di bawah deskripsi singkat */
/* v1.6.0: panel tab "Kolaborator" di single produk (dipindah dari bawah deskripsi singkat) */
.ae-kelas-kolaborator-panel__header { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; }
.ae-kelas-kolaborator-panel__avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--es-bg-soft, #f5f6f8); color: var(--es-muted, #8a9099); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.ae-kelas-kolaborator-panel__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ae-kelas-kolaborator-panel__text { display: flex; flex-direction: column; gap: 2px; }
.ae-kelas-kolaborator-panel__name { font-size: 16px; font-weight: 700; color: var(--es-ink, #15171a); }
.ae-kelas-kolaborator-panel__bio { font-size: 13px; color: var(--es-muted, #8a9099); }
.ae-kelas-kolaborator-panel__meta { font-size: 12px; color: var(--es-muted, #8a9099); }
.ae-kelas-kolaborator-panel__social { display: flex; gap: 8px; margin: 14px 0 0; }
.ae-kelas-kolaborator-panel__social a { width: 34px; height: 34px; border-radius: 50%; background: var(--es-bg-soft, #f7f8fa); border: 1px solid var(--es-line, #e7e9ee); display: flex; align-items: center; justify-content: center; color: var(--es-muted, #8a9099); transition: background .15s, color .15s; }
.ae-kelas-kolaborator-panel__social a svg { width: 17px; height: 17px; }
.ae-kelas-kolaborator-panel__social a:hover { background: var(--es-primary, #e31e25); color: #fff; border-color: var(--es-primary, #e31e25); }
:root[data-theme="dark"] .ae-kelas-kolaborator-panel__social a { background: #262a35; border-color: #2a2d38; color: #9ea3b0; }
.ae-kelas-kolaborator-panel__cta { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--es-primary, #e31e25); text-decoration: none; }
.ae-kelas-kolaborator-panel__cta:hover { text-decoration: underline; }
:root[data-theme="dark"] .ae-kelas-kolaborator-panel__name { color: var(--es-ink, #15171a); }
:root[data-theme="dark"] .ae-kelas-kolaborator-panel__bio { color: #c1c5cf; }

/* ── "Produk Lainnya" di bawah deskripsi detail produk ─────── */
.ae-related-products { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--es-line, #e7e9ee); margin-bottom: 0; }
:root[data-theme="dark"] .ae-related-products { border-color: #2a2d38; }

/* ═══════════════════════════════════════════════════════════
   v0.3.1 — FIX responsif halaman detail produk di mobile.
   Masalah: kolom grid punya lebar minimum "auto", jadi konten
   panjang (judul, harga, tombol, deskripsi/tabel/gambar) memaksa
   kolom melebar lebih dari layar → halaman geser ke samping.
   ═══════════════════════════════════════════════════════════ */
.ae-wrap { width: 100%; box-sizing: border-box; overflow-x: clip; }
.ae-kelas-detail > * { min-width: 0; }
.ae-kelas-detail__gallery,
.ae-kelas-detail__info { min-width: 0; max-width: 100%; }
.ae-kelas-detail__title,
.ae-kelas-detail__excerpt { overflow-wrap: anywhere; }
.ae-kelas-detail__cats { flex-wrap: wrap; }
.ae-kelas-detail__stock { flex-wrap: wrap; gap: 8px 16px; }
.ae-kelas-tabs__panel { overflow-wrap: anywhere; }
.ae-kelas-tabs__panel img,
.ae-kelas-tabs__panel iframe,
.ae-kelas-tabs__panel video { max-width: 100%; height: auto; }
.ae-kelas-tabs__panel table { display: block; width: 100%; overflow-x: auto; }
.ae-kelas-gallery,
.ae-kelas-gallery__main { max-width: 100%; }
.ae-kelas-gallery__thumbs { max-width: 100%; }

@media (max-width: 600px) {
    .ae-kelas-detail { gap: 20px; }
    /* Tombol & qty selalu muat di layar: qty tetap, tombol isi sisa ruang. */
    .ae-kelas-detail__cta { flex-wrap: wrap; gap: 10px; }
    .ae-qty { flex: 0 0 auto; }
    .ae-kelas-detail__cta .ae-btn { flex: 1 1 auto; width: auto; min-width: 0; text-align: center; }
    .ae-kelas-detail__price { gap: 8px; }
    .ae-kelas-detail__price .ae-badge--sale { margin-left: 0; }
}

@media (max-width: 380px) {
    .ae-kelas-detail__title { font-size: 18px; }
    .ae-price--lg { font-size: 19px; }
    /* Di layar sangat kecil, tombol turun ke baris sendiri full-width. */
    .ae-kelas-detail__cta .ae-btn { flex: 1 0 100%; padding: 12px 16px; }
}

/* ── Tahap 4: pesan error checkout & halaman status pesanan ────────── */
.ae-checkout-error {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 14px;
    line-height: 1.5;
}
:root[data-theme="dark"] .ae-checkout-error { background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.4); color: #fca5a5; }
.ae-thankyou {
    max-width: 100%;
    min-width: 0;
}
.ae-thankyou__status {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--es-bg-soft, #f5f6f8);
    border: 1px solid var(--es-line, #e7e9ee);
    word-break: break-word;
}
.ae-thankyou .ae-checkout-summary {
    margin-top: 20px;
}
.ae-thankyou .ae-btn--primary {
    display: inline-block;
}

/* ════════════════════════════════════════════════════════════════
   AKSARIFY — komponen khusus LMS
   Ditulis di atas fondasi yang diturunkan dari shop.css milik SHOP by
   EPOCHSTREAM (variabel & token warna tema --es-* dipakai apa adanya,
   jadi Dark Mode otomatis ikut tanpa aturan warna terpisah).
   ════════════════════════════════════════════════════════════════ */

/* ── Halaman detail kelas (tata letak ala Tempo Institute) ── */
.ae-kelas-detail{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start;margin-top:8px}
@media(max-width:900px){.ae-kelas-detail{grid-template-columns:1fr;gap:24px}}

.ae-kelas-side{position:sticky;top:90px}
@media(max-width:900px){.ae-kelas-side{position:static}}
.ae-kelas-side__card{border:1px solid var(--es-line,#e5e7eb);border-radius:8px;overflow:hidden;background:var(--es-bg-soft,#f9fafb)}
.ae-kelas-side__thumb{position:relative;aspect-ratio:1/1;background:var(--es-line,#e5e7eb)}
.ae-kelas-side__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ae-kelas-side__badge{position:absolute;top:10px;left:10px;background:var(--es-primary,#e31e25);color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px}
.ae-kelas-side__body{padding:16px}
.ae-kelas-side__row{padding:10px 0;border-bottom:1px solid var(--es-line,#e5e7eb)}
.ae-kelas-side__row:first-child{padding-top:0}
.ae-kelas-side__row--benefit{border-bottom:none}
.ae-kelas-side__label{display:block;font-size:12px;font-weight:700;color:var(--es-ink,#15171a);margin-bottom:4px}
.ae-kelas-side__value{font-size:13px;color:var(--es-muted,#4b5563)}
.ae-kelas-side__price .ae-price{color:var(--es-primary,#e31e25);font-size:20px;font-weight:700}
.ae-kelas-side__kuota{font-size:12px;color:var(--es-muted,#4b5563);margin:10px 0 0}
.ae-kelas-side__note,.ae-kelas-side__desc{font-size:12px;color:var(--es-muted,#4b5563);margin:10px 0 0;line-height:1.5}
.ae-kelas-side__msg{font-size:12px;margin:8px 0 0;color:var(--es-primary,#e31e25);min-height:1px}
.ae-kelas-side .ae-btn--block{margin-top:14px}

.ae-check-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px}
.ae-check-list--two{grid-template-columns:1fr 1fr;column-gap:12px}
@media(max-width:420px){.ae-check-list--two{grid-template-columns:1fr}}
.ae-check-list li{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;color:var(--es-muted,#4b5563);line-height:1.45}
.ae-check{color:var(--es-primary,#e31e25);font-weight:700;flex:0 0 auto;line-height:1.35}

.ae-kelas-eyebrow{display:block;font-size:13px;font-weight:600;color:var(--es-primary,#e31e25);margin-bottom:6px}
.ae-kelas-heading{font-size:30px;line-height:1.25;font-weight:700;margin:0 0 18px;color:var(--es-ink,#15171a)}
@media(max-width:600px){.ae-kelas-heading{font-size:23px}}
.ae-kelas-video{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;margin-bottom:20px}
.ae-kelas-video iframe,.ae-kelas-video video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ae-kelas-desc{font-size:15px;line-height:1.75;color:var(--es-ink,#15171a)}
.ae-kelas-desc p{margin:0 0 14px}
.ae-kelas-open{color:var(--es-primary,#e31e25);font-size:14px;margin:4px 0 12px}
.ae-kelas-catatan{font-size:14px;margin:0 0 8px;color:var(--es-ink,#15171a)}

.ae-kelas-block{margin-top:34px;padding-top:24px;border-top:1px solid var(--es-line,#e5e7eb)}
.ae-kelas-block__title{font-size:16px;font-weight:700;margin:0 0 14px;color:var(--es-ink,#15171a)}
.ae-kelas-learn__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:10px}
@media(max-width:700px){.ae-kelas-learn__grid{grid-template-columns:1fr;gap:18px}}
.ae-kelas-learn__title{font-size:14px;font-weight:700;margin:0 0 8px;color:var(--es-ink,#15171a)}
.ae-kelas-share-block{border-top:1px solid var(--es-line,#e5e7eb)}

/* ── Blok pengajar (akordeon) ── */
.ae-teacher{border:1px solid var(--es-line,#e5e7eb);border-radius:8px;margin-bottom:10px;overflow:hidden;background:var(--es-bg,#fff)}
.ae-teacher__head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none;background:var(--es-bg-soft,#f9fafb)}
.ae-teacher__head::-webkit-details-marker{display:none}
.ae-teacher__avatar{width:38px;height:38px;border-radius:99px;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--es-line,#e5e7eb);font-size:13px;font-weight:700;color:var(--es-muted,#4b5563)}
.ae-teacher__avatar img{width:100%;height:100%;object-fit:cover}
.ae-teacher__id{display:flex;flex-direction:column;gap:2px;flex:1}
.ae-teacher__id b{font-size:14px;color:var(--es-ink,#15171a)}
.ae-teacher__id span{font-size:12px;color:var(--es-muted,#4b5563)}
.ae-teacher__toggle{width:14px;height:2px;background:var(--es-primary,#e31e25);position:relative;flex:0 0 auto}
.ae-teacher__toggle::after{content:"";position:absolute;inset:0;background:var(--es-primary,#e31e25);transform:rotate(90deg);transition:opacity .15s}
.ae-teacher[open] .ae-teacher__toggle::after{opacity:0}
.ae-teacher__bio{padding:14px 16px 16px;font-size:13.5px;line-height:1.7;color:var(--es-muted,#4b5563)}
.ae-teacher__bio p{margin:0 0 10px}

/* ── Daftar kurikulum ── */
.ae-modul{border:1px solid var(--es-line,#e5e7eb);border-radius:8px;margin-bottom:10px;overflow:hidden}
.ae-modul__head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;background:var(--es-bg-soft,#f9fafb);font-size:14px}
.ae-modul__head::-webkit-details-marker{display:none}
.ae-modul__head span{font-size:12px;color:var(--es-muted,#4b5563)}
.ae-modul__list{list-style:none;margin:0;padding:6px 0}
.ae-modul__list li{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:13.5px;border-top:1px solid var(--es-line,#e5e7eb)}
.ae-modul__list li:first-child{border-top:none}
.ae-modul__icon{color:var(--es-primary,#e31e25);display:flex;flex:0 0 auto}
.ae-modul__judul{flex:1;color:var(--es-ink,#15171a)}
.ae-modul__durasi{font-size:12px;color:var(--es-muted,#4b5563)}
.ae-modul__preview{font-size:12px;font-weight:600;color:var(--es-primary,#e31e25);text-decoration:none}
.ae-modul__preview:hover{text-decoration:underline}
.ae-modul__list li.is-done .ae-modul__judul{color:var(--es-muted,#4b5563)}
.ae-modul__list li.is-current{background:var(--es-bg-soft,#f9fafb)}

/* ── Kartu kelas: baris meta tambahan ── */
.ae-kelas-card__meta{display:block;font-size:11.5px;color:var(--es-muted,#4b5563);margin:2px 0 6px}

/* ── Bar progres (dipakai dashboard & ruang belajar) ── */
.ae-progress{height:6px;border-radius:99px;background:var(--es-line,#e5e7eb);overflow:hidden}
.ae-progress__bar{height:100%;background:var(--es-primary,#e31e25);border-radius:99px;transition:width .25s}
.ae-progress-label{font-size:12px;color:var(--es-muted,#4b5563);margin-top:6px;display:block}

/* ── Ruang belajar ── */
.ae-belajar{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start;padding:28px 0 40px}
@media(max-width:900px){.ae-belajar{grid-template-columns:1fr}}
.ae-belajar__side{border:1px solid var(--es-line,#e5e7eb);border-radius:8px;overflow:hidden;position:sticky;top:90px}
@media(max-width:900px){.ae-belajar__side{position:static}}
.ae-belajar__side-head{padding:14px 16px;border-bottom:1px solid var(--es-line,#e5e7eb);background:var(--es-bg-soft,#f9fafb)}
.ae-belajar__side-head b{display:block;font-size:14px;margin-bottom:8px;color:var(--es-ink,#15171a)}
.ae-belajar__main h1{font-size:22px;font-weight:700;margin:0 0 4px;color:var(--es-ink,#15171a)}
.ae-belajar__crumb{font-size:12px;color:var(--es-muted,#4b5563);margin:0 0 16px;display:block}
.ae-belajar__body{font-size:15px;line-height:1.75;color:var(--es-ink,#15171a);margin-top:18px}
.ae-belajar__nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--es-line,#e5e7eb);flex-wrap:wrap}
.ae-belajar__done{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--es-ink,#15171a);cursor:pointer}
.ae-belajar__locked{border:1px dashed var(--es-line,#e5e7eb);border-radius:8px;padding:24px;text-align:center;font-size:14px;color:var(--es-muted,#4b5563)}

/* ── Sertifikat (halaman cetak) ── */
.ae-cert-wrap{max-width:960px;margin:24px auto;padding:0 16px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ae-cert{border:10px solid #e31e25;padding:48px 56px;text-align:center;background:#fff;color:#15171a}
.ae-cert__logo{max-height:56px;margin:0 auto 20px;display:block}
.ae-cert__label{letter-spacing:.22em;text-transform:uppercase;font-size:12px;color:#6b7280;margin:0 0 6px}
.ae-cert__title{font-size:30px;font-weight:700;margin:0 0 22px}
.ae-cert__name{font-size:26px;font-weight:700;margin:14px 0 6px}
.ae-cert__kelas{font-size:18px;font-weight:600;margin:10px 0 4px}
.ae-cert__meta{font-size:13px;color:#6b7280;margin-top:26px}
.ae-cert__sign{margin-top:34px}
.ae-cert__sign img{max-height:64px;display:block;margin:0 auto 6px}
.ae-cert__actions{text-align:center;margin:20px 0 40px}
@media print{.ae-cert__actions{display:none}.ae-cert-wrap{margin:0;max-width:none}}

/* ── Penyempurnaan v1.0.1 ───────────────────────────────────────────────
   Keuntungan Mengikuti Kelas Ini: satu kolom melebar penuh (dulu dua kolom
   yang bikin teks panjang kepotong). */
.ae-check-list--wide{grid-template-columns:1fr}
.ae-check-list--wide li{font-size:13px}

/* Materi Pembelajaran — akordeon bergaya FAQ, tampil di bawah deskripsi. */
.ae-matpel__item{border:1px solid var(--es-line,#e5e7eb);border-radius:10px;margin-bottom:10px;background:var(--es-bg,#fff);overflow:hidden}
.ae-matpel__head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none;font-weight:600;color:var(--es-text,#111827)}
.ae-matpel__head::-webkit-details-marker{display:none}
.ae-matpel__icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:var(--es-bg-soft,#f5f6f8);color:var(--es-primary,#e31e25)}
.ae-matpel__judul{flex:1;font-size:15px;line-height:1.4}
.ae-matpel__toggle{position:relative;width:12px;height:12px;flex:0 0 12px;transition:transform .18s ease}
.ae-matpel__toggle::before,.ae-matpel__toggle::after{content:"";position:absolute;background:var(--es-muted,#6b7280)}
.ae-matpel__toggle::before{left:0;top:5px;width:12px;height:2px}
.ae-matpel__toggle::after{left:5px;top:0;width:2px;height:12px}
.ae-matpel__item[open] .ae-matpel__toggle{transform:rotate(45deg)}
.ae-matpel__poin{margin:0;padding:0 18px 16px 64px;list-style:disc}
.ae-matpel__poin li{font-size:14px;line-height:1.6;color:var(--es-muted,#4b5563);margin-bottom:4px}
@media(max-width:600px){.ae-matpel__poin{padding-left:44px}}
:root[data-theme="dark"] .ae-matpel__item{background:#1e2128;border-color:#2a2d38}
:root[data-theme="dark"] .ae-matpel__icon{background:rgba(255,255,255,.06)}

/* ── Penyempurnaan v1.0.2 ─────────────────────────────────────────────── */

/* Dark Mode: judul blok & judul materi sempat tak terbaca karena
   var(--es-ink) tidak di-override tema, jadi jatuh ke fallback gelap. */
:root[data-theme="dark"] .ae-kelas-block__title,
:root[data-theme="dark"] .ae-matpel__head,
:root[data-theme="dark"] .ae-matpel__judul,
:root[data-theme="dark"] .ae-benefit__judul,
:root[data-theme="dark"] .ae-kelas-heading { color: #e8eaf0; }
:root[data-theme="dark"] .ae-matpel__poin li,
:root[data-theme="dark"] .ae-kelas-desc { color: #b7bcc8; }

/* Benefit — pola sama dengan Materi Pembelajaran (ikon + teks), tapi datar
   tanpa akordeon karena tidak punya poin rincian. */
.ae-benefit__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:600px){.ae-benefit__list{grid-template-columns:1fr}}
.ae-benefit__item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--es-line,#e5e7eb);border-radius:10px;background:var(--es-bg,#fff)}
.ae-benefit__icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--es-bg-soft,#f5f6f8);color:var(--es-primary,#e31e25)}
.ae-benefit__judul{font-size:14px;font-weight:600;line-height:1.4;color:var(--es-ink,#15171a)}
:root[data-theme="dark"] .ae-benefit__item{background:#1e2128;border-color:#2a2d38}
:root[data-theme="dark"] .ae-benefit__icon{background:rgba(255,255,255,.06)}