/* ============================================
   FO2U Design System — v2.1
   60/30/10 Rule:
     60% white/neutral surfaces
     30% navy  — trust, info, links
     10% orange/red — CTAs, prices, urgency
   ============================================ */

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Primary CTA — Add to Cart, Buy Now, Search */
  --color-primary:         #FF5722;
  --color-primary-hover:   #E64A19;
  --color-primary-pressed: #CC3D14;

  /* Trust / Secondary — promo bar, badges, links */
  --color-trust:           #1E3A8A;
  --color-trust-hover:     #1E40AF;
  --color-trust-light:     #EFF6FF;

  /* Price & urgency — prices, flash sale, countdown */
  --color-price:           #DC2626;
  --color-flash:           #DC2626;

  /* Discount badges — soft, on-brand */
  --color-badge-bg:        #FFF4E6;
  --color-badge-text:      #C2410C;
  --color-badge-border:    #FED7AA;

  /* Status */
  --color-success:         #16A34A;
  --color-warning:         #F59E0B;
  --color-danger:          #DC2626;

  /* Neutrals */
  --color-bg:              #FFFFFF;
  --color-surface:         #FFFFFF;
  --color-surface-alt:     #F9FAFB;
  --color-surface-hover:   #F3F4F6;
  --color-border:          #E5E7EB;
  --color-border-light:    #F3F4F6;

  /* Text */
  --color-text-primary:    #1F2937;
  --color-text-secondary:  #6B7280;
  --color-text-muted:      #9CA3AF;

  /* Shadows */
  --shadow-card:    0 1px 2px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,.10);
  --shadow-btn:     0 2px 8px rgba(255,87,34,.35);
  --shadow-btn-hover: 0 4px 16px rgba(255,87,34,.45);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { color: var(--color-text-primary); background: var(--color-surface-alt); }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ── Announcement / Promo Bar ───────────────────────────────────────────── */
.promo-bar {
  background: var(--color-trust);   /* navy — reads as info, not CTA */
  color: #fff;
  font-size: .72rem;
  padding: .45rem 0;
  overflow: hidden;
  max-width: 100vw;                 /* belt — keep the marquee's translateX(-50%) from leaking into document scrollWidth */
}

/* Suspenders — prevent any descendant from extending the document
   horizontally. `clip` (vs. `hidden`) avoids breaking position:sticky
   on the header in modern browsers. Older iOS Safari (<16) and older
   Android WebViews don't support `clip` and silently fall back to
   `visible`, so we add a `@supports` fallback that uses `hidden`. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* ── Marquee ────────────────────────────────────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 30s linear infinite;
  will-change: transform;
}
.animate-marquee:hover { animation-play-state: paused; }

/* ── Category Nav ───────────────────────────────────────────────────────── */
.cat-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.cat-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .6rem .875rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  transition: color .15s;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.cat-nav-link:hover { color: var(--color-text-primary); }
.cat-nav-link.active,
.cat-nav-link:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.cat-nav-link .nav-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  display: none;
}
.cat-nav-link.active .nav-dot { display: block; }

/* All Categories dropdown trigger */
.cat-all-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .875rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface-alt);
  border: none;
  border-right: 1px solid var(--color-border);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  margin-bottom: -1px;
}
.cat-all-btn:hover { background: var(--color-surface-hover); color: var(--color-primary); }
.cat-all-btn.open  { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ── Hero Banner ────────────────────────────────────────────────────────── */
.hero-banner { height: 300px; }
@media (min-width: 640px)  { .hero-banner { height: 370px; } }
@media (min-width: 1024px) { .hero-banner { height: 420px; } }

/* ── Product Cards ──────────────────────────────────────────────────────── */
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* Product image zoom */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform .4s ease; }
.img-zoom:hover img { transform: scale(1.06); }

/* Product price — red, not orange */
.product-price {
  color: var(--color-price);
  font-weight: 800;
  font-size: .9rem;
  line-height: 1.2;
}
.product-price-original {
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-size: .75rem;
  font-weight: 400;
}

/* Discount badge — soft, not competing with CTA */
.badge-discount {
  display: inline-flex;
  align-items: center;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
  border: 1px solid var(--color-badge-border);
  font-size: .68rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 5px;
  line-height: 1.3;
}

/* Flash sale badge — stronger, uses --color-flash */
.badge-flash {
  background: var(--color-flash);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  padding: .15rem .45rem;
  border-radius: 5px;
  line-height: 1.3;
}

/* Stock urgency */
.badge-stock {
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 99px;
}

/* NEW badge */
.badge-new {
  background: var(--color-success);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 99px;
}

/* Overlay ATC on hover */
.product-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.product-card:hover .product-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ── Skeleton Loading ───────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 6px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 700;
  border-radius: .875rem;
  border: none;
  cursor: pointer;
  transition: all .2s ease;
  font-size: .875rem;
  min-height: 48px;          /* WCAG tap target */
  padding: 0 1.5rem;
  white-space: nowrap;
  text-decoration: none;
}

/* Primary CTA — orange, used ONLY for key actions */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-btn-hover);
  transform: translateY(-1px);
}
.btn-primary:active {
  background: var(--color-primary-pressed);
  transform: scale(.97);
  box-shadow: none;
}

/* Secondary — navy, trust actions (wishlist, save, follow) */
.btn-trust {
  background: var(--color-trust);
  color: #fff;
}
.btn-trust:hover { background: var(--color-trust-hover); }

/* Ghost — bordered, neutral */
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-primary);
}
.btn-ghost:hover { background: var(--color-surface-hover); }

/* Qty stepper */
.qty-btn {
  width: 2.25rem; height: 2.25rem;
  border: 1.5px solid var(--color-border);
  border-radius: .5rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.qty-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.qty-input {
  width: 2.5rem; text-align: center;
  border: 1.5px solid var(--color-border);
  border-radius: .5rem;
  font-weight: 700; font-size: .9rem;
  color: var(--color-text-primary);
  padding: .25rem; background: var(--color-surface);
}

/* ── Sticky mobile ATC bar ──────────────────────────────────────────────── */
.sticky-atc {
  position: fixed; bottom: 64px; left: 0; right: 0;
  z-index: 35; padding: .75rem 1rem;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  display: none;
}
@media (max-width: 767px) { .sticky-atc { display: flex; gap: .5rem; } }

/* ── Bottom Nav ─────────────────────────────────────────────────────────── */
.bottom-nav { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem 0;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .15s;
  font-size: .625rem;
  font-weight: 500;
}
.bottom-nav-item.active   { color: var(--color-text-primary); }
.bottom-nav-item.active-cta { color: var(--color-primary); }
.bottom-nav-item:hover    { color: var(--color-text-secondary); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(255,87,34,.12);
  outline: none;
  border-color: var(--color-primary) !important;
}

/* ── Cards (generic) ────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.card-hover { transition: box-shadow .2s, transform .2s; }
.card-hover:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

/* ── Status Badges ──────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .65rem; border-radius: 99px; font-size: .7rem; font-weight: 600; }
.badge-pending    { background: #fef3c7; color: #92400e; }
.badge-processing { background: #dbeafe; color: #1e40af; }
.badge-shipped    { background: #e0f2fe; color: #0369a1; }
.badge-delivered  { background: #d1fae5; color: #065f46; }
.badge-cancelled  { background: #fee2e2; color: #991b1b; }

/* ── Star Ratings ───────────────────────────────────────────────────────── */
.stars { color: #FBBF24; }
.stars .far { color: var(--color-border); }

/* ── Section headings ───────────────────────────────────────────────────── */
.section-heading {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-primary);
  display: flex; align-items: center; gap: .5rem;
}
.section-heading-accent { color: var(--color-primary); }

/* ── Free Shipping Bar ──────────────────────────────────────────────────── */
.shipping-bar { background: var(--color-surface-alt); border-radius: .75rem; padding: .875rem 1rem; border: 1px solid var(--color-border-light); }
.shipping-bar-track { background: var(--color-border); border-radius: 99px; height: 6px; overflow: hidden; }
.shipping-bar-fill  { background: var(--color-success); height: 6px; border-radius: 99px; transition: width .6s cubic-bezier(.34,1.56,.64,1); }

/* ── Line clamps ────────────────────────────────────────────────────────── */
.line-clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Prose ──────────────────────────────────────────────────────────────── */
.prose h1, .prose h2, .prose h3 { font-weight: 700; margin: 1rem 0 .5rem; color: var(--color-text-primary); }
.prose p  { margin: .5rem 0; line-height: 1.75; color: var(--color-text-secondary); }
.prose ul, .prose ol { margin: .5rem 0 .5rem 1.5rem; }
.prose li { margin: .3rem 0; color: var(--color-text-secondary); }

/* ── Toast ──────────────────────────────────────────────────────────────── */
@keyframes toastIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.toast { animation: toastIn .3s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ── Responsive table ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .table-stack thead { display: none; }
  .table-stack tr  { display: block; border-bottom: 1px solid var(--color-border); padding: .5rem 0; }
  .table-stack td  { display: flex; justify-content: space-between; padding: .4rem 1rem; font-size: .8rem; }
  .table-stack td::before { content: attr(data-label); font-weight: 600; color: var(--color-text-secondary); }
}

/* ── Scrollbar hide ─────────────────────────────────────────────────────── */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Gradient text ──────────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Accessibility: focus ring ──────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* =================================================================
 * Country-of-origin navigation
 * Reference: docs/superpowers/specs/2026-05-21-country-navigation-design.md
 * ================================================================= */

.fo2u-country-strip {
  background: linear-gradient(90deg, #fff7ed 0%, #fef2f2 100%);
}

.fo2u-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #fed7aa;
  color: #c2410c;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 250ms cubic-bezier(.2,.8,.2,1),
              background 250ms ease,
              box-shadow 250ms ease,
              border-color 250ms ease;
  user-select: none;
}
.fo2u-country-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.fo2u-country-chip.is-active {
  background: #FF5722;
  color: #ffffff;
  border-color: #FF5722;
  box-shadow: 0 4px 14px rgba(255,87,34,0.35);
  transform: scale(1.04);
}

/* --- Style B: Stagger + wash (filter transition) ----------------- */

@keyframes fo2u-card-in {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fo2u-fade-out-stagger > * {
  animation: fo2u-card-in 400ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

.fo2u-wash-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background: linear-gradient(135deg,
              transparent 0%,
              rgba(255,87,34,0.18) 50%,
              transparent 100%);
  transform: translateX(-100%);
}
.fo2u-wash-overlay.is-active {
  animation: fo2u-wash 800ms ease forwards;
}
@keyframes fo2u-wash {
  0%   { opacity: 0; transform: translateX(-100%); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

/* --- Style C: Theatrical first-arrival (country store) ----------- */

.fo2u-theatrical-arrive > section {
  animation: fo2u-section-in 700ms cubic-bezier(.34,1.56,.64,1) both;
}
.fo2u-theatrical-arrive > section:nth-child(1) { animation-delay:   0ms; }
.fo2u-theatrical-arrive > section:nth-child(2) { animation-delay:  80ms; }
.fo2u-theatrical-arrive > section:nth-child(3) { animation-delay: 160ms; }
.fo2u-theatrical-arrive > section:nth-child(4) { animation-delay: 240ms; }
.fo2u-theatrical-arrive > section:nth-child(5) { animation-delay: 320ms; }
.fo2u-theatrical-arrive > section:nth-child(6) { animation-delay: 400ms; }
@keyframes fo2u-section-in {
  0%   { opacity: 0; transform: translateY(24px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* --- Reduced motion override ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fo2u-country-chip,
  .fo2u-country-chip:hover,
  .fo2u-country-chip.is-active,
  .fo2u-fade-out-stagger > *,
  .fo2u-wash-overlay,
  .fo2u-theatrical-arrive > section {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}