/* =========================================================
   High Tides Mama — shared stylesheet
   ========================================================= */
:root{
  --sand:#f6f0e4;
  --sand-deep:#efe4d0;
  --foam:#fffdf9;
  --ink:#233440;
  --ink-soft:#5b6d76;
  --tide:#2f6f76;
  --tide-deep:#204e54;
  --tide-light:#a8c9c9;
  --coral:#c97b52;
  --coral-soft:#e9b393;
  --sage:#8ba888;
  --plum:#6a5187;
  --line:#e5d9c2;
  --shadow: 0 10px 28px rgba(32,78,84,0.10);
  --shadow-lg: 0 20px 44px rgba(32,78,84,0.16);
  --radius: 18px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight:600;
  color:var(--tide-deep);
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ---------- disclosure bar ---------- */
.disclosure-bar{
  background:var(--tide-deep); color:#eaf3f1; font-size:0.8rem;
  text-align:center; padding:9px 16px;
}
.disclosure-bar a{ color:var(--sand); text-decoration:underline; }

/* ---------- header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,240,228,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(160deg, var(--tide) 0%, var(--tide-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  color:var(--sand); font-size:1.15rem; flex-shrink:0;
  box-shadow:0 4px 10px rgba(32,78,84,.25);
}
.brand-text{ font-family:'Fraunces',serif; font-weight:700; font-size:1.28rem; color:var(--tide-deep); line-height:1.1; }
.brand-text span{ display:block; font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--coral); margin-top:2px; }
nav.cat-nav{ display:flex; flex-wrap:wrap; gap:2px; justify-content:flex-end; }
nav.cat-nav a{
  font-size:0.78rem; font-weight:700; color:var(--ink-soft);
  padding:8px 11px; border-radius:999px; white-space:nowrap;
}
nav.cat-nav a:hover{ background:var(--sand-deep); color:var(--tide-deep); }
nav.cat-nav a.active{ background:var(--tide-deep); color:#fff; }

/* ---------- generic hero ---------- */
.hero{ max-width:900px; margin:0 auto; padding:60px 24px 34px; text-align:center; }
.hero .eyebrow{
  display:inline-block; font-size:0.74rem; font-weight:800; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--coral); margin-bottom:14px;
}
.hero h1{ font-size:clamp(2.1rem, 5vw, 3.25rem); margin:0 0 16px; line-height:1.12; }
.hero p{ font-size:1.08rem; color:var(--ink-soft); max-width:640px; margin:0 auto; }

/* ---------- wave divider ---------- */
.wave-divider{ display:block; width:100%; height:56px; margin-top:-2px; }
.wave-divider path{ fill:var(--foam); }

/* ---------- search ---------- */
.toolbar{ display:flex; justify-content:center; padding:0 24px 6px; }
#searchInput{
  width:100%; max-width:440px; padding:13px 20px; border-radius:999px;
  border:1px solid var(--line); background:var(--foam); font-size:0.95rem; color:var(--ink);
  font-family:inherit; box-shadow:var(--shadow);
}
#searchInput:focus{ outline:2px solid var(--tide-light); }

/* ---------- breadcrumb ---------- */
.breadcrumb{ font-size:0.82rem; color:var(--ink-soft); padding:20px 24px 0; max-width:1180px; margin:0 auto; }
.breadcrumb a{ color:var(--tide); font-weight:700; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ---------- category hero (on category pages) ---------- */
.cat-hero{
  max-width:1180px; margin:0 auto; padding:26px 24px 10px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.cat-hero .cat-badge{
  width:64px;height:64px;border-radius:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center; font-size:2rem;
  box-shadow:var(--shadow);
}
.cat-hero h1{ font-size:clamp(1.7rem,4vw,2.3rem); margin:0 0 4px; }
.cat-hero p{ color:var(--ink-soft); margin:0; max-width:640px; font-size:0.98rem; }

/* ---------- section wrappers ---------- */
main{ max-width:1180px; margin:0 auto; padding:20px 24px 70px; }
.section-label{ font-size:0.78rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--tide); margin:0 0 18px; }

/* ---------- product grid + card ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; }

.product-card{
  background:var(--foam); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

.product-image{
  aspect-ratio:4/3; position:relative; display:flex; align-items:center; justify-content:center;
  font-size:3.2rem; overflow:hidden;
}
.product-image::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 28% 22%, rgba(255,255,255,.4), transparent 60%);
}
.product-image .glyph{ position:relative; z-index:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)); }

.product-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex-grow:1; }
.product-body h3{ font-size:1.02rem; margin:0; line-height:1.32; color:var(--ink); font-weight:600; }
.product-body p{ margin:0; font-size:0.86rem; color:var(--ink-soft); flex-grow:1; }

.buy-btn{
  margin-top:8px; display:inline-flex; align-items:center; gap:6px; justify-content:center;
  background:var(--coral); color:#fff8f2; font-weight:700; font-size:0.85rem;
  padding:10px 14px; border-radius:10px; transition:background .15s ease, transform .1s ease;
}
.buy-btn:hover{ background:#b8683f; }
.buy-btn:active{ transform:scale(.97); }

/* ---------- category gradient tiles (assigned via inline style / data) ---------- */

/* ---------- DIY recipe cards ---------- */
.diy-card .product-body{ gap:10px; }
.badge{
  align-self:flex-start; font-size:0.64rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--tide-deep); background:var(--tide-light); padding:3px 9px; border-radius:999px;
}
.ingredients{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.ing-link{
  font-size:0.76rem; font-weight:700; color:var(--tide-deep);
  background:var(--sand-deep); padding:6px 11px; border-radius:999px; border:1px solid var(--line);
}
.ing-link:hover{ background:var(--tide-light); }

/* ---------- books ---------- */
.grid.books{ grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:26px; }
.book-card{ display:flex; flex-direction:column; gap:10px; }
.book-cover{
  aspect-ratio:2/3; border-radius:5px 10px 10px 5px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:22px 16px; box-shadow: var(--shadow-lg), inset -10px 0 14px -12px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.book-card:hover .book-cover{ transform:translateY(-4px) rotate(-0.6deg); }
.book-cover::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:9px;
  background:rgba(255,255,255,.22); border-radius:5px 0 0 5px;
}
.book-cover .book-title{ font-family:'Fraunces',serif; font-style:italic; font-weight:600; color:#fff; font-size:1.02rem; line-height:1.28; text-shadow:0 1px 3px rgba(0,0,0,.15); }
.book-cover .book-rule{ width:28px; height:2px; background:rgba(255,255,255,.55); margin:10px 0; }
.book-cover .book-author{ font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:0.04em; color:rgba(255,255,255,.88); }
.book-card .buy-btn{ margin-top:2px; }

/* ---------- homepage category grid ---------- */
.category-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:22px; margin-top:8px; }
.category-tile{
  background:var(--foam); border:1px solid var(--line); border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.category-tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.category-banner{
  height:118px; display:flex; align-items:center; justify-content:center; font-size:2.7rem; position:relative;
}
.category-banner::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 20%, rgba(255,255,255,.4), transparent 65%); }
.category-tile-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex-grow:1; }
.category-tile-body h3{ margin:0; font-size:1.18rem; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.category-tile-body .count{ font-size:0.66rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); background:var(--sand-deep); padding:3px 9px; border-radius:999px; white-space:nowrap; }
.category-tile-body p{ margin:0; font-size:0.86rem; color:var(--ink-soft); flex-grow:1; }
.explore-link{ font-weight:800; font-size:0.85rem; color:var(--tide-deep); display:inline-flex; align-items:center; gap:5px; margin-top:4px; }
.category-tile:hover .explore-link{ color:var(--coral); }

/* ---------- cross-category chips (bottom of category pages) ---------- */
.more-cats{ margin-top:64px; padding-top:36px; border-top:1px solid var(--line); }
.more-cats h4{ margin:0 0 16px; font-size:1rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:0.85rem;
  background:var(--foam); border:1px solid var(--line); padding:9px 15px; border-radius:999px;
  box-shadow:var(--shadow);
}
.chip:hover{ background:var(--sand-deep); }

.empty-state{ text-align:center; color:var(--ink-soft); padding:50px 0; display:none; }

/* ---------- footer ---------- */
footer.site-footer{ background:var(--tide-deep); color:#dfeae8; padding:50px 24px 34px; margin-top:20px; }
.footer-inner{ max-width:900px; margin:0 auto; text-align:center; }
footer.site-footer h3{ color:#fff; margin-top:0; }
footer.site-footer p{ font-size:0.88rem; color:#bcd2cf; line-height:1.75; }
footer.site-footer .signature{ margin-top:18px; font-family:'Fraunces',serif; font-style:italic; color:#fff; font-size:1.1rem; }
footer.site-footer .foot-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 4px; margin:22px 0 26px; }
footer.site-footer .foot-nav a{ font-size:0.78rem; font-weight:700; color:#cfe3e0; padding:6px 10px; border-radius:999px; }
footer.site-footer .foot-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }

@media (max-width:640px){
  nav.cat-nav{ justify-content:flex-start; }
  .hero{ padding:44px 20px 26px; }
  .cat-hero{ padding:22px 20px 6px; }
}