/* Homepage hero and matching navy banners.
   Loaded after round-ten-visual so it wins the boxed-card rules.
   Phone layout (max-width: 599px) is left to the existing rules. */

/* Keep "Kit · $112.95" on one line at every width. */
.hero-kit-price-lock{white-space:nowrap}
/* The one-liner replaces the eyebrow at every width. */
body.visual-home header.hero .hero-inner:has(.hero-clarity) .eyebrow{display:none!important}

/* Tablet: square photo on top, copy underneath. No side-by-side seam. */
@media (min-width:600px) and (max-width:1023px){
  body.visual-home header.hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#1A2B5A!important;
    position:relative!important;
  }
  body.visual-home header.hero::before,
  body.visual-home header.hero::after{display:none!important;content:none!important}
  body.visual-home header.hero .visual-hero-picture{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    order:0!important;
    width:100%!important;
    height:auto!important;
    flex:none!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.visual-home header.hero .visual-hero-photo{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:min(52vh,460px)!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
    object-position:60% 50%!important;
  }
  body.visual-home header.hero .hero-inner{
    order:1!important;
    position:relative!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:22px 28px 28px!important;
    box-sizing:border-box!important;
    color:#FAF7EF!important;
    background:#1A2B5A!important;
  }
  body.visual-home header.hero .hero-inner :is(h1,.hero-sub,.hero-kit-line,.hero-free-plan,.hero-trust-line,.hero-find-link){color:#FAF7EF!important}
  body.visual-home header.hero .eyebrow{color:var(--gold,#E8C97B)!important;font-size:13px!important}
  body.visual-home header.hero h1{
    font-size:clamp(30px,4vw,40px)!important;
    line-height:1.12!important;
    max-width:16em!important;
    margin:8px 0!important;
  }
  body.visual-home header.hero .hero-sub{font-size:16px!important;line-height:1.45!important;max-width:40em!important}
  body.visual-home header.hero .hero-kit-line{font-size:17px!important;max-width:none!important;font-weight:700!important}
  body.visual-home header.hero .hero-free-plan,
  body.visual-home header.hero .hero-trust-line{font-size:15px!important;line-height:1.45!important;opacity:.92!important}
  body.visual-home header.hero .hero-kit-btn{min-height:52px!important;width:auto!important;max-width:none!important}
}

/* Desktop and tablet landscape: full-bleed photo, copy on the empty left side. */
@media (min-width:1024px){
  body.visual-home header.hero{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:clamp(480px,60vh,640px)!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#1A2B5A!important;
    isolation:isolate!important;
  }
  body.visual-home header.hero::before{display:none!important}
  body.visual-home header.hero::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,#1A2B5A 0%,#1A2B5A 28%,transparent 48%)!important;
  }
  body.visual-home header.hero .visual-hero-picture{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:0!important;
    overflow:hidden!important;
  }
  body.visual-home header.hero .visual-hero-photo{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:72% center!important;
  }
  body.visual-home header.hero .hero-inner{
    position:relative!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    min-height:clamp(480px,60vh,640px)!important;
    margin:0!important;
    padding:40px max(40px,calc((100% - 1200px) / 2))!important;
    color:#FAF7EF!important;
    background:transparent!important;
  }
  body.visual-home header.hero .hero-inner :is(h1,.hero-sub,.hero-kit-line,.hero-clarity,.hero-free-plan,.hero-trust-line,.hero-find-link){
    color:#FAF7EF!important;
    max-width:min(34ch,42%)!important;
  }
  body.visual-home header.hero .hero-inner:has(.hero-clarity) .eyebrow{display:none!important}
  body.visual-home header.hero .hero-kit-price{display:block!important;white-space:nowrap!important}
  body.visual-home header.hero .eyebrow{color:var(--gold,#E8C97B)!important;font-size:13px!important;letter-spacing:.04em!important}
  body.visual-home header.hero h1{
    font-size:clamp(30px,3.2vw,40px)!important;
    line-height:1.12!important;
    margin:10px 0!important;
  }
  body.visual-home header.hero .hero-sub{font-size:16px!important;line-height:1.45!important;font-weight:400!important}
  body.visual-home header.hero .hero-kit-line{font-size:18px!important;line-height:1.35!important;font-weight:700!important;max-width:min(34ch,46%)!important}
  body.visual-home header.hero .hero-free-plan,
  body.visual-home header.hero .hero-trust-line{font-size:15px!important;line-height:1.45!important;opacity:.92!important}
  body.visual-home header.hero .hero-kit-btn{
    min-height:56px!important;
    height:56px!important;
    padding:0 28px!important;
    font-size:16px!important;
    width:auto!important;
    max-width:none!important;
  }
  body.visual-home header.hero .hero-find-link{font-size:15px!important}
}
@media (min-width:1024px) and (max-width:1199px){
  body.visual-home header.hero::after{
    background:linear-gradient(90deg,#1A2B5A 0%,#1A2B5A 32%,transparent 45%)!important;
  }
  body.visual-home header.hero .visual-hero-photo{object-position:70% 50%!important}
}

/* Navy page banners match the full-width nav (shop, shop by problem, collections).
   The shared 900px rule uses :is() with an ID, so it outranks a class selector. */
@media (min-width:900px){
  body.visual-banner-bleed.r11-visual :is(.page-hero,#hero-bleed-banner){
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    border-radius:0!important;
    box-sizing:border-box!important;
    padding-top:36px!important;
    padding-bottom:36px!important;
    padding-left:max(32px,calc((100% - 1200px) / 2))!important;
    padding-right:max(32px,calc((100% - 1200px) / 2))!important;
  }
}

/* Square breed photos. The 768px files were forced into a 320×213 box. */
main.round4-breed>img.breed-photo{
  display:block;
  width:min(100%,360px);
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:50% 35%;
}
@media (min-width:900px){
  main.round4-breed{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);column-gap:32px;align-items:start;padding-inline:max(24px,calc((100% - 1120px) / 2));box-sizing:border-box}
  main.round4-breed>nav,main.round4-breed>h1,main.round4-breed>p{grid-column:1;margin-left:0}
  main.round4-breed>img.breed-photo{grid-column:2;grid-row:1 / span 3;width:min(100%,360px);justify-self:end;margin:0}
  main.round4-breed>section{grid-column:1 / -1}
}
@media (max-width:479px){
  main.round4-breed .breed-items{display:grid!important;grid-template-columns:1fr!important}
}

/* Round 3: phone hierarchy, one-line kit price, visible bowl, bundle columns,
   PDP gutter, breed alignment, popup inset, sold-out form width.
   Earlier gradient and object-position rules stay in the file so tests can see them.
   These later rules are the ones that paint. */
@media (max-width:599px){
  body.visual-home header.hero{display:flex!important;flex-direction:column!important}
  body.visual-home header.hero .visual-hero-picture{order:0!important;display:block!important;position:relative!important;width:100%!important;height:auto!important}
  body.visual-home header.hero .visual-hero-photo{position:relative!important;width:100%!important;height:auto!important;aspect-ratio:4/3!important;object-fit:cover!important;object-position:center 40%!important}
  body.visual-home header.hero .hero-inner{order:1!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;max-width:none!important;padding:16px 20px 20px!important;box-sizing:border-box!important}
  body.visual-home header.hero .hero-inner>h1{order:1!important}
  body.visual-home header.hero .hero-inner>.hero-sub{order:2!important}
  body.visual-home header.hero .hero-inner>.hero-kit-line{order:3!important;max-width:none!important}
  body.visual-home header.hero .hero-inner>.hero-kit-btn{order:4!important;display:flex!important;width:100%!important;max-width:none!important;min-height:52px!important;height:52px!important;padding:0 16px!important;font-size:16px!important;box-sizing:border-box!important}
  body.visual-home header.hero .hero-inner>.hero-free-plan{order:5!important}
  body.visual-home header.hero .hero-inner>.hero-trust-line{order:6!important}
  body.visual-home header.hero .hero-inner>.hero-clarity,
  body.visual-home header.hero .hero-inner>.hero-find-link{display:none!important}
}
@media (min-width:600px) and (max-width:1023px){
  body.visual-home header.hero .visual-hero-photo{max-height:min(72vh,620px)!important;aspect-ratio:5/4!important;object-position:62% 78%!important}
}
@media (min-width:1024px){
  body.visual-home header.hero::after{background:linear-gradient(90deg,#1A2B5A 0%,#1A2B5A 12%,transparent 30%)!important}
  body.visual-home header.hero .visual-hero-photo{object-position:48% center!important}
  body.visual-home header.hero .hero-inner :is(.hero-kit-line){max-width:28rem!important}
  body.visual-home header.hero .hero-kit-line{max-width:28rem!important;white-space:normal!important}
  body.visual-home header.hero .hero-kit-price{display:inline!important;white-space:nowrap!important}
  body.visual-home header.hero .hero-kit-price-lock{display:inline!important;white-space:nowrap!important}
}
@media (min-width:1024px) and (max-width:1199px){
  body.visual-home header.hero::after{background:linear-gradient(90deg,#1A2B5A 0%,#1A2B5A 10%,transparent 26%)!important}
  body.visual-home header.hero .visual-hero-photo{object-position:46% 42%!important}
}
@media (min-width:1280px){
  body.visual-home #bundles .bundle-row-grid.r8c-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}
  body.visual-home #bundles .r8c-card.r8c-feature{display:flex!important;flex-direction:column!important;grid-column:auto!important;grid-template-columns:none!important}
  body.visual-home #bundles .r8c-feature>.r8c-media{grid-row:auto!important;grid-column:auto!important}
  body.visual-home #bundles .r8c-feature>:not(.r8c-media){grid-column:auto!important}
}
@media (min-width:600px) and (max-width:1023px){
  body.visual-home #bundles .bundle-row-grid.r8c-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.visual-home #bundles .r8c-card.r8c-feature{display:flex!important;flex-direction:column!important;grid-column:auto!important}
  body.visual-home #bundles .r8c-feature>.r8c-media,
  body.visual-home #bundles .r8c-feature>:not(.r8c-media){grid-column:auto!important;grid-row:auto!important}
}
@media (min-width:900px) and (max-width:1279px){
  body.visual-storefront:has(.buybox) :is(.pdp-hero,.product-grid,main.owner-bundle){padding-left:48px!important;padding-right:48px!important;box-sizing:border-box!important;width:100%!important;max-width:none!important}
  body.visual-storefront .buybox{padding-right:72px!important;padding-bottom:88px!important;box-sizing:border-box!important}
}
main.round4-breed{width:min(1120px,calc(100% - 32px));margin-inline:auto;padding:24px 16px 48px;box-sizing:border-box}
body.visual-storefront main.round4-breed>:is(nav,h1,p,section):not(#_){justify-self:start!important;margin:0!important;margin-inline:0!important;padding-left:0!important;padding-right:0!important;text-align:left!important;max-width:none!important;width:auto!important}
main.round4-breed .breed-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
main.round4-breed .breed-items article{min-width:0;display:flex;flex-direction:column;gap:8px}
main.round4-breed .breed-add{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:auto;border:0;border-radius:4px;background:#a8512f;color:#fff;font:600 14px/1.4 Arial,sans-serif;cursor:pointer}
body:has(main.round4-breed)>nav.r3-breadcrumb{display:none!important}
main.round4-breed>nav[aria-label=Breadcrumb]{display:block!important}
@media (max-width:899px){
  main.round4-breed{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:16px 16px 40px!important}
  main.round4-breed>*{margin-left:0!important;margin-right:0!important;max-width:100%!important}
}
.plan-popup-close{top:12px!important;right:12px!important;border:2px solid #E8C97B!important;box-sizing:border-box!important}
.plan-popup-copy{padding:16px 20px calc(16px + env(safe-area-inset-bottom))!important}
.plan-popup .plan-signup__note{margin:0!important}
.plan-popup .plan-signup__msg:empty{display:none!important}
.plan-signup__done{display:grid;gap:8px}
.plan-signup__done p{margin:0}
.plan-signup__bundle{display:grid;gap:8px;padding:12px;border:1px solid var(--line,#e6e2dc);border-radius:6px;background:#fff}
.plan-signup__bundle-btn{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:4px;background:#a8512f;color:#fff!important;text-decoration:none!important;font:600 15px/1.4 Arial,sans-serif}
body.visual-storefront .buybox-trim form.plan-signup[data-back-in-stock]{max-width:none!important;width:100%!important;padding:0!important;box-sizing:border-box!important;display:grid!important;gap:8px!important}
body.visual-storefront .buybox-trim form.plan-signup[data-back-in-stock] input[type=email]{width:100%!important;max-width:none!important;box-sizing:border-box!important}
body.visual-storefront .buybox-trim form.plan-signup[data-back-in-stock] button[type=submit]{font-size:16px!important;width:100%!important;max-width:none!important}
body.visual-storefront .buybox>.sold-out,body.visual-storefront .buybox>button.sold-out{width:100%!important;max-width:none!important;box-sizing:border-box!important}
body.visual-storefront .buybox .round-seven-stock:not(#_){max-width:none!important;width:100%!important}
body.visual-storefront .round-seven-medium{display:flex!important;align-items:center;justify-content:center;width:100%!important;max-width:none!important;min-height:48px;margin:8px 0 0!important;padding:0 16px;box-sizing:border-box;border:1px solid var(--navy,#1A2B5A);border-radius:4px;background:transparent;color:var(--navy,#1A2B5A)!important;font:600 16px/1.4 Arial,sans-serif;text-decoration:none!important}
.visual-storefront .product-card-sold-out,
.visual-storefront .card-body > p:not([class]){display:flex!important;align-items:center;justify-content:center;min-height:44px!important;width:100%;margin:8px 0 0!important;box-sizing:border-box;border-radius:4px;background:#e6e2dc!important;color:#5b5b5b!important;font:600 14px/1.4 Arial,sans-serif!important}
main.round4-breed .breed-items article a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
.visual-storefront :is(.card,.problem-tool-card) :is(h2,h3,h2 a,h3 a){font-family:Arial,sans-serif!important}