@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');
:root {
  color-scheme: only light;
  --accent: #7D0458;
  --accent-soft: #f4e3f7;
  --deep: #6A0250;
  --coral: #FF7047;
  --bg: #FFFFFF;
  --paper: #FFFFFF;
  --bg-alt: #f7e6d6;
  --ink: #4A0540;
  --on-accent: #fff;
  --muted: color-mix(in srgb, var(--ink) 58%, transparent);
  --line: color-mix(in srgb, var(--ink) 13%, transparent);
  --card: #fff;
  --radius: 20px;
  --text: "Nunito", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Headings are Nunito at its heaviest, not Fredoka: the mockups set them in
     a rounded grotesque, and Fredoka's wider, bubblier letters are the one
     thing that still read as the old pastel site. Fredoka stays for the
     wordmark alone, which is where that shape belongs. */
  --display: "Nunito", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wordmark: "Fredoka", "Nunito", ui-sans-serif, sans-serif;
  --mono: "Nunito", ui-sans-serif, sans-serif;
  --violet: #7D0458;
  --lilac: #FAEDF8;
  --price: #C0140F;
  --gold: #FFD24A;
  --header-a: #8A0659;
  --header-b: #56004A;
}
/* No dark inversion: the pastel paper is the brand, and flipping it to black
   turns a friendly catalogue into something else entirely. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background-color: #FFFFFF; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16.5px/1.65 var(--text); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; --page-gutter: 22px; }
.wrap.wide { max-width: 1240px; }
.bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }

/* ---- header ----
   Two rows, as the mockup draws them: a plum bar that carries the lockup, the
   claim, the search and the three controls on the right, and under it a pale
   row of the sections with their icons. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
header.top { position: sticky; top: 0; z-index: 40; }
.hbar { background: linear-gradient(100deg, var(--header-a), var(--header-b)); color: #fff; }
.hbar .wrap { display: flex; align-items: center; gap: 20px; padding-top: 11px; padding-bottom: 11px; }
/* The lockup: the brand's own mark, as supplied, beside the word. */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  color: #fff; flex: none; }
.brand .mark { width: 46px; height: 46px; flex: none; display: block; border-radius: 11px; }
.brand .wordmark { font-family: var(--wordmark); font-weight: 600; font-size: 31px;
  line-height: 1; letter-spacing: -.012em; color: #fff; }
.claim { flex: none; font-weight: 800; font-size: 15px; line-height: 1.22; color: #fff;
  letter-spacing: -.005em; }
.claim img { width: 17px; height: 17px; vertical-align: -3px; margin-left: 5px;
  filter: brightness(0) invert(1); }
/* The search is the widest thing in the bar, because it is the thing most
   visitors came to use. */
.hsearch { flex: 1 1 auto; min-width: 0; max-width: 560px; position: relative; display: flex; }
.hsearch input { flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink); font: 600 15.5px var(--text);
  padding: 0 18px 0 48px; }
.hsearch input::placeholder { color: #9a8a96; font-weight: 500; }
.hsearch .glass { position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 21px; height: 21px; pointer-events: none; }
.hsearch button { position: absolute; right: 5px; top: 5px; bottom: 5px; border: 0;
  border-radius: 999px; background: var(--deep); color: #fff; font: 800 14.5px var(--text);
  padding: 0 20px; cursor: pointer; }
.hacts { display: flex; align-items: center; gap: 20px; margin-left: auto; flex: none; }
.hact { display: grid; justify-items: center; gap: 3px; color: #fff; text-decoration: none;
  font-size: 12px; font-weight: 700; line-height: 1; }
.hact img { width: 25px; height: 25px; filter: brightness(0) invert(1); }
.hact:hover { opacity: .82; }
.hsep { width: 1px; height: 36px; background: #ffffff59; flex: none; }
/* The language switch. Each flag is a link to the same page on the other site,
   and the one you are on is marked, not merely highlighted. */
.langs { display: flex; align-items: center; border: 1.6px solid #ffffffa8;
  border-radius: 999px; overflow: hidden; background: #ffffff1f; flex: none; }
.langs a, .langs span { display: grid; place-items: center; width: 36px; height: 28px; }
.langs a + a, .langs span + a, .langs a + span { border-left: 1.6px solid #ffffffa8; }
.langs svg { width: 21px; height: 15px; border-radius: 2px; display: block; }
.langs [aria-current] { background: #ffffff33; }
.langs a:hover { background: #ffffff2e; }
/* The row of sections. It scrolls sideways on a phone rather than hiding
   behind a button: the sections are the site, and they stay in sight. */
.navrow { background: #FBF8FD; border-bottom: 1px solid #f1e3f6; }
.navrow .wrap { display: flex; align-items: center; gap: 2px; overflow-x: auto;
  scrollbar-width: none; padding-top: 5px; padding-bottom: 5px; }
.navrow .wrap::-webkit-scrollbar { display: none; }
.navrow a { display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 9px 13px; border-radius: 999px; text-decoration: none; color: var(--deep);
  font-weight: 800; font-size: 15.5px; white-space: nowrap; }
.navrow a img { width: 22px; height: 22px; flex: none; }
.navrow a:hover { background: var(--lilac); }
.navrow a[aria-current="page"] { background: var(--lilac); }
@media (max-width: 1100px) {
  .claim { display: none; }
}
@media (max-width: 860px) {
  .hact span { display: none; }
  .hacts { gap: 14px; }
  .hbar .wrap { gap: 13px; }
}
@media (max-width: 700px) {
  /* The bar wraps: lockup and controls on one line, the search under them,
     full width, which is the shape a phone wants anyway. */
  .hbar .wrap { flex-wrap: wrap; gap: 10px 13px; }
  .hsearch { order: 3; flex-basis: 100%; max-width: none; }
  .hsearch input { height: 42px; padding-left: 44px; }
  .hsearch button { padding: 0 15px; font-size: 13.5px; }
  .brand .mark { width: 40px; height: 40px; }
  .brand .wordmark { font-size: 26px; }
  .hsep { display: none; }
  .navrow a { font-size: 14.5px; padding: 8px 10px; gap: 7px; }
  .navrow a img { width: 19px; height: 19px; }
}

/* The one link a content page exists for. Same shape as the shop button on a
   product page, which lives in product.css and is not loaded here. */
a.cta-button, .prose a.cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  text-decoration: none; background: linear-gradient(#9341cf, #7021aa); border: 1px solid #6f219f;
  box-shadow: inset 0 1px 2px #d6a3ff99, 0 5px 9px #74319b25; color: #fff; border-radius: 99px;
  min-height: 49px; padding: 13px 28px; font-weight: 800; font-size: 15px; margin: 6px 0 2px;
  transition: transform .15s, box-shadow .15s; }
a.cta-button:hover, .prose a.cta-button:hover { transform: translateY(-2px); box-shadow: 0 7px 16px #74319b35; color: #fff; }
@media (prefers-reduced-motion: reduce) { a.cta-button { transition: none; } }
.finder-entry { display: block; text-align: center; margin: 22px 0; padding: 16px;
  background: #f3eaff; border: 1px solid #e6d5fa; border-radius: 22px;
  color: #6026ac; font-weight: 800; text-decoration: none; }
.finder-entry:hover { background: #eadbfa; }
/* ---- type ---- */
h1 { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 5.4vw, 54px);
  line-height: 1.05; letter-spacing: -.02em; margin: 34px 0 12px; color: var(--violet); }
h2 { font-family: var(--display); font-weight: 800; font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: -.01em; margin: 42px 0 12px; color: var(--violet); }
.lede { color: var(--muted); margin: 0 0 26px; font-size: 18px; max-width: 62ch; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin: 34px 0 6px; }

/* ---- demo ---- */
.demo { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 22px; margin: 30px 0 10px; }
.demo h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.015em; }
.demo p { margin: 0 0 18px; font-size: 14.5px; color: var(--muted); }
.bar { display: grid; grid-template-columns: minmax(84px, auto) 1fr auto; align-items: center;
  gap: 14px; margin: 9px 0; font-size: 14.5px; }
.bar i { font-style: normal; color: var(--muted); }
.bar .track { display: block; height: 13px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.bar .fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.bar b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.save { margin: 14px 0 0; font-size: 14.5px; }
.save b { color: var(--accent); }

/* The old hero block lived here. The home draws its own in home.css now,
   and nothing else on the site used these names. */

.stage { background: var(--bg-alt); border: 1px dashed var(--line); border-radius: 14px;
  padding: 14px 18px; margin: 22px 0 6px; font-size: 14.5px; color: var(--muted); }
.stage b { color: var(--ink); }
.stage a { color: var(--violet); font-weight: 700; }

/* ---- animal banners ---- */
.animals { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin: 20px 0 6px; }
.animal { border-radius: 24px; padding: 26px 26px 22px; text-decoration: none; display: block; position: relative; }
.animal { display: flex; gap: 0; align-items: stretch; padding: 0; overflow: hidden;
  position: relative; min-height: 172px; max-height: 210px; }
.animal .face { width: 38%; max-width: 218px; flex: none; object-fit: cover;
  object-position: left center; display: block; }
.animal .txt { min-width: 0; padding: 22px 44px 20px 20px; display: flex; flex-direction: column; justify-content: center; }
.animal .pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.animal .pills .pill { background: #fff; border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 700; }
.animal .arrow { position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  background: #fff; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-size: 21px; font-weight: 700; line-height: 1; box-shadow: 0 2px 8px rgba(80,40,120,.14); }
.animal .go { display: none; }
.animal h3 { font-family: var(--display); font-weight: 700; font-size: 28px; margin: 0 0 6px; letter-spacing: -.01em; }
.animal p { margin: 0 0 16px; font-size: 15.5px; font-weight: 600; opacity: .85; }
.animal .go { display: inline-block; background: #fff; border-radius: 999px; padding: 8px 18px;
  font-weight: 700; font-size: 14px; }

/* ---- shop count + compare ---- */
.shops { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  color: var(--muted); }
.shops.soon { color: var(--muted); font-weight: 600; font-style: italic; }
.pending { font-size: 14px; color: var(--muted); font-weight: 600; margin: 2px 0 0; }
.compare.ghost { background: transparent; color: var(--violet); border: 2px solid var(--line); }
.card:hover .compare.ghost { border-color: var(--violet); background: transparent; }
.compare { background: var(--violet); color: #fff; border-radius: 999px;
  padding: 9px 16px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 14px; }
.card:hover .compare { background: var(--accent); }

/* ---- product images ---- */
.shot { aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center; margin: 0; }
.shot img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.shot.big { aspect-ratio: 4/3; max-width: 460px; margin: 26px 0 0; }
.shot.big img { padding: 20px; }
.shot.lettered { background: linear-gradient(150deg, var(--accent-soft), var(--bg-alt));
  border-color: transparent; gap: 4px; text-align: center; padding: 14px; }
.shot.lettered .word { font-family: var(--display); font-weight: 700; font-size: clamp(17px, 3.4vw, 25px);
  color: var(--accent); line-height: 1.1; letter-spacing: -.01em; }
.shot.lettered .sub { font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--ink) 52%, transparent);
  text-transform: uppercase; letter-spacing: .08em; }

/* ---- cards ---- */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); margin: 22px 0 44px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-decoration: none; display: grid; grid-template-columns: 116px 1fr; gap: 14px;
  align-items: start; transition: .16s; box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 6%, transparent); }
.card .body { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.card .foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card:hover { transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 10%, transparent); }
.card .brandname { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.card .name { font-weight: 700; margin: 3px 0 10px; line-height: 1.3; color: var(--violet); }
.unit { font-family: var(--display); font-size: 27px; font-weight: 600; color: var(--accent);
  letter-spacing: -.015em; line-height: 1; }
.unit small { font-family: var(--text); font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.from { font-size: 13px; color: var(--muted); margin-top: 5px; }
.spark { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent);
  margin: 12px 0 0; overflow: hidden; }
.spark span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft);
  color: #3d1a63; font-weight: 700; }

/* ---- search ---- */
.search { position: relative; flex: 1 1 180px; max-width: 330px; }
.search input { width: 100%; padding: 11px 18px; border-radius: 999px; font: inherit; font-size: 14.5px;
  border: 2px solid var(--line); background: var(--card); color: var(--ink); }
.search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#results, .suggest { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 7px);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ink) 18%, transparent); }
#results a, .suggest a { display: block; padding: 11px 15px; text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--line); }
#results a:last-child, .suggest a:last-child { border-bottom: 0; }
#results a:hover, .suggest a:hover { background: var(--bg-alt); }
#results .u, .suggest .u { float: right; font-weight: 700; color: var(--accent); }
#results .none, .suggest .none { padding: 13px 15px; font-size: 14px; color: var(--muted); }
@media (max-width: 680px) {
  .search { order: 3; max-width: none; flex: 1 0 100%; }
  nav.tabs { margin-left: auto; }
}

/* ---- chips, tables ---- */
/* Pagination: written as markup earlier with no styles at all, which left the
   numbers as bare text crammed together. Same shape as the chips above. */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 26px 0; justify-content: center; }
.pager .page { display: inline-grid; place-items: center; min-width: 42px; height: 42px;
  padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  text-decoration: none; font-weight: 700; font-size: 14.5px; color: var(--violet);
  transition: .15s; }
.pager .page:hover { border-color: var(--violet); color: var(--violet);
  transform: translateY(-1px); }
.pager .page.here { background: var(--violet); color: #fff; border-color: transparent;
  pointer-events: none; }
.pager .page.prev, .pager .page.next { font-weight: 700; padding: 0 20px; }
.pager .gap { color: var(--muted); padding: 0 2px; font-weight: 700; }
@media (max-width: 560px) {
  .pager { gap: 6px; }
  .pager .page { min-width: 38px; height: 38px; padding: 0 11px; font-size: 13.5px; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 6px; }
.chips a { text-decoration: none; font-size: 13px; font-weight: 500; padding: 7px 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); transition: .15s; }
.chips a:hover { border-color: var(--accent); color: var(--accent); }
/* ---- search results ---- */
.search-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.search-bar input[type="search"] { flex: 1 1 260px; min-width: 0; min-height: 52px;
  padding: 12px 20px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--card); font: 500 16px var(--text); color: inherit; }
.search-bar input[type="search"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.search-bar button[type="submit"] { min-height: 52px; padding: 12px 30px; border-radius: 99px;
  border: 1px solid #6f219f; background: linear-gradient(#9341cf, #7021aa); color: #fff;
  font: 800 16px var(--text); cursor: pointer; }
.search-bar button[type="submit"]:hover { background: linear-gradient(#9d4eda, #7a28b6); }
#search-more { display: block; margin: 26px auto; cursor: pointer; }
/* Listing filters: the search page's column, but holding links, because these
   are the paths a crawler follows and a dropdown is not followed. */
/* The saving used to be green, the one hue left over from a palette the site
   no longer has. It is the yellow of the brand now. */
.saving { display: inline-block; margin: 7px 0 0; padding: 4px 11px; border-radius: 99px;
  background: #FBE7A4; color: #5c3f02; font-size: 12.5px; font-weight: 800; }
.brand-index { margin-bottom: 8px; }
.brand-index a { min-width: 38px; justify-content: center; font-weight: 800; }
.brand-letter { margin: 26px 0; scroll-margin-top: 16px; }
.brand-letter h2 { margin: 0 0 8px; font: 700 26px var(--display); color: var(--accent); }
.listing-facets { align-self: start; }
.facet-search { margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.facet-search label { display: block; margin: 0 0 7px; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 700; }
.facet-search input { width: 100%; padding: 11px 12px; border: 1px solid #dbcde9;
  border-radius: 13px; background: #fff; color: #30206c; font: inherit; }
.facet-search button { margin-top: 9px; width: 100%; border: 0; border-radius: 99px;
  padding: 11px 20px; background: var(--accent); color: #fff;
  font: 800 15px var(--display); cursor: pointer; }
.facet-search button:hover { filter: brightness(1.06); }
.facet-label { margin: 18px 0 6px; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 700; }
.facet-label:first-of-type { margin-top: 4px; }
.facet-list { list-style: none; margin: 0 0 4px; padding: 0; }
.facet-list li { margin: 0; }
.facet-list a { display: block; padding: 7px 10px; border-radius: 12px; font-size: 14.5px;
  font-weight: 600; color: var(--violet); text-decoration: none; }
.facet-list a:hover { background: var(--bg-alt); }
.facet-list a.is-current { background: var(--accent-soft); color: var(--accent); font-weight: 800; }
#listing-panel > summary { cursor: pointer; list-style: none; }
#listing-panel > summary::-webkit-details-marker { display: none; }
#listing-panel > summary h2 { display: inline; font-size: 25px; margin: 0; }
#listing-panel > summary::after { content: " ƒ9"; display: inline-block;
  transform: rotate(-90deg); font-size: 26px; vertical-align: middle; margin-left: 8px; }
#listing-panel[open] > summary::after { transform: rotate(90deg); }
@media (min-width: 761px) { #listing-panel > summary::after { display: none; } }
#search-panel > summary { cursor: pointer; list-style: none; }
#search-panel > summary::-webkit-details-marker { display: none; }
#search-panel > summary h2 { display: inline; }
#search-panel > summary::after { content: " ƒ9"; display: inline-block;
  transform: rotate(-90deg); font-size: 26px; vertical-align: middle; margin-left: 8px; }
#search-panel[open] > summary::after { transform: rotate(90deg); }
@media (min-width: 761px) { #search-panel > summary::after { display: none; } }
.narrow-label, .chip-row-label { margin: 18px 0 0; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }
.narrow-label + .chips, .chip-row-label + .chips { margin-top: 8px; }
.chips a.is-current { border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); font-weight: 600; }
table { width: 100%; border-collapse: collapse; margin: 14px 0 8px; font-size: 15px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); }
th { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
td.num { text-align: right; font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
tbody tr:first-child td { background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* ---- hero unit on product page ---- */
.hero-unit { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin: 20px 0; }
.hero-unit b { font-family: var(--display); font-size: 40px; color: var(--accent); letter-spacing: -.02em; line-height: 1; }
.hero-unit span { color: var(--muted); font-size: 15px; }
.warn { background: var(--bg-alt); border-left: 3px solid var(--accent); padding: 11px 15px;
  border-radius: 8px; font-size: 14px; color: var(--muted); margin: 16px 0; }

/* ---- section tiles ---- */
.two { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 30px 0 10px; }
.sect { border-radius: 14px; padding: 26px; text-decoration: none; display: block;
  border: 1px solid rgba(0,0,0,.07); transition: .18s; }
.sect:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.13); }
.sect .mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px; }
.sect .mark svg { width: 23px; height: 23px; }
.sect h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.sect p { margin: 0; font-size: 15px; opacity: .82; }
.sect .count { margin-top: 14px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }

/* ---- footer ----
   The plum block the mockup closes on: the lockup, two columns of links, the
   language switch, and under a hairline the small print the law and the
   affiliate programmes require. */
footer { margin-top: 64px; background: #52024A; color: #fff; padding: 38px 0 26px;
  font-size: 14.5px; }
.footgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 30px 40px;
  align-items: start; }
.footgrid .brand .wordmark { font-size: 29px; }
.footcol h3 { margin: 4px 0 11px; font-family: var(--display); font-weight: 800;
  font-size: 16px; color: #fff; }
.footcol a { display: block; color: #ffffffd6; text-decoration: none; padding: 3px 0;
  font-weight: 500; }
.footcol a:hover { color: #fff; text-decoration: underline; }
.footlang { display: grid; gap: 11px; justify-items: start; }
.footlang h3 { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: 16px; }
.footnote { margin-top: 30px; padding-top: 18px; border-top: 1px solid #ffffff2e;
  font-size: 12.5px; color: #ffffffad; }
.footnote p { margin: 6px 0; max-width: 95ch; }
.footnote a { color: #fff; font-weight: 600; }
.footsign { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
  align-items: center; margin-top: 16px; font-size: 12.5px; color: #ffffffad; }
.footsign img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 7px;
  filter: brightness(0) invert(1); opacity: .75; }
@media (max-width: 820px) {
  .footgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footgrid { grid-template-columns: 1fr; gap: 22px; }
}
.prose { max-width: 68ch; }
.prose h2 { font-size: 21px; margin: 34px 0 10px; }
.prose p { margin: 0 0 14px; }
.prose a { color: var(--violet); font-weight: 700; }

/* ------------------------------------------------- the catalogue, redrawn */
/* The listings used to be wide rows with the picture beside the words. The
   mockups make them a grid of upright cards, the same card the home shows, so
   a product looks the same wherever a reader meets it. */
.grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 18px; }
.card { display: flex; flex-direction: column; border: 1px solid #f2e4f1; padding: 16px;
  border-radius: 20px; box-shadow: 0 4px 14px #4a054012; }
.card:hover { transform: translateY(-2px); border-color: #e8cfe8;
  box-shadow: 0 10px 22px #4a05401f; }
.card .shot { width: 100%; height: 186px; margin: 0 0 14px; border-radius: 14px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  overflow: hidden; }
.card .shot img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; }
.card .brandname { font-size: 11px; letter-spacing: .11em; }
.card .name { font: 800 16.5px/1.27 var(--display); color: var(--ink); margin: 4px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* The price is red and the count is grey beside it, on one line, the way the
   mockup writes them. */
.priceline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 2px 0; }
.unit { font: 900 25px var(--display); color: var(--price); letter-spacing: -.02em;
  margin: 0; }
.unit small { font-weight: 700; color: var(--muted); }
.priceline .shops { font-size: 13px; font-weight: 600; color: var(--muted); }
.from { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.spark { height: 4px; margin: 9px 0 2px; }
.card .tags { margin-top: 8px; }
.card .foot { flex-direction: column; align-items: stretch; gap: 9px; }
.shops { justify-content: flex-start; }
.compare, .compare.ghost { width: 100%; display: flex; align-items: center; gap: 9px;
  justify-content: center; padding: 12px 18px; font: 800 15px var(--display);
  background: var(--violet); color: #fff; border: 0; }
.compare img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.card:hover .compare { filter: brightness(1.12); }
.compare.ghost { background: var(--lilac); color: var(--violet); }

/* The filter rail: one tinted column, the way the mockups draw it. */
.finder-layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 22px;
  align-items: start; }
@media (max-width: 860px) { .finder-layout { grid-template-columns: 1fr; } }
.finder-panel { background: #f4e3f7; border: 0; border-radius: 22px; padding: 20px; }
.finder-panel h2, .finder-panel > strong { font: 900 21px var(--display); color: var(--ink); }

/* ------------------------------------------------------- the page heading */
/* The band this block used to describe was a tinted box with a picture beside
   it, inside a .pagehero-inner that nothing renders any more. Two of its rules
   outlived it and fought the band that replaced them: .pagehero img capped the
   photograph at 520px so it could never cover the band, and the wrapper pushed
   itself out with calc(50% - 50vw), which counts the scrollbar. The band is
   defined once, further down. */
/* The listing keeps one heading: the band carries it, so the old one goes. */
.pagehero + h1 { display: none; }
/* A listing with a filter rail needs the room: at 1120px the grid fell to two
   columns and the page read as half empty. */
main.wrap:has(.finder-layout) { max-width: 1260px; }

/* ------------------------------------------- a page that opens on a band */
/* The band has to touch both edges of the window, so on these pages the
   wrapper stops constraining and each ordinary child takes the measure back.
   No arithmetic against vw, so no half-scrollbar drift. */
main.wrap:has(.pagehero) { max-width: none; padding: 0; }
main.wrap:has(.pagehero) > *:not(.pagehero):not(.closing-band) {
  width: min(100% - 2 * var(--gutter, 24px), 1200px); margin-inline: auto;
}
.pagehero {
  --band-a: #F7E7FA; --band-b: #EFD9F6;
  background: linear-gradient(104deg, var(--band-a), var(--band-b));
  margin: 0 0 28px; display: grid; align-items: center;
  position: relative; isolation: isolate; overflow: hidden;
}
.pagehero.has-photo { min-height: 290px; }
/* The photograph is the band, drawn with the animal on one side and the other
   side left empty for the words. */
.pagehero-photo {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pagehero[data-band="cane"] { --band-a: #FCEBF4; --band-b: #F2DBF7; }
.pagehero[data-band="gatto"] { --band-a: #F3E6FB; --band-b: #EBDAF8; }
.pagehero[data-band="food"] { --band-a: #FBEAF7; --band-b: #F1DCF6; }
.pagehero[data-band="accessori"] { --band-a: #F7E6F6; --band-b: #EEDAF5; }
.pagehero[data-band="care"] { --band-a: #F2E7FB; --band-b: #E9DCF8; }
.pagehero.deep { --band-a: #6E0352; --band-b: #58014B; color: #fff; }
.pagehero-words {
  position: relative; z-index: 1;
  width: min(100% - 2 * var(--gutter, 24px), 1200px); margin-inline: auto;
  padding: 34px 0 38px;
}
/* Held to the half the photograph leaves empty. */
.pagehero.has-photo .pagehero-words > * { max-width: 520px; }
/* The paw the home sets behind its heading, repeated here so a listing opens
   on the same page the home does. */
.pagehero { position: relative; overflow: hidden; }
.pagehero:not(.deep)::after {
  content: ""; position: absolute; right: 3%; top: 50%; width: 132px; height: 132px;
  transform: translateY(-50%); opacity: .5; pointer-events: none;
  background: url("/img/ui/icons/impronta.svg") center / contain no-repeat;
}
.pagehero.has-photo::after { display: none; }
@media (max-width: 700px) { .pagehero::after { display: none; } }
.pagehero h1 { margin: 0 0 10px; color: var(--deep);
  font: 900 clamp(29px, 3.5vw, 45px)/1.09 var(--display); letter-spacing: -.025em; }
.pagehero.deep h1 { color: #fff; }
.pagehero p { margin: 0; max-width: 62ch; font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 1.45; color: #4a2a46; font-weight: 500; }
.pagehero.deep p { color: #ffffffd8; }

@media (max-width: 880px) {
  /* Too narrow to hold both: the picture goes above the words, which take the
     lilac back, so nothing is read over an animal. */
  .pagehero.has-photo { min-height: 0; display: block; }
  .pagehero-photo { position: static; height: 175px; z-index: 0;
    object-position: 100% 45% !important; }
  .pagehero-words { width: 100%; padding: 22px var(--gutter, 24px) 26px; }
  .pagehero.has-photo .pagehero-words > * { max-width: none; }
}

.crumb { display: flex; gap: 9px; align-items: center; font-size: 13.5px;
  font-weight: 700; color: var(--muted); margin: 0 0 12px; }
.crumb a { color: var(--accent); text-decoration: underline; }
.pagehero.deep .crumb { color: #ffffffb8; }
.pagehero.deep .crumb a { color: #fff; }

/* The search field inside an opening band: the same pill the home draws. */
.band-search { display: flex; align-items: center; gap: 10px; background: #fff;
  border-radius: 999px; padding: 5px 5px 5px 18px; max-width: 460px; margin-top: 20px;
  border: 1px solid #efdcee; box-shadow: 0 5px 16px #6a025014; }
.band-search svg { width: 21px; height: 21px; flex: none; color: var(--accent); }
.band-search input { flex: 1; min-width: 0; border: 0; background: none; outline: 0;
  font: 500 15.5px var(--text); color: var(--ink); padding: 12px 0; }
.band-search button { flex: none; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #8E0A66, #6A0250);
  border-radius: 999px; padding: 12px 24px; font: 800 15.5px var(--display); }
.band-search button:hover { filter: brightness(1.12); }

/* The six doors into an animal's catalogue. */
.cat-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px; margin: 0 0 30px; }
@media (max-width: 860px) { .cat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .cat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat-tile { display: block; text-decoration: none; border-radius: 18px;
  background: linear-gradient(180deg, #FDF6FC, #F6E7F7); border: 1px solid #f1dff1;
  text-align: center; padding: 11px 11px 13px; transition: transform .15s, box-shadow .15s; }
.cat-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px #6a025018; }
.cat-tile img { display: block; width: 100%; height: auto; border-radius: 12px; }
.cat-tile span { display: block; margin-top: 9px; padding: 0 4px;
  font: 800 15px var(--display); color: var(--deep); }

/* The heading of the catalogue, with its spark, and the ordering control. */
.listing-head { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin: 0 0 16px; }
.listing-head h2 { margin: 0; display: flex; align-items: center; gap: 10px;
  font: 900 clamp(24px, 3.2vw, 38px) var(--display); letter-spacing: -.03em; }
.heading-spark { width: 22px; height: 22px; flex: none; background: var(--violet);
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
  display: inline-block; }
.sort-control select { appearance: auto; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px; background: #fff; color: var(--ink); font: 700 14.5px var(--text);
  min-height: 44px; }

/* The band that closes a listing. */
.closing-band { position: relative; background: var(--deep); color: #fff;
  margin: 34px 0 0; padding: 46px 0 40px; overflow: hidden; }
.closing-band .wave { position: absolute; left: 0; right: 0; top: -1px; width: 100%;
  height: clamp(26px, 3.4vw, 48px); color: var(--paper); transform: scaleY(-1); }
.closing-inner { position: relative; z-index: 1; display: flex; align-items: center;
  gap: 22px; width: min(100% - 2 * var(--gutter, 24px), 1200px); margin-inline: auto; }
.band-glyph { width: 56px; height: 56px; flex: none; color: var(--gold); }
.closing-band strong { display: block; font: 900 clamp(20px, 2.6vw, 30px) var(--display);
  letter-spacing: -.025em; margin-bottom: 6px; }
.closing-band a { color: var(--gold); font: 800 16px var(--display); text-decoration: underline;
  text-decoration-thickness: 3px; text-underline-offset: 5px; }
.band-paw { position: absolute; right: -20px; bottom: -26px; width: 170px; height: 170px;
  color: #ffffff1f; pointer-events: none; }

/* The eleven ready-made band pictures lived here, with the real controls laid
   over the ones they drew. The band is HTML now, so none of that is needed. */

/* ------------------------------------------------------------ preferiti */
.saved-count { margin: 0; font-weight: 700; color: var(--muted); }
.saved-filters { margin: 0 0 20px; }
.saved-filters .chip { cursor: pointer; font: inherit; font-weight: 700; }
.saved-filters .chip[aria-pressed="true"] { background: var(--accent); color: #fff;
  border-color: var(--accent); }
.saved-grid { display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); margin: 0 0 24px; }
.saved-item { display: flex; flex-direction: column; gap: 8px; }
.saved-item .card { flex: 1; }
.saved-remove { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--accent); font: 800 14.5px var(--display); cursor: pointer; }
.saved-remove:hover { background: var(--accent-soft); }
.saved-empty { background: var(--card); border-radius: 22px; padding: 30px;
  text-align: center; box-shadow: 0 4px 14px #4a106c12; margin: 0 0 24px; }
.saved-empty p { margin: 0 0 16px; font-weight: 700; color: var(--muted); }
.saved-empty .purple-button { display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; border-radius: 999px; padding: 12px 24px;
  font: 800 15.5px var(--display); text-decoration: none; }
.saved-notice { background: var(--accent-soft); border-radius: 16px; padding: 14px 18px;
  font-weight: 700; color: var(--ink); margin: 0 0 10px; }
/* Saving from a catalogue card. */
.card-slot { position: relative; display: flex; }
.card-slot > .card { flex: 1; }
/* The heart the mockup draws: an outline over the corner of the picture, with
   no box around it, filled and red once the product is saved. */
.card-save { position: absolute; right: 13px; top: 11px; z-index: 2; width: 34px; height: 34px;
  border-radius: 999px; border: 0; background: transparent; color: var(--deep);
  font-size: 23px; line-height: 1; cursor: pointer; padding: 0; }
.card-save:hover { background: var(--lilac); }
.card-save[aria-pressed="true"] { background: transparent; color: var(--price); }