/* ==========================================================================
   Tombol beli di reel: [ Add to cart | Select size... | Rp155.000 ]
   Port dari sellfy.css (bagian 1, 3, 4) Ghost. Tampilan sama, nama class baru:
     .sellfy-buy-wrap a → .tf-buy__bar
     .sb-add            → .tf-buy__add
     .sb-size           → .tf-buy__size  (kini <select> ukuran sungguhan)
     .sb-price          → .tf-buy__price
   Pasangan: template-parts/buy-bar.php & assets/js/woo-cart.js
   ========================================================================== */

/* ---------- 1. Variabel posisi (juga dipakai menu di screen.css) ---------- */
:root {
    --buy-bottom: 76px;    /* jarak tombol beli dari bawah layar */
    --buy-h: 49px;         /* tinggi tombol beli */
    --buy-max-w: 340px;    /* lebar maksimal tombol beli (Ghost: 320px; Rupiah lebih panjang dari "$20") */
}
@media (max-width: 480px) {
    :root { --buy-h: 46px; }
}

/* ---------- 2. Posisi di dalam setiap slide ----------
   Tombol ada DI DALAM slide (.feed-item), jadi ikut bergeser saat di-swipe. */
.feed-buy__item {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: var(--buy-bottom);
    z-index: 6;
    display: flex;
    justify-content: center;
    margin: 0;
    pointer-events: none;     /* area kosong tidak menghalangi swipe */
}

/* ---------- 3. Tampilan ---------- */
.tf-buy {
    --sb-bg: #fff;
    --sb-add-bg: #000;
    --sb-add-color: #fff;
    --sb-add-bg-hover: #333;
    --sb-text: #111;
    --sb-muted: #6b6b6b;       /* kontras 5,3:1 (standar minimal 4,5:1); #777 hanya 4,48:1 */
}
.tf-buy__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto; /* kiri | tengah (boleh menyusut) | kanan */
    align-items: center;
    gap: 6px;                  /* jarak kecil → ruang cukup untuk "Select size..." */
    width: min(100%, var(--buy-max-w));
    padding: 5px;
    background: var(--sb-bg);
    border-radius: 999px;
    color: var(--sb-text);
    font-family: "Inter", var(--utility);
    font-size: 15px;
    line-height: 1;
    pointer-events: auto;     /* hanya tombolnya yang bisa diklik */
}

.tf-buy__add {
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--sb-add-bg);
    color: var(--sb-add-color);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.tf-buy__add:hover {
    background: var(--sb-add-bg-hover);
}
.tf-buy__add:disabled {
    opacity: 0.6;
    cursor: default;
}

/* "Select size..." = <select> asli (mudah dipakai di HP & keyboard),
   tampilannya dibuat polos seperti teks di Ghost. */
.tf-buy__size {
    min-width: 0;
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sb-muted);
    font: inherit;
    text-align: center;
    text-align-last: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.tf-buy__size.is-chosen {
    color: var(--sb-text);
    font-weight: 600;
}

.tf-buy__price {
    padding-right: 16px;
    color: var(--sb-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Fokus keyboard terlihat jelas */
.tf-buy__add:focus-visible,
.tf-buy__size:focus-visible {
    outline: 2px solid var(--sb-add-bg);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .tf-buy__bar { gap: 8px; font-size: 14px; }
    .tf-buy__add { padding: 11px 16px; }
    .tf-buy__price { padding-right: 12px; }
}

/* ---------- 4. Tombol link di produk yang juga punya tombol beli ----------
   Di Ghost, post dengan tombol link tidak punya tombol beli. Di WooCommerce
   keduanya bisa ada di satu produk → tombol link ditaruh tepat DI ATAS tombol beli.
   (Produk tanpa harga tidak punya tombol beli → posisi asli Ghost tetap dipakai.) */
.tf-buy ~ .feed-item__link-actions {
    bottom: calc(var(--buy-bottom) + var(--buy-h) + 10px);
    left: 14px;
    right: 14px;
    max-width: var(--buy-max-w);
    margin: 0 auto;
}


/* ==========================================================================
   5. Pop-up tombol beli di HP (bottom sheet) — pasangan woo-cart.js
   Batas 768px sama dengan pop-up checkout Sellfy di Ghost (sellfy.css bagian 5).
   ========================================================================== */

/* Seluruh bar menjadi satu tombol pembuka pop-up (HP & desktop).
   <select> tidak bisa diklik langsung → klik diteruskan ke bar. */
.tf-buy__bar { cursor: pointer; }
.tf-buy__size { pointer-events: none; }

.tf-sheet {
    position: fixed;
    inset: 0;
    z-index: 4000001;         /* di atas reel, menu, dan ikon keranjang */
}
.tf-sheet[hidden] {
    display: none;
}
.tf-sheet__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 10, 0.6);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.tf-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85dvh;
    overflow-y: auto;
    padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
    background: #fff;
    border-radius: 16px 16px 0 0;
    color: var(--ink);
    font-family: "Inter", var(--utility);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.tf-sheet.is-open .tf-sheet__overlay { opacity: 1; }
.tf-sheet.is-open .tf-sheet__panel { transform: translateY(0); }

.tf-sheet__handle {
    width: 40px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: rgba(16, 16, 20, 0.15);
}

/* Pop-up produk (seperti pop-up Sellfy di Ghost):
   judul besar + tutup, foto besar + thumbnail, harga besar, ukuran, jumlah,
   Add to cart, Size guide, deskripsi. Seluruh panel bisa di-scroll. */
.tf-sheet__panel:not(.is-tall) {
    max-height: 90dvh;
}
.tf-sheet__title {
    flex: 1;
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Foto besar + thumbnail */
.tf-sheet__gallery {
    margin-top: 4px;           /* foto lebih dekat ke judul */
}
.tf-sheet__gallery[hidden],
.tf-sheet__thumbs[hidden],
.tf-sheet__desc[hidden] {
    display: none;
}
.tf-sheet__photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;          /* latar di kiri-kanan foto: putih */
}
.tf-sheet__main {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;       /* foto utuh, tidak terpotong */
}
.tf-sheet__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
}
.tf-sheet__thumb {
    flex: none;
    width: 58px;
    height: 58px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(16, 16, 20, 0.12);
    border-radius: 8px;
    background: #f7f7f7;
    cursor: pointer;
}
.tf-sheet__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tf-sheet__thumb.is-active {
    border: 2px solid var(--ink);
}
.tf-sheet__thumb:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.tf-sheet__price {
    margin: 18px 0 0;
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Link Size guide (kanan, kecil) & deskripsi singkat */
.tf-sheet__guide {
    display: block;
    width: fit-content;
    margin: 14px 0 0 auto;
    color: rgba(16, 16, 20, 0.6);
    font-size: 14px;
    text-decoration: underline;
}
.tf-sheet__guide:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.tf-sheet__desc {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(16, 16, 20, 0.08);
    font-size: 15px;
    line-height: 1.5;
}
.tf-sheet__desc p {
    margin: 0 0 8px;
}
.tf-sheet__desc > :last-child {
    margin-bottom: 0;
}
.tf-sheet__close {
    align-self: start;
    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;
}

/* Pilihan ukuran: tombol radio berbentuk pil, nyaman diketuk (min. 44px) */
.tf-sheet__sizes {
    margin: 20px 0 0;
    padding: 0;
    border: 0;
}
.tf-sheet__sizes[hidden] { display: none; }
.tf-sheet__legend {
    margin-bottom: 10px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
}
.tf-sheet__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tf-sheet__chip {
    position: relative;
}
.tf-sheet__chip input {
    position: absolute;       /* tetap bisa dipakai keyboard & screen reader */
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.tf-sheet__chip span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(16, 16, 20, 0.2);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
}
.tf-sheet__chip input:checked + span {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}
.tf-sheet__chip input:focus-visible + span {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.tf-sheet__chip input:disabled + span {
    opacity: 0.4;
    text-decoration: line-through;
}
.tf-sheet__chip input:disabled {
    cursor: default;
}

.tf-sheet__msg {
    min-height: 20px;
    margin: 14px 0 10px;
    font-size: 14px;
}
.tf-sheet__msg.is-error {
    color: #b42318;
}

/* Tombol utama: hitam, pil, selebar panel */
.tf-sheet__add,
.tf-sheet__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.tf-sheet__add:disabled {
    opacity: 0.6;
}
.tf-sheet__add[hidden],
.tf-sheet__done[hidden] {
    display: none;
}
.tf-sheet__done {
    display: grid;
}
/* Tombol kedua (Continue shopping) "naik pelan": tinggi wadahnya dari 0 → penuh.
   Ukuran pop-up tetap (dikunci woo-cart.js), jadi ruangnya diambil dari bagian tengah. */
.tf-sheet__more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.tf-sheet__more > div {
    min-height: 0;
    overflow: hidden;
}
.tf-sheet__more .tf-sheet__continue {
    width: 100%;
    margin-top: 8px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.tf-sheet__done.is-expanded .tf-sheet__more {
    grid-template-rows: 1fr;
}
.tf-sheet__done.is-expanded .tf-sheet__more .tf-sheet__continue {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .tf-sheet__more,
    .tf-sheet__more .tf-sheet__continue {
        transition: none;
    }
}
.tf-sheet__continue {
    min-height: 50px;
    border: 1px solid rgba(16, 16, 20, 0.2);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.tf-sheet__close:focus-visible,
.tf-sheet__add:focus-visible,
.tf-sheet__checkout:focus-visible,
.tf-sheet__continue:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tf-sheet__overlay,
    .tf-sheet__panel { transition: none; }
}
.tf-sheet__panel:focus {
    outline: none;            /* panel hanya menerima fokus agar screen reader membacakan isinya */
}


/* ==========================================================================
   6. Panel: tampilan keranjang & checkout (woo-cart.js bagian 7 & 8)
   ========================================================================== */
.tf-view[hidden] {
    display: none;
}

/* Keranjang & checkout: panel hampir selayar, isi bisa di-scroll */
.tf-sheet__panel.is-tall {
    display: flex;
    flex-direction: column;
    height: 92dvh;
    max-height: none;
    overflow: hidden;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));   /* tombol tidak menempel ke tepi bawah */
}
.tf-sheet__panel.is-tall .tf-view:not([hidden]) {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

/* Bar atas: [kembali] Judul [tutup] — tanpa garis di bawah judul */
.tf-view__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
}
.tf-view__title {
    flex: 1;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.tf-view__title:focus {
    outline: none;
}
.tf-sheet__back {
    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;
}
.tf-sheet__back:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
/* Area yang bisa di-scroll dibentangkan sampai tepi panel (margin -18px),
   isinya tetap berjarak 18px → scrollbar berada di tepi panel, tidak menimpa teks. */
.tf-view__body {
    flex: 1;
    overflow-y: auto;
    margin: 0 -18px;
    padding: 4px 18px;
}
.tf-view__foot {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(16, 16, 20, 0.08);
}

/* ---------- daftar barang ---------- */
.tf-cart-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tf-cart-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-rows: minmax(32px, auto) minmax(32px, auto);   /* 32 + 32 = tinggi foto (64px) */
    grid-template-areas:
        "img name price"
        "img bottom bottom";
    column-gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(16, 16, 20, 0.08);
}
.tf-cart-item.is-busy {
    opacity: 0.5;
}
.tf-cart-item__img {
    grid-area: img;
    align-self: start;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(16, 16, 20, 0.05);
}
.tf-cart-item__name {
    grid-area: name;
    align-self: start;
    margin: 7px 0;                 /* 18px + 14px = 32px: pas satu baris */
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    overflow-wrap: anywhere;
    display: -webkit-box;          /* maksimal 2 baris, selebihnya "…" */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tf-cart-item__price {
    grid-area: price;
    align-self: start;             /* sejajar dengan baris pertama nama */
    justify-self: end;
    margin: 7px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Baris bawah: deskripsi (kiri) + jumlah & sampah (kanan), sejajar tengah */
.tf-cart-item__bottom {
    grid-area: bottom;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.tf-cart-item__meta {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: rgba(16, 16, 20, 0.6);
    font-size: 12px;
    line-height: 15px;
    overflow-wrap: anywhere;
    display: -webkit-box;          /* turun ke baris ke-2; lebih dari itu "…" */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tf-cart-item__actions {
    display: flex;
    align-items: center;
    flex: none;
    gap: 8px;
    margin-left: auto;
}
/* Tombol jumlah di keranjang: kecil, supaya deskripsi punya ruang lebih */
.tf-cart-item .tf-qty {
    border-radius: 8px;
}
.tf-cart-item .tf-qty__btn {
    width: 24px;
    height: 28px;
    font-size: 15px;
}
.tf-cart-item .tf-qty__value {
    min-width: 22px;
    font-size: 14px;
}
/* Tombol hapus: ikon tempat sampah (bukan tulisan "Hapus") */
.tf-cart-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    margin-right: -12px;       /* ikon sejajar tepi kanan harga */
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgba(16, 16, 20, 0.6);
    cursor: pointer;
}
.tf-cart-item__remove:hover {
    background: rgba(16, 16, 20, 0.06);
    color: var(--ink);
}
.tf-cart-item__remove:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.tf-cart-item__remove svg {
    width: 18px;
    height: 18px;
}

/* tombol jumlah: [ − 1 + ] */
.tf-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(16, 16, 20, 0.2);
    border-radius: 10px;
}
.tf-qty__btn {
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
}
.tf-qty__btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.tf-qty__value {
    min-width: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tf-qty__btn:focus-visible,
.tf-cart-item__remove:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.tf-cart-empty,
.tf-cart-msg {
    margin: 16px 0 0;
    color: rgba(16, 16, 20, 0.7);
    font-size: 14px;
}
.tf-cart-msg.is-error {
    color: #b42318;
}
.tf-cart-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 600;
}
.tf-cart-total[hidden],
.tf-sheet__checkout[hidden],
.tf-sheet__continue[hidden],
.tf-cart-empty[hidden] {
    display: none;
}

/* ---------- checkout (iframe) ---------- */
.tf-view__frame {
    position: relative;
    flex: 1;
    margin: 0 -18px;            /* selebar panel */
}
.tf-checkout-frame,
.tf-guide-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;                 /* muncul setelah selesai dimuat */
    transition: opacity 0.2s ease;
}
.tf-checkout-frame.is-ready,
.tf-guide-frame.is-ready {
    opacity: 1;
}
.tf-view__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: rgba(16, 16, 20, 0.6);
    font-size: 14px;
}
.tf-view__loading[hidden] {
    display: none;
}

/* ---------- desktop: panel di tengah bawah layar ---------- */
@media (min-width: 769px) {
    .tf-sheet__panel {
        left: 50%;
        right: auto;
        width: min(520px, 100%);
        transform: translate(-50%, 100%);
    }
    .tf-sheet.is-open .tf-sheet__panel {
        transform: translate(-50%, 0);
    }
}


/* ---------- 7. Jumlah barang di panel produk (HP) ---------- */
.tf-sheet__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}
.tf-sheet__qty .tf-sheet__legend {
    margin: 0;
}
/* Lebih kecil dari tombol ukuran (44px), supaya ukuran tetap jadi pilihan utama.
   32px masih nyaman disentuh (batas minimal aksesibilitas: 24px). */
.tf-sheet__qty .tf-qty {
    border-radius: 8px;
}
.tf-sheet__qty .tf-qty__btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
}
.tf-sheet__qty .tf-qty__value {
    min-width: 24px;
    font-size: 14px;
}


/* ---------- 8. Keranjang kosong: ikon, tulisan & tombol di tengah panel ---------- */
.tf-view--cart .tf-view__body {
    display: flex;
    flex-direction: column;
}
.tf-view__foot[hidden] {
    display: none;
}
.tf-cart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 24px 0 48px;
    color: var(--ink);
    text-align: center;
}
.tf-cart-empty[hidden] {
    display: none;
}
.tf-cart-empty__icon {
    width: 30px;
    height: 30px;
}
.tf-cart-empty__text {
    margin: 0 0 10px;
    font-size: 16px;
}
.tf-cart-empty__btn {
    min-height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: #2b2b2b;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.tf-cart-empty__btn:hover {
    background: #000;
}
.tf-cart-empty__btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}



/* ---------- 10. Pop-up produk: judul & tombol beli DIAM, isi di tengah di-scroll ----------
   Panel produk dibagi tiga (seperti panel keranjang): bar judul (diam), bagian
   tengah .tf-sheet__body (foto, harga, ukuran, jumlah, Size guide, deskripsi;
   bisa di-scroll), dan tombol beli .tf-sheet__actions (diam). Scrollbar hanya
   muncul di bagian tengah. Tepi bawah isi memudar halus di atas tombol. */
.tf-sheet__panel:not(.is-tall) {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* yang di-scroll hanya bagian tengah */
}
.tf-view--product:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.tf-sheet__body {
    padding-bottom: 16px;
}
.tf-sheet__actions {
    position: relative;
    flex: none;
    margin: 0 -18px calc(-18px - env(safe-area-inset-bottom, 0px)); /* bawah: menggantikan jarak bawah panel */
    padding: 0 18px calc(18px + env(safe-area-inset-bottom, 0px));
    background: #fff;
}
.tf-sheet__actions::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;      /* tidak menghalangi ketukan pada isi di belakangnya */
}


/* ---------- 11. Pop-up produk: ukuran foto ----------
   HP: foto selalu selebar panel dengan rasio 4:3 (Ukuran & Jumlah di-scroll;
   tombol Add to cart tetap diam di bawah).
   Desktop: tinggi foto menyesuaikan tinggi layar supaya Ukuran, Jumlah &
   Add to cart terlihat bersamaan: sisa ruang setelah bagian lain (±500px),
   maksimal setinggi biasanya (4:3), minimal 120px. */
@media (min-width: 661px) {
    .tf-sheet__photo {
        width: 100%;           /* tetap selebar panel; hanya tingginya yang menyesuaikan */
        max-height: max(120px, calc(90dvh - 500px));
    }
}
@media (max-width: 660px) {
    .tf-sheet__thumb {
        width: 46px;
        height: 46px;
    }
}
/* Scrollbar bagian tengah disembunyikan (tetap bisa di-scroll) */
.tf-sheet__body {
    scrollbar-width: none;
}
.tf-sheet__body::-webkit-scrollbar {
    display: none;
}