/* Thornw Pet — warm amber, soft Fraunces display, a paw print built from real products */
:root{
  --accent:#d4862a; --accent-dark:#9c5512; --tint:#fbecd6; --tint-2:#f5d9b2;
  --paper:#fdf7ef; --ink:#2b1708; --ink-2:#5a4332; --muted:#7a6250; --rule:#efe1cf;
  --display:"Fraunces",Georgia,serif; --body:"Public Sans",system-ui,sans-serif;
  --r:20px;
  --pawsvg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4862a'%3E%3Cellipse cx='5.6' cy='9.4' rx='2' ry='2.6' transform='rotate(-24 5.6 9.4)'/%3E%3Cellipse cx='9.6' cy='5' rx='2' ry='2.7' transform='rotate(-8 9.6 5)'/%3E%3Cellipse cx='14.4' cy='5' rx='2' ry='2.7' transform='rotate(8 14.4 5)'/%3E%3Cellipse cx='18.4' cy='9.4' rx='2' ry='2.6' transform='rotate(24 18.4 9.4)'/%3E%3Cpath d='M12 11c-3.5 0-6.5 4-6.5 6.6 0 2 1.6 2.7 3 2.2 1.3-.5 2.2-.9 3.5-.9s2.2.4 3.5.9c1.4.5 3-.2 3-2.2C18.5 15 15.5 11 12 11z'/%3E%3C/svg%3E");
  --pawwhite:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' fill-opacity='.22'%3E%3Cellipse cx='5.6' cy='9.4' rx='2' ry='2.6' transform='rotate(-24 5.6 9.4)'/%3E%3Cellipse cx='9.6' cy='5' rx='2' ry='2.7' transform='rotate(-8 9.6 5)'/%3E%3Cellipse cx='14.4' cy='5' rx='2' ry='2.7' transform='rotate(8 14.4 5)'/%3E%3Cellipse cx='18.4' cy='9.4' rx='2' ry='2.6' transform='rotate(24 18.4 9.4)'/%3E%3Cpath d='M12 11c-3.5 0-6.5 4-6.5 6.6 0 2 1.6 2.7 3 2.2 1.3-.5 2.2-.9 3.5-.9s2.2.4 3.5.9c1.4.5 3-.2 3-2.2C18.5 15 15.5 11 12 11z'/%3E%3C/svg%3E");
  --pawlight:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2c27f'%3E%3Cellipse cx='5.6' cy='9.4' rx='2' ry='2.6' transform='rotate(-24 5.6 9.4)'/%3E%3Cellipse cx='9.6' cy='5' rx='2' ry='2.7' transform='rotate(-8 9.6 5)'/%3E%3Cellipse cx='14.4' cy='5' rx='2' ry='2.7' transform='rotate(8 14.4 5)'/%3E%3Cellipse cx='18.4' cy='9.4' rx='2' ry='2.6' transform='rotate(24 18.4 9.4)'/%3E%3Cpath d='M12 11c-3.5 0-6.5 4-6.5 6.6 0 2 1.6 2.7 3 2.2 1.3-.5 2.2-.9 3.5-.9s2.2.4 3.5.9c1.4.5 3-.2 3-2.2C18.5 15 15.5 11 12 11z'/%3E%3C/svg%3E");
}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;font-variation-settings:"SOFT" 100}
h1 em,h2 em{font-style:italic;color:var(--ink);background:linear-gradient(transparent 62%,#f6cf98 62%,#f6cf98 92%,transparent 92%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* amber is the brand color; dark ink on amber and a deeper amber for text keep everything readable */
.btn{border-radius:14px}
.btn-acc{background:var(--accent);color:var(--ink)}
.btn-acc:hover{background:var(--accent-dark);color:#fff}
.kicker,.shead a.more,.pinfo .br,nav.cats a.tool,.annc b,.how i,footer.store a:hover,.crumbs a:hover,.net-foot a{color:var(--accent-dark)}
.kicker{display:inline-flex;align-items:center;gap:7px}
.kicker::before{content:"";width:14px;height:14px;background:var(--pawsvg) center/contain no-repeat;flex:none}
.logo .wm span{color:var(--accent-dark);font-weight:600;font-variation-settings:"SOFT" 100}
.bagcount,.stepper span.on{color:var(--ink)}
.chip:hover,.chip.on{color:var(--accent-dark)}
.empty a{color:var(--accent-dark)!important}
.done .ok{color:var(--accent-dark)}
.how i{font-family:var(--display);font-style:italic;font-weight:700}
.brands b{font-weight:600}

/* category tiles: four warm colorways with a paw stamp */
.tile{background:#fbe8cf}
.tile:nth-child(2){background:#f7e3df}.tile:nth-child(3){background:#e8efe2}.tile:nth-child(4){background:#e3edf1}
.tile::after{content:"";position:absolute;right:16px;top:18px;width:28px;height:28px;background:var(--pawsvg) center/contain no-repeat;opacity:.35;transform:rotate(18deg)}
.tile h3{font-size:25px}

/* tool band: amber with dark ink */
.band{background:var(--accent) var(--pawwhite) right -30px bottom -40px/220px no-repeat;color:var(--ink);position:relative}
.band .kicker{color:var(--ink)}
.band .kicker::before{filter:brightness(.25)}
.band h2 em{color:var(--ink);opacity:1;background:linear-gradient(transparent 62%,rgba(255,255,255,.55) 62%,rgba(255,255,255,.55) 92%,transparent 92%)}
.band p{opacity:1;color:#3d230d}
.band .btn{background:var(--ink);color:#fff}
.band .btn:hover{background:#000}
.band .steps{background:rgba(255,255,255,.16)}
.band .st{background:rgba(255,255,255,.55)}
.band .st i{background:var(--ink);color:#fff}
.band .st small{opacity:1;color:#5a3a1c}

/* chips with a tiny paw */
.chips .chip{display:inline-flex;align-items:center;gap:8px}
#chips .chip::before{content:"";width:14px;height:14px;background:var(--pawsvg) center/contain no-repeat;opacity:.8}

/* ---------- hero: a paw print whose pads are real products ---------- */
.hero{background:var(--paper);overflow:hidden}
.paw{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1/1}
.paw::before{content:"";position:absolute;inset:2% 0 0 2%;background:#fbe2c0;border-radius:47% 53% 50% 50%/52% 46% 54% 48%}
.paw::after{content:"";position:absolute;left:-6%;top:-4%;width:26%;height:26%;background:var(--pawsvg) 0 0/38% no-repeat,var(--pawsvg) 70% 60%/34% no-repeat;opacity:.18;transform:rotate(-30deg)}
.pad{position:absolute;display:grid;place-items:center;background:#fff;border-radius:50%;transform:rotate(var(--rot,0deg));box-shadow:0 22px 40px -22px rgba(90,45,10,.55),0 0 0 5px #f6cf98;transition:transform .35s,box-shadow .35s;z-index:1}
.pad img{width:70%;height:70%;object-fit:contain;mix-blend-mode:multiply;transform:rotate(calc(var(--rot,0deg) * -1))}
.pad:hover{transform:rotate(var(--rot,0deg)) translateY(-8px);box-shadow:0 28px 46px -22px rgba(90,45,10,.6),0 0 0 5px var(--accent)}
.pad .pl{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%) rotate(calc(var(--rot,0deg) * -1));background:var(--ink);color:#fff;font:600 12px/1 var(--body);letter-spacing:.04em;padding:6px 11px;border-radius:999px;white-space:nowrap}
.pad.t1{--rot:-28deg;left:5%;top:31%;width:21%;height:27%}
.pad.t2{--rot:-9deg;left:26%;top:7%;width:22%;height:28%}
.pad.t3{--rot:9deg;right:24%;top:7%;width:22%;height:28%}
.pad.t4{--rot:28deg;right:3%;top:31%;width:21%;height:27%}
.pad.main{left:22%;right:20%;top:45%;bottom:5%;border-radius:47% 47% 42% 42%/58% 58% 42% 42%}
.pad.main img{width:56%;height:62%;margin-top:4%}
.pad.main .pl{bottom:auto;top:-13px;background:var(--accent);color:var(--ink)}
.idtag{position:absolute;right:-1%;bottom:2%;width:104px;height:104px;border-radius:50%;background:var(--ink);color:#fbe2c0;display:grid;place-items:center;text-align:center;font:600 12px/1.25 var(--body);padding:16px;transform:rotate(-12deg);box-shadow:0 14px 26px -12px rgba(43,23,8,.6);z-index:2}
.idtag::before{content:"";position:absolute;top:8px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--paper)}
.idtag b{display:block;font:italic 700 22px/1 var(--display);color:#f6cf98;margin-top:2px}
@media(max-width:520px){.pad .pl{font-size:10.5px;padding:5px 8px}.idtag{width:84px;height:84px;font-size:10.5px;padding:12px}.idtag b{font-size:18px}}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-facts span{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);background:#fff;border:1px solid var(--rule);border-radius:999px;padding:7px 14px}
.hero-facts span::before{content:"";width:13px;height:13px;background:var(--pawsvg) center/contain no-repeat}

/* ---------- Pet Profile tool ---------- */
.pp{display:grid;gap:28px;padding:10px 0 90px}
@media(min-width:980px){.pp{grid-template-columns:400px 1fr;gap:44px}}
.pp-q{background:var(--paper);border:1px solid var(--rule);border-radius:24px;padding:24px;align-self:start}
@media(min-width:980px){.pp-q{position:sticky;top:110px}}
.pp-q h3{font-size:21px;margin:4px 0 12px}
.pp-q .blk+.blk{margin-top:22px;padding-top:20px;border-top:1px dashed var(--tint-2)}
.pp-q input[type=text]{width:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:12px;font:15px var(--body);background:#fff}
.pp-q input[type=text]:focus{outline:2px solid var(--accent);border-color:transparent}
.species{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.species label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;border:1.5px solid var(--rule);border-radius:16px;background:#fff;cursor:pointer;font-size:13.5px;font-weight:600;transition:.2s}
.species label:hover{border-color:var(--accent)}
.species label:has(input:checked){border-color:var(--accent);background:var(--tint);color:var(--accent-dark)}
.species label:has(input:focus-visible),.seg label:has(input:focus-visible),.pp-q .chip:has(input:focus-visible),.tog:has(input:focus-visible){outline:2px solid var(--accent-dark);outline-offset:2px}
.species svg{width:34px;height:34px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{flex:1;min-width:90px;text-align:center;padding:10px 8px;border:1.5px solid var(--rule);border-radius:12px;background:#fff;cursor:pointer;font-size:14px;font-weight:500}
.seg label:has(input:checked){border-color:var(--accent);background:var(--tint);color:var(--accent-dark);font-weight:600}
.tog{display:flex;gap:12px;align-items:flex-start;margin-top:10px;padding:12px 14px;border:1.5px solid var(--rule);border-radius:14px;background:#fff;cursor:pointer;font-size:14px}
.tog:has(input:checked){border-color:var(--accent);background:var(--tint)}
.tog input{accent-color:var(--accent-dark);width:18px;height:18px;margin-top:2px;flex:none}
.tog small{display:block;color:var(--muted);font-size:12.5px}
.pp-q .chips{gap:8px}
.pp-q .chip{cursor:pointer;font-size:14px;padding:9px 14px;display:inline-flex;align-items:center;gap:6px}
.pp-q .chip small{color:var(--muted);font-size:12px}
.pp-q .hint{font-size:13px;color:var(--muted);margin-top:8px}

.pp-res .card-b{border:1px solid var(--rule);border-radius:24px;overflow:hidden;background:#fff}
.pp-head{display:flex;align-items:center;gap:16px;padding:22px 24px;background:var(--tint) var(--pawlight) right 18px center/64px no-repeat}
.pp-head .av{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--accent-dark);flex:none;box-shadow:0 0 0 4px #f6cf98}
.pp-head .av svg{width:32px;height:32px}
.pp-head h2{font-size:clamp(26px,3vw,34px)}
.pp-head p{color:var(--ink-2);font-size:14.5px}
.pp-grp{padding:6px 24px 10px}
.pp-grp>h4{font:600 12.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px}
.pp-line{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px dashed var(--rule)}
.pp-grp>h4+.pp-line{border-top:0}
.pp-line input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent-dark);flex:none}
.pp-line img{width:64px;height:64px;object-fit:contain;mix-blend-mode:multiply;background:var(--paper);border-radius:12px;flex:none}
.pp-line .t{flex:1;font-size:14.5px;min-width:0}
.pp-line .t a:hover{color:var(--accent-dark)}
.pp-line .t small{display:block;color:var(--muted);font-size:12.5px}
.pp-line .why{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:var(--accent-dark);background:var(--tint);padding:3px 9px;border-radius:999px}
.pp-line .nt{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px}
.pp-line .swap{background:none;border:0;padding:0;margin-top:4px;font-size:12.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.pp-line .swap:hover{color:var(--accent-dark)}
.pp-line .pr{font-weight:700;white-space:nowrap}
.pp-line.off{opacity:.5}
.pp-line.off .pr{text-decoration:line-through}
.pp-foot{padding:18px 24px 22px;background:var(--paper);border-top:1px solid var(--rule)}
.pp-foot .row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.pp-foot .ship-bar{margin:0 0 14px}
.pp-more{margin-top:26px}
.pp-more h3{font-size:24px;margin-bottom:12px}
.pp-mini{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.pp-mini div{display:flex;gap:10px;align-items:center;border:1px solid var(--rule);border-radius:14px;padding:10px;font-size:13.5px;background:#fff}
.pp-mini img{width:48px;height:48px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.pp-mini span{flex:1;line-height:1.3}
.pp-mini small{display:block;color:var(--muted);font-size:12px}
.pp-mini button{border:0;background:var(--accent);color:var(--ink);font-weight:700;border-radius:10px;padding:7px 10px;font-size:13px}
.pp-mini button:hover{background:var(--accent-dark);color:#fff}