footer .social-links a {
  color: var(--accent);
  text-decoration: none;
  margin: 0 10px;
  font-weight: 600;
}

footer .social-links a:hover {
  text-decoration: underline;
}

.back-btn {
  background-color: #ffd36f;
  color: #201104;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.7);
  border: none;
}

/* Style for back buttons */
.back-btn {
  display: inline-block;
  padding: 10px 16px;
  background-color: #FF8A65;
  color: white;
  border-radius: 12px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 12px;
}
.back-btn:hover {
  background-color: #FF6F61;
}

body { margin: 0; font-family: sans-serif; }

/* HOME */
.hero { position: relative; }
.banner { width: 100%; height: 70vh; object-fit: cover; display: block; }

.menu {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 10px;
  flex-wrap: wrap; /* FIX OVERLAPPING */
}

.menu a {
  background: white;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
}

.store-btn { background: #ffd966; }

/* SUBPAGES */
.content-body {
  background: #fafafa;
  padding: 20px;
}

.content-header {
  text-align: center;
  margin-bottom: 20px;
}

.back-home {
  display: inline-block;
  margin-top: 6px;
  text-decoration: none;
  background: #FF8A65;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
}

.content-main {
  max-width: 800px;
  margin: auto;
  font-size: 1rem;
}

/* COSMIC STORE */
.store-body { background: #fff3fc; padding: 20px; }
.store-header { text-align: center; margin-bottom: 20px; }
.store-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.store-card { background: white; padding: 16px; border-radius: 12px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.store-card button { padding: 8px 16px; border: none; border-radius: 6px; background: #ffe066; font-weight: bold; }


/* FOOTER */
.site-footer {
  background: #c9ffb3;
  color: #fbeeff;
  padding: 18px 16px 22px;
  font-size: 13px;
}
.site-footer a { color: #ffd6ff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.footer-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.footer-brand {
  margin: 0;
  opacity: 0.85;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.footer-label {
  opacity: 0.8;
  margin-right: 8px;
}
.app-badges .badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #2a1a3a;
  border: 1px solid rgba(255,255,255,0.2);
  margin-right: 6px;
  font-size: 12px;
}
.social-icons .icon-pill {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  padding: 3px 6px;
  border-radius: 999px;
  background: #2a1a3a;
  border: 1px solid rgba(255,255,255,0.2);
  margin-right: 4px;
}
@media (max-width: 600px) {
  .footer-row { flex-direction: column; align-items: flex-start; }
}


/* Southern Comfort & Teaser */
.southern-comfort {
  max-width: 1100px;
  margin: 30px auto 10px;
  padding: 0 16px 20px;
}
.southern-comfort h2 {
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.southern-comfort p {
  margin-bottom: 12px;
}
.southern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 10px;
}
.southern-card {
  background: #fff4ea;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.95rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.teaser-block {
  max-width: 1100px;
  margin: 0 auto 30px;
  padding: 0 16px 30px;
}
.teaser-block h2 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}
.teaser-block p {
  margin-bottom: 12px;
}
.teaser-frame {
  position: relative;
  max-width: 640px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.teaser-frame img {
  display: block;
  width: 100%;
}
.play-pill {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(15, 8, 40, 0.85);
  color: #fdf7ff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
}

/* Badge utility (for monetization page) */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fbe8ff;
  color: #5a2b6e;
  font-size: 0.8rem;
}


footer {
  background: #f8eaff;
  padding: 20px 0;
}

/* Utility: force black text when needed */
.text-black {
  color: #000 !important;
}

.footer-copy {
  text-align: center;
  font-size: 12px;
  color: #000;
  line-height: 1.4;
}


body {
  background: #fff9ff; /* soft pastel off-white pink */
  color: #222;
}

header {
  background: #f3dfff; /* pastel header */
  padding: 20px;
}

main {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
}

a {
  color: #8a4fc7; /* soft lavender link */
}
a:hover {
  opacity: 0.7;
}
#cosmic-arcade-app .cosmic-panel{ display:none; padding:16px; }
#cosmic-arcade-app .cosmic-panel.active{ display:block; }
#cosmic-arcade-app button{
  background:#FF8A65;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
}

/* ================================
   CHAKRA PAGE – CLEAN LAYOUT FIX
   Scoped & App Safe
   ================================ */

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* Warm pastel gradient for an inviting feeling */
  background: linear-gradient(180deg, #FFF8F2 0%, #FFF0E6 100%);
  color: #2E2E2E;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Main wrapper */
#chakra-app,
body > div {
  max-width: 100%;
  margin: 0 auto;
}

/* Remove all absolute positioning disasters */
/* Keep box-sizing globally, but avoid forcing position which breaks native controls (selects, dropdowns). */
* { box-sizing: border-box; }

/* Content container */
.container,
main,
section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

/* Chakra cards grid */
.cards,
.chakra-cards,
.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  align-items: stretch;
}
/* Continued cleaned stylesheet */
/* Reset dangerous positioning and chakra app fixes */
#chakra-app *{position:relative;box-sizing:border-box}
#chakra-app .container,#chakra-app .chakra-container,#chakra-app main{max-width:1000px;margin:0 auto;padding:16px}
#chakra-app .cards,#chakra-app .chakra-cards,#chakra-app .grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
#chakra-app .card,#chakra-app .chakra-card{width:100%;max-width:none;background:#FFFFFF;border-radius:16px;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
#chakra-app button{background:#FF8A65;color:#1f1f1f;border:none;border-radius:12px;padding:10px 12px;font-weight:700}
@media (max-width:768px){#chakra-app{font-size:16px}}

/* HOME */
.hero{position:relative}
.banner{width:100%;height:70vh;object-fit:cover;display:block}
.menu{position:absolute;bottom:20px;width:100%;display:flex;justify-content:center;gap:12px;padding:0 10px;flex-wrap:wrap}
.menu a{background:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:bold;font-size:.9rem}
.store-btn{background:#ffd966}

/* SUBPAGES */
.content-body{background:#fffaf6;padding:20px}
.content-header{text-align:center;margin-bottom:20px}
.back-home{display:inline-block;margin-top:6px;text-decoration:none;background:#fff;padding:6px 14px;border-radius:6px}
.content-main{max-width:800px;margin:auto;font-size:1rem}

/* COSMIC STORE */
.store-body{background:#fff3fc;padding:20px}.store-header{text-align:center;margin-bottom:20px}.store-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.store-card{background:#fff;padding:16px;border-radius:12px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,0.08)}.store-card button{padding:8px 16px;border:none;border-radius:6px;background:#ffe066;font-weight:700}

/* FOOTER */
.site-footer{background:#FFEFE8;color:#4a2a2a;padding:18px 16px 22px;font-size:13px}.site-footer a{color:#b86b6b;text-decoration:none}.site-footer a:hover{text-decoration:underline}
.footer-inner{max-width:1100px;margin:0 auto}.footer-main{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.footer-brand{margin:0;opacity:.85}.footer-links{display:flex;flex-wrap:wrap;gap:8px 14px}
.store-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.store-card { background: white; padding: 16px; border-radius: 12px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.store-card button { padding: 8px 16px; border: none; border-radius: 6px; background: #ffe066; font-weight: bold; }


/* FOOTER */
.site-footer {
  background: #c9ffb3;
  color: #fbeeff;
  padding: 18px 16px 22px;
  font-size: 13px;
}
.site-footer a { color: #ffd6ff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.footer-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.footer-brand {
  margin: 0;
  opacity: 0.85;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.footer-label {
  opacity: 0.8;
  margin-right: 8px;
}
.app-badges .badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #2a1a3a;
  border: 1px solid rgba(255,255,255,0.2);
  margin-right: 6px;
  font-size: 12px;
}
.social-icons .icon-pill {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  padding: 3px 6px;
  border-radius: 999px;
  background: #2a1a3a;
  border: 1px solid rgba(255,255,255,0.2);
  margin-right: 4px;
}
@media (max-width: 600px) {
  .footer-row { flex-direction: column; align-items: flex-start; }
}


/* Southern Comfort & Teaser */
.southern-comfort {
  max-width: 1100px;
  margin: 30px auto 10px;
  padding: 0 16px 20px;
}
.southern-comfort h2 {
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.southern-comfort p {
  margin-bottom: 12px;
}
.southern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 10px;
}
.southern-card {
  background: #fff4ea;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.95rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.teaser-block {
  max-width: 1100px;
  margin: 0 auto 30px;
  padding: 0 16px 30px;
}
.teaser-block h2 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}
.teaser-block p {
  margin-bottom: 12px;
}
.teaser-frame {
  position: relative;
  max-width: 640px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.teaser-frame img {
  display: block;
  width: 100%;
}
.play-pill {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(15, 8, 40, 0.85);
  color: #fdf7ff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
}

/* Badge utility (for monetization page) */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fbe8ff;
  color: #5a2b6e;
  font-size: 0.8rem;
}

/* Utility sections used by index backup */
.section-soft{
  padding:20px;
  background:linear-gradient(180deg,#fde8f0,#f7e9ff);
  border-radius:12px;
  margin:20px 0;
  color:#000;
}
.section-alt{
  padding:20px;
  background:linear-gradient(180deg,#fff3f7,#f3e8ff);
  border-radius:12px;
  margin:20px 0;
  color:#000;
}

.compact-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px}

/* Small utilities */
.mt-6{margin-top:6px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.text-center{text-align:center}
.h2-tight{margin:0 0 6px}
.muted-note{margin:0;font-size:0.9rem;color:#9e4a09}
.note-white-small{font-size:13px;color:#ffffff}
.flex-label{display:flex;gap:10px;align-items:center;margin-top:15px}
.small-faded{margin-top:6px;font-size:11px;opacity:0.8}
.hidden{display:none}
.center-muted{text-align:center;color:#f6f0ff;margin:6px 0 12px}

/* Section variants */
.section-vip{padding:30px;background:#FFF0F5;border-radius:14px}
.muted-panel{max-width:900px;margin:8px auto 0 auto;padding:8px 12px;color:#bdaee8}
.h2-small-muted{font-size:14px;margin:10px 0 6px;color:#f1e3ff}
.para-tight{margin:6px 0 6px}
.para-tight-bottom0{margin:6px 0 0}
.footer-note{margin-top:18px;text-align:center;font-size:12px}
.link-pill{color:#ffd6ff;text-decoration:none;font-weight:600}
.centered-block{text-align:center;margin:20px}
.home-link{font-size:20px;text-decoration:none}

/* Footer */
.footer-compact{text-align:center;padding:20px;font-size:14px;margin-top:40px}

/* Images */
.img-max-260{max-width:260px}

/* Main content wrapper used by policy pages */
.content-main-max{max-width:780px;margin:32px auto;padding:16px}

/* Misc */
.note-muted{font-size:13px;color:#ccc}
.small-muted-brown{font-size:0.85rem;color:#a0746a}
.hr-soft{opacity:0.08;margin:18px 0;border:none;height:1px;background:rgba(0,0,0,0.05)}
.vip-top-link{display:inline-block;padding:10px 16px;background:#FFC0CB;color:#000;border-radius:8px;font-weight:600;text-decoration:none}




.footer {
  background: #FFEFE8;
  padding: 20px 0;
}

.footer-copy {
  text-align: center;
  font-size: 12px;
  color: #2b1a18;
  line-height: 1.4;
}
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}

.popup-box {
  background: #fff;
  max-width: 500px;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  cursor: pointer;
}
footer{
  background: #FFEFE8;
  margin-top: 18px;
  text-align: center;
}
.back-wrap button {
  background: rgba(156,242,255,0.02);
  border: 1px solid rgba(156,242,255,0.08);
  color: #e6fbff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding:6px 10px;
  border-radius:8px;
}

/* Helpers used by lotto-numberlogy.html and other pages */
.site-link-btn{
  display:inline-block;
  text-decoration:none;
  color:#e6fbff;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(156,242,255,0.28);
  background: rgba(156,242,255,0.04);
  box-shadow: 0 6px 18px rgba(8,10,20,0.12);
}

/* Orange CTA button for email/submit actions */
.btn-orange{
  background: linear-gradient(90deg,#ff9bd0,#ff8a65);
  color: #120814;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(8,10,20,0.12);
}
.global-back-btn{
  position:fixed;
  right:16px;
  bottom:92px;
  z-index:10010;
  display:inline-block;
  padding:10px 12px;
  border-radius:999px;
  background: #e6e6e9;
  color:#111;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(8,10,20,0.18);
  border:1px solid rgba(0,0,0,0.08);
}
.global-back-btn:active{ transform: translateY(1px); }
.store-open-btn{
  display:inline-block;
  background:#aef0ff;
  color:#02111a;
  padding:8px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
}
.small-input{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
  max-width:220px;
}

/* Floating scroll-to-top button (light grey) */
.global-scroll-btn{
  position:fixed;
  right:16px;
  bottom:152px;
  z-index:10010;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background:#efefef;
  color:#111;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(8,10,20,0.14);
  border:1px solid rgba(0,0,0,0.06);
  opacity:0; transform:translateY(6px); transition:opacity .22s ease,transform .18s ease;
}
.global-scroll-btn.show{ opacity:1; transform:translateY(0); }
.global-scroll-btn:active{ transform: translateY(1px); }

/* Left-side vertical nav for quick section jumps */
.side-nav{
  position:fixed;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  z-index:10012;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.side-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background:#efefef;
  color:#111;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(8,10,20,0.12);
  border:1px solid rgba(0,0,0,0.06);
  font-weight:700;
}
.side-nav a.active{ background:#ffdfe8; color:#120814; box-shadow:0 10px 26px rgba(0,0,0,0.14); }
.side-nav a:active{ transform: translateY(1px); }

/* Modal for ingredient popups and small dialogs */
.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,0.6); }
.modal.show { display: block; }
.modal-content { background: #fff; margin: 6% auto; padding: 20px; border-radius: 8px; width: 90%; max-width: 600px; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.modal-close { float: right; background: transparent; border: none; font-size: 1.2rem; cursor: pointer; }
.modal h3 { margin-top: 0; }

/* Recipe modal backdrop (recipes.html) */
.recipe-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 11000; align-items: center; justify-content: center; }
.recipe-modal-backdrop.show { display: flex; }
.recipe-modal-backdrop .recipe-modal { background: #fff; border-radius: 12px; padding: 18px; max-width: 820px; width: 94%; box-shadow: 0 14px 60px rgba(0,0,0,0.45); position: relative; }
.recipe-modal-close { position: absolute; right: 12px; top: 8px; background: transparent; border: none; font-size: 1.3rem; cursor: pointer; }
/* prevent page scroll when modal open */
.modal-open { overflow: hidden; }

.small-video { max-width: 320px; width: 100%; height: auto; border: 1px solid #ddd; border-radius: 6px; }

/* QR image small helper */
.img-qr-small { width: 120px; height: 120px; max-width: 100%; display: inline-block; border-radius: 6px; }

/* end of stylesheet */



/* Chakra-style slot machine visuals (added by assistant) */
.chakra-bg{background: radial-gradient(circle at 20% 10%, #ffefd5 0%, transparent 18%), linear-gradient(180deg,#1b0f2a 0%,#0f1020 60%); color: #fff;}
.chakra-bg .slot-shell{background: linear-gradient(135deg, rgba(255,240,220,0.04), rgba(10,8,20,0.7));}
.reels{display:flex;gap:10px;justify-content:center;margin:18px 0}
.reel{width:84px;height:84px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.35));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,0.6);}
.reel .symbol{display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 160ms linear}
.reel.spin .symbol{animation:reelSpin 180ms steps(1) infinite}
@keyframes reelSpin{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.symbol-char{font-size:30px}

/* small confetti canvas fallback */
#confettiCanvas{position:fixed;inset:0;pointer-events:none;display:none;z-index:9999}

/* ===== Blog & Podcast styles - soft pastel, readable, comment UI ===== */
.post-list, .podcast-episodes { display: grid; gap: 18px; }
.post-summary, .podcast-card { background: #ffffff; border-radius: 12px; padding: 14px; box-shadow: 0 12px 30px rgba(16,24,40,0.06); }
.post-summary h2, .podcast-card h2, .podcast-card h3 { margin: 0 0 8px; color: #2a2430; }
.post-summary .excerpt, .podcast-desc { color: #5f5f6b; margin-bottom:10px }
.post-meta, .podcast-meta { font-size: 13px; color: #8c7b7f; margin-bottom:8px }
.read-more-btn { margin-top:8px }

.comment-section { margin-top:14px; border-top:1px dashed rgba(0,0,0,0.06); padding-top:12px }
.comment { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px }
.comment .avatar { width:40px; height:40px; border-radius:8px; background:#fff3f0; display:flex;align-items:center;justify-content:center;font-weight:700;color:#5a3a3a }
.comment .body { flex:1 }
.comment .body .meta { font-size:12px;color:#8c7b7f;margin-bottom:4px }
.comment .body .text { background:#fffaf6;padding:10px;border-radius:8px }
.comment-form { display:flex; flex-direction:column; gap:8px; margin-top:8px }
.comment-form input, .comment-form textarea { padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.06); font-family:inherit }
.comment-form button { align-self:flex-end;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#ffd36f,#ffb347);border:none;color:#2b1820;font-weight:700;cursor:pointer }
.comment-actions { margin-top:6px; font-size:12px; color:#7a6a6a }
.mark-answer { background:transparent;border:1px solid rgba(0,0,0,0.06);padding:6px 8px;border-radius:6px;cursor:pointer }

@media (max-width:700px){ .post-summary, .podcast-card{ padding:12px } .comment .avatar{width:36px;height:36px} }

/* end blog/podcast styles */
/* ===== Recipe page styles (moved from recipes.html) ===== */
:root{ --recipe-bg: #fffaf6; --recipe-card:#ffffff; --recipe-soft:#f7f3f8; --recipe-accent1:#ffe9d1; --recipe-accent2:#ffd6b3 }
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:16px 0;padding:0}
.recipe-card{background:var(--recipe-card);border-radius:14px;padding:16px;box-shadow:0 12px 30px rgba(16,24,40,0.06);cursor:pointer;display:flex;flex-direction:column;min-height:220px}
.recipe-thumb{width:100%;height:150px;border-radius:12px;background-size:cover;background-position:center;background-color:var(--recipe-soft);margin-bottom:14px;flex-shrink:0}
h2{font-size:19px;margin:0 0 8px;color:#1c1c1c;line-height:1.2}
.recipe-card-tagline{font-size:13px;color:#6b6b6b;margin-bottom:10px}
.recipe-view-btn{align-self:flex-start;padding:10px 14px;border-radius:999px;border:none;background:linear-gradient(90deg,var(--recipe-accent1),var(--recipe-accent2));color:#2b0f1a;font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(255,183,122,0.08)}
.recipe-inline{max-height:0;overflow:hidden;transition:max-height 260ms ease;background:#fff;margin-top:12px;border-radius:10px;padding:0 14px}
.recipe-inline.open{padding:14px}
.recipe-inline ul,.recipe-inline ol{margin:8px 0 14px 20px;color:#2b2b2b}
.recipe-filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.recipe-filter-btn{padding:8px 12px;border-radius:999px;border:1px solid rgba(0,0,0,0.06);background:#fff;color:#2b2b2b;cursor:pointer}
.recipe-filter-btn.active{background:linear-gradient(90deg,var(--recipe-accent1),var(--recipe-accent2));color:#120814;border-color:transparent;box-shadow:0 8px 20px rgba(255,183,122,0.12)}
.recipe-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(8,6,20,0.5);align-items:center;justify-content:center;z-index:11000}
.recipe-modal-backdrop.show{display:flex}
.recipe-modal{background:#fff;border-radius:12px;padding:20px;max-width:880px;width:94%;box-shadow:0 30px 120px rgba(22,22,55,0.14)}
.recipe-modal-close{position:absolute;right:12px;top:8px;background:transparent;border:none;font-size:1.3rem;cursor:pointer}
.age-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:12000}
.age-box{background:#fff;padding:18px;border-radius:12px;max-width:480px;color:#1b1b1b}
.footer-compact{padding:20px 12px}
@media (max-width:640px){.recipe-thumb{height:120px}h1{font-size:20px}.recipe-card{min-height:180px}}
@media print{body{background:#fff;color:#000}.recipe-thumb{display:none}header,.recipe-filter-bar,footer,.recipe-view-btn{display:none!important}.recipe-modal,.recipe-inline{max-height:none!important}.recipe-card{box-shadow:none;border:0;background:transparent;padding:0}h1{color:#000}a[href]:after{content:" (" attr(href) ")"}}

/* end recipe styles */

/* ==========================
   Sarai Store Theme (centralized)
   ========================== */
.sarai-store-page {
  --sarai-accent-1: #0d6e6b; /* deep teal */
  --sarai-accent-2: #22b3a6; /* mint */
  --sarai-cta: #FF6B6B; /* warmer coral CTA */
  --sarai-price: #d84315;
}

/* Centralized Sarai store rules (overrides live site inline styles) */
.sarai-store-page .offer-banner{
  background: linear-gradient(90deg,var(--sarai-accent-1),var(--sarai-accent-2));
  color:#fff;
  padding:14px;
  font-weight:800;
  border-radius:10px;
  box-shadow: 0 6px 20px rgba(13,110,107,0.12);
}
.sarai-store-page .sarai-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.sarai-store-page .product-card {
  background: linear-gradient(180deg, #ffffff, #fffdfb);
  padding:14px;
  border-radius:14px;
  box-shadow: 0 8px 26px rgba(11,32,48,0.06);
  text-align:center;
  transition: transform 220ms ease, box-shadow 220ms ease;
  border: 1px solid rgba(10,10,10,0.03);
  position: relative;
  overflow: visible;
}
.sarai-store-page .product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(13,110,107,0.12); }
.sarai-store-page .product-img-wrap{ position:relative; display:block; }
.sarai-store-page .product-img-wrap::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('tools/snfb-seal.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48%;
  opacity: 0.10;
  transform: rotate(-8deg);
}
.sarai-store-page .product-img { width:100%; height:180px; object-fit:cover; border-radius:10px; border-bottom: 6px solid rgba(34,179,166,0.06); }
.sarai-store-page .price { color: var(--sarai-price); font-weight:800; margin:8px 0; }
.sarai-store-page .buy-btn {
  display:inline-block;
  text-decoration:none;
  background: var(--sarai-cta);
  color: #ffffff;
  padding:10px 16px;
  border-radius:10px;
  font-weight:800;
  box-shadow: 0 6px 18px rgba(13,110,107,0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms;
}
.sarai-store-page .buy-btn:hover{ transform: translateY(-2px); opacity: 0.98; }

/* Quick Add overlay button */
.sarai-store-page .quick-add {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.94);
  color: var(--sarai-cta);
  border: 1px solid rgba(0,0,0,0.06);
  padding:6px 10px;
  border-radius:8px;
  font-weight:700;
  display: none;
  text-decoration: none;
}

.sarai-store-page .product-card:hover .quick-add { display: inline-block; }

/* Sarai hero layout */
.sarai-store-page .sarai-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
  padding: 18px;
  background: linear-gradient(90deg, rgba(13,110,107,0.03), rgba(255,255,255,0));
  border-radius: 12px;
}
.sarai-store-page .sarai-hero .hero-inner{
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.sarai-store-page .hero-img{
  width:100%;height:220px;border-radius:12px;object-fit:cover;background-size:cover;background-position:center;border:1px solid rgba(0,0,0,0.03);
}
@media(min-width:900px){
  .sarai-store-page .sarai-hero{ grid-template-columns: 1fr 1fr; padding:28px }
  .sarai-store-page .sarai-hero .hero-inner{ padding-right:18px }
  .sarai-store-page .hero-img{ height:320px }
  .sarai-store-page .sarai-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:22px }
}

  /* Hero background image moved from inline to centralized CSS */
  .sarai-store-page .hero-img{ background-image: url('images/watermarked/hero_sarai.svg'); }

  /* Mini cart badge in header */
  .sarai-store-page .mini-cart{ position: absolute; right: 18px; top: 20px; background: var(--sarai-accent-2); color: #fff; padding:6px 10px; border-radius:999px; font-weight:700; box-shadow:0 6px 18px rgba(13,110,107,0.12); }
  .sarai-store-page .mini-cart a{ color:#fff; text-decoration:none }

  /* Cart modal styles */
  .cart-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.45); display:none; align-items:center; justify-content:center; z-index:12000 }
  .cart-modal-overlay.show{ display:flex }
  .cart-modal{ width:92%; max-width:760px; background:#fff; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.25); padding:18px; max-height:82vh; overflow:auto }
  .cart-modal h3{ margin-top:0 }
  .cart-list{ margin:12px 0; display:flex; flex-direction:column; gap:12px }
  .cart-item{ display:flex; gap:12px; align-items:center; padding:10px; border-radius:8px; background:linear-gradient(180deg,#fff,#fffbf8); border:1px solid rgba(0,0,0,0.04) }
  .cart-item .ci-name{ flex:1 }
  .cart-item .ci-controls{ display:flex; gap:6px; align-items:center }
  .cart-totals{ text-align:right; font-weight:700; margin-top:12px }
  .cart-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px }
  .cart-actions .btn{ padding:8px 12px; border-radius:8px; text-decoration:none; font-weight:700 }
  .btn-primary{ background:var(--sarai-cta); color:#fff }
  .btn-secondary{ background:#f3f3f3; color:#111 }

  /* Toast undo styles */
  .mini-toast{ position:fixed; right:18px; bottom:18px; background:#222; color:#fff; padding:10px 14px; border-radius:8px; z-index:13000; display:flex; gap:10px; align-items:center }
  .mini-toast button{ background:transparent; color:#ffd966; border:1px solid rgba(255,217,102,0.12); padding:6px 8px; border-radius:6px; font-weight:700; cursor:pointer }


/* Accessibility helpers */
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Hero CTA class */
.sarai-store-page .hero-cta{ margin-top:8px; display:inline-block }