/* Volao tenant theme — MANGAKA ANIME SHOP (branch_mangaka-anime-shop) */
/* generated 2026-09-23T23:59:51.204Z by claude/claude-sonnet-5 · industry=fashion tone=minimalist scheme=light */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root {
  color-scheme: light;
  /* colors */
  --vl-color-primary: #cc00f5;
  --vl-color-primary-hover: #aa00cc;
  --vl-color-primary-contrast: #111111;
  --vl-color-primary-soft: #1a0a1f;
  --vl-color-accent: #e10600;
  --vl-color-accent-hover: #b80500;
  --vl-color-accent-contrast: #ffffff;
  --vl-color-bg: #0b0b0c;
  --vl-color-surface: #250a0b;
  --vl-color-surface-2: #2d1314;
  --vl-color-text: #f5f5f5;
  --vl-color-muted: #8c8c8c;
  --vl-color-border: #e3d5ec;
  --vl-color-success: #16a34a;
  --vl-color-warning: #d97706;
  --vl-color-danger: #dc2626;
  --vl-primary-rgb: 204 0 245;
  --vl-accent-rgb: 225 6 0;
  --vl-text-rgb: 245 245 245;
  /* typography */
  --vl-font-heading: 'Space Grotesk', system-ui, sans-serif;
  --vl-font-body: 'Inter', system-ui, sans-serif;
  --vl-font-size-base: 16px;
  --vl-heading-weight: 700;
  --vl-heading-transform: uppercase;
  --vl-heading-tracking: 0.02em;
  --vl-scale: 1.333;
  /* shape */
  --vl-radius-sm: 0px;
  --vl-radius-md: 0px;
  --vl-radius-lg: 0px;
  --vl-radius-pill: 0px;
  --vl-radius-button: 0px;
  --vl-card-border: 1px solid var(--vl-color-border);
  --vl-card-shadow: 0 1px 3px rgb(245 245 245 / 0.05), 0 1px 2px rgb(245 245 245 / 0.04);
  --vl-shadow-sm: 0 1px 2px rgb(245 245 245 / 0.06);
  --vl-shadow-md: 0 4px 12px rgb(245 245 245 / 0.08);
  --vl-shadow-lg: 0 16px 40px rgb(245 245 245 / 0.14);
  /* layout */
  --vl-container-max: 1200px;
  --vl-space-unit: 5px;
  --vl-hero-align: start;
  --vl-hero-justify: flex-start;
  --vl-product-aspect: 3 / 4;
  --vl-grid-cols: 4;
  /* assets */
  --vl-logo-url: url("https://storage.googleapis.com/volao_resources/resources/volao_logo_blanco.png");
}

/* uppercase headings also apply to nav + buttons */
.vl-nav__link, .vl-btn { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85em; }

/* ---- custom CSS (AI-authored, sanitized) ---- */
:root {
  --vl-seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 20a20 20 0 0140 0' fill='none' stroke='rgba(245,7,0,0.08)' stroke-width='1'/%3E%3C/svg%3E");
}
.vl-announce {
  background: var(--vl-color-surface-2);
  border-bottom: 1px solid var(--vl-color-border);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.vl-header__bar { border-bottom: 2px solid var(--vl-color-primary); }
.vl-brand__logo { filter: contrast(1.1); }
.vl-hero--editorial {
  background-image: var(--vl-seigaiha), linear-gradient(180deg, var(--vl-color-bg) 0%, var(--vl-color-surface) 100%);
  border-bottom: 1px solid var(--vl-color-border);
  position: relative;
}
.vl-hero--editorial::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 4px;
  background: repeating-linear-gradient(90deg, var(--vl-color-primary) 0 24px, transparent 24px 32px);
}
.vl-hero__eyebrow {
  color: var(--vl-color-primary);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.vl-tile { border: 1px solid var(--vl-color-border); }
.vl-tile__label { border-top: 2px solid var(--vl-color-primary); }
.vl-card { transition: transform 0.18s ease, box-shadow 0.18s ease; border-radius: 0; }
.vl-card:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--vl-color-primary); }
.vl-card--overlay .vl-card__body {
  border-left: 3px solid var(--vl-color-accent);
}
.vl-card__title { font-family: var(--vl-font-heading); text-transform: var(--vl-heading-transform); }
.vl-badge {
  background: var(--vl-color-primary);
  color: var(--vl-color-primary-contrast);
  border-radius: 0 var(--vl-radius-sm) 0 var(--vl-radius-sm);
  font-weight: 700;
}
.vl-price { color: var(--vl-color-accent); font-weight: 700; }
.vl-section__head { position: relative; padding-bottom: var(--vl-space-unit); }
.vl-section__head::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  background: var(--vl-color-primary);
  margin-top: 0.5rem;
}
.vl-btn--primary { box-shadow: 4px 4px 0 rgba(var(--vl-primary-rgb), 0.35); }
.vl-btn--accent:hover { box-shadow: 3px 3px 0 var(--vl-color-primary); }
.vl-testimonial { border-left: 2px solid var(--vl-color-primary); background: var(--vl-color-surface); }
.vl-newsletter { border-top: 1px solid var(--vl-color-border); border-bottom: 1px solid var(--vl-color-border); }
.vl-footer { border-top: 2px solid var(--vl-color-primary); }