/* ==========================================================================
   OvaPet craft layer
   Loaded after theme.css. Carries the funnel's design language to every
   surface of the site so the chrome, the homepage and the utility pages
   read as the same product as the product pages.
   ========================================================================== */

:root {
  /* neutrals retuned to the funnel's warm-green family */
  --foreground-hsl: 168 19% 11%;
  --muted-foreground-hsl: 168 8% 33%;
  --border-hsl: 150 8% 89%;
  --secondary-hsl: 40 24% 95%;
  --muted-hsl: 155 30% 95%;

  --ink: #16211f;
  --body-ink: #4d5a57;
  --line: #e3e8e4;
  --sand: #f7f5f0;
  --mint: #eef6f2;
  --accent: #ff6b3d;
  --accent-dark: #e4552a;

  /* radii and depth: one scale, matched to the funnel cards */
  --radius: 20px;
  --radius-xl: 14px;
  --radius-2xl: 999px;
  --radius-3xl: 20px;
  --shadow-sm: 0 1px 2px rgb(20 30 28 / .05), 0 4px 10px -6px rgb(20 30 28 / .16);
  --shadow-md: 0 2px 4px rgb(20 30 28 / .04), 0 12px 32px -20px rgb(20 30 28 / .28);
  --shadow-lg: 0 4px 8px rgb(20 30 28 / .05), 0 28px 60px -32px rgb(20 30 28 / .4);
  --shadow-primary: 0 10px 26px -12px rgb(255 107 61 / .85);

  /* one easing for the whole site */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --fast: .18s;
  --slow: .42s;
}

/* --------------------------------------------------------------------------
   Surfaces the browser draws. These ship with defaults that belong to no
   design system; theming them is what separates built from assembled.
   -------------------------------------------------------------------------- */
::selection { background: hsl(var(--primary-hsl) / .18); color: var(--ink); }
html { caret-color: var(--primary); accent-color: var(--primary); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
* { scrollbar-width: thin; scrollbar-color: #c6d1cc transparent; }
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c6d1cc; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
table, .price, [data-price], .ovp-cart-line__meta { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body { color: var(--body-ink); text-rendering: optimizeLegibility; }

h1, h2, h3, .section-heading, .page-hero__title {
  color: var(--ink); text-wrap: balance; letter-spacing: -.022em;
}
h1 { line-height: 1.06; }
h2, .section-heading { line-height: 1.1; }

.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 800;
}
.section-heading--left { text-align: left; }

.section-copy {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.62;
  color: var(--body-ink);
  max-width: 62ch;
  text-wrap: pretty;
}
.section-copy:not(.section-heading--left + .section-copy) { margin-inline: auto; }

p { text-wrap: pretty; }

/* A kicker steals weight from the heading it sits above. The heading carries
   its own weight, so the label goes. */
.eyebrow, .eyebrow--plain { display: none !important; }

/* --------------------------------------------------------------------------
   Rhythm: more space above a heading than below it
   -------------------------------------------------------------------------- */
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--tight { padding-block: clamp(30px, 4vw, 48px); }
.section-heading + .section-copy { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Buttons: the action colour is coral, the same as the funnel CTA
   -------------------------------------------------------------------------- */
.btn {
  min-height: 3.25rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform var(--fast) var(--ease),
              background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn--primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -12px rgb(255 107 61 / .9);
}
.btn--primary:active { transform: translateY(0); }
.btn--secondary, .btn--ghost, .btn--outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid hsl(var(--primary-hsl) / .28);
  box-shadow: none;
}
.btn--secondary:hover, .btn--ghost:hover, .btn--outline:hover {
  border-color: var(--primary);
  background: hsl(var(--primary-hsl) / .06);
  transform: translateY(-1px);
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------------------
   Cards and callouts
   -------------------------------------------------------------------------- */
.card, .accordion-card, .contact-card, .policy-item,
.feature-card, .comparison-card, .step-card, .problem-item, .review-photo-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-md);
}
.icon-box {
  border-radius: 13px;
  background: var(--mint);
  color: var(--primary);
  width: 2.75rem;
  height: 2.75rem;
}
.icon-box svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field input, .field textarea, .field select, input[type="text"], input[type="email"],
input[type="tel"], input[type="search"], textarea, select {
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--line);
  background: #fff;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field input:focus, .field textarea:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsl(var(--primary-hsl) / .12);
}
::placeholder { color: #8d9b96; opacity: 1; }

/* --------------------------------------------------------------------------
   Accordions
   -------------------------------------------------------------------------- */
.accordion-card summary, .accordion-card__trigger { cursor: pointer; transition: color var(--fast) var(--ease); }
.accordion-card summary:hover, .accordion-card__trigger:hover { color: var(--primary); }
.accordion-card__content { color: var(--body-ink); line-height: 1.62; }

/* --------------------------------------------------------------------------
   Site chrome
   -------------------------------------------------------------------------- */
.announcement-bar, .announcement {
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}
.site-header, .header {
  position: sticky; top: 0; z-index: 90;
  background: rgb(255 255 255 / .88);
  backdrop-filter: saturate(1.5) blur(12px);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand-logo {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--primary);
}
.icon-button {
  border-radius: 999px;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.icon-button:hover { background: var(--mint); transform: translateY(-1px); }

/* The footer stays dark, as the theme intended: it closes a long light page.
   Its ground moves from neutral obsidian into the brand's own deep green. */
.site-footer, .footer { background: #101a18; color: rgb(255 255 255 / .82); border-top: 0; }
.site-footer .brand-logo, .site-footer h3, .site-footer h4 { color: #fff; }
.site-footer p, .site-footer li, .site-footer a { color: rgb(255 255 255 / .72); }
.site-footer a:hover { color: #fff; }
.site-footer a { transition: color var(--fast) var(--ease); }
.site-footer :focus-visible { outline-color: #fff; }
.footer-trust__item { color: rgb(255 255 255 / .82); font-weight: 650; }
.site-footer ::selection { background: rgb(255 255 255 / .22); color: #fff; }

/* --------------------------------------------------------------------------
   Motion: one authored moment, shared by every page
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cr-reveal {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
    transition: opacity var(--slow) var(--ease),
                transform var(--slow) var(--ease),
                filter var(--slow) var(--ease);
    transition-delay: var(--cr-delay, 0ms);
  }
  .cr-reveal.is-in { opacity: 1; transform: none; filter: none; }
}

/* Images never squash, never overflow */
img, svg, video { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Incumbent patterns the craft floor rules out
   -------------------------------------------------------------------------- */

/* A coloured side-tab thicker than a hairline is decoration pretending to be
   structure. The row already reads as a group from its border and ground. */
.product-price-row {
  border-left-width: 1px;
  border-left-color: hsl(var(--primary-hsl) / .16);
  background: var(--mint);
}

/* A zero-offset coloured halo is a glow, not depth. Every elevated thing on
   this site casts in one direction with a soft blur. */
:root {
  --cta-glow: 0 10px 26px -12px rgb(255 107 61 / .85);
  --cta-glow-strong: 0 14px 32px -12px rgb(255 107 61 / .9);
}



/* ==========================================================================
   Funnel primitives, promoted site-wide
   The product pages define these inside their own <style>. Sections outside
   the funnels need them too — and an undefined --pn-brand silently kills
   every icon stroke and button colour that references it.
   ========================================================================== */
.pn {
  --pn-ink: #16211f;
  --pn-body: #4d5a57;
  --pn-line: #e3e8e4;
  --pn-card: #ffffff;
  --pn-sand: #f7f5f0;
  --pn-mint: #eef6f2;
  --pn-brand: hsl(var(--primary-hsl, 174 58% 26%));
  --pn-brand-dark: hsl(var(--primary-dark-hsl, 174 62% 20%));
  --pn-accent: #ff6b3d;
  --pn-accent-dark: #e4552a;
  --pn-green: #00b67a;
  --pn-amber: #f5b301;
  --pn-red: #d64545;
  --pn-r: 14px;
  /* motion: one exponential ease, used everywhere */
  --pn-ease: cubic-bezier(.16, 1, .3, 1);
  --pn-fast: .18s;
  --pn-slow: .42s;
  --pn-r-lg: 20px;
  --pn-shadow-sm: 0 1px 2px rgb(20 30 28 / .05), 0 4px 10px -6px rgb(20 30 28 / .16);
  --pn-shadow: 0 2px 4px rgb(20 30 28 / 0.04), 0 12px 32px -20px rgb(20 30 28 / 0.28);
  --pn-shadow-lg: 0 4px 8px rgb(20 30 28 / 0.05), 0 28px 60px -32px rgb(20 30 28 / 0.4);

  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  color: var(--pn-body);
  -webkit-font-smoothing: antialiased;
}

.pn *,
.pn *::before,
.pn *::after { box-sizing: border-box; }

.pn h1, .pn h2, .pn h3, .pn h4 {
  font-family: var(--font-heading, "Outfit", system-ui, sans-serif);
  color: var(--pn-ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pn p { margin: 0; }
.pn img { max-width: 100%; display: block; }

.pn__wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 clamp(16px, 4.5vw, 28px); }
.pn__wrap--narrow { max-width: 820px; }

.pn-section { padding: clamp(44px, 7vw, 84px) 0; }
.pn-section--sand { background: var(--pn-sand); }
.pn-section--mint { background: var(--pn-mint); }
.pn-section--tight { padding-top: clamp(28px, 4vw, 44px); }

.pn-head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 4vw, 46px); }
.pn-head h2 {
  font-size: clamp(28px, 4.4vw, 42px); font-weight: 800;
  letter-spacing: -.022em; line-height: 1.08; text-wrap: balance;
}
.pn-head p {
  margin-top: 14px; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.62;
  max-width: 62ch; margin-inline: auto; text-wrap: pretty; color: var(--pn-body);
}

/* ---------- buttons ---------- */
.pn-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: 0; cursor: pointer; text-decoration: none;
  padding: 18px 26px; border-radius: 999px;
  font-family: var(--font-heading, "Outfit", sans-serif);
  font-size: clamp(17px, 2vw, 19px); font-weight: 800; letter-spacing: .02em;
  color: #fff; background: var(--pn-accent);
  box-shadow: 0 10px 26px -12px rgb(255 107 61 / .85);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.pn-btn:hover { background: var(--pn-accent-dark); transform: translateY(-1px); }
.pn-btn:active { transform: translateY(0); }
.pn-btn:focus-visible { outline: 3px solid var(--pn-brand); outline-offset: 3px; }
.pn-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.pn-btn--inline { display: inline-flex; width: auto; padding-inline: 44px; }
.pn-btn--brand { background: var(--pn-brand); box-shadow: 0 10px 26px -12px hsl(var(--primary-hsl) / .85); }
.pn-btn--brand:hover { background: var(--pn-brand-dark); }
.pn-btn__sub { display: block; font-size: 12px; font-weight: 600; opacity: .85; letter-spacing: .01em; }

@keyframes pn-pulse {
  0%, 100% { box-shadow: 0 10px 26px -12px rgb(255 107 61 / .85); }
  50%      { box-shadow: 0 10px 34px -8px rgb(255 107 61 / .95); }
}
.pn-btn--pulse { animation: pn-pulse 2.4s var(--pn-ease) 3; }
@media (prefers-reduced-motion: reduce) {
  .pn-btn--pulse { animation: none; }
  .pn * { scroll-behavior: auto !important; }
}


/* --------------------------------------------------------------------------
   Mobile menu — a sheet that slides from the top and can always be closed
   -------------------------------------------------------------------------- */
.menu-toggle { border: 0; background: none; cursor: pointer; width: 42px; height: 42px; display: grid; place-items: center; }
.menu-bars { display: grid; gap: 5px; width: 20px; }
.menu-bars i {
  display: block; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-sheet[hidden] { display: none; }
.menu-sheet { position: fixed; inset: 0; z-index: 80; }
.menu-toggle { position: relative; z-index: 91; }

.menu-sheet__scrim {
  position: absolute; inset: var(--header-h, 64px) 0 0; background: rgb(16 26 24 / .45);
  opacity: 0; transition: opacity .32s var(--ease);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.menu-sheet.is-open .menu-sheet__scrim { opacity: 1; }

.menu-sheet__panel {
  position: absolute; top: var(--header-h, 64px); left: 0; right: 0;
  display: flex; flex-direction: column;
  padding: 8px 20px 26px;
  background: #fff; border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: calc(100dvh - var(--header-h, 64px)); overflow-y: auto;
  transform: translateY(-14px); opacity: 0;
  transition: transform .38s var(--ease), opacity .26s var(--ease);
}
.menu-sheet.is-open .menu-sheet__panel { transform: none; opacity: 1; }

.menu-sheet__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; }
.menu-sheet__brand { font-family: var(--font-heading); font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--primary); }
.menu-sheet__close {
  width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--mint);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.menu-sheet__close:hover { background: #e2efe8; transform: rotate(90deg); }
.menu-sheet__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.menu-sheet__links { display: flex; flex-direction: column; }
.menu-sheet__panel .menu-sheet__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 2px; border-bottom: 1px solid var(--line);
  font-family: var(--font-heading); font-size: 19px; font-weight: 800; letter-spacing: -.015em;
  color: var(--ink); text-decoration: none;
  transition: color .18s var(--ease);
}
.menu-sheet__panel .menu-sheet__link::after {
  content: ""; flex: 0 0 9px; width: 9px; height: 9px;
  border-top: 2px solid #c2cdc8; border-right: 2px solid #c2cdc8;
  transform: rotate(45deg); transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.menu-sheet__panel .menu-sheet__link:hover { color: var(--primary); }
.menu-sheet__panel .menu-sheet__link:hover::after { border-color: var(--primary); transform: rotate(45deg) translate(2px, -2px); }

/* the links arrive just after the sheet, one after another */
@media (prefers-reduced-motion: no-preference) {
  .menu-sheet__panel .menu-sheet__link,
  .menu-sheet__panel .menu-sheet__cta {
    opacity: 0; transform: translateY(8px);
    transition: opacity .34s var(--ease), transform .34s var(--ease);
    transition-delay: calc(60ms + var(--i, 3) * 45ms);
  }
  .menu-sheet.is-open .menu-sheet__panel .menu-sheet__link,
  .menu-sheet.is-open .menu-sheet__panel .menu-sheet__cta { opacity: 1; transform: none; }
}
.menu-sheet__panel .menu-sheet__cta { margin-top: 22px; width: 100%; --i: 4; }

@media (min-width: 900px) { .menu-toggle, .menu-sheet { display: none !important; } }

/* --------------------------------------------------------------------------
   Header layout on mobile
   theme.css lays the bar out as a three-column grid and positions the old
   .mobile-menu into column 1. The toggle is now .menu-toggle, so without
   these rules it auto-places into a second row and doubles the header height.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .header__inner {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    min-height: 3.85rem;
    padding-inline: .8rem;
    gap: 0;
  }
  .header-actions { display: contents; }
  .menu-toggle {
    grid-column: 1; grid-row: 1; justify-self: start;
    width: 2.75rem; height: 2.75rem;
  }
  .brand-logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .header-actions > a[href*="cart"],
  .header-actions > .icon-button:not(.menu-toggle) {
    grid-column: 3; grid-row: 1; justify-self: end;
  }
  .header-nav { display: none; }
}

/* --------------------------------------------------------------------------
   The gallery runs edge to edge on mobile, so the hero must not hold it
   away from the header.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .pn-hero { padding-top: 0; }
  .pn-hero__grid { gap: 20px; }
}