/* ===== The Pet Things — design tokens =====
   Display: Fraunces (warm, chunky serif for a hand-lettered pet-shop-sign feel)
   Body: Inter
   Palette: forest green + butter gold + cream, with per-category accent hues
   Signature: a running "paw-trail" divider and stitched-edge card borders
*/
:root{
  --cream:#FBF7EF;
  --forest:#213B31;
  --forest-2:#2B4C3F;
  --gold:#E3A93B;
  --gold-dark:#B8862B;
  --ink:#232220;
  --line:#DFD6C2;
  --sale:#C1443D;
  --white:#FFFFFF;
  --radius:14px;
  --shadow: 0 6px 18px rgba(33,59,49,0.08);
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  color:var(--forest);
  line-height:1.15;
  margin:0 0 .4em;
  font-weight:600;
}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* paw trail divider */
.paw-trail{display:flex;gap:10px;align-items:center;margin:18px 0;opacity:.55;}
.paw-trail span{width:6px;height:6px;border-radius:50%;background:var(--gold-dark);}
.paw-trail span:nth-child(2n){transform:translateY(-4px);}

/* header */
header.site{
  background:var(--forest);
  color:var(--cream);
  position:sticky;top:0;z-index:50;
  border-bottom:3px solid var(--gold);
}
header.site .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--maxw);margin:0 auto;}
.logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:22px;color:var(--cream);font-weight:700;}
.logo .mark{width:34px;height:34px;flex:none;}
nav.main{display:flex;gap:22px;flex-wrap:wrap;}
nav.main a{font-size:14.5px;color:var(--cream);opacity:.88;}
nav.main a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px;}
.cta-wa{background:var(--gold);color:var(--forest);padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap;}
.cta-wa:hover{background:#f0bb5c;}
.mobile-cats{display:flex;gap:14px;overflow-x:auto;padding:10px 24px;background:var(--forest-2);}
.mobile-cats a{font-size:13px;color:var(--cream);opacity:.85;white-space:nowrap;}

/* hero */
.hero{padding:64px 0 40px;}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.hero .eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);font-weight:700;}
.hero h1{font-size:48px;max-width:11ch;}
.hero p.lead{font-size:18px;max-width:46ch;color:#4a463f;}
.hero-actions{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap;}
.btn{display:inline-block;padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;border:2px solid var(--forest);}
.btn.primary{background:var(--forest);color:var(--cream);}
.btn.primary:hover{background:var(--forest-2);}
.btn.ghost{background:transparent;color:var(--forest);}
.btn.ghost:hover{background:rgba(33,59,49,.06);}
.hero-art{background:var(--white);border:2px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow);}

/* category chips */
.cat-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:36px 0;}
.cat-chip{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 14px;text-align:center;transition:transform .15s;}
.cat-chip:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.cat-chip svg{width:46px;height:46px;margin:0 auto 10px;}
.cat-chip span{font-size:13.5px;font-weight:600;color:var(--forest);}

/* section headings */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin:48px 0 18px;}
.section-head h2{font-size:28px;}
.section-head a{font-size:14px;font-weight:700;color:var(--gold-dark);}

/* product grid */
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.card-product{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;transition:box-shadow .15s, transform .15s;}
.card-product:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.card-product .thumb{background:#F3EEDF;padding:22px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.card-product .thumb svg{width:80%;height:80%;}
.card-product .info{padding:14px 16px 18px;}
.card-product .cat-tag{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-dark);font-weight:700;}
.card-product h3{font-size:16px;margin:6px 0 8px;font-weight:600;font-family:'Inter',sans-serif;color:var(--ink);}
.card-product .price{color:var(--forest);font-weight:700;font-size:15.5px;}
.badge-sale{position:absolute;top:12px;left:12px;background:var(--sale);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;}

/* filters / listing */
.listing-head{padding:36px 0 12px;border-bottom:1px solid var(--line);}
.breadcrumb{font-size:13px;color:#7a7568;margin-bottom:10px;}
.breadcrumb a{color:var(--gold-dark);}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0;}
.filter-bar a{border:1px solid var(--line);background:var(--white);padding:8px 14px;border-radius:999px;font-size:13.5px;}
.filter-bar a.active{background:var(--forest);color:var(--cream);border-color:var(--forest);}

/* product detail */
.pdp{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding:36px 0 60px;align-items:start;}
.pdp .img-box{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:30px;position:sticky;top:100px;}
.pdp .img-box svg{width:100%;height:auto;max-height:420px;}
.pdp h1{font-size:32px;}
.pdp .price-row{display:flex;align-items:baseline;gap:12px;margin:14px 0 6px;}
.pdp .price{font-size:26px;color:var(--forest);font-weight:800;}
.pdp .old-price{text-decoration:line-through;color:#9a9484;font-size:16px;}
.stock{font-size:13.5px;color:#3f7a4f;font-weight:600;margin-bottom:18px;}
.pdp p.desc{color:#4a463f;font-size:15.5px;}
.spec-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px;}
.spec-table td{padding:9px 0;border-bottom:1px solid var(--line);}
.spec-table td:first-child{color:#7a7568;width:38%;}
.buy-box{margin-top:26px;padding:22px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);}
.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.qty-row button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:var(--cream);font-size:18px;cursor:pointer;}
.qty-row input{width:50px;text-align:center;border:1px solid var(--line);border-radius:8px;height:34px;font-size:15px;}
.btn-wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#25D366;color:#fff;padding:15px;border-radius:999px;font-weight:700;font-size:16px;}
.btn-wa:hover{background:#1fbd5a;}
.btn-wa svg{width:20px;height:20px;fill:#fff;}
.related{margin-top:30px;}

/* blog */
.grid-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.card-blog{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.card-blog .thumb{aspect-ratio:16/9;background:#F3EEDF;}
.card-blog .thumb svg{width:100%;height:100%;}
.card-blog .info{padding:16px 18px 20px;}
.card-blog .meta{font-size:12.5px;color:#8a8474;margin-bottom:6px;}
.card-blog h3{font-size:17px;margin:0 0 8px;}
.card-blog p{font-size:14px;color:#5a564b;margin:0;}
.post-header{padding:44px 0 10px;max-width:760px;margin:0 auto;}
.post-header h1{font-size:36px;}
.post-hero{max-width:900px;margin:20px auto;border-radius:18px;overflow:hidden;border:1px solid var(--line);}
.post-body{max-width:720px;margin:0 auto;padding:0 24px 60px;font-size:17px;color:#3a362f;}
.post-body h2{font-size:23px;margin-top:34px;}
.post-body ul{padding-left:20px;}
.post-body li{margin-bottom:8px;}

/* generic content pages */
.page-content{max-width:820px;margin:0 auto;padding:44px 24px 70px;}
.page-content h1{font-size:34px;}
.page-content h2{font-size:22px;margin-top:30px;}
.page-content p{color:#3a362f;font-size:16px;}
.page-content ul{color:#3a362f;font-size:16px;}
.faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
.faq-item h3{font-size:17px;margin:0 0 8px;font-family:'Inter',sans-serif;color:var(--forest);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:20px;}
.contact-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}

/* newsletter / trust strip */
.trust-strip{background:var(--forest-2);color:var(--cream);padding:34px 0;margin-top:60px;}
.trust-strip .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.trust-item{flex:1;min-width:200px;font-size:14px;}
.trust-item strong{display:block;color:var(--gold);font-family:'Fraunces',serif;font-size:20px;margin-bottom:4px;}

/* footer */
footer.site{background:var(--forest);color:#cfd9d1;padding:50px 0 26px;font-size:14px;}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px;}
footer.site h4{color:var(--cream);font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;font-family:'Inter',sans-serif;}
footer.site a{opacity:.82;}
footer.site a:hover{opacity:1;text-decoration:underline;}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;opacity:.7;font-size:13px;}

/* responsive */
@media (max-width:980px){
  .hero .grid{grid-template-columns:1fr;}
  .cat-strip{grid-template-columns:repeat(3,1fr);}
  .grid-products{grid-template-columns:repeat(2,1fr);}
  .grid-blog{grid-template-columns:repeat(2,1fr);}
  .pdp{grid-template-columns:1fr;}
  .pdp .img-box{position:static;}
  footer.site .cols{grid-template-columns:1fr 1fr;}
  nav.main{display:none;}
}
@media (max-width:560px){
  .cat-strip{grid-template-columns:repeat(2,1fr);}
  .grid-products{grid-template-columns:repeat(2,1fr);}
  .grid-blog{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  footer.site .cols{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}