/* Steve Helen Bassets - site polish layer
   Header behaviour, mega-menu reveal, card motion. Edit freely. */

:root{
  --shb-accent:#E8007D; --shb-accent-d:#B80063; --shb-ink:#191418;
  --shb-border:#ECE9EE; --shb-blush:#FFF1F7; --shb-blush-d:#FFD3E6;
}

html{ -webkit-text-size-adjust:100%; }
body{ -webkit-font-smoothing:antialiased; }

/* The Xpro off-canvas mobile menu parks itself off-screen to the right, which
   widens the document. `clip` contains it without creating a scroll container,
   so the sticky header keeps working (`hidden` would break it). */
html, body{ overflow-x:clip; }
.xpro-elementor-horizontal-navbar-wrapper{ max-width:100vw; }

:focus-visible{ outline:3px solid var(--shb-accent); outline-offset:3px; border-radius:4px; }

/* ---------- sticky header ---------- */
.shb-header{
  position:sticky; top:0; z-index:200;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
}

/* The logo lockup and CTA size to their content so the header row can never
   overflow on narrow screens (Elementor's Width control has no `auto`). */
.shb-header > .e-con-inner > .e-con:not(.shb-mega-panel){ --width:auto; }
.shb-header > .e-con-inner{ min-width:0; }
.shb-header .xpro-elementor-horizontal-menu-wrapper{ min-width:0; }

/* ---------- mega menu ---------- */
.shb-mega-panel{
  position:absolute; left:0; right:0; top:100%;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  pointer-events:none; z-index:210;
}
.shb-header:has(.shb-has-mega:hover) .shb-mega-panel,
.shb-header:has(.shb-has-mega:focus-within) .shb-mega-panel,
.shb-mega-panel:hover,
.shb-mega-panel:focus-within{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}
/* keyboard + browsers without :has() still reach the panel by tabbing into it */
@media (max-width:1024px){
  .shb-mega-panel{ display:none; }
}

/* ---------- cards ---------- */
.shb-card{
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.shb-card:hover{
  transform:translateY(-6px);
  border-color:var(--shb-blush-d) !important;
  box-shadow:0 24px 48px rgba(25,20,24,.11);
}

/* ---------- puppy grid (Puppy Grid widget) ---------- */
.shb-pgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
.shb-pgrid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1024px){ .shb-pgrid,.shb-pgrid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){ .shb-pgrid,.shb-pgrid-4{ grid-template-columns:1fr; } }

.shb-pcard{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--shb-border); border-radius:24px; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.shb-pcard:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(25,20,24,.11); }
.shb-pcard-media{ position:relative; display:block; height:250px; overflow:hidden; }
.shb-pcard-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.shb-pcard-noimg{ display:block; width:100%; height:100%; background:linear-gradient(160deg,var(--shb-blush),var(--shb-blush-d)); }
.shb-pcard-media .shb-pill{ position:absolute; top:14px; left:14px; }
.shb-pcard-media .shb-pill-dark{ left:auto; right:14px; }

.shb-pill{
  display:inline-block; padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.94); color:var(--shb-accent-d);
  font:700 10.5px/1 "Plus Jakarta Sans",sans-serif; letter-spacing:.12em; text-transform:uppercase;
}
.shb-pill-dark{ background:var(--shb-ink); color:#fff; }

.shb-pcard-body{ display:flex; flex-direction:column; gap:10px; padding:22px 24px 26px; flex:1; }
.shb-pcard-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.shb-pcard-head h3{ margin:0; font:400 28px/1.1 "Instrument Serif",serif; }
.shb-pcard-head h3 a{ color:var(--shb-ink); text-decoration:none; }
.shb-pcard-head h3 a:hover{ color:var(--shb-accent); }
.shb-price{ font:700 17px/1 "Plus Jakarta Sans",sans-serif; color:var(--shb-accent); white-space:nowrap; }
.shb-pmeta{ margin:0; font:400 13.5px/1.5 "Plus Jakarta Sans",sans-serif; color:#9B939F; }
.shb-pblurb{ margin:0; font:400 14.5px/1.65 "Plus Jakarta Sans",sans-serif; color:#6E6672; }

.shb-ptags{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; padding:0; list-style:none; }
.shb-ptags li{
  background:var(--shb-blush); color:var(--shb-accent-d); border-radius:8px;
  padding:6px 10px; font:600 11.5px/1 "Plus Jakarta Sans",sans-serif;
}

.shb-btn{
  display:inline-block; text-align:center; background:var(--shb-accent); color:#fff;
  border-radius:999px; padding:14px 24px; text-decoration:none;
  font:700 14px/1.2 "Plus Jakarta Sans",sans-serif; transition:background .18s ease, transform .18s ease;
}
.shb-btn:hover{ background:var(--shb-accent-d); color:#fff; text-decoration:none; transform:translateY(-1px); }
.shb-btn-block{ display:block; margin-top:auto; }

/* ---------- review grid (Review Grid widget) ---------- */
.shb-rgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
@media (max-width:1024px){ .shb-rgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){ .shb-rgrid{ grid-template-columns:1fr; } }

.shb-rcard{
  margin:0; display:flex; flex-direction:column; gap:14px;
  background:#FDFCFD; border:1px solid var(--shb-border); border-radius:22px; padding:30px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.shb-rcard:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(25,20,24,.1); }
.shb-stars{ display:flex; gap:3px; font-size:15px; line-height:1; }
.shb-stars .on{ color:#E4A11B; }
.shb-stars .off{ color:var(--shb-border); }
.shb-rheadline{ margin:0; font:700 15.5px/1.4 "Plus Jakarta Sans",sans-serif; color:var(--shb-ink); }
.shb-rcard blockquote{
  margin:0; padding:0; border:0;
  font:400 15.5px/1.72 "Plus Jakarta Sans",sans-serif; color:#3A343C;
}
.shb-rcard figcaption{
  margin-top:auto; display:flex; align-items:center; gap:12px;
  padding-top:16px; border-top:1px solid var(--shb-border);
}
.shb-ravatar img{ width:38px; height:38px; border-radius:50%; object-fit:cover; display:block; }
.shb-rname{ display:block; font:700 14.5px/1.3 "Plus Jakarta Sans",sans-serif; color:var(--shb-ink); }
.shb-rmeta{ display:block; font:400 13px/1.4 "Plus Jakarta Sans",sans-serif; color:#9B939F; }

/* ---------- single puppy page ---------- */
.shb-single-puppy{ background:#F6F5F7; padding:48px 20px 96px; }
.shb-sp-inner{ max-width:1180px; margin:0 auto; }
.shb-sp-crumbs{ font:600 12.5px/1 "Plus Jakarta Sans",sans-serif; color:#9B939F; margin-bottom:26px; }
.shb-sp-crumbs a{ color:var(--shb-accent); text-decoration:none; }
.shb-sp-crumbs span{ margin:0 8px; }
.shb-sp-crumbs span:last-child{ margin:0; color:#6E6672; }

.shb-sp-top{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:1024px){ .shb-sp-top{ grid-template-columns:1fr; gap:32px; } }
.shb-sp-media{ position:relative; border-radius:26px; overflow:hidden; box-shadow:0 26px 54px rgba(25,20,24,.12); }
.shb-sp-media img{ width:100%; height:auto; display:block; }
.shb-sp-media .shb-pill-dark{ position:absolute; top:16px; right:16px; }

.shb-eyebrow{ margin:0 0 10px; font:700 12px/1.4 "Plus Jakarta Sans",sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--shb-accent); }
.shb-sp-info h1{ margin:0; font:400 clamp(38px,5vw,62px)/1 "Instrument Serif",serif; letter-spacing:-.025em; color:var(--shb-ink); }
.shb-sp-price{ margin:14px 0 0; font:700 24px/1 "Plus Jakarta Sans",sans-serif; color:var(--shb-accent); }
.shb-sp-blurb{ margin:18px 0 0; font:400 17px/1.7 "Plus Jakarta Sans",sans-serif; color:#6E6672; }
.shb-sp-blurb p{ margin:0 0 12px; }

.shb-sp-specs{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; margin:24px 0 0; }
.shb-sp-specs > div{ display:flex; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px dashed var(--shb-border); }
.shb-sp-specs dt{ font:400 14px/1.4 "Plus Jakarta Sans",sans-serif; color:#9B939F; }
.shb-sp-specs dd{ margin:0; font:600 14px/1.4 "Plus Jakarta Sans",sans-serif; color:var(--shb-ink); }
@media (max-width:600px){ .shb-sp-specs{ grid-template-columns:1fr; } }

.shb-sp-info .shb-ptags{ margin:22px 0 0; }
.shb-sp-info .shb-btn{ margin-top:26px; }

.shb-sp-gallery{ margin-top:64px; }
.shb-sp-gallery h2,.shb-sp-more h2,.shb-sp-panel h2{ margin:0 0 20px; font:400 clamp(26px,3vw,38px)/1.05 "Instrument Serif",serif; color:var(--shb-ink); }
.shb-carousel{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:12px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
}
.shb-carousel figure{
  flex:0 0 clamp(260px,32%,380px); margin:0; scroll-snap-align:start;
  border-radius:20px; overflow:hidden; background:var(--shb-blush);
}
.shb-carousel img{ width:100%; height:280px; object-fit:cover; display:block; }

.shb-sp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:56px; }
@media (max-width:1024px){ .shb-sp-cols{ grid-template-columns:1fr; } }
.shb-sp-panel{ background:#fff; border:1px solid var(--shb-border); border-radius:22px; padding:32px; }
.shb-sp-panel p{ margin:0; font:400 15.5px/1.7 "Plus Jakarta Sans",sans-serif; color:#6E6672; }
.shb-sp-panel-dark{ background:var(--shb-ink); border-color:var(--shb-ink); }
.shb-sp-panel-dark h2{ color:#fff; }
.shb-sp-panel-dark p{ color:rgba(255,255,255,.7); }

.shb-sp-more{ margin-top:64px; }

/* ---------- accordion ---------- */
.elementor-accordion .elementor-accordion-item{
  border-radius:16px; overflow:hidden; margin-bottom:12px;
}
.elementor-accordion .elementor-accordion-item:last-child{ margin-bottom:0; }
.elementor-accordion .elementor-tab-title{ transition:border-color .2s ease; }
.elementor-accordion .elementor-tab-title:hover{ color:var(--shb-accent); }

/* ---------- images ---------- */
.elementor-widget-image img{ display:block; }

/* ---------- scroll entrance, matching the approved design ---------- */
@keyframes shbRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .shb-card{
      animation:shbRise .7s cubic-bezier(.2,.7,.2,1) both;
      animation-timeline:view();
      animation-range:entry 2% cover 22%;
    }
    .shb-card:hover{ animation:none; }
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .shb-card:hover{ transform:none; }
}

/* ---------- mobile menu polish ---------- */
@media (max-width:1024px){
  .shb-header{ gap:16px !important; }
}