/*
Theme Name: Bloom Puppies
Theme URI: https://bloompuppies.com
Description: Conversion-focused puppy marketplace theme. Trust-first architecture with breed taxonomy, guided buying flow and WooCommerce integration.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: bloom
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* brand - deliberately NOT HonestPet's violet; Bloom owns this */
  --green-900:#132A20; --green-700:#1F4A36; --green-600:#2F6B4F;
  --green-500:#3E8763; --green-100:#DCEBE2; --green-50:#EFF6F1;
  --apricot-600:#C9743F; --apricot-500:#E8955C; --apricot-200:#F8DCC6; --apricot-50:#FDF4EC;

  --ink:#16211C; --ink-2:#3D4A44; --ink-3:#6B7873;
  --cream:#FBF8F3; --paper:#FFFFFF; --line:#E6E2DA; --line-2:#F0EDE6;

  --ok:#2F6B4F; --warn:#B45309; --hot:#C2410C;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(19,42,32,.06), 0 1px 3px rgba(19,42,32,.05);
  --sh-2:0 4px 12px rgba(19,42,32,.07), 0 2px 4px rgba(19,42,32,.04);
  --sh-3:0 18px 40px rgba(19,42,32,.12), 0 4px 10px rgba(19,42,32,.06);

  --ff-display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --wrap:1220px; --gut:clamp(16px,4vw,28px);
  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:48px; --s6:72px; --s7:104px;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:var(--ff-display); font-weight:600; line-height:1.12; letter-spacing:-.02em; margin:0 0 .5em; color:var(--green-900)}
h1{font-size:clamp(2.3rem,5.4vw,4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.75rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--green-500); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:clamp(56px,8vw,var(--s7))}
.sec--tint{background:var(--cream)}
.sec--green{background:var(--green-900); color:#EAF2ED}
.sec--green h2,.sec--green h3{color:#fff}
.eyebrow{font-family:var(--ff-display); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-600); margin:0 0 var(--s2)}
.sec--green .eyebrow{color:var(--apricot-500)}
.lede{font-size:clamp(1.02rem,1.5vw,1.15rem); color:var(--ink-2); max-width:62ch}
.sec--green .lede{color:#BFD3C8}
.sec-head{max-width:64ch; margin-bottom:var(--s5)}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head--row{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3); max-width:none}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--ff-display); font-weight:600; font-size:.97rem;
  padding:.85em 1.6em; border-radius:var(--r); border:1.5px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--green-600); color:#fff; box-shadow:var(--sh-2)}
.btn--primary:hover{background:var(--green-700); box-shadow:var(--sh-3)}
.btn--ghost{background:transparent; color:var(--green-700); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--green-500); background:var(--green-50)}
.btn--light{background:#fff; color:var(--green-700)}
.btn--accent{background:var(--apricot-500); color:#3A1F0C}
.btn--accent:hover{background:var(--apricot-600); color:#fff}
.btn--sm{padding:.6em 1.15em; font-size:.88rem}
.btn--block{width:100%}

/* ============================================================
   4. HEADER
   ============================================================ */
.hdr{position:sticky; top:0; z-index:80; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2)}
.hdr__in{display:flex; align-items:center; gap:var(--s4); min-height:70px}
.brand{display:flex; align-items:center; gap:.55rem; font-family:var(--ff-display); font-weight:700; font-size:1.22rem; color:var(--green-700); letter-spacing:-.02em; flex-shrink:0}
.brand svg{flex-shrink:0}
.nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav a{padding:.5rem .78rem; border-radius:var(--r-sm); font-size:.92rem; font-weight:500; color:var(--ink-2); white-space:nowrap}
.nav a:hover{background:var(--green-50); color:var(--green-700)}
.hdr__cta{display:flex; align-items:center; gap:.6rem; flex-shrink:0}
.hdr__tel{display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.92rem; color:var(--green-700); padding:.5rem .8rem; border:1.5px solid var(--line); border-radius:var(--r-sm)}
.hdr__tel:hover{border-color:var(--green-500); background:var(--green-50)}
.burger{display:none; background:none; border:0; padding:.5rem; color:var(--green-900)}
@media(max-width:1080px){
  .nav,.hdr__tel{display:none}
  .burger{display:block}
  .nav.is-open{display:flex; position:absolute; inset:70px 0 auto; flex-direction:column; align-items:stretch; background:#fff; padding:var(--s3); gap:2px; border-bottom:1px solid var(--line); box-shadow:var(--sh-3)}
  .nav.is-open a{padding:.8rem}
}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{position:relative; background:var(--green-900); color:#fff; overflow:hidden}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover; opacity:.5}
.hero__media::after{content:''; position:absolute; inset:0; background:linear-gradient(105deg,var(--green-900) 4%,rgba(19,42,32,.86) 40%,rgba(19,42,32,.34) 100%)}
.hero__in{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s5); align-items:center; padding-block:clamp(56px,9vw,110px)}
.hero h1{color:#fff; margin-bottom:var(--s3)}
.hero h1 em{font-style:normal; color:var(--apricot-500)}
.hero__sub{font-size:clamp(1.02rem,1.6vw,1.18rem); color:#CBDCD2; max-width:46ch; margin-bottom:var(--s4)}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4)}
.hero__rating{display:flex; align-items:center; gap:.7rem; font-size:.9rem; color:#BFD3C8}
.stars{color:var(--apricot-500); letter-spacing:.1em; font-size:1rem}

/* floating trust panel - HonestPet's strongest structural idea */
.trust{background:rgba(255,255,255,.09); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg); padding:var(--s4)}
.trust__t{font-family:var(--ff-display); font-weight:600; font-size:1.02rem; color:#fff; margin-bottom:var(--s3)}
.trust__list{display:grid; gap:var(--s3); margin:0; padding:0; list-style:none}
.trust__item{display:flex; gap:.85rem; align-items:flex-start}
.trust__ico{flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:rgba(232,149,92,.18); color:var(--apricot-500)}
.trust__item strong{display:block; font-family:var(--ff-display); font-size:.94rem; font-weight:600; color:#fff; line-height:1.3}
.trust__item span{font-size:.83rem; color:#AEC5B8; line-height:1.5}
@media(max-width:900px){ .hero__in{grid-template-columns:1fr} }

/* ============================================================
   6. STAT BAR
   ============================================================ */
.stats{background:var(--paper); border-bottom:1px solid var(--line-2)}
.stats__in{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s3); padding-block:var(--s4)}
.stat{text-align:center; padding-inline:var(--s2)}
.stat b{display:block; font-family:var(--ff-display); font-size:clamp(1.3rem,2.4vw,1.75rem); font-weight:700; color:var(--green-700); line-height:1.15}
.stat span{font-size:.82rem; color:var(--ink-3)}
.slot{background:var(--apricot-50); border:1px dashed var(--apricot-500); border-radius:var(--r-sm); padding:.15em .5em; color:var(--apricot-600); font-size:.82em; font-weight:600; font-family:var(--ff-body)}

/* ============================================================
   7. CARD GRIDS
   ============================================================ */
.grid{display:grid; gap:var(--s3)}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column}
.card:hover{transform:translateY(-3px); box-shadow:var(--sh-3)}
.card__media{position:relative; aspect-ratio:4/3; background:var(--green-50); overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:cover}
.card__ph{width:100%; height:100%; display:grid; place-items:center; color:var(--green-500); background:repeating-linear-gradient(45deg,var(--green-50),var(--green-50) 12px,#fff 12px,#fff 24px)}
.card__body{padding:var(--s3); display:flex; flex-direction:column; gap:.4rem; flex:1}
.card__title{font-family:var(--ff-display); font-weight:600; font-size:1.06rem; color:var(--green-900); margin:0}
.card__meta{font-size:.85rem; color:var(--ink-3); margin:0}
.card__price{font-family:var(--ff-display); font-weight:700; font-size:1.1rem; color:var(--green-700)}
.card__foot{margin-top:auto; padding-top:var(--s2)}

.badges{position:absolute; top:10px; left:10px; display:flex; flex-wrap:wrap; gap:5px; z-index:2}
.badge{font-family:var(--ff-display); font-size:.7rem; font-weight:600; letter-spacing:.02em; padding:.28em .6em; border-radius:var(--r-sm); background:rgba(255,255,255,.95); color:var(--green-900); box-shadow:var(--sh-1)}
.badge--ready{background:var(--green-600); color:#fff}
.badge--video{background:var(--green-900); color:#fff}
.badge--hot{background:var(--hot); color:#fff}

/* breed tile */
.breed{position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1; background:var(--green-100); border:1px solid var(--line)}
.breed img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.breed:hover img{transform:scale(1.05)}
.breed__ph{width:100%;height:100%;display:grid;place-items:center;color:var(--green-500);background:repeating-linear-gradient(45deg,var(--green-50),var(--green-50) 12px,#fff 12px,#fff 24px)}
.breed__cap{position:absolute; inset:auto 0 0; padding:2.4rem .9rem .8rem; background:linear-gradient(transparent,rgba(19,42,32,.88)); color:#fff}
.breed__cap b{display:block; font-family:var(--ff-display); font-size:1rem; font-weight:600}
.breed__cap span{font-size:.78rem; color:#C7D8CE}

/* ============================================================
   8. STEPS / FEATURES
   ============================================================ */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s4)}
.step{position:relative; padding-top:var(--s4)}
.step::before{counter-increment:s; content:counter(s); position:absolute; top:0; left:0; width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--green-600); color:#fff; font-family:var(--ff-display); font-weight:700; font-size:1rem}
.step h3{margin:.6rem 0 .35rem; font-size:1.08rem}
.step p{font-size:.92rem; color:var(--ink-2); margin:0}

.feat{display:flex; gap:var(--s3); align-items:flex-start}
.feat__ico{flex-shrink:0; width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:var(--green-50); color:var(--green-600)}
.sec--green .feat__ico{background:rgba(232,149,92,.16); color:var(--apricot-500)}
.feat h3{font-size:1.04rem; margin:.15rem 0 .3rem}
.feat p{font-size:.92rem; color:var(--ink-2); margin:0}
.sec--green .feat p{color:#BFD3C8}

/* split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,var(--s6)); align-items:center}
@media(max-width:860px){ .split{grid-template-columns:1fr} }
.split__media{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:5/4; background:var(--green-50)}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__ph{width:100%;height:100%;display:grid;place-items:center;color:var(--green-500);background:repeating-linear-gradient(45deg,var(--green-50),var(--green-50) 14px,#fff 14px,#fff 28px)}

/* ============================================================
   9. TESTIMONIALS / TEAM
   ============================================================ */
.quote{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2)}
.quote p{font-size:.98rem; color:var(--ink-2); margin:0; flex:1}
.quote__by{display:flex; align-items:center; gap:.7rem; margin-top:var(--s2)}
.quote__av{width:40px;height:40px;border-radius:var(--r-pill);background:var(--green-100);display:grid;place-items:center;font-family:var(--ff-display);font-weight:700;color:var(--green-700);font-size:.9rem}
.quote__by b{font-family:var(--ff-display);font-size:.92rem;display:block;color:var(--green-900)}
.quote__by span{font-size:.79rem;color:var(--ink-3)}

.person{text-align:center}
.person__av{aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;background:var(--green-50);margin-bottom:var(--s2)}
.person__av img{width:100%;height:100%;object-fit:cover}
.person__ph{width:100%;height:100%;display:grid;place-items:center;color:var(--green-500);background:repeating-linear-gradient(45deg,var(--green-50),var(--green-50) 12px,#fff 12px,#fff 24px)}
.person b{font-family:var(--ff-display);font-size:.98rem;display:block;color:var(--green-900)}
.person span{font-size:.83rem;color:var(--ink-3)}

/* ============================================================
   10. FAQ / QUIZ
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:1.15rem 2.5rem 1.15rem 0; font-family:var(--ff-display); font-weight:600; font-size:1.02rem; color:var(--green-900); cursor:pointer; list-style:none; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; position:absolute; right:.3rem; top:1rem; font-size:1.5rem; font-weight:400; color:var(--green-600); line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq__a{padding:0 2.5rem 1.3rem 0; color:var(--ink-2); font-size:.95rem}
.faq__a p:last-child{margin-bottom:0}

.quiz{background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--r-lg); padding:clamp(24px,4vw,var(--s5))}
.quiz__opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s2); margin-top:var(--s3)}
.quiz__opt{background:#fff; border:1.5px solid var(--line); border-radius:var(--r); padding:1rem; text-align:left; font-family:var(--ff-display); font-weight:600; font-size:.95rem; color:var(--green-900); transition:.15s}
.quiz__opt:hover{border-color:var(--green-500); background:var(--green-50); transform:translateY(-2px)}
.quiz__prog{font-size:.8rem; color:var(--ink-3); font-weight:600; letter-spacing:.04em; text-transform:uppercase}

/* ============================================================
   11. BREED ARCHIVE
   ============================================================ */
.specs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s2); margin:var(--s4) 0}
.spec{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3)}
.spec dt{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.25rem}
.spec dd{margin:0;font-family:var(--ff-display);font-weight:600;font-size:1rem;color:var(--green-900)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.82rem;padding:.3em .7em;border-radius:var(--r-sm);background:var(--green-50);color:var(--green-700);border:1px solid var(--green-100)}
.empty{text-align:center;padding:var(--s6) var(--s3);border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--cream)}
.empty h3{margin-bottom:.4rem}
.empty p{color:var(--ink-3);margin:0 auto var(--s3);max-width:44ch}
.breadcrumb{font-size:.85rem;color:var(--ink-3);margin-bottom:var(--s3)}
.credit{font-size:.78rem;color:var(--ink-3);margin:0 0 var(--s3)}
.credit a{text-decoration:underline; text-underline-offset:2px}
.credit a:hover{color:var(--green-600)}
.breadcrumb a:hover{color:var(--green-600)}

/* ============================================================
   12. ENQUIRY FORM
   ============================================================ */
.enq{background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,3vw,var(--s4)); margin-top:var(--s4)}
.enq__h{font-size:clamp(1.2rem,2.2vw,1.5rem); margin:0 0 .35rem}
.enq__sub{font-size:.92rem; color:var(--ink-2); margin:0 0 var(--s3)}
.enq__form{display:grid; gap:var(--s2)}
.enq__row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
@media(max-width:560px){ .enq__row{grid-template-columns:1fr} }
.enq__field{margin:0; display:grid; gap:.35rem}
.enq__field label{font-family:var(--ff-display); font-weight:600; font-size:.88rem; color:var(--green-900)}
.enq__opt{font-family:var(--ff-body); font-weight:400; color:var(--ink-3); font-size:.82rem}
.enq input[type=text],.enq input[type=email],.enq input[type=tel],.enq textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r);
  padding:.7rem .85rem; transition:border-color .15s ease, box-shadow .15s ease;
}
.enq input:focus,.enq textarea:focus{outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px rgba(62,135,99,.16)}
.enq textarea{resize:vertical; min-height:110px; line-height:1.55}
.enq__consent{margin:.3rem 0 .2rem; font-size:.86rem; color:var(--ink-2)}
.enq__consent label{display:flex; gap:.6rem; align-items:flex-start; cursor:pointer}
.enq__consent input{margin-top:.25rem; flex-shrink:0; width:17px; height:17px; accent-color:var(--green-600)}
/* honeypot: off-screen rather than display:none, which some bots detect */
.enq__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.enq__ok{background:var(--green-50); border:1px solid var(--green-100); border-radius:var(--r); padding:var(--s3)}
.enq__ok strong{display:block; font-family:var(--ff-display); font-size:1.05rem; color:var(--green-700); margin-bottom:.3rem}
.enq__ok p{margin:0; font-size:.92rem; color:var(--ink-2)}
.enq__steps{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;gap:.5rem;font-size:.89rem;color:var(--ink-2)}
.enq__steps li{position:relative;padding-left:1.6rem;counter-increment:es}
.enq__steps{counter-reset:es}
.enq__steps li::before{content:counter(es);position:absolute;left:0;top:.05rem;width:1.15rem;height:1.15rem;display:grid;place-items:center;border-radius:var(--r-pill);background:var(--green-100);color:var(--green-700);font-family:var(--ff-display);font-weight:700;font-size:.7rem}
.enq__note{font-size:.8rem;color:var(--ink-3);margin:.7rem 0 0;text-align:center}
.enq__err{background:#FDECEA; border:1px solid #F5C2BC; color:#8A2A20; border-radius:var(--r); padding:.75rem .9rem; font-size:.9rem; margin-bottom:var(--s2)}
.prod__meta{font-size:.92rem; color:var(--ink-3); margin:.2rem 0 1rem}

/* ============================================================
   13. FOOTER
   ============================================================ */
.ftr{background:var(--green-900); color:#AEC5B8; padding-block:var(--s6) var(--s4); font-size:.9rem}
.ftr__top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--s4); padding-bottom:var(--s5); border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:960px){ .ftr__top{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .ftr__top{grid-template-columns:1fr} }
.ftr h4{font-family:var(--ff-display);font-size:.83rem;letter-spacing:.11em;text-transform:uppercase;color:#fff;margin:0 0 var(--s2)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ftr a:hover{color:#fff}
.ftr__brand{display:flex;align-items:center;gap:.5rem;font-family:var(--ff-display);font-weight:700;font-size:1.2rem;color:#fff;margin-bottom:var(--s2)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;padding-top:var(--s3);font-size:.83rem}
.social{display:flex;gap:.5rem}
.social a{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-sm);background:rgba(255,255,255,.08);color:#fff}
.social a:hover{background:var(--green-600)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:8px;z-index:200;background:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);box-shadow:var(--sh-3)}