/* Just For Us -- shared marketing-site stylesheet.
   Used by every static page (home, about, category landers). Deliberately plain CSS with no
   build step, so it can be edited directly and served as-is from any static file server
   (including a Raspberry Pi). Palette matches the configurator app so the two feel like one
   site rather than two different products bolted together. */

:root{
  --paper:#FDF2E5;
  --surface:#FFFFFF;
  --ink:#2B2A28;
  --ink-soft:#78766F;
  --line:#ECE7DE;
  --accent:#FF6B4A;
  --accent-soft:#FFE8DF;
  --on-accent:#2B1200;
  --coral:#FF6B4A; --coral-soft:#FFE8DF;
  --teal:#2AA8A0; --teal-soft:#DFF3F0;
  --rose:#FF6F91; --rose-soft:#FFE3EA;
  --gold:#F0A93B; --gold-soft:#FFF1DA;
  --font-display:'Archivo', 'Arial Narrow', sans-serif;
  --font-body:'Archivo', system-ui, -apple-system, sans-serif;
  --font-script:'Dancing Script', cursive;
  --radius:14px;
  --shadow:0 1px 2px rgba(43,42,40,0.05), 0 10px 24px rgba(43,42,40,0.06);
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--font-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--accent);}
h1,h2,h3{font-family:var(--font-display); line-height:1.15; margin:0 0 0.5em;}
p{margin:0 0 1em;}
.container{width:100%; max-width:1080px; margin:0 auto; padding:0 20px;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px;}
.site-logo{display:flex; align-items:center;}
.site-logo img{height:64px; width:auto;}
.site-nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.site-nav a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"]{border-bottom-color:var(--accent); color:var(--accent);}
.nav-cta{
  background:var(--accent); color:#FFFFFF !important; padding:9px 16px !important; border-radius:8px;
  border-bottom:none !important;
}
.nav-cta:hover{filter:brightness(1.06); border-bottom:none !important;}

/* Small screens: nav wraps under the logo rather than needing a hamburger -- keeps this
   dependency-free (no JS toggle needed) while the page/category count stays this small. */
@media (max-width:720px){
  .site-header .container{flex-direction:column; align-items:center; gap:10px;}
  .site-logo{justify-content:center; width:100%;}
  .site-logo img{height:52px;}
  .site-nav{gap:14px; font-size:13.5px; justify-content:center;}
}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:56px 0 44px;}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(560px 320px at 8% -10%, var(--coral-soft) 0%, transparent 68%),
    radial-gradient(480px 300px at 95% -8%, var(--teal-soft) 0%, transparent 64%),
    radial-gradient(420px 260px at 50% 4%, var(--gold-soft) 0%, transparent 70%);
  opacity:0.9;
}
.hero .container{position:relative; z-index:1; max-width:760px; text-align:center;}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; padding:5px 13px;
  border:1px solid var(--line); border-radius:20px; background:var(--surface);
  font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
}
.hero h1{font-size:clamp(28px,4.2vw,42px); font-weight:800; letter-spacing:-0.02em;}
.hero p.lede{font-size:17px; color:var(--ink-soft); max-width:560px; margin:14px auto 0;}
.hero-rule{width:64px; height:4px; margin:26px auto 0; border-radius:2px; background:linear-gradient(90deg,var(--coral),var(--gold),var(--teal));}

/* ---------- category grid (home page) ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:36px 0 64px;}
@media (max-width:900px){ .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:480px){ .cat-grid{gap:10px;} }
.cat-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cat-card:hover{transform:translateY(-4px); border-color:var(--card-accent,var(--accent)); box-shadow:0 2px 6px rgba(43,42,40,0.07), 0 22px 36px rgba(43,42,40,0.12);}
.cat-card[data-cat="picture-frames"]{--card-accent:var(--coral);}
.cat-card[data-cat="keyrings"]{--card-accent:var(--teal);}
.cat-card[data-cat="glassware"]{--card-accent:var(--rose);}
.cat-card[data-cat="tumblers"]{--card-accent:var(--gold);}
.cat-card[data-cat="commemorative-coins"]{--card-accent:var(--coral);}
.cat-card[data-cat="table-placeholders"]{--card-accent:var(--teal);}
.cat-card[data-cat="pet-collars"]{--card-accent:var(--rose);}
.cat-card[data-cat="pens-pencils"]{--card-accent:var(--gold);}
.cat-card-icon{height:88px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, color-mix(in srgb, var(--card-accent,var(--accent)) 16%, transparent), transparent 82%);}
.cat-card-icon svg{width:44px; height:44px;}
.cat-card-body{padding:14px 16px 16px;}
.cat-card-title{display:block; font-size:15px; font-weight:700; margin-bottom:4px;}
.cat-card-desc{display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.45;}
.cat-card-badge{
  display:inline-block; margin-top:10px; font-size:10.5px; font-weight:700; letter-spacing:0.03em;
  text-transform:uppercase; color:var(--ink-soft); background:var(--line); border-radius:20px; padding:3px 10px;
}
.cat-card.live .cat-card-badge{background:var(--accent-soft); color:var(--on-accent);}

/* ---------- generic content sections (about + category landers) ---------- */
.page-hero{padding:48px 0 8px;}
.page-hero h1{font-size:clamp(26px,3.6vw,36px);}
.page-hero p.lede{font-size:16px; color:var(--ink-soft); max-width:640px;}
.section{padding:28px 0;}
.section h2{font-size:20px;}
.two-col{display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:start;}
@media (max-width:800px){ .two-col{grid-template-columns:1fr;} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);}
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:14.5px;
  padding:12px 22px; border-radius:9px; border:1px solid transparent;
}
.btn-primary{background:var(--accent); color:#FFFFFF;}
.btn-primary:hover{filter:brightness(1.05);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.coming-soon-banner{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:0.03em;
  text-transform:uppercase; color:var(--ink-soft); background:var(--line); border-radius:20px; padding:5px 14px; margin-bottom:14px;
}
ul.feature-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
ul.feature-list li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink);}
ul.feature-list svg{flex:none; margin-top:3px; width:16px; height:16px; color:var(--accent);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); margin-top:40px; padding:32px 0; background:var(--surface);}
.site-footer .container{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;}
.site-footer nav{display:flex; flex-wrap:wrap; gap:16px;}
.site-footer a{color:var(--ink-soft); text-decoration:none; font-size:13px;}
.site-footer a:hover{color:var(--accent);}
.site-footer .copyright{font-size:12.5px; color:var(--ink-soft);}