/* =====================================================================
   wp.css — penyesuaian khusus WordPress.
   screen.css adalah salinan apa adanya dari Ghost; semua perubahan
   untuk WordPress ditaruh di sini supaya mudah dilacak.
   ===================================================================== */


/* ---------- 1. Skip link (aksesibilitas) ----------
   Tersembunyi, muncul hanya saat pengguna keyboard menekan Tab pertama kali. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 5000000;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    top: 12px;
}


/* ---------- 2. Halaman standar (body.tf-standard) ----------
   Cart, Checkout, My account, dan page biasa tidak ada di theme Ghost.
   Di sini header ditampilkan (di Ghost header selalu disembunyikan)
   agar pengunjung tetap bisa membuka menu dan kembali ke toko. */
.tf-standard .site-bar {
    display: flex !important; /* menimpa display:none !important di screen.css */
    background: #fff;
    border-bottom: 1px solid rgba(16, 16, 20, 0.08);
}
.tf-standard .site-bar--hidden {
    transform: translateY(-100%) !important;
}
.tf-standard .site-bar__mark {
    color: var(--ink);
    text-shadow: none;
}
.tf-standard .gh-burger::before,
.tf-standard .gh-burger::after {
    background-color: var(--ink);
}
.tf-standard .site-main {
    padding: 88px 18px 64px;
}

@media (min-width: 661px) {
    /* Lebih lebar dari kolom reel 580px, supaya form checkout nyaman */
    .tf-standard .frame {
        max-width: 1100px;
    }
    .tf-standard .site-bar {
        left: 0;
        right: 0;
        max-width: none;
        transform: none;
    }
}

.tf-entry__title {
    margin: 0 0 24px;
    font-family: "Inter", var(--utility);
    font-size: clamp(28px, 6vw, 40px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.tf-entry__title a {
    color: inherit;
    text-decoration: none;
}
.tf-entry + .tf-entry {
    margin-top: 48px;
}


/* ---------- 3. Ikon keranjang (pengganti tombol Cart Sellfy) ----------
   Posisi sama dengan Cart Sellfy di Ghost (sellfy.css bagian 2). */
/* Area sentuh 40×40 px dengan lingkaran merah 22px di tengahnya (selisih 9px).
   Posisi area digeser 9px supaya LINGKARAN yang terlihat berada 14px dari atas
   dan 18px dari kanan (posisi semula). */
.tf-cart {
    position: fixed;
    top: 5px;
    right: 9px;
    z-index: 31;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;               /* area sentuh tetap 40×40 (mudah diketuk di HP) */
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
}
/* Keranjang kosong → badge disembunyikan */
.tf-cart.is-empty {
    display: none;
}
/* Tanda fokus keyboard memeluk lingkaran merah (bukan area sentuh 40px yang tak terlihat).
   Dua lapis (putih + gelap) → tetap terlihat di foto terang maupun gelap. */
.tf-cart:focus-visible {
    outline: none;
}
.tf-cart:focus-visible .tf-cart__count {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink);
}
/* Yang terlihat: lingkaran merah berisi angka (sama dengan angka Cart di menu) */
.tf-cart__count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ff4949;
    color: #fff;
    font-family: "Inter", var(--utility);
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}
.tf-cart__count[data-count="0"] {
    display: none;
}

@media (min-width: 661px) {
    /* Reel & halaman Shop (daftar tag): kanan atas kolom 580px di tengah layar,
       sejajar dengan konten (sama seperti Ghost). Grid tetap di kanan layar. */
        /* Reel & halaman Shop: lingkaran 18px dari kanan kolom tengah 580px (seperti Ghost) */
    .post-template .tf-cart,
    .page-shop .tf-cart {
        right: calc(50vw - 290px + 18px - 9px);
    }
}

/* Halaman standar: di header, di sebelah kiri tombol ☰ */
.tf-standard .tf-cart {
    top: 7px;
    right: 58px;
    box-shadow: none;
}

/* Admin bar WordPress (hanya terlihat saat login) */
.admin-bar .tf-cart {
    margin-top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .tf-cart { margin-top: 46px; }
}


/* ---------- 5. Admin bar WordPress (hanya terlihat saat login) ----------
   Header & panel menu digeser ke bawah agar tidak tertutup bar hitam admin.
   Di reel, panel menu menempel ke bawah layar, jadi tidak perlu digeser. */
.admin-bar .site-bar {
    top: 32px;
}
.admin-bar.tf-standard .people-mobile-menu {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .site-bar,
    .admin-bar.tf-standard .people-mobile-menu {
        top: 46px;
    }
}


/* ---------- 6. Halaman 404 → lihat bagian 16 ---------- */


/* ---------- 7. Tampilan post (dari Ghost teesful-worldwide) ----------
   Tombol Home & Share di reel dihapus; Share pindah ke menu.
   Baris bawah: [menu/search]  · · ·  [suara] */

/* Tombol menu: kiri bawah (posisi tombol Home dulu), ikon search */
.feed-item__menu {
    left: 14px;
}
.feed-item__menu svg {
    width: 20px;               /* ikon search: viewBox 20 → tampil 1:1 */
    height: 20px;
}

/* Item "Share" di paling bawah menu */
.menu-share {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.menu-share svg {
    flex: none;
    width: 22px;
    height: 22px;
}

/* Kartu menu di reel: jarak bawah seimbang dengan jarak atas */
.post-template .people-mobile-menu__nav {
    padding-bottom: 30px;
}
/* Produk TANPA tombol beli: kartu menu tepat di atas baris bawah
   (tanda current-no-buy dipasang nav.js saat tombol menu diketuk) */
html.current-no-buy .post-template .people-mobile-menu {
    bottom: calc(var(--feed-mute-bottom, 24px) + 32px + var(--menu-gap));
    max-height: calc(100dvh - var(--feed-mute-bottom, 24px) - 32px - var(--menu-gap) - 24px);
}

/* Modal share muncul di bawah (di posisi kartu menu), bukan di tengah layar */
.share-modal-overlay {
    --share-bottom: calc(24px + 48px + 12px + env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
    padding: 20px 20px var(--share-bottom);
}
.post-template .share-modal-overlay {
    --share-bottom: calc(var(--buy-bottom, 70px) + var(--buy-h, 49px) + 12px);
}
html.current-no-buy .post-template .share-modal-overlay {
    --share-bottom: calc(var(--feed-mute-bottom, 24px) + 32px + 12px);
}

/* Kartu Share (dengan gambar pratinjau) tidak boleh keluar dari atas layar di jendela pendek: tinggi kartu dibatasi
   oleh jarak bawahnya (--share-bottom) dan jarak atas 24px, dan gambarnya mengecil lebih dulu (251,5px = bagian
   kartu selain gambar: judul, nama, alamat, tombol), sehingga teks dan tombol tetap utuh. */
.share-modal-overlay .share-modal {
    max-height: calc(100dvh - var(--share-bottom) - 24px);
}
.share-modal-overlay .share-modal-image {
    width: calc(100% + 40px);   /* tetap selebar kartu (margin kiri-kanan -20px); hanya tingginya yang memendek */
    max-height: calc(100dvh - var(--share-bottom) - 24px - 251.5px);
}
/* ---------- Lapisan gelap (overlay) menu, Share, Help: memudar dan serah-terima TANPA kedipan ----------
   Sebelumnya lapisan gelap menu memakai display: none ↔ block, sehingga muncul dan hilang SEKETIKA (transisinya
   mati). Saat menu ditutup untuk membuka Share / Help / Search, layar sempat terang penuh ±0,1 detik sebelum
   lapisan gelap popup baru memudar masuk (kedipan).
   1) Lapisan gelap menu kini memudar masuk dan keluar (0,25 dtk, sama dengan Help). Saat menutup ia MENAHAN
      dulu 0,1 dtk: popup baru terbuka dalam 10-35 ms, jadi layar tidak sempat terang.
   2) SERAH-TERIMA ke Share / Help: selama menu sedang menutup (class is-closing), begitu popup terbuka lapisan
      gelapnya langsung penuh (tanpa memudar) dan lapisan gelap menu dilepas di frame yang sama. Dua lapisan
      tidak pernah bertumpuk atau bergantian, jadi gelapnya tetap 50% walau halaman sempat macet sesaat.
   3) Search (lapisan gelapnya lebih tipis, ±15%) cukup memudar bersama: kegelapan turun mulus 50% → 15%.
   4) Cart (panel keranjang, lapisan gelapnya 60%): serah-terima mulai dari 50% lalu naik pelan ke 60%.
   Kurva memudar Share disamakan dengan menu dan Help (0,25 dtk ease). */
.people-mobile-overlay {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease 0.1s, visibility 0s linear 0.35s;
}
.people-mobile-overlay.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s;
}
.share-modal-overlay {
    transition: opacity 0.25s ease;
}
html:has(.people-mobile-menu.is-closing) :is(.share-modal-overlay, .link-modal-overlay).is-open {
    transition: none;
}
html:has(.people-mobile-menu.is-closing):has(:is(.share-modal-overlay, .link-modal-overlay, .tf-sheet).is-open) .people-mobile-overlay {
    transition: none;
    opacity: 0;
    visibility: hidden;
}
/* Cart (panel keranjang): lapisan gelapnya 60%, menu 50%. Serah-terimanya mulai dari 50% (0,5 / 0,6 = 0,8333)
   lalu naik pelan ke 60%, jadi gelapnya tidak melonjak maupun berkedip. */
html:has(.people-mobile-menu.is-closing) .tf-sheet.is-open .tf-sheet__overlay {
    transition: none;
    animation: tf-dim-handoff 0.25s ease both;
}
@keyframes tf-dim-handoff {
    from { opacity: 0.8333; }
    to   { opacity: 1; }
}
html:has(.people-mobile-menu.is-closing) .tf-search.is-open .tf-search__overlay {
    transition-delay: 0.1s;   /* Search: mulai memudar bersamaan dengan lapisan gelap menu (tidak bertumpuk) */
}
@media (prefers-reduced-motion: reduce) {
    .people-mobile-overlay,
    .people-mobile-overlay.is-visible,
    .share-modal-overlay { transition: none; }
}

/* ---------- 8. Menu dengan ikon (dari Ghost teesful-worldwide) ----------
   Item khusus dibuat oleh inc/class-teesful-menu-walker.php berdasarkan URL. */
.people-mobile-nav-link {
    padding: 12px 30px;
}

/* Home, Shop, Help, Cart: ikon/angka di kiri tulisan */
.people-mobile-nav-link.has-icon,
.menu-cart {
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu-icon {
    flex: none;
    width: 22px;
    height: 22px;
}
.menu-icon--home {
    padding: 1.25px;           /* Home sedikit lebih kecil di dalam kotaknya */
}

/* Kotak "Search..." */
.menu-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 34px);
    height: 50px;
    margin: 3px 17px 15px;
    padding: 2px 16px 0;
    border: 0;
    border-radius: 10px;
    background: #f1f1f1;
    color: #666;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.menu-search svg {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: -2px;
}

/* Angka keranjang di item Cart: merah saat berisi, abu-abu "0" saat kosong */
.menu-cart-count {
    flex: none;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ff4949;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}
.menu-cart-count.is-empty {
    background: #ececec;
    color: #000;
}



/* ---------- 9. Pop-up pencarian (assets/js/search.js) ---------- */
.tf-search {
    position: fixed;
    inset: 0;
    z-index: 4000001;
}
.tf-search[hidden] {
    display: none;
}
.tf-search__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 10, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease;
}
/* Kartu melayang di bagian atas (tidak tertutup keyboard HP), serasi dengan kartu menu */
.tf-search__panel {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    width: min(calc(100% - 28px), 560px);
    max-height: calc(85dvh - 16px);
    margin: 0 auto;
    overflow-y: auto;
    padding: 12px;             /* sama di keempat sisi → kotak pencarian rata atas-bawah */
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    background: #fff;
    color: var(--ink);
    font-family: "Inter", var(--utility);
    transform: translateY(-16px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.tf-search.is-open .tf-search__overlay { opacity: 1; }
.tf-search.is-open .tf-search__panel { transform: none; opacity: 1; }

/* Kotak ketik: tampilan sama dengan kotak "Search..." di menu */
.tf-search__form {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 6px 0 16px;
    border-radius: 10px;
    background: #f1f1f1;
    color: #666;
}
.tf-search__icon {
    flex: none;
    width: 22px;
    height: 22px;
}
.tf-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 16px;           /* 16px: iPhone tidak memperbesar halaman saat mengetik */
    outline: none;
}
.tf-search__input::-webkit-search-cancel-button { display: none; }
.tf-search__close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ink);
    cursor: pointer;
}
/* Penanda aktif: garis tipis (cukup kontras sebagai penanda fokus, tidak berat) */
.tf-search__form:focus-within {
    box-shadow: 0 0 0 1px rgba(16, 16, 20, 0.45);
}
.tf-search__close:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

.tf-search__status {
    margin: 12px 4px 0;
    color: rgba(16, 16, 20, 0.6);
    font-size: 14px;
}
.tf-search__status:empty { display: none; }

.tf-search__results {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.tf-search__results:empty {
    display: none;             /* belum ada hasil → tidak menambah ruang di bawah kotak */
}
/* Saat login: kartu tidak tertutup admin bar WordPress */
.admin-bar .tf-search__panel {
    top: calc(32px + 16px + env(safe-area-inset-top, 0px));
}
@media (max-width: 782px) {
    .admin-bar .tf-search__panel {
        top: calc(46px + 16px + env(safe-area-inset-top, 0px));
    }
}
.tf-search__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
}
.tf-search__item:hover { background: rgba(16, 16, 20, 0.04); }
.tf-search__item:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
}
.tf-search__item img,
.tf-search__noimg {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(16, 16, 20, 0.05);
}
.tf-search__name {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tf-search__price {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tf-search__all {
    display: block;
    margin-top: 8px;
    padding: 12px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.tf-search__all[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tf-search__overlay,
    .tf-search__panel { transition: none; }
}


/* ---------- 10. Tombol menu bulat (dari Ghost teesful-worldwide) ----------
   Homepage, kategori/tag, hasil pencarian, dan halaman Shop (daftar tag):
   tombol bulat di bawah tengah, menu tampil sebagai kartu melayang
   tepat di atas tombol (seperti di reel). */
.home-menu-button {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 40;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.home-menu-button svg {
    width: 20px;
    height: 20px;
}
.home-menu-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.home-template,
.tag-template,
.page-shop,
.page-article {
    --menu-gap: 12px;
    --menu-lift: 16px;
}
.home-template .people-mobile-menu,
.tag-template .people-mobile-menu,
.page-shop .people-mobile-menu,
.page-article .people-mobile-menu {
    top: auto;
    bottom: calc(24px + 48px + var(--menu-gap) + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(calc(100% - 28px), 320px);
    max-width: none;
    max-height: calc(100dvh - 24px - 48px - var(--menu-gap) - 24px);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    clip-path: none;
    transform: translateY(var(--menu-lift));
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.25s ease;
}
.home-template .people-mobile-menu.is-open,
.home-template .people-mobile-menu.is-open.header-collapsed,
.tag-template .people-mobile-menu.is-open,
.tag-template .people-mobile-menu.is-open.header-collapsed,
.page-shop .people-mobile-menu.is-open,
.page-shop .people-mobile-menu.is-open.header-collapsed,
.page-article .people-mobile-menu.is-open,
.page-article .people-mobile-menu.is-open.header-collapsed {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.home-template .people-mobile-menu.is-open.is-closing,
.home-template .people-mobile-menu.is-open.header-collapsed.is-closing,
.tag-template .people-mobile-menu.is-open.is-closing,
.tag-template .people-mobile-menu.is-open.header-collapsed.is-closing,
.page-shop .people-mobile-menu.is-open.is-closing,
.page-shop .people-mobile-menu.is-open.header-collapsed.is-closing,
.page-article .people-mobile-menu.is-open.is-closing,
.page-article .people-mobile-menu.is-open.header-collapsed.is-closing {
    clip-path: none;
    transform: translateY(var(--menu-lift));
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.25s ease;
}
.home-template .people-mobile-menu__nav,
.tag-template .people-mobile-menu__nav,
.page-shop .people-mobile-menu__nav,
.page-article .people-mobile-menu__nav {
    padding-top: 16px;
    padding-bottom: 30px;
}


/* ---------- 11. Halaman Shop / daftar tag (dari page-shop.hbs Ghost) ---------- */
.tags-page__title {
    margin: 25px 0 20px;
    font-size: 22px;
    font-weight: 500;
}
/* Tag terakhir tidak tertutup tombol menu bulat (24 + 48 + 24) */
.page-shop .tags-page {
    padding-bottom: 96px;
}
/* Subkategori: menjorok di bawah induknya, sedikit lebih lembut */
.tags-page__item--child .tags-page__name {
    padding-left: calc(var(--depth, 1) * 20px);
    color: rgba(16, 16, 20, 0.7);
}
.tags-page__item--child .tags-page__count {
    color: rgba(16, 16, 20, 0.7);
}
.tags-page__sub ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Baris kategori: nama (link) + panah dropdown. Garis bawah pindah ke baris. */
.tags-page__row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(16, 16, 20, 0.1);
}
.tags-page__row .tags-page__link {
    flex: 1;
    min-width: 0;
    border-bottom: 0;
}
.tags-page__toggle {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;                  /* area ketuk nyaman di HP */
    height: 44px;
    margin-right: -12px;          /* panah tetap rata dengan tepi kanan daftar */
    padding: 0;
    border: 0;
    background: none;
    color: rgba(16, 16, 20, 0.55);
    cursor: pointer;
}
.tags-page__toggle svg {
    transition: transform 0.25s ease;
}
.tags-page__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.tags-page__toggle:hover {
    color: var(--ink);
}
.tags-page__toggle:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -4px;
    border-radius: 8px;
}
/* Dropdown tertutup HANYA jika JavaScript aktif (tanpa JS subkategori tetap terlihat) */
.tags-page--js .tags-page__sub {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;           /* tidak bisa difokus saat tertutup */
    transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s;
}
.tags-page--js .tags-page__item.is-open > .tags-page__sub {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.25s ease, visibility 0s;
}
.tags-page--js .tags-page__sub > ul {
    min-height: 0;
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .tags-page--js .tags-page__sub,
    .tags-page__toggle svg {
        transition: none;
    }
}


/* ---------- 12. Ikon Shop cadangan (cara Ghost: dikenali dari alamat link) ----------
   Dipakai jika item Shop belum dikenali Walker (mis. halaman belum memakai
   Template "Daftar Kategori"). Alamat halaman Shop di situs ini: /explore/
   :not(.has-icon) → tidak dobel jika Walker sudah memberi ikon. */
.people-mobile-nav-link[href$="/explore/"]:not(.has-icon) {
    display: flex;
    align-items: center;
    gap: 10px;
}
.people-mobile-nav-link[href$="/explore/"]:not(.has-icon)::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    background: currentColor;     /* warna ikon mengikuti warna teks */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v13H4z'/%3E%3Cpath d='M8.5 11V6.5a3.5 3.5 0 0 1 7 0V11'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v13H4z'/%3E%3Cpath d='M8.5 11V6.5a3.5 3.5 0 0 1 7 0V11'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---------- 13. Halaman di dalam panel pop-up (body.tf-embed) ----------
   Checkout & Size guide ditampilkan di panel lewat iframe (?tf_embed=1).
   Hanya isinya yang tampil; judul sudah ada di bar panel.
   (Dipindah dari woo.css supaya berlaku juga untuk halaman biasa.) */
.tf-embed .site-bar,
.tf-embed .tf-cart,
.tf-embed .skip-link,
.tf-embed .people-mobile-menu,
.tf-embed .people-mobile-overlay,
.tf-embed .tf-entry__title {
    display: none !important;
}
.tf-embed .frame {
    max-width: none;
}
.tf-embed .site-main {
    padding: 16px 18px 32px;
}


/* ---------- 14. Halaman tag/kategori: tampilan SAMA dengan homepage (dari Ghost teesful-worldwide) ----------
   Grid dimulai dari atas (tanpa judul), di desktop selebar layar seperti homepage.
   Nama tag tampil sebagai label di atas tombol menu bulat, muncul perlahan lalu memudar. */
.tag-archive {
    padding: 0;
}
@media (min-width: 661px) {
    .tag-template .frame {
        max-width: none;
    }
    .tag-template .shop-page {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}
.tag-archive__label {
    position: fixed;
    left: 50%;
    /* di atas tombol menu: 24px (jarak) + 48px (tombol) + 12px (celah) + 20px */
    bottom: calc(24px + 48px + 12px + 20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 40;
    margin: 0;
    max-width: calc(100vw - 32px);
    padding: 10px 20px;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-family: "Inter", var(--utility);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;      /* hanya label: sentuhan diteruskan ke grid di bawahnya */

    /* Muncul 1,2 dtk → tampil utuh → mulai memudar di detik ke-4 selama 1 dtk */
    animation:
        tag-label-in  1.2s ease-in-out both,
        tag-label-out 1s   ease        4s forwards;
}
@keyframes tag-label-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes tag-label-out {
    from { opacity: 1; }
    to   { opacity: 0; visibility: hidden; }
}


/* ---------- 15. Halaman artikel: Help, Size Guide, dll. (dari custom-article.hbs Ghost) ----------
   Halaman biasa tampil tanpa header; menu lewat tombol bulat di bawah tengah.
   Isi berasal dari index.php (.tf-entry__title & .tf-entry__content). */
@media (min-width: 661px) {
    .page-article .frame {
        max-width: none;       /* lepas batas kolom 580px */
    }
    /* Badge keranjang (lingkaran 22px di tengah area sentuh 40px → selisih 9px)
       sejajar tepi kanan isi artikel (kolom 720px, jarak dalam 20px) */
    .page-article .tf-cart {
        right: max(18px, calc(50vw - 360px + 20px - 9px));
    }
}
.page-article .site-main {
    max-width: 720px;
    margin: 0 auto;
    /* atas 25px; bawah: isi terakhir tidak tertutup tombol bulat (24 + 48 + 48) */
    padding: 25px 20px 120px;
    color: var(--ink);
    font-family: "Inter", var(--utility);
}
/* Sama dengan judul halaman Shop */
.page-article .tf-entry__title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
}

.page-article .tf-entry__content {
    font-size: 18px;
    line-height: 1.7;
    overflow-wrap: break-word;
}
.page-article .tf-entry__content > * {
    margin-top: 0;
    margin-bottom: 0;
}
.page-article .tf-entry__content > * + * {
    margin-top: 1.4em;
}
.page-article .tf-entry__content > :is(h2, h3, h4) {
    margin-top: 1.8em;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.page-article .tf-entry__content > h2 { font-size: 28px; font-weight: 700; }
.page-article .tf-entry__content > h3 { font-size: 22px; font-weight: 700; }
.page-article .tf-entry__content > h4 { font-size: 19px; font-weight: 600; }
.page-article .tf-entry__content > :is(h2, h3, h4) + * {
    margin-top: 0.6em;
}
.page-article .tf-entry__content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-article .tf-entry__content :is(ul, ol) {
    padding-left: 1.3em;
}
.page-article .tf-entry__content li + li {
    margin-top: 0.4em;
}
.page-article .tf-entry__content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: 18px;
    border-left: 3px solid currentColor;
    font-style: italic;
}
.page-article .tf-entry__content hr {
    margin-top: 2.4em;
    margin-bottom: 2.4em;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.page-article .tf-entry__content :is(img, video) {
    max-width: 100%;
    height: auto;
}
.page-article .tf-entry__content figure {
    margin-left: 0;
    margin-right: 0;
}
.page-article .tf-entry__content figcaption {
    margin-top: 10px;
    color: rgba(0, 0, 0, 0.55);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
/* Tabel (mis. tabel ukuran di Size Guide): bisa digeser ke samping di HP */
.page-article .tf-entry__content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 16px;
}
.page-article .tf-entry__content :is(th, td) {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    text-align: left;
}


/* ---------- 16. Halaman 404: label "SIZE 404" yang berayun ----------
   Memakai class bawaan WordPress "error404" (otomatis ada di <body> halaman 404).
   Ilustrasi di kiri, teks di kanan (HP: bertumpuk & rata tengah), di tengah layar,
   tanpa header. Ilustrasi SVG ada di 404.php. */
.error404 .site-bar {
    display: none !important;          /* tanpa header */
}
.error404 .frame {
    max-width: none;
}
/* Badge keranjang: posisi sama dengan homepage (lingkaran 14px dari atas, 18px dari kanan) */
.error404 .tf-cart {
    top: 5px;
    right: 9px;
}
.error404 .site-main {
    display: flex;
    align-items: center;               /* tengah vertikal */
    justify-content: center;           /* tengah horizontal */
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 40px 24px;
}
/* Saat login: admin bar menambah jarak 32px (HP/tablet: 46px) di atas halaman,
   jadi tinggi minimum dikurangi sebesar itu agar halaman tidak bisa di-scroll. */
.admin-bar.error404 .site-main {
    min-height: calc(100dvh - 32px);
}
@media (max-width: 782px) {
    .admin-bar.error404 .site-main { min-height: calc(100dvh - 46px); }
}
.tf-404 {
    display: grid;
    justify-items: center;
    gap: 24px;
    width: 100%;
    max-width: 960px;
    text-align: center;
}
@media (min-width: 661px) {
    .tf-404 {
        grid-template-columns: 320px minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        gap: 72px;
        width: auto;
        text-align: left;
    }
}

/* Ilustrasi */
.tf-404__art svg {
    display: block;
    width: 220px;
    height: auto;
    overflow: visible;
}
@media (min-width: 661px) {
    .tf-404__art svg { width: 320px; }
}
.tf-404__art text {
    font-family: "Inter", var(--utility);
}
/* Label berayun dari ujung tali */
.tf-404__tag {
    transform-box: view-box;
    transform-origin: 110px 46px;      /* titik gantung = ujung tali */
    animation: tf-404-swing 3.2s ease-in-out infinite;
}
/* Garis gerak berkedip pelan, seirama dengan ayunan */
.tf-404__lines {
    animation: tf-404-pulse 1.6s ease-in-out infinite;
}
@keyframes tf-404-swing {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(6deg); }
}
@keyframes tf-404-pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .tf-404__tag,
    .tf-404__lines { animation: none; }
}

/* Teks */
.tf-404__title {
    margin: 0;
    font-family: "Inter", var(--utility);
}
/* Judul utama. Angka 404 cukup tampil di label ilustrasi. */
.tf-404__headline {
    display: block;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-wrap: balance;          /* baris judul dibagi seimbang */
}
.tf-404__text {
    max-width: 420px;
    margin: 10px 0 0;
    color: rgba(16, 16, 20, 0.7);
    font-family: "Inter", var(--utility);
    font-size: 16px;
    line-height: 1.6;
    text-wrap: pretty;           /* cegah satu kata sendirian di baris terakhir */
}
@media (min-width: 661px) {
    .tf-404__headline { font-size: 34px; }
    .tf-404__text     { font-size: 17px; }
}

/* Link ala referensi: "Lihat semua produk ›" */
.tf-404__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;         /* tombol pil & link sejajar di tengah */
    justify-content: center;
    gap: 12px 28px;
    margin-top: 28px;
}
@media (min-width: 661px) {
    .tf-404__links { justify-content: flex-start; }
}
.tf-404__link {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-family: "Inter", var(--utility);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.tf-404__link:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}
/* "Lihat semua produk": tombol pil hitam, sama seperti Add to cart */
.tf-404__link--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font-size: 15px;
}
.tf-404__link--primary:hover {
    background: #333;
}


/* ---------- 17. Reel: produk yang slide pertamanya video ----------
   Biasanya cover (Product image) tampil sampai video berputar (reel-card.php).
   Latar gelap ini hanya untuk produk video tanpa cover. */
.feed-item__media--video-first {
    position: absolute;
    inset: 0;
    background: #111;
}


/* ---------- 18. Pop-up pencarian gaya Ghost ----------
   Menimpa tampilan bagian 9: latar diburamkan 2px + gradasi gelap tipis (sama dengan Ghost), kotak
   pencarian berupa satu bar putih. Ukuran & posisi diukur langsung dari Ghost
   (Sodo Search, 1rem = 10px): komentar di kanan menyebut class Tailwind aslinya.
   Tutup pop-up: "Cancel" (HP saja, seperti Ghost), mengetuk di luar bar, atau Esc.
   Teks dihapus lewat keyboard (✕ disembunyikan, sama seperti Ghost). */
.tf-search__overlay {
    /* bg-gradient-to-br from-[rgba(0,0,0,0.2)] to-[rgba(0,0,0,0.1)] */
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    -webkit-backdrop-filter: blur(2px);   /* backdrop-blur-[2px] */
    backdrop-filter: blur(2px);
}
.tf-search__panel {
    width: 95vw;                  /* max-w-[95vw] */
    padding: 0;
    border-radius: 8px;           /* rounded-lg */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.1);   /* shadow-xl */
}
@media (min-width: 640px) {
    .tf-search__panel {
        width: min(95vw, 512px);  /* sm:max-w-lg */
    }
}
/* 80px dari atas di semua ukuran layar (pt-20) */
.tf-search__panel {
    top: calc(80px + env(safe-area-inset-top, 0px));
}
.admin-bar .tf-search__panel {
    top: calc(32px + 80px + env(safe-area-inset-top, 0px));
}
@media (max-width: 782px) {
    .admin-bar .tf-search__panel {
        top: calc(46px + 80px + env(safe-area-inset-top, 0px));
    }
}
.tf-search__form {
    gap: 12px;                    /* me-3: jarak ikon ke teks */
    height: auto;                 /* tinggi dari isi: 20 + 24,75 + 20 = 64,75px */
    padding: 0 16px;              /* px-4 */
    border-radius: 0;
    background: none;
    color: var(--ink);
}
@media (min-width: 640px) {
    .tf-search__form {
        padding: 0 28px;          /* sm:px-7 */
    }
}
.tf-search__form:focus-within {
    box-shadow: none;
}
.tf-search__icon {
    /* Gambar kaca pembesar di ikon ini hanya mengisi ±73% kotaknya, jadi kotak 22px
       dengan margin -3px → gambar tampil 16px & tetap memakai tempat 16px (w-4 h-4). */
    width: 22px;
    height: 22px;
    margin: -3px;
    color: #171717;               /* text-neutral-900 */
}
.tf-search__input {
    height: auto;
    padding: 20px 0;              /* py-5: seluruh tinggi bar bisa diketuk */
    color: #000;
    font-size: 16.5px;            /* text-[1.65rem] */
    line-height: 1.5;
}
.tf-search__input::placeholder {
    color: #9ca3af;               /* placeholder:text-gray-400 */
    font-size: inherit;
}
.tf-search__close {
    display: none;                /* versi Ghost: tanpa ✕, cukup Cancel */
}
.tf-search__cancel {
    position: relative;
    flex: none;
    margin-left: 0;               /* ms-3 (12px) sudah dari gap bar */
    padding: 0;
    border: 0;
    background: none;
    color: #737373;               /* text-neutral-500 */
    font: inherit;
    font-size: 14px;              /* text-sm */
    line-height: 1.5;
    cursor: pointer;
}
.tf-search__cancel::after {
    content: "";
    position: absolute;
    inset: -20px -16px -20px -8px;   /* area ketuk diperbesar tanpa mengubah tampilan */
}
.tf-search__cancel:hover {
    color: var(--ink);
}
.tf-search__cancel:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
@media (min-width: 640px) {
    .tf-search__cancel {
        display: none;            /* sm:hidden — di desktop tutup dengan Esc / klik di luar */
    }
}

/* Hasil: dikelompokkan seperti Ghost (Kategori, Tags, Produk) di bawah bar.
   Hanya daftar hasil yang bisa digulir → kotak ketik tetap terlihat. */
.tf-search__status {
    margin: 0;
    padding: 16px;
    border-top: 1px solid #f0f0f0;
    color: #737373;
    font-size: 15px;
}
.tf-search__results {
    margin: 0;
    padding: 8px 0 4px;
    border-top: 1px solid #f0f0f0;
    max-height: min(60dvh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.tf-search__status:not(:empty) + .tf-search__results {
    border-top: 0;
}
.tf-search__heading {
    margin: 10px 16px 4px;
    color: #a3a3a3;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tf-search__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 0;
    color: #171717;
    font-size: 15px;
}
.tf-search__item:hover,
.tf-search__item.is-active {
    background: #f5f5f5;         /* sorotan seperti Ghost (mouse / tombol ↑ ↓) */
}
.tf-search__name {
    min-width: 0;
    font-weight: 400;
}
.tf-search__name b {
    font-weight: 700;            /* kata yang dicari */
}
.tf-search__item--term .tf-search__name {
    flex: 1;
}
.tf-search__sym {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #f5f5f5;
    color: #737373;
}
.tf-search__sym--hash {
    width: auto;                 /* selebar tanda # saja (seperti Ghost) */
    height: auto;
    margin-right: -4px;          /* jarak # ke teks ±8px, bukan 12px */
    background: none;
    color: #a3a3a3;
    font-size: 14px;
    font-weight: 500;
}
.tf-search__item--product img,
.tf-search__item--product .tf-search__noimg {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
}
.tf-search__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
.tf-search__meta {
    overflow: hidden;
    color: #a3a3a3;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tf-search__price {
    margin-left: auto;
    font-size: 14px;
}
.tf-search__all {
    margin: 10px 16px 16px;
    padding: 12px;
    border-radius: 6px;
    background: #f5f5f5;         /* "Show more results" gaya Ghost */
    color: #171717;
    font-size: 14px;
}
.tf-search__all:hover {
    background: #e5e5e5;
}
/* Desktop: rata dengan teks di bar (sm:px-7 = 28px) */
@media (min-width: 640px) {
    .tf-search__status { padding: 16px 28px; }
    .tf-search__heading { margin-left: 28px; margin-right: 28px; }
    .tf-search__item { padding-left: 28px; padding-right: 28px; }
    .tf-search__all { margin-left: 28px; margin-right: 28px; }
}


/* ---------- 19. Halaman di belakang pop-up tidak ikut ter-scroll ----------
   Selama menu, pencarian, panel keranjang/produk, share, atau link terbuka,
   scroll halaman dikunci. :has() mendeteksi pop-up yang terbuka tanpa JavaScript
   tambahan. Scrollbar sudah disembunyikan (screen.css), jadi tidak ada geseran. */
html:has(.people-mobile-menu.is-open),
html:has(.tf-search.is-open),
html:has(.tf-sheet.is-open),
html:has(.share-modal-overlay.is-open),
html.link-modal-open {
    overflow: hidden;
}
/* Scroll di dalam pop-up tidak "tembus" ke halaman saat mentok di ujung */
.people-mobile-menu,
.tf-search__panel,
.tf-sheet__panel,
.tf-view__body {
    overscroll-behavior: contain;
}

/* ---------- Halaman artikel (Help, Size Guide, dll.) di dalam pop-up link-modal ----------
   Pop-up hanya mengambil <article class="tf-entry">, tanpa class "page-article" di <body>,
   jadi gaya artikel di atas tidak ikut terpakai. Ini gaya yang sama, khusus di pop-up. */
.link-modal__body .tf-entry {
    max-width: 720px;
    margin: 0 auto;
    padding: 4px 20px 40px;
    color: var(--ink);
    font-family: "Inter", var(--utility);
}
.link-modal__body .tf-entry__title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
}
.link-modal__body .tf-entry__content {
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: break-word;
}
.link-modal__body .tf-entry__content > * { margin-top: 0; margin-bottom: 0; }
.link-modal__body .tf-entry__content > * + * { margin-top: 1.2em; }
.link-modal__body .tf-entry__content > :is(h2, h3, h4) {
    margin-top: 1.6em;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.link-modal__body .tf-entry__content > h2 { font-size: 22px; font-weight: 700; }
.link-modal__body .tf-entry__content > h3 { font-size: 19px; font-weight: 700; }
.link-modal__body .tf-entry__content > h4 { font-size: 17px; font-weight: 600; }
.link-modal__body .tf-entry__content > :is(h2, h3, h4) + * { margin-top: 0.5em; }
.link-modal__body .tf-entry__content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.link-modal__body .tf-entry__content :is(ul, ol) { padding-left: 1.3em; }
.link-modal__body .tf-entry__content li + li { margin-top: 0.4em; }
.link-modal__body .tf-entry__content :is(img, video) { max-width: 100%; height: auto; }
.link-modal__body .tf-entry__content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
}

/* ---------- Pop-up halaman bergaya pop-up Cart (link-modal.js: .link-modal--article) ----------
   Atas: judul + tombol tutup (tetap di tempat). Tengah: isi di-scroll.
   Bawah: tombol WhatsApp putih dengan tulisan & ikon hijau. */
.link-modal.link-modal--article {
    height: 88dvh;                   /* setinggi pop-up Cart, tombol WA selalu di bawah */
}
.link-modal__head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 20px 14px;
    min-height: 56px;                /* tinggi kepala tetap (2 + 40 + 14), walau tombol tutup kini 30px */
    background: #ffffff;
}
.link-modal__title {
    margin: 0;
    font-family: "Inter", var(--utility);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.link-modal__close {
    /* Sama dengan tombol tutup pop-up Share (.share-modal-close): 30×30px, tanpa latar, warna hitam 50% */
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    margin-right: -6px;              /* ikon ✕ (18px) sejajar dengan tepi kanan isi */
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.link-modal__close:hover {
    background: rgba(0, 0, 0, 0.06);
}
.link-modal--article .link-modal__body .tf-entry {
    padding-top: 0;
}
.link-modal--article .link-modal__body .tf-entry__content > :first-child {
    margin-top: 0;                   /* subjudul pertama tidak menjauh dari judul pop-up */
}
/* Judul disembunyikan (admin): tombol tutup tetap di kanan */
.link-modal__head--no-title {
    justify-content: flex-end;
}
/* Baris menu halaman (About · Terms · Privacy · Help · Contact): dipindah link-modal.js ke KEPALA
   pop-up, SEJAJAR dengan tombol tutup, dan menetap di atas walau isi di-scroll (kepala di luar area
   scroll). Selalu SATU baris horizontal: muat → di tengah; tidak muat → digeser ke samping (tanpa
   scrollbar). !important pada sifat utamanya supaya tidak kalah oleh gaya blok (Buttons / daftar /
   gaya inline) maupun aturan daftar (li + li, ul padding). */
.link-modal__head .tf-modal-nav {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;   /* pemusatan lewat auto-margin di bawah, supaya ujung kiri tetap bisa digeser */
    align-items: center;
    gap: 6px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.link-modal__head .tf-modal-nav::-webkit-scrollbar {
    display: none;
}
.link-modal__head .tf-modal-nav > * {
    flex: none !important;
    margin: 0 !important;
}
.link-modal__head .tf-modal-nav > :first-child {
    margin-left: auto !important;    /* muat → di tengah; meluap → mulai dari kiri */
}
.link-modal__head .tf-modal-nav > :last-child {
    margin-right: auto !important;
}
.link-modal__head .tf-modal-nav a {
    white-space: nowrap;
}
@media (max-width: 480px) {
    /* HP: pil dirapatkan supaya kelimanya + tombol tutup muat satu baris */
    .link-modal__head .tf-modal-nav {
        gap: 4px !important;
    }
    .link-modal__head .tf-modal-nav a {
        font-size: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}
@media (max-width: 380px) {
    .link-modal__head .tf-modal-nav {
        gap: 3px !important;
    }
    .link-modal__head .tf-modal-nav a {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
}
.link-modal__foot {
    flex-shrink: 0;
    display: flex;
    justify-content: center;         /* tombol di tengah, selebar isinya */
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;

}
.link-modal__wa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;                 /* lebar pill mengikuti ikon + teks */
    min-height: 44px;
    border: 0;                       /* tanpa garis tepi */
    border-radius: 999px;
    background: #25D366;             /* hijau WhatsApp asli */
    color: #ffffff;                  /* teks & ikon putih */
    font-family: "Inter", var(--utility);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.link-modal__wa:active {
    background: #1fbe5b;             /* sedikit lebih gelap saat ditekan */
}
/* Ikon WhatsApp (dari assets/icons/whatsapp.svg): ukuran diatur di sini,
   warnanya ikut warna teks tombol (pakai fill="currentColor" di file SVG) */
.link-modal__wa svg {
    flex: none;
    width: 20px;
    height: 20px;
}

/* ---------- Blok "Details" (toggle/FAQ) di halaman artikel & pop-up Help ----------
   Di editor: tambah blok "Details" → judul = pertanyaan, isi = jawaban.
   Tampil sebagai kartu bergaris dengan panah di kanan (buka/tutup tanpa JavaScript). */
:is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details {
    margin-top: 12px;
    padding: 0;
    border: 1px solid rgba(16, 16, 20, 0.12);
    border-radius: 6px;
    background: #ffffff;
}
:is(.page-article, .link-modal__body) .tf-entry__content > .wp-block-details + .wp-block-details {
    margin-top: 12px;
}
:is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details > summary {
    position: relative;
    display: block;
    padding: 16px 48px 16px 18px;
    font-family: "Inter", var(--utility);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
    list-style: none;                /* sembunyikan segitiga bawaan browser */
    -webkit-tap-highlight-color: transparent;
}
:is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details > summary::-webkit-details-marker {
    display: none;
}
/* Panah: ke bawah saat tertutup, ke atas saat terbuka */
:is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details > summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid rgba(16, 16, 20, 0.45);
    border-bottom: 1.5px solid rgba(16, 16, 20, 0.45);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}
:is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details[open] > summary::after {
    transform: translateY(-30%) rotate(-135deg);
}
:is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details > summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
    border-radius: 6px;
}
/* Jawaban */
:is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details > :not(summary) {
    margin: 0;
    padding: 0 18px;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(16, 16, 20, 0.8);
}
:is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details > :not(summary) + :not(summary) {
    margin-top: 10px;
}
:is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details > :last-child {
    padding-bottom: 18px;
}
@media (prefers-reduced-motion: reduce) {
    :is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details > summary::after {
        transition: none;
    }
}

/* Daftar (ul/ol) di dalam jawaban: angka/titik tetap di dalam kartu, sejajar dengan teks jawaban */
:is(.page-article, .link-modal__body) .tf-entry__content .wp-block-details > :is(ul, ol) {
    padding-left: calc(18px + 1.3em);
}


/* ---------- Isi halaman di pop-up: batas kiri-kanan SAMA di semua halaman, tidak melebar, lebih kecil di HP ----------
   Blok bawaan WordPress (alignwide / alignfull, grup, kolom, tabel, gambar) kadang membawa lebar atau
   margin sendiri sehingga batas teksnya berbeda antarhalaman dan isinya bisa tergeser ke samping.
   Di pop-up semuanya dipaksa mengikuti lebar isi (sama dengan judul di atasnya). */
.link-modal__body {
    overflow-x: hidden;                 /* tidak pernah bisa digeser ke samping */
}
.link-modal__body .tf-entry__content {
    overflow-wrap: anywhere;            /* kata/URL panjang dipatahkan, tidak melebarkan halaman */
}
/* Teks tidak boleh "tidak mau turun baris" (white-space: nowrap / lebar max-content dari gaya blok
   atau HTML kustom): semua turun ke baris berikutnya dan tidak lebih lebar dari isi. */
.link-modal__body .tf-entry__content * {
    max-width: 100%;
    min-width: 0;
}
.link-modal__body .tf-entry__content :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption, summary, span, a, div, label, strong, em) {
    white-space: normal !important;
    text-wrap: wrap !important;
}
.link-modal__body .tf-entry__content .is-layout-flex {
    flex-wrap: wrap !important;
}
.link-modal__body .tf-entry__content > *,
.link-modal__body .tf-entry__content :is(.alignwide, .alignfull, .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-cover, .wp-block-image, .wp-block-table, .wp-block-embed) {
    box-sizing: border-box;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.link-modal__body .tf-entry__content :is(.alignwide, .alignfull) {
    width: auto !important;
}
.link-modal__body .tf-entry__content .aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
}
.link-modal__body .tf-entry__content :is(img, video, iframe, svg, canvas) {
    max-width: 100% !important;
    height: auto;
}
.link-modal__body .tf-entry__content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
}
.link-modal__body .tf-entry__content figure.wp-block-table {
    overflow-x: auto;                   /* tabel lebar digeser di dalam kotaknya sendiri */
}

@media (max-width: 600px) {
    /* Kolom ditumpuk ke bawah, bukan berdampingan */
    .link-modal__body .tf-entry__content .wp-block-columns {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .link-modal__body .tf-entry__content .wp-block-column {
        flex-basis: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* HP: isi sedikit lebih kecil (batas kiri-kanan tetap 20px, sejajar dengan judul) */
@media (max-width: 480px) {
    .link-modal__title {
        font-size: 22px;
    }
    .link-modal__body .tf-entry__content {
        font-size: 15px;
        line-height: 1.65;
    }
    .link-modal__body .tf-entry__content > h2 { font-size: 20px; }
    .link-modal__body .tf-entry__content > h3 { font-size: 17px; }
    .link-modal__body .tf-entry__content > h4 { font-size: 16px; }
    .link-modal__body .tf-entry__content table {
        font-size: 13px;
    }
    /* Kartu tanya-jawab (Details) */
    .link-modal__body .tf-entry__content .wp-block-details > summary {
        padding: 14px 44px 14px 16px;
        font-size: 15px;
    }
    .link-modal__body .tf-entry__content .wp-block-details > summary::after {
        right: 16px;
    }
    .link-modal__body .tf-entry__content .wp-block-details > :not(summary) {
        padding-left: 16px;
        padding-right: 16px;
        font-size: 14px;
    }
    .link-modal__body .tf-entry__content .wp-block-details > :last-child {
        padding-bottom: 16px;
    }
}


/* =========================================================
   Pop-up HELP khusus: kartu putih seperti kartu menu (link-modal.js buildHelp, functions.php bagian 31).
   Atas: judul + tombol tutup (tetap) · Tengah: isi toggle (di-scroll) + footer di ujungnya ·
   Bawah: tombol WhatsApp hijau (tetap).
   ========================================================= */
.link-modal-overlay:has(+ .link-modal--help) {
    background: rgba(8, 8, 10, 0.5);           /* digelapkan 50%, seperti saat menu terbuka */
}
.link-modal.link-modal--help {
    /* Posisi: tepat DI ATAS tombol menu, sama dengan kartu menu (bawah = 24 + 48 + 12px). Di halaman produk
       (reel) di atas tombol Add to cart, dan produk tanpa tombol beli di atas baris bawah: pola yang sama
       dengan popup Share (bagian "Modal share" di atas). */
    --help-bottom: calc(24px + 48px + 12px + env(safe-area-inset-bottom, 0px));
    /* Tinggi = tinggi kartu menu dengan Shop terbuka (584px, diukur di situs). Di layar pendek ikut mengecil
       agar tidak keluar dari atas layar, sama seperti kartu menu (max-height). Ubah angka ini untuk mengatur tinggi. */
    --help-h: 584px;
    left: 0;
    right: 0;
    bottom: var(--help-bottom);
    width: min(calc(100% - 28px), var(--buy-max-w, 340px));   /* selebar kartu menu / tombol Add to cart */
    max-width: none;
    height: min(640px, calc(100dvh - var(--help-bottom) - 24px));
    max-height: none;    height: min(var(--help-h), calc(100dvh - var(--help-bottom) - 24px));
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(16px);
}
.link-modal.link-modal--help.is-open {
    transform: none;
}
.link-modal--help .link-modal__handle {
    display: none;
}
.post-template .link-modal.link-modal--help {
    --help-bottom: calc(var(--buy-bottom, 70px) + var(--buy-h, 49px) + 12px);
}
html.current-no-buy .post-template .link-modal.link-modal--help {
    --help-bottom: calc(var(--feed-mute-bottom, 24px) + 32px + 12px);
}

/* Atas: judul di kiri, tombol tutup di kanan (tetap di tempat saat isi di-scroll) */
.link-modal--help .link-modal__head {
    padding: 18px 28px 12px;            /* kiri-kanan 26px (sebelumnya 24px, awalnya 16px) */
    min-height: 70px;                   /* tinggi kepala tetap (18 + 40 + 12), walau tombol tutup kini 30px */
}
.link-modal--help .link-modal__title {
    font-size: 22px;
}
/* Tombol kembali (halaman About / Terms / Privacy → kembali ke Help): bulat seperti tombol tutup */
.link-modal__back {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(16, 16, 20, 0.06);
    color: var(--ink);
    cursor: pointer;
}
.link-modal__head--back .link-modal__title {
    flex: 1;
    min-width: 0;
}
.link-modal__head--back {
    justify-content: space-between;     /* ← di kiri, ✕ di kanan, juga saat judul disembunyikan */
}

/* Tengah: isi halaman (toggle: lihat gaya "People also ask" di bagian akhir file) */
.link-modal--help .link-modal__body .tf-entry {
    padding: 0 28px 8px;                /* sejajar dengan judul di kepala kartu */
}
.link-modal--help .link-modal__body .tf-entry__content {
    font-size: 15px;
    line-height: 1.65;
}

/* Isi pendek: footer tetap di dasar kartu (bukan menempel tepat di bawah teks); isi panjang: di ujung isi */
.link-modal--help .link-modal__body {
    display: flex;
    flex-direction: column;
}
.link-modal--help .link-modal__body > .tf-entry {
    flex: none;
    width: 100%;
}
.link-modal--help .link-modal__help-footer {
    flex: none;
    margin-top: auto;
}

/* Ujung isi: footer (tiga link berjejer + hak cipta), baru terlihat saat di-scroll sampai bawah */
.link-modal__help-footer {
    padding: 22px 16px 24px;            /* tanpa latar: menyatu dengan isi putih di atasnya */
    text-align: center;
}
.link-modal__help-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
}
.link-modal__help-nav a {
    color: var(--ink);
    font-family: "Inter", var(--utility);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.link-modal__help-nav a:hover {
    text-decoration: underline;
}
.link-modal__help-copy {
    margin: 14px 0 0;
    color: #71717a;
    font-family: "Inter", var(--utility);
    font-size: 12.5px;
    line-height: 1.5;
    text-wrap: balance;               /* dua baris dibagi rata, bukan satu kata menggantung */
}
.link-modal__help-copy a {
    color: inherit;                   /* link ROVCA: warna teks yang sama, tanpa garis bawah */
    text-decoration: none;
}
.link-modal__help-copy a:hover {
    color: var(--ink);
}

/* Bawah: tombol WhatsApp hijau, tetap terlihat */
.link-modal--help .link-modal__foot {
    padding: 14px 16px;                 /* tombol tepat di tengah: 14px atas = 14px bawah (tinggi foot tetap 72px) */
    box-shadow: 0 -1px 0 rgba(16, 16, 20, 0.06);
}


/* ---------- Toggle (blok "Details") di pop-up: HANYA GARIS, bukan kotak ----------
   Gaya "People also ask": tanpa kartu/kotak; tiap pertanyaan satu baris penuh dengan SATU garis tipis di
   bawahnya, teks biasa (tidak tebal), panah polos di kanan tanpa latar bulat. Berlaku di semua pop-up
   halaman (kartu Help, About, Terms, Privacy, ...).
   Dikuatkan dengan !important + selektor panjang supaya tidak kalah oleh gaya yang menempel pada blok di
   editor (border, radius, padding, latar: gaya inline), CSS tambahan di Customizer, atau blok biasa. */
.link-modal .link-modal__body .tf-entry__content :is(details.wp-block-details, details) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #d2d2d2 !important;     /* garis 1px (diukur dari referensi) */
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.link-modal .link-modal__body .tf-entry__content :is(details.wp-block-details, details) > summary {
    /* Tinggi baris 60px + garis 1px = 61px dari garis ke garis (lebih lowong dari referensi Google, 53px),
       teks tetap di tengah baris. Mau lebih rapat/lowong: ubah min-height ini saja. */
    display: flex !important;
    position: relative !important;       /* acuan posisi panah: seluruh baris pertanyaan */
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: 60px !important;
    padding: 14px 36px 14px 0 !important;      /* pertanyaan 2 baris pun tetap lowong */
    background: transparent !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}
.link-modal .link-modal__body .tf-entry__content :is(details.wp-block-details, details) > summary::after {
    position: absolute !important;       /* dikunci di tengah-tengah SELURUH baris, walau pertanyaannya 2-3 baris */
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    right: 4px !important;
    margin: 0 !important;
    transform: translateY(calc(-50% - 2.1px)) rotate(45deg) !important;
    width: 7px !important;               /* panah selebar ±10px, setinggi ±6px seperti referensi */
    height: 7px !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 2px solid #5f6368 !important;
    border-bottom: 2px solid #5f6368 !important;
    background: none !important;         /* panah polos, tanpa latar bulat */
}
.link-modal .link-modal__body .tf-entry__content :is(details.wp-block-details, details) > :not(summary) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 15px;
    color: rgba(16, 16, 20, 0.75);
}
.link-modal .link-modal__body .tf-entry__content :is(details.wp-block-details, details) > :last-child {
    padding-bottom: 18px;
}
@media (max-width: 480px) {
    .link-modal .link-modal__body .tf-entry__content :is(details.wp-block-details, details) > summary {
        padding: 14px 36px 14px 0 !important;   /* tinggi baris tetap minimal 60px (min-height di atas) */
        font-size: 15px !important;
    }
    .link-modal .link-modal__body .tf-entry__content :is(details.wp-block-details, details) > :not(summary) {
        font-size: 14px;
    }
    .link-modal .link-modal__body .tf-entry__content :is(details.wp-block-details, details) > :last-child {
        padding-bottom: 16px;
    }
}
/* Panah saat toggle terbuka (menghadap atas), tetap di tengah baris */
.link-modal .link-modal__body .tf-entry__content :is(details.wp-block-details, details)[open] > summary::after {
    transform: translateY(calc(-50% + 2.4px)) rotate(-135deg) !important;
}
/* Jarak antartoggle HANYA berasal dari tinggi barisnya (52px + garis 1px = 53px). Wadah yang membungkus toggle
   (blok Group, div, dll.) dan paragraf kosong di antaranya tidak boleh menambah jarak sendiri. Tanpa ini,
   aturan jarak antarblok (.tf-entry__content > * + *) menempel pada pembungkusnya sehingga ada ruang ekstra
   ±18-24px di atas tiap toggle dan teksnya tampak turun dari tengah garis. */
.link-modal .link-modal__body .tf-entry__content *:has(details):not(details) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.link-modal .link-modal__body .tf-entry__content *:has(> details):not(details) {
    gap: 0 !important;
    row-gap: 0 !important;
}
.link-modal .link-modal__body .tf-entry__content :is(p:empty, p:has(> br:only-child)) {
    display: none !important;
}
.link-modal .link-modal__body .tf-entry__content :is(details.wp-block-details, details) > summary > * {
    margin: 0 !important;
}



/* ---------- Share: thumbnail 1:1 penuh selebar kartu, kartu selebar tombol Add to cart ----------
   Lebar kartu = lebar tombol beli (maks. --buy-max-w 340px; di post HP jarak tepinya 14px, sama dengan tombol beli).
   Gambar selalu square dan selebar kartu (tanpa ruang kiri-kanan), sama di HP dan desktop.
   Pengaman layar pendek: tinggi gambar dibatasi sisa ruang layar (180px = bagian kartu selain gambar), supaya kartu
   tidak keluar dari layar. Bila batas itu tercapai, share.js memberi class .is-tight → foto memenuhi kotak (cover),
   jadi tetap tanpa ruang kiri-kanan (atas-bawah foto terpotong sedikit, hanya di layar pendek). */
.share-modal-overlay .share-modal {
    max-width: var(--buy-max-w, 340px);
    padding: 14px 20px 12px;
}
@media (max-width: 767px) {
    .post-template .share-modal-overlay {
        padding-left: 14px;    /* = tombol beli (.feed-buy__item: left/right 14px) */
        padding-right: 14px;
    }
}
.share-modal-overlay .share-modal-header {
    margin-bottom: 6px;
}
.share-modal-overlay .share-modal-image {
    width: calc(100% + 40px);   /* selebar kartu: menutupi padding kiri-kanan */
    aspect-ratio: 1 / 1;
    max-height: max(160px, calc(100dvh - var(--share-bottom) - 24px - 180px));
    margin: 0 -20px 10px;
    border-radius: 0;
    background: #fff;
}
.share-modal-overlay .share-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* foto utuh */
    display: block;
}
.share-modal-overlay .share-modal-image.is-tight img {
    object-fit: cover;     /* hanya saat tinggi dibatasi layar pendek */
}
/* Halaman produk: semua slide (square, 3:4, 9:16) memenuhi kotak square — lebar terkunci selebar kartu,
   bagian atas & bawah foto terpotong, yang tampil bagian tengahnya. Grid/beranda tetap utuh (contain). */
.post-template .share-modal-overlay .share-modal-image img {
    object-fit: cover;
    object-position: center;
}
.share-modal-overlay .share-modal-body {
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: 0;                  /* tanpa garis pemisah */
}

/* Kartu share lebih pendek (±55px), gambar tetap 1:1 penuh:
   - baris URL disembunyikan (link tetap tersalin lewat Copy link & terkirim saat share)
   - nama produk satu baris, 18px tebal ("…" jika terlalu panjang); tanpa garis pemisah
   - ikon share 44px (dulu 48px), jarak ke label lebih rapat */
.share-modal-overlay .share-modal-item-url {
    display: none;
}
.share-modal-overlay .share-modal-item-title {
    margin: 0;
    font-size: 18px;                   /* dulu 15px */
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-modal-overlay .share-modal-actions {
    padding: 2px 2px 2px;
}
.share-modal-overlay .share-icon-item {
    gap: 4px;
}
.share-modal-overlay .share-icon-circle {
    width: 44px;
    height: 44px;
}
.share-modal-overlay .share-scroll-btn {
    top: 24px;                         /* tetap di tengah lingkaran ikon (2px + 44px / 2) */
}