/* generated hover rules */
.hv1:hover{background: #F3F1FE;}
.hv2:hover{color: #3D2FA8;}
.hv3:hover{background: #3D2FA8;}
.hv4:hover{background: #3D2FA8; color: #ffffff;}
.hv5:hover{background: #ffffff; color: #3D2FA8;}
.hv6:hover{border-color: #C9C1F5;}
.hv7:hover{color: #5A4BD6;}
.hv8:hover{background: #F3F1FE; color: #3D2FA8;}
.hv9:hover{background: #FAF9FF;}
.hv10:hover{background: #F3F1FE; color: #191632;}
.hv11:hover{transform: scale(1.045);}
.hv12:hover{background: #F3F1FE; border-color: #C9C1F5;}
.hv13:hover{background: rgba(255,255,255,0.12); color: #ffffff;}

/* ==========================================================================
   Petsocare partner site - responsive + polish layer

   The design's desktop layout lives in inline style attributes. Overriding
   those needs !important; that is the trade for leaving desktop rendering
   untouched. Nothing in the media queries applies above 900px.
   ========================================================================== */

/* --------------------------------------------------------------- base -- */

html { scroll-behavior: smooth; }
img { max-width: 100%; }

/* The design sets display inline (e.g. display:block on the switcher
   images), which outranks the UA rule for [hidden]. Without this, every
   hidden branch renders and the panels stack. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid #5A4BD6;
  outline-offset: 3px;
  border-radius: 6px;
}

.form-error {
  color: #B3261E;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 12px 0 0;
}

/* Honeypot: off-screen, never focusable, invisible to real users. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

button[disabled] { opacity: 0.65; cursor: default !important; }

/* Hamburger - injected by site.js, hidden until the mobile breakpoint.
   A filled brand circle, matching the reference header. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  background: #5A4BD6;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 18px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------- polish -- */
/* Applies at every width. The design was static; these are the small
   motions and depth cues that make it feel finished rather than flat. */

@media (hover: hover) {
  /* Bordered content cards lift slightly and warm their border. */
  section div[style*="border: 1px solid #E7E4F5"][style*="border-radius"],
  section a[style*="border: 1px solid #E7E4F5"][style*="border-radius"] {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 220ms ease;
  }
  section div[style*="border: 1px solid #E7E4F5"][style*="border-radius"]:hover,
  section a[style*="border: 1px solid #E7E4F5"][style*="border-radius"]:hover {
    transform: translateY(-3px);
    border-color: #C9C1F5 !important;
    box-shadow: 0 18px 40px -22px rgba(60, 45, 150, 0.42);
  }

  /* Primary and secondary buttons get a little weight on hover. */
  a[style*="border-radius: 999px"], a[style*="border-radius: 12px"],
  button[style*="border-radius: 999px"] {
    transition: transform 160ms ease, box-shadow 200ms ease, background-color 200ms ease;
  }
  a[style*="background: #5A4BD6"]:hover,
  button[style*="background: #5A4BD6"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -12px rgba(90, 75, 214, 0.65);
  }

  /* Images inside a rounded frame gain a slow zoom. */
  div[style*="border-radius"][style*="overflow: hidden"] > img {
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  div[style*="border-radius"][style*="overflow: hidden"]:hover > img {
    transform: scale(1.03);
  }
}

/* The partner carousel is a single flex row that is translated horizontally.
   It must never wrap, at any width. */
div[style*="translateX"] { flex-wrap: nowrap !important; }

/* Dot indicators, injected by site.js. Hidden on desktop, where the
   prev/next arrows are the affordance. */
.carousel-dots { display: none; }
.carousel-dots button {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 999px;
  background: #D8D3EC;
  cursor: pointer;
  transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease;
}
.carousel-dots button.is-active { width: 26px; background: #5A4BD6; }

/* Photos carry a hairline edge so they sit on the page rather than float. */
section div[style*="overflow: hidden"] > img { backface-visibility: hidden; }

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1100px) {
  section > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* icon/number + text pairs are not page layout - keep them inline */
  section > div[style*="grid-template-columns: 20px"],
  section > div[style*="grid-template-columns: 40px"],
  section > div[style*="grid-template-columns: 46px"] {
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 900px) {

  /* --- Navigation ------------------------------------------------------ */

  .nav-toggle { display: flex; }
  body.nav-open { overflow: hidden; }

  /* Header proportions taken from the reference: 88px tall, 24px side
     margins, the logo reduced to its mark, and every item on one baseline. */
  header > div {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    height: 88px !important;
    padding: 0 24px !important;
    align-items: center !important;
  }
  .logo-full { display: none !important; }
  .logo-mark { display: block !important; }

  header > div > div:last-child {
    margin-left: auto !important;
    order: 2;
    gap: 10px !important;
    align-items: center !important;
  }
  .nav-toggle { display: flex; order: 3; }
  .site-nav { order: 4; }

  /* Log in stays visible - there is room once the wordmark is a mark. */
  header > div > div:last-child > a:first-child {
    padding: 10px 4px !important;
    font-size: 15px !important;
  }
  header > div > div:last-child > a:last-child {
    padding: 11px 18px !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .site-nav {
    display: none !important;
    position: fixed !important;
    inset: 88px 0 0 0 !important;
    background: #ffffff !important;
    padding: 12px 20px 40px !important;
    overflow-y: auto !important;
    z-index: 200 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-top: 1px solid #E7E4F5;
  }
  .site-nav.open { display: flex !important; }
  .site-nav > div { position: static !important; width: 100% !important; }
  .site-nav > div > button {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 16px 4px !important;
    font-size: 17px !important;
    border-bottom: 1px solid #F0EDFB !important;
    border-radius: 0 !important;
  }
  .site-nav [data-if] { position: static !important; display: block !important; padding-top: 0 !important; }
  .site-nav [data-if] > div {
    width: 100% !important; border: 0 !important; box-shadow: none !important;
    padding: 4px 0 12px !important; background: transparent !important;
  }
  .site-nav [data-if] a { padding: 11px 12px !important; }
  .site-nav > a {
    padding: 16px 4px !important; font-size: 17px !important;
    border-bottom: 1px solid #F0EDFB !important;
  }

  /* --- Layout ---------------------------------------------------------- */

  /* Collapse real multi-column layouts... */
  div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* ...but a narrow fixed first column is an icon, a number or a tick
     paired with its text. Collapsing those orphans the marker onto its own
     line and doubles the height of every list on the site. */
  div[style*="grid-template-columns: 20px"] {
    grid-template-columns: 20px 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }
  /* These declare align-items:start inline - the marker lines up with the
     heading, not the middle of the paragraph. Do not override it. */
  div[style*="grid-template-columns: 40px"],
  div[style*="grid-template-columns: 46px"] {
    grid-template-columns: auto 1fr !important;
    gap: 14px !important;
  }

  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 52px !important;
  }
  section > div[style*="max-width"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* Closing sections carry margin: 88px auto 100px, which stacks on top of
     the section padding and leaves ~150px of dead space on a phone. */
  section[style*="auto 100px"] {
    margin-top: 52px !important;
    margin-bottom: 64px !important;
  }
  section[style*="margin: 100px auto 0"] { margin-top: 52px !important; }
  section[style*="padding: 104px"] { padding-top: 52px !important; }

  /* A 1px border on every card reads as clutter at phone width, where the
     cards are already full-bleed and stacked. Swap the outline for a soft
     fill and a shadow so the edges are felt rather than drawn. */
  section div[style*="border: 1px solid #E7E4F5"][style*="border-radius"],
  section a[style*="border: 1px solid #E7E4F5"][style*="border-radius"] {
    border-color: transparent !important;
    background: #FAF9FF !important;
    box-shadow: 0 1px 2px rgba(25, 22, 50, 0.05),
                0 12px 28px -20px rgba(60, 45, 150, 0.34) !important;
  }
  /* Cards that already carry a photo keep a white body. */
  section div[style*="border: 1px solid #E7E4F5"][style*="overflow: hidden"] {
    background: #ffffff !important;
  }
  /* Accordion rows stay flat - a stack of shadowed pills looks noisy. */
  section div[style*="border: 1px solid #E7E4F5"][style*="border-radius: 16px"] {
    background: #ffffff !important;
    border-color: #EDEAF9 !important;
    box-shadow: none !important;
  }

  /* Section eyebrows become tinted chips, which is what gives the reference
     its sense of structure between full-width stacked blocks. */
  section p[style*="text-transform: uppercase"][style*="color: #5A4BD6"] {
    display: inline-block !important;
    background: #EFEDFB !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    letter-spacing: 1.1px !important;
    margin-bottom: 14px !important;
  }

  /* Hero bands carry their own padding on an inner wrapper. */
  #signup { padding: 0 !important; }
  header + section { padding-top: 0 !important; }
  header + section:not(#signup) > div {
    padding-top: 36px !important;
    padding-bottom: 38px !important;
  }

  /* --- Type ------------------------------------------------------------ */

  h1 {
    font-size: 33px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.8px !important;
    margin-bottom: 18px !important;
  }
  h2 { font-size: 26px !important; line-height: 1.18 !important; letter-spacing: -0.45px !important; }
  h3 { font-size: 20px !important; line-height: 1.3 !important; }
  p, li { font-size: 16px !important; line-height: 1.6 !important; }

  div[style*="font-size: 54px"] { font-size: 36px !important; }
  div[style*="font-size: 44px"] { font-size: 32px !important; }
  div[style*="font-size: 30px"] { font-size: 26px !important; }
  p[style*="font-size: 30px"]  { font-size: 21px !important; line-height: 1.42 !important; }
  p[style*="font-size: 28px"]  { font-size: 20px !important; line-height: 1.45 !important; }
  p[style*="font-size: 26px"]  { font-size: 19px !important; line-height: 1.45 !important; }

  /* --- Rhythm ---------------------------------------------------------- */
  /* The desktop grid gaps are generous because columns sit side by side.
     Stacked, the same values read as dead space. */

  div[style*="gap: 60px"] { gap: 30px !important; }
  div[style*="gap: 48px"] { gap: 26px !important; }
  div[style*="gap: 40px"] { gap: 24px !important; }
  div[style*="gap: 34px"] { gap: 22px !important; }
  div[style*="gap: 26px"] { gap: 18px !important; }
  div[style*="gap: 24px"] { gap: 16px !important; }
  div[style*="gap: 22px"] { gap: 14px !important; }
  div[style*="margin-bottom: 42px"] { margin-bottom: 26px !important; }

  /* --- Images ---------------------------------------------------------- */
  /* Portrait crops at full width become 600px+ tall and swamp the copy. */

  div[style*="aspect-ratio: 4 / 5"] { aspect-ratio: 5 / 4 !important; }
  div[style*="aspect-ratio: 1 / 1"] { aspect-ratio: 4 / 3 !important; }
  div[style*="aspect-ratio: 3 / 2"] { aspect-ratio: 3 / 2 !important; }
  div[style*="min-height: 420px"] { min-height: 0 !important; aspect-ratio: 3 / 2 !important; }

  /* Hero: no photograph on a phone. The image is decoration; the headline
     and the form are the job, and dropping it puts the form above the fold
     instead of 300px below it. */
  #signup > div { display: block !important; }
  #signup > div > div:first-child { padding: 34px 20px 40px !important; }
  #signup > div > div:last-child { display: none !important; }

  /* Form card */
  #signup > div > div:first-child > div {
    border-radius: 18px !important;
    padding: 26px 20px 28px !important;
    box-shadow: 0 14px 40px -22px rgba(60, 45, 150, 0.32) !important;
  }
  #signup h2 { font-size: 19px !important; line-height: 1.22 !important; }
  /* Email + phone stay paired; splitting them wastes a whole row. */
  #signup div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #signup input, #signup select {
    padding: 14px 14px !important;
    border-radius: 11px !important;
  }
  #signup p { font-size: 12.5px !important; line-height: 1.45 !important; }

  /* Carousel: dots replace arrows, matching how phone carousels behave. */
  .carousel-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
  }
  .carousel-dots button { min-height: 0; }
  [data-action="prev"], [data-action="next"] { display: none !important; }

  /* --- Text over photography ------------------------------------------- */
  /* Two different jobs, so two different scrims.

     The reference uses no overlay at all on its testimonial cards - the
     photography is art-directed dark where the copy sits. Our storefront
     photos are daylight shots, so they need help, but a heavy even wash
     kills them. Keep the carousel light and bottom-weighted so the shop is
     still the subject. */
  div[style*="translateX"] div[style*="position: absolute"][style*="linear-gradient"] {
    background: linear-gradient(to top,
      rgba(10, 7, 26, 0.86) 0%,
      rgba(10, 7, 26, 0.62) 32%,
      rgba(10, 7, 26, 0.24) 62%,
      rgba(10, 7, 26, 0.04) 100%) !important;
  }

  /* Product cards are different: the copy runs most of the card height, over
     faces and busy detail, so those do need an even wash. */
  section div[style*="position: absolute"][style*="linear-gradient"] {
    background: linear-gradient(to top,
      rgba(10, 7, 26, 0.92) 0%,
      rgba(10, 7, 26, 0.82) 34%,
      rgba(10, 7, 26, 0.66) 64%,
      rgba(10, 7, 26, 0.48) 100%) !important;
  }

  /* --- Cards and panels ------------------------------------------------ */

  /* Generic side padding for content panels. Image frames use the same
     radii but clip with overflow:hidden - padding them insets the photo and
     leaves it square-cornered inside a rounded box, so they are excluded. */
  div[style*="border-radius: 26px"]:not([style*="overflow: hidden"]),
  div[style*="border-radius: 24px"]:not([style*="overflow: hidden"]),
  div[style*="border-radius: 22px"]:not([style*="overflow: hidden"]),
  div[style*="border-radius: 20px"]:not([style*="overflow: hidden"]) {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  /* Desktop side padding of 48-60px leaves barely 220px of usable width on a
     phone, which is what makes buttons look stranded and panels look empty. */
  div[style*="padding: 68px 60px"] { padding: 34px 22px !important; }
  div[style*="padding: 54px 56px"] { padding: 32px 22px !important; }
  div[style*="padding: 52px 56px"] { padding: 32px 22px !important; }
  div[style*="padding: 44px 48px"] { padding: 28px 22px !important; }
  div[style*="padding: 34px 36px 36px"] { padding: 26px 20px 28px !important; }
  div[style*="padding: 32px 30px"] { padding: 24px 20px !important; }
  div[style*="padding: 30px 32px 34px"] { padding: 24px 20px 26px !important; }
  div[style*="padding: 30px 32px"] { padding: 24px 20px !important; }
  div[style*="padding: 30px 28px"] { padding: 24px 20px !important; }
  div[style*="padding: 28px 30px"] { padding: 22px 20px !important; }
  div[style*="padding: 28px 26px"] { padding: 22px 20px !important; }
  div[style*="padding: 26px 26px 30px"] { padding: 22px 20px 24px !important; }
  div[style*="padding: 32px"] { padding: 24px 20px !important; }

  /* Every call-to-action row stacks full width. A pair of content-width
     buttons floating left is the single most "unfinished" thing on a phone. */
  section div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 12px"] > a,
  section div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 16px"] > a {
    flex: 1 1 100% !important;
    display: block !important;
    text-align: center !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  /* --- Forms ----------------------------------------------------------- */

  /* 16px minimum stops iOS Safari zooming the page on focus. */
  input, select, textarea {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  button { font-size: 16px !important; }
  /* Full-width primary actions read as buttons, not links, on a phone. */
  section a[style*="border-radius: 12px"][style*="background: #5A4BD6"],
  section a[style*="border-radius: 12px"][style*="border: 1px solid #C9C1F5"] {
    display: block !important;
    text-align: center !important;
    flex: 1 1 100% !important;
  }

  /* --- Horizontal scrollers -------------------------------------------- */

  [data-action="t.pick"] { scroll-snap-align: start; flex: 0 0 auto !important; min-width: 210px; }
  div[style*="grid"]:has(> [data-action="t.pick"]) {
    display: flex !important; overflow-x: auto !important; gap: 10px !important;
    padding-bottom: 8px !important; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  div[style*="grid"]:has(> [data-action="g.pick"]) {
    display: flex !important; overflow-x: auto !important; gap: 8px !important;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  [data-action="g.pick"] { flex: 0 0 auto !important; scroll-snap-align: start; }
  div[style*="grid"]:has(> [data-action="t.pick"])::-webkit-scrollbar,
  div[style*="grid"]:has(> [data-action="g.pick"])::-webkit-scrollbar { display: none; }

  [data-action="prev"], [data-action="next"] { width: 46px !important; height: 46px !important; }

  /* --- Footer ---------------------------------------------------------- */

  footer { padding-left: 20px !important; padding-right: 20px !important; }
  footer > div { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  footer a { font-size: 14.5px !important; }
  footer li, footer a { line-height: 1.9 !important; }
  a, button { min-height: 40px; }
  footer a, .site-nav a { display: block; }
}

/* ==========================================================================
   Small phones
   ========================================================================== */

@media (max-width: 520px) {
  h1 { font-size: 29px !important; }
  h2 { font-size: 23px !important; }

  section { padding-left: 16px !important; padding-right: 16px !important; }
  div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  footer > div { grid-template-columns: 1fr !important; }

  /* Stat rows and pill rows wrap rather than overflow. The carousel track is
     a flex row with a gap too, but wrapping it stacks all 15 cards vertically
     and pushes them off-screen, so it is excluded explicitly. */
  section div[style*="display: flex"][style*="gap"]:not([style*="translateX"]),
  footer div[style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }

  header > div { gap: 8px !important; }   /* keep the 24px side margin */
  header > div > div:last-child > a:last-child {
    padding: 11px 15px !important; font-size: 14.5px !important;
  }
  header > div > div:last-child > a:first-child { font-size: 14.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}