:root {
  --brand-accent: #ffe600;
  --brand-accent-hover: #fff13d;
  --site-bg: #eeede7;
  --site-dot: rgba(22, 23, 20, 0.07);
  --site-text: #161714;
  --site-muted: #5f625d;
  --site-line: rgba(22, 23, 20, 0.14);
  --page-bg: var(--site-bg);
  --dot-color: var(--site-dot);
}

@media (max-width: 820px) {
  body .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 44px 36px; align-items: center; height: auto; padding: 10px 16px 0; gap: 8px; }
  body .topbar > .brand { position: relative; inset: auto; transform: none; grid-column: 1; grid-row: 1; align-self: center; width: 100px; height: 40px; margin: 0; }
  body .topbar .header-logo { width: 170.667px; height: 56.833px; left: -37.917px; top: -7.417px; }
  body .topbar > .top-actions { position: static; grid-column: 2; grid-row: 1; align-items: center; justify-self: end; margin: 0; gap: 8px; }
  body .topbar > .main-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; margin: 0; gap: 8px; }
  body .topbar .main-nav a { display:flex; align-items:center; height:36px; padding:0; margin:0; font-size:12px; box-sizing:border-box; }
  body .topbar > .main-nav { align-self:center; height:36px; align-items:center; }
  body .topbar { padding-bottom:8px; }
  body .topbar .header-cart, body .topbar .account-login, body .topbar .account-toggle { height: 40px; min-height: 40px; }
}

:root[data-theme="dark"] {
  --site-bg: #111310;
  --site-dot: rgba(243, 242, 236, 0.08);
  --site-text: #f3f2ec;
  --site-muted: #b9bbb3;
  --site-line: rgba(243, 242, 236, 0.13);
  --page-bg: var(--site-bg);
  --dot-color: var(--site-dot);
}

html body {
  background: radial-gradient(circle at 2px 2px, var(--site-dot) 1.4px, transparent 1.6px) 0 0 / 24px 24px, var(--site-bg);
}

:root .app-view,
:root[data-theme] .app-view {
  background: transparent;
}

:root .home-view {
  --hero-top-space: 38px;
  padding-top: var(--hero-top-space);
  overflow: visible;
  left: auto;
  width: 100%;
  margin-left: 0;
  padding-inline: 0;
}

:root .home-hero,
:root[data-theme] .home-hero {
  --hero-wall: #f4f3ee;
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  width: 100%;
  max-width: 1180px;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  padding: 0 36px;
  margin-top: 24px;
  margin-bottom: 32px;
}
:root[data-theme="dark"] .home-hero { --hero-wall: #181a17; }
/* Extend only the background paint, without widening the page's scroll area. */
:root .home-hero::before {
  content: "";
  position: absolute;
  inset: calc(-1 * (var(--hero-top-space) + 24px)) 0 56px;
  z-index: -1;
  background: var(--hero-wall);
  box-shadow: 0 0 0 100vmax var(--hero-wall);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}
:root .home-hero .home-copy {
  position: relative;
  top: -32px;
}
:root .home-hero .home-character {
  width: 100%;
  height: clamp(480px, calc(100svh - 180px), 680px);
  min-height: 0;
  min-width: 0;
  align-self: center;
}
:root .home-hero .home-character .is-main {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 820px) {
  :root .home-view { --hero-top-space: 16px; }
  :root .home-hero, :root[data-theme] .home-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 20px 12px;
    gap: 16px;
    margin-top: 16px;
  }
  :root .home-hero::before { inset: calc(-1 * (var(--hero-top-space) + 16px)) 0 130px; }
  :root .home-hero .home-copy { top: -12px; }
  :root .home-hero .home-character { height: 460px; }
}

:root .home-view .payment-strip {
  position: relative;
  inset: auto;
  transform: none;
  width: min(100%, 600px);
  justify-self: center;
  margin: 40px auto 0;
  padding: 8px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.references { width: 100%; min-width: 0; max-width: 100%; margin: 48px auto 0; color: var(--site-text); font-family: Inter, Arial, sans-serif; }
.references h2 { margin: 0 0 24px; font-size: 28px; line-height: 1.2; letter-spacing: 0; }
.references-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; }
.references-heading h2 { margin: 0; }
#referencesMotion { width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border: 1px solid var(--site-line); border-radius: 50%; color: var(--site-text); background: var(--site-bg); cursor: pointer; }
#referencesMotion:focus-visible { outline: 2px solid var(--site-text); outline-offset: 3px; }
.references-list { position: relative; display: flex; gap: 24px; overflow: hidden; padding: 3px 0 12px; pointer-events: none; user-select: none; }
.references-list .reference-card { flex: 0 0 360px; }
@media (max-width: 640px) { .references-list .reference-card { flex-basis: min(320px, 85vw); } }
@media (prefers-reduced-motion: reduce) { .reference-copy { display: none; } .references-list { flex-wrap: wrap; } }
.reference-card { overflow: hidden; border: 1px solid var(--site-line); border-radius: 8px; background: var(--site-bg); }
.reference-preview { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0; background: #101218; }
.reference-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.reference-preview.is-rotated img { position: absolute; left: 50%; top: 50%; width: 56.25%; height: 177.7778%; transform: translate(-50%, -50%) rotate(-90deg); }
.reference-author { display: flex; align-items: center; gap: 12px; padding: 18px; }
.reference-author h3 { margin: 0 0 5px; font-size: 15px; letter-spacing: 0; }
.reference-author p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--site-muted); }
.reference-avatar { flex: 0 0 44px; height: 44px; border-radius: 50%; background: url("assets/reference-andyy-profile.png") -10px -14px / 282px 67px no-repeat; }
.reference-dialog { width: min(1100px, calc(100vw - 32px)); max-width: none; padding: 48px 0 0; border: 1px solid var(--site-line); border-radius: 8px; background: var(--site-bg); color: var(--site-text); }
.reference-dialog::backdrop { background: rgba(0, 0, 0, 0.75); }
.reference-dialog img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 120px); object-fit: contain; }
.reference-dialog.is-rotated { width: min(900px, calc(100vw - 32px), calc((100dvh - 96px) * 4 / 3)); aspect-ratio: 4 / 3; padding: 48px 0 0; box-sizing: content-box; }
.reference-dialog.is-rotated img { position: absolute; top: calc(50% + 24px); left: 50%; width: 75%; height: calc(133.3333% - 64px); max-height: none; transform: translate(-50%, -50%) rotate(-90deg); }
.reference-close { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: inherit; font: 28px/1 Arial, sans-serif; cursor: pointer; }
.reference-close:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }

#giftView .original-price { display: block; color: var(--site-muted); font-size: 12px; font-weight: 400; }
#giftView .prices .soles { text-align: right; }

.community-band {
  width: min(1180px, calc(100% - 2rem));
  margin: 64px auto 0;
  padding: 32px 0;
  border-top: 1px solid var(--site-line);
  border-bottom: 1px solid var(--site-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr);
  gap: 32px;
  align-items: center;
  color: var(--site-text);
  font-family: Inter, Arial, sans-serif;
  letter-spacing: 0;
}
.community-heading { display: flex; gap: 20px; align-items: center; min-width: 0; }
.community-heading img { width: 38px; height: 48px; object-fit: contain; filter: brightness(0); }
:root[data-theme="dark"] .community-heading img { filter: none; }
.community-heading h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: 0; }
.community-heading p { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.6; }
.community-links { display: flex; justify-content: flex-end; gap: 16px; }
.community-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 0;
  border-radius: 50%;
  color: var(--site-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.community-links svg { width: 26px; height: 26px; fill: currentColor; transition: transform 160ms ease; }
.community-links a:hover { background: color-mix(in srgb, var(--site-text) 8%, transparent); }
.community-links a:hover svg { transform: translateY(-2px); }
.community-links a:focus-visible { outline: 2px solid var(--site-text); outline-offset: 4px; }
.community-band + footer.site-footer { margin-top: 0; border-top: 0; }
.bug-report-callout {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px;
  width: 100%; padding: 24px 0; border-block: 1px solid color-mix(in srgb, var(--site-text) 14%, transparent);
}
.bug-report-callout > div { display: grid; gap: 8px; min-width: 0; }
.bug-report-callout strong { color: var(--site-text); font-size: 17px; line-height: 1.4; }
.bug-report-callout span { color: var(--site-muted); font-size: 13px; line-height: 1.6; }
.bug-report-callout .bug-report-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 0 18px;
  border: 1px solid var(--brand-accent); border-radius: 6px; background: var(--brand-accent); color: #111;
  font: italic 900 13px/1.2 "Archivo Shop Display", Arial, sans-serif; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease;
}
.bug-report-callout .bug-report-link span { color: inherit; font: 700 18px/1 Arial, sans-serif; }
.bug-report-callout .bug-report-link:hover { background: #fff; border-color: #fff; }
.bug-report-callout .bug-report-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 640px) {
  .community-band { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; }
  .community-heading h2 { font-size: 21px; }
  .community-links { justify-content: flex-start; gap: 16px; }
  .bug-report-callout { grid-template-columns: 1fr; align-items: start; gap: 12px; }
  .bug-report-callout .bug-report-link { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .community-links svg { transition: none; }
}

footer.site-footer {
  display: block;
  width: min(1180px, calc(100% - 2rem));
  margin: 64px auto 0;
  padding: 28px 16px 36px;
  border-top: 1px solid var(--site-line);
  background: transparent;
  color: var(--site-muted);
  text-align: center;
  font: 400 12px/1.7 Inter, Arial, sans-serif;
  letter-spacing: 0;
}
.site-footer h4 { margin: 0 0 8px; font: 700 15px/1.4 Inter, Arial, sans-serif; color: var(--site-text); }
.site-footer p { max-width: 850px; margin: 6px auto; }

.back-to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--site-line);
  border-radius: 50%;
  background: var(--site-text);
  color: var(--site-bg);
  font: 400 26px/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { filter: brightness(1.2); }
.back-to-top:focus-visible { outline: 2px solid var(--site-text); outline-offset: 4px; }
body #backToTop.back-to-top {
  width: 46px; height: 46px; border: 1px solid #ffe600; border-radius: 5px;
  background: #ffe600; color: #101312; font: 700 26px/1 Arial, sans-serif;
  box-shadow: 0 4px 16px #0006; transition: transform 150ms ease;
}
body #backToTop.back-to-top:hover { transform: translateY(-3px); filter: none; }
@media (prefers-reduced-motion: reduce) { body #backToTop.back-to-top { transition: none; } }

/* Center the single-line community message against its logo and social links. */
.community-heading h2 {
  margin: 0;
}