body.fooppy-home{--ink:#30206c;--violet:#6026ac;--paper:#fff9ef;background:#fff9ef radial-gradient(ellipse at 50% 65%,#fffdf8,#fff8ed);color:var(--ink);font-size:16px;line-height:1.4}
.fooppy-home header.top{position:relative;background:transparent;border:0;z-index:5}
.fooppy-home header .wrap{max-width:1200px;padding:0 18px}
/* The logo is positioned absolutely, so the grid reserves nothing for it: without a floor on the first column the menu slides under it. */
.fooppy-home .topbar{height:78px;padding:0;grid-template-columns:minmax(292px,1fr) auto 1fr}
.fooppy-home .brand img{width:228px;height:69px;object-fit:contain}
.fooppy-home nav.tabs{gap:16px}
.fooppy-home nav.tabs a{font-size:17px;color:#34236d;white-space:nowrap}
.fooppy-home nav.tabs a img{height:32px;width:42px;object-fit:contain}
.header-heart{justify-self:end;border:1px solid #f2e9df;background:#fffaf4;width:46px;height:46px;border-radius:50%;font-size:27px;color:#ff8e80;box-shadow:0 3px 9px #78462812;cursor:pointer;line-height:1}
.fooppy-home main.wrap{max-width:1536px;padding:0 31px}
.home-hero{position:relative;height:322px;margin:0 -31px;background:#fff9ef;isolation:isolate;z-index:2}
.hero-pets{position:absolute;right:0;bottom:0;width:53.5%;height:auto;max-height:357px;object-fit:contain;object-position:left bottom;z-index:-1;mask-image:linear-gradient(to right,transparent,#000 7%)}
.home-words{position:relative;padding:7px 0 0 10.8%;width:52%;z-index:2}
.home-words h1{font-family:var(--display);font-size:clamp(44px,5.12vw,79px);font-weight:700;line-height:.94;letter-spacing:-2.7px;margin:0 0 15px;color:#58269c;text-shadow:0 2px 0 #ffffff80}
.home-words h1 em{font-style:normal;color:#fa835f;white-space:nowrap}
.home-words>p{font-size:23px;color:#6230a4;margin:0 0 22px;white-space:nowrap;font-weight:600}
.home-search{position:relative;display:flex;align-items:center;gap:24px;background:#fff;border:1px solid #eee3f4;box-shadow:0 5px 10px #5a3c6420,0 0 24px #e9d7ff80;border-radius:99px;padding:6px 16px 6px 27px;height:73px;width:596px;max-width:calc(100% + 20px);margin-left:-34px;color:#7132ba}
.home-search>svg{width:32px;height:32px;flex-shrink:0}
.home-search input{border:0;background:none;min-width:0;flex:1;font:inherit;font-size:18px;color:#392366;outline:none}
.home-search input::placeholder{color:#85809d}
.purple-button{display:inline-flex;justify-content:center;align-items:center;gap:17px;border:0;border-radius:99px;background:linear-gradient(180deg,#974bfb 0%,#7b36da 55%,#6d2dc7 100%);box-shadow:inset 0 2px 3px #cba5ff99,0 4px 9px #6733a92e;color:#fff;text-decoration:none;font:800 16px var(--text);padding:13px 25px;cursor:pointer;white-space:nowrap;transition:transform .18s,box-shadow .18s}
.purple-button:hover{transform:translateY(-2px);box-shadow:inset 0 2px 3px #cba5ff99,0 7px 13px #6733a940}
.home-search>.purple-button{font-size:23px;min-width:169px;height:59px}
.cloud-decoration{position:absolute;left:0;top:-25px;width:156px;mix-blend-mode:darken;z-index:-1}
.paw-decoration{position:absolute;left:5.7%;top:107px;width:55px;mix-blend-mode:darken}
.pet-banners{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:7px 0 0}
.pet-banner{position:relative;display:flex;align-items:center;height:208px;border-radius:36px;background:linear-gradient(120deg,#ffdbba,#ffc7a5);box-shadow:0 5px 10px #81532a0a;isolation:isolate}
.pet-banner.gatto{background:linear-gradient(120deg,#eee0fb,#d9c1ef);color:#50119e}
.pet-portrait{width:44%;height:100%;object-fit:cover;object-position:left bottom;border-radius:36px 0 0 36px;mix-blend-mode:darken;mask-image:linear-gradient(to right,#000 92%,transparent)}
.pet-banner.cane .pet-portrait{height:234px;align-self:flex-end;object-fit:cover}
.pet-copy{flex:1;min-width:0;padding:0 28px 0 12px;color:#ab350c}
.gatto .pet-copy{color:#53169c}
.pet-title{text-decoration:none}
.pet-copy h2{font:700 clamp(32px,3.1vw,49px)/1 var(--display);color:inherit;margin:0 0 4px;letter-spacing:-1px}
.pet-copy p{font-size:20px;line-height:1.17;font-weight:700;margin:0}
.category-pills{display:flex;gap:5px;justify-content:flex-end;margin-top:15px;margin-left:-65px}
.category-pill{display:flex;align-items:center;justify-content:center;gap:5px;background:#fff9f2e8;border:1px solid #fff;border-radius:99px;padding:9px 13px;box-shadow:0 5px 6px #84452418;color:inherit;font:800 16px var(--text);cursor:pointer;white-space:nowrap}
.gatto .category-pill{background:#fbf4ffe8}
.category-pill img{width:30px;height:32px;object-fit:contain;mix-blend-mode:darken}
.category-pill:hover,.all-offers:hover{background:white;transform:translateY(-1px)}
.pet-arrow{position:absolute;right:20px;top:51px;display:grid;place-items:center;border:1px solid #fff;border-radius:50%;width:44px;height:44px;color:inherit;background:#fff8efec;text-decoration:none;font-size:38px;line-height:1}
.cane .pet-arrow{color:#ae340c}
.offers-heading{display:flex;align-items:center;gap:32px;margin:21px 5px 17px}
.offers-heading h2{position:relative;font:700 clamp(30px,3.28vw,51px)/1.1 var(--display);letter-spacing:-1.4px;margin:0;white-space:nowrap;color:#503184;padding-left:45px}
.offers-heading h2:before{content:'☀';position:absolute;left:0;top:0;color:#ffbd4c;font:48px/1 var(--text)}
.offers-heading p{font-size:15.5px;color:#655083;line-height:1.4;margin:0;flex:1}
.all-offers{display:flex;gap:17px;align-items:center;background:#fffcf7;border:1px solid #efe7dc;border-radius:99px;color:#382379;box-shadow:0 3px 5px #78552e09;padding:8px 17px 8px 24px;font:800 14px var(--text);cursor:pointer;white-space:nowrap}
.all-offers span{font-size:28px;line-height:1}
.offer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.offer-card{position:relative;display:grid;grid-template-columns:57% 43%;grid-template-rows:211px 64px;min-width:0;border:1px solid #f1e7dc;border-radius:22px;background:#fffdfa;box-shadow:0 6px 16px #88683b0a;overflow:hidden}
.offer-picture{clip-path:inset(0 0 6px 0);width:100%;height:211px;object-fit:contain;mix-blend-mode:darken;padding:9px 0 0 6px;align-self:end}
.offer-copy{padding:52px 13px 0 0;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.offer-copy h3{font-size:14px;line-height:1.24;margin:0 0 6px;font-weight:800;color:#2e236c}
.offer-copy p{font-size:13px;line-height:1.4;color:#7c7193;margin:0}
.offer-price{color:#ff591d;white-space:nowrap;font-size:27px;letter-spacing:-1.2px;font-weight:800;margin-top:auto;margin-bottom:21px}
.offer-price span{font-size:16px;letter-spacing:0}
.offer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:0 13px 9px 21px;gap:8px}
.shop-count{font-size:14px;color:#807095;display:flex;align-items:center;gap:11px;white-space:nowrap}
.shop-count svg{width:23px;height:23px}
.offer-bottom .purple-button{padding:12px 22px;font-size:15px;gap:16px;min-height:49px}
.purple-button span{font-size:27px;line-height:.7;font-weight:600}
.save-heart{position:absolute;right:9px;top:9px;width:35px;height:35px;border-radius:50%;border:1px solid #f1e8e4;background:#fffdfa;color:#6e369d;font:25px/1 var(--text);box-shadow:0 2px 5px #49313d20;cursor:pointer;z-index:1}
.save-heart[aria-pressed=true]{color:#fb816d;background:#fff0ea}
.example-note{font-size:12px;text-align:center;color:#8c7b91;margin:14px 0 0}
.example-note a{color:inherit}
.live-catalogue{padding:40px 0 8px;max-width:1120px;margin:0 auto}
.live-catalogue>h2{font-size:34px;margin:0 0 8px}
.live-catalogue>p{color:#7b6e8f;margin:0 0 22px}
.live-catalogue>div{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.live-catalogue>div>a{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:24px;background:#ffead7;text-decoration:none;font-weight:800}
.live-catalogue>div>a:nth-child(2){background:#eee0fa}
.live-catalogue b{font:600 28px var(--display)}
.live-catalogue span{font-size:15px;font-weight:400}
.fooppy-home footer{margin-top:45px}
#home-results{position:absolute;top:calc(100% + 10px);left:0;right:0;border:1px solid #e8dcef;border-radius:20px;background:#fff;box-shadow:0 12px 35px #59327626;overflow:auto;max-height:320px;z-index:10;color:#40256a}
#home-results a{display:block;padding:13px 20px;text-decoration:none;font-size:14px;border-bottom:1px solid #f0e8f4}
#home-results a:hover{background:#f8f1ff}
#home-results p{margin:0;padding:20px;font-size:15px}
#filter-status,.empty-favorites{padding:15px 22px;border-radius:16px;background:#f1e6ff;color:#5d298b}
.preview-dialog{max-width:470px;width:calc(100% - 32px);padding:34px;border:1px solid #eadcef;border-radius:28px;background:#fffaf2;color:#4c3267;box-shadow:0 20px 100px #2c105944}
.preview-dialog::backdrop{background:#36204377;backdrop-filter:blur(5px)}
.preview-dialog h2{margin:12px 0;font-size:31px;line-height:1.1}
.preview-dialog p{font-size:16px;line-height:1.6}
.dialog-close{position:absolute;right:15px;top:12px;background:none;border:0;font-size:30px;color:#734a99;cursor:pointer}
.dialog-eyebrow{font-size:12px!important;text-transform:uppercase;letter-spacing:1px;color:#956bb2}
.fooppy-home :focus-visible{outline:3px solid #a761ec;outline-offset:4px}
.home-search:focus-within{outline:3px solid #ba8aed80;outline-offset:3px}
[hidden]{display:none!important}
@media(min-width:1600px){.home-words h1{font-size:79px}}
@media(max-width:1250px){.home-words{padding-left:6%}.home-words h1{font-size:5.5vw}.home-words>p{font-size:19px}.home-search{margin-left:0;width:100%;gap:14px;padding-left:20px}.home-search>.purple-button{min-width:110px}.home-search input{font-size:15px}.home-hero{height:300px}.hero-pets{height:auto}.paw-decoration{left:1%;width:40px}.cloud-decoration{width:100px}.pet-copy{padding-right:18px}.pet-copy p{font-size:17px}.category-pill{padding:8px 10px;font-size:14px}.category-pill img{width:25px;height:26px}.pet-arrow{right:15px;top:35px;width:35px;height:35px}.pet-banner{height:185px}.pet-banner.cane .pet-portrait{height:210px}.offers-heading{gap:20px}.offers-heading h2{font-size:35px;padding-left:30px}.offers-heading h2:before{font-size:32px}.offers-heading p{font-size:13px}.offer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.offer-card{grid-template-columns:52% 48%}.offer-copy h3{font-size:17px}.offer-copy p{font-size:15px}.offer-price{font-size:29px}.offer-picture{padding-top:0}.offer-bottom .purple-button{min-width:54%}}
@media(max-width:760px){.fooppy-home .topbar{height:74px;grid-template-columns:1fr auto;gap:5px}.fooppy-home .brand img{width:146px;height:49px}.fooppy-home nav.tabs{grid-row:2;grid-column:1/-1;gap:28px;padding-bottom:10px}.fooppy-home nav.tabs a{font-size:14px}.fooppy-home nav.tabs a img{width:28px;height:24px}.header-heart{grid-column:2;grid-row:1;width:37px;height:37px;font-size:24px}.fooppy-home .topbar{height:104px}.fooppy-home main.wrap{padding:0 16px}.home-hero{height:500px;margin:0 -16px}.home-words{padding:23px 22px 0;width:100%;text-align:center}.home-words h1{font-size:clamp(39px,8.9vw,66px);letter-spacing:-1.5px;line-height:1.02;margin-bottom:10px}.home-words>p{font-size:clamp(14px,3.5vw,20px);white-space:normal;margin-bottom:18px}.home-search{width:100%;max-width:540px;margin:0 auto;height:61px;padding:5px 6px 5px 16px;gap:10px;text-align:left}.home-search>svg{width:25px;height:25px}.home-search input{font-size:14px}.home-search>.purple-button{height:49px;min-width:88px;padding:10px 20px;font-size:17px}.hero-pets{width:100%;height:270px;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(to bottom,transparent,#000 12%)}.cloud-decoration{width:70px;top:10px;opacity:.7}.paw-decoration{display:none}.pet-banners{grid-template-columns:1fr;gap:18px;margin-top:8px}.pet-banner{height:195px;border-radius:27px}.pet-banner.cane .pet-portrait{height:213px}.pet-copy{padding-left:0;padding-right:20px}.pet-copy h2{font-size:35px}.pet-copy p{font-size:16px}.category-pills{margin-left:-55px;margin-top:17px;gap:4px}.category-pill{padding:8px 10px;font-size:13px;gap:3px}.category-pill img{width:24px;height:26px}.pet-arrow{right:12px;top:28px;width:30px;height:30px;font-size:28px}.offers-heading{flex-wrap:wrap;gap:12px;margin:27px 0 16px}.offers-heading h2{font-size:clamp(27px,6.6vw,39px);width:100%;padding-left:27px;letter-spacing:-.7px}.offers-heading h2:before{font-size:28px}.offers-heading p{font-size:13px}.offers-heading p br{display:none}.all-offers{font-size:12px;padding:8px 12px;gap:7px}.offer-grid{grid-template-columns:1fr;gap:12px}.offer-card{grid-template-columns:53% 47%;grid-template-rows:211px 64px}.offer-copy h3{font-size:16px}.offer-copy p{font-size:14px}.offer-copy{padding-top:51px}.offer-price{font-size:28px}.offer-bottom .purple-button{font-size:14px;padding:12px 20px;min-width:53%}.shop-count{font-size:13px;gap:8px}.example-note{font-size:11px;line-height:1.6}.live-catalogue{padding-top:32px}.live-catalogue>h2{font-size:29px}.live-catalogue>div{grid-template-columns:1fr;gap:12px}.preview-dialog{padding:28px}.preview-dialog .purple-button{font-size:13px}.fooppy-home footer{margin-top:28px}}
@media(min-width:560px) and (max-width:760px){.offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.offer-card{grid-template-columns:1fr;grid-template-rows:185px auto auto}.offer-picture{height:185px}.offer-copy{padding:5px 20px}.offer-price{margin-top:10px;margin-bottom:8px}.offer-bottom{flex-wrap:wrap;padding:12px 20px;gap:12px}.offer-bottom .purple-button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.purple-button{transition:none}}

/* Feather the paper edges of the supplied raster cutouts. */

.cloud-decoration{mix-blend-mode:darken;mask-image:linear-gradient(to bottom,#000 85%,transparent)}
.paw-decoration{mix-blend-mode:darken;mask-image:radial-gradient(ellipse,#000 45%,transparent 72%)}
.pet-portrait{mix-blend-mode:normal}
@media(min-width:1260px){.pet-copy{padding-left:54px}.category-pills{margin-left:-70px}}
.hero-pets{mask-image:linear-gradient(to bottom,transparent,#000 8%)}
.offer-picture{clip-path:inset(0 0 14px 0)}
@media(max-width:760px){
  .home-hero{height:400px}
  .hero-pets{height:195px}
  .pet-banner{height:190px;overflow:hidden}
  .pet-portrait{position:absolute;bottom:51px;left:0;width:44%;height:110px;border-radius:27px 0 0 0}
  .pet-banner.cane .pet-portrait{height:127px}
  .pet-copy{margin-left:44%;padding:20px 24px 0 0;align-self:flex-start}
  .pet-copy h2{font-size:32px}
  .pet-copy p{font-size:15px;line-height:1.25}
  .category-pills{position:absolute;bottom:15px;left:12px;right:12px;margin:0;justify-content:center;gap:5px}
  .category-pill{padding:8px 12px}
  .pet-arrow{right:9px;top:24px;width:26px;height:26px;font-size:25px}
}
.offer-picture{clip-path:inset(0 6px 8px 0)}
@media(min-width:761px) and (max-width:1000px){
  .home-words{width:57%;padding-top:16px}
  .home-words h1{font-size:5.8vw}
  .home-words>p{font-size:17px;white-space:normal;max-width:32ch}
  .home-search{gap:10px;padding-left:17px}
  .home-search>.purple-button{min-width:90px;padding:10px 20px;font-size:20px}
  .home-search input{font-size:14px}
  .pet-banner{height:195px;overflow:hidden}
  .pet-portrait{position:absolute;left:0;bottom:53px;width:44%;height:115px}
  .pet-banner.cane .pet-portrait{height:130px}
  .pet-copy{margin-left:44%;padding:22px 28px 0 0;align-self:flex-start}
  .pet-copy h2{font-size:32px}
  .pet-copy p{font-size:15px}
  .category-pills{position:absolute;left:10px;right:10px;bottom:15px;margin:0;justify-content:center;gap:4px}
  .category-pill{padding:8px 10px;font-size:13px}
  .pet-arrow{right:8px;top:25px;width:28px;height:28px;font-size:27px}
  .offers-heading{flex-wrap:wrap}
  .offers-heading h2{width:100%}
  .offers-heading p{font-size:14px}
}
/* Blend flattened crop boundaries into the page without changing the assets. */
.hero-pets{mask-image:linear-gradient(to bottom,transparent,#000 8%),linear-gradient(to right,transparent,#000 7%);mask-composite:intersect}
.pet-portrait{mask-image:linear-gradient(to right,#000 87%,transparent),linear-gradient(to bottom,transparent,#000 13%);mask-composite:intersect}

/* A cloud badge keeps the purple wordmark distinct from the headline. */
.fooppy-home .brand{position:absolute;left:max(18px,calc((100vw - 1536px)/2 + 28px));top:0;width:280px;height:106px;display:flex;align-items:center;justify-content:center;isolation:isolate;transform:none}
.fooppy-home .brand::before{content:"";position:absolute;inset:0;z-index:-1;background:url('/img/brand/logo-cloud.svg?v=three-waves') center/contain no-repeat;filter:drop-shadow(0 4px 8px #e6b5cc30)}
.fooppy-home .brand img{width:218px;height:73px;transform:translateY(3px)}
@media(max-width:1000px) and (min-width:761px){.fooppy-home .brand{left:10px;width:230px;height:90px}.fooppy-home .brand img{width:185px;height:56px}}
@media(max-width:760px){.fooppy-home .brand{position:relative;left:-8px;top:0;width:174px;height:65px}.fooppy-home .brand img{width:137px;height:42px;transform:translateY(2px)}.fooppy-home .topbar{height:119px}}
@media(min-width:761px){.fooppy-home nav.tabs{grid-column:2}.fooppy-home .header-heart{grid-column:3}}
/* Between the phone breakpoint and a wide desktop the five entries, the logo and the heart no longer fit on one line, and the page gained a sideways scrollbar. Shrink the bar rather than let it push the page. */
@media(min-width:901px) and (max-width:1010px){.fooppy-home nav.tabs{gap:12px}.fooppy-home nav.tabs a{font-size:15px}.fooppy-home nav.tabs a img{width:28px;height:24px}}
/* Narrower still: the logo alone reserves 280px out of flow, which left the first entry sitting underneath it. Shrink the logo here, the way the phone layout already does, so the five entries keep their line. */
@media(min-width:761px) and (max-width:900px){.fooppy-home .topbar{grid-template-columns:minmax(206px,1fr) auto 1fr}.fooppy-home .brand{width:200px}.fooppy-home .brand img{width:160px;height:48px}.fooppy-home nav.tabs{gap:10px}.fooppy-home nav.tabs a{font-size:14px}.fooppy-home nav.tabs a img{width:24px;height:21px}}}
/* Give the headline breathing room below the cloud logo. */
.home-words{padding-top:39px}
.home-hero{height:354px}
@media(min-width:761px) and (max-width:1250px){.home-hero{height:332px}}
@media(min-width:761px) and (max-width:1000px){.home-words{padding-top:48px}}
@media(max-width:760px){.home-words{padding-top:47px}.home-hero{height:424px}}

.home-words h1{color:#65b8e3}

/* Live catalogue cards: longer names and real merchant images. */
.offer-copy h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.offer-copy{padding-top:40px}.offer-copy p{font-size:12px}.offer-bottom a.purple-button{text-decoration:none}.offer-price{margin-bottom:12px}.offer-picture{padding:15px 5px;object-fit:contain}

/* Keep the branded paper opaque in mobile dark browser themes. */
body.fooppy-home{background-color:#fff9ef;color-scheme:only light;isolation:isolate}

/* Keep search suggestions above the independently stacked category banners. */
.fooppy-home .home-search input:focus-visible{outline:none}
#home-results{overscroll-behavior:contain;max-height:min(360px,55vh)}
#home-results a:focus-visible{outline-offset:-4px;background:#f8f1ff}

.home-finder{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,37%);grid-template-rows:auto auto;align-items:center;column-gap:24px;row-gap:16px;width:100%;margin:24px 0 30px;padding:26px 32px;border:1px solid #e9dcf5;border-radius:32px;background:linear-gradient(110deg,#f0e3ff,#fff1df);box-shadow:0 7px 22px #6035910a;text-decoration:none;color:#503184;transition:box-shadow .18s,border-color .18s}
.home-finder:hover{border-color:#cba8ed;box-shadow:0 9px 26px #60359116}
.home-finder-copy{display:flex;min-width:0;flex-direction:column;gap:8px}
.home-finder-copy strong{font:700 clamp(24px,2.1vw,32px)/1.15 var(--display)}
.home-finder-copy>span{font-size:15px;line-height:1.5;color:#756187;max-width:620px}
.home-finder>.purple-button{grid-column:1;justify-self:start;font-size:16px}
.home-finder-pets{grid-column:2;grid-row:1/3;width:100%;height:170px;object-fit:contain}
@media(max-width:760px){
.home-finder{grid-template-columns:minmax(0,1fr);gap:14px;margin:18px 0 24px;padding:22px;border-radius:27px}
.home-finder-copy strong{font-size:25px}
.home-finder-copy>span{font-size:14px}
.home-finder-pets{grid-column:1;grid-row:2;height:auto;max-height:150px}
.home-finder>.purple-button{grid-row:3;justify-self:stretch;min-height:48px}
}
@media(prefers-reduced-motion:reduce){.home-finder{transition:none}}

/* Shared page edges and consistent catalogue tiles. */
.fooppy-home .home-hero{margin-left:0;margin-right:0}
.pet-banner{overflow:hidden}
.home-finder{grid-template-columns:minmax(260px,40%) minmax(0,1fr)}
.home-finder-pets{grid-column:1;grid-row:1/3}
.home-finder-copy{grid-column:2;grid-row:1}
.home-finder>.purple-button{grid-column:2;grid-row:2}
.live-catalogue{max-width:none;width:100%;margin:0}
.live-catalogue>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.live-catalogue>div>a{min-width:0;min-height:208px;border-radius:28px;justify-content:center}
.live-catalogue>div>a:nth-child(3){background:#e9f1df}
.live-catalogue b{font-size:clamp(23px,2.1vw,30px);line-height:1.2}
@media(max-width:760px){
.home-finder{grid-template-columns:minmax(0,1fr)}
.home-finder-pets{grid-column:1;grid-row:1}
.home-finder-copy{grid-column:1;grid-row:2}
.home-finder>.purple-button{grid-column:1;grid-row:3}
.live-catalogue>div{grid-template-columns:1fr}
.live-catalogue>div>a{min-height:190px}
}

/* Rounded hero artwork without clipping the search suggestions. */
.hero-pets{border-radius:32px}
.home-finder-copy{text-align:right;align-items:flex-end}
.home-finder>.purple-button{justify-self:end}
.home-finder-pets{object-position:left center}
@media(max-width:760px){
.hero-pets{border-radius:27px}
.home-finder>.purple-button{justify-self:end}
}

/* A little more breathing room, with equal bands above and below. */
.home-finder{padding-left:48px;padding-right:48px;margin-top:30px;margin-bottom:30px}
.home-finder + .pet-banners{margin-top:0}
@media(max-width:760px){
.home-finder{padding-left:28px;padding-right:28px;margin-top:24px;margin-bottom:24px}
}

.home-finder{padding-left:80px;padding-right:80px}
@media(max-width:760px){.home-finder{padding-left:40px;padding-right:40px}}

/* Consistent compact spacing; mobile portraits stay clear of category controls. */
.home-finder{margin-top:20px;margin-bottom:20px}
.pet-banners{gap:20px}
@media(max-width:760px){
.home-finder{margin-top:12px;margin-bottom:12px;padding:20px 28px;gap:12px}
.pet-banners,.live-catalogue>div,.offer-grid{gap:12px}
.home-finder-pets{max-height:115px}
.pet-banner{height:220px}
.pet-banner .pet-portrait,.pet-banner.cane .pet-portrait{top:8px;bottom:auto;left:0;width:42%;height:145px;object-fit:cover;object-position:left center;border-radius:0;mask-image:linear-gradient(to right,#000 75%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 20%,#000 73%,transparent 100%);mask-composite:intersect}
.pet-copy{margin-left:43%;padding:22px 28px 0 0}
.pet-copy h2{font-size:29px}
.pet-copy p{font-size:14px;line-height:1.3}
.category-pills{bottom:14px;left:10px;right:10px;gap:5px}
.category-pill{padding:8px 10px;min-height:42px;font-size:12px}
.category-pill img{width:22px;height:24px}
.offers-heading{margin-top:12px;margin-bottom:12px}
.live-catalogue{padding-top:12px}
}
.pet-portrait-wrap{display:contents}
@media(max-width:760px){
.pet-banner .pet-portrait,.pet-banner.cane .pet-portrait{object-fit:contain;object-position:center;mask-image:linear-gradient(to right,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 18%,#000 75%,transparent);mask-composite:intersect}
}

/* Footer copy follows the same full-width grid as the homepage cards. */
.fooppy-home footer .wrap{max-width:1536px;padding-left:31px;padding-right:31px}
.fooppy-home footer p{max-width:none;width:100%;text-align:justify}
@media(max-width:760px){.fooppy-home footer .wrap{padding-left:16px;padding-right:16px}}


/* Brands on the home: the shortest path from the page a crawler trusts most to
   the pages that answer how people actually search — a brand and a size. */
.home-brands { margin: 42px auto 0; max-width: 1180px; padding: 0 22px; }
.home-brands h2 { font-size: clamp(20px, 2.4vw, 27px); margin: 0 0 14px; color: #5b21b6; }
.brand-row { display: flex; flex-wrap: wrap; gap: 9px; }
.brand-row a { text-decoration: none; background: #fff; border: 1px solid rgba(60,20,90,.12);
  border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 14px; color: #4a1f68;
  transition: .15s; }
.brand-row a:hover { border-color: #7c3aed; color: #7c3aed; }
.brand-row a.all { background: #7c3aed; color: #fff; border-color: transparent; }

/* Fresh-food guide. The merchant's own creative is served from our domain:
   Awin's cshow.php sets a third-party cookie, which would oblige the whole
   site to carry a consent banner it does not need today. */
.home-promo{display:grid;grid-template-columns:minmax(0,1fr) 251px;align-items:center;gap:30px;width:100%;margin:24px 0 30px;padding:26px 32px;border:1px solid #f3dcc9;border-radius:32px;background:linear-gradient(110deg,#fff3e4,#ffe7ef);box-shadow:0 7px 22px #a3603512;text-decoration:none;color:#60325a;transition:box-shadow .18s,border-color .18s}
.home-promo:hover{border-color:#efbd9b;box-shadow:0 9px 26px #a360351f}
.home-promo-copy{display:flex;flex-direction:column;gap:9px;min-width:0}
.home-promo-copy small{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#c2663a}
.home-promo-copy strong{font:700 clamp(23px,2vw,31px)/1.15 var(--display);color:#53305f}
.home-promo-copy>span{font-size:15px;line-height:1.5;color:#7a6070;max-width:620px}
.home-promo-go{font-weight:800;color:#c2663a}
.home-promo img{border-radius:22px;width:251px;height:251px;justify-self:end}
@media(max-width:760px){.home-promo{grid-template-columns:1fr;gap:18px;padding:22px;text-align:center}.home-promo img{justify-self:center;width:200px;height:200px}.home-promo-copy>span{max-width:none}}
@media(prefers-reduced-motion:reduce){.home-promo{transition:none}}

/* Compact home guides, original illustrations beside the copy. */
.home-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0;align-items:stretch}
.home-duo>a{display:grid;grid-template-columns:minmax(140px,36%) minmax(0,1fr);grid-template-rows:1fr auto;column-gap:24px;row-gap:18px;margin:0;padding:28px;min-width:0;height:100%;text-align:left;align-content:center}
.home-duo .home-finder-pets,.home-duo .home-promo>img{grid-column:1;grid-row:1/3;width:100%;height:auto;max-width:240px;max-height:230px;object-fit:contain;object-position:center;justify-self:center;align-self:center;border-radius:0}
.home-duo .home-promo>img{border-radius:22px}
.home-duo .home-finder-copy,.home-duo .home-promo-copy{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:10px;align-items:flex-start;align-self:center;text-align:left}
.home-duo .home-finder-copy strong,.home-duo .home-promo-copy strong{font:700 clamp(21px,1.65vw,27px)/1.15 var(--display);color:#533087}
.home-duo .home-finder-copy>span,.home-duo .home-promo-copy>span{font-size:14px;line-height:1.5;max-width:none;color:#756187}
.home-duo>a>.purple-button{grid-column:2;grid-row:2;align-self:end}
.home-duo>a:focus-visible{outline:3px solid #7130c1;outline-offset:4px}
@media(min-width:541px) and (max-width:1100px){.home-duo{gap:14px}.home-duo>a{grid-template-columns:minmax(80px,34%) minmax(0,1fr);padding:18px;column-gap:14px;row-gap:12px}.home-duo .home-finder-copy strong,.home-duo .home-promo-copy strong{font-size:20px}.home-duo .home-finder-copy>span,.home-duo .home-promo-copy>span{font-size:13px}.home-duo>a>.purple-button{font-size:13px;padding:10px 12px;gap:8px}.home-duo .home-finder-pets,.home-duo .home-promo>img{max-height:180px}}
@media(max-width:540px){
.home-duo{grid-template-columns:1fr;gap:12px;margin:12px 0}
.home-duo>a{grid-template-columns:100px minmax(0,1fr);padding:20px;column-gap:16px;row-gap:16px;height:auto}
.home-duo .home-finder-pets,.home-duo .home-promo>img{grid-row:1;max-height:120px}
.home-duo .home-finder-copy strong,.home-duo .home-promo-copy strong{font-size:21px}
.home-duo .home-finder-copy>span,.home-duo .home-promo-copy>span{font-size:13px}
.home-duo>a>.purple-button{grid-column:1/3;justify-self:stretch;justify-content:center}
}

/* Keep the supplied portrait creative complete, alongside the text. */
.home-duo .home-promo>img{width:auto;height:260px;max-width:100%;max-height:none;object-fit:contain;border-radius:16px}
@media(max-width:1100px){.home-duo .home-promo>img{height:220px;max-width:100%}}
@media(max-width:540px){.home-duo .home-promo>img{height:auto;width:100%;max-height:220px}}

/* Finder illustration above its copy; the comparison retains its portrait layout. */
.home-duo .home-finder{grid-template-columns:minmax(0,1fr);grid-template-rows:120px 1fr auto;row-gap:14px}
.home-duo .home-finder-pets{grid-column:1;grid-row:1;width:100%;height:120px;max-width:360px;max-height:none;object-position:center}
.home-duo .home-finder-copy{grid-column:1;grid-row:2;align-self:start}
.home-duo .home-finder>.purple-button{grid-column:1;grid-row:3}
@media(max-width:1100px){.home-duo .home-finder{grid-template-rows:100px 1fr auto}.home-duo .home-finder-pets{height:100px}}
@media(max-width:540px){.home-duo .home-finder{grid-template-rows:110px auto auto}.home-duo .home-finder-pets{height:110px;max-width:330px}}

/* Quiet, flat actions within the two editorial guides. */
.home-duo>a>.purple-button{background:rgba(255,255,255,.65);background-image:none;color:#593384;border:1px solid rgba(89,51,132,.24);border-radius:12px;box-shadow:none;text-shadow:none;min-height:42px;padding:10px 16px;font-size:14px;font-weight:700;gap:16px;transition:background .18s,border-color .18s}
.home-duo>a:hover>.purple-button{background:#fff;border-color:#79549c;box-shadow:none;transform:none}
.home-duo>a>.purple-button::before,.home-duo>a>.purple-button::after{display:none}
.home-duo>a>.purple-button span{font-size:20px;line-height:1}
@media(prefers-reduced-motion:reduce){.home-duo>a>.purple-button{transition:none}}

/* Compact guide actions aligned to the right edge of their content. */
.home-duo>a>.purple-button{justify-self:end;min-height:34px;padding:7px 12px;font-size:12px;gap:10px;border-radius:10px}
.home-duo>a>.purple-button span{font-size:17px}

/* Guide actions share the dog category pills' appearance. */
.home-duo>a>.purple-button{background:#fff9f2e8;border:1px solid #fff;border-radius:99px;padding:9px 13px;box-shadow:0 5px 6px #84452418;color:#ae340c;font:800 16px var(--text);gap:5px;min-height:42px;justify-self:end}
.home-duo>a:hover>.purple-button{background:#fff;border-color:#fff;color:#ae340c;box-shadow:0 5px 6px #84452418;transform:translateY(-1px)}
@media(max-width:1250px){.home-duo>a>.purple-button{padding:8px 10px;font-size:14px}}
@media(max-width:760px){.home-duo>a>.purple-button{font-size:12px}}

/* Pictures reach the card edge and carry their own height, the way the
   "Per i cani" banners below do: there the artwork is 114% of the card and
   touches every side, while here it floated inside 18px of padding. The
   padding moves onto the words instead. */
.home-duo>a{padding:0;overflow:hidden;min-height:210px}
/* The tall Dogfy artwork is as high as the card, so on a wide screen the
   column grew, the picture grew with it and dragged both cards to twice
   the height of the banners below. Bound the card and let the picture
   crop instead of setting the proportions. */
.home-duo .home-finder-pets{width:100%;max-width:none;height:auto;max-height:200px;object-fit:contain;object-position:center;justify-self:stretch;align-self:center;margin-top:12px}
.home-duo .home-promo>img{width:100%;max-width:none;height:100%;max-height:300px;object-fit:cover;object-position:center 26%;border-radius:0;align-self:stretch;justify-self:stretch}
.home-duo .home-finder-copy,.home-duo .home-promo-copy{padding-left:26px;padding-right:26px}
.home-duo .home-finder-copy{padding-top:16px}
.home-duo .home-promo-copy{padding-top:24px}
.home-duo>a>.purple-button{margin:0 26px 24px}
@media(max-width:540px){
.home-duo .home-finder-pets{height:120px;margin-top:10px}
.home-duo .home-finder-copy,.home-duo .home-promo-copy{padding-left:18px;padding-right:18px}
.home-duo>a>.purple-button{margin:0 18px 18px}
}

/* Words and action share one line. In the promo card that needs three
   columns, which only fit on a wide screen: at half of 1024px the text
   collapsed to one word per line, so there the action stays below. */
.home-duo>a.home-finder{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto}
.home-duo .home-finder-pets{grid-column:1/-1;grid-row:1}
.home-duo .home-finder-copy{grid-column:1;grid-row:2;align-self:center;padding-bottom:22px}
.home-duo>a.home-finder>.purple-button{grid-column:2;grid-row:2;align-self:center;margin:0 26px 22px 0}
.home-duo>a.home-promo{grid-template-columns:minmax(120px,30%) minmax(0,1fr);grid-template-rows:auto auto}
.home-duo .home-promo>img{grid-column:1;grid-row:1/3}
.home-duo .home-promo-copy{grid-column:2;grid-row:1;align-self:end;padding-top:24px;padding-bottom:0}
.home-duo>a.home-promo>.purple-button{grid-column:2;grid-row:2;align-self:start;justify-self:end;margin:14px 26px 22px 0}

/* Sponsor strip below the catalogue links. Served from our own domain: the
   network's image URL sets a third-party cookie and would oblige the site to
   carry a consent banner. Labelled, because a visitor is owed the difference
   between our comparisons and an advertisement. */
.home-sponsor{margin:26px 0 8px;text-align:center}
.home-sponsor a{display:block;border-radius:22px;overflow:hidden;line-height:0;box-shadow:0 7px 22px #6035910a;transition:box-shadow .18s,transform .18s}
.home-sponsor a:hover{box-shadow:0 9px 26px #60359126;transform:translateY(-2px)}
.home-sponsor img{width:100%;height:auto;max-width:936px}
.home-sponsor small{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#9b8aa6;font-weight:700}
@media(prefers-reduced-motion:reduce){.home-sponsor a{transition:none}}

/* Promo card, settled. The picture runs the full height against the left
   edge, a lane separates it from the words, and the action sits on its own
   row beneath them. Written last and in one place: the rules above it grew
   one override at a time and no longer say what the card should look like. */
.home-duo>a.home-promo{grid-template-columns:minmax(150px,24%) minmax(0,1fr);
  grid-template-rows:1fr auto;column-gap:34px;row-gap:0;min-height:300px;align-items:stretch}
.home-duo .home-promo>img{grid-column:1;grid-row:1/-1;width:100%;height:100%;
  max-width:none;max-height:none;object-fit:cover;object-position:center 26%;
  border-radius:0;align-self:stretch;justify-self:stretch;margin:0}
.home-duo .home-promo-copy{grid-column:2;grid-row:1;align-self:center;
  padding:26px 28px 0 0;gap:12px}
.home-duo>a.home-promo>.purple-button{grid-column:2;grid-row:2;
  justify-self:start;align-self:center;margin:18px 28px 26px 0}
@media(max-width:540px){
.home-duo>a.home-promo{grid-template-columns:minmax(110px,38%) minmax(0,1fr);
  column-gap:18px;min-height:0}
.home-duo .home-promo-copy{padding:18px 18px 0 0}
.home-duo>a.home-promo>.purple-button{margin:12px 18px 18px 0}
}

/* The comparison card carries a composed illustration, not a photograph:
   cropping it cuts the tablet and the piggy bank out of the scene, so it is
   fitted whole and the card keeps a little room around it. */
.home-duo>a.home-promo{grid-template-columns:minmax(0,52%) minmax(0,1fr);column-gap:22px}
.home-duo .home-promo>img{object-fit:contain;object-position:center;padding:14px 0 14px 14px}
/* Dogfy's strip is 469px wide; stretching it to the column would blur it. */
.home-sponsor a.strip{display:inline-block;max-width:469px;margin:0 auto 14px}
.home-sponsor a.strip img{width:100%;height:auto}

/* The finder now carries a full scene with its own sky and meadow, not a cut-out
   on the card's gradient: it is cropped to the strip rather than letterboxed. */
.home-duo .home-finder-pets{height:200px;max-height:200px;object-fit:cover;object-position:center 58%;border-radius:18px;margin-top:0}
.home-duo>a.home-finder{padding-top:18px}

/* Both cards read the same way, as in the drawing: a full-width panel of
   artwork on top, then the words, then the action. The earlier side-by-side
   arrangement left the right picture small beside a large one. */
.home-duo>a.home-promo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;
  column-gap:0;row-gap:0;padding-top:18px}
.home-duo .home-promo>img{grid-column:1;grid-row:1;width:100%;height:200px;max-height:200px;
  object-fit:cover;object-position:center 42%;border-radius:18px;padding:0;
  justify-self:stretch;align-self:start}
.home-duo .home-promo-copy{grid-column:1;grid-row:2;align-self:start;padding:16px 26px 0 0}
.home-duo>a.home-promo>.purple-button{grid-column:1;grid-row:3;justify-self:start;
  align-self:start;margin:16px 26px 24px 0}
@media(max-width:540px){
.home-duo .home-promo>img{height:150px;max-height:150px}
.home-duo .home-promo-copy{padding:14px 18px 0 0}
.home-duo>a.home-promo>.purple-button{margin:12px 18px 18px 0}
}

/* Artwork to the top edge and taller; the card's own corners clip it, so it
   carries no radius of its own. The action sits beside the heading on both
   cards, which is what tells them apart from a stack of text. */
/* Both cards stack from the top. An earlier rule centred the finder's rows,
   which pushed its artwork down and left the two misaligned. */
.home-duo>a.home-finder,.home-duo>a.home-promo{padding-top:0;align-content:start;row-gap:0}
.home-duo>a.home-finder{grid-template-rows:auto auto}
.home-duo .home-finder-pets,.home-duo .home-promo>img{
  width:100%;height:250px;max-height:250px;object-fit:cover;object-position:center 45%;
  border-radius:0;margin:0;padding:0;justify-self:stretch;align-self:start}
.home-duo>a.home-promo{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto}
.home-duo .home-promo>img{grid-column:1/-1;grid-row:1}
.home-duo .home-promo-copy{grid-column:1;grid-row:2;align-self:start;padding:18px 0 24px 26px}
.home-duo>a.home-promo>.purple-button{grid-column:2;grid-row:2;align-self:start;
  justify-self:end;margin:18px 26px 0 18px}
.home-duo .home-finder-copy{padding:18px 0 24px 26px}
.home-duo>a.home-finder>.purple-button{align-self:start;margin:18px 26px 0 18px}
@media(max-width:540px){
.home-duo .home-finder-pets,.home-duo .home-promo>img{height:170px;max-height:170px}
.home-duo .home-finder-copy,.home-duo .home-promo-copy{padding:16px 0 18px 18px}
.home-duo>a.home-finder>.purple-button,.home-duo>a.home-promo>.purple-button{margin:16px 18px 0 10px}
}