/* Fray & Fancy theme v2 — brand-forward styling
   Palette:
   - Blue Gray  #679ACE
   - Slate Blue #6260C3
   - Purpureus  #9355B6
*/
:root {
  /* Core surface + text */
  --bg: #f7f7fb;
  --fg: #131316;
  --muted: #5f6070;
  --border: #e8e8f2;

  /* Brand */
  --primary: #6260C3;   /* Slate Blue */
  --secondary: #9355B6; /* Purpureus */
  --tertiary: #679ACE;  /* Blue Gray */

  --primary-ink: #ffffff;
  --link: var(--primary);

  /* Utility tints */
  --chip: color-mix(in oklab, var(--primary) 12%, white);
  --chip-border: color-mix(in oklab, var(--primary) 40%, white);
  --card: #ffffff;
  --card-muted: #fbfbff;

  --focus: color-mix(in oklab, var(--secondary) 45%, white);
  --shadow: 0 6px 22px rgba(26, 19, 58, .08);
  --radius: 14px;
}

:root[data-theme="dark"] {
  --bg:#0b0b0f;
  --fg:#f1f1f4;
  --muted:#b9b9c6;
  --border:#232336;
  --primary:#6260C3;
  --secondary:#9355B6;
  --tertiary:#679ACE;
  --primary-ink:#ffffff;
  --link: var(--tertiary);
  --chip: color-mix(in oklab, var(--primary) 20%, black);
  --chip-border:#2b2b44;
  --card:#11111a;
  --card-muted:#0f0f18;
  --focus: color-mix(in oklab, var(--secondary) 50%, black);
  --shadow: 0 8px 26px rgba(0,0,0,.35);
}

/* Reset + base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:1.2rem}

/* Typography accents */
h1,h2,h3{letter-spacing:.2px}
h1{font-size:2rem;margin:.2rem 0 1rem 0}
h2{font-size:1.35rem;margin:1.5rem 0 .5rem 0}
.text-muted{color:var(--muted)}

/* Header / nav / footer */
.site-header,.site-footer{background:var(--card)}
.site-header{border-bottom:1px solid var(--border)}
.site-footer{border-top:1px solid var(--border);color:var(--muted)}
.brand{font-weight:800;letter-spacing:.3px}
.nav{display:flex;gap:.9rem;flex-wrap:wrap}
.nav a{padding:.5rem .7rem;border-radius:.6rem}
.nav a:hover{background:var(--chip)}
.nav a[aria-current="page"]{
  background: var(--secondary);
  color: var(--primary-ink);
  box-shadow: var(--shadow);
}

/* Footer links pop a bit more */
.site-footer a{color:var(--secondary)}
.site-footer a:hover{color:var(--primary)}

/* Hero */
.hero{padding:2.5rem 0}
.hero .banner{
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--tertiary) 100%);
  border-radius: var(--radius);
  color: var(--primary-ink);
  padding: 1.3rem 1.1rem;
  box-shadow: var(--shadow);
}
.hero .banner p{opacity:.95}
.hero .banner .btn{margin-right:.5rem;margin-top:.5rem}

/* Cards & grids */
/*.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} */

/* Center cards when there are few items */
.grid{
  display:grid;
  gap:1rem;
  /* Fixed max track so items don’t stretch full width */
  grid-template-columns: repeat(auto-fit, minmax(300px, 340px));
  justify-content: center;      /* center horizontally */
  align-content: start;         /* stay near the top */
}

.card figure img{
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.card img{width:100%;height:260px;object-fit:cover}
.card .pad{padding:.9rem}
.tag{font-size:.8rem;color:var(--muted)}
.kv{border:1px solid var(--border);border-radius:var(--radius);padding:.8rem .9rem;background:var(--card-muted)}

/* Buttons */
.btn{display:inline-block;padding:.6rem 1rem;border-radius:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);transition:filter .12s ease, transform .02s ease}
.btn:active{transform:translateY(1px)}
.btn:hover{filter:brightness(0.98)}
.btn-primary{background:var(--primary);color:var(--primary-ink);border:none}
.btn-primary:hover{filter:brightness(0.95)}
.btn-secondary{background:var(--secondary);color:var(--primary-ink);border:none}
.btn-secondary:hover{filter:brightness(0.95)}
.btn-tertiary{background:var(--tertiary);color:var(--primary-ink);border:none}
.btn-tertiary:hover{filter:brightness(0.95)}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--chip)}

/* Details */
details{border:1px solid var(--border);border-radius:var(--radius);padding:.8rem .9rem;background:var(--card)}
details+details{margin-top:.6rem}
hr{border:none;border-top:1px solid var(--border);margin:1.5rem 0}
figure{margin:0}

/* Focus ring for a11y */
:where(a,button,.btn,input,select,textarea,summary):focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 2px);
}

/* Utility helpers */
.bg-primary{background:var(--primary);color:var(--primary-ink)}
.bg-secondary{background:var(--secondary);color:var(--primary-ink)}
.bg-tertiary{background:var(--tertiary);color:var(--primary-ink)}

.meta {
  margin: 0.5rem 0 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--chip);
  border: 1px solid var(--chip-border);
}

/* Detail page niceties */
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
/* Show entire image if requested on a per-item basis */
.card img.full-hero { height: auto; }
/* (Default remains .card img { height: 260px; object-fit: cover; } ) */

.meta{margin:.5rem 0 1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.badge{display:inline-block;padding:.3rem .7rem;border-radius:999px;
  font-size:.85rem;font-weight:600;background:var(--chip);border:1px solid var(--chip-border)}

/* Image corner ribbon for “Sold Out” */
/* Base ribbon */
.ribbon {
  position: absolute;
  top: 10px;
  right: -10px;
  padding: .25rem .6rem;
  font-size: .8rem;
  font-weight: 700;
  transform: rotate(12deg);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* Coming Soon ribbon: keep purple */
.ribbon.status-coming-soon {
  background: var(--secondary);
  color: var(--primary-ink);
}

/* Sold Out ribbon: red */
.ribbon.status-sold-out {
  background: #c62828;
  color: #fff;
}


/* Status badge colors */
.badge.status-coming-soon {
  background: var(--secondary);     /* your Purpureus */
  color: var(--primary-ink);
  border-color: var(--secondary);
}

.badge.status-sold-out {
  background: #c62828;              /* a bold red */
  color: #fff;
  border-color: #a71c1c;
}

.logo img {
  display: block;
  height: 200px;   /* adjust as needed */
  width: auto;
}

/* high-contrast link just for the gradient card */
.link-on-gradient {
  color: #FFD166;                  /* warm gold reads on purple/blue */
  text-decoration-color: rgba(255, 209, 102, 0.7);
  text-underline-offset: .15em;
  text-decoration-thickness: .08em;
  font-weight: 600;
}
.link-on-gradient:visited { color: #FFD166; }  /* kill the default purple */
.link-on-gradient:hover,
.link-on-gradient:focus-visible {
  color: #FFE599;
  text-decoration-color: #FFE599;
  outline: none;
}
/* optional extra punch if needed */
@supports (text-shadow: 0 1px 1px #0000) {
  .link-on-gradient { text-shadow: 0 1px 1px rgba(0,0,0,.25); }
}