/*
 * Syria Market — storefront polish layer (2026-09-30)
 *
 * Loaded LAST on every storefront page. Two responsibilities:
 *   A. Smoothness: page transitions and removal of the most expensive paint
 *      work (fixed backgrounds, permanent GPU layers, 3D hover on touch).
 *   B. Visual refinement built only on the existing theme tokens, so every
 *      colour chosen in "Web settings > Theme" keeps working.
 * No rule here changes behaviour, data or security; it is presentation only.
 */

/* ───────────────────────── A. SMOOTHNESS ───────────────────────── */

/* A1. Page entry without artificial delay (2026-10-07).
       Previously this layer enabled cross-document View Transitions
       (the cross-document "view-transition" at-rule) and dashboard.css faded the
       whole content area in from opacity 0 + blur(5px) after
       DOMContentLoaded (0.22-0.6 s). Both postponed the moment the customer
       can read and tap the new page, and the blur filter repainted the whole
       content area on every frame of the animation. The new page is now
       shown as soon as it is painted; loading feedback lives in
       storefront-navigation.js (progress bar + skeleton only when slow). */
.storefront-v2 .content-area {
  animation: none !important;
}

/* A2. A fixed gradient background forces a full repaint on every scroll
       frame (very visible on mid-range Android phones). Keep the look, drop
       the cost: the gradient scrolls with the page on touch devices. */
@media (hover: none), (max-width: 1024px) {
  body,
  body.storefront-v2 {
    background-attachment: scroll !important;
  }
}

/* A3. The configurable card themes promoted EVERY card to its own GPU layer
       (will-change) and added 3D perspective hovers. On a catalogue with
       dozens of cards this exhausts GPU memory on phones and causes
       scroll jank. Layers are now created only while a card is hovered, and
       the 3D tilt is reserved for real mouse pointers. */
.cats-grid .category-card,
.catalog-unified-card[data-catalog-kind="category"],
.catalog-unified-card[data-catalog-kind="product"],
.catalog-unified-card {
  will-change: auto !important;
}

@media (hover: hover) and (pointer: fine) {
  .cats-grid .category-card:hover,
  .catalog-unified-card:hover {
    will-change: transform !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .cats-grid .category-card,
  .catalog-unified-card[data-catalog-kind="category"],
  .catalog-unified-card[data-catalog-kind="product"],
  .catalog-unified-card {
    transform-style: flat !important;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }
  .cats-grid .category-card:hover,
  .catalog-unified-card[data-catalog-kind="category"]:hover,
  .catalog-unified-card[data-catalog-kind="product"]:hover,
  .catalog-unified-card:hover {
    transform: none !important;
  }
  .cats-grid .category-card .catalog-unified-media,
  .cats-grid .category-card .cat-img-wrap,
  .cats-grid .category-card .cat-icon-wrap,
  .catalog-unified-card .catalog-unified-media,
  .catalog-unified-card .cat-img-wrap,
  .catalog-unified-card .cat-icon-wrap,
  .cats-grid .category-card .catalog-unified-action,
  .cats-grid .category-card .cat-view-btn,
  .catalog-unified-card .catalog-unified-action,
  .catalog-unified-card .cat-view-btn {
    transform: none !important;
    transform-style: flat !important;
  }
  /* Instant, tactile press feedback instead of a hover that never ends. */
  .cats-grid .category-card:active,
  .catalog-unified-card:active,
  .storefront-v2 .gw-card:active,
  .storefront-v2 .order-card:active,
  .storefront-v2 .sidebar-menu li a:active,
  .storefront-v2 .mobile-bottom-nav a:active {
    transform: scale(.975) !important;
    transition-duration: 70ms !important;
  }
}

/* A4. Skip layout/paint work for long lists that are off screen. */
.storefront-v2 .cats-grid > *,
.storefront-v2 .orders-grid > *,
.storefront-v2 .transactions-list > *,
.storefront-v2 .ticket-list > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}

/* A5. Honour the operating-system "reduce motion" preference everywhere. */
@media (prefers-reduced-motion: reduce) {
  .storefront-v2 *,
  .storefront-v2 *::before,
  .storefront-v2 *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────── B. VISUAL REFINEMENT ───────────────────── */
/* Everything below reuses the colours chosen in the admin theme editor
   (--nav-*, --sidebar-*, --bottom-nav-*, --store-theme-*); nothing here
   hard-codes a brand colour, so every preset and the dark mode still work. */

/* B1. Top header — calmer, readable balance pill, consistent control size. */
.storefront-v2 .top-header {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--nav-border, #fff) 35%, transparent),
              0 10px 28px -18px rgba(0, 0, 0, .55) !important;
}
.storefront-v2 .currency-badge.js-live-balance {
  background: color-mix(in srgb, #000 22%, var(--nav-bg, var(--store-theme-surface))) !important;
  border: 1px solid color-mix(in srgb, var(--nav-border, #fff) 55%, transparent) !important;
  color: var(--nav-text, var(--store-theme-text)) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
.storefront-v2 .currency-badge.js-live-balance i {
  color: var(--alert-success, var(--success, #18c78f)) !important;
}
.storefront-v2 .currency-badge.js-live-balance:hover {
  background: color-mix(in srgb, #000 12%, var(--nav-bg, var(--store-theme-surface))) !important;
}

/* B2. Sidebar identity block — nothing may overflow the 280px column. */
.storefront-v2 .sidebar-identity {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  row-gap: 8px !important;
}
.storefront-v2 .sidebar-vip {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .78rem !important;
  letter-spacing: .04em;
  background: color-mix(in srgb, var(--sidebar-indicator, #f6c20f) 16%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--sidebar-indicator, #f6c20f) 45%, transparent);
}
.storefront-v2 .sidebar-username-wrap { min-width: 0; max-width: 100%; }
.storefront-v2 .sidebar-username-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}
.storefront-v2 .sidebar-balance {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.storefront-v2 .sidebar-currency-switch {
  white-space: nowrap !important;
  font-size: .86rem !important;
  min-height: 42px;
  padding: 8px 14px !important;
  border-radius: var(--control-radius, 12px) !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar navigation — softer resting state, clear active indicator. */
.storefront-v2 .sidebar-menu li a {
  position: relative;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease !important;
}
.storefront-v2 .sidebar-menu li.active a,
.storefront-v2 .sidebar-menu li a[aria-current="page"] {
  border-color: transparent !important;
  box-shadow: inset -4px 0 0 var(--sidebar-indicator, var(--store-theme-accent)) !important;
}
.storefront-v2 .sidebar-menu li a:hover i { transform: none !important; }

/* B3. Keyboard focus: one visible, theme-coloured ring everywhere. */
.storefront-v2 a:focus-visible,
.storefront-v2 button:focus-visible,
.storefront-v2 [role="button"]:focus-visible,
.storefront-v2 input:focus-visible,
.storefront-v2 select:focus-visible,
.storefront-v2 textarea:focus-visible {
  outline: 2px solid var(--accent-primary, var(--store-theme-brand)) !important;
  outline-offset: 2px !important;
}

/* B4. Numbers never break in the middle ("4681.55 / 2"). */
.storefront-v2 .stat-card h2,
.storefront-v2 .stat-card .stat-value,
.storefront-v2 .stat-details h2,
.storefront-v2 .wallet-details strong,
.storefront-v2 .js-money {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}
.storefront-v2 .stat-details { min-width: 0; }
/* The value scales with its own card (container query), so a long balance
   shrinks to fit instead of wrapping or being cut off. */
.storefront-v2 .stats-grid .stat-card { container-type: inline-size; }
.storefront-v2 .stat-details h2 {
  font-size: clamp(1rem, 8.5cqi, 1.85rem) !important;
  line-height: 1.2 !important;
}
.storefront-v2 .stat-details h4,
.storefront-v2 .stat-card p,
.storefront-v2 .stat-card small { text-wrap: balance; }

/* B5. Home hero badge was a full-width pale strip; make it a real pill. */
.storefront-v2 .promo-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: fit-content !important;
  max-width: 100%;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--accent-tertiary, #f6c20f) 20%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent-tertiary, #f6c20f) 55%, transparent) !important;
  color: var(--accent-tertiary, #f6c20f) !important;
  font-weight: 800;
  font-size: .85rem;
}

/* B6. Page headings — one consistent style driven by the theme. */
.storefront-v2 .store-page-head { margin-bottom: 24px; }
.storefront-v2 .store-page-head h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 900;
  color: var(--text-primary, var(--store-theme-text));
}
.storefront-v2 .store-page-head h1 > i {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 1.2rem;
  color: var(--button-text, #fff);
  background: var(--theme-button-gradient, var(--accent-primary));
}
.storefront-v2 .store-page-head p {
  margin: 6px 0 0;
  color: var(--text-secondary, var(--store-theme-text-muted));
  font-size: .98rem;
}

/* B7. Add-funds gateways: faster reveal, readable fallback icon, no
       per-card backdrop blur (that blur was the heaviest paint on phones). */
.storefront-v2 .gw-card {
  animation-duration: .26s !important;
  animation-delay: 0s !important;
  background: var(--theme-card-gradient, var(--card-bg)) !important;
  border-color: var(--card-border, rgba(255, 255, 255, .1)) !important;
  border-radius: var(--card-radius, 18px) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.storefront-v2 .gw-card:hover {
  border-color: var(--card-hover-border, var(--accent-primary)) !important;
}
.storefront-v2 .gw-icon-wrapper {
  background: radial-gradient(120% 90% at 50% 20%,
              color-mix(in srgb, var(--accent-primary, #12b8e8) 26%, transparent),
              transparent 70%) !important;
  align-items: flex-start !important;
  padding-top: 18%;
}
.storefront-v2 .gw-icon {
  font-size: 3.4rem !important;
  color: color-mix(in srgb, var(--text-primary, #fff) 55%, transparent) !important;
}
.storefront-v2 .gw-badge,
.storefront-v2 .gw-action-btn,
.storefront-v2 .gw-limit {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.storefront-v2 .gw-action-btn {
  background: color-mix(in srgb, #000 35%, transparent) !important;
  line-height: 1.3;
  text-wrap: balance;
}
.storefront-v2 .gw-card:hover .gw-action-btn,
.storefront-v2 .gw-card.selected .gw-action-btn {
  background: var(--theme-button-gradient, var(--button-bg)) !important;
  border-color: transparent !important;
}

/* B8. Phones: compact headers so the first screen shows content, not a
       banner, and the bottom bar never hides the last row. */
@media (max-width: 768px) {
  .storefront-v2 .content-area {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .storefront-v2 .currency-badge.js-live-balance {
    font-size: .95rem !important;
    padding-inline: 12px !important;
  }

  /* Add-funds hero: heading and balance on a single compact card. */
  .storefront-v2 .add-funds-header,
  .storefront-v2 .funds-hero {
    padding: 18px !important;
    gap: 14px !important;
  }
  .storefront-v2 .add-funds-header h1,
  .storefront-v2 .funds-hero h1 { font-size: 1.45rem !important; }
  .storefront-v2 .add-funds-header p,
  .storefront-v2 .funds-hero p { font-size: .92rem !important; margin-bottom: 0 !important; }

  .storefront-v2 .gateways-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .storefront-v2 .gw-card { min-height: 168px !important; }
  .storefront-v2 .gw-info { padding: 12px !important; gap: 6px !important; }
  .storefront-v2 .gw-action-btn { padding: 8px 10px !important; font-size: .9rem !important; }
  .storefront-v2 .gw-badge { top: 10px !important; left: 10px !important; font-size: .68rem !important; padding: 4px 9px !important; }
  .storefront-v2 .gw-icon { font-size: 2.6rem !important; }

  /* Bottom bar: the centre Home button stays the hero; the active tab is a
     tinted pill in the admin's active colour instead of a second solid block. */
  .storefront-v2 .mobile-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .storefront-v2 .mobile-bottom-nav .nav-item.active {
    background: color-mix(in srgb, var(--bottom-nav-active-bg, var(--store-theme-brand)) 22%, transparent) !important;
    color: var(--bottom-nav-active-text, #fff) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bottom-nav-active-bg, var(--store-theme-brand)) 55%, transparent) !important;
  }
  .storefront-v2 .mobile-bottom-nav .nav-item.active i {
    color: var(--bottom-nav-active-bg, var(--store-theme-brand)) !important;
  }
  html[data-theme="dark"] .storefront-v2 .mobile-bottom-nav .nav-item.active i { filter: brightness(1.25) !important; }

  /* Profile: stats in a 2×2 grid instead of four tall single cards. */
  .storefront-v2 .stats-grid:has(.stat-details) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .storefront-v2 .stats-grid:has(.stat-details) .stat-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 16px !important;
    min-height: 0 !important;
  }
  .storefront-v2 .stats-grid:has(.stat-details) .stat-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.1rem !important;
  }
  .storefront-v2 .stats-grid:has(.stat-details) .stat-details h2 { font-size: clamp(1rem, 11cqi, 1.3rem) !important; }
  .storefront-v2 .stats-grid:has(.stat-details) .stat-details h4 { font-size: .82rem !important; margin: 0 0 4px !important; }
}

@media (max-width: 768px) {
  .storefront-v2 .funds-hero .wallet-stat {
    padding: 12px 14px !important;
    gap: 12px !important;
    width: 100%;
    justify-content: flex-start;
  }
  .storefront-v2 .funds-hero .wallet-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
    border-radius: 12px !important;
  }
  .storefront-v2 .funds-hero .wallet-details strong { font-size: 1.3rem !important; }
  .storefront-v2 .funds-hero .wallet-details span { font-size: .8rem !important; }
}

/* B9. Profile on phones: actions side by side, trust facts as compact rows. */
@media (max-width: 768px) {
  .storefront-v2 .profile-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    width: 100%;
  }
  .storefront-v2 .profile-actions > * {
    width: 100% !important;
    min-height: 46px;
    padding: 10px 12px !important;
    font-size: .95rem !important;
    justify-content: center;
    white-space: nowrap;
  }
  .storefront-v2 .profile-trust-strip { gap: 8px !important; }
  .storefront-v2 .profile-trust-item {
    padding: 12px 14px !important;
    min-height: 0 !important;
    gap: 12px !important;
    align-items: center !important;
  }
  .storefront-v2 .profile-trust-item > i {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
    flex: 0 0 40px;
  }
  .storefront-v2 .profile-trust-item strong { font-size: .92rem !important; }
  .storefront-v2 .profile-trust-item small {
    font-size: .8rem !important;
    overflow-wrap: anywhere;
  }
}

/* B10. Orders summary on phones: horizontal compact tiles, last tile spans
        the row so the grid never leaves an empty hole. */
@media (max-width: 768px) {
  .storefront-v2 .stat-card:has(> .stat-info) {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    min-height: 0 !important;
  }
  .storefront-v2 .stat-card:has(> .stat-info) .stat-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
    font-size: 1rem !important;
  }
  .storefront-v2 .stat-card:has(> .stat-info) .stat-value { font-size: 1.25rem !important; }
  .storefront-v2 .stat-card:has(> .stat-info) .stat-label { font-size: .8rem !important; white-space: nowrap; }
  .storefront-v2 .stat-card:has(> .stat-info):last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* B11. Wallet ledger: large amounts shrink to their card instead of being
        clipped; heading sized for phones. */
.storefront-v2 .stats-grid .stat-card .stat-value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 11cqi, 2rem) !important;
}
@media (max-width: 768px) {
  .storefront-v2 .ledger-header h1 { font-size: 1.6rem !important; line-height: 1.3 !important; }
  .storefront-v2 .ledger-header p { font-size: .92rem !important; }
}

/* Homepage "how it works" block (SEO 2026-10-06): factual store facts with links to policies. */
.home-intro { margin: 18px 0 8px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border-color, rgba(255,255,255,.08)); background: var(--card-bg, rgba(255,255,255,.035)); }
.home-intro h2 { margin: 0 0 6px; font-size: clamp(1.35rem, 3.6vw, 2rem); color: var(--text-primary); letter-spacing: 0; }
.home-intro p { margin: 0 0 10px; color: var(--text-secondary); line-height: 1.8; }
.home-intro__facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--text-secondary); font-size: .95rem; line-height: 1.7; }
.home-intro__facts i { color: var(--accent-primary); margin-inline-end: 6px; }
.home-intro__facts a { color: var(--accent-primary); }
.catalog-guide-link { margin: 6px 0 0; font-weight: 700; }
.catalog-guide-link a { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 3px; }

/* C. Touch targets (2026-10-11 storefront review). Measured at 390 px: the
      bottom-bar links were 67x19 px (only the label was tappable), footer
      links 29 px tall, the sidebar copy button 22 px and the login helper
      links 26-28 px. Tappable areas are now at least 44 px (WCAG 2.5.5). */
.storefront-v2 .mobile-bottom-nav .nav-item {
  align-self: stretch;
  min-height: 44px;
  min-width: 44px;
}
.storefront-v2 footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 4px;
}
.storefront-v2 .sidebar-copy-username {
  min-width: 32px;
  min-height: 32px;
}
.storefront-v2 .auth-links a,
.storefront-v2 .reset-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
/* Visible keyboard focus everywhere in the store (several components reset
   the outline). */
.storefront-v2 a:focus-visible,
.storefront-v2 button:focus-visible,
.storefront-v2 [role="button"]:focus-visible,
.storefront-v2 input:focus-visible,
.storefront-v2 select:focus-visible,
.storefront-v2 textarea:focus-visible {
  outline: 3px solid var(--accent-primary, #22d3ee);
  outline-offset: 2px;
}

/* D. Sidebar store name: the page renders a default name and the runtime
      settings replace it with the configured one; a longer name wrapped to a
      second line and pushed the whole sidebar down (layout shift on every
      page). Two lines are reserved and longer names are clamped. */
.storefront-v2 .sidebar-brand {
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  align-content: center;
}