:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --border:#e6e9ef;
  --muted:#5e6a7a;
  --text:#0f1930;

  --accent:#19c3c1;      /* teal */
  --accent-2:#7c4dff;    /* violet */
  --accent-3:#ffe082;    /* warm highlight */
  --cta:#ff9f43;         /* orange button */
  --cta-2:#ff7f11;

  --ring:rgba(25,195,193,.25);
  --radius:16px;
  --shadow:0 10px 30px rgba(15,25,48,.08);
  --shadow-2:0 12px 32px rgba(15,25,48,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:
    radial-gradient(900px 500px at -10% -10%, rgba(124,77,255,.08), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(25,195,193,.10), transparent 60%),
    var(--surface-2);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}

.wrap{max-width:1200px;margin:0 auto;padding:18px 24px}
.muted{color:var(--muted)}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(6px);
}
.topbar .wrap{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:800}
.logo-dot{width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 6px 18px rgba(124,77,255,.25)}
.links{margin-left:auto;display:flex;gap:14px}
.links a{color:inherit;text-decoration:none}
.links a:hover{color:var(--accent-2)}

/* Hero */
.hero{
  background:
    linear-gradient(135deg, rgba(124,77,255,.08), rgba(25,195,193,.06)),
    radial-gradient(600px 220px at 10% 10%, rgba(25,195,193,.18), transparent 60%),
    var(--surface-2);
  border-bottom:1px solid var(--border);
}
.hero-inner{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:20px;
  padding:22px;
  box-shadow:var(--shadow);
}
.hero h1{margin:0 0 6px; font-size:1.6rem; background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{margin:0;color:var(--muted)}

/* Layout */
.layout{display:grid;gap:18px;grid-template-columns:280px 1fr;margin-top:12px}
@media (max-width:980px){.layout{grid-template-columns:1fr}}

/* Sidebar */
.sidebar{position:sticky; top:84px; align-self:start; display:grid; gap:12px}
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:14px;
}
.panel.small{padding:10px}
.panel h3{margin:0 0 10px;font-size:1rem;color:#111a33}
.input,.select{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;outline:none
}
.input:focus,.select:focus{box-shadow:0 0 0 4px var(--ring);border-color:#b7ecea}
.checklist{display:grid;gap:8px}
.checklist label{display:flex;align-items:center;gap:10px;cursor:pointer}
.checklist input{accent-color:var(--accent)}
.toggle{display:flex;align-items:center;gap:8px;cursor:pointer}

/* Content */
.content{display:grid;gap:16px}

/* Creator */
.creator{
  display:grid;grid-template-columns:84px 1fr;gap:12px;
  background:linear-gradient(180deg,#fff, #fff);
  border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:var(--shadow)
}
.creator-photo{width:84px;height:84px;border-radius:999px;object-fit:cover;border:3px solid #eef2f7}
.creator-top{display:flex;align-items:baseline;gap:10px}
.creator-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.creator-links a{border:1px solid var(--border);padding:6px 10px;border-radius:999px;text-decoration:none;color:inherit}
.creator-links a:hover{background:#f3f7ff;border-color:#d4d9e5}

/* Grid / List */
.view-list .grid{grid-template-columns:1fr}
.grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:1fr}}

/* Card */
.card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:#d7dcef}
.thumb{position:relative;display:grid;place-items:center;background:linear-gradient(180deg,#fbfbff,#f4f6ff)}
.thumb img{width:100%;height:100%;object-fit:contain;aspect-ratio:4/3}
.tag-badge{
  position:absolute;top:10px;left:10px;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:#fff;font-weight:700;font-size:.72rem;padding:6px 9px;border-radius:999px;box-shadow:0 6px 18px rgba(124,77,255,.25)
}
.body{padding:12px 14px 14px}
.title{margin:0 0 6px;font-size:1.02rem}
.brand-line{color:var(--muted)}
.meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.price{font-weight:800;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tags .chip{padding:6px 10px;border-radius:999px;border:1px solid #e0e3ec;background:#f8faff;color:#556070;font-size:.85rem}
.tags .chip:hover{border-color:#c7cce0}

/* CTA */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;border:1px solid #ff9a2b;
  background:linear-gradient(180deg,var(--cta),var(--cta-2));color:#201a10;
  font-weight:800;text-decoration:none;margin-top:12px
}
.btn:hover{filter:brightness(.98)}
.btn-sm{padding:8px 10px;border-radius:10px}

/* List row */
.row{
  display:grid;grid-template-columns:180px 1fr;gap:14px;
  border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow);padding:10px
}
.row-thumb img{width:100%;height:100%;object-fit:contain;aspect-ratio:4/3;background:#f6f7fb;border-radius:12px}
.row-body .desc{margin:.35rem 0;color:#3a4252}
.row-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}

.foot{border-top:1px solid var(--border);background:linear-gradient(180deg,#fff,#f6f8fb)}
.foot small{color:#647086}

/* Accessibility: focus-visible rings (invisible unless keyboard navigating) */
a:focus-visible, button:focus-visible, .select:focus-visible, .input:focus-visible, .chip:focus-visible, .toggle input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
  border-radius: 10px;
}

/* Reduced motion preference (invisible unless user opted in) */
@media (prefers-reduced-motion: reduce){
  .card{transition:none}
  .card:hover{transform:none}
}

/* --- Fix: keep View buttons aligned, let chips wrap naturally --- */

/* Make each card fill the grid cell height */
.grid { align-items: stretch; }

/* Ensure the card can stretch to the tallest in the row */
.card { height: 100%; display: flex; flex-direction: column; }

/* Turn the body into a flex column that can grow/shrink */
.card .body {
  display: flex;
  flex-direction: column;
  flex: 1;          /* take remaining space under the image */
  min-height: 0;    /* prevents overflow fights with chips */
}

/* Chips can wrap freely; don't cap height (no overlap/clipping) */
.card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
}

/* Pin the CTA row to the bottom of the body */
.card .cta-row {
  margin-top: auto;
  padding-top: 10px;   /* breathing room above the button */
}

/* Back to Top */
.back-to-top{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:44px; height:44px; border-radius:999px; border:1px solid #dfe3ee;
  display:grid; place-items:center; font-weight:900; line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; box-shadow:var(--shadow); cursor:pointer;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s, transform .2s, filter .15s;
}
.back-to-top:hover{ filter:brightness(.98) }
.back-to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto }
.back-to-top:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring) }
@media (max-width:720px){ .back-to-top{ right:14px; bottom:14px; } }

/* Center footer content (Site 2 + Site 3) */
footer.foot {
  text-align: center;
}

footer.foot .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px; /* space between the small text and links */
}

footer.foot small {
  display: block; /* ensures it breaks onto its own line */
}

footer.foot .foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* center the link row */
  gap: 8px;
}

footer.foot .foot-links span[aria-hidden="true"] {
  opacity: 0.6; /* subtle separators */
}

/* Mobile: hide sidebar, show mobile search between creator + products */
.mobile-search {
  display: none; /* hidden on desktop/tablet */
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr; /* single column stack */
  }

  .sidebar {
    display: none; /* no sidebar on phones */
  }

  .mobile-search {
    display: block;
    margin: 12px 0 16px;
  }
}

/* Full-width View buttons for cards (grid mode) */
.card .cta-row .btn {
  width: 100%;
  text-align: center;
  display: block;
}

/* Full-width View buttons in list mode */
.row .btn-sm {
  width: 100%;
  text-align: center;
  display: block;
  margin-top: 10px;
}

/* Simple centered pages (About / Contact / Affiliate) */
.simple-page main.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 48px; /* added 20px side padding for breathing room */
}