/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 14px;border-radius:var(--radius-sm);
  font-weight:600;font-size:13px;
  transition:transform .15s var(--ease), background .2s var(--ease), opacity .2s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn .lucide{width:16px;height:16px}
.btn-primary{background:var(--c-primary);color:#fff}
.btn-primary:hover{background:var(--c-primary-2)}
.btn-dark{background:var(--c-text);color:var(--c-bg)}
.btn-ghost{background:var(--c-surface-2);color:var(--c-text)}
.btn-outline{border:1px solid var(--c-border);color:var(--c-text)}
.btn-block{width:100%}
.btn-sm{padding:8px 12px;font-size:12px}
.btn-icon{padding:8px;aspect-ratio:1}
.icon-btn{
  width:36px;height:36px;border-radius:10px;
  display:inline-grid;place-items:center;
  background:var(--c-surface-2);color:var(--c-text);
}
.icon-btn .lucide{width:18px;height:18px}

/* Inputs */
.input-group{position:relative;display:flex;align-items:center}
.input{
  width:100%;padding:12px 40px 12px 14px;
  border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-text);
  border-radius:var(--radius);outline:none;
  transition:border-color .2s var(--ease);
  font-size:14px;
}
.input:focus{border-color:var(--c-primary)}
.input-icon{position:absolute;inset-inline-end:12px;width:16px;height:16px;color:var(--c-text-3);pointer-events:none}
.input-suffix{position:absolute;inset-inline-start:8px;padding:6px;color:var(--c-text-2)}

/* Cards / surfaces */
.card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-xs)}
.section{padding:14px 16px}
.section-title{font-size:13px;font-weight:700;color:var(--c-text-2);margin:14px 16px 8px}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:var(--c-surface-2);color:var(--c-text-2);font-size:11px;font-weight:600}
.chip-success{background:rgba(22,163,74,.12);color:var(--c-success)}
.chip-warning{background:rgba(217,119,6,.12);color:var(--c-warning)}
.chip-danger{background:rgba(220,38,38,.12);color:var(--c-danger)}

/* Toast */
.toast{
  position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--c-text);color:var(--c-bg);padding:10px 16px;border-radius:999px;
  font-size:13px;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);z-index:99;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- Skeleton loader -------------------------------------------------- */
.skel{
  background:linear-gradient(90deg, var(--c-surface-2) 0%, var(--c-surface) 50%, var(--c-surface-2) 100%);
  background-size:200% 100%;animation:jp-shimmer 1.4s linear infinite;border-radius:8px;
}
.skel-card{padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--c-bg);border-radius:12px;box-shadow:var(--shadow-xs);min-height:140px}
.skel-face{width:48px;height:48px;border-radius:10px}
.skel-line{height:12px}
.skel-line.w70{width:70%}
.skel-line.w50{width:50%}
.skel-line.w30{width:30%}
@keyframes jp-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.skel{animation:none}}

.loader-banner{
  display:flex;align-items:center;gap:10px;padding:12px 14px;margin:12px 16px;border-radius:12px;
  background:var(--c-surface-2);color:var(--c-text-2);font-size:13px;font-weight:600
}
.loader-banner i{width:18px;height:18px;animation:jp-spin 1s linear infinite}
@keyframes jp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.loader-banner i{animation:none}}

.empty-state{padding:40px 20px;text-align:center;color:var(--c-text-3);display:flex;flex-direction:column;align-items:center;gap:12px}
.empty-state .lucide{width:36px;height:36px}

/* ---- PC view chrome --------------------------------------------------- */
/* Shared sidebar shown when localStorage.jp-view === "pc".
   Mobile pages (cards/checkout/account/home/mobile-store) include
   sidebar_pc.php; CSS hides it by default and shows it under data-view="pc".
   store-pc.php has its own custom 3-column shell and doesn't include the
   shared sidebar. */
.pc-frame{display:none}
html[data-view="pc"] .pc-frame{
  display:flex;flex-direction:column;gap:10px;
  position:fixed;top:0;bottom:0;inset-inline-end:0;width:240px;
  background:var(--c-bg);border-inline-start:1px solid var(--c-border);
  padding:18px 14px;z-index:60;overflow-y:auto;
}
.pc-frame__brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;border-bottom:1px solid var(--c-border)}
.pc-frame__brand img{width:34px;height:34px;border-radius:8px}
.pc-frame__brand strong{font-size:15px}
.pc-frame__nav{display:flex;flex-direction:column;gap:2px}
.pc-frame__nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:var(--c-text-2);font-weight:600;font-size:13px;transition:background .15s var(--ease);
}
.pc-frame__nav a:hover{background:var(--c-surface-2)}
.pc-frame__nav a[aria-current="page"]{background:rgba(200,16,46,.08);color:var(--c-primary)}
.pc-frame__nav a .lucide{width:18px;height:18px}

/* When PC view is active on shared mobile pages, push body off the sidebar
   and hide the sticky mobile chrome (bottom nav + sticky red top header). */
html[data-view="pc"] body{padding-inline-end:240px}
html[data-view="pc"] .nav-bar{display:none}
/* Keep .m-hd visible on PC — the store-page CSS itself decides whether to
   show it; suppressing it globally also hid the back-arrow on subpages. */

/* Constrain centred content on PC for readability */
html[data-view="pc"] main,
html[data-view="pc"] .summary,
html[data-view="pc"] .profile,
html[data-view="pc"] .menu,
html[data-view="pc"] .hero,
html[data-view="pc"] .quick {
  max-width: 900px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}