* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100vw; }
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
#app { overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink-800);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { color: var(--ink-900); line-height: 1.2; margin: 0 0 var(--sp-3); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--sp-3); }
a { color: #8ab4ff; text-decoration: none; }
a:hover { text-decoration: underline; color: #a8c5ff; }
.card a, .product-card a, .cat-bubble, .modal a { color: inherit; }
.card a:hover, .product-card a:hover { color: inherit; }
.input, .select, .textarea { color: rgb(245,247,240); background: var(--surface); border-color: var(--ink-200); }
.input::placeholder, .select::placeholder, .textarea::placeholder { color: #7a8599; }
.searchbar input { color: rgb(16,20,29) !important; background: rgb(245,247,240) !important; }
.searchbar input::placeholder { color: #6b7689 !important; }
.cat-bubble__label { color: rgb(245,247,240) !important; }
.topbar a, .topbar .brand { color: rgb(245,247,240); }
.feed-header h2, .section h2, .section h3 { color: rgb(245,247,240); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--secondary-wash); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--light-indigo); color: var(--dark-charcoal); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--primary-denim); color: var(--pure-white); padding: 10px 16px; border-radius: var(--r-sm);
}
.skip-link:focus { left: 12px; top: 12px; }

.muted { color: var(--ink-500); }
/* Dark cards (checkout, general .card) keep light headings — ensure visible on dark surface */
.card h1, .card h2, .card h3, .card h4 { color: var(--ink-900) !important; }
.card .price { color: var(--ink-900) !important; }
/* Light-card contexts — muted must be dark gray on white; headings dark on white (must override generic .card) */
.tee-card .muted, .admin-content .muted, .admin-card .muted, .sidebar .muted, [style*="background: #fff"] .muted, [style*="background:#fff"] .muted,
[style*="background: rgb(245"] .muted { color: #64748b !important; }
.tee-card h1, .tee-card h2, .tee-card h3, .tee-card h4, .tee-card .tee-h,
.admin-card h1, .admin-card h2, .admin-card h3, .admin-card h4,
.admin-content h1, .admin-content h2, .admin-content h3, .admin-content h4,
.tee-card.card h1, .tee-card.card h2, .tee-card.card h3, .tee-card.card h4 { color: #0f172a !important; }
.tee-card .price, .tee-card.card .price { color: #0f172a !important; }
/* Inputs inside light cards (tee, admin) — white bg dark text */
.tee-card .input, .tee-card .select, .tee-card .textarea,
.admin-card .input, .admin-card .select, .admin-card .textarea,
.admin-content .input, .admin-content .select, .admin-content .textarea { color: #0f172a !important; background: #fff !important; border-color: #cbd5e1 !important; }
.tee-card .input::placeholder, .admin-card .input::placeholder, .admin-content .input::placeholder { color: #94a3b8 !important; }
/* Checkout/order-notes textarea inside dark .card should be white for readability — keep */
.card .textarea, .card textarea.input { color: #0f172a !important; background: #fff !important; border-color: #cbd5e1 !important; }
.card .textarea::placeholder, .card textarea.input::placeholder { color: #94a3b8 !important; }
/* Toast text always high contrast */
.toast { color: #0f172a; }
.toast .muted { color: #64748b !important; }
/* Selected address/payment labels with light-indigo bg must have dark text for contrast */
.card label[style*="light-indigo"] { color: #0f172a !important; }
.card label[style*="light-indigo"] .fw-600, .card label[style*="light-indigo"] .muted, .card label[style*="light-indigo"] div { color: #0f172a !important; }
.card label[style*="light-indigo"] .muted { color: #475569 !important; }
.center { text-align: center; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
.container-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 var(--sp-5); }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.hide { display: none !important; }
.section { padding: var(--sp-8) 0; }
@media (max-width: 640px) {
  .container, .container-narrow { padding: 0 14px !important; }
  .section { padding: 18px 0 !important; }
  h1 { font-size: 22px !important; line-height:1.2; }
  h2 { font-size: 18px !important; line-height:1.25; }
  .input, .select, .textarea { font-size:16px !important; } /* prevent iOS zoom */
}
@media (max-width: 380px) {
  .container, .container-narrow { padding: 0 12px !important; }
}
@media (max-width: 640px){
  #main{ padding-bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom)) !important; }
  .bottom-nav{ height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)) !important; padding-bottom:env(safe-area-inset-bottom); }
}
/* Ensure media doesn't overflow on mobile */
img, video, svg { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-5); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.fw-600 { font-weight: 600; }
.price { font-weight: 700; color: var(--ink-900); }
.strike { color: var(--ink-400); text-decoration: line-through; font-weight: 500; }
.discount { color: var(--zuno-success); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Smooth transitions for interactive elements — 0.2s ease-in per Denim spec */
.btn, .product-card, .hero-card, .cat-bubble__circle, .icon-btn, .size-pill {
  transition: transform 0.2s ease-in, box-shadow 0.2s ease-in, background 0.2s ease-in, border-color 0.2s ease-in, color 0.2s ease-in;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(28,37,65,0.12) !important;
}

.hero-card:hover {
  transform: rotate(0deg) !important;
}