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


@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;
  }

  .jp-navbar-search {
    display : none;
  }

  .jp-btn-rakit {
    padding   : var(--jp-space-2) var(--jp-space-3);
    font-size : var(--jp-text-xs);
  }

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

  .jp-nav-icon-btn {
    width  : 38px;
    height : 38px;
  }


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

  .jp-hero-slide {
    min-height : 400px;
    align-items: flex-end;
  }

  .jp-hero-slide-overlay {
    background : linear-gradient(
      to top,
      rgba(10, 20, 60, 0.95) 0%,
      rgba(10, 20, 60, 0.70) 50%,
      rgba(10, 20, 60, 0.25) 100%
    );
  }

  .jp-hero-content {
    padding    : var(--jp-space-6) 0;
    max-width  : 100%;
    text-align : center;
  }

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

  .jp-hero-desc {
    font-size : var(--jp-text-sm);
    max-width : 100%;
    display   : -webkit-box;
    -webkit-line-clamp : 3;
    -webkit-box-orient : vertical;
    overflow  : hidden;
  }

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

  .jp-hero-actions {
    flex-direction  : column;
    align-items     : stretch;
    gap             : var(--jp-space-2);
  }

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

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

  .jp-hero-stat-item:nth-child(3),
  .jp-hero-stat-item:nth-child(4) {
    border-bottom : none;
  }

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

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

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

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


  /* ──────────────────────────────────────────
   * ✅ 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  : 10px;
    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);
  }

  .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-error-actions,
  .jp-error-actions-500,
  .jp-hero-actions {
    flex-direction : column;
    align-items    : stretch;
  }

  .jp-error-actions .jp-btn,
  .jp-error-actions-500 .jp-btn {
    width           : 100%;
    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); }

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

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

  .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); }

}