/* VVA Manifest-driven static site (no backend). */
:root{
  --bg:#0b0f14;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.12);
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --radius:18px;
  --radius2:26px;
  --max:1180px;
}

[data-theme="light"]{
  --bg:#f7f8fb;
  --panel:rgba(0,0,0,.06);
  --panel2:rgba(0,0,0,.09);
  --text:rgba(0,0,0,.9);
  --muted:rgba(0,0,0,.62);
  --line:rgba(0,0,0,.12);
  --shadow:0 18px 50px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
img{width:100%;height:100%;object-fit:cover;display:block}
.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}

.topbar{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);
}
.topbar__inner{display:flex;align-items:center;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:240px}
.brand__mark{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:14px;background:var(--panel2);
  border:1px solid var(--line);font-weight:800;letter-spacing:.5px
}
.brand__name{font-weight:650;opacity:.95;white-space:nowrap}
.nav{margin-left:auto;display:flex;gap:16px}
.nav__link{padding:8px 10px;border-radius:12px;color:var(--muted)}
.nav__link:hover{background:var(--panel);color:var(--text)}
.iconbtn{
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;cursor:pointer
}
.nav__burger{display:none}
.mobileNav{border-top:1px solid var(--line);padding:10px 0}
.mobileNav a{display:block;padding:10px 20px;color:var(--muted)}
.mobileNav a:hover{background:var(--panel);color:var(--text)}

.hero{position:relative;padding:44px 0 16px;overflow:hidden}
.hero__glow{
  position:absolute;inset:-140px -140px auto auto;width:520px;height:520px;
  background:radial-gradient(circle at 30% 30%,rgba(120,180,255,.22),transparent 62%),
             radial-gradient(circle at 70% 70%,rgba(255,120,200,.18),transparent 60%);
  filter:blur(14px);opacity:.9;pointer-events:none
}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}
.pill{
  display:inline-flex;padding:8px 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);color:var(--muted);
  margin:0 0 12px;font-weight:600;letter-spacing:.2px
}
.hero__title{font-size:clamp(28px,3.2vw,44px);line-height:1.08;margin:0 0 12px}
.hero__subtitle{margin:0 0 18px;color:var(--muted);font-size:16px;line-height:1.55;max-width:58ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.hero__quicklinks{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted)}
.chip:hover{background:var(--panel);color:var(--text)}

.heroCard{
  border-radius:var(--radius2);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;flex-direction:column
}
.heroCard__media{aspect-ratio:4/3;background:var(--panel)}
.heroCard__meta{padding:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative}
.heroCard__title{margin:0;font-size:16px}
.heroCard__desc{margin:4px 0 0;color:var(--muted);font-size:13.5px}

.section{padding:34px 0; padding-top: 75px;}
.section--alt{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 70%,transparent)
}
.section__head{margin-bottom:16px}
.section__head h2{margin:0 0 6px;font-size:22px}
.section__head p{margin:0;color:var(--muted);line-height:1.5}
.section__head--split{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}

.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.input{
  height:42px;padding:0 12px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);outline:none
}
.input::placeholder{color:color-mix(in srgb,var(--muted) 85%,transparent)}
.tabs{display:flex;gap:8px;padding:6px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.tab{
  height:30px;padding:0 10px;border-radius:12px;border:0;background:transparent;
  color:var(--muted);cursor:pointer;font-weight:650
}
.tab.is-active{background:var(--panel2);color:var(--text)}

.grid{display:grid;gap:14px}
.grid--cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--stores{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--art{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--mini{grid-template-columns:repeat(6,minmax(0,1fr))}

.card{
  border-radius:var(--radius2);border:1px solid var(--line);
  background:var(--panel);overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  transition:transform .18s ease,background .18s ease
}
.card:hover{transform:translateY(-2px);background:var(--panel2)}
.card__thumb{aspect-ratio:16/10;background:var(--panel2)}
.card__body{padding:14px}
.card__body h3{margin:0 0 6px;font-size:16px}
.card__body p{margin:0;color:var(--muted);line-height:1.45}
.card__cta{display:inline-block;margin-top:10px;color:var(--text);opacity:.9;font-weight:700}
.card__bodyz:hover{background-color:#5a2a6e;color:rgba(255,255,255,.95)}
.card__bodyz:hover p{color:rgba(255,255,255,.82)}
.card__bodyz:hover .card__cta{color:rgba(255,255,255,.95)}
.card__bodyf:hover{background-color:#1e3a8a;color:rgba(255,255,255,.95)}
.card__bodyf:hover p{color:rgba(255,255,255,.82)}
.card__bodyf:hover .card__cta{color:rgba(255,255,255,.95)}

.art{
  padding:0;border:1px solid var(--line);
  background:var(--panel);
  border-radius:var(--radius2);
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  transition:transform .18s ease,background .18s ease;
  text-align:left
}
.art:hover{transform:translateY(-2px);background:var(--panel2)}
.art img{aspect-ratio:4/3}
.art__meta{padding:12px 12px 14px;display:flex;justify-content:space-between;gap:10px}
.art__title{font-weight:700}
.art__sub{color:var(--muted);font-size:13px}

.collection{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.collection__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.collection__head h3{margin:0 0 6px}
.collection__head p{margin:0;color:var(--muted);max-width:70ch}

.mini{
  border-radius:16px;border:1px solid var(--line);
  overflow:hidden;background:var(--panel);
  aspect-ratio:1/1;display:block;
  transition:transform .18s ease,background .18s ease
}
.mini:hover{transform:translateY(-2px);background:var(--panel2)}

.btn{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  font-weight:750;
  display:inline-flex;align-items:center;justify-content:center;gap:8px
}
.btn--primary{background: var(--panel2); backdrop-filter: blur(8px); border: 0px solid rgba(255,255,255,0.12); transition: 0.2s ease;}
.btn--ghost{background: var(--panel2); backdrop-filter: blur(8px); border: 0px solid rgba(255,255,255,0.12); transition: 0.2s ease;}
.btn--small{padding:8px 10px;border-radius:12px;font-size:13px}

.btn--primary:hover {background: #5a2a6e; filter: brightness(1.15); color: rgba(255,255,255,.95);}
.btn--ghost:hover {background: #1e3a8a; filter: brightness(1.15); color: rgba(255,255,255,.95);}

.btn--primary2{background:var(--panel2)}
.btn--ghost2{background:var(--panel2)}

.btn--primary2:hover {background: #414141; filter: brightness(1.15); color: rgba(255,255,255,.95);}
.btn--ghost2:hover {background: #414141; filter: brightness(1.15); color: rgba(255,255,255,.95);}


.about{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:var(--radius2);
  padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.22)
}
.about__thanks{margin-bottom:0;color:var(--muted)}

.footer{padding:22px 0 30px}
.footer__inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted);gap:10px}
.footer__link{padding:8px 10px;border-radius:12px;border:1px solid var(--line)}
.footer__link:hover{background:var(--panel);color:var(--text)}

.modal{position:fixed;inset:0;display:none;z-index:100}
.modal.is-open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.modal__panel{
  position:relative;width:min(980px,calc(100% - 30px));
  margin:60px auto;border-radius:var(--radius2);overflow:hidden;
  border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.2fr .8fr
}
.modal__media{background:var(--panel);min-height:380px}
.modal__content{padding:16px;display:flex;flex-direction:column;gap:12px}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.modal__head h3{margin:0}
.modal__desc{margin:0;color:var(--muted);line-height:1.5}
.modal__actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}

.notice{
  border:1px dashed var(--line);
  border-radius:var(--radius2);
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  padding:12px 14px;
  color:var(--muted);
  line-height:1.5;
  margin-top:12px;
  font-size:13.5px;
}

@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .grid--cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--art{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--mini{grid-template-columns:repeat(4,minmax(0,1fr))}
  .modal__panel{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav{display:none}
  .nav__burger{display:grid}
  .grid--cards{grid-template-columns:1fr}
  .grid--stores{grid-template-columns:1fr}
  .grid--art{grid-template-columns:1fr}
  .grid--mini{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== Footer (theme-aware) ===== */
.footer{
  padding: 50px 0 30px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  color: var(--text);
}

.footer-top{ text-align:center; margin-bottom:30px; }

.footer-support h3{ margin-bottom:10px; color: var(--text); }
.footer-support p{ margin-bottom:15px; color: var(--muted); }

.footer-social{
  display:flex;
  justify-content:center;
  gap:25px;
  font-size:24px;
  margin-bottom:30px;
}

.footer-social a{
  transition: transform .2s ease, opacity .2s ease;
}
.footer-social a:hover{
  transform: scale(1.15);
  opacity: .85;
}

/* Keep your brand colors */
.footer-social .facebook{ color:#1877f2; }
.footer-social .instagram{ color:#e1306c; }

.footer-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  font-size:14px;
  text-align:center;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
}

.footer-links a{
  color: var(--muted);
  text-decoration:none;
}
.footer-links a:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-copy{
  color: color-mix(in srgb, var(--muted) 80%, transparent);
  font-size:13px;
}

/* Legal/utility pages (privacy, contact, etc.) */
.page--legal{padding:24px 0 56px}
.form{display:block;width:min(900px,100%);height:1100px;border:0;border-radius:18px;overflow:hidden;margin:0 auto;background:var(--panel)}
@media (max-width:720px){.form{height:1200px}}


/* Legal document typography */
.legalDoc{max-width:900px;margin:0 auto;line-height:1.7}
.legalDoc h1{font-size:40px;letter-spacing:-.02em;margin:0 0 10px}
.legalDoc h2{font-size:26px;margin:26px 0 10px}
.legalDoc h3{font-size:18px;margin:18px 0 8px}
.legalDoc p, .legalDoc li{color:var(--muted)}
.legalDoc a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
[data-theme="light"] .legalDoc a{text-decoration-color:rgba(0,0,0,.35)}
.legalDoc ul{padding-left:20px}

/* ===== Fix collection description spacing ===== */
.collection__head{
  margin-bottom: 12px;
}
.collection__head p{
  margin: 0 0 12px;
}

/* ===== Fix mini square black bars (button default padding) ===== */
.mini{
  padding: 0;        /* critical: removes default button padding */
  line-height: 0;    /* prevents inline gaps */
  cursor: pointer;
}
.mini img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Featured hero CTA bottom-right ===== */
.heroCard__meta{
  position: relative;
  padding: 18px 22px 28px 22px;  /* balanced padding */
}

.heroCard__cta{
  position: absolute;
  right: 22px;
  bottom: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}

.heroCard:hover .heroCard__cta{
  opacity: 1;
  transform: translateX(3px);
}

.btn:focus-visible{outline:2px solid color-mix(in srgb,var(--text) 55%,transparent);outline-offset:2px}

.support-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 12px;
}

/* Collection "Show all / Show less" toggle */
.collection-toggle{
  margin: 1.25rem 0 0.75rem;
}

/* Prevent default focus/active styling from flashing system blue */
.collection-toggle:focus,
.collection-toggle:active{
  outline: none;
}

/* Accessible keyboard focus */
.collection-toggle:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Keep ghost button from flashing a filled background on click */
.collection-toggle.btn--ghost:active{
  background: transparent;
}