/* =====================================================================
   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);
}


/* ---------- 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;
}