/**
 * ============================================================
 * JAYA PC — MOBILE CSS
 * Template Version : 2.0.0
 * Description      : Responsive overrides untuk layar mobile.
 *                    Breakpoint: max-width 575px (xs)
 *                    Selalu load SETELAH semua CSS lainnya.
 * Dependency       : variables.css, base.css, components.css,
 *                    layout.css, pages/*.css
 * ============================================================
 */

/* ──────────────────────────────────────────
 * 🌐 GLOBAL — SEMUA UKURAN LAYAR
 * Mencegah horizontal scroll & safe-area
 * ────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x : hidden;
}

body {
  overflow-x               : hidden;
  /* Safe area bawah untuk iPhone X+ / notched phones */
  padding-bottom           : env(safe-area-inset-bottom, 0px);
  -webkit-text-size-adjust : 100%;
}

/* Prevent iOS auto-zoom saat fokus input — harus 16px minimal */
@media (max-width: 991px) {
  input, select, textarea,
  .jp-form-control,
  .jp-coupon-input,
  .jp-qty-value {
    font-size : 16px !important;
  }

  /* Qty buttons — touch-friendly (min 44px) */
  .jp-qty-btn {
    width  : 44px;
    height : 44px;
  }

  .jp-qty-value {
    height     : 44px;
    min-width  : 44px;
    font-weight: var(--jp-fw-semibold);
  }

  /* Cart sidebar selalu di bawah cart items pada semua layar non-desktop */
  .jp-cart-sidebar {
    position : static;
    order    : 2;
  }

  .jp-cart-main {
    order : 1;
  }

  /* Checkout sidebar juga di bawah */
  .jp-checkout-layout {
    grid-template-columns : 1fr;
  }

  /* WA float — safe area bottom */
  .jp-wa-float {
    bottom : calc(env(safe-area-inset-bottom, 0px) + var(--jp-space-4));
  }

  .jp-back-to-top {
    bottom : calc(env(safe-area-inset-bottom, 0px) + 56px + var(--jp-space-2));
  }
}


/* Di bawah 768px baris navbar tidak muat memuat 5 ikon + Rakit PC + hamburger.
 * Lacak Pesanan & Bantuan dilepas dari navbar karena keduanya sudah ada di
 * dalam drawer hamburger, yang selalu tampil di lebar ini. */
@media (max-width: 767px) {

  .jp-nav-icon-btn:has(.fa-truck-fast),
  .jp-nav-icon-btn:has(.fa-circle-question) {
    display : none;
  }

  /* Dua tombol melayang bertumpuk di pojok kanan bawah dan menutupi tombol BELI
   * kartu produk kolom kanan. Di layar sentuh scroll ke atas sudah gampang
   * (swipe / ketuk status bar), jadi yang dilepas back-to-top — WhatsApp tetap
   * karena itu jalur konsultasi. */
  .jp-back-to-top {
    display : none !important;
  }

  /* Chip filter kategori — tinggi 28px terlalu kecil untuk jempol. */
  .jp-shop-cat-chip {
    min-height  : 40px;
    display     : inline-flex;
    align-items : center;
  }

  /* Titik indikator hero tetap kecil secara visual, tapi area sentuhnya
   * dilebarkan lewat padding + background-clip. */
  .jp-hero-dot {
    width          : 24px;
    height         : 24px;
    border         : 8px solid transparent;
    background-clip: content-box;
  }
}


@media (max-width: 575px) {

  /* ──────────────────────────────────────────
   * 📐 GLOBAL SPACING
   * ────────────────────────────────────────── */

  .jp-container,
  .jp-container-fluid,
  .jp-container-narrow {
    padding-left  : var(--jp-space-4);
    padding-right : var(--jp-space-4);
  }

  .jp-section {
    padding-top    : var(--jp-space-10);
    padding-bottom : var(--jp-space-10);
  }

  .jp-section-surface {
    padding-top    : var(--jp-space-10);
    padding-bottom : var(--jp-space-10);
  }

  .jp-section-sm {
    padding-top    : var(--jp-space-6);
    padding-bottom : var(--jp-space-6);
  }

  /* Section header stack vertikal */
  .jp-section-header {
    flex-direction : column;
    align-items    : flex-start;
    gap            : var(--jp-space-2);
    margin-bottom  : var(--jp-space-5);
  }

  .jp-section-title {
    font-size : var(--jp-text-xl);
  }

  .jp-section-label {
    font-size : var(--jp-text-xs);
  }


  /* ──────────────────────────────────────────
   * 🔝 TOPBAR
   * ────────────────────────────────────────── */

  .jp-topbar-right {
    display : none;
  }

  .jp-topbar-marquee {
    flex : 1 1 100%;
  }


  /* ──────────────────────────────────────────
   * 🧭 NAVBAR
   * ────────────────────────────────────────── */

  .jp-navbar-inner {
    gap : var(--jp-space-2);
  }

  .jp-nav-menu {
    display : none;
  }

  /* Logo dikecilkan supaya jatah lebar search lebih besar. */
  .jp-navbar-brand img {
    height : 30px;
  }

  /* Pil berlabel, bukan kotak oranye buta.
   *
   * Versi ikon-saja dulu dipasang waktu navbar masih memuat kolom search dan 5
   * ikon sehingga ruangnya mepet. Setelah search jadi tombol, navbar menyisakan
   * 65-125px kosong — labelnya muat lagi. Kotak 44x44 pekat berisi ikon 16px
   * juga tampak seperti blok oranye kosong di antara ikon garis tipis, dan
   * tanpa tulisan orang tidak tahu itu tombol apa. */
  .jp-btn-rakit {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : var(--jp-space-1);
    width           : auto;
    height          : 40px;
    padding         : 0 var(--jp-space-3);
    font-size       : var(--jp-text-xs);
    font-weight     : var(--jp-fw-semibold);
    border-radius   : var(--jp-radius-full);
    white-space     : nowrap;
  }

  .jp-btn-rakit i {
    font-size : var(--jp-text-sm);
    margin    : 0;
  }

  .jp-navbar-actions {
    gap : var(--jp-space-1);
  }

  /* 44×44 — anjuran minimum Apple HIG untuk target sentuh. */
  .jp-nav-icon-btn {
    width  : 44px;
    height : 44px;
  }

  /* Wishlist & Akun pindah ke drawer (sudah ada di sana) supaya search dapat
   * ruang. Keranjang tetap di navbar — itu satu-satunya yang TIDAK ada di drawer
   * dan merupakan jalur checkout. */
  .jp-nav-icon-btn:has(.fa-heart),
  .jp-nav-icon-btn:has(.fa-user) {
    display : none;
  }


  /* ──────────────────────────────────────────
   * 🖼️ HERO
   * ────────────────────────────────────────── */

  /* Tinggi tetap membuat banner 2:1 mengambang di tengah kotak yang lebih
   * tinggi — muncul pita hitam kosong ~93px di atas dan bawah. Sekarang
   * tingginya mengikuti rasio banner (50vw = 2:1), dan boleh tumbuh sendiri
   * kalau slide-nya punya judul/tombol. */
  .jp-hero-slide {
    height       : auto;
    aspect-ratio : auto;
    min-height   : 50vw;
    align-items  : flex-end;
  }

  /* Banner Jaya PC adalah desain utuh dengan teks sampai ke tepi gambar, jadi
   * terpotong sedikit pun merusak (pernah kejadian: "ADVANCING" terbaca
   * "VANCING"). Overlay teks dikeluarkan dari alur supaya TIDAK ikut menentukan
   * tinggi slide — tingginya murni 50vw = rasio 2:1 gambar, sehingga cover
   * menampilkan gambar utuh tanpa potongan maupun pita kosong. */
  .jp-hero-slide-bg img {
    object-fit : cover;
  }

  .jp-hero-slide .jp-overlay-content {
    position : absolute;
    left     : 0;
    right    : 0;
    bottom   : 0;
  }

  .jp-hero-slide-overlay {
    background : linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.08) 100%);
  }

  /* Slide adalah flex item, jadi semuanya ikut setinggi slide TERPANJANG.
   * Kalau satu slide punya judul + deskripsi + 2 tombol, slide yang isinya
   * gambar saja ikut jadi tinggi dan gambarnya terpotong separuh. Maka konten
   * di mobile dipadatkan supaya muat dalam tinggi rasio banner (50vw). */
  /* Padding bawah menyisakan ruang untuk titik indikator (absolut di dasar
   * slide) supaya tombol CTA tidak menimpanya. */
  .jp-hero-content {
    padding     : var(--jp-space-3) 0 var(--jp-space-10);
    max-width   : 100%;
    margin-left : 0;
    text-align  : center;
  }

  /* Badge dilepas & judul dikecilkan supaya isi slide muat dalam tinggi banner
   * (195px). Kalau melebihi, bagian atasnya terpotong oleh overflow slide —
   * badge sempat terpangkas separuh. */
  .jp-hero-label {
    display : none;
  }

  .jp-hero-title {
    font-size   : var(--jp-text-xl);
    line-height : 1.15;
  }

  /* Deskripsi dilepas di mobile: judul + tombol sudah cukup untuk banner, dan
   * ini yang membuat slide muat dalam tinggi rasio gambar tanpa memotongnya. */
  .jp-hero-desc {
    display : none;
  }

  .jp-hero-badge {
    font-size : var(--jp-text-xs);
  }

  /* Satu CTA saja di mobile. Dua tombol tidak muat sebaris di 390px sehingga
   * membungkus jadi dua baris (104px) dan memaksa seluruh slide ikut tinggi —
   * banner gambar-saja jadi terpotong. Tombol kedua umumnya "Rakit PC", yang
   * pintu masuknya sudah ada di navbar dan drawer. */
  .jp-hero-actions {
    flex-direction  : row;
    justify-content : center;
    flex-wrap       : nowrap;
    gap             : var(--jp-space-2);
  }

  .jp-hero-actions .jp-btn:nth-child(n + 2) {
    display : none;
  }

  /* Selebar isinya saja, jangan melebar penuh — tombol full-width menutupi
   * seperempat banner dan menghalangi desain gambarnya. */
  .jp-hero-actions .jp-btn {
    flex            : 0 0 auto;
    min-width       : 0;
    justify-content : center;
    padding         : var(--jp-space-2) var(--jp-space-5);
    font-size       : var(--jp-text-xs);
  }

  /* Stat bar — 2 kolom */
  .jp-hero-stats-inner {
    grid-template-columns : repeat(2, 1fr);
  }

  .jp-hero-stat-item {
    padding      : var(--jp-space-3) var(--jp-space-2);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .jp-hero-stat-item:nth-child(odd) {
    border-right : 1px solid rgba(255,255,255,0.08);
  }

  /* Jumlah ganjil: item terakhir sendirian di barisnya, jadi dilebarkan penuh
   * supaya tidak ada sel kosong di sebelahnya. Untuk jumlah genap tidak kena. */
  .jp-hero-stat-item:last-child:nth-child(odd) {
    grid-column  : 1 / -1;
    border-right : none;
  }

  /* Garis bawah dilepas pada baris terakhir — dihitung dari belakang supaya
   * tidak lagi mengasumsikan tepat 4 item seperti aturan lama. */
  .jp-hero-stat-item:last-child,
  .jp-hero-stat-item:nth-last-child(2):nth-child(odd) {
    border-bottom : none;
  }

  .jp-hero-stat-number {
    font-size : var(--jp-text-lg);
  }

  .jp-hero-stat-label {
    font-size : 11px;
  }

  .jp-hero-prev,
  .jp-hero-next {
    display : none;
  }

  .jp-hero-indicators {
    bottom : var(--jp-space-3);
  }


  /* Aturan mobile banner Partner Brand ada di pages/home.css — file itu
   * dimuat SETELAH mobile.css, jadi override-nya harus di sana. */


  /* ──────────────────────────────────────────
   * ✅ TRUST BAR
   * ────────────────────────────────────────── */

  .jp-trust-bar-inner {
    grid-template-columns : repeat(2, 1fr);
  }

  .jp-trust-item + .jp-trust-item { border-left: none; }

  .jp-trust-item:nth-child(odd) {
    border-right : var(--jp-border-width) solid var(--jp-border-color);
  }

  .jp-trust-item {
    padding : var(--jp-space-3) var(--jp-space-2);
    gap     : var(--jp-space-2);
  }

  .jp-trust-icon {
    width  : 32px;
    height : 32px;
  }

  .jp-trust-icon i { font-size: var(--jp-text-sm); }

  .jp-trust-text-desc { display: none; }

  .jp-trust-text-title {
    font-size : var(--jp-text-xs);
  }


  /* ──────────────────────────────────────────
   * 🗂️ CATEGORY GRID
   * ────────────────────────────────────────── */

  /* 4 kolom dengan scroll horizontal di layar sangat kecil */
  .jp-category-grid {
    grid-template-columns : repeat(4, 1fr);
    gap                   : var(--jp-space-2);
    overflow-x            : auto;
    -webkit-overflow-scrolling : touch;
    scrollbar-width       : none;
    padding-bottom        : var(--jp-space-1);
  }

  .jp-category-grid::-webkit-scrollbar { display: none; }

  .jp-category-card {
    padding      : var(--jp-space-2) var(--jp-space-1);
    gap          : var(--jp-space-1);
    border-radius: var(--jp-radius-md);
    min-width    : 70px;
  }

  .jp-category-card-img {
    width  : 36px;
    height : 36px;
  }

  .jp-category-card-name {
    font-size  : 12px;
    text-align : center;
  }

  .jp-category-card-count { display: none; }

  .jp-category-grid-main {
    grid-template-columns : 1fr;
    grid-template-rows    : auto;
  }

  .jp-category-grid-main .jp-cat-featured {
    grid-row    : auto;
    grid-column : auto;
  }


  /* ──────────────────────────────────────────
   * 🛍️ PRODUCT GRID & CARDS
   * ────────────────────────────────────────── */

  .jp-product-grid,
  .jp-product-grid-3,
  .jp-product-grid-5 {
    grid-template-columns : repeat(2, 1fr);
    gap                   : var(--jp-space-2);
  }

  .jp-product-card-body {
    padding : var(--jp-space-2) var(--jp-space-2);
    gap     : var(--jp-space-1);
  }

  .jp-product-card-img img {
    padding : var(--jp-space-2);
  }

  .jp-product-card-brand {
    font-size : 10px;
  }

  .jp-product-card-name {
    font-size          : var(--jp-text-xs);
    -webkit-line-clamp : 2;
    min-height         : 2.5em;
  }

  .jp-product-card-footer {
    padding : var(--jp-space-2) var(--jp-space-2);
  }

  .jp-price {
    font-size : var(--jp-text-sm);
  }

  .jp-price-original {
    font-size : 10px;
  }

  /* Spec chips — sembunyikan di mobile */
  .jp-product-card-specs { display: none; }

  .jp-product-card-wishlist {
    width  : 30px;
    height : 30px;
    font-size: var(--jp-text-xs);
  }

  /* Btn cart full width di mobile */
  .jp-btn-cart {
    width           : 100%;
    justify-content : center;
    padding         : var(--jp-space-2) var(--jp-space-3);
    font-size       : var(--jp-text-xs);
    border-radius   : 0 0 var(--jp-radius-xl) var(--jp-radius-xl);
  }


  /* ──────────────────────────────────────────
   * 🎯 BANNER PROMO GRID
   * ────────────────────────────────────────── */

  .jp-banner-grid {
    grid-template-columns : 1fr;
    grid-template-rows    : auto;
    gap                   : var(--jp-space-2);
    min-height            : auto;
  }

  .jp-banner-main { grid-row: auto; }

  .jp-banner-card { min-height: 140px; }

  .jp-banner-main .jp-banner-title { font-size: var(--jp-text-lg); }

  .jp-banner-title { font-size: var(--jp-text-sm); }

  .jp-banner-card-content { padding: var(--jp-space-3); }


  /* ──────────────────────────────────────────
   * 🔧 PC CONFIGURATOR
   * ────────────────────────────────────────── */

  .jp-configurator-wrap {
    grid-template-columns : 1fr;
    gap                   : var(--jp-space-6);
  }

  .jp-configurator-steps { gap: var(--jp-space-4); }

  .jp-config-step-number {
    width  : 36px;
    height : 36px;
    font-size: var(--jp-text-sm);
  }

  .jp-configurator-widget { padding: var(--jp-space-4); }


  /* ──────────────────────────────────────────
   * 💪 WHY US
   * ────────────────────────────────────────── */

  .jp-why-grid {
    grid-template-columns : repeat(2, 1fr);
    gap                   : var(--jp-space-2);
  }

  .jp-why-card { padding: var(--jp-space-3); }

  .jp-why-icon {
    width  : 36px;
    height : 36px;
  }

  .jp-why-icon i { font-size: var(--jp-text-sm); }

  .jp-why-title { font-size: var(--jp-text-xs); font-weight: var(--jp-fw-semibold); }

  .jp-why-desc { font-size: 10px; }


  /* ──────────────────────────────────────────
   * ⭐ TESTIMONIAL
   * ────────────────────────────────────────── */

  .jp-testimonial-grid {
    grid-template-columns : 1fr;
    gap                   : var(--jp-space-3);
  }

  .jp-testimonial-card { padding: var(--jp-space-4); }

  .jp-testimonial-text { font-size: var(--jp-text-sm); }


  /* ──────────────────────────────────────────
   * 📝 BLOG GRID
   * ────────────────────────────────────────── */

  .jp-blog-grid {
    grid-template-columns : 1fr;
    gap                   : var(--jp-space-3);
  }


  /* ──────────────────────────────────────────
   * 📧 NEWSLETTER
   * ────────────────────────────────────────── */

  .jp-newsletter {
    padding : var(--jp-space-8) 0;
  }

  .jp-newsletter-inner {
    flex-direction : column;
    gap            : var(--jp-space-5);
    text-align     : center;
  }

  .jp-newsletter-title {
    font-size : var(--jp-text-xl);
  }

  .jp-newsletter-form { width: 100%; }

  .jp-newsletter-input-wrap {
    flex-direction : column;
    gap            : var(--jp-space-2);
  }

  .jp-newsletter-input { text-align: center; }


  /* ──────────────────────────────────────────
   * 🔗 FOOTER
   * ────────────────────────────────────────── */

  .jp-footer-grid {
    grid-template-columns : 1fr;
    gap                   : var(--jp-space-6);
  }

  .jp-footer-top {
    padding : var(--jp-space-8) 0 var(--jp-space-6);
  }

  .jp-footer-bottom {
    flex-direction : column;
    align-items    : center;
    text-align     : center;
    gap            : var(--jp-space-3);
    font-size      : var(--jp-text-xs);
  }

  .jp-payment-badges { justify-content: center; }

  .jp-footer-links {
    display               : grid;
    grid-template-columns : repeat(2, 1fr);
    gap                   : var(--jp-space-1) var(--jp-space-4);
  }


  /* ──────────────────────────────────────────
   * 🛒 SHOP LAYOUT
   * ────────────────────────────────────────── */

  .jp-shop-layout {
    grid-template-columns : 1fr;
  }

  .jp-shop-sidebar {
    display  : none;
    position : static;
  }

  .jp-shop-header {
    padding-top    : var(--jp-space-4);
    padding-bottom : var(--jp-space-4);
  }

  .jp-shop-page-title {
    font-size : var(--jp-text-xl);
  }

  /* Shop toolbar — stack vertikal */
  .jp-shop-toolbar {
    flex-direction : column;
    align-items    : stretch;
    gap            : var(--jp-space-2);
  }

  .jp-shop-sort {
    width : 100%;
  }

  /* Filter & sort bar lebih compact */
  .jp-shop-results-info {
    font-size : var(--jp-text-xs);
  }


  /* ──────────────────────────────────────────
   * 📦 PRODUCT DETAIL
   * ────────────────────────────────────────── */

  .jp-product-detail-wrap {
    grid-template-columns : 1fr;
    gap                   : var(--jp-space-4);
  }

  .jp-product-gallery { position: static; }

  .jp-gallery-thumbs {
    grid-template-columns : repeat(5, 1fr);
    gap                   : var(--jp-space-1);
  }

  .jp-gallery-thumb {
    border-radius : var(--jp-radius-md);
  }

  /* Product info section */
  .jp-product-info-title {
    font-size : var(--jp-text-xl);
  }

  .jp-product-info-price .jp-price {
    font-size : var(--jp-text-2xl);
  }

  /* Variant selector — scrollable */
  .jp-variant-group {
    overflow-x             : auto;
    -webkit-overflow-scrolling : touch;
    flex-wrap              : nowrap;
    scrollbar-width        : none;
  }

  .jp-variant-group::-webkit-scrollbar { display: none; }

  /* Action buttons full width */
  .jp-product-actions {
    flex-direction : column;
    gap            : var(--jp-space-2);
  }

  .jp-product-actions .jp-btn {
    width           : 100%;
    justify-content : center;
  }

  /* Tabs — scrollable */
  .jp-product-tabs {
    overflow-x             : auto;
    -webkit-overflow-scrolling : touch;
    flex-wrap              : nowrap;
    scrollbar-width        : none;
    border-bottom          : var(--jp-border-width) solid var(--jp-border-color);
  }

  .jp-product-tabs::-webkit-scrollbar { display: none; }

  .jp-tab-btn {
    white-space : nowrap;
    font-size   : var(--jp-text-sm);
    padding     : var(--jp-space-3) var(--jp-space-4);
  }

  /* Specs table */
  .jp-specs-table td {
    padding   : var(--jp-space-2) var(--jp-space-3);
    font-size : var(--jp-text-xs);
  }


  /* ──────────────────────────────────────────
   * 🛒 CART PAGE
   * ────────────────────────────────────────── */

  /* Cart item — grid 2-baris yang bersih */
  .jp-cart-item {
    display               : grid;
    grid-template-areas   :
      "img info remove"
      "img qty  subtotal";
    grid-template-columns : 64px 1fr auto;
    grid-template-rows    : auto auto;
    gap                   : var(--jp-space-1) var(--jp-space-3);
    padding               : var(--jp-space-3) var(--jp-space-4);
  }

  .jp-cart-item-img {
    grid-area     : img;
    width         : 64px;
    height        : 64px;
    align-self    : center;
  }

  .jp-cart-item-info {
    grid-area : info;
    min-width : 0;
  }

  /* Tampilkan harga per-unit di dalam blok info */
  .jp-cart-item-price-mobile {
    display     : block;
    font-size   : var(--jp-text-sm);
    font-weight : var(--jp-fw-bold);
    color       : var(--jp-price-sale);
    margin-top  : var(--jp-space-1);
  }

  /* Sembunyikan kolom harga terpisah — sudah tampil di info */
  .jp-cart-item-price {
    display : none;
  }

  .jp-cart-item-remove {
    grid-area       : remove;
    align-self      : flex-start;
    width           : 30px;
    height          : 30px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--jp-gray-400);
    padding         : 0;
  }

  .jp-cart-item-qty {
    grid-area  : qty;
    align-self : center;
  }

  /* Qty lebih kecil di cart untuk menghemat ruang */
  .jp-cart-item-qty .jp-qty-btn {
    width  : 36px;
    height : 36px;
  }

  .jp-cart-item-qty .jp-qty-value {
    height    : 36px;
    min-width : 36px;
  }

  .jp-cart-item-subtotal {
    grid-area  : subtotal;
    text-align : right;
    align-self : center;
  }

  .jp-cart-item-subtotal-price,
  .jp-cart-item-subtotal {
    font-size   : var(--jp-text-sm);
    font-weight : var(--jp-fw-bold);
    white-space : nowrap;
  }

  /* Cart card header compact */
  .jp-cart-card-header {
    padding : var(--jp-space-3) var(--jp-space-4);
  }

  /* Coupon input — stack di mobile */
  .jp-coupon-input-wrap {
    flex-direction : column;
    gap            : var(--jp-space-2);
  }

  .jp-coupon-input {
    width : 100%;
  }

  .jp-coupon-wrap {
    padding : var(--jp-space-4);
  }

  /* Order summary total compact */
  .jp-summary-total-price {
    font-size : var(--jp-text-xl);
  }

  /* Order summary footer padding */
  .jp-order-summary-footer {
    padding : var(--jp-space-4);
  }

  /* Checkout button sticky bawah di halaman cart */
  .jp-cart-sticky-checkout {
    position   : sticky;
    bottom     : env(safe-area-inset-bottom, 0px);
    z-index    : var(--jp-z-fixed);
    background : var(--jp-white);
    border-top : var(--jp-border-width) solid var(--jp-border-color);
    padding    : var(--jp-space-3) var(--jp-space-4);
    box-shadow : 0 -4px 12px rgba(0,0,0,.08);
  }


  /* ──────────────────────────────────────────
   * 💳 CHECKOUT PAGE
   * ────────────────────────────────────────── */

  .jp-checkout-steps {
    margin-bottom : var(--jp-space-5);
    gap           : 0;
  }

  .jp-checkout-step {
    font-size : var(--jp-text-xs);
    gap       : var(--jp-space-1);
  }

  .jp-checkout-step-label { display: none; }

  .jp-checkout-step-num {
    width  : 26px;
    height : 26px;
  }

  .jp-checkout-step-divider {
    min-width : 16px;
    max-width : 40px;
  }

  .jp-checkout-form-body {
    padding : var(--jp-space-4);
  }

  .jp-checkout-form-header {
    padding : var(--jp-space-3) var(--jp-space-4);
  }

  .jp-form-grid-2 {
    grid-template-columns : 1fr;
  }

  /* Address card pilihan — stack */
  .jp-address-grid {
    grid-template-columns : 1fr;
  }

  /* Payment options — full width */
  .jp-payment-option {
    padding : var(--jp-space-3);
    gap     : var(--jp-space-3);
    flex-wrap: wrap;
  }

  .jp-payment-option-icon {
    width  : 36px;
    height : 24px;
  }

  /* Shipping rate cards */
  .jp-shipping-rate-card,
  .jp-shipping-option {
    padding : var(--jp-space-3);
    gap     : var(--jp-space-2);
  }


  /* ──────────────────────────────────────────
   * 🔢 BRAND MARQUEE
   * ────────────────────────────────────────── */

  .jp-brand-track { gap: var(--jp-space-6); }

  .jp-brand-item span { font-size: var(--jp-text-sm); }


  /* ──────────────────────────────────────────
   * 🧭 BREADCRUMB
   * ────────────────────────────────────────── */

  .jp-breadcrumb-list { gap: var(--jp-space-1); }

  .jp-breadcrumb-item { font-size: 11px; }

  /* Truncate panjang breadcrumb */
  .jp-breadcrumb-item:not(:first-child):not(:last-child) {
    display : none;
  }


  /* ──────────────────────────────────────────
   * 📄 PAGINATION
   * ────────────────────────────────────────── */

  .jp-pagination {
    flex-wrap       : wrap;
    justify-content : center;
    gap             : var(--jp-space-1);
  }

  .jp-page-item .jp-page-link {
    width  : 36px;
    height : 36px;
    font-size: var(--jp-text-xs);
  }


  /* ──────────────────────────────────────────
   * 🖱️ FLOATING BUTTONS
   * ────────────────────────────────────────── */

  .jp-back-to-top,
  .jp-wa-float {
    width  : 42px;
    height : 42px;
    right  : var(--jp-space-3);
  }

  .jp-back-to-top {
    bottom : calc(env(safe-area-inset-bottom, 0px) + 58px + var(--jp-space-2));
  }

  .jp-wa-float {
    bottom : calc(env(safe-area-inset-bottom, 0px) + var(--jp-space-3));
  }


  /* ──────────────────────────────────────────
   * 🧩 BUTTONS
   * ────────────────────────────────────────── */

  .jp-btn-xl {
    padding   : var(--jp-space-3) var(--jp-space-5);
    font-size : var(--jp-text-sm);
  }

  /* Pastikan semua primary CTA button touch-friendly */
  .jp-btn-lg {
    min-height : 48px;
    font-size  : var(--jp-text-sm);
  }

  /* Semua tombol dalam .jp-error-actions — stack vertical.
   * .jp-hero-actions sengaja TIDAK ikut di sini: hero punya aturannya sendiri
   * di blok HERO di atas (sebaris & selebar isinya). Aturan ini letaknya lebih
   * bawah, jadi kalau diikutkan dia menang dan tombolnya melebar penuh
   * menutupi banner. */
  .jp-error-actions,
  .jp-error-actions-500 {
    flex-direction : column;
    align-items    : stretch;
  }

  .jp-error-actions .jp-btn,
  .jp-error-actions-500 .jp-btn {
    width           : 100%;
    justify-content : center;
  }

  .jp-btn {
    white-space     : normal !important;
    text-align      : center;
  }

  .jp-checkout-actions {
    flex-direction  : column-reverse !important;
    gap             : var(--jp-space-2) !important;
  }

  .jp-checkout-actions .jp-btn {
    width           : 100% !important;
    justify-content : center;
  }


  /* ──────────────────────────────────────────
   * 🔔 TOAST
   * ────────────────────────────────────────── */

  .jp-toast-container {
    bottom    : calc(env(safe-area-inset-bottom, 0px) + var(--jp-space-4));
    right     : var(--jp-space-3);
    left      : var(--jp-space-3);
    max-width : 100%;
  }

  .jp-toast {
    font-size : var(--jp-text-sm);
    padding   : var(--jp-space-3) var(--jp-space-4);
  }


  /* ──────────────────────────────────────────
   * 📋 MODAL / OFFCANVAS
   * ────────────────────────────────────────── */

  .jp-modal-content,
  .offcanvas {
    border-radius : var(--jp-radius-xl) var(--jp-radius-xl) 0 0;
  }


  /* ──────────────────────────────────────────
   * 🏪 HALAMAN AKUN (Account.vue)
   * ────────────────────────────────────────── */

  /* Bootstrap form controls di halaman akun */
  .jp-account-form .form-control,
  .jp-account-form input,
  .jp-account-form select,
  .jp-account-form textarea {
    font-size  : 16px !important;
    min-height : 44px;
  }

  /* Tab navigasi akun — scroll horizontal */
  .jp-account-tabs {
    overflow-x             : auto;
    -webkit-overflow-scrolling : touch;
    flex-wrap              : nowrap;
    scrollbar-width        : none;
  }

  .jp-account-tabs::-webkit-scrollbar { display: none; }

  /* Kartu profil/alamat — full width */
  .jp-account-card {
    border-radius : var(--jp-radius-lg);
  }


  /* ──────────────────────────────────────────
   * 📦 ORDER DETAIL
   * ────────────────────────────────────────── */

  .jp-order-item-img {
    width  : 56px;
    height : 56px;
  }

  .jp-order-timeline {
    padding-left : var(--jp-space-5);
  }

  .jp-order-timeline-item {
    padding-left : var(--jp-space-4);
    font-size    : var(--jp-text-sm);
  }


  /* ──────────────────────────────────────────
   * 🔍 SEARCH HASIL
   * ────────────────────────────────────────── */

  .jp-search-wrap {
    flex-direction : column;
    gap            : var(--jp-space-2);
  }

} /* end @media max-width: 575px */


/* ──────────────────────────────────────────
 * 📱 VERY SMALL — 320px (iPhone SE)
 * ────────────────────────────────────────── */

@media (max-width: 360px) {

  .jp-container,
  .jp-container-fluid {
    padding-left  : var(--jp-space-3);
    padding-right : var(--jp-space-3);
  }

  .jp-hero-title  { font-size: var(--jp-text-xl); }

  /* Logo 36px masih menyisakan baris navbar ~26px terlalu lebar di 320px. */
  .jp-navbar-brand img { height: 28px; }

  .jp-product-card-name { font-size: 11px; }

  .jp-category-card-name { font-size: 11px; }

  .jp-cart-item {
    grid-template-columns : 56px 1fr auto;
  }

  .jp-cart-item-img {
    width  : 56px;
    height : 56px;
  }

  .jp-summary-total-price { font-size: var(--jp-text-lg); }

}