/*
Theme Name: Anant Printables
Theme URI: https://anantprintables.com
Author: Anant Printables
Author URI: https://anantprintables.com
Description: A premium, playful-yet-refined brand theme for Anant Printables — showcasing printable flashcards, coloring books, and learning activities, with calls-to-action that funnel visitors to the Etsy shop. Navy, coral, and cream palette with crayon-bright accents.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anant-printables
*/

/* ============================================================
   ANANT PRINTABLES — Brand Theme
   Palette: Ink Navy #1F3A5F · Coral #C8634F · Cream #F7F1E1
   Crayons: red #C0503D gold #E0A52E teal #3E9B86 blue #5B8DC9 plum #7B5BA0
   Type: Zilla Slab (display) + Rokkitt (accents) + Nunito Sans (body)
   ============================================================ */

:root{
  --navy:#1F3A5F;
  --navy-deep:#16293f;
  --coral:#C8634F;
  --coral-soft:#e08570;
  --cream:#F7F1E1;
  --cream-2:#FBF7EC;
  --paper:#F0E8D4;
  --ink:#22303F;
  --red:#C0503D; --gold:#E0A52E; --teal:#3E9B86; --blue:#5B8DC9; --plum:#7B5BA0;
  --shadow-sm:0 2px 8px rgba(31,58,95,.08);
  --shadow-md:0 12px 32px rgba(31,58,95,.12);
  --shadow-lg:0 24px 60px rgba(31,58,95,.18);
  --radius:18px;
  --radius-lg:28px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Nunito Sans","Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3,.display{font-family:"Zilla Slab",Georgia,serif;font-weight:700;line-height:1.08;color:var(--navy);letter-spacing:-.01em}
.eyebrow{font-family:"Rokkitt",serif;font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;color:var(--coral)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"Rokkitt",serif;font-weight:600;font-size:1.02rem;letter-spacing:.02em;
  padding:.85em 1.7em;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;
}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 8px 22px rgba(200,99,79,.32)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(200,99,79,.42)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--cream);transform:translateY(-3px)}
.btn-light{background:var(--cream);color:var(--navy)}
.btn-light:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,241,225,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(31,58,95,.08);
  transition:box-shadow .3s;
}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;width:auto}
.brand .brand-name{font-family:"Zilla Slab",serif;font-weight:700;font-size:1.32rem;color:var(--navy);letter-spacing:-.01em}
.brand .brand-name span{color:var(--coral)}
.menu{display:flex;align-items:center;gap:34px;list-style:none}
.menu a{font-family:"Rokkitt",serif;font-weight:500;font-size:1.05rem;color:var(--navy);position:relative;padding:4px 0;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--coral);transition:width .3s var(--ease)}
.menu a:hover{color:var(--coral)}
.menu a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:16px}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:24px;position:relative}
.menu-toggle span{position:absolute;left:0;width:100%;height:3px;background:var(--navy);border-radius:3px;transition:.3s}
.menu-toggle span:nth-child(1){top:0}.menu-toggle span:nth-child(2){top:10px}.menu-toggle span:nth-child(3){top:20px}

/* ---------- Hero ---------- */
.hero{position:relative;padding:84px 0 96px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.2vw,4.3rem);margin:.35em 0 .5em}
.hero h1 .swash{color:var(--coral);position:relative;white-space:nowrap}
.hero p.lead{font-size:1.18rem;color:#4a5a68;max-width:34ch;margin-bottom:2em}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-note{margin-top:1.6em;font-family:"Rokkitt",serif;color:#6b7886;font-size:1rem}
.hero-note strong{color:var(--navy)}
/* hero art: clean, static logo (no motion) */
.hero-art{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.hero-emblem{position:relative;width:80%;filter:drop-shadow(0 24px 48px rgba(31,58,95,.18))}

/* dotted divider */
.dots{display:flex;gap:10px;justify-content:center;padding:14px 0}
.dots i{width:9px;height:9px;border-radius:50%}
.dots i:nth-child(1){background:var(--red)}.dots i:nth-child(2){background:var(--gold)}
.dots i:nth-child(3){background:var(--teal)}.dots i:nth-child(4){background:var(--blue)}
.dots i:nth-child(5){background:var(--plum)}

/* ---------- Trust strip ---------- */
.trust{background:var(--navy);color:var(--cream);padding:22px 0}
.trust .wrap{display:flex;justify-content:space-around;gap:24px;flex-wrap:wrap;text-align:center}
.trust .item{font-family:"Rokkitt",serif;font-weight:500;font-size:1.04rem;display:flex;align-items:center;gap:10px}
.trust .item b{color:#fff}
.trust svg{width:22px;height:22px;flex:none;color:var(--gold)}

/* ---------- Section base ---------- */
section{position:relative}
.section{padding:96px 0}
.section-head{text-align:center;max-width:60ch;margin:0 auto 56px}
.section-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:.3em 0 .4em}
.section-head p{color:#566472;font-size:1.1rem}

/* ---------- Products grid ---------- */
.products{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.card{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  display:flex;flex-direction:column;border:1px solid rgba(31,58,95,.06);
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.card-thumb{aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-thumb .tag{position:absolute;top:14px;left:14px;background:var(--coral);color:#fff;font-family:"Rokkitt",serif;font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:.35em .9em;border-radius:999px}
.card-thumb .emoji{font-size:4.2rem;filter:drop-shadow(0 6px 12px rgba(0,0,0,.12))}
.card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.3rem;margin-bottom:.3em}
.card-body p{color:#5a6873;font-size:.98rem;flex:1;margin-bottom:1.1em}
/* card-foot: column layout — price+button row on top, etsy link below */
.card-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:14px;border-top:1.5px solid rgba(31,58,95,.07)}
.card-foot-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-family:"Zilla Slab",serif;font-weight:700;color:var(--navy);font-size:1.35rem;flex-shrink:0}
.card .shop-link{font-family:"Rokkitt",serif;font-weight:600;color:var(--coral);display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.card:hover .shop-link{gap:11px}
/* thumb color themes */
.t-red{background:linear-gradient(140deg,#f6d9d2,#eebcae)}
.t-gold{background:linear-gradient(140deg,#f8e7c2,#f1d399)}
.t-teal{background:linear-gradient(140deg,#cfe9e1,#a9d8c9)}
.t-blue{background:linear-gradient(140deg,#d6e4f5,#b6cef0)}
.t-plum{background:linear-gradient(140deg,#e2d8ee,#cdbbe2)}
.t-coral{background:linear-gradient(140deg,#f6d9d2,#eeb6a6)}

/* ---------- About / story ---------- */
.about{background:var(--navy);color:var(--cream);overflow:hidden}
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about h2{color:#fff;font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:.5em}
.about .eyebrow{color:var(--gold)}
.about p{color:#cdd6df;font-size:1.08rem;margin-bottom:1.1em;max-width:46ch}
.about-card{background:linear-gradient(150deg,#24456b,#1a3354);border-radius:var(--radius-lg);padding:8px;box-shadow:var(--shadow-lg);position:relative}
.about-card .inner{border:2px dashed rgba(255,255,255,.22);border-radius:22px;padding:40px 34px;text-align:center}
.about-card .big{font-family:"Zilla Slab",serif;font-size:3.4rem;color:#fff;line-height:1}
.about-card .lbl{font-family:"Rokkitt",serif;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;color:var(--gold);margin-top:.4em}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.about-stats .s{text-align:center}
.about-stats .s b{display:block;font-family:"Zilla Slab",serif;font-size:1.9rem;color:#fff}
.about-stats .s span{font-size:.86rem;color:#aab6c2}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step{text-align:center;position:relative}
.step .num{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Zilla Slab",serif;font-weight:700;font-size:1.5rem;color:#fff;box-shadow:var(--shadow-md)}
.step:nth-child(1) .num{background:var(--coral)}
.step:nth-child(2) .num{background:var(--teal)}
.step:nth-child(3) .num{background:var(--blue)}
.step h3{font-size:1.25rem;margin-bottom:.4em}
.step p{color:#5a6873;font-size:1rem;max-width:30ch;margin:0 auto}

/* ---------- Newsletter ---------- */
.cta-band{background:linear-gradient(135deg,var(--coral),#d2755f);color:#fff;text-align:center;border-radius:var(--radius-lg);padding:64px 28px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1)}
.cta-band::before{width:240px;height:240px;top:-90px;left:-60px}
.cta-band::after{width:180px;height:180px;bottom:-70px;right:-40px}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem);position:relative}
.cta-band p{color:rgba(255,255,255,.92);font-size:1.1rem;max-width:48ch;margin:.6em auto 1.8em;position:relative}
.signup{display:flex;gap:12px;max-width:480px;margin:0 auto;position:relative;flex-wrap:wrap;justify-content:center}
.signup input{flex:1;min-width:220px;border:0;border-radius:999px;padding:.95em 1.4em;font-family:"Nunito Sans",sans-serif;font-size:1rem}
.signup .btn-light{flex:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:#aeb9c4;padding:64px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-brand img{height:54px;margin-bottom:16px}
.foot-brand p{max-width:34ch;font-size:.98rem}
.site-footer h4{font-family:"Rokkitt",serif;color:#fff;letter-spacing:.06em;text-transform:uppercase;font-size:.9rem;margin-bottom:16px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:10px}
.site-footer a:hover{color:var(--coral)}
.socials{display:flex;gap:12px;margin-top:8px}
.socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s}
.socials a:hover{background:var(--coral);transform:translateY(-3px)}
.socials svg{width:18px;height:18px;color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;text-align:center;font-size:.9rem;color:#8794a1}

/* ---------- Reveal disabled (no motion) ---------- */
.reveal{opacity:1;transform:none;transition:none}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-art{max-width:420px;margin:0 auto;order:-1}
  .about .wrap{grid-template-columns:1fr;gap:40px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .menu,.nav-cta .btn{display:none}
  .menu-toggle{display:block}
  .menu.open{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;background:var(--cream-2);padding:24px;gap:18px;box-shadow:var(--shadow-md)}
  .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:40px}
  .trust .wrap{flex-direction:column;gap:14px}
  .foot-grid{grid-template-columns:1fr}
  .section{padding:64px 0}
}

/* ============================================================
   ENTRY CONTENT — Page & Post Typography
   Covers all elements rendered by the_content() on pages
   and blog posts. Scoped to .entry-content so homepage and
   other sections are unaffected.
   ============================================================ */

.entry-content {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--ink, #2C3A47);
  word-break: break-word;
}

/* ── Spacing reset: every direct child gets consistent breath ── */
.entry-content > * { margin-top: 0; margin-bottom: 1.35em; }
.entry-content > *:last-child { margin-bottom: 0; }

/* ── Headings ─────────────────────────────────────────────── */

/* H1 — page title (rare inside content but styled for completeness) */
.entry-content h1 {
  font-family: "Zilla Slab", serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  margin-top: 1.6em;
  margin-bottom: .55em;
  padding-bottom: .35em;
  border-bottom: 3px solid var(--coral);
}

/* H2 — major section heading */
.entry-content h2 {
  font-family: "Zilla Slab", serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin-top: 1.8em;
  margin-bottom: .5em;
  padding-left: 14px;
  border-left: 4px solid var(--coral);
}

/* H3 — sub-section heading */
.entry-content h3 {
  font-family: "Rokkitt", serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--coral);
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: .4em;
  letter-spacing: .01em;
}

/* H4 — minor heading / label */
.entry-content h4 {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 1.4em;
  margin-bottom: .3em;
}

/* H5 / H6 — rarely used; keep minimal */
.entry-content h5,
.entry-content h6 {
  font-family: "Nunito Sans", sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #566472;
  margin-top: 1.2em;
  margin-bottom: .25em;
  letter-spacing: .04em;
}

/* Remove top margin when heading directly follows another heading */
.entry-content h2 + h3,
.entry-content h3 + h4 { margin-top: .6em; }

/* ── Paragraphs ───────────────────────────────────────────── */
.entry-content p {
  margin-bottom: 1.2em;
  hyphens: auto;
}

/* Lead paragraph (first <p> after an h2 gets a slightly larger size) */
.entry-content h2 + p {
  font-size: 1.1rem;
  color: #3a4a58;
}

/* ── Links ────────────────────────────────────────────────── */
.entry-content a {
  color: var(--coral);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.entry-content a:hover {
  color: var(--navy);
  text-decoration-color: var(--coral);
}

/* ── Bold & Italic ────────────────────────────────────────── */
.entry-content strong, .entry-content b {
  font-weight: 700;
  color: var(--navy);
}
.entry-content em, .entry-content i {
  font-style: italic;
  color: inherit;
}

/* ── Unordered lists — custom coral bullet ─────────────────── */
.entry-content ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.2em;
}
.entry-content ul li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: .5em;
  line-height: 1.7;
}
.entry-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}
/* Nested list — smaller hollow bullet */
.entry-content ul ul { margin-top: .4em; margin-bottom: .4em; padding-left: 1.2em; }
.entry-content ul ul li::before {
  background: transparent;
  border: 2px solid var(--coral);
  width: 7px;
  height: 7px;
}

/* ── Ordered lists — coral counter ───────────────────────── */
.entry-content ol {
  list-style: none;
  counter-reset: anant-ol;
  padding-left: 0;
  margin-bottom: 1.2em;
}
.entry-content ol li {
  counter-increment: anant-ol;
  position: relative;
  padding-left: 2.2em;
  margin-bottom: .55em;
  line-height: 1.7;
}
.entry-content ol li::before {
  content: counter(anant-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Zilla Slab", serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--coral);
  min-width: 1.6em;
}
.entry-content ol ol { margin-top: .4em; margin-bottom: .4em; padding-left: 1.2em; }

/* ── Blockquote ───────────────────────────────────────────── */
.entry-content blockquote {
  position: relative;
  margin: 2em 0;
  padding: 1.1em 1.5em 1.1em 1.8em;
  background: var(--cream-2);
  border-left: 5px solid var(--coral);
  border-radius: 0 12px 12px 0;
  font-family: "Rokkitt", serif;
  font-size: 1.12rem;
  color: var(--navy);
  font-style: italic;
}
.entry-content blockquote::before {
  content: '\201C';
  position: absolute;
  top: -.1em;
  left: .5em;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--coral);
  opacity: .25;
  font-family: "Zilla Slab", serif;
}
.entry-content blockquote p { margin-bottom: 0; font-style: italic; }
.entry-content blockquote cite,
.entry-content blockquote footer {
  display: block;
  margin-top: .6em;
  font-style: normal;
  font-size: .88rem;
  color: #7a8794;
  font-family: "Nunito Sans", sans-serif;
}
.entry-content blockquote cite::before { content: '— '; }

/* ── Horizontal rule ──────────────────────────────────────── */
.entry-content hr {
  border: none;
  height: 0;
  border-top: 2px solid transparent;
  border-image: linear-gradient(to right, transparent, var(--coral), var(--navy), transparent) 1;
  margin: 2.5em 0;
  opacity: .45;
}

/* ── Images ───────────────────────────────────────────────── */
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 1.5em auto;
  box-shadow: 0 4px 18px rgba(31,58,95,.10);
}
.entry-content figure {
  margin: 1.8em 0;
  text-align: center;
}
.entry-content figcaption {
  font-size: .85rem;
  color: #8794a1;
  font-style: italic;
  margin-top: .5em;
  font-family: "Rokkitt", serif;
}

/* ── Tables ───────────────────────────────────────────────── */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: .97rem;
  border-radius: 10px;
  overflow: hidden;
}
.entry-content th {
  background: var(--navy);
  color: #fff;
  font-family: "Zilla Slab", serif;
  font-size: .95rem;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  letter-spacing: .03em;
}
.entry-content td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(31,58,95,.1);
  vertical-align: top;
}
.entry-content tr:nth-child(even) td { background: var(--cream-2); }
.entry-content tr:last-child td { border-bottom: none; }
.entry-content tr:hover td { background: rgba(200,99,79,.06); }

/* ── Inline code ──────────────────────────────────────────── */
.entry-content code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .88em;
  background: var(--cream-2);
  color: var(--coral);
  padding: .15em .45em;
  border-radius: 5px;
  border: 1px solid rgba(200,99,79,.2);
}

/* Code block */
.entry-content pre {
  background: var(--navy-deep);
  color: #cfe0f5;
  padding: 1.2em 1.4em;
  border-radius: 12px;
  overflow-x: auto;
  margin: 1.8em 0;
  font-size: .9rem;
  line-height: 1.65;
}
.entry-content pre code {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  font-size: inherit;
}

/* ── Callout / info box (WordPress Group block with class) ─── */
.entry-content .callout,
.entry-content .wp-block-group.is-style-callout {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-2) 100%);
  border: 1.5px solid rgba(200,99,79,.3);
  border-radius: 14px;
  padding: 1.2em 1.5em;
  margin: 2em 0;
}

/* ── Definition / description lists ──────────────────────── */
.entry-content dl { margin: 1.4em 0; }
.entry-content dt {
  font-weight: 700;
  color: var(--navy);
  font-family: "Rokkitt", serif;
  margin-top: .8em;
}
.entry-content dd {
  margin-left: 1.6em;
  color: #3a4a58;
}

/* ── Page title (the <h2> rendered by page.php / single.php) ─ */
.section-head h2 {
  font-family: "Zilla Slab", serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.15;
}
.section-head .eyebrow {
  font-family: "Rokkitt", serif;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral);
  display: block;
  margin-bottom: 8px;
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 600px) {
  .entry-content h1 { font-size: 1.8rem; }
  .entry-content h2 { font-size: 1.4rem; padding-left: 10px; }
  .entry-content h3 { font-size: 1.15rem; }
  .entry-content blockquote { padding: .9em 1em .9em 1.3em; font-size: 1rem; }
  .entry-content table { font-size: .88rem; }
  .entry-content th, .entry-content td { padding: 7px 10px; }
}

/* ============================================================
   NEW FEATURES v1.1
   1. Dual-CTA product cards + hover preview
   2. Age/Subject filter bar
   3. Testimonials section
   4. FAQ accordion
   5. Back to Top button
   6. Single product: gallery + sticky checkout bar
   7. Footer: expanded social icons
   ============================================================ */

/* ── 1a. Dual-CTA product cards ─────────────────────────────── */
.btn-buy{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--coral);color:#fff;
  border:none;border-radius:999px;
  padding:.52em 1.05em;
  font-family:"Nunito Sans",sans-serif;font-size:.83rem;font-weight:700;
  cursor:pointer;text-decoration:none;white-space:nowrap;flex-shrink:0;
  transition:background .2s,transform .15s,box-shadow .2s;
}
.btn-buy:hover{background:#b55540;transform:translateY(-2px);box-shadow:0 6px 18px rgba(200,99,79,.3)}
.btn-buy:active{transform:translateY(0)}
.etsy-alt-link{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.77rem;color:var(--muted);text-decoration:none;
  border-bottom:1px dashed #c4cdd6;padding-bottom:2px;
  width:fit-content;transition:color .18s;
}
.etsy-alt-link svg{opacity:.6;flex-shrink:0;transition:opacity .18s}
.etsy-alt-link:hover{color:var(--coral)}
.etsy-alt-link:hover svg{opacity:1}
.card-age{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--coral);background:rgba(200,99,79,.08);
  border-radius:999px;padding:.2em .65em;margin-bottom:6px;
}

/* ── 1b. Product hover preview image ────────────────────────── */
.thumb-wrap{position:relative;width:100%;height:100%;overflow:hidden}
.thumb-primary,.thumb-hover{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .35s ease,transform .35s ease;
  backface-visibility:hidden;
}
.thumb-primary{opacity:1;transform:scale(1)}
.thumb-hover{opacity:0;transform:scale(1.04)}
.thumb-hover img{width:100%;height:100%;object-fit:cover}
.card:hover .thumb-primary{opacity:0;transform:scale(.96)}
.card:hover .thumb-hover{opacity:1;transform:scale(1)}

/* Grid loading */
.grid.loading{opacity:.5;pointer-events:none;transition:opacity .2s}

/* ── 2. Filter bar — dropdown version ───────────────────────── */
.filter-bar{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;
  margin-bottom:40px;padding:20px 24px;
  background:#fff;border:1.5px solid rgba(31,58,95,.1);
  border-radius:14px;
  box-shadow:0 2px 10px rgba(31,58,95,.05);
}
.filter-dd-group{display:flex;flex-direction:column;gap:5px;flex:1;min-width:160px}
.filter-dd-label{
  font-family:"Nunito Sans",sans-serif;
  font-size:.65rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
}
.filter-select{
  appearance:none;-webkit-appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1.5px solid #d9cfc0;border-radius:8px;
  padding:.55em 2.2em .55em .9em;
  font-family:"Nunito Sans",sans-serif;font-size:.88rem;font-weight:600;color:var(--navy);
  cursor:pointer;width:100%;
  transition:border-color .18s,box-shadow .18s;
}
.filter-select:hover{border-color:var(--navy)}
.filter-select:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(200,99,79,.12)}
.filter-reset-btn{
  background:transparent;border:1.5px solid var(--coral);color:var(--coral);
  border-radius:8px;padding:.54em 1.2em;
  font-family:"Nunito Sans",sans-serif;font-size:.88rem;font-weight:700;
  cursor:pointer;white-space:nowrap;align-self:flex-end;
  transition:all .18s;
}
.filter-reset-btn:hover{background:var(--coral);color:#fff}
.no-results{
  grid-column:1/-1;text-align:center;padding:56px 0;
  color:var(--muted);font-family:"Rokkitt",serif;font-size:1.1rem;
}
.reset-filter-btn{background:none;border:none;color:var(--coral);cursor:pointer;font-size:inherit;text-decoration:underline}
@media(max-width:600px){
  .filter-bar{padding:14px 16px;gap:12px}
  .filter-dd-group{min-width:calc(50% - 6px)}
  .filter-reset-btn{width:100%}
}

/* ── 3. Testimonials ─────────────────────────────────────────── */
.testimonials{background:var(--cream-2)}
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:40px;
}
.testi-card{
  background:#fff;border-radius:18px;
  padding:28px 26px 22px;
  box-shadow:0 2px 12px rgba(31,58,95,.07);
  border:1.5px solid rgba(31,58,95,.07);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .22s,box-shadow .22s;
}
.testi-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(31,58,95,.12)}
.testi-stars{color:#E0A52E;font-size:1rem;letter-spacing:2px}
.testi-card blockquote{
  font-family:"Rokkitt",serif;font-size:1rem;
  color:#3a4a58;line-height:1.7;
  margin:0;font-style:italic;flex:1;
}
.testi-author{
  display:flex;align-items:center;gap:12px;
  margin-top:4px;
}
.testi-initials{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--coral),#e08570);
  color:#fff;font-family:"Zilla Slab",serif;
  font-size:1.1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.testi-author strong{
  display:block;font-size:.9rem;color:var(--navy);font-family:"Nunito Sans",sans-serif;
}
.testi-author span{
  font-size:.78rem;color:#8794a1;font-family:"Rokkitt",serif;
}
.testi-flag{font-size:1.3rem;margin-left:auto;flex-shrink:0}
@media(max-width:920px){.testi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.testi-grid{grid-template-columns:1fr}}

/* ── 4. FAQ Accordion ───────────────────────────────────────── */
.faq-section{background:var(--cream)}
.faq-list{max-width:760px;margin:40px auto 0;display:flex;flex-direction:column;gap:0}
.faq-item{
  border-bottom:1.5px solid rgba(31,58,95,.1);
}
.faq-item:first-child{border-top:1.5px solid rgba(31,58,95,.1)}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 4px;text-align:left;
  font-family:"Zilla Slab",serif;font-size:1.05rem;
  font-weight:600;color:var(--navy);
  transition:color .18s;
}
.faq-q:hover{color:var(--coral)}
.faq-q span{flex:1}
.faq-icon{
  width:22px;height:22px;flex-shrink:0;color:var(--coral);
  transition:transform .28s ease;
}
.faq-item.open .faq-icon{transform:rotate(180deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .32s cubic-bezier(.4,0,.2,1);
}
.faq-a p{
  font-family:"Nunito Sans",sans-serif;font-size:.97rem;
  color:#3a4a58;line-height:1.75;
  padding:0 4px 20px;margin:0;
}

/* ── 5. Back to Top ─────────────────────────────────────────── */
.back-to-top{
  position:fixed;bottom:28px;right:28px;z-index:900;
  width:48px;height:48px;border-radius:50%;
  background:var(--navy);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(31,58,95,.3);
  opacity:0;transform:translateY(16px);
  transition:opacity .28s ease,transform .28s ease,background .2s;
  pointer-events:none;
}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:var(--coral)}
.back-to-top svg{width:22px;height:22px}

/* ── 6a. Single product gallery ─────────────────────────────── */
.single-product-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
}
.sp-gallery{}
.sp-main-img{
  border-radius:16px;overflow:hidden;
  box-shadow:0 6px 28px rgba(31,58,95,.12);
  margin-bottom:12px;background:var(--cream-2);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
}
.sp-main-img img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.sp-thumbs{
  display:flex;gap:8px;flex-wrap:wrap;
}
.sp-thumb{
  width:68px;height:68px;border-radius:10px;cursor:pointer;
  border:2.5px solid transparent;background-size:cover;background-position:center;
  transition:border-color .18s,transform .18s;flex-shrink:0;
}
.sp-thumb.active,.sp-thumb:hover{border-color:var(--coral);transform:scale(1.05)}
.sp-details{}
.sp-details h1{
  font-family:"Zilla Slab",serif;font-size:2rem;color:var(--navy);
  line-height:1.2;margin-bottom:10px;
}
.sp-price{
  font-family:"Zilla Slab",serif;font-size:2rem;color:var(--coral);
  font-weight:700;margin-bottom:18px;
}
.sp-description{margin-bottom:28px}
.sp-ctas{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-bottom:20px}
.btn-buy-lg{
  font-size:1rem;padding:.75em 1.6em;
  background:var(--coral);color:#fff;border-radius:999px;
  font-family:"Nunito Sans",sans-serif;font-weight:700;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .2s,box-shadow .2s,transform .15s;
}
.btn-buy-lg:hover{background:#b55540;box-shadow:0 8px 24px rgba(200,99,79,.35);transform:translateY(-2px)}
.sp-etsy-link{font-size:.9rem;color:#8794a1;text-decoration:none;border-bottom:1px dashed #c4cdd6}
.sp-etsy-link:hover{color:var(--coral)}
.sp-trust{
  display:flex;flex-wrap:wrap;gap:8px 16px;
  font-family:"Rokkitt",serif;font-size:.85rem;color:#8794a1;
}
@media(max-width:768px){
  .single-product-wrap{grid-template-columns:1fr;gap:28px}
  .sp-details h1{font-size:1.5rem}
  .sp-price{font-size:1.5rem}
}

/* ── 6b. Sticky Mobile Checkout Bar ─────────────────────────── */
.sticky-checkout{
  position:fixed;bottom:0;left:0;right:0;z-index:999;
  background:#fff;border-top:1.5px solid rgba(31,58,95,.12);
  padding:14px 20px;
  box-shadow:0 -4px 24px rgba(31,58,95,.12);
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:none; /* hidden on desktop */
}
.sticky-checkout.sticky-visible{transform:translateY(0)}
.sticky-checkout-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:480px;margin:0 auto}
.sticky-price{font-family:"Zilla Slab",serif;font-size:1.35rem;font-weight:700;color:var(--coral);flex-shrink:0}
.sticky-buy-btn{flex:1;text-align:center;justify-content:center;font-size:.9rem;padding:.65em 1em}
/* Only show on mobile */
@media(min-width:769px){.sticky-checkout{display:none!important}}
@media(max-width:768px){.sticky-checkout{display:block}}

/* ── 7. Footer: social icon sizing ─────────────────────────── */
/* socials already styled in base CSS — ensure new icons match */
.socials a svg{width:18px;height:18px}
