/* ============================================================================
 * Storefront design system — Tailwind layers.
 * Admin/POS still ships Bootstrap 4; this file is ONLY pulled in by the
 * store.blade.php layout, so selectors here can be opinionated.
 * ============================================================================ */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------------------------------------------------------------------------
 * Design tokens — light + dark modes.
 * Every token is "r g b" so Tailwind can consume it via the /<alpha-value>
 * pattern configured in tailwind.config.js.
 * ------------------------------------------------------------------------ */
@layer base {
  :root {
    --color-bg-base:     255 255 255;
    --color-bg-surface:  249 250 251;
    --color-bg-elevated: 255 255 255;
    --color-bg-muted:    243 244 246;

    --color-border-subtle: 229 231 235;
    --color-border-strong: 209 213 219;

    --color-fg-primary:   17 24 39;
    --color-fg-secondary: 75 85 99;
    --color-fg-muted:     107 114 128;

    --color-accent-400: 96 165 250;
    --color-accent-500: 59 130 246;
    --color-accent-600: 37 99 235;
    --color-accent-glow: rgba(59, 130, 246, 0.35);

    --color-success: 34 197 94;
    --color-warning: 234 179 8;
    --color-danger:  239 68 68;
    --color-info:    14 165 233;

    --color-badge-deal:   239 68 68;
    --color-badge-new:    34 197 94;
    --color-badge-refurb: 168 85 247;

    color-scheme: light;
  }

  .dark {
    --color-bg-base:     10 14 23;
    --color-bg-surface:  15 20 32;
    --color-bg-elevated: 22 28 43;
    --color-bg-muted:    29 37 55;

    --color-border-subtle: 38 48 71;
    --color-border-strong: 60 72 100;

    --color-fg-primary:   237 242 250;
    --color-fg-secondary: 170 182 203;
    --color-fg-muted:     120 132 152;

    --color-accent-400: 96 165 250;
    --color-accent-500: 59 130 246;
    --color-accent-600: 37 99 235;
    --color-accent-glow: rgba(59, 130, 246, 0.45);

    --color-success: 34 197 94;
    --color-warning: 250 204 21;
    --color-danger:  248 113 113;
    --color-info:    56 189 248;

    color-scheme: dark;
  }

  html { -webkit-text-size-adjust: 100%; }

  body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: rgb(var(--color-bg-base));
    color: rgb(var(--color-fg-primary));
    text-rendering: optimizeLegibility;
  }

  [x-cloak] { display: none !important; }

  :where(:focus-visible) {
    outline: 2px solid rgb(var(--color-accent-500) / 0.6);
    outline-offset: 2px;
    border-radius: 4px;
  }

  h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; }
  h1 { font-size: 2rem; line-height: 1.15; }
  h2 { font-size: 1.5rem; line-height: 1.2; }

  img, svg, video { max-width: 100%; height: auto; display: block; }

  ::selection {
    background: rgb(var(--color-accent-500) / 0.25);
    color: rgb(var(--color-fg-primary));
  }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgb(var(--color-border-strong) / 0.6);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-border-strong)); }
}

/* ---------------------------------------------------------------------------
 * Components — storefront building blocks.
 * ------------------------------------------------------------------------ */
@layer components {

  /* ===== Buttons ===== */
  .btn {
    @apply inline-flex items-center justify-center gap-2 h-10 px-4
           rounded-md text-sm font-medium select-none whitespace-nowrap
           transition-all duration-fast ease-smooth
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
           focus-visible:ring-accent-500 focus-visible:ring-offset-bg-base
           disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
  }
  .btn svg,
  .btn [data-icon] { width: 1rem; height: 1rem; flex-shrink: 0; }

  .btn-primary {
    background: rgb(var(--color-accent-500));
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 0 0 1px rgb(var(--color-accent-600) / 0.35) inset;
  }
  .btn-primary:hover:not(:disabled) { background: rgb(var(--color-accent-600)); }
  .btn-primary:active:not(:disabled) { transform: translateY(1px); }

  .btn-secondary {
    background: rgb(var(--color-bg-elevated));
    color: rgb(var(--color-fg-primary));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .btn-secondary:hover:not(:disabled) {
    background: rgb(var(--color-bg-muted));
    border-color: rgb(var(--color-border-strong));
  }

  .btn-ghost {
    background: transparent;
    color: rgb(var(--color-fg-secondary));
  }
  .btn-ghost:hover:not(:disabled) {
    background: rgb(var(--color-bg-muted));
    color: rgb(var(--color-fg-primary));
  }

  .btn-danger  { background: rgb(var(--color-danger));  color: #fff; }
  .btn-danger:hover:not(:disabled)  { background: rgb(var(--color-danger) / 0.9); }

  .btn-success { background: rgb(var(--color-success)); color: #fff; }
  .btn-success:hover:not(:disabled) { background: rgb(var(--color-success) / 0.9); }

  .btn-warning { background: rgb(var(--color-warning)); color: #1a1a1a; }
  .btn-warning:hover:not(:disabled) { background: rgb(var(--color-warning) / 0.9); }

  .btn-outline {
    background: transparent;
    color: rgb(var(--color-fg-primary));
    border: 1px solid rgb(var(--color-border-strong));
  }
  .btn-outline:hover:not(:disabled) { background: rgb(var(--color-bg-muted)); }

  .btn-outline-danger {
    background: transparent;
    color: rgb(var(--color-danger));
    border: 1px solid rgb(var(--color-danger) / 0.5);
  }
  .btn-outline-danger:hover:not(:disabled) {
    background: rgb(var(--color-danger) / 0.1);
    border-color: rgb(var(--color-danger));
  }

  .btn-sm   { @apply h-8 px-3 text-xs rounded-sm; }
  .btn-lg   { @apply h-12 px-6 text-base rounded-lg; }
  .btn-xl   { @apply h-14 px-8 text-base rounded-lg; }
  .btn-icon { @apply w-10 h-10 p-0; }
  .btn-icon.btn-sm { @apply w-8 h-8; }
  .btn-icon.btn-lg { @apply w-12 h-12; }
  .btn-block { width: 100%; }

  /* ===== Forms ===== */
  .input,
  .select,
  .textarea {
    @apply block w-full h-10 px-3 text-sm rounded-md
           transition-colors duration-fast ease-smooth
           focus:outline-none disabled:opacity-60;
    background: rgb(var(--color-bg-elevated));
    color: rgb(var(--color-fg-primary));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .input::placeholder,
  .textarea::placeholder { color: rgb(var(--color-fg-muted)); }
  .input:focus,
  .select:focus,
  .textarea:focus {
    border-color: rgb(var(--color-accent-500));
    box-shadow: 0 0 0 3px rgb(var(--color-accent-500) / 0.18);
  }
  .input[aria-invalid="true"],
  .input.is-invalid {
    border-color: rgb(var(--color-danger));
    box-shadow: 0 0 0 3px rgb(var(--color-danger) / 0.15);
  }
  .textarea { height: auto; padding-block: 0.625rem; min-height: 6rem; resize: vertical; }
  .select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    padding-right: 2.25rem;
  }
  [dir="rtl"] .select {
    background-position: left 0.625rem center;
    padding-right: 0.75rem;
    padding-left: 2.25rem;
  }

  .form-label {
    @apply block text-sm font-medium mb-1.5;
    color: rgb(var(--color-fg-primary));
  }
  .form-hint {
    @apply text-xs mt-1;
    color: rgb(var(--color-fg-muted));
  }
  .form-error {
    @apply text-xs mt-1;
    color: rgb(var(--color-danger));
  }

  .input-group {
    @apply flex items-stretch;
  }
  .input-group > .input,
  .input-group > .select { border-radius: 0; flex: 1 1 auto; min-width: 0; }
  .input-group > :first-child { border-start-start-radius: 0.375rem; border-end-start-radius: 0.375rem; }
  .input-group > :last-child  { border-start-end-radius:   0.375rem; border-end-end-radius:   0.375rem; }
  .input-group > * + * { margin-inline-start: -1px; }
  .input-group-text {
    @apply inline-flex items-center px-3 text-sm;
    background: rgb(var(--color-bg-muted));
    color: rgb(var(--color-fg-secondary));
    border: 1px solid rgb(var(--color-border-subtle));
  }

  .checkbox,
  .radio {
    @apply w-4 h-4 rounded border align-middle;
    background: rgb(var(--color-bg-elevated));
    border-color: rgb(var(--color-border-strong));
    accent-color: rgb(var(--color-accent-500));
  }
  .radio { border-radius: 9999px; }

  /* ===== Card ===== */
  .card {
    @apply rounded-lg overflow-hidden transition-shadow duration-base ease-smooth;
    background: rgb(var(--color-bg-elevated));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .card-hover {
    transition: transform .18s cubic-bezier(.2,.8,.2,1),
                box-shadow .18s cubic-bezier(.2,.8,.2,1),
                border-color .18s;
  }
  .card-hover:hover {
    border-color: rgb(var(--color-border-strong));
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.25);
    transform: translateY(-2px);
  }
  .card-header {
    @apply px-4 py-3 border-b flex items-center justify-between gap-2;
    border-color: rgb(var(--color-border-subtle));
  }
  .card-body  { @apply p-4; }
  .card-footer {
    @apply px-4 py-3 border-t;
    border-color: rgb(var(--color-border-subtle));
  }

  /* ===== Chip / Badge ===== */
  .chip {
    @apply inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full;
    background: rgb(var(--color-bg-muted));
    color: rgb(var(--color-fg-secondary));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .chip-sm { @apply px-2 py-0.5 text-[11px]; }

  .chip-info    { color: rgb(var(--color-info));    border-color: rgb(var(--color-info)    / 0.35); background: rgb(var(--color-info)    / 0.1); }
  .chip-success { color: rgb(var(--color-success)); border-color: rgb(var(--color-success) / 0.35); background: rgb(var(--color-success) / 0.1); }
  .chip-warning { color: rgb(var(--color-warning)); border-color: rgb(var(--color-warning) / 0.35); background: rgb(var(--color-warning) / 0.1); }
  .chip-danger  { color: rgb(var(--color-danger));  border-color: rgb(var(--color-danger)  / 0.35); background: rgb(var(--color-danger)  / 0.1); }
  .chip-accent  { color: rgb(var(--color-accent-500)); border-color: rgb(var(--color-accent-500) / 0.35); background: rgb(var(--color-accent-500) / 0.1); }

  .chip-x {
    @apply inline-flex items-center justify-center w-4 h-4 ms-1 rounded-full text-[11px] leading-none;
    background: rgb(var(--color-fg-muted) / 0.2);
  }

  /* ===== Alert ===== */
  .alert {
    @apply px-4 py-3 rounded-md border text-sm flex items-start gap-2.5;
  }
  .alert-info    { color: rgb(var(--color-info));    border-color: rgb(var(--color-info)    / 0.35); background: rgb(var(--color-info)    / 0.08); }
  .alert-success { color: rgb(var(--color-success)); border-color: rgb(var(--color-success) / 0.35); background: rgb(var(--color-success) / 0.08); }
  .alert-warning { color: rgb(var(--color-warning)); border-color: rgb(var(--color-warning) / 0.4);  background: rgb(var(--color-warning) / 0.08); }
  .alert-danger  { color: rgb(var(--color-danger));  border-color: rgb(var(--color-danger)  / 0.4);  background: rgb(var(--color-danger)  / 0.08); }

  /* ===== Price ===== */
  .price     { @apply font-mono font-semibold; color: rgb(var(--color-fg-primary)); font-variant-numeric: tabular-nums; }
  .price-lg  { @apply text-2xl; }
  .price-xl  { @apply text-3xl; }
  .price-sm  { @apply text-sm; }
  .price-compare {
    @apply text-sm line-through;
    color: rgb(var(--color-fg-muted));
    font-variant-numeric: tabular-nums;
  }
  .price-deal { color: rgb(var(--color-badge-deal)); }

  /* ===== Section labels ===== */
  .section-kicker {
    @apply inline-block text-xs font-semibold uppercase tracking-widest;
    color: rgb(var(--color-accent-500));
  }
  .section-title {
    @apply text-2xl md:text-3xl font-bold tracking-tight;
    color: rgb(var(--color-fg-primary));
  }
  .section-subtitle {
    @apply text-sm md:text-base mt-1;
    color: rgb(var(--color-fg-secondary));
  }

  .hr-subtle { height: 1px; background: rgb(var(--color-border-subtle)); border: 0; }

  /* ===== Dialog (Alpine-driven modal) ===== */
  .dialog-backdrop {
    @apply absolute inset-0 bg-black/60 backdrop-blur-sm;
  }
  .dialog-panel {
    @apply relative z-10 w-full max-w-lg rounded-xl shadow-xl overflow-hidden my-auto;
    background: rgb(var(--color-bg-elevated));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .dialog-panel.dialog-md { max-width: 36rem; }
  .dialog-panel.dialog-lg { max-width: 48rem; }
  .dialog-panel.dialog-xl { max-width: 64rem; }
  .dialog-header {
    @apply flex items-center justify-between gap-3 px-5 py-4 border-b;
    border-color: rgb(var(--color-border-subtle));
  }
  .dialog-title  { @apply text-base font-semibold; }
  .dialog-body   { @apply p-5; }
  .dialog-footer {
    @apply flex items-center justify-end gap-2 px-5 py-3 border-t;
    background: rgb(var(--color-bg-surface));
    border-color: rgb(var(--color-border-subtle));
  }

  /* ===== Auth modal (modern sign-in) ===== */
  .auth-panel {
    @apply relative z-10 w-full rounded-2xl shadow-2xl overflow-hidden;
    max-width: 28rem;
    margin: auto;
    background: rgb(var(--color-bg-elevated));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .auth-close {
    @apply absolute top-3 end-3 z-10 inline-flex items-center justify-center
           w-9 h-9 rounded-full transition-all;
    background: rgb(var(--color-bg-base) / .65);
    backdrop-filter: blur(8px);
    color: rgb(var(--color-fg-secondary));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .auth-close:hover {
    background: rgb(var(--color-bg-base));
    color: rgb(var(--color-fg-primary));
    transform: rotate(90deg);
  }
  .auth-hero {
    @apply relative px-6 pt-10 pb-6 text-center overflow-hidden;
    background:
      radial-gradient(circle at 20% 0%, rgb(var(--color-accent-500) / .22), transparent 55%),
      radial-gradient(circle at 80% 100%, rgb(var(--color-accent-400) / .15), transparent 60%),
      linear-gradient(180deg, rgb(var(--color-accent-500) / .06), transparent);
    border-bottom: 1px solid rgb(var(--color-border-subtle));
  }
  .auth-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      radial-gradient(rgb(var(--color-accent-500) / .12) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    pointer-events: none;
  }
  .auth-hero-badge {
    @apply relative inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-3;
    background: linear-gradient(135deg,
      rgb(var(--color-accent-500) / .9),
      rgb(var(--color-accent-400) / .9));
    color: white;
    box-shadow:
      0 8px 24px rgb(var(--color-accent-500) / .35),
      inset 0 1px 0 rgb(255 255 255 / .2);
  }
  .auth-hero-title {
    @apply relative text-xl font-bold tracking-tight m-0;
    color: rgb(var(--color-fg-primary));
  }
  .auth-hero-sub {
    @apply relative text-sm mt-1.5 m-0;
    color: rgb(var(--color-fg-secondary));
  }
  .auth-tabs {
    @apply relative flex items-center gap-1 mx-6 mt-6 p-1 rounded-xl;
    background: rgb(var(--color-bg-surface));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .auth-tab {
    @apply relative z-10 flex-1 inline-flex items-center justify-center gap-1.5
           px-3 h-10 rounded-lg text-sm font-medium transition-colors cursor-pointer;
    color: rgb(var(--color-fg-secondary));
    background: transparent;
    border: 0;
  }
  .auth-tab:hover { color: rgb(var(--color-fg-primary)); }
  .auth-tab.is-active { color: rgb(var(--color-fg-primary)); }
  .auth-tab-indicator {
    @apply absolute top-1 bottom-1 start-1 rounded-lg transition-all duration-300 ease-out;
    width: calc(50% - .25rem);
    background: rgb(var(--color-bg-elevated));
    box-shadow: 0 2px 8px rgb(0 0 0 / .08), 0 0 0 1px rgb(var(--color-border-subtle));
  }
  .auth-tab-indicator.right { transform: translateX(100%); }
  html[dir="rtl"] .auth-tab-indicator.right { transform: translateX(-100%); }

  .auth-body { @apply px-6 py-5; }
  .auth-field { @apply block; }
  .auth-label {
    @apply block text-xs font-semibold mb-1.5 tracking-wide uppercase;
    color: rgb(var(--color-fg-secondary));
  }
  .auth-input-wrap { @apply relative; }
  .auth-input-icon {
    @apply absolute top-1/2 -translate-y-1/2 pointer-events-none;
    inset-inline-start: .875rem;
    color: rgb(var(--color-fg-muted));
  }
  .auth-input {
    @apply w-full h-11 rounded-xl text-sm transition-all;
    padding-inline-start: 2.5rem;
    padding-inline-end: .875rem;
    background: rgb(var(--color-bg-surface));
    color: rgb(var(--color-fg-primary));
    border: 1px solid rgb(var(--color-border-subtle));
    outline: none;
  }
  .auth-input::placeholder { color: rgb(var(--color-fg-muted)); }
  .auth-input:hover { border-color: rgb(var(--color-border-strong)); }
  .auth-input:focus {
    border-color: rgb(var(--color-accent-500));
    box-shadow: 0 0 0 4px rgb(var(--color-accent-500) / .15);
    background: rgb(var(--color-bg-elevated));
  }
  .auth-input-pw { padding-inline-end: 2.75rem; }
  .auth-eye {
    @apply absolute top-1/2 -translate-y-1/2 inline-flex items-center justify-center
           w-8 h-8 rounded-lg transition-colors cursor-pointer;
    inset-inline-end: .375rem;
    color: rgb(var(--color-fg-muted));
    background: transparent;
    border: 0;
  }
  .auth-eye:hover {
    color: rgb(var(--color-fg-primary));
    background: rgb(var(--color-bg-muted));
  }
  .auth-submit {
    @apply relative overflow-hidden;
    box-shadow: 0 8px 20px rgb(var(--color-accent-500) / .3);
  }
  .auth-submit:hover { transform: translateY(-1px); }
  .auth-submit:active { transform: translateY(0); }
  .auth-foot {
    @apply flex items-center justify-center px-6 py-3 border-t;
    background: rgb(var(--color-bg-surface));
    border-color: rgb(var(--color-border-subtle));
  }

  /* ===== Drawer (slide-over) ===== */
  .drawer-backdrop { @apply fixed inset-0 z-[70] bg-black/50 backdrop-blur-[2px]; }
  .drawer-panel {
    @apply fixed top-0 bottom-0 z-[71] flex flex-col shadow-2xl overflow-hidden;
    background: rgb(var(--color-bg-base));
    color: rgb(var(--color-fg-primary));
    width: min(420px, 100vw);
  }
  .drawer-panel.drawer-end   { inset-inline-end: 0; }
  .drawer-panel.drawer-start { inset-inline-start: 0; }
  .drawer-panel.drawer-wide  { width: min(560px, 100vw); }
  .drawer-header {
    @apply flex items-center justify-between gap-2 px-4 py-3 border-b;
    border-color: rgb(var(--color-border-subtle));
  }
  .drawer-body { @apply flex-1 overflow-y-auto p-4; }
  .drawer-footer {
    @apply px-4 py-3 border-t;
    border-color: rgb(var(--color-border-subtle));
  }

  /* ===== Table ===== */
  .table { @apply w-full text-sm; border-collapse: collapse; }
  .table th,
  .table td {
    @apply px-3 py-2.5 align-middle;
    border-bottom: 1px solid rgb(var(--color-border-subtle));
  }
  .table thead th {
    @apply text-xs font-semibold uppercase tracking-wider text-start;
    background: rgb(var(--color-bg-surface));
    color: rgb(var(--color-fg-muted));
  }
  .table tbody tr:hover { background: rgb(var(--color-bg-muted) / 0.5); }
  .table-compact th,
  .table-compact td { @apply py-1.5; }
  .table-borderless th,
  .table-borderless td { border-bottom: 0; }

  /* ===== Tabs (pill nav) ===== */
  .tabs {
    @apply inline-flex rounded-lg p-1 gap-1;
    background: rgb(var(--color-bg-muted));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .tab {
    @apply h-8 px-4 rounded-md text-sm font-medium
           transition-colors duration-fast ease-smooth;
    color: rgb(var(--color-fg-secondary));
  }
  .tab:hover { color: rgb(var(--color-fg-primary)); }
  .tab[aria-selected="true"],
  .tab.is-active {
    background: rgb(var(--color-bg-elevated));
    color: rgb(var(--color-fg-primary));
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
  }

  /* ===== Breadcrumbs ===== */
  .crumbs {
    @apply flex items-center gap-2 text-sm;
    color: rgb(var(--color-fg-muted));
  }
  .crumbs a { color: rgb(var(--color-fg-secondary)); }
  .crumbs a:hover { color: rgb(var(--color-accent-500)); }
  .crumbs .sep { color: rgb(var(--color-fg-muted)); }

  /* ===== Pagination ===== */
  .pagination {
    @apply inline-flex items-center gap-1 p-1 rounded-md;
    background: rgb(var(--color-bg-elevated));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .page-link {
    @apply inline-flex items-center justify-center min-w-8 h-8 px-2 rounded-sm
           text-sm font-medium select-none
           transition-colors duration-fast;
    color: rgb(var(--color-fg-secondary));
  }
  .page-link:hover { background: rgb(var(--color-bg-muted)); color: rgb(var(--color-fg-primary)); }
  .page-link.is-active {
    background: rgb(var(--color-accent-500));
    color: #fff;
  }
  .page-link.is-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  /* ===== Toast ===== */
  .toast {
    @apply fixed left-1/2 -translate-x-1/2 z-[9999]
           max-w-[90%] px-4 py-3 rounded-md shadow-lg text-sm
           pointer-events-none transition-all duration-base;
    background: rgb(var(--color-bg-elevated));
    color: rgb(var(--color-fg-primary));
    border: 1px solid rgb(var(--color-border-subtle));
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem);
  }
  @media (min-width: 1024px) {
    .toast { bottom: 1.5rem; }
  }
  .toast-success { border-color: rgb(var(--color-success) / 0.5); color: rgb(var(--color-success)); }
  .toast-warning { border-color: rgb(var(--color-warning) / 0.5); color: rgb(var(--color-warning)); }
  .toast-danger  { border-color: rgb(var(--color-danger)  / 0.5); color: rgb(var(--color-danger)); }

  /* ===== Skeleton ===== */
  .skeleton {
    background: linear-gradient(
      90deg,
      rgb(var(--color-bg-muted)) 0%,
      rgb(var(--color-bg-elevated)) 50%,
      rgb(var(--color-bg-muted)) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 0.375rem;
  }
  @keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ===== Spinner ===== */
  .spinner {
    @apply inline-block w-4 h-4 rounded-full border-2;
    border-color: currentColor;
    border-right-color: transparent;
    animation: spin 0.75s linear infinite;
  }
  .spinner-lg { width: 1.5rem; height: 1.5rem; border-width: 3px; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ===== Product card ===== */
  .product-card {
    @apply relative flex flex-col card card-hover rounded-lg;
  }
  .product-media {
    @apply relative block overflow-hidden;
    aspect-ratio: 1 / 1;
    background: rgb(var(--color-bg-muted));
  }
  .product-media img {
    @apply absolute inset-0 w-full h-full object-cover transition-transform duration-slow ease-smooth;
  }
  .product-card:hover .product-media img { transform: scale(1.04); }
  .product-body {
    @apply p-3 flex flex-col flex-1 gap-1;
  }
  .product-title {
    @apply text-sm font-medium line-clamp-2 leading-tight;
    color: rgb(var(--color-fg-primary));
    min-height: 2.5rem;
  }
  .product-meta {
    @apply text-[11px] uppercase tracking-wider;
    color: rgb(var(--color-fg-muted));
  }

  .stock-dot {
    @apply inline-block w-1.5 h-1.5 rounded-full me-1;
  }
  .stock-dot-ok   { background: rgb(var(--color-success)); }
  .stock-dot-low  { background: rgb(var(--color-warning)); }
  .stock-dot-out  { background: rgb(var(--color-danger)); }
  .stock-dot-pre  { background: rgb(var(--color-info)); }

  /* Hover action stack (quick view, etc.) */
  .product-actions {
    @apply absolute top-2 end-2 flex flex-col gap-1
           opacity-0 translate-x-1 transition-all duration-base ease-smooth;
  }
  .product-card:hover .product-actions,
  .product-card:focus-within .product-actions {
    opacity: 1;
    transform: translateX(0);
  }
  @media (max-width: 767px) {
    .product-actions { opacity: 1; transform: none; }
  }
  .product-action-btn {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-full
           shadow-md backdrop-blur-sm
           transition-all duration-fast ease-smooth;
    background: rgb(var(--color-bg-elevated) / 0.9);
    color: rgb(var(--color-fg-primary));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .product-action-btn:hover {
    background: rgb(var(--color-accent-500));
    color: #fff;
    border-color: rgb(var(--color-accent-500));
  }

  /* Product badge (top-left overlay on card) */
  .product-badge {
    @apply absolute top-2 start-2 inline-flex items-center gap-1
           px-2 py-0.5 rounded-full text-[11px] font-semibold uppercase tracking-wider z-10;
  }
  .product-badge-deal   { background: rgb(var(--color-badge-deal));   color: #fff; }
  .product-badge-new    { background: rgb(var(--color-badge-new));    color: #fff; }
  .product-badge-refurb { background: rgb(var(--color-badge-refurb)); color: #fff; }
  .product-badge-pre    { background: rgb(var(--color-info));         color: #fff; }
  .product-badge-out    { background: rgb(var(--color-danger));       color: #fff; }

  /* ===== Quantity stepper ===== */
  .qty-stepper {
    @apply inline-flex items-center rounded-md overflow-hidden;
    border: 1px solid rgb(var(--color-border-subtle));
    background: rgb(var(--color-bg-elevated));
  }
  .qty-stepper button {
    @apply w-8 h-8 inline-flex items-center justify-center
           transition-colors duration-fast text-base leading-none select-none;
    color: rgb(var(--color-fg-secondary));
  }
  .qty-stepper button:hover:not(:disabled) {
    background: rgb(var(--color-bg-muted));
    color: rgb(var(--color-fg-primary));
  }
  .qty-stepper input {
    @apply w-10 h-8 text-center text-sm bg-transparent border-0 outline-none;
    color: rgb(var(--color-fg-primary));
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
  }
  .qty-stepper input::-webkit-outer-spin-button,
  .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* ===== Facet filter ===== */
  .facet {
    @apply py-4;
    border-top: 1px solid rgb(var(--color-border-subtle));
  }
  .facet:first-child { border-top: 0; padding-top: 0; }
  .facet-title {
    @apply flex items-center justify-between w-full text-sm font-semibold mb-3;
    color: rgb(var(--color-fg-primary));
  }
  .facet-option {
    @apply flex items-center gap-2 py-1.5 text-sm cursor-pointer;
    color: rgb(var(--color-fg-secondary));
  }
  .facet-option:hover { color: rgb(var(--color-fg-primary)); }

  /* ===== Gallery (quick view / product detail) ===== */
  .gallery-main {
    @apply relative overflow-hidden rounded-lg;
    background: rgb(var(--color-bg-muted));
    aspect-ratio: 1;
  }
  .gallery-main img {
    @apply absolute inset-0 w-full h-full object-contain;
  }
  .gallery-thumbs {
    @apply grid grid-cols-5 gap-2 mt-2;
  }
  .gallery-thumb {
    @apply relative overflow-hidden rounded-md cursor-pointer
           transition-all duration-fast border-2;
    aspect-ratio: 1 / 1;
    border-color: transparent;
    background: rgb(var(--color-bg-muted));
  }
  .gallery-thumb.is-active { border-color: rgb(var(--color-accent-500)); }
  .gallery-thumb img { @apply absolute inset-0 w-full h-full object-cover; }

  /* ===== Payment option ===== */
  .pay-option {
    @apply block cursor-pointer rounded-lg transition-all duration-fast;
    border: 2px solid rgb(var(--color-border-subtle));
    background: rgb(var(--color-bg-elevated));
  }
  .pay-option:hover { border-color: rgb(var(--color-border-strong)); }
  .pay-option.is-active {
    border-color: rgb(var(--color-accent-500));
    box-shadow: 0 0 0 3px rgb(var(--color-accent-500) / 0.12);
  }
  .pay-option input { @apply sr-only; }
  .pay-option-header {
    @apply flex items-center justify-between gap-3 p-4;
  }
  .pay-option-icon {
    @apply w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0;
    background: rgb(var(--color-accent-500) / 0.15);
    color: rgb(var(--color-accent-500));
  }
  .pay-option-body {
    @apply hidden px-4 pb-4;
  }
  .pay-option.is-active .pay-option-body { display: block; }

  /* ===== Empty state ===== */
  .empty-state {
    @apply py-16 text-center;
  }
  .empty-state .empty-icon {
    @apply w-14 h-14 mx-auto mb-4 rounded-full flex items-center justify-center;
    background: rgb(var(--color-bg-muted));
    color: rgb(var(--color-fg-muted));
  }
  .empty-state h3 {
    @apply text-lg font-semibold mb-1;
    color: rgb(var(--color-fg-primary));
  }
  .empty-state p {
    @apply text-sm mb-4;
    color: rgb(var(--color-fg-muted));
  }

  /* ===== Badge (for stock/status on product meta) ===== */
  .badge {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-sm text-[11px] font-semibold uppercase tracking-wider;
    background: rgb(var(--color-bg-muted));
    color: rgb(var(--color-fg-secondary));
  }
  .badge-success { background: rgb(var(--color-success) / 0.15); color: rgb(var(--color-success)); }
  .badge-warning { background: rgb(var(--color-warning) / 0.15); color: rgb(var(--color-warning)); }
  .badge-danger  { background: rgb(var(--color-danger)  / 0.15); color: rgb(var(--color-danger)); }
  .badge-info    { background: rgb(var(--color-info)    / 0.15); color: rgb(var(--color-info)); }
  .badge-accent  { background: rgb(var(--color-accent-500) / 0.15); color: rgb(var(--color-accent-500)); }

  /* ===== Stripe Elements container (filled in on checkout) ===== */
  .stripe-card-input {
    @apply block w-full px-3 py-3 rounded-md transition-colors;
    background: rgb(var(--color-bg-elevated));
    border: 1px solid rgb(var(--color-border-subtle));
  }
  .stripe-card-input.StripeElement--focus {
    border-color: rgb(var(--color-accent-500));
    box-shadow: 0 0 0 3px rgb(var(--color-accent-500) / 0.18);
  }
  .stripe-card-input.StripeElement--invalid {
    border-color: rgb(var(--color-danger));
  }

  .hr-divider {
    @apply my-4;
    border: 0;
    height: 1px;
    background: rgb(var(--color-border-subtle));
  }

  /* Support a small "kbd" for keyboard hints */
  .kbd {
    @apply inline-flex items-center justify-center h-5 min-w-5 px-1.5 rounded text-[11px] font-mono;
    background: rgb(var(--color-bg-muted));
    color: rgb(var(--color-fg-muted));
    border: 1px solid rgb(var(--color-border-subtle));
  }
}

/* ---------------------------------------------------------------------------
 * Utilities.
 * ------------------------------------------------------------------------ */
@layer utilities {
  .img-cover   { width: 100%; height: 100%; object-fit: cover; }
  .img-contain { width: 100%; height: 100%; object-fit: contain; }

  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  .stack-v > * + * { margin-top: var(--stack-gap, 0.75rem); }
  .stack-h > * + * { margin-inline-start: var(--stack-gap, 0.5rem); }

  .truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .start-0 { inset-inline-start: 0; }
  .end-0   { inset-inline-end: 0; }

  .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* ---------------------------------------------------------------------------
 * Print — receipts, order detail.
 * ------------------------------------------------------------------------ */
@media print {
  header, footer, nav, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { border: 1px solid #ddd !important; box-shadow: none !important; }
}