/* ============================================================
   SHARD — PayNow.gg template stylesheet
   Referenced from layout.html via {{ asset('style.css') }}

   Every colour comes from a custom property defined in
   layout.html, which builds them from schema.json. Never
   hardcode a colour here — add a token instead.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, .brand-font { font-family: 'Poppins', system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* Shared content measure — the hero widgets sit on these same
   gridlines as the sidebar and main column below them. */
.hero-inner,
.shell,
.footer-inner {
  max-width: 1420px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
  width: 100%;
}

/* ============================================================
   Hero
   ============================================================ */

/* No `isolation` here on purpose. The hero deliberately does NOT form a
   stacking context, so its pieces can be layered against the panels in
   .shell below: the glow sinks behind them while the logo rises in front,
   letting the logo sit down over the top edge of the first panel.
   Adding isolation, a z-index, a transform, a filter or opacity < 1 to
   .hero would trap both on the same side and undo that. */
.hero {
  position: relative;
  min-height: var(--hero-height);
  display: flex;
  flex-direction: column;
}

.hero-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 45%;
  z-index: -4;
}

/* Dims the artwork and melts its bottom edge into the page,
   so the widgets and the panels below share one surface. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 30%, transparent) 0%,
      transparent 30%,
      transparent 55%,
      color-mix(in srgb, var(--bg) 70%, transparent) 84%,
      var(--bg) 100%),
    rgba(0, 0, 0, var(--hero-dim));
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: 18px;
  padding-bottom: 0;
}

/* Painting order, bottom to top, across the whole page:
     -4 artwork -> -3 veil -> -2 particles -> -1 logo glow
     -> the .shell panels (in flow, no z-index of their own)
     -> 2 logo -> 3 widgets -> 4 cart and Home.
   The glow and the logo straddle the panels; the widgets and the pills
   stay clear of a large or zoomed logo. */
.hero-utility { position: relative; z-index: 4; }
.hero-widgets { position: relative; z-index: 3; }

/* ---- cart, top right ---- */

.hero-utility { display: flex; justify-content: space-between; align-items: center; }

.pill-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.pill-btn:hover  { background: var(--panel); border-color: var(--border-strong); }
.pill-btn:active { transform: scale(.97); }
.pill-btn svg    { width: 17px; height: 17px; }

.cart-count {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- logo: breathes, glow in phase ---- */

/* Taken out of flow and hung from the hero's bottom edge. In flow the hero
   simply grew to fit the logo, so the logo could never reach the panels
   below it. Anchored this way, the Logo Overlap setting means exactly
   what it says: how far the mark hangs past the hero, over the first panel.
   Centred with auto margins rather than a transform, which would create a
   stacking context and trap the glow on the wrong side of the panels. */
.logo-link {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--logo-bottom);
  margin-inline: auto;
  width: fit-content;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 0;

  /* The mark overhangs the panels and, once zoomed, covers a wide area of
     mostly-transparent pixels. Letting it swallow clicks meant for the
     products underneath would be worse than losing the logo as a link —
     the Home pill in the corner is the way back. */
  pointer-events: none;
}

/* Sized by height with the width left to follow, so a wide wordmark
   fills the space instead of being boxed into a square. */
.logo-wrap {
  position: relative;
  /* never taller than the space the hero actually has, and never wider
     than the page — the configured size is an upper bound, not a demand */
  height: min(var(--logo-size), 46vw);
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Brightens as the mark grows, fades as it shrinks — same
   duration and easing as .logo-mark keeps the two in phase. */
/* Sinks behind the panels, so a logo resting over the first panel keeps
   its halo on the artwork instead of washing across the products. */
.logo-glow {
  position: absolute;
  inset: -48%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--glow-core) 0%,
    var(--glow-mid) 44%,
    transparent 72%);
  filter: blur(22px);
  animation: logoGlow var(--logo-cycle) ease-in-out infinite;
  pointer-events: none;
}

/* Rides in front of the panels it overlaps. */
.logo-mark {
  position: relative;
  z-index: 2;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  animation: logoPulse var(--logo-cycle) ease-in-out infinite;
  transform-origin: center;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}

/* Rides in front alongside the mark — otherwise the caption is the one
   piece of the logo that disappears behind an overlapped panel. */
.store-name {
  position: relative;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

/* Zoom and pulse share the one transform, so they compose instead of
   overwriting each other. */
@keyframes logoPulse {
  0%, 100% { transform: scale(var(--logo-zoom)); }
  50%      { transform: scale(calc(var(--logo-zoom) * var(--logo-scale))); }
}

@keyframes logoGlow {
  0%, 100% { opacity: .3; transform: scale(.86); }
  50%      { opacity: 1;  transform: scale(1.16); }
}

/* ---- play + discord widgets, foot of the hero ---- */

.hero-widgets {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 30px;
}

/* Bare on the artwork: no panel, no border, no backdrop. The icon and
   the two lines of type are the whole widget. */
.widget {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  font: inherit;
  transition: transform .16s ease, filter .16s ease;
}
.widget:hover { transform: translateY(-2px); filter: brightness(1.12); }
.widget:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }

.widget-icon {
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .5));
}
.widget-icon svg { width: 100%; height: 100%; }

/* the live count rides above the icon */
.widget-count {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
}
.widget-count[hidden] { display: none; }

.widget-text { display: flex; flex-direction: column; gap: 2px; }

.widget-title {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--accent);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

.widget-sub {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

/* the discord widget mirrors the play widget: text first, icon last */
.widget-discord { flex-direction: row; }
.widget-discord .widget-text { align-items: flex-end; text-align: right; }

.widget-play .widget-sub .copy-label.copied { color: var(--success); }

@media (prefers-reduced-motion: reduce) {
  .logo-mark, .logo-glow { animation: none; }
  .widget:hover { transform: none; }
}

/* ============================================================
   Shell
   ============================================================ */

.shell {
  display: flex;
  flex: 1;
  gap: 22px;
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: 40px;
}

main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ============================================================
   Box — the container every section lives in
   ============================================================ */

/* Each section owns one panel: a titled, lifted surface that holds the
   whole section. The title sits inside it rather than on a separate bar,
   so the panel reads as one object. */
.box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 10px 26px rgba(0, 0, 0, .28);
}

.box-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}

.box-head h2,
.box-head h3 {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--accent);
}

.box-head .box-note {
  font-size: 12.5px;
  color: var(--text-faint);
}

.box-body { padding: 16px 20px 20px; }

/* a box whose whole point is prose */
.box-body > p { color: var(--text-dim); line-height: 1.75; margin: 0 0 12px; }
.box-body > p:last-child { margin-bottom: 0; }
.box-body a { color: var(--accent-bright); }
.box-body h1 { margin: 0 0 12px; font-size: 22px; }
/* Only unclassed lists — i.e. ones written in the dashboard's rich text —
   get prose bullets. The nav lists carry classes and keep list-style:none,
   so this rule cannot reach into the sidebar. */
.box-body ul:not([class]),
.box-body ol:not([class]) {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--text-dim);
  line-height: 1.75;
}
.box-body ul:not([class]) { list-style: disc; }
.box-body ol:not([class]) { list-style: decimal; }

/* ============================================================
   Sidebar
   ============================================================ */

.sidebar {
  width: 264px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}

/* the sidebar's title is centred and quieter than a section title */
.sidebar-head {
  justify-content: center;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
}
.sidebar-head h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text);
}

.sidebar .box-body { padding: 10px; }

.nav-list { display: flex; flex-direction: column; gap: 2px; }

.nav-item > a,
.nav-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  transition: background .14s ease, color .14s ease;
}
.nav-item summary::-webkit-details-marker { display: none; }

.nav-item > a:hover,
.nav-item summary:hover { background: var(--panel-alt); color: var(--text); }

/* The page you are on is marked with an accent bar on the leading edge,
   the way the rest of the sidebar stays quiet. */
.nav-item > a.active,
.nav-item details[open] > summary {
  position: relative;
  background: var(--panel-raised);
  color: var(--accent);
  font-weight: 600;
}
.nav-item > a.active::before,
.nav-item details[open] > summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.nav-item summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .18s ease;
  opacity: .55;
  flex-shrink: 0;
  margin-left: 8px;
}
.nav-item details[open] summary::after { transform: rotate(45deg); }

/* No rule or rail down the side of an open group — the indent
   alone carries the nesting. */
.nav-sublist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 0 6px 10px;
}

.nav-sublist a {
  display: block;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text-faint);
  transition: background .14s ease, color .14s ease;
}
.nav-sublist a:hover { background: var(--panel-alt); color: var(--text); }
.nav-sublist a.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-bright);
  font-weight: 600;
}

/* ============================================================
   Product grid
   ============================================================ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: 14px;
}

/* ---- category blocks inside a panel ----
   A quiet outline is enough to fence each category off; the panel it sits
   in already supplies the surface, so filling these too would stack three
   greys on top of each other. Each block starts its own grid, which is
   what stops two categories sharing a row. */
.tag-group {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 14px 14px 16px;
}
.tag-group + .tag-group { margin-top: 16px; }

.tag-group-title {
  margin: 0 0 12px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tag-group-title a { transition: color .15s ease; }
.tag-group-title a:hover { color: var(--accent-bright); }

.product-card {
  position: relative;
  background: var(--panel-alt);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.product-card .thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  /* transparent so the card reads as a single surface with the
     product image sitting on it, rather than two stacked tones */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .thumb-fallback { font-size: 28px; opacity: .28; }

.product-card .info {
  padding: 11px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.product-card .pname {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.product-card .pprice {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent-bright);
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.product-card .pprice .was {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
  text-decoration: line-through;
}

.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.badge.oos { background: #dc2626; color: #fff; left: auto; right: 8px; }

/* ============================================================
   Buttons and fields
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 12px 26px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 15px;
  transition: filter .15s ease, transform .1s ease;
}
.btn:hover  { filter: brightness(1.08); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-weight: 600;
}
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text); filter: none; }

.field {
  width: 100%;
  padding: 10px 12px;
  background: var(--panel-sunken);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
}
.field:focus { outline: none; border-color: var(--border-strong); }

.field-label {
  display: block;
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

/* ============================================================
   Product detail
   ============================================================ */

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 28px;
  align-items: start;
}
.product-detail .media {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-sunken);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.product-detail .media img { width: 100%; height: 100%; object-fit: cover; }
.product-detail h1 { margin: 0 0 10px; font-size: 25px; }
.product-detail .price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.product-detail .price { font-size: 23px; font-weight: 700; color: var(--accent-bright); }
.product-detail .price-was {
  font-size: 15px;
  color: var(--text-faint);
  text-decoration: line-through;
}
.product-detail .desc { color: var(--text-dim); line-height: 1.75; margin: 18px 0 22px; }
.product-detail .desc ul, .product-detail .desc ol { padding-left: 20px; }
.product-detail .desc ul { list-style: disc; }
.product-detail .desc img { border-radius: 8px; margin: 10px 0; }

/* ============================================================
   Rows (cart, orders, subscriptions)
   ============================================================ */

.row-list { display: flex; flex-direction: column; gap: 10px; }

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel-alt);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 13px 16px;
}
.row-thumb {
  width: 52px;
  height: 52px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--panel-sunken);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-main  { flex: 1; min-width: 0; }
.row-title { font-weight: 600; }
.row-sub   { font-size: 12.5px; color: var(--text-faint); }
.row-price { font-weight: 700; color: var(--accent-bright); white-space: nowrap; }
.qty-input { width: 60px; text-align: center; }

.cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.cart-total { font-size: 17px; font-weight: 700; }
.cart-total span { color: var(--accent-bright); }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-dim);
}
.empty-state p { margin: 0 0 6px; }
.empty-state .hint { font-size: 13px; color: var(--text-faint); }

.notice {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
}

/* ============================================================
   Footer
   ============================================================ */

footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, black);
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.75;
}
.footer-inner { padding-top: 26px; padding-bottom: 32px; text-align: center; }
footer a { color: var(--accent-bright); }
footer p { margin: 0 0 4px; }

.social-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.social-row a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: color .15s ease, border-color .15s ease, transform .12s ease;
}
.social-row a:hover { color: var(--accent-bright); border-color: var(--border-strong); transform: translateY(-2px); }
.social-row svg { width: 16px; height: 16px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1240px) {
  .product-grid { grid-template-columns: repeat(min(var(--grid-cols), 4), minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-detail { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .hero-inner, .shell, .footer-inner { padding-left: 16px; padding-right: 16px; }
  .shell { flex-direction: column; gap: 16px; }
  .sidebar { width: 100%; position: static; }

  /* Both widgets stay at every width — they are the two things visitors
     come here to click. They shrink; they never disappear. */
  .hero-widgets { gap: 12px; }
  .widget { gap: 10px; }
  .widget-icon { width: 40px; height: 40px; }
  .widget-title { font-size: 14px; }
}

@media (max-width: 620px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-label { display: none; }
  .widget { gap: 8px; }
  .widget-icon { width: 34px; height: 34px; }
  .widget-title { font-size: 12.5px; letter-spacing: 0; }
  .widget-count { font-size: 11px; padding: 4px 7px; top: -13px; }
  /* below this the two sub-labels are the first thing to go, not a widget */
  .widget-sub { display: none; }
}