/* Vet Advent, its own look (06-10). Loaded after runtime/store.css. Look only: no prices, ladder, copy or beacons.
   Brief, his words: "a little bit more fun, but not gimmicky, not childish at all... still very professional,
   something vets would like." Read as: modern clinic brand (Small Door, Bond Vet) + premium scrubs (FIGS):
   warm cream, sage and forest green, soft rounded shapes, a soft serif doing the talking, and three small
   clinic details used once each: a white heart (his Vet heart is white, 06-10), a heartbeat line, a paw. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,500..700,0..100&display=swap");

:root{
  --r:14px;
  --sh:0 1px 0 rgba(38,71,51,.05),0 18px 40px -26px rgba(38,71,51,.42);
  --soft:color-mix(in srgb,var(--tint) 46%,var(--ground));
  --paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='10' rx='2.2' ry='2.7' transform='rotate(-18 5.6 10)'/%3E%3Cellipse cx='9.9' cy='5.6' rx='2.2' ry='2.8' transform='rotate(-6 9.9 5.6)'/%3E%3Cellipse cx='14.1' cy='5.6' rx='2.2' ry='2.8' transform='rotate(6 14.1 5.6)'/%3E%3Cellipse cx='18.4' cy='10' rx='2.2' ry='2.7' transform='rotate(18 18.4 10)'/%3E%3Cpath d='M12 11.2c-3.1 0-6.2 3.7-6.2 6.4 0 1.8 1.4 2.8 3 2.8 1.3 0 2.1-.7 3.2-.7s1.9.7 3.2.7c1.6 0 3-1 3-2.8 0-2.7-3.1-6.4-6.2-6.4z'/%3E%3C/svg%3E");
  --heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.6s-7.4-4.5-9.4-9C1.1 8.2 3.2 4.4 6.9 4.4c2.1 0 3.6 1.1 5.1 2.9 1.5-1.8 3-2.9 5.1-2.9 3.7 0 5.8 3.8 4.3 7.2-2 4.5-9.4 9-9.4 9z'/%3E%3C/svg%3E");
}

/* type: Fraunces with its soft axis turned up, so the serif reads warm and rounded, never stiff */
h1,h2,h3,.logo .nm,.price b,.bp,.cdown .num,.dflip b,.for li::before,.ladder b,.mnav a{font-variation-settings:"SOFT" 100,"WONK" 0}
h1,h2{font-weight:600;letter-spacing:-.018em}
h2{line-height:1.08}
.eyebrow{display:inline-flex;align-items:center;gap:8px;letter-spacing:.14em;color:var(--accent)}
.txt .eyebrow::before,.forsec .eyebrow::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat;opacity:.9}

/* buttons: soft pills, the shine kept but quieter */
.btn{border-radius:999px;padding:0 30px;letter-spacing:.01em}
.btn::after{background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%)}
.btn.ghost{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 70%,transparent);background:var(--paper)}
.btn.ghost:hover{background:var(--soft)}

/* announcement bar: the white heart between lines */
.ann{font-weight:600;letter-spacing:.05em}
.ann span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:28px;vertical-align:-1px;background:#fff;opacity:.92;-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}

/* the header keeps the logo's own sage; a hairline instead of a heavy drop */
.hdr{box-shadow:0 1px 0 rgba(38,71,51,.08),0 10px 24px -22px rgba(38,71,51,.6)}
.ib{border-radius:999px}

/* product hero: a soft studio backdrop behind the calendar */
.pdp{background:linear-gradient(180deg,var(--soft) 0,var(--ground) 520px)}
.track{border-radius:22px;background:color-mix(in srgb,var(--tint) 62%,#fff);box-shadow:var(--sh)}
.slide img.contain,.slide img{background:transparent;padding:6%}
.slide .ph{border-radius:0}
.dots button.on::before{background:var(--accent)}
.pinfo h1{letter-spacing:-.02em}
.price span{color:var(--accent);background:var(--soft);padding:5px 10px;border-radius:999px;font-size:13px}
.flake{background:#fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent)}
.flake.star{clip-path:none;box-shadow:none;border-radius:0;background:color-mix(in srgb,var(--accent) 28%,#fff);-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat}

/* buy box */
.buy{border-radius:22px;padding:20px 16px 18px;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 9%,transparent),var(--sh)}
.bh{font-size:12px;letter-spacing:.14em;color:color-mix(in srgb,var(--ink) 78%,var(--ground))}
.bcard{border-radius:16px;border-color:color-mix(in srgb,var(--accent) 16%,var(--ground))}
.bcard.on{background:color-mix(in srgb,var(--tint) 42%,#fff);border-color:var(--accent);box-shadow:0 10px 22px -18px rgba(38,71,51,.7)}
.tag{background:var(--deep);letter-spacing:.08em;padding:5px 9px}
.addon{border-radius:16px;border-color:color-mix(in srgb,var(--accent) 16%,var(--ground))}
.addon .box{border-radius:7px}
.atc{border-radius:999px;min-height:58px;box-shadow:0 14px 26px -16px color-mix(in srgb,var(--deep) 80%,transparent)}
.trust{gap:8px}
.trust li{gap:12px}
.trust svg{box-sizing:content-box;width:16px;height:16px;padding:7px;border-radius:50%;background:var(--soft);color:var(--deep)}

/* accordions: the plus sits in a soft round chip */
.acc-list{border-top-color:color-mix(in srgb,var(--accent) 14%,var(--ground))}
.acc{border-bottom-color:color-mix(in srgb,var(--accent) 14%,var(--ground))}
.acc button{font-weight:700}
.acc i{width:30px;height:30px;border-radius:50%;background:var(--soft)}
.acc i::before,.acc i::after{left:9px;top:14px;width:12px;background:var(--deep)}

/* countdown: forest strip with a quiet heartbeat line running through it */
.cdown{position:relative;overflow:hidden;padding:20px 0}
.cdown::before{content:"";position:absolute;inset:0;opacity:.16;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='60' viewBox='0 0 260 60'%3E%3Cpath d='M0 30h96l7-12 8 26 9-38 9 34 6-10h125' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50%/260px 60px;animation:ecg 14s linear infinite}
@keyframes ecg{to{background-position:-260px 50%}}
.cdown .wrap{position:relative}
.cdown p{display:inline-flex;align-items:center;gap:6px}
.cdown .num{font-size:30px;font-weight:600;color:#fff}
.cdown p::after{content:"";width:13px;height:13px;margin-left:6px;background:#fff;-webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat;animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,60%,100%{transform:scale(1)}8%{transform:scale(1.22)}16%{transform:scale(1)}24%{transform:scale(1.14)}}

/* the 24 doors: soft rounded doors, a paw behind each one */
.doors{border-radius:22px;padding:14px;gap:7px;background:var(--paper)}
.dflip{border-radius:10px;border:1.5px dashed color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--tint) 50%,#fff)}
.dflip b{color:var(--deep);font-weight:600}
.door-gift{border-radius:10px;background:color-mix(in srgb,var(--tint) 24%,#fff)}
.door-gift svg{display:none}
.door-gift::after{content:"";width:46%;height:46%;background:var(--accent);-webkit-mask:var(--paw) center/contain no-repeat;mask:var(--paw) center/contain no-repeat}

/* who it is for: a soft rounded panel that flows out of the page */
.forsec{background:transparent;padding:24px 12px 56px}
.forsec>.wrap{background:var(--soft);border-radius:28px;padding:40px 22px 34px}
.for li{border-top-color:color-mix(in srgb,var(--accent) 16%,transparent);align-items:center}
.for li::before{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:0;width:38px;height:38px;border-radius:50%;background:var(--paper);color:var(--deep);font-size:16px;box-shadow:0 6px 14px -10px rgba(38,71,51,.6)}

/* questions */
.faqsec h2{margin-bottom:18px}

/* sticky bar + drawer + toast */
.sticky{border-radius:22px 22px 0 0}
.sticky .btn{border-radius:999px}
.drawer{border-radius:22px 0 0 22px}
.mnav{border-radius:0 22px 22px 0}
.mnav a{font-weight:600}
.th{border-radius:12px;background:color-mix(in srgb,var(--tint) 50%,#fff)}
.qty{border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,var(--ground))}
.qty button{border-radius:999px}
.toast{border-radius:999px;background:var(--deep)}

/* plain pages, cart and checkout */
.page h1{letter-spacing:-.02em}
.okbox,.notyet,.co .box{border-radius:22px;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 9%,transparent),var(--sh)}
.notyet{background:var(--soft);box-shadow:none}
.notyet b{font:600 20px/1.2 var(--display);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--deep)}
.form input,.form textarea{border-radius:14px;border-color:color-mix(in srgb,var(--accent) 18%,var(--ground))}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.pcard .pic{border-radius:22px;background:color-mix(in srgb,var(--tint) 62%,#fff)}
.pcard .pic img{object-fit:contain;padding:6%}

/* footer: the logo's sage, rising into the page with soft corners */
.ftr{border-radius:28px 28px 0 0;margin-top:8px}
.ftr h4{letter-spacing:.16em}
.ftr a{min-height:40px;display:flex;align-items:center;padding:0}

@media (min-width:860px){
  .forsec>.wrap{padding:64px 56px 56px}
  .forsec{padding-left:24px;padding-right:24px}
  .ftr{border-radius:40px 40px 0 0}
  .track{border-radius:28px}
}

.ftr .copy{max-width:none}
.rm{margin-left:0;padding:0 2px}
.qty+.rm{margin-left:12px}
.sum .df{padding:16px 0 0;border-top-color:color-mix(in srgb,var(--accent) 16%,var(--ground))}
.line{border-bottom-color:color-mix(in srgb,var(--accent) 12%,var(--ground))}
.rm{min-height:44px}
.qty button{width:44px;height:44px}