/**
 * ============================================================
 * JAYA PC — COMPONENTS CSS
 * Template Version : 1.0.0
 * Description      : Semua UI component reusable.
 *                    Topbar, Navbar, Buttons, Cards, Badges,
 *                    Forms, Toast, Modal, Breadcrumb, Pagination,
 *                    Rating, Price, Product Card, dll.
 * Dependency       : variables.css, base.css
 * ============================================================
 */


/* ══════════════════════════════════════════
 * 1. TOPBAR
 * Bar paling atas — promo marquee + kontak
 * ══════════════════════════════════════════ */

.jp-topbar {
  background-color : var(--jp-bg-topbar);
  height           : var(--jp-topbar-height);
  overflow         : hidden;
  position         : relative;
  z-index          : var(--jp-z-fixed);
}

.jp-topbar-inner {
  display     : flex;
  align-items : center;
  height      : 100%;
  gap         : var(--jp-space-8);
}

/* Sisi kiri — marquee promo */
.jp-topbar-marquee {
  flex        : 1;
  overflow    : hidden;
  white-space : nowrap;
}

.jp-topbar-marquee-track {
  display          : inline-flex;
  align-items      : center;
  gap              : var(--jp-space-8);
  animation        : jp-marquee 30s linear infinite;
  white-space      : nowrap;
}

.jp-topbar-marquee-track:hover {
  animation-play-state : paused;
}

.jp-topbar-item {
  display     : inline-flex;
  align-items : center;
  gap         : var(--jp-space-2);
  font-size   : var(--jp-text-xs);
  font-weight : var(--jp-fw-medium);
  color       : rgba(255, 255, 255, 0.90);
  white-space : nowrap;
}

.jp-topbar-item i {
  font-size   : 10px;
  color       : var(--jp-accent);
  flex-shrink : 0;
}

.jp-topbar-item a {
  color       : rgba(255, 255, 255, 0.90);
  font-weight : var(--jp-fw-semibold);
}

.jp-topbar-item a:hover {
  color : var(--jp-accent);
}

.jp-topbar-sep {
  color     : rgba(255, 255, 255, 0.25);
  font-size : var(--jp-text-xs);
  flex-shrink: 0;
}

/* Sisi kanan — info kontak */
.jp-topbar-right {
  display     : flex;
  align-items : center;
  gap         : var(--jp-space-5);
  flex-shrink : 0;
}

.jp-topbar-contact {
  display     : inline-flex;
  align-items : center;
  gap         : var(--jp-space-1);
  font-size   : var(--jp-text-xs);
  color       : rgba(255, 255, 255, 0.80);
  white-space : nowrap;
}

.jp-topbar-contact i {
  font-size : 10px;
  color     : var(--jp-accent);
}

@keyframes jp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ══════════════════════════════════════════
 * 2. NAVBAR
 * ══════════════════════════════════════════ */

.jp-navbar {
  background-color : var(--jp-white);
  height           : var(--jp-navbar-height);
  border-bottom    : var(--jp-border-width) solid var(--jp-border-color);
  position         : sticky;
  top              : 0;
  z-index          : var(--jp-z-sticky);
  transition       : box-shadow var(--jp-transition-base),
                     background-color var(--jp-transition-base);
}

.jp-navbar.scrolled {
  box-shadow : var(--jp-shadow-md);
}

.jp-navbar-inner {
  display     : flex;
  align-items : center;
  height      : 100%;
  gap         : var(--jp-space-6);
}

/* Logo */
.jp-navbar-brand {
  display        : flex;
  align-items    : center;
  flex-shrink    : 0;
  text-decoration: none;
}

.jp-navbar-brand img {
  height     : 36px;
  width      : auto;
  object-fit : contain;
}

/* Nav Menu */
.jp-nav-menu {
  display     : flex;
  align-items : center;
  gap         : var(--jp-space-1);
  list-style  : none;
  margin      : 0;
  padding     : 0;
  height      : 100%;
}

.jp-nav-item {
  position    : relative;
  height      : 100%;
  display     : flex;
  align-items : center;
}

.jp-nav-link {
  display       : flex;
  align-items   : center;
  gap           : var(--jp-space-1);
  padding       : var(--jp-space-2) var(--jp-space-3);
  font-size     : var(--jp-text-sm);
  font-weight   : var(--jp-fw-medium);
  color         : var(--jp-gray-700);
  white-space   : nowrap;
  border-radius : var(--jp-radius-md);
  transition    : color var(--jp-transition-fast),
                  background-color var(--jp-transition-fast);
  height        : 100%;
}

.jp-nav-link:hover,
.jp-nav-link.active {
  color            : var(--jp-primary);
  background-color : var(--jp-primary-subtle);
}

.jp-nav-link i.fa-chevron-down {
  font-size  : 10px;
  transition : transform var(--jp-transition-base);
}

.jp-nav-item:hover .jp-nav-link i.fa-chevron-down {
  transform : rotate(180deg);
}

.jp-nav-link.sale {
  color       : var(--jp-danger);
  font-weight : var(--jp-fw-semibold);
}

.jp-nav-link.sale:hover {
  background-color : var(--jp-danger-subtle);
  color            : var(--jp-danger-dark);
}

/* Mega Dropdown */
.jp-mega-dropdown {
  position       : absolute;
  top            : calc(100% + 1px);
  left           : 50%;
  transform      : translateX(-50%) translateY(8px);
  background     : var(--jp-white);
  border         : var(--jp-border-width) solid var(--jp-border-color);
  border-radius  : var(--jp-radius-xl);
  box-shadow     : var(--jp-shadow-xl);
  padding        : var(--jp-space-6);
  min-width      : 560px;
  opacity        : 0;
  visibility     : hidden;
  transition     : opacity var(--jp-transition-base),
                   transform var(--jp-transition-base),
                   visibility var(--jp-transition-base);
  pointer-events : none;
  z-index        : var(--jp-z-dropdown);
}

.jp-nav-item:hover .jp-mega-dropdown {
  opacity        : 1;
  visibility     : visible;
  transform      : translateX(-50%) translateY(0);
  pointer-events : all;
}

/* First 2 nav items: left-align dropdown so it doesn't overflow the left viewport edge */
.jp-nav-menu > .jp-nav-item:nth-child(1) .jp-mega-dropdown,
.jp-nav-menu > .jp-nav-item:nth-child(2) .jp-mega-dropdown {
  left      : 0;
  transform : translateX(0) translateY(8px);
}
.jp-nav-menu > .jp-nav-item:nth-child(1):hover .jp-mega-dropdown,
.jp-nav-menu > .jp-nav-item:nth-child(2):hover .jp-mega-dropdown {
  transform : translateX(0) translateY(0);
}

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

.jp-mega-dropdown-grid.cols-3 {
  grid-template-columns : repeat(3, 1fr);
}

.jp-mega-item {
  display        : flex;
  align-items    : flex-start;
  gap            : var(--jp-space-3);
  padding        : var(--jp-space-3);
  border-radius  : var(--jp-radius-lg);
  transition     : background-color var(--jp-transition-fast);
  text-decoration: none;
}

.jp-mega-item:hover {
  background-color : var(--jp-primary-subtle);
}

.jp-mega-item-icon {
  width            : 36px;
  height           : 36px;
  border-radius    : var(--jp-radius-md);
  background-color : var(--jp-primary-subtle);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  flex-shrink      : 0;
}

.jp-mega-item-icon i {
  font-size : var(--jp-text-sm);
  color     : var(--jp-primary);
}

.jp-mega-item-title {
  font-size    : var(--jp-text-sm);
  font-weight  : var(--jp-fw-semibold);
  color        : var(--jp-gray-900);
  line-height  : var(--jp-lh-tight);
  margin-bottom: 2px;
}

.jp-mega-item-desc {
  font-size  : var(--jp-text-xs);
  color      : var(--jp-gray-500);
  line-height: var(--jp-lh-snug);
}

.jp-mega-divider {
  grid-column : 1 / -1;
  border-top  : var(--jp-border-width) solid var(--jp-border-color);
  margin      : var(--jp-space-2) 0;
}

.jp-mega-label {
  grid-column   : 1 / -1;
  font-size     : var(--jp-text-xs);
  font-weight   : var(--jp-fw-semibold);
  letter-spacing: var(--jp-ls-wider);
  text-transform: uppercase;
  color         : var(--jp-gray-400);
  padding       : var(--jp-space-1) var(--jp-space-3);
}

/* Navbar Actions kanan */
.jp-navbar-actions {
  display     : flex;
  align-items : center;
  gap         : var(--jp-space-2);
  margin-left : auto;
  flex-shrink : 0;
}

.jp-nav-icon-btn {
  position         : relative;
  width            : 38px;
  height           : 38px;
  border-radius    : var(--jp-radius-md);
  border           : none;
  background       : transparent;
  color            : var(--jp-gray-600);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  font-size        : var(--jp-text-md);
  transition       : background-color var(--jp-transition-fast),
                     color var(--jp-transition-fast);
  cursor           : pointer;
  text-decoration  : none;
}

.jp-nav-icon-btn:hover {
  background-color : var(--jp-primary-subtle);
  color            : var(--jp-primary);
}

.jp-nav-badge {
  position         : absolute;
  top              : 2px;
  right            : 2px;
  min-width        : 16px;
  height           : 16px;
  padding          : 0 4px;
  background-color : var(--jp-accent);
  color            : var(--jp-white);
  font-size        : 10px;
  font-weight      : var(--jp-fw-bold);
  border-radius    : var(--jp-radius-full);
  display          : flex;
  align-items      : center;
  justify-content  : center;
  line-height      : 1;
  pointer-events   : none;
}

.jp-btn-rakit {
  display          : inline-flex;
  align-items      : center;
  gap              : var(--jp-space-2);
  padding          : var(--jp-space-2) var(--jp-space-4);
  background-color : var(--jp-accent);
  color            : var(--jp-white);
  font-size        : var(--jp-text-sm);
  font-weight      : var(--jp-fw-semibold);
  border-radius    : var(--jp-radius-md);
  border           : none;
  text-decoration  : none;
  white-space      : nowrap;
  transition       : background-color var(--jp-transition-fast),
                     box-shadow var(--jp-transition-fast),
                     transform var(--jp-transition-fast);
}

.jp-btn-rakit:hover {
  background-color : var(--jp-accent-dark);
  color            : var(--jp-white);
  box-shadow       : var(--jp-shadow-accent);
  transform        : translateY(-1px);
}

.jp-navbar-search {
  flex      : 1;
  max-width : 320px;
  position  : relative;
}

.jp-navbar-search input {
  width        : 100%;
  height       : 38px;
  padding      : 0 var(--jp-space-4) 0 calc(var(--jp-space-4) + 20px);
  border       : var(--jp-border-width) solid var(--jp-border-color);
  border-radius: var(--jp-radius-full);
  font-size    : var(--jp-text-sm);
  color        : var(--jp-gray-900);
  background   : var(--jp-bg-surface);
  transition   : border-color var(--jp-transition-fast),
                 box-shadow var(--jp-transition-fast);
}

.jp-navbar-search input:focus {
  border-color : var(--jp-primary);
  box-shadow   : 0 0 0 3px rgba(30, 58, 138, 0.10);
  background   : var(--jp-white);
}

.jp-navbar-search input::placeholder { color: var(--jp-gray-400); }

.jp-navbar-search-icon {
  position       : absolute;
  left           : var(--jp-space-3);
  top            : 50%;
  transform      : translateY(-50%);
  color          : var(--jp-gray-400);
  font-size      : var(--jp-text-sm);
  pointer-events : none;
}


/* ══════════════════════════════════════════
 * 3. BUTTONS
 * ══════════════════════════════════════════ */

.jp-btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : var(--jp-space-2);
  padding         : var(--jp-space-3) var(--jp-space-6);
  font-family     : var(--jp-font-primary);
  font-size       : var(--jp-text-sm);
  font-weight     : var(--jp-fw-semibold);
  line-height     : 1;
  border-radius   : var(--jp-radius-md);
  border          : var(--jp-border-width-2) solid transparent;
  cursor          : pointer;
  text-decoration : none;
  white-space     : nowrap;
  transition      : all var(--jp-transition-base);
  letter-spacing  : var(--jp-ls-wide);
  text-transform  : uppercase;
  user-select     : none;
}

.jp-btn:disabled {
  opacity        : 0.55;
  cursor         : not-allowed;
  pointer-events : none;
}

.jp-btn-primary {
  background-color: var(--jp-primary);
  border-color    : var(--jp-primary);
  color           : var(--jp-white);
}
.jp-btn-primary:hover {
  background-color: var(--jp-primary-dark);
  border-color    : var(--jp-primary-dark);
  color           : var(--jp-white);
  box-shadow      : var(--jp-shadow-primary);
  transform       : translateY(-1px);
}

.jp-btn-accent {
  background-color: var(--jp-accent);
  border-color    : var(--jp-accent);
  color           : var(--jp-white);
}
.jp-btn-accent:hover {
  background-color: var(--jp-accent-dark);
  border-color    : var(--jp-accent-dark);
  color           : var(--jp-white);
  box-shadow      : var(--jp-shadow-accent);
  transform       : translateY(-1px);
}

.jp-btn-outline-primary {
  background-color: transparent;
  border-color    : var(--jp-primary);
  color           : var(--jp-primary);
}
.jp-btn-outline-primary:hover {
  background-color: var(--jp-primary);
  color           : var(--jp-white);
  box-shadow      : var(--jp-shadow-primary);
  transform       : translateY(-1px);
}

.jp-btn-outline-accent {
  background-color: transparent;
  border-color    : var(--jp-accent);
  color           : var(--jp-accent);
}
.jp-btn-outline-accent:hover {
  background-color: var(--jp-accent);
  color           : var(--jp-white);
  transform       : translateY(-1px);
}

.jp-btn-ghost {
  background-color: transparent;
  border-color    : transparent;
  color           : var(--jp-primary);
}
.jp-btn-ghost:hover {
  background-color: var(--jp-primary-subtle);
  color           : var(--jp-primary-dark);
}

.jp-btn-white {
  background-color: var(--jp-white);
  border-color    : var(--jp-white);
  color           : var(--jp-primary);
}
.jp-btn-white:hover {
  background-color: var(--jp-gray-100);
  color           : var(--jp-primary-dark);
  transform       : translateY(-1px);
}

.jp-btn-wa {
  background-color: #25D366;
  border-color    : #25D366;
  color           : var(--jp-white);
}
.jp-btn-wa:hover {
  background-color: #1DA851;
  border-color    : #1DA851;
  color           : var(--jp-white);
  transform       : translateY(-1px);
}

.jp-btn-sm  { padding: var(--jp-space-2) var(--jp-space-4);  font-size: var(--jp-text-xs);  }
.jp-btn-lg  { padding: var(--jp-space-4) var(--jp-space-8);  font-size: var(--jp-text-base); }
.jp-btn-xl  { padding: var(--jp-space-5) var(--jp-space-10); font-size: var(--jp-text-md);  }
.jp-btn-block { width: 100%; display: flex; }

.jp-btn-icon    { width: 40px; height: 40px; padding: 0; }
.jp-btn-icon.jp-btn-sm { width: 32px; height: 32px; }

.jp-btn-cart {
  background-color: var(--jp-primary);
  border-color    : var(--jp-primary);
  color           : var(--jp-white);
  padding         : var(--jp-space-2) var(--jp-space-4);
  font-size       : var(--jp-text-xs);
  font-weight     : var(--jp-fw-semibold);
  border-radius   : var(--jp-radius-md);
  border          : none;
  cursor          : pointer;
  display         : inline-flex;
  align-items     : center;
  gap             : var(--jp-space-1);
  transition      : all var(--jp-transition-fast);
  letter-spacing  : var(--jp-ls-wide);
  text-transform  : uppercase;
}
.jp-btn-cart:hover {
  background-color: var(--jp-primary-dark);
  color           : var(--jp-white);
  box-shadow      : var(--jp-shadow-primary);
}


/* ══════════════════════════════════════════
 * 4. BADGES
 * ══════════════════════════════════════════ */

.jp-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 3px;
  padding       : 3px 8px;
  font-size     : 10px;
  font-weight   : var(--jp-fw-bold);
  letter-spacing: var(--jp-ls-wider);
  text-transform: uppercase;
  border-radius : var(--jp-radius-sm);
  line-height   : 1.4;
  white-space   : nowrap;
}

.jp-badge-new      { background-color: var(--jp-badge-new);    color: var(--jp-white); }
.jp-badge-sale     { background-color: var(--jp-badge-sale);   color: var(--jp-white); }
.jp-badge-hot      { background-color: var(--jp-badge-hot);    color: var(--jp-white); }
.jp-badge-coming   { background-color: var(--jp-badge-coming); color: var(--jp-white); }
.jp-badge-office   { background-color: var(--jp-badge-office); color: var(--jp-white); }
.jp-badge-flagship { background-color: var(--jp-gray-900);     color: var(--jp-white); }
.jp-badge-value    { background-color: var(--jp-success-subtle); color: var(--jp-success-dark); border: 1px solid var(--jp-success); }

.jp-discount-badge {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  min-width       : 40px;
  height          : 40px;
  background-color: var(--jp-badge-sale);
  color           : var(--jp-white);
  font-size       : var(--jp-text-xs);
  font-weight     : var(--jp-fw-extrabold);
  border-radius   : var(--jp-radius-full);
  line-height     : 1;
  padding         : 0 var(--jp-space-2);
}


/* ══════════════════════════════════════════
 * 5. PRODUCT CARD
 * ══════════════════════════════════════════ */

.jp-product-card {
  background-color: var(--jp-card-bg);
  border          : var(--jp-border-width) solid var(--jp-card-border);
  border-radius   : var(--jp-card-radius);
  box-shadow      : var(--jp-card-shadow);
  overflow        : hidden;
  transition      : box-shadow var(--jp-transition-base),
                    transform var(--jp-transition-base),
                    border-color var(--jp-transition-base);
  position        : relative;
  display         : flex;
  flex-direction  : column;
  height          : 100%;
}

.jp-product-card:hover {
  box-shadow  : var(--jp-card-shadow-hover);
  transform   : translateY(-3px);
  border-color: var(--jp-primary-subtle);
}

.jp-product-card-img {
  position        : relative;
  background-color: var(--jp-gray-50);
  overflow        : hidden;
  border-bottom   : var(--jp-border-width) solid var(--jp-border-color);
}

.jp-product-card-img img {
  width        : 100%;
  aspect-ratio : 4 / 3;
  object-fit   : contain;
  padding      : var(--jp-space-4);
  transition   : transform var(--jp-transition-slow);
}

.jp-product-card:hover .jp-product-card-img img {
  transform : scale(1.05);
}

.jp-product-card-badges {
  position      : absolute;
  top           : var(--jp-space-3);
  left          : var(--jp-space-3);
  display       : flex;
  flex-direction: column;
  gap           : var(--jp-space-1);
  z-index       : 1;
}

.jp-product-card-wishlist {
  position        : absolute;
  top             : var(--jp-space-3);
  right           : var(--jp-space-3);
  width           : 32px;
  height          : 32px;
  border-radius   : var(--jp-radius-full);
  background-color: var(--jp-white);
  border          : var(--jp-border-width) solid var(--jp-border-color);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : var(--jp-text-sm);
  color           : var(--jp-gray-400);
  cursor          : pointer;
  z-index         : 1;
  transition      : all var(--jp-transition-fast);
  box-shadow      : var(--jp-shadow-sm);
}

.jp-product-card-wishlist:hover,
.jp-product-card-wishlist.active {
  color           : var(--jp-danger);
  border-color    : var(--jp-danger);
  background-color: var(--jp-danger-subtle);
}

.jp-product-card-body {
  padding       : var(--jp-space-4);
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : var(--jp-space-2);
}

.jp-product-card-brand {
  font-size     : var(--jp-text-xs);
  font-weight   : var(--jp-fw-semibold);
  color         : var(--jp-primary);
  text-transform: uppercase;
  letter-spacing: var(--jp-ls-wider);
}

.jp-product-card-name {
  font-size         : var(--jp-text-sm);
  font-weight       : var(--jp-fw-semibold);
  color             : var(--jp-gray-900);
  line-height       : var(--jp-lh-snug);
  display           : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow          : hidden;
  margin-bottom     : 0;
}

.jp-product-card-name a { color: var(--jp-gray-900); text-decoration: none; }
.jp-product-card-name a:hover { color: var(--jp-primary); }

.jp-product-card-specs {
  display   : flex;
  flex-wrap : wrap;
  gap       : var(--jp-space-1);
  margin-top: var(--jp-space-1);
}

.jp-spec-chip {
  display         : inline-flex;
  align-items     : center;
  padding         : 2px 8px;
  background-color: var(--jp-gray-100);
  border-radius   : var(--jp-radius-sm);
  font-size       : 10px;
  font-weight     : var(--jp-fw-medium);
  color           : var(--jp-gray-600);
  white-space     : nowrap;
}

.jp-product-card-price {
  margin-top : auto;
  padding-top: var(--jp-space-3);
  border-top : var(--jp-border-width) solid var(--jp-border-color);
}

.jp-price {
  font-size  : var(--jp-text-lg);
  font-weight: var(--jp-fw-bold);
  color      : var(--jp-price-normal);
  line-height: 1;
}
.jp-price-sale     { color: var(--jp-price-sale); }
.jp-price-original { font-size: var(--jp-text-sm); font-weight: var(--jp-fw-normal); color: var(--jp-price-original); text-decoration: line-through; }

.jp-rating { display: flex; align-items: center; gap: var(--jp-space-1); }
.jp-rating-stars { display: flex; gap: 2px; }
.jp-rating-stars i { font-size: 12px; color: var(--jp-star-filled); }
.jp-rating-stars i.empty { color: var(--jp-star-empty); }
.jp-rating-count { font-size: var(--jp-text-xs); color: var(--jp-gray-500); }

.jp-product-card-footer {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : var(--jp-space-2);
  padding         : var(--jp-space-3) var(--jp-space-4);
  border-top      : var(--jp-border-width) solid var(--jp-border-color);
  background-color: var(--jp-gray-50);
}


/* ══════════════════════════════════════════
 * 6. CATEGORY CARD
 * ══════════════════════════════════════════ */

.jp-category-card {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : var(--jp-space-3);
  padding         : var(--jp-space-5) var(--jp-space-4);
  background-color: var(--jp-white);
  border          : var(--jp-border-width) solid var(--jp-border-color);
  border-radius   : var(--jp-radius-xl);
  text-decoration : none;
  text-align      : center;
  transition      : all var(--jp-transition-base);
  box-shadow      : var(--jp-shadow-sm);
  height          : 100%;
}

.jp-category-card:hover {
  border-color: var(--jp-primary);
  box-shadow  : var(--jp-shadow-card-hover);
  transform   : translateY(-4px);
}

.jp-category-card-img {
  width      : 64px;
  height     : 64px;
  object-fit : contain;
  transition : transform var(--jp-transition-base);
}

.jp-category-card:hover .jp-category-card-img { transform: scale(1.10); }

.jp-category-card-name {
  font-size  : var(--jp-text-sm);
  font-weight: var(--jp-fw-semibold);
  color      : var(--jp-gray-800);
  line-height: var(--jp-lh-tight);
  margin     : 0;
}

.jp-category-card-count {
  font-size : var(--jp-text-xs);
  color     : var(--jp-gray-500);
}


/* ══════════════════════════════════════════
 * 7. FORM COMPONENTS
 * ══════════════════════════════════════════ */

.jp-form-group  { margin-bottom: var(--jp-space-4); }

.jp-form-label {
  display      : block;
  font-size    : var(--jp-text-sm);
  font-weight  : var(--jp-fw-medium);
  color        : var(--jp-gray-700);
  margin-bottom: var(--jp-space-2);
}

.jp-form-label .required { color: var(--jp-danger); margin-left: 2px; }

.jp-form-control {
  width           : 100%;
  height          : 44px;
  padding         : 0 var(--jp-space-4);
  font-family     : var(--jp-font-primary);
  font-size       : var(--jp-text-sm);
  color           : var(--jp-gray-900);
  background-color: var(--jp-white);
  border          : var(--jp-border-width) solid var(--jp-border-color);
  border-radius   : var(--jp-radius-md);
  transition      : border-color var(--jp-transition-fast),
                    box-shadow var(--jp-transition-fast);
  appearance      : none;
}

.jp-form-control:focus {
  border-color: var(--jp-primary);
  box-shadow  : 0 0 0 3px rgba(30, 58, 138, 0.12);
  outline     : none;
}

.jp-form-control::placeholder { color: var(--jp-gray-400); }
.jp-form-control.is-invalid   { border-color: var(--jp-danger); }
.jp-form-control.is-valid     { border-color: var(--jp-success); }

textarea.jp-form-control {
  height    : auto;
  padding   : var(--jp-space-3) var(--jp-space-4);
  resize    : vertical;
  min-height: 120px;
}

.jp-form-select {
  background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat  : no-repeat;
  background-position: right var(--jp-space-4) center;
  padding-right      : var(--jp-space-10);
  cursor             : pointer;
}

.jp-invalid-feedback {
  display   : block;
  font-size : var(--jp-text-xs);
  color     : var(--jp-danger);
  margin-top: var(--jp-space-1);
}

.jp-qty-input {
  display     : flex;
  align-items : center;
  border      : var(--jp-border-width) solid var(--jp-border-color);
  border-radius: var(--jp-radius-md);
  overflow    : hidden;
  width       : fit-content;
}

.jp-qty-btn {
  width           : 36px;
  height          : 36px;
  border          : none;
  background-color: var(--jp-gray-100);
  color           : var(--jp-gray-700);
  font-size       : var(--jp-text-md);
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : background-color var(--jp-transition-fast);
  flex-shrink     : 0;
}

.jp-qty-btn:hover { background-color: var(--jp-primary-subtle); color: var(--jp-primary); }

.jp-qty-value {
  width       : 48px;
  height      : 36px;
  border      : none;
  border-left : var(--jp-border-width) solid var(--jp-border-color);
  border-right: var(--jp-border-width) solid var(--jp-border-color);
  text-align  : center;
  font-size   : var(--jp-text-sm);
  font-weight : var(--jp-fw-semibold);
  color       : var(--jp-gray-900);
  background  : var(--jp-white);
}


/* ══════════════════════════════════════════
 * 8. TOAST NOTIFICATION
 * ══════════════════════════════════════════ */

.jp-toast-container {
  position      : fixed;
  bottom        : var(--jp-space-6);
  right         : var(--jp-space-6);
  z-index       : var(--jp-z-toast);
  display       : flex;
  flex-direction: column;
  gap           : var(--jp-space-3);
  max-width     : 340px;
  width         : 100%;
}

.jp-toast {
  display         : flex;
  align-items     : flex-start;
  gap             : var(--jp-space-3);
  padding         : var(--jp-space-4);
  background-color: var(--jp-white);
  border-radius   : var(--jp-radius-lg);
  box-shadow      : var(--jp-shadow-xl);
  border-left     : 4px solid var(--jp-primary);
  animation       : jp-toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jp-toast.success { border-left-color: var(--jp-success); }
.jp-toast.error   { border-left-color: var(--jp-danger);  }
.jp-toast.warning { border-left-color: var(--jp-warning); }

.jp-toast-icon {
  width           : 32px;
  height          : 32px;
  border-radius   : var(--jp-radius-full);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : var(--jp-text-sm);
  flex-shrink     : 0;
  background-color: var(--jp-primary-subtle);
  color           : var(--jp-primary);
}

.jp-toast.success .jp-toast-icon { background: var(--jp-success-subtle); color: var(--jp-success); }
.jp-toast.error   .jp-toast-icon { background: var(--jp-danger-subtle);  color: var(--jp-danger);  }
.jp-toast.warning .jp-toast-icon { background: var(--jp-warning-subtle); color: var(--jp-warning); }

.jp-toast-body  { flex: 1; }
.jp-toast-title { font-size: var(--jp-text-sm); font-weight: var(--jp-fw-semibold); color: var(--jp-gray-900); margin-bottom: 2px; }
.jp-toast-msg   { font-size: var(--jp-text-xs); color: var(--jp-gray-500); }

.jp-toast-close {
  background : none;
  border     : none;
  color      : var(--jp-gray-400);
  font-size  : var(--jp-text-sm);
  cursor     : pointer;
  padding    : 0;
  line-height: 1;
  flex-shrink: 0;
  transition : color var(--jp-transition-fast);
}
.jp-toast-close:hover { color: var(--jp-gray-700); }

@keyframes jp-toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}


/* ══════════════════════════════════════════
 * 9. BREADCRUMB
 * ══════════════════════════════════════════ */

.jp-breadcrumb-wrap {
  padding         : var(--jp-space-3) 0;
  background-color: var(--jp-bg-surface);
  border-bottom   : var(--jp-border-width) solid var(--jp-border-color);
}

.jp-breadcrumb-list {
  display    : flex;
  align-items: center;
  flex-wrap  : wrap;
  gap        : var(--jp-space-2);
  list-style : none;
  margin     : 0;
  padding    : 0;
}

.jp-breadcrumb-item {
  display    : flex;
  align-items: center;
  gap        : var(--jp-space-2);
  font-size  : var(--jp-text-sm);
  color      : var(--jp-gray-500);
}

.jp-breadcrumb-item a { color: var(--jp-gray-500); transition: color var(--jp-transition-fast); }
.jp-breadcrumb-item a:hover { color: var(--jp-primary); }
.jp-breadcrumb-item.active { color: var(--jp-gray-900); font-weight: var(--jp-fw-medium); }

.jp-breadcrumb-item::after        { content: '/'; color: var(--jp-gray-300); font-size: var(--jp-text-xs); }
.jp-breadcrumb-item:last-child::after { display: none; }


/* ══════════════════════════════════════════
 * 10. PAGINATION
 * ══════════════════════════════════════════ */

.jp-pagination {
  display    : flex;
  align-items: center;
  gap        : var(--jp-space-1);
  list-style : none;
  margin     : 0;
  padding    : 0;
}

.jp-page-item .jp-page-link {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 38px;
  height          : 38px;
  border-radius   : var(--jp-radius-md);
  border          : var(--jp-border-width) solid var(--jp-border-color);
  background-color: var(--jp-white);
  color           : var(--jp-gray-600);
  font-size       : var(--jp-text-sm);
  font-weight     : var(--jp-fw-medium);
  text-decoration : none;
  transition      : all var(--jp-transition-fast);
}

.jp-page-item .jp-page-link:hover {
  border-color    : var(--jp-primary);
  color           : var(--jp-primary);
  background-color: var(--jp-primary-subtle);
}

.jp-page-item.active .jp-page-link {
  background-color: var(--jp-primary);
  border-color    : var(--jp-primary);
  color           : var(--jp-white);
}

.jp-page-item.disabled .jp-page-link {
  opacity       : 0.4;
  pointer-events: none;
}


/* ══════════════════════════════════════════
 * 11. BRAND MARQUEE
 * ══════════════════════════════════════════ */

.jp-brand-marquee {
  overflow        : hidden;
  padding         : var(--jp-space-6) 0;
  border-top      : var(--jp-border-width) solid var(--jp-border-color);
  border-bottom   : var(--jp-border-width) solid var(--jp-border-color);
  background-color: var(--jp-bg-surface);
}

.jp-brand-track {
  display    : flex;
  align-items: center;
  gap        : var(--jp-space-12);
  animation  : jp-marquee 25s linear infinite;
  white-space: nowrap;
  width      : max-content;
}

.jp-brand-track:hover { animation-play-state: paused; }

.jp-brand-item {
  display    : flex;
  align-items: center;
  flex-shrink: 0;
  opacity    : 0.55;
  transition : opacity var(--jp-transition-base);
  filter     : grayscale(100%);
}

.jp-brand-item:hover { opacity: 1; filter: grayscale(0%); }

.jp-brand-item img { height: 28px; width: auto; object-fit: contain; }

.jp-brand-item span {
  font-size     : var(--jp-text-lg);
  font-weight   : var(--jp-fw-extrabold);
  color         : var(--jp-gray-500);
  letter-spacing: var(--jp-ls-tight);
}


/* ══════════════════════════════════════════
 * 12. TRUST BAR
 * ══════════════════════════════════════════ */

.jp-trust-item {
  display    : flex;
  align-items: center;
  gap        : var(--jp-space-3);
  padding    : var(--jp-space-5) var(--jp-space-4);
}

.jp-trust-icon {
  width           : 44px;
  height          : 44px;
  border-radius   : var(--jp-radius-lg);
  background-color: var(--jp-primary-subtle);
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-shrink     : 0;
}

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

.jp-trust-text-title { font-size: var(--jp-text-sm); font-weight: var(--jp-fw-semibold); color: var(--jp-gray-900); margin-bottom: 2px; }
.jp-trust-text-desc  { font-size: var(--jp-text-xs); color: var(--jp-gray-500); margin: 0; }


/* ══════════════════════════════════════════
 * 13. SEE ALL LINK
 * ══════════════════════════════════════════ */

.jp-see-all {
  display    : inline-flex;
  align-items: center;
  gap        : var(--jp-space-1);
  font-size  : var(--jp-text-sm);
  font-weight: var(--jp-fw-semibold);
  color      : var(--jp-primary);
  text-decoration: none;
  transition : gap var(--jp-transition-fast), color var(--jp-transition-fast);
}

.jp-see-all:hover { color: var(--jp-primary-dark); gap: var(--jp-space-2); }


/* ══════════════════════════════════════════
 * 14. BACK TO TOP & WA FLOAT
 * ══════════════════════════════════════════ */

.jp-back-to-top {
  position        : fixed;
  bottom          : var(--jp-space-6);
  right           : var(--jp-space-6);
  width           : 44px;
  height          : 44px;
  background-color: var(--jp-primary);
  color           : var(--jp-white);
  border          : none;
  border-radius   : var(--jp-radius-md);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : var(--jp-text-md);
  cursor          : pointer;
  z-index         : var(--jp-z-fixed);
  box-shadow      : var(--jp-shadow-lg);
  opacity         : 0;
  visibility      : hidden;
  transform       : translateY(12px);
  transition      : all var(--jp-transition-base);
}

.jp-back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

.jp-back-to-top:hover {
  background-color: var(--jp-primary-dark);
  transform       : translateY(-2px);
  box-shadow      : var(--jp-shadow-primary);
}

.jp-wa-float {
  position        : fixed;
  bottom          : calc(var(--jp-space-6) + 44px + var(--jp-space-3));
  right           : var(--jp-space-6);
  width           : 44px;
  height          : 44px;
  background-color: #25D366;
  color           : var(--jp-white);
  border-radius   : var(--jp-radius-md);
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : var(--jp-text-xl);
  text-decoration : none;
  box-shadow      : var(--jp-shadow-lg);
  z-index         : var(--jp-z-fixed);
  transition      : all var(--jp-transition-base);
}

.jp-wa-float:hover {
  background-color: #1DA851;
  color           : var(--jp-white);
  transform       : translateY(-2px) scale(1.05);
  box-shadow      : 0 8px 24px rgba(37, 211, 102, 0.40);
}