/* Warm artisan theme: terracotta, cream, and charcoal */
:root {
  --brand-primary: #B45309;
  --brand-primary-dark: #92400E;
  --brand-primary-light: #FEF3C7;
  --brand-bg: #FFFBF0;
  --brand-text: #1C1917;
  --brand-border: #292524;
  --brand-success: #047857;
  --brand-success-light: #D1FAE5;
  --brand-accent: #0F766E;
}

html, body {
  height: 100%;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--brand-text);
  background-color: var(--brand-bg);
  background-image:
    linear-gradient(to right, rgba(41, 37, 36, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(41, 37, 36, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Outlined pill heading */
.section-label {
  display: inline-block;
  background: #fff;
  border: 2px solid var(--brand-border);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--brand-border);
}

/* Outlined card style */
.outlined-card {
  border: 2px solid var(--brand-border);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--brand-border);
  background: #fff;
}

/* Primary CTA button */
.btn-yellow {
  background: var(--brand-primary);
  color: #fff;
  border: 2px solid var(--brand-border);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--brand-border);
  padding: 10px 16px;
  font-weight: 700;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn-yellow:hover { background: var(--brand-primary-dark); transform: translateY(-2px); box-shadow: 5px 5px 0 var(--brand-border); }
.btn-yellow:active { transform: translateY(0); box-shadow: 2px 2px 0 var(--brand-border); }

/* Secondary pill button */
.btn-pill {
  background: #fff;
  border: 2px solid var(--brand-border);
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 600;
  box-shadow: 2px 2px 0 var(--brand-border);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn-pill:hover { background: var(--brand-primary-light); transform: translateY(-1px); box-shadow: 4px 4px 0 var(--brand-border); }
.btn-pill:active { transform: translateY(0); box-shadow: 2px 2px 0 var(--brand-border); }

/* Navbar band */
.nav-band { background: var(--brand-primary); border-bottom: 3px solid var(--brand-border); }
.nav-pill { background:#fff; border:2px solid var(--brand-border); border-radius:12px; padding:6px 12px; font-weight:600; box-shadow:2px 2px 0 var(--brand-border); transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.nav-pill:hover { background:var(--brand-primary-light); transform: translateY(-1px); box-shadow: 4px 4px 0 var(--brand-border); }
.nav-pill:active { transform: translateY(0); box-shadow: 2px 2px 0 var(--brand-border); }

/* Prevent header squeeze on narrow screens */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
@media (max-width: 640px){
  .nav-pill { padding: 4px 10px; }
}

/* Issuer logo block */
.issuer-tile { background:#fff; border-width:3px; border-color: var(--brand-border); box-shadow:6px 6px 0 var(--brand-border); }
.issuer-logo { height:56px; object-fit:contain; }
/* Text-based avatar for issuers */
.avatar { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border:3px solid var(--brand-border); border-radius:9999px; background:#fff; font-weight:800; box-shadow:4px 4px 0 var(--brand-border); }

/* Breadcrumb */
.breadcrumb { color:#574b45; font-size:12px; display:flex; align-items:center; gap:8px; justify-content:center; }
.breadcrumb .sep { width:16px; height:16px; opacity:0.8; }

/* Hero stacked cards illustration */
.hero-cards { position: relative; height: 260px; }
.hero-card {
  position:absolute; width: 320px; height: 180px; background: var(--brand-primary-light);
  border: 3px solid var(--brand-border); border-radius: 16px; box-shadow: 8px 8px 0 var(--brand-border);
}
.hero-card.back { background:#fff; right: 16px; top: 0; }
.hero-card.front { left: 24px; bottom: 0; }
.hero-card .chip { width:40px; height:28px; border:2px solid var(--brand-border); border-radius:6px; background:#fff; display:inline-block; }
.hero-card .text { font-weight:800; letter-spacing:1px; }

/* Category image tiles */
.cat-tile { overflow:hidden; border-width:3px; border-color: var(--brand-border); box-shadow:6px 6px 0 var(--brand-border); transition: transform 150ms ease; }
.cat-tile:hover { transform: scale(1.01); }
.cat-img { height:120px; width:100%; object-fit:cover; border-bottom:2px solid var(--brand-border); background:#fff; }
.cat-title { font-weight:800; }

/* Product card */
.product-card { transition: transform 180ms ease, box-shadow 180ms ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--brand-border); }
.product-card .product-img { transition: transform 200ms ease; }
.product-card:hover .product-img { transform: scale(1.02); }

/* Product image inside tiles */
.product-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: 3px solid var(--brand-border);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--brand-border);
  display: block;
  background: #fff;
}

/* Collection thumbnail image */
.collection-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 3px solid var(--brand-border);
  border-radius: 9999px;
  box-shadow: 4px 4px 0 var(--brand-border);
  display: block;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.issuer-tile:hover .collection-img { transform: scale(1.05); box-shadow: 6px 6px 0 var(--brand-border); }

/* Card image inside tiles: show full image without cropping (legacy) */
.card-img {
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  display: block;
  margin: 0 auto;
}

/* Stylized dummy card (used as fallback) */
.dummy-card { width: 100%; height: 160px; background: var(--brand-primary-light); border:3px solid var(--brand-border); border-radius: 16px; box-shadow: 6px 6px 0 var(--brand-border); padding: 12px; display:flex; flex-direction:column; justify-content:space-between; }
.dummy-chip { width:40px; height:28px; border:2px solid var(--brand-border); border-radius:6px; background:#fff; display:inline-block; }
.dummy-brand { font-weight:800; border:2px solid var(--brand-border); border-radius:9999px; padding:6px 10px; background:#fff; box-shadow:3px 3px 0 var(--brand-border); }
.dummy-number { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing:2px; font-weight:700; }
.dummy-footer { height:10px; border-top:2px dashed var(--brand-border); opacity:0.7; }

/* Primary info band */
.info-band { background: var(--brand-primary); border-top: 3px solid var(--brand-border); border-bottom: 3px solid var(--brand-border); }
.info-box { border:2px solid var(--brand-border); box-shadow:3px 3px 0 var(--brand-border); background:var(--brand-primary-light); border-radius: 0.5rem; }

/* Footer band */
.footer-band { background: var(--brand-primary); border-top: 3px solid var(--brand-border); }

/* Animations */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 220ms ease-out forwards; }

/* Line clamp utility (Tailwind plugin not always loaded via CDN) */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Floating CTA */
.floating-cta { position: fixed; right: 16px; bottom: 16px; z-index: 50; }
.floating-cta a { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border:3px solid var(--brand-border); border-radius:9999px; background:#fff; box-shadow:6px 6px 0 var(--brand-border); transition: transform 120ms ease, box-shadow 120ms ease; }
.floating-cta a:hover { transform: translateY(-2px); box-shadow: 8px 8px 0 var(--brand-border); }

/* Back-to-top button */
.back-to-top { position: fixed; right: 80px; bottom: 16px; z-index: 50; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:3px solid var(--brand-border); border-radius:9999px; background: var(--brand-primary); color:#fff; box-shadow:4px 4px 0 var(--brand-border); font-weight:800; font-size:1.25rem; cursor:pointer; opacity:0; pointer-events:none; transition: opacity 200ms ease, transform 120ms ease, box-shadow 120ms ease; }
.back-to-top:hover { background: var(--brand-primary-dark); transform: translateY(-2px); box-shadow: 6px 6px 0 var(--brand-border); }
.back-to-top:active { transform: translateY(0); box-shadow: 3px 3px 0 var(--brand-border); }
@media (max-width: 640px){
  .back-to-top { right: 72px; bottom: 12px; width:44px; height:44px; }
  .product-img { height: 160px; }
  .cat-img { height: 100px; }
  .hero-cards { height: 200px; }
  .hero-card { width: 240px; height: 140px; }
}

/* Mobile navigation */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 2px solid var(--brand-border);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--brand-border);
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  header nav { display: none !important; }
  .mobile-menu-btn { display: inline-flex; }
  .section-label { font-size: 0.65rem; padding: 8px 12px; }
}
.mobile-nav { display: none; }
.mobile-nav.open { display: block; }
.mobile-nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 50; backdrop-filter: blur(2px); }
.mobile-nav-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 280px; max-width: 80vw; background: var(--brand-primary); border-left: 3px solid var(--brand-border); z-index: 51; padding: 20px; display: flex; flex-direction: column; gap: 10px; transform: translateX(100%); transition: transform 200ms ease; box-shadow: -8px 0 20px rgba(0,0,0,0.2); }
.mobile-nav.open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-link { display: block; padding: 12px 14px; background: #fff; border: 2px solid var(--brand-border); border-radius: 12px; font-weight: 700; box-shadow: 3px 3px 0 var(--brand-border); color: var(--brand-text); text-decoration: none; }
.mobile-nav-link-primary { background: var(--brand-primary-dark); color: #fff; }
.mobile-nav-close { align-self: flex-end; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--brand-border); border-radius: 9999px; font-weight: 700; margin-bottom: 10px; box-shadow: 2px 2px 0 var(--brand-border); cursor: pointer; }

/* Modal close target */
.modal-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; }