/* ===================================================================
   TAXONOMY PAGES
   -------------------------------------------------------------------
   The browse layer: the category / occasion / range hubs and the
   landing page each of those tiles opens.

   These pages had grown their own <style> blocks inside the templates,
   which is how they drifted apart from the rest of the store:

     - hub tiles were locked to height: 450px over a 280px image, so a
       two-line name (Five Nights at Freddy, Sonic the Hedgehog) pushed
       its own button out through the bottom of the card
     - the detail grid sat in a full-bleed container-fluid while the
       hero and the prose above it sat in a centred .container, so the
       products started at the window edge and the page read as two
       different layouts stacked
     - the sort parameter the view already honoured had no control
     - pagination used raw Bootstrap pills instead of the compact
       arrows every other listing page uses

   Everything here is built on the brand tokens, and this file loads
   inside {% block extra_css %} - before brand-radius / brand-colour -
   so those two layers still get the final say on corners and contrast.
   =================================================================== */

/* -------------------------------------------------------------------
   Shared shell

   One measure for every taxonomy page. 1600px is the same ceiling the
   all-products grid uses, and the section gutter below is the sum of
   that grid's two nested Bootstrap paddings (px-4 + px-5 = 24 + 48),
   so a heading here lands on exactly the same vertical as the first
   product card underneath it. Get this wrong by even 32px and the page
   reads as two layouts stacked, which is what it used to do.
   ------------------------------------------------------------------- */
.tax-section {
  padding: 3.5rem 4.5rem;
  background: #fff;
}

.tax-section--tint {
  background: var(--brand-pink-soft, #fdf4f7);
}

.tax-section--grey {
  background: #f8f9fa;
}

.tax-shell {
  max-width: 1600px;
  margin: 0 auto;
}

/* -------------------------------------------------------------------
   The listing column on a detail page

   .products-container carries min-height: 100vh so the all-products
   grid always fills the fold. A category with three cutters in it does
   not, and the leftover viewport opened a 400px hole between the last
   row and the copy below. The listing here is one section among
   several, so it sizes to its contents.
   ------------------------------------------------------------------- */
.products-container.tax-listing {
  min-height: 0;
  padding-bottom: 3.5rem;
}

.tax-section-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--brand-plum, #5e3040);
  margin: 0;
}

.tax-section-lead {
  color: #6c757d;
  margin: 0.35rem 0 0;
  font-size: 0.98rem;
}

/* -------------------------------------------------------------------
   Taxonomy hero - a bar, not a banner

   This started as the .jp-hero-banner slab these four pages borrowed
   off the all-products page: centred text in a Bootstrap .container
   over a grid that ran to a 1600px shell, the product count set as a
   4px-tracked display subtitle in 60% white, and the range name said
   four times on the way down the page (h1, count, "<Name> products",
   "Showing 1-2 of 2").

   Fixing the alignment and the type left a second problem the first
   pass talked itself out of: a category has no image, so a full-height
   hero is one short line of text on a 380px rectangle of paint, and no
   amount of gradient makes the empty two-thirds look intentional.

   So it is not a hero any more. Crumb, name, the two numbers worth
   knowing and the blurb, in a band about half the height, and the
   products come up to meet the fold. Same 1600px shell and the same
   gutters as .tax-section, so its left edge is the grid's left edge.
   ------------------------------------------------------------------- */
.tax-hero {
  padding: 1.6rem 4.5rem 1.75rem;
  color: #fff;
  /* Opens on the navbar's own #4a2231 so the header and the bar read as
     one mass rather than two plums with a seam between them. */
  background: linear-gradient(165deg, #4a2231 0%, #592c3b 100%);
}

.tax-hero__shell {
  max-width: 1600px;
  margin: 0 auto;
  text-align: center;
}

/* Crumbs lead the band rather than trailing it, so they read as "you
   are here" before the name instead of as a footnote after it. */
.tax-hero .tax-crumbs {
  margin: 0 0 0.6rem;
}

/* Name and numbers share a line. At banner height they could afford to
   stack; at bar height every row costs, and the count reads perfectly
   well as a note beside the name. */
.tax-hero__headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem 1.15rem;
}

.tax-hero__title {
  font-family: var(--font-display, Georgia, serif);
  /* No text-shadow: white on plum is already ~8:1, and the old 2px/4px
     drop was blurring the letterforms to fix a contrast problem that
     did not exist. */
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

/* -------------------------------------------------------------------
   The numbers, demoted

   These were pills, which at bar height are three chunky objects
   fighting the name for the same line. As plain text with a pink
   separator they sit beside it instead.
   ------------------------------------------------------------------- */
.tax-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
}

.tax-hero__stat + .tax-hero__stat::before {
  content: '\00b7';
  margin-right: 0.5rem;
  font-weight: 700;
  /* The one warm note on the plum. Pink type would fail contrast; a
     pink separator is decoration and carries no meaning. */
  color: var(--brand-pink, #e8829f);
}

.tax-hero__stat strong {
  font-weight: 700;
  color: #fff;
}

.tax-hero__lede {
  max-width: 78ch;
  /* auto margins, not 0 - the measure cap would otherwise pin a long
     blurb to the left edge inside a centred band. */
  margin: 0.45rem auto 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}

/* -------------------------------------------------------------------
   Hero breadcrumbs

   Every taxonomy hero repeated the same three inline style="" colours
   on every crumb. One class instead.
   ------------------------------------------------------------------- */
.tax-crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.tax-crumbs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.78);
}

.tax-crumbs li + li::before {
  content: '/';
  color: rgba(255, 255, 255, 0.35);
}

.tax-crumbs a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}

.tax-crumbs a:hover {
  color: #fff;
  text-decoration: underline;
}

.tax-crumbs .is-current {
  color: #fff;
  font-weight: 600;
}

/* -------------------------------------------------------------------
   Hub toolbar - result count on the left, live filter on the right
   ------------------------------------------------------------------- */
.tax-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.tax-toolbar__count {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6c757d;
  margin: 0;
}

.tax-toolbar__count strong {
  color: var(--brand-plum, #5e3040);
}

.tax-search {
  position: relative;
  flex: 0 1 320px;
  min-width: 220px;
}

.tax-search__icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: var(--brand-pink-deep, #c9557a);
  pointer-events: none;
  font-size: 0.95rem;
}

.tax-search__input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 2.6rem;
  border: 2px solid #e9ecef;
  background: #fff;
  color: var(--brand-plum, #5e3040);
  font-size: 0.95rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.tax-search__input::placeholder {
  color: #9aa0a6;
}

.tax-search__input:focus {
  border-color: var(--brand-pink, #e8829f);
  box-shadow: 0 0 0 4px rgba(232, 130, 159, 0.16);
  outline: none;
}

/* -------------------------------------------------------------------
   Hub grid

   auto-fill rather than fixed Bootstrap columns: the tiles keep a
   sensible width at every viewport instead of stretching past 500px on
   an ultrawide, and the row heights equalise on their own.
   ------------------------------------------------------------------- */
.tax-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.75rem;
}

/* -------------------------------------------------------------------
   Hub tile

   Nothing here is height-locked. The picture holds a fixed ratio, the
   body grows to whatever the name needs, and the footer is pinned with
   margin-top: auto - so a name that wraps makes the card taller rather
   than pushing its own footer out of the bottom.
   ------------------------------------------------------------------- */
.tax-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #f0e6ea;
  box-shadow: 0 6px 24px rgba(94, 48, 64, 0.07);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

.tax-card:hover,
.tax-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--brand-pink, #e8829f);
  box-shadow: 0 18px 40px rgba(201, 85, 122, 0.18);
}

.tax-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4eef0;
}

.tax-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tax-card:hover .tax-card__media img {
  transform: scale(1.06);
}

/* Count sits on the picture so the body below stays a clean two rows */
.tax-card__count {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.3rem 0.8rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-plum, #5e3040);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.tax-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem 1.25rem;
}

.tax-card__name {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--brand-plum, #5e3040);
  margin: 0;
  transition: color 0.25s ease;
}

.tax-card:hover .tax-card__name {
  color: var(--brand-pink-deep, #c9557a);
}

.tax-card__desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #6c757d;
  margin: 0;
  /* Two lines, so a long blurb cannot make one tile taller than its row */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tax-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.85rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand-pink-deep, #c9557a);
}

.tax-card__cta i {
  transition: transform 0.25s ease;
}

.tax-card:hover .tax-card__cta i {
  transform: translateX(4px);
}

/* -------------------------------------------------------------------
   Empty states - the hub with no tiles, and the live filter with no
   match. Both are the same component so they read the same.
   ------------------------------------------------------------------- */
.tax-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: #6c757d;
}

.tax-empty > i {
  font-size: 3rem;
  color: #d9c6cd;
  display: block;
  margin-bottom: 1rem;
}

.tax-empty p {
  margin: 0;
}

.tax-card.is-hidden {
  display: none;
}

/* -------------------------------------------------------------------
   Detail page: editorial block

   The old page stacked "About", "Featured" and "Why choose" as three
   separate full-width bands in three different colours. They are one
   idea, so they are now one section: the long copy reads in a normal
   measure and the shorter pitches sit beside it as asides.
   ------------------------------------------------------------------- */
.tax-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.tax-intro--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
}

.tax-intro__body {
  color: #444;
  font-size: 1.02rem;
  line-height: 1.85;
}

.tax-intro__body p:last-child {
  margin-bottom: 0;
}

.tax-intro__aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tax-note {
  padding: 1.6rem 1.75rem;
  background: var(--brand-pink-soft, #fdf4f7);
  border: 1px solid #f3dde4;
}

.tax-note--accent {
  background: linear-gradient(135deg, #5e3040 0%, #4a2231 100%);
  border-color: transparent;
}

.tax-note__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-plum, #5e3040);
  margin: 0 0 0.75rem;
}

.tax-note__title i {
  color: var(--brand-pink-deep, #c9557a);
  font-size: 1rem;
}

.tax-note__body {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #55474c;
}

.tax-note__body p:last-child {
  margin-bottom: 0;
}

.tax-note--accent .tax-note__title,
.tax-note--accent .tax-note__body {
  color: #fff;
}

.tax-note--accent .tax-note__title i {
  color: var(--brand-pink, #e8829f);
}

/* -------------------------------------------------------------------
   Detail page: quick facts

   The three at-a-glance fields an occasion carries - peak season, skill
   level, classic colours. A strip rather than a Bootstrap row, so a
   theme that only fills one of the three does not leave two empty
   thirds of whitespace beside it.
   ------------------------------------------------------------------- */
.tax-facts {
  /* Equal columns rather than a wrapping flex row. With free-text values -
     "All year, with a spike either side of the school holidays" next to
     "Beginner friendly" - flex sized each item to its content, so the row
     broke after two and left the third stranded beside a half-empty band.
     auto-fit keeps the original intent: one fact fills the width instead of
     leaving two empty thirds, three sit evenly, and the count in between
     works out on its own. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}

/* A lone fact stretched across the full width reads as a banner rather than
   a fact, so hold it to a sensible measure. */
.tax-facts:has(> .tax-fact:only-child) {
  grid-template-columns: minmax(0, 26rem);
}

.tax-fact {
  display: flex;
  /* Top, not centre: a value that runs to two lines used to drag its icon
     down with it and knock the row out of alignment. */
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  background: #fff;
  border-radius: var(--radius-sm, 14px);
  box-shadow: 0 1px 3px rgba(94, 48, 64, 0.07);
}

.tax-fact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  /* The tile is white now, so a white icon chip would vanish into it. */
  background: var(--brand-pink-soft, #fdf4f7);
  color: var(--brand-pink-deep, #c9557a);
  font-size: 1.05rem;
  box-shadow: none;
}

.tax-fact__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9c8b92;
}

.tax-fact__value {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand-plum, #5e3040);
}

.tax-fact__label {
  margin-bottom: 0.15rem;
}

@media (max-width: 575.98px) {
  .tax-fact {
    padding: 0.85rem 0.95rem;
  }

  .tax-fact__icon {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }
}

/* -------------------------------------------------------------------
   Detail page: listing header and sort

   .tax-sort__select mirrors .desktop-filter-select from the
   all-products filter bar, so the control a shopper met there behaves
   identically here.
   ------------------------------------------------------------------- */
.tax-listing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* No rule under this. An earlier pass drew one, which put a second
     horizontal line about 40px below the bottom edge of the plum bar
     and turned the toolbar into a stranded strip between two borders.
     The bar above already marks where the chrome ends. */
  margin-bottom: 1.5rem;
}

/* The hero says which range this is; down here the only new information
   is how much of it you are looking at. */
.tax-listing-count {
  margin: 0;
  font-size: 0.95rem;
  color: #6c757d;
}

.tax-listing-count strong {
  font-weight: 700;
  color: var(--brand-plum, #5e3040);
}

.tax-sort {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tax-sort__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  white-space: nowrap;
  margin: 0;
}

.tax-sort__select {
  padding: 0.6rem 2.2rem 0.6rem 1rem;
  border: 2px solid #e9ecef;
  background: #fff;
  color: var(--brand-plum, #5e3040);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.tax-sort__select:hover {
  border-color: var(--brand-pink, #e8829f);
}

.tax-sort__select:focus {
  border-color: var(--brand-pink, #e8829f);
  box-shadow: 0 0 0 4px rgba(232, 130, 159, 0.16);
  outline: none;
}

/* -------------------------------------------------------------------
   Detail page: the character-range index

   On a shows_ranges line this block IS the page - the line exists to be
   browsed by show rather than by product. It was 23 pill chips in a
   wrapping row, which is the wrong component twice over: chips are for
   a handful of secondary links, and pills size to their text, so two
   dozen of them ragged out into a tag cloud with "Winnie the Pooh"
   four times the width of "Marvel" and a stray "All ranges" orphaned
   on its own last row.

   Every range already has artwork sitting in static/img/categories/,
   which the chips could not show. So: a uniform grid, one cell per
   range, picture and count included. Equal cells mean no ragging, and
   the page a shopper came here to scan now looks like an index rather
   than a word cloud.

   Not the big .tax-card tiles from the /categories/ hub - that page is
   one screen of 23 large tiles and this block sits above a product
   grid, so the same content at a third the height.
   ------------------------------------------------------------------- */
.tax-ranges {
  display: grid;
  /* 13rem cells give six columns at desktop width, so 23 ranges land in
     four rows rather than six. This is an index to scan past on the way
     to the products, not a gallery to dwell on. */
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tax-range {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  height: 100%;
  padding: 0.4rem 0.7rem 0.4rem 0.4rem;
  background: #fff;
  border: 1px solid #f0e6ea;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tax-range:hover,
.tax-range:focus-visible {
  transform: translateY(-2px);
  border-color: var(--brand-pink, #e8829f);
  box-shadow: 0 8px 20px rgba(201, 85, 122, 0.14);
}

.tax-range__media {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  overflow: hidden;
  background: #f4eef0;
  border-radius: var(--radius-xs, 10px);
}

.tax-range__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tax-range__body {
  min-width: 0;
}

.tax-range__name {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.22;
  color: var(--brand-plum, #5e3040);
  transition: color 0.2s ease;
}

.tax-range:hover .tax-range__name {
  color: var(--brand-pink-deep, #c9557a);
}

.tax-range__count {
  display: block;
  margin-top: 0.05rem;
  font-size: 0.75rem;
  color: #9c8b92;
}

/* The "see everything" link was the 24th chip in the cloud, which put
   a navigation action in the same visual bucket as the 23 destinations
   it summarised. It is a link under the grid now. */
.tax-ranges-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brand-pink-deep, #c9557a);
  text-decoration: none;
}

.tax-ranges-all:hover,
.tax-ranges-all:focus-visible {
  color: #b3123c;
  text-decoration: underline;
}

.tax-ranges-all i {
  transition: transform 0.2s ease;
}

.tax-ranges-all:hover i {
  transform: translateX(3px);
}

/* -------------------------------------------------------------------
   Detail page: sibling links

   Six outline Bootstrap buttons laid out in a grid row read as a form.
   These are navigation, so they are chips.
   ------------------------------------------------------------------- */
.tax-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.25rem;
}

.tax-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  background: #fff;
  border: 2px solid #efe2e7;
  color: var(--brand-plum, #5e3040);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.tax-chip:hover,
.tax-chip:focus-visible {
  border-color: var(--brand-pink, #e8829f);
  background: var(--brand-pink-soft, #fdf4f7);
  color: var(--brand-pink-deep, #c9557a);
  transform: translateY(-2px);
}

.tax-chip__count {
  font-size: 0.78rem;
  font-weight: 700;
  color: #9c8b92;
}

/* -------------------------------------------------------------------
   Detail page: no products in this taxonomy yet
   ------------------------------------------------------------------- */
.tax-noresults {
  text-align: center;
  padding: 4.5rem 1rem;
  background: #fff;
  border: 2px dashed #efe2e7;
}

/* Direct child only - the buttons below carry their own icons, and a
   descendant selector blew those up to 3.25rem too. */
.tax-noresults > i {
  font-size: 3.25rem;
  color: #d9c6cd;
  display: block;
  margin-bottom: 1.25rem;
}

.tax-noresults h3 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.5rem;
  color: var(--brand-plum, #5e3040);
  margin-bottom: 0.5rem;
}

.tax-noresults p {
  color: #6c757d;
  margin-bottom: 1.75rem;
}

.tax-noresults__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* -------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .tax-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  }
}

/* Each step down mirrors what products.css does to the grid's own
   gutters at the same breakpoint, so the two stay in line. */
@media (max-width: 1199px) {
  .tax-section {
    padding: 3rem 3.5rem;
  }

  .tax-hero {
    padding: 1.5rem 3.5rem 1.65rem;
  }
}

@media (max-width: 991px) {
  .tax-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .tax-section {
    padding: 2.75rem 3rem;
  }

  .tax-hero {
    padding: 1.4rem 3rem 1.55rem;
  }
}

@media (max-width: 767px) {
  .tax-section {
    padding: 2.25rem 1rem;
  }

  .tax-hero {
    padding: 1.15rem 1rem 1.35rem;
  }

  /* The measure cap stops a long line on a wide screen. On a phone the
     viewport is already the cap. */
  .tax-hero__lede {
    max-width: none;
    font-size: 0.94rem;
  }

  /* Baseline-sharing a 1.7rem name with 0.95rem metadata works on one
     line. Once the name wraps to its own row the numbers want their own
     row too, or they hang off the last word. */
  .tax-hero__headline {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  .tax-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  /* Two up. One column meant 23 full-width rows - about 1500px of index
     to scroll past before reaching a single product. Two columns halves
     that, at the cost of the longest name wrapping to three lines; the
     row stretches to fit and only one row is affected. */
  .tax-ranges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .tax-range {
    gap: 0.55rem;
    padding: 0.4rem 0.5rem 0.4rem 0.4rem;
  }

  .tax-range__media {
    width: 38px;
    height: 38px;
  }

  .tax-range__name {
    font-size: 0.82rem;
  }

  .tax-range__count {
    font-size: 0.72rem;
  }

  .tax-card__body {
    padding: 0.9rem 0.95rem 1rem;
  }

  .tax-card__name {
    font-size: 1.02rem;
  }

  /* The blurb and the arrow are the first things to go on a phone -
     the picture, the name and the count carry the tile on their own. */
  .tax-card__desc,
  .tax-card__cta {
    display: none;
  }

  .tax-section-title {
    font-size: 1.45rem;
  }

  .tax-toolbar,
  .tax-listing-head {
    align-items: stretch;
    /* Stacked, the count and the sort control are one toolbar on two
       rows, not two separate things. The desktop 1rem gap reads as a
       break between them once they are no longer side by side. */
    gap: 0.6rem;
  }

  .tax-listing-count {
    align-self: flex-start;
  }

  .tax-search,
  .tax-sort {
    flex: 1 1 100%;
  }

  .tax-sort__select {
    flex: 1 1 auto;
  }
}

@media (max-width: 380px) {
  .tax-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}