/* ===== Pet Wellness Hospital: shared components (loaded by index.html and shop.html) ===== */

/* ---- header + mobile menu ---- */
.menu-btn{display:none;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:.6rem;background:transparent;color:inherit;cursor:pointer;place-items:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:1.2rem;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s;content:""}
.menu-btn span{position:relative}.menu-btn span::before{position:absolute;top:-6px}.menu-btn span::after{position:absolute;top:6px}
.menu-btn[aria-expanded=true] span{background:transparent}
.menu-btn[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:63.99rem){
  .menu-btn{display:grid}
  #nav{position:fixed;left:0;right:0;top:3.6rem;bottom:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.25rem 6rem;overflow:auto;transform:translateY(-110%);visibility:hidden;transition:transform .3s ease,visibility .3s;z-index:9}
  #nav.open{transform:none;visibility:visible}
  #nav a:not(.btn){display:block;padding:1rem 0;border-bottom:1px solid var(--line);font-size:1.2rem}
  #nav .btn{margin-top:1.2rem;text-align:center}
}
@media(min-width:64rem){#nav a:not(.btn):hover{color:var(--teal)}}

/* ---- service cards ---- */
.svc-grid{display:grid;gap:1rem;margin-top:2rem;grid-template-columns:1fr}
@media(min-width:40rem){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc-card{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem;border:1px solid var(--line);border-radius:.9rem;background:var(--paper);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,40,90,.12);border-color:var(--teal)}
.svc-card svg{width:2.6rem;height:2.6rem;color:var(--teal)}
.svc-card h3{font-size:1.3rem;margin-top:.3rem}
.svc-card p{color:var(--muted);font-size:.98rem;flex:1}
.svc-card .more{font-weight:600;color:var(--teal);font-size:.95rem}

/* ---- section helpers ---- */
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chips a{padding:.45rem 1rem;border:1px solid var(--line);border-radius:2rem;text-decoration:none;font-weight:600;font-size:.95rem;background:var(--paper)}
.chips a:hover{border-color:var(--teal);color:var(--teal)}
.dark-sec{background:#07101f;color:#e8eefb}
.dark-sec .lede{color:#a4b4d3}
.dark-sec h2{color:#fff}

/* ---- product carousel ---- */
.carousel{position:relative;margin-top:1.5rem}
.track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.4rem .1rem 1rem;scroll-behavior:smooth}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(72%,16rem);scroll-snap-align:start}
.pcard{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:.9rem;overflow:hidden;background:var(--paper);transition:transform .25s,box-shadow .25s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,40,90,.14)}
.pcard img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--mint)}
.pcard .pb{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem 1.1rem;flex:1}
.pcard .tag{font-size:.78rem;font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:.04em}
.pcard h3{font-size:1.05rem;line-height:1.25}
.pcard .pr{font:700 1.05rem "Bricolage Grotesque",system-ui,sans-serif;margin-top:auto}
.pcard .btn{margin-top:.5rem;text-align:center;padding:.6rem 1rem;font-size:.95rem}
.cbtn{position:absolute;top:38%;z-index:3;width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;display:none;place-items:center;box-shadow:0 6px 18px rgba(10,30,70,.2);font-size:1.3rem;line-height:1}
.cbtn.prev{left:-.6rem}.cbtn.next{right:-.6rem}
@media(min-width:48rem){.cbtn{display:grid}.slide{flex-basis:15.5rem}}
.cbtn:hover{background:var(--teal);color:#fff}

/* ---- X-ray gallery ---- */
.xstrip{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;padding:1.2rem .1rem 1.6rem;scrollbar-width:thin;scrollbar-color:#2b3f6a transparent}
.xitem{flex:0 0 min(78%,19rem);aspect-ratio:4/3;position:relative;border:1px solid #22345a;border-radius:.8rem;overflow:hidden;background:#000;cursor:zoom-in;padding:0;scroll-snap-align:start;color:#fff;text-align:left}
.xitem img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s,filter .4s;filter:brightness(.92)}
.xitem:hover img,.xitem:focus-visible img{transform:scale(1.07);filter:brightness(1.1)}
.xitem .xcap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;background:linear-gradient(transparent,rgba(0,0,0,.85));font-weight:600;font-size:.95rem}
.xitem .xcap small{display:block;font-weight:400;opacity:.8}
.xhint{font-size:.9rem;color:#a4b4d3;margin-top:.2rem}
.xpop{position:fixed;z-index:70;pointer-events:none;width:min(52vw,52rem);aspect-ratio:16/9;background:#000 center/contain no-repeat;border:1px solid #33497a;border-radius:.9rem;box-shadow:0 30px 80px rgba(0,0,0,.6);opacity:0;transform:scale(.95);transition:opacity .18s,transform .18s}
.xpop.on{opacity:1;transform:none}
.lb{position:fixed;inset:0;z-index:95;background:rgba(2,6,16,.95);display:none;flex-direction:column;align-items:center;justify-content:center;padding:3.2rem 1rem 1.2rem}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:calc(100vh - 8.5rem);object-fit:contain;border-radius:.4rem}
.lb .lbcap{color:#e8eefb;margin-top:.8rem;text-align:center;font-weight:600}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;width:3rem;height:3rem;border-radius:50%;cursor:pointer;font-size:1.5rem;display:grid;place-items:center}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb .x{top:.8rem;right:.8rem}.lb .p{left:.8rem;top:50%}.lb .n{right:.8rem;top:50%}
.badge-sample{position:absolute;top:.6rem;left:.6rem;background:#f0b43a;color:#10211f;font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:.3rem}

/* ---- immersive video panels ("A look inside") ---- */
.panel{position:relative;min-height:86vh;display:flex;align-items:flex-end;overflow:hidden;background:#07101f;color:#fff}
.panel .bgp{position:absolute;inset:-6%;background-size:cover;background-position:center;filter:blur(30px) brightness(.55) saturate(1.25)}
.panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.panel::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(4,10,26,.15),transparent 40%,rgba(4,10,26,.85));pointer-events:none}
.panel .cap{position:relative;z-index:3;width:100%;max-width:68rem;margin:0 auto;padding:2rem 1.25rem 3.2rem}
.panel .cap h3{font-size:clamp(1.8rem,5vw,3.3rem);max-width:18ch}
.panel .cap p{max-width:34rem;margin-top:.5rem;opacity:.9}
@media(min-width:60rem){.panel{min-height:90vh}}

/* ---- advertisement popups (promo.js) ---- */
.pm-ov{position:fixed;inset:0;z-index:100;background:rgba(5,12,30,.62);display:grid;place-items:center;padding:1rem;opacity:0;transition:opacity .3s}
.pm-ov.on{opacity:1}
.pm-box{position:relative;width:min(100%,30rem);max-height:92vh;overflow:auto;background:var(--paper);color:var(--ink);border-radius:1.1rem;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:translateY(14px) scale(.97);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pm-ov.on .pm-box{transform:none}
.pm-box img.pm-img{display:block;width:100%;max-height:15rem;object-fit:cover}
.pm-body{padding:1.4rem 1.5rem 1.6rem}
.pm-body h2{font-size:1.7rem;margin:0 0 .5rem;max-width:none}
.pm-body p{color:var(--muted);margin:0 0 1rem}
.pm-x{position:absolute;top:.6rem;right:.6rem;z-index:2;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:1.4rem;cursor:pointer;line-height:1}
.pm-cta{display:inline-block;background:var(--sun);color:var(--onsun);font-weight:600;padding:.8rem 1.4rem;border-radius:.5rem;text-decoration:none}
.pm-coupon{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;padding:.6rem .8rem;border:2px dashed var(--teal);border-radius:.6rem;font-weight:700;letter-spacing:.06em}
.pm-coupon button{margin-left:auto;border:0;background:var(--teal);color:#fff;padding:.4rem .8rem;border-radius:.4rem;cursor:pointer;font-weight:600}
.pm-count{font-weight:700;color:var(--sun);margin:0 0 .8rem;font-variant-numeric:tabular-nums}
.pm-corner{position:fixed;z-index:100;right:1rem;bottom:1rem;width:min(calc(100% - 2rem),22rem);transform:translateY(130%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pm-corner.on{transform:none}
.pm-corner .pm-box{width:100%;transform:none}
@media(max-width:47.99rem){.pm-corner{bottom:4.8rem}}
.pm-bar{position:fixed;z-index:100;left:0;right:0;top:0;background:var(--sun);color:var(--onsun);display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;justify-content:center;padding:.6rem 3rem .6rem 1rem;transform:translateY(-110%);transition:transform .4s}
.pm-bar.on{transform:none}
.pm-bar a{color:inherit;font-weight:700;text-decoration:underline}
.pm-bar .pm-x{top:50%;transform:translateY(-50%);background:rgba(255,255,255,.2)}
@media(prefers-reduced-motion:reduce){.track{scroll-behavior:auto}.pm-ov,.pm-box,.pm-corner,.pm-bar,.xpop{transition:none}}