/* Shym category page. Design system B (Warm Nordic), rules in DESIGN.md. Live since 14 Oct 2026.
   Every class starts with shym-cat, shym-filter or shym-btn. The site styles every heading, link and button
   itself, so each part says its own font, size and colour again here. The product cards, the sort pill and
   "Show more" keep their own file (shym-card.css).
   The page is as wide as the screen. A part that keeps to the page column sits in .shym-cat__wrap. A band
   (the top, the guide, the reviews) and the row of photo tiles run over the whole width. */

.shym-cat,.shym-cat__sheet,.shym-cat__shade,.shym-cat__float{
  --ink:#26222F;--body:#4A4451;--muted:#645D6A;--line:#E3DCD5;--cream:#EEE9E5;--white:#FFFFFF;
  --orange:#B5412A;--orange-deep:#9C3622;--star:#F6BB06;
  --font:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lift:0 16px 34px -20px rgba(38,34,47,.45);
  --shade:linear-gradient(180deg,rgba(38,34,47,0) 46%,rgba(38,34,47,.82) 100%);
  --ease:cubic-bezier(.2,.8,.2,1);
}
.shym-cat{padding:0 0 96px;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--body);background:var(--white);text-align:left}
.shym-cat *,.shym-cat *:before,.shym-cat *:after,.shym-cat__sheet,.shym-cat__sheet *,.shym-cat__sheet *:before,.shym-cat__sheet *:after{box-sizing:border-box}
.shym-cat [hidden],.shym-cat__sheet [hidden]{display:none}
.shym-cat .shym-cat__wrap{width:min(1365px,calc(100% - 48px));margin:0 auto}

/* 1. the top: a photo band over the whole width, in the way of the warehouse pages (shym-location.css): the photo,
      a plum shade from the left so the white words read, the Google rating, and a cream bar that sits half on the
      band and half on the page. The bar holds the switch between the main kinds.
      The photo takes the right part of the band only. Most category pictures are 1,200 to 1,500 px wide, and a
      photo over the whole width would be stretched and soft on a big screen. */
.shym-cat .shym-cat__top{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:236px;padding:22px 0 0;background:var(--ink);color:var(--white)}
.shym-cat .shym-cat__top-pic{position:absolute;top:0;right:0;bottom:0;z-index:0;display:block;width:58%;overflow:hidden}
.shym-cat .shym-cat__top-pic picture{display:contents}
.shym-cat .shym-cat__top-pic img{display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;object-fit:cover;object-position:var(--at,50% 50%)}
.shym-cat .shym-cat__top-pic:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(38,34,47,.8) 20%,rgba(38,34,47,.34) 56%,rgba(38,34,47,.1) 100%),linear-gradient(0deg,rgba(38,34,47,.5) 0%,rgba(38,34,47,0) 50%)}
.shym-cat .shym-cat__top>.shym-cat__wrap{position:relative;z-index:1;display:flex;flex:1 1 auto;flex-direction:column}
.shym-cat .shym-cat__crumbs{display:flex;flex-wrap:wrap;align-items:center;margin:0 0 16px;font-family:var(--font);font-size:13px;font-weight:400;line-height:1.5;color:rgba(255,255,255,.72)}
.shym-cat .shym-cat__crumbs a,.shym-cat .shym-cat__crumbs a:visited{font-family:var(--font);font-size:13px;font-weight:400;color:rgba(255,255,255,.72);text-decoration:none}
.shym-cat .shym-cat__crumbs a:hover{color:var(--white);text-decoration:underline}
.shym-cat .shym-cat__crumbs span{margin:0 6px;opacity:.6}
.shym-cat .shym-cat__crumbs b{font-weight:400;color:rgba(255,255,255,.9)}
.shym-cat .shym-cat__top-words{max-width:660px;padding:0 0 30px}
.shym-cat .shym-cat__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0}
.shym-cat h1.shym-cat__title{margin:0;padding:0;font-family:var(--font);font-size:clamp(30px,3.6vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.02em;text-transform:none;color:var(--white)}
.shym-cat p.shym-cat__count{margin:0;font-family:var(--font);font-size:14px;font-weight:400;line-height:1.5;color:rgba(255,255,255,.78)}
.shym-cat p.shym-cat__intro{margin:10px 0 0;max-width:58ch;font-family:var(--font);font-size:16px;font-weight:400;line-height:1.65;color:rgba(255,255,255,.9);text-wrap:pretty}
.shym-cat p.shym-cat__rating{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:14px 0 0;font-family:var(--font);font-size:14px;font-weight:400;line-height:1.5;color:rgba(255,255,255,.88)}
.shym-cat p.shym-cat__rating b{font-weight:600;color:var(--white)}

/* the switch: one cream bar, with a cell for each kind: a small cut-out, a name and a count. One cell is on at a
   time, and a white plate with a Plum ink edge sits under it. On the saunas page the plate slides to the cell
   that is clicked (the script moves it). The cells make no layer of their own (no z-index, no opacity, no
   transform), so a cut-out on white blends into the bar or the plate under it. */
.shym-cat .shym-cat__kinds{position:relative;z-index:2;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:4px;margin:auto 0 -44px;padding:6px;border-radius:18px;background:var(--cream)}
.shym-cat a.shym-cat__kind,.shym-cat a.shym-cat__kind:visited{position:relative;display:flex;align-items:center;gap:12px;min-width:0;height:76px;padding:6px 12px 6px 8px;border-radius:14px;background:transparent;color:var(--ink);text-decoration:none;transition:background .25s}
.shym-cat a.shym-cat__kind:hover{background:rgba(255,255,255,.6)}
.shym-cat a.shym-cat__kind.is-on,.shym-cat a.shym-cat__kind.is-on:hover{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
.shym-cat .shym-cat__kinds.has-plate a.shym-cat__kind.is-on,.shym-cat .shym-cat__kinds.has-plate a.shym-cat__kind.is-on:hover{background:transparent;box-shadow:none}
.shym-cat .shym-cat__plate{position:absolute;top:6px;left:0;display:block;width:var(--w,0px);height:calc(100% - 12px);border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateX(var(--x,0px));pointer-events:none}
.shym-cat .shym-cat__kinds.is-ready .shym-cat__plate{transition:transform .45s var(--ease),width .45s var(--ease)}
.shym-cat a.shym-cat__kind:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.shym-cat .shym-cat__kind-pic{display:grid;place-items:center;flex:none;width:56px;height:56px}
.shym-cat .shym-cat__kind-pic img{display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;object-fit:contain;mix-blend-mode:multiply}
/* the "all" cell has no cut-out: a small grid drawing in a Plum ink circle */
.shym-cat a.shym-cat__kind.is-all .shym-cat__kind-pic{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white)}
.shym-cat .shym-cat__kind-pic svg{display:block;width:20px;height:20px}
.shym-cat .shym-cat__kind-words{display:flex;flex-direction:column;gap:3px;min-width:0}
.shym-cat .shym-cat__kind-words b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:var(--font);font-size:14px;font-weight:600;line-height:1.3;color:var(--ink)}
.shym-cat .shym-cat__kind-words i{font-family:var(--font);font-style:normal;font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap}
/* a kind with a long name has a short one too, for its small cell on a phone */
.shym-cat .shym-cat__kind-short{display:none}
/* a cell that would give no product with the picked filters is switched off */
.shym-cat a.shym-cat__kind[aria-disabled="true"],.shym-cat a.shym-cat__kind[aria-disabled="true"]:hover{background:transparent;cursor:default}
.shym-cat a.shym-cat__kind[aria-disabled="true"] .shym-cat__kind-pic img{opacity:.35}
.shym-cat a.shym-cat__kind[aria-disabled="true"] .shym-cat__kind-words b{font-weight:500;color:var(--muted)}
/* the bar hangs 44px under the band, so the list starts lower */
.shym-cat .shym-cat__top.has-kinds+.shym-cat__wrap .shym-cat__list{margin-top:72px}

/* 2. the list of all categories, the filters, the sort pill and the cards.
      The card script needs the sort pill, the cards and "Show more" to follow each other in the page, so the
      places are set here and not by the order in the page.
      On a computer the list has a column at its left with the list of all categories. Beside it, top to bottom:
      the row of quick filters with the sort pill at its right, the picked filters, the cards, "Show more". */
.shym-cat .shym-cat__list{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:start;margin:28px 0 0}
.shym-cat .shym-cat__side{display:none}
.shym-cat .shym-cat__filters{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.shym-cat .shym-cat__list>.shym-cards-sort{grid-column:2;grid-row:1;width:auto;margin:0}
.shym-cat .shym-cat__applied{grid-column:1/-1;grid-row:2}
.shym-cat .shym-cat__list>.shym-cards{grid-column:1/-1;grid-row:3;margin-top:24px}
.shym-cat .shym-cat__list>.shym-cards-more{grid-column:1/-1;grid-row:4;flex-direction:column;align-items:center;gap:14px}
.shym-cat .shym-cat__none{grid-column:1/-1;grid-row:5}
.shym-cat p.shym-cat__shown{margin:0;font-family:var(--font);font-size:14px;line-height:1.5;color:var(--muted)}
.shym-cat .shym-cat__empty{grid-column:1/-1;margin:24px 0 0;font-family:var(--font);color:var(--body)}

/* On a computer every list has the side column, and the cards sit 3 in a row beside it. */
@media (min-width:1025px){
  /* the last row takes what is left when the side column is taller than the cards, so the cards stay at the top */
  .shym-cat.has-side .shym-cat__list{grid-template-columns:264px minmax(0,1fr) auto;grid-template-rows:auto auto auto auto 1fr;column-gap:40px}
  .shym-cat.has-side .shym-cat__side{display:block;grid-column:1;grid-row:1/span 5;align-self:stretch;min-width:0}
  .shym-cat.has-side .shym-cat__filters{grid-column:2;grid-row:1}
  /* every filter of this list is a quick pill, so there is nothing more to open */
  .shym-cat .shym-cat__filters.is-all-quick button.shym-cat__open{display:none}
  .shym-cat.has-side .shym-cat__list>.shym-cards-sort{grid-column:3;grid-row:1}
  .shym-cat.has-side .shym-cat__applied,.shym-cat.has-side .shym-cat__list>.shym-cards,.shym-cat.has-side .shym-cat__list>.shym-cards-more,.shym-cat.has-side .shym-cat__none{grid-column:2/4}
  .shym-cat.has-side .shym-cat__list>.shym-cards.shym-cards--4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1025px) and (max-width:1199px){
  .shym-cat .shym-cards.shym-cards--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shym-cat.has-side .shym-cat__list{grid-template-columns:232px minmax(0,1fr) auto;column-gap:32px}
  .shym-cat.has-side .shym-cat__list>.shym-cards.shym-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the row of quick filters (a computer): a pill for each of the filters most people use, then "All filters".
   A pill has the shape of the sort pill. It opens a small list in the look of the sort pill's list, with a check
   box on every row, because more than one choice can be picked. */
.shym-cat .shym-filter--quick{position:relative}
.shym-cat .shym-filter--quick>button.shym-filter__btn,.shym-cat .shym-filter--quick>button.shym-filter__btn:hover,.shym-cat .shym-filter--quick>button.shym-filter__btn:focus,
.shym-cat button.shym-cat__open,.shym-cat button.shym-cat__open:hover,.shym-cat button.shym-cat__open:focus{
  display:inline-flex;align-items:center;gap:8px;height:42px;margin:0;padding:0 14px 0 16px;border:0;border-radius:999px;
  background:transparent !important;box-shadow:inset 0 0 0 1.5px var(--line);outline:0;
  color:var(--ink);font-family:var(--font);font-size:14px;font-weight:500;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;cursor:pointer;transition:box-shadow .2s;
}
.shym-cat button.shym-cat__open,.shym-cat button.shym-cat__open:hover,.shym-cat button.shym-cat__open:focus{padding:0 16px}
.shym-cat .shym-filter--quick>button.shym-filter__btn>svg{display:block;flex:none;width:16px;height:16px;color:var(--muted);transition:transform .2s}
.shym-cat button.shym-cat__open>svg{display:block;flex:none;width:16px;height:16px}
.shym-cat .shym-filter--quick>button.shym-filter__btn:hover,.shym-cat .shym-filter--quick>button.shym-filter__btn:focus-visible,.shym-cat .shym-filter--quick.is-open>button.shym-filter__btn,.shym-cat .shym-filter--quick.has-picks>button.shym-filter__btn,
.shym-cat button.shym-cat__open:hover,.shym-cat button.shym-cat__open:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink)}
.shym-cat .shym-filter--quick.is-open>button.shym-filter__btn>svg{transform:rotate(180deg)}
.shym-cat .shym-filter--quick>.shym-filter__list{position:absolute;z-index:40;top:calc(100% + 8px);left:0;display:block;min-width:264px;margin:0;padding:6px;border:1.5px solid var(--line);border-radius:18px;background:var(--white);box-shadow:var(--lift)}
.shym-cat .shym-filter--quick>.shym-filter__list[hidden]{display:none}
/* the words on the last pill: "All filters" on a computer, "Filter" on a tablet or a phone */
.shym-cat .shym-cat__open-narrow{display:none}
/* how many choices are picked: a round badge with a number. The script draws it as one small picture, the round
   shape and the number together. A number as text on a round box sat up to 1 pixel off the middle, because the
   browser puts a box and its text on whole pixels each by itself (Francis saw it, 13 Oct 2026). */
.shym-cat .shym-cat__n,.shym-cat__sheet .shym-cat__n,button.shym-cat__float .shym-cat__n{display:inline-block;flex:none;height:20px;margin:0;padding:0;background:none;line-height:0;font-style:normal}
.shym-cat .shym-cat__n[hidden],.shym-cat__sheet .shym-cat__n[hidden],button.shym-cat__float .shym-cat__n[hidden]{display:none}
.shym-cat .shym-cat__n svg,.shym-cat__sheet .shym-cat__n svg,button.shym-cat__float .shym-cat__n svg{display:block;width:auto;height:20px;margin:0;overflow:visible;transform:none}
.shym-cat .shym-cat__n rect,.shym-cat__sheet .shym-cat__n rect{fill:var(--ink)}
.shym-cat .shym-cat__n text,.shym-cat__sheet .shym-cat__n text{fill:var(--white);stroke:none;font:600 12px var(--font)}
/* on the dark pill that floats on a phone the badge is white with a Plum ink number */
button.shym-cat__float .shym-cat__n rect{fill:var(--white)}
button.shym-cat__float .shym-cat__n text{fill:var(--ink);stroke:none;font:600 12px var(--font)}

/* the panel with every filter. The page script puts it at the end of the page, over a shade. On a computer it
   comes in from the right ("All filters"). On a tablet or a phone it comes up from the bottom ("Filter"). */
.shym-cat__shade{display:none}
.shym-cat__shade.is-on{display:block;position:fixed;inset:0;z-index:100000;background:rgba(38,34,47,.5);animation:shym-cat-shade .25s ease-out}
.shym-cat__sheet{display:none;position:fixed;top:0;right:0;bottom:0;z-index:100001;flex-direction:column;width:min(440px,100vw);border-radius:28px 0 0 28px;background:var(--white);font-family:var(--font);color:var(--body);text-align:left}
.shym-cat__sheet.is-on{display:flex;animation:shym-cat-side .3s var(--ease)}
.shym-cat__sheet .shym-cat__sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 16px 12px 28px}
.shym-cat__sheet .shym-cat__sheet-head b{font-family:var(--font);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.shym-cat__sheet button.shym-cat__close,.shym-cat__sheet button.shym-cat__close:hover,.shym-cat__sheet button.shym-cat__close:focus{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:999px;background:none !important;box-shadow:none;outline:0;color:var(--ink);cursor:pointer}
.shym-cat__sheet button.shym-cat__close svg{display:block;width:20px;height:20px}
.shym-cat__sheet button.shym-cat__close:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.shym-cat__sheet .shym-cat__groups{display:block;flex:1 1 auto;min-height:0;margin:0;padding:0 28px 8px;overflow-y:auto;overscroll-behavior:contain}
.shym-cat__sheet .shym-filter{border-top:1px solid var(--line)}
.shym-cat__sheet .shym-filter:first-child{border-top:0}
/* the name of a group: a click closes or opens its choices */
.shym-cat__sheet button.shym-filter__btn,.shym-cat__sheet button.shym-filter__btn:hover,.shym-cat__sheet button.shym-filter__btn:focus{
  display:flex;align-items:center;gap:8px;width:100%;height:52px;margin:0;padding:0;border:0;border-radius:0;
  background:transparent !important;box-shadow:none;outline:0;color:var(--ink);
  font-family:var(--font);font-size:14px;font-weight:600;line-height:1;letter-spacing:normal;text-transform:none;text-align:left;white-space:nowrap;cursor:pointer;
}
.shym-cat__sheet button.shym-filter__btn span{flex:0 1 auto}
.shym-cat__sheet button.shym-filter__btn>svg{display:block;flex:none;width:16px;height:16px;margin-left:auto;color:var(--muted);transition:transform .2s}
.shym-cat__sheet .shym-filter.is-open button.shym-filter__btn>svg{transform:rotate(180deg)}
.shym-cat__sheet button.shym-filter__btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shym-cat__sheet .shym-filter__list{display:block;margin:-4px -8px 0;padding:0 0 12px}
.shym-cat__sheet .shym-filter__list[hidden]{display:none}
.shym-cat__sheet .shym-cat__sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px 20px;border-top:1px solid var(--line)}
.shym-cat__sheet .shym-cat__sheet-foot button.shym-cat__clear{height:44px}
.shym-cat__sheet button.shym-cat__apply{flex:0 1 240px}

/* a choice of a filter, in the panel and in the list of a quick pill: a check box, the words, the number of products */
.shym-cat__sheet button.shym-filter__opt,.shym-cat .shym-filter--quick button.shym-filter__opt,.shym-cat__sheet button.shym-filter__opt:hover,.shym-cat .shym-filter--quick button.shym-filter__opt:hover,.shym-cat__sheet button.shym-filter__opt:focus,.shym-cat .shym-filter--quick button.shym-filter__opt:focus{
  display:flex;align-items:center;gap:10px;width:100%;height:36px;margin:0;padding:0 8px;border:0;border-radius:12px;
  background:transparent !important;box-shadow:none;outline:0;color:var(--body);
  font-family:var(--font);font-size:14px;font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;text-align:left;white-space:nowrap;cursor:pointer;
}
.shym-cat .shym-filter--quick button.shym-filter__opt,.shym-cat .shym-filter--quick button.shym-filter__opt:hover,.shym-cat .shym-filter--quick button.shym-filter__opt:focus{height:40px;padding:0 10px}
.shym-cat__sheet button.shym-filter__opt span,.shym-cat .shym-filter--quick button.shym-filter__opt span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.shym-cat__sheet button.shym-filter__opt i,.shym-cat .shym-filter--quick button.shym-filter__opt i{flex:none;font-style:normal;font-size:13px;font-weight:400;color:var(--muted)}
/* the check box tells that more than one choice can be picked */
.shym-cat__sheet .shym-filter__box,.shym-cat .shym-filter--quick .shym-filter__box{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:6px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--white);transition:background .15s,box-shadow .15s}
.shym-cat__sheet .shym-filter__box svg,.shym-cat .shym-filter--quick .shym-filter__box svg{display:block;width:12px;height:12px;stroke-width:2.8;visibility:hidden}
.shym-cat__sheet button.shym-filter__opt:hover,.shym-cat .shym-filter--quick button.shym-filter__opt:hover,.shym-cat__sheet button.shym-filter__opt:focus-visible,.shym-cat .shym-filter--quick button.shym-filter__opt:focus-visible{background:var(--cream) !important}
.shym-cat__sheet button.shym-filter__opt:hover .shym-filter__box,.shym-cat .shym-filter--quick button.shym-filter__opt:hover .shym-filter__box,.shym-cat__sheet button.shym-filter__opt:focus-visible .shym-filter__box,.shym-cat .shym-filter--quick button.shym-filter__opt:focus-visible .shym-filter__box{box-shadow:inset 0 0 0 1.5px var(--ink)}
.shym-cat__sheet button.shym-filter__opt[aria-checked="true"],.shym-cat .shym-filter--quick button.shym-filter__opt[aria-checked="true"]{font-weight:600;color:var(--ink)}
.shym-cat__sheet button.shym-filter__opt[aria-checked="true"] .shym-filter__box,.shym-cat .shym-filter--quick button.shym-filter__opt[aria-checked="true"] .shym-filter__box{background:var(--ink);box-shadow:none}
.shym-cat__sheet button.shym-filter__opt[aria-checked="true"] .shym-filter__box svg,.shym-cat .shym-filter--quick button.shym-filter__opt[aria-checked="true"] .shym-filter__box svg{visibility:visible}
.shym-cat__sheet button.shym-filter__opt[disabled],.shym-cat .shym-filter--quick button.shym-filter__opt[disabled],.shym-cat__sheet button.shym-filter__opt[disabled]:hover,.shym-cat .shym-filter--quick button.shym-filter__opt[disabled]:hover{background:transparent !important;opacity:.45;cursor:default}

/* the search field (Artem, 14 Oct 2026; the old page had one at the top of its side column). The field is the
   input of DESIGN.md: white, a 1.5px Line edge, 12px corners, 46px tall, 15px words, the edge turns Plum ink when
   the visitor is in it. The products that fit show under it in a list with the look of the sort pill's list.
   On a computer it is the top of the side column, in line with the row of filters. */
.shym-cat form.shym-cat__search{position:relative;display:block;margin:-2px 0 18px;padding:0}
.shym-cat .shym-cat__search-field{position:relative;display:block;margin:0;padding:0}
.shym-cat .shym-cat__search-field>svg{position:absolute;top:50%;left:14px;display:block;width:18px;height:18px;margin-top:-9px;color:var(--muted);pointer-events:none}
.shym-cat form.shym-cat__search input[type="search"],.shym-cat form.shym-cat__search input[type="search"]:focus{
  display:block;width:100%;height:46px;margin:0;padding:0 44px 0 42px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--white);box-shadow:none;outline:0;color:var(--ink);
  font-family:var(--font);font-size:15px;font-weight:400;line-height:normal;letter-spacing:normal;text-transform:none;
  -webkit-appearance:none;appearance:none;transition:border-color .2s;
}
.shym-cat form.shym-cat__search input[type="search"]:hover,.shym-cat form.shym-cat__search input[type="search"]:focus{border-color:var(--ink)}
.shym-cat form.shym-cat__search input[type="search"]::placeholder{color:var(--muted);opacity:1}
.shym-cat form.shym-cat__search input[type="search"]::-webkit-search-cancel-button,.shym-cat form.shym-cat__search input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;display:none}
.shym-cat button.shym-cat__search-clear,.shym-cat button.shym-cat__search-clear:hover,.shym-cat button.shym-cat__search-clear:focus{position:absolute;top:1px;right:1px;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:12px;background:none !important;box-shadow:none;outline:0;color:var(--muted);cursor:pointer}
.shym-cat button.shym-cat__search-clear[hidden]{display:none}
.shym-cat button.shym-cat__search-open{display:none}
.shym-cat button.shym-cat__search-clear svg{display:block;width:16px;height:16px}
.shym-cat button.shym-cat__search-clear:hover{color:var(--ink)}
.shym-cat button.shym-cat__search-clear:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
/* the products that fit. The list is wider than the side column, because a product name is long. */
.shym-cat .shym-cat__found{position:absolute;z-index:45;top:calc(100% + 8px);left:0;display:block;width:440px;max-width:calc(100vw - 48px);max-height:min(70vh,520px);margin:0;padding:6px;overflow-y:auto;overscroll-behavior:contain;border:1.5px solid var(--line);border-radius:18px;background:var(--white);box-shadow:var(--lift)}
.shym-cat .shym-cat__found[hidden]{display:none}
.shym-cat a.shym-cat__found-row,.shym-cat a.shym-cat__found-row:hover,.shym-cat a.shym-cat__found-row:focus{display:flex;align-items:center;gap:12px;min-height:56px;margin:0;padding:6px 12px 6px 6px;border-radius:12px;background:transparent;outline:0;color:var(--ink);font-family:var(--font);font-size:14px;font-weight:500;line-height:1.35;letter-spacing:normal;text-decoration:none;text-transform:none}
.shym-cat a.shym-cat__found-row:hover,.shym-cat a.shym-cat__found-row:focus-visible{background:var(--cream)}
.shym-cat .shym-cat__found-pic{display:block;flex:none;width:44px;height:44px;overflow:hidden;border-radius:12px;background:var(--cream)}
.shym-cat .shym-cat__found-pic img{display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;object-fit:cover;mix-blend-mode:multiply}
.shym-cat .shym-cat__found-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-width:0;overflow:hidden}
.shym-cat p.shym-cat__found-note{margin:0;padding:12px 10px;font-family:var(--font);font-size:14px;line-height:1.5;color:var(--muted)}
.shym-cat button.shym-cat__found-all,.shym-cat button.shym-cat__found-all:hover,.shym-cat button.shym-cat__found-all:focus{display:flex;align-items:center;width:100%;height:44px;margin:4px 0 0;padding:0 12px;border:0;border-radius:12px;background:transparent !important;box-shadow:none;outline:0;color:var(--ink);font-family:var(--font);font-size:14px;font-weight:600;line-height:1;letter-spacing:normal;text-transform:none;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.shym-cat button.shym-cat__found-all:hover,.shym-cat button.shym-cat__found-all:focus-visible{background:var(--cream) !important}

/* From category to category with no page load (the page script). While the next category is on its way
   (is-leaving), the cards give their place to two rows of plain shapes of a card, and the words of the top band
   are plain bars (Francis, 14 Oct 2026: "a loading skeleton"). The shapes are the card of DESIGN.md with no
   content: cream, 18px corners, a photo well with 14px corners, bars in the Line colour. They breathe as one
   layer, so the browser has almost no work. The name of the category that came in takes the keyboard, with no
   ring around it, and its cards come in with a short fade (is-arriving). */
.shym-cat.is-leaving .shym-cat__list>.shym-cards:not(.shym-cat__ghosts),.shym-cat.is-leaving .shym-cat__list>.shym-cards-more,.shym-cat.is-leaving .shym-cat__none,.shym-cat.is-leaving .shym-cat__applied{display:none}
.shym-cat .shym-cat__ghosts{animation:shym-cat-breathe 1.1s ease-in-out infinite;pointer-events:none}
.shym-cat .shym-cat__ghost{display:block;min-width:0;padding:10px 10px 22px;border-radius:18px;background:var(--cream)}
.shym-cat .shym-cat__ghost i{display:block;aspect-ratio:1;border-radius:14px;background:var(--line)}
.shym-cat .shym-cat__ghost b{display:block;width:72%;height:14px;margin:18px 8px 0;border-radius:7px;background:var(--line)}
.shym-cat .shym-cat__ghost b+b{width:44%;margin-top:10px}
.shym-cat .shym-cat__ghost b+b+b{width:30%;height:18px;margin-top:22px}
.shym-cat.is-leaving .shym-cat__title,.shym-cat.is-leaving p.shym-cat__count,.shym-cat.is-leaving p.shym-cat__intro{border-radius:8px;background:rgba(255,255,255,.16);color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
.shym-cat.is-arriving .shym-cat__list>.shym-cards{animation:shym-cat-in .28s ease-out}
.shym-cat .shym-cat__title:focus{outline:0}
@keyframes shym-cat-breathe{50%{opacity:.5}}

/* the list of all categories: the side column on a computer (the old page had it there). It starts at the top, in
   line with the row of filters. The main categories with their counts, and the branch of this page open. A click
   on a name opens the category. A click on the rest of a row with an arrow opens or closes its branch.
   A list that fits the screen stays in view while the cards scroll, and the search field over it stays with it
   (the script sets is-sticky on both). */
.shym-cat .shym-cat__cats{display:block;margin:0;font-family:var(--font)}
.shym-cat form.shym-cat__search.is-sticky{position:sticky;top:104px}
.shym-cat .shym-cat__cats.is-sticky{position:sticky;top:168px}
.shym-cat .shym-cat__cats-title{display:flex;align-items:center;justify-content:space-between;gap:12px;height:42px;margin:0;padding:0;font-family:var(--font);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.shym-cat .shym-cat__cats ul,.shym-cat .shym-cat__cats li{margin:0;padding:0;list-style:none}
.shym-cat ul.shym-cat__cats-list{margin:24px 0 0;padding:10px 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shym-cat .shym-cat__cat-row{display:flex;align-items:center;gap:8px;min-height:34px;list-style:none}
.shym-cat summary.shym-cat__cat-row{cursor:pointer}
.shym-cat summary.shym-cat__cat-row::-webkit-details-marker{display:none}
.shym-cat summary.shym-cat__cat-row::marker{content:""}
.shym-cat .shym-cat__cat-row a,.shym-cat .shym-cat__cat-row a:visited{flex:0 1 auto;min-width:0;padding:7px 0;font-family:var(--font);font-size:14px;font-weight:400;line-height:1.4;color:var(--body);text-decoration:none}
.shym-cat div.shym-cat__cat-row a{flex:1 1 auto}
/* a row has no plate under the pointer and no mark for the page you are on (Francis, 13 Oct 2026: the bold main
   categories are enough). Under the pointer the name gets a line under it, as a plain link does. */
.shym-cat .shym-cat__cat-row a:hover{text-decoration:underline}
.shym-cat .shym-cat__cat-row a:focus-visible,.shym-cat summary.shym-cat__cat-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shym-cat .shym-cat__cat-row i{flex:none;margin-left:auto;font-family:var(--font);font-style:normal;font-size:13px;line-height:1;color:var(--muted)}
.shym-cat .shym-cat__cat-row svg{display:block;flex:none;width:16px;height:16px;color:var(--muted);transition:transform .2s}
.shym-cat details[open]>summary.shym-cat__cat-row svg{transform:rotate(180deg)}
/* the main categories stand out from the categories under them (Francis, 13 Oct 2026): Plum ink at weight 600,
   and a little room over each one. */
.shym-cat ul.shym-cat__cats-list>li>.shym-cat__cat-row a,.shym-cat ul.shym-cat__cats-list>li>details>summary.shym-cat__cat-row a{font-weight:600;color:var(--ink)}
.shym-cat ul.shym-cat__cats-list>li+li{margin-top:2px}
.shym-cat .shym-cat__cats details>ul{margin:0 0 8px;padding:0 0 0 14px}
/* the second copy of the list is for tablets and phones only */
.shym-cat details.shym-cat__cats--fold{display:none}

/* the picked filters, each a chip that takes itself away, and "Clear all" */
.shym-cat .shym-cat__applied{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-height:32px;margin:14px 0 0}
.shym-cat .shym-cat__applied[hidden]{display:none}
.shym-cat .shym-cat__applied-chips{display:flex;flex-wrap:wrap;gap:8px}
.shym-cat button.shym-cat__tag,.shym-cat button.shym-cat__tag:focus{display:inline-flex;align-items:center;gap:6px;height:32px;margin:0;padding:0 9px 0 13px;border:0;border-radius:999px;background:var(--cream) !important;box-shadow:none;outline:0;color:var(--ink);font:500 13px/1 var(--font);letter-spacing:normal;text-transform:none;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.shym-cat button.shym-cat__tag svg{display:block;width:14px;height:14px}
.shym-cat button.shym-cat__tag:hover{background:var(--ink) !important;color:var(--white)}
.shym-cat button.shym-cat__tag:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shym-cat button.shym-cat__clear,.shym-cat button.shym-cat__clear:focus,.shym-cat__sheet button.shym-cat__clear,.shym-cat__sheet button.shym-cat__clear:focus{display:inline-flex;align-items:center;height:32px;margin:0;padding:0;border:0;border-radius:0;background:none !important;box-shadow:none;outline:0;color:var(--orange);font:600 14px/1 var(--font);letter-spacing:normal;text-transform:none;white-space:nowrap;cursor:pointer;transition:color .25s}
.shym-cat button.shym-cat__clear:hover,.shym-cat__sheet button.shym-cat__clear:hover{background:none !important;color:var(--orange-deep)}
.shym-cat button.shym-cat__clear:focus-visible,.shym-cat__sheet button.shym-cat__clear:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-cat .shym-cat__none{padding:56px 0 24px;text-align:center}
.shym-cat .shym-cat__none p{margin:0 0 18px;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--body)}

/* buttons, as DESIGN.md: a 48px pill. Primary is orange and Plum ink rises through it on hover. */
.shym-cat a.shym-btn,.shym-cat a.shym-btn:visited,.shym-cat button.shym-btn,.shym-cat__sheet button.shym-btn,.shym-cat button.shym-btn:focus,.shym-cat__sheet button.shym-btn:focus{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;margin:0;padding:0 22px;border:0;border-radius:999px;outline:0;
  font:600 15px/1 var(--font);letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .25s,color .3s .12s,box-shadow .25s,transform .2s;
}
.shym-cat .shym-btn svg{display:block;width:18px;height:18px}
.shym-cat a.shym-btn--primary,.shym-cat a.shym-btn--primary:visited,.shym-cat a.shym-btn--primary:hover,.shym-cat button.shym-btn--primary,.shym-cat button.shym-btn--primary:hover,.shym-cat__sheet button.shym-btn--primary,.shym-cat__sheet button.shym-btn--primary:hover,.shym-cat__sheet button.shym-btn--primary:focus{overflow:hidden;isolation:isolate;background:var(--orange) !important;color:var(--white)}
.shym-cat .shym-btn--primary:before,.shym-cat__sheet .shym-btn--primary:before{content:"";position:absolute;z-index:-1;left:-10%;bottom:0;width:120%;height:175%;border-radius:50% 50% 0 0/32% 32% 0 0;background:var(--ink);transform:translateY(101%);transition:transform .65s cubic-bezier(.6,.05,.2,1);pointer-events:none}
.shym-cat .shym-btn--primary:hover:before,.shym-cat .shym-btn--primary:focus-visible:before,.shym-cat__sheet .shym-btn--primary:hover:before,.shym-cat__sheet .shym-btn--primary:focus-visible:before{transform:translateY(0)}
.shym-cat .shym-btn--primary:active,.shym-cat__sheet .shym-btn--primary:active{transform:scale(.97)}
.shym-cat a.shym-btn--secondary,.shym-cat a.shym-btn--secondary:visited,.shym-cat button.shym-btn--secondary,.shym-cat button.shym-btn--secondary:focus{background:transparent !important;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.shym-cat a.shym-btn--secondary:hover,.shym-cat button.shym-btn--secondary:hover{background:var(--ink) !important;color:var(--white)}
.shym-cat .shym-btn:focus-visible,.shym-cat__sheet .shym-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-cat__sheet button.shym-btn[disabled]{opacity:.45;cursor:default}

/* 3. under the cards: parts that are shared */
.shym-cat .shym-cat__sec,.shym-cat .shym-cat__browse{margin:88px 0 0}
.shym-cat .shym-cat__band{margin:88px 0 0;padding:76px 0;background:var(--cream)}
.shym-cat h2.shym-cat__h2{margin:0;padding:0;font-family:var(--font);font-size:clamp(26px,2.8vw,30px);font-weight:700;line-height:1.12;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.shym-cat .shym-cat__sec-head{margin:0 0 24px}
.shym-cat .shym-cat__sec-head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px}
.shym-cat .shym-cat__pic{display:block;overflow:hidden;border-radius:14px;background:var(--line)}
.shym-cat .shym-cat__pic img{display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;object-fit:cover}
.shym-cat a.shym-cat__link,.shym-cat a.shym-cat__link:visited{display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--font);color:var(--orange);text-decoration:none;white-space:nowrap;transition:color .25s}
.shym-cat a.shym-cat__link svg{display:block;width:16px;height:16px;transition:transform .25s}
.shym-cat a.shym-cat__link:hover{color:var(--orange-deep)}
.shym-cat a.shym-cat__link:hover svg{transform:translateX(3px)}
.shym-cat .shym-cat__stars{display:flex;gap:2px}
.shym-cat .shym-cat__stars svg{display:block;width:16px;height:16px;fill:var(--star)}

/* 4. the categories of a big category: one row of tall photo tiles over the whole width of the screen.
      The row is a marquee: it moves by itself, slowly, and it starts again with no jump (the script moves the
      track and adds copies of the tiles). It stops under the pointer, it can be dragged or swiped, and a small
      button stops it for good. With no script it is a plain row that is swiped. */
.shym-cat .shym-cat__browse .shym-cat__sec-head{margin:0}
.shym-cat button.shym-cat__pause,.shym-cat button.shym-cat__pause:focus{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:999px;background:transparent !important;box-shadow:inset 0 0 0 1.5px var(--ink);outline:0;color:var(--ink);cursor:pointer;transition:background .25s,color .25s}
.shym-cat button.shym-cat__pause[hidden]{display:none}
.shym-cat button.shym-cat__pause:hover{background:var(--ink) !important;color:var(--white)}
.shym-cat button.shym-cat__pause:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-cat button.shym-cat__pause svg{display:block;width:18px;height:18px}
.shym-cat button.shym-cat__pause svg+svg,.shym-cat button.shym-cat__pause[aria-pressed="true"] svg:first-child{display:none}
.shym-cat button.shym-cat__pause[aria-pressed="true"] svg+svg{display:block}
.shym-cat .shym-cat__rail{margin:24px 0 0;padding:4px 0 12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.shym-cat .shym-cat__rail::-webkit-scrollbar{display:none}
.shym-cat .shym-cat__track{display:flex;gap:16px;width:max-content;padding:0 max(24px,calc((100vw - 1365px) / 2))}
/* the script runs the row: nothing scrolls, the track moves. An up or down swipe stays the page's own scroll. */
.shym-cat .shym-cat__rail.is-marquee{overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.shym-cat .shym-cat__rail.is-marquee .shym-cat__track{padding:0;will-change:transform}
.shym-cat .shym-cat__rail.is-dragging{cursor:grabbing}
.shym-cat .shym-cat__rail.is-dragging a.shym-cat__tile{pointer-events:none}
.shym-cat a.shym-cat__tile,.shym-cat a.shym-cat__tile:visited{position:relative;display:block;flex:0 0 clamp(220px,21vw,320px);aspect-ratio:3/4;border-radius:18px;overflow:hidden;isolation:isolate;background:var(--cream);color:var(--white);text-decoration:none;-webkit-user-drag:none}
.shym-cat a.shym-cat__tile:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-cat .shym-cat__tile-pic{position:absolute;inset:0;display:block;overflow:hidden}
/* --at is the point of the photo that stays in view, --z a zoom on that point (the page sets them for a few photos) */
.shym-cat .shym-cat__tile-pic img{display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;object-fit:cover;object-position:var(--at,50% 50%);transform:scale(var(--z,1));transform-origin:var(--at,50% 50%);transition:transform .7s var(--ease);-webkit-user-drag:none}
/* a real photo that sits on a square white canvas: a square as tall as the tile, in the middle, and the product
   card's own zoom (on the photo) makes the picture cover it */
.shym-cat .shym-cat__tile-pic.is-zoom>span{position:absolute;top:0;bottom:0;left:50%;display:block;aspect-ratio:1/1;transform:translateX(-50%);transition:transform .7s var(--ease)}
.shym-cat .shym-cat__tile-pic.is-zoom img{object-fit:contain;transition:none}
/* a category with no real photo at all: its product shot, whole, on the cream */
.shym-cat .shym-cat__tile-pic.is-shot img{padding:10% 8% 34%;object-fit:contain;mix-blend-mode:multiply}
.shym-cat a.shym-cat__tile:after{content:"";position:absolute;inset:0;z-index:1;background:var(--shade);pointer-events:none}
.shym-cat a.shym-cat__tile:hover .shym-cat__tile-pic:not(.is-zoom) img{transform:scale(calc(var(--z,1) * 1.05))}
.shym-cat a.shym-cat__tile:hover .shym-cat__tile-pic.is-zoom>span{transform:translateX(-50%) scale(1.05)}
/* while the pointer drives the row fast, a tile under the pointer does not zoom */
.shym-cat .shym-cat__rail.is-fast a.shym-cat__tile:hover .shym-cat__tile-pic:not(.is-zoom) img{transform:scale(var(--z,1))}
.shym-cat .shym-cat__rail.is-fast a.shym-cat__tile:hover .shym-cat__tile-pic.is-zoom>span{transform:translateX(-50%)}
.shym-cat .shym-cat__tile-words{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:3px}
.shym-cat .shym-cat__tile-words b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:var(--font);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--white)}
.shym-cat .shym-cat__tile-words i{font-family:var(--font);font-style:normal;font-size:13px;line-height:1.3;color:rgba(255,255,255,.86)}

/* 5. the category's guide, in a cream band: the heading, the text and the help words at the left, 4 white cards
      at the right, each with a picture beside its words */
.shym-cat .shym-cat__guide-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:32px 56px;align-items:start}
.shym-cat p.shym-cat__guide-text{margin:12px 0 0;max-width:54ch;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--body)}
.shym-cat .shym-cat__guide-help{margin:32px 0 0;padding:28px 0 0;border-top:1px solid rgba(38,34,47,.14)}
.shym-cat h3.shym-cat__help-title{margin:0;padding:0;font-family:var(--font);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.shym-cat .shym-cat__guide-help p{margin:6px 0 0;max-width:54ch;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--body)}
.shym-cat .shym-cat__help-btns{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0}
.shym-cat .shym-cat__guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.shym-cat .shym-cat__guide-card{display:grid;grid-template-columns:116px minmax(0,1fr);column-gap:16px;align-items:start;padding:10px 18px 14px 10px;border-radius:18px;background:var(--white)}
.shym-cat .shym-cat__guide-card .shym-cat__pic{aspect-ratio:1/1}
.shym-cat .shym-cat__guide-card h3{margin:6px 0 0;padding:0;font-family:var(--font);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.shym-cat .shym-cat__guide-card p{margin:6px 0 0;font-family:var(--font);font-size:14px;line-height:1.5;color:var(--muted)}

/* a category with no guide: the help words alone, in a cream panel */
.shym-cat .shym-cat__help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin:88px 0 0;padding:40px 44px;border-radius:28px;background:var(--cream)}
.shym-cat .shym-cat__help-words{display:contents}
.shym-cat h2.shym-cat__help-title{flex:1 1 100%;margin:0;padding:0;font-family:var(--font);font-size:clamp(26px,2.8vw,30px);font-weight:700;line-height:1.12;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.shym-cat .shym-cat__help p{flex:1 1 380px;margin:-8px 0 0;max-width:60ch;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--body)}
.shym-cat .shym-cat__help .shym-cat__help-btns{margin:0}

/* 6. real projects: one large photo and 4 small ones, each with its name on the photo */
.shym-cat .shym-cat__project-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:252px;gap:16px}
.shym-cat .shym-cat__project-grid.is-3{grid-template-columns:2fr 1fr}
.shym-cat a.shym-cat__project,.shym-cat a.shym-cat__project:visited{position:relative;display:block;min-width:0;border-radius:18px;overflow:hidden;isolation:isolate;background:var(--cream);color:var(--white);text-decoration:none}
.shym-cat a.shym-cat__project:first-child{grid-row:span 2}
.shym-cat a.shym-cat__project:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-cat .shym-cat__project-pic{position:absolute;inset:0;display:block;overflow:hidden}
.shym-cat .shym-cat__project-pic img{display:block;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;object-fit:cover;transition:transform .7s var(--ease)}
.shym-cat a.shym-cat__project:after{content:"";position:absolute;inset:0;z-index:1;background:var(--shade);pointer-events:none}
.shym-cat a.shym-cat__project:hover .shym-cat__project-pic img{transform:scale(1.04)}
.shym-cat .shym-cat__project-name{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-family:var(--font);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--white)}
.shym-cat a.shym-cat__project:first-child .shym-cat__project-name{left:24px;right:24px;bottom:22px}

/* 7. customer reviews, in a cream band: the Google rating in large numbers at the left, 3 white cards beside it */
.shym-cat .shym-cat__reviews-in{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px 56px;align-items:start}
.shym-cat p.shym-cat__score{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:22px 0 0}
.shym-cat p.shym-cat__score b{font-family:var(--font);font-size:56px;font-weight:700;line-height:1;letter-spacing:-.025em;color:var(--ink)}
.shym-cat p.shym-cat__score .shym-cat__stars svg{width:20px;height:20px}
.shym-cat p.shym-cat__score i{font-family:var(--font);font-style:normal;font-size:14px;line-height:1.5;color:var(--muted)}
.shym-cat .shym-cat__review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.shym-cat figure.shym-cat__review{display:flex;flex-direction:column;margin:0;padding:26px;border-radius:18px;background:var(--white)}
.shym-cat figure.shym-cat__review blockquote{margin:14px 0 0;padding:0;border:0;background:none;quotes:none;font-family:var(--font);font-size:16px;font-style:normal;font-weight:400;line-height:1.65;color:var(--body)}
.shym-cat figure.shym-cat__review blockquote:before,.shym-cat figure.shym-cat__review blockquote:after{content:none}
.shym-cat figure.shym-cat__review figcaption{margin:auto 0 0;padding:18px 0 0;font-family:var(--font);font-size:14px;font-style:normal;font-weight:600;line-height:1.5;color:var(--ink)}

/* 8. questions and answers: a list that opens */
.shym-cat .shym-cat__faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 64px;align-items:start}
.shym-cat .shym-cat__faq .shym-cat__sec-head{margin:0}
.shym-cat .shym-cat__faq-list{border-top:1px solid var(--line)}
.shym-cat details.shym-cat__faq-item{border-bottom:1px solid var(--line)}
.shym-cat details.shym-cat__faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;list-style:none;font-family:var(--font);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);cursor:pointer}
.shym-cat details.shym-cat__faq-item summary::-webkit-details-marker{display:none}
.shym-cat details.shym-cat__faq-item summary svg{display:block;flex:none;width:20px;height:20px;color:var(--ink);transition:transform .25s}
.shym-cat details.shym-cat__faq-item[open] summary svg{transform:rotate(45deg)}
.shym-cat details.shym-cat__faq-item summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-cat .shym-cat__faq-answer{max-width:70ch;padding:0 0 22px}
.shym-cat .shym-cat__faq-answer p{margin:0 0 10px;font-family:var(--font);font-size:16px;line-height:1.65;color:var(--body)}
.shym-cat .shym-cat__faq-answer p:last-child{margin-bottom:0}
.shym-cat .shym-cat__faq-answer a{color:var(--orange);font-weight:600}

/* quiet motion: the cards come back softly after a filter change, the panel slides in */
@keyframes shym-cat-in{from{opacity:.35}to{opacity:1}}
@keyframes shym-cat-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes shym-cat-side{from{transform:translateX(100%)}to{transform:none}}
@keyframes shym-cat-shade{from{opacity:0}to{opacity:1}}
@keyframes shym-cat-float{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
/* the top, once: the photo settles, the words and the switch rise in (as on the warehouse pages) */
@keyframes shym-cat-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes shym-cat-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .shym-cat .shym-cat__top-pic img{animation:shym-cat-settle 7s var(--ease) both}
  .shym-cat .shym-cat__top-words>*{animation:shym-cat-rise .7s var(--ease) both}
  .shym-cat .shym-cat__top-words>*:nth-child(2){animation-delay:.07s}
  .shym-cat .shym-cat__top-words>*:nth-child(3){animation-delay:.14s}
  .shym-cat .shym-cat__kinds{animation:shym-cat-rise .7s .2s var(--ease) both}
}
.shym-cat .shym-cat__list>.shym-cards.is-fresh{animation:shym-cat-in .28s ease-out}
/* A visit that starts with a pick in the address (a click on a cell from the page of one kind, a shared link): the
   list, its count and the cell that is on wait until the page script has set them, so the whole list never shows
   first (Francis, 13 Oct 2026). A small script at the top of the page sets the class, and takes it away after 3
   seconds if the page script did not. The list keeps its place, so nothing under it moves. It is hidden in two
   ways: a part of a card can set its own visibility, and a hidden list must not take a click. */
.shym-cat.is-waiting .shym-cat__list>.shym-cards,.shym-cat.is-waiting .shym-cat__list>.shym-cards-more{visibility:hidden;opacity:0}
.shym-cat.is-waiting p.shym-cat__count{visibility:hidden}
.shym-cat.is-waiting .shym-cat__kinds a.shym-cat__kind.is-on,.shym-cat.is-waiting .shym-cat__kinds a.shym-cat__kind.is-on:hover{background:transparent;box-shadow:none}
@media (prefers-reduced-motion:reduce){.shym-cat *,.shym-cat__sheet *{transition:none !important;animation:none !important}.shym-cat__sheet,.shym-cat__shade,.shym-cat__float{animation:none !important}}

/* small laptops: the guide and the reviews have no room for a column of words beside the cards, so the words go on top */
@media (max-width:1199px){
  .shym-cat .shym-cat__guide-in{grid-template-columns:minmax(0,1fr)}
  .shym-cat .shym-cat__reviews-in{grid-template-columns:minmax(0,1fr)}
  .shym-cat p.shym-cat__score{flex-direction:row;align-items:center;gap:12px;margin-top:14px}
  .shym-cat p.shym-cat__score b{font-size:36px}
}
@media (min-width:1025px) and (max-width:1199px){
  .shym-cat a.shym-cat__kind{gap:8px;padding:6px 8px 6px 6px}
  .shym-cat .shym-cat__kind-pic{width:44px;height:44px}
  .shym-cat a.shym-cat__kind.is-all .shym-cat__kind-pic{width:36px;height:36px}
}

/* tablets and phones: one "Filter" pill, and the panel comes up from the bottom */
button.shym-cat__float{display:none}
@media (max-width:1024px){
  /* the photo runs behind the words over the whole band, with a shade from the top to the bottom */
  .shym-cat .shym-cat__top{min-height:0}
  .shym-cat .shym-cat__top-pic{width:100%}
  .shym-cat .shym-cat__top-pic:after{background:linear-gradient(180deg,rgba(38,34,47,.72) 0%,rgba(38,34,47,.78) 45%,rgba(38,34,47,.92) 100%)}
  /* The switch on a tablet and a phone is a row of small tiles: the picture over the name, and no count (Francis,
     13 Oct 2026: the row with the name beside the picture was "unintuitive" on a phone. It showed 2 of the 7 cells
     and looked finished). The cells share the row, so every cell is in view. A phone with 5 cells or more: see
     the phone rules. */
  .shym-cat .shym-cat__kinds{display:flex;margin-bottom:-56px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
  .shym-cat .shym-cat__kinds::-webkit-scrollbar{display:none}
  .shym-cat a.shym-cat__kind{flex:1 1 0;flex-direction:column;justify-content:flex-start;align-items:center;gap:4px;height:88px;padding:8px 2px 6px;text-align:center}
  .shym-cat a.shym-cat__kind:hover{background:transparent}
  .shym-cat .shym-cat__kind-pic{width:40px;height:40px}
  .shym-cat a.shym-cat__kind.is-all .shym-cat__kind-pic{width:36px;height:36px;margin:2px 0}
  .shym-cat .shym-cat__kind-words{align-items:center;gap:0;width:100%}
  /* "All log cabins" on one line sat tight against the edge of its cell, so the "All" name gets a little room and goes to 2 lines */
  .shym-cat a.shym-cat__kind.is-all .shym-cat__kind-words{padding:0 4px}
  .shym-cat .shym-cat__kind-words b{font-size:13px;line-height:1.2}
  .shym-cat .shym-cat__kind-words i{display:none}
  .shym-cat .shym-cat__top.has-kinds+.shym-cat__wrap .shym-cat__list{margin-top:76px}

  /* the search field over the whole width, then one row: the "Filter" pill and the sort pill. The picked filters
     and the cards follow. The side column is off: its box is taken away, so the search field in it is a part of
     this list, and its list of categories does not show (that list is the folded row under the cards).
     The words in the field are 16px here: a phone zooms the page in on a field with smaller words. */
  .shym-cat.has-side .shym-cat__side{display:contents}
  .shym-cat .shym-cat__side>.shym-cat__cats{display:none}
  /* The search is a round button in the row, after "Filter". A tap opens the field over the row, so nothing under
     it moves (Francis, 14 Oct 2026: as a bar over the row the field pushed the first product down by 58 px). The
     cross of the open field is always there: it clears the words, and with no words it shuts the field. */
  .shym-cat form.shym-cat__search{order:2;flex:none;margin:0}
  .shym-cat form.shym-cat__search .shym-cat__search-field,.shym-cat form.shym-cat__search button.shym-cat__search-clear{display:none}
  .shym-cat button.shym-cat__search-open,.shym-cat button.shym-cat__search-open:hover,.shym-cat button.shym-cat__search-open:focus{display:grid;place-items:center;width:42px;height:42px;margin:0;padding:0;border:0;border-radius:999px;background:transparent !important;box-shadow:inset 0 0 0 1.5px var(--line);outline:0;color:var(--ink);cursor:pointer;transition:box-shadow .2s}
  .shym-cat button.shym-cat__search-open svg{display:block;width:18px;height:18px}
  .shym-cat button.shym-cat__search-open:hover,.shym-cat button.shym-cat__search-open:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .shym-cat form.shym-cat__search.is-open{position:absolute;z-index:46;top:-2px;left:0;right:0}
  .shym-cat form.shym-cat__search.is-open .shym-cat__search-field{display:block}
  .shym-cat form.shym-cat__search.is-open button.shym-cat__search-open{display:none}
  .shym-cat form.shym-cat__search.is-open button.shym-cat__search-clear,.shym-cat form.shym-cat__search.is-open button.shym-cat__search-clear[hidden]{display:grid}
  .shym-cat form.shym-cat__search input[type="search"],.shym-cat form.shym-cat__search input[type="search"]:focus{font-size:16px}
  .shym-cat .shym-cat__found{width:100%;max-width:none}
  .shym-cat .shym-cat__list{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px}
  .shym-cat .shym-cat__filters{order:1;flex:none}
  .shym-cat .shym-cat__list>.shym-cards-sort{order:3;flex:none;width:auto;max-width:none;margin:0 0 0 auto}
  .shym-cat .shym-cat__applied{order:4;flex:0 0 100%;flex-wrap:nowrap;min-height:0;margin:4px 0 0}
  .shym-cat .shym-cat__applied .shym-cat__clear{flex:none}
  .shym-cat .shym-cat__applied-chips{flex:0 1 auto;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .shym-cat .shym-cat__applied-chips::-webkit-scrollbar{display:none}
  .shym-cat button.shym-cat__tag{flex:none}
  .shym-cat .shym-cat__list>.shym-cards{order:5;flex:none;margin-top:8px}
  .shym-cat .shym-cat__list>.shym-cards-more{order:6;flex:0 0 100%}
  .shym-cat .shym-cat__none{order:7;flex:0 0 100%}
  /* the list of all categories is one folded row under the cards. The side column is off. */
  .shym-cat details.shym-cat__cats--fold{display:block;order:8;flex:0 0 100%;margin:28px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .shym-cat summary.shym-cat__cats-title{height:56px;cursor:pointer;list-style:none}
  .shym-cat summary.shym-cat__cats-title::-webkit-details-marker{display:none}
  .shym-cat summary.shym-cat__cats-title::marker{content:""}
  .shym-cat summary.shym-cat__cats-title svg{display:block;flex:none;width:20px;height:20px;color:var(--ink);transition:transform .25s}
  .shym-cat details.shym-cat__cats--fold[open]>summary.shym-cat__cats-title svg{transform:rotate(45deg)}
  .shym-cat summary.shym-cat__cats-title:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  .shym-cat details.shym-cat__cats--fold ul.shym-cat__cats-list{margin:0;padding:0 0 12px;border:0}
  .shym-cat .shym-cat__cat-row{min-height:44px}
  .shym-cat .shym-cat__cat-row a{font-size:15px}
  /* one pill in the row, "Filter". The quick pills are for a computer. */
  .shym-cat .shym-filter--quick,.shym-cat .shym-cat__open-wide{display:none}
  .shym-cat .shym-cat__open-narrow{display:inline}

  /* the panel opens from the bottom of the screen. Each group is a row of chips. */
  .shym-cat__sheet{top:auto;left:0;right:0;bottom:0;width:100%;max-width:640px;max-height:88vh;max-height:88dvh;margin:0 auto;border-radius:28px 28px 0 0}
  .shym-cat__sheet.is-on{animation:shym-cat-up .3s var(--ease)}
  .shym-cat__sheet .shym-cat__sheet-head{padding:16px 12px 8px 20px}
  .shym-cat__sheet .shym-cat__groups{padding:0 20px 8px}
  .shym-cat__sheet .shym-filter{padding:16px 0}
  .shym-cat__sheet .shym-filter:first-child{padding-top:8px}
  /* in the panel the name of a group is only a name */
  .shym-cat__sheet button.shym-filter__btn,.shym-cat__sheet button.shym-filter__btn:hover,.shym-cat__sheet button.shym-filter__btn:focus{height:auto;cursor:default;pointer-events:none}
  .shym-cat__sheet button.shym-filter__btn>svg,.shym-cat__sheet button.shym-filter__btn .shym-cat__n{display:none}
  .shym-cat__sheet .shym-filter__list,.shym-cat__sheet .shym-filter__list[hidden]{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}
  .shym-cat__sheet button.shym-filter__opt,.shym-cat__sheet button.shym-filter__opt:hover,.shym-cat__sheet button.shym-filter__opt:focus{width:auto;height:40px;gap:6px;padding:0 14px;border-radius:999px;background:var(--cream) !important;color:var(--ink);font-weight:500}
  .shym-cat__sheet button.shym-filter__opt span{flex:none;overflow:visible}
  .shym-cat__sheet .shym-filter__box{display:none}
  .shym-cat__sheet button.shym-filter__opt[aria-checked="true"],.shym-cat__sheet button.shym-filter__opt[aria-checked="true"]:hover,.shym-cat__sheet button.shym-filter__opt[aria-checked="true"]:focus{background:var(--ink) !important;color:var(--white);font-weight:600}
  .shym-cat__sheet button.shym-filter__opt[aria-checked="true"] i{color:rgba(255,255,255,.72)}
  .shym-cat__sheet button.shym-filter__opt[disabled],.shym-cat__sheet button.shym-filter__opt[disabled]:hover{background:var(--cream) !important}
  .shym-cat__sheet button.shym-filter__opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .shym-cat__sheet .shym-cat__sheet-foot{padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))}

  /* the "Filter" pill that floats at the bottom of the screen while the cards are on show */
  button.shym-cat__float,button.shym-cat__float:hover,button.shym-cat__float:focus{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:9990;display:inline-flex;align-items:center;gap:8px;height:48px;margin:0;padding:0 22px;border:0;border-radius:999px;background:var(--ink) !important;box-shadow:none;outline:0;color:var(--white);font:600 15px/1 var(--font);letter-spacing:normal;text-transform:none;white-space:nowrap;cursor:pointer;transform:translateX(-50%);animation:shym-cat-float .25s ease-out}
  button.shym-cat__float[hidden]{display:none}
  button.shym-cat__float>svg{display:block;width:18px;height:18px}
  button.shym-cat__float:focus-visible{outline:2px solid var(--white);outline-offset:-5px}

  .shym-cat .shym-cat__sec,.shym-cat .shym-cat__browse,.shym-cat .shym-cat__help{margin-top:72px}
  .shym-cat .shym-cat__band{margin-top:72px;padding:60px 0}
  .shym-cat .shym-cat__guide-in{grid-template-columns:minmax(0,1fr)}
  /* the large photo takes a row of its own, the small ones sit 2 in a row under it. Each tile says its own height. */
  .shym-cat .shym-cat__project-grid,.shym-cat .shym-cat__project-grid.is-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:auto}
  .shym-cat a.shym-cat__project{height:230px}
  .shym-cat a.shym-cat__project:first-child{grid-row:auto;grid-column:1/-1;height:340px}
  .shym-cat .shym-cat__reviews-in{grid-template-columns:minmax(0,1fr)}
  .shym-cat p.shym-cat__score{flex-direction:row;align-items:center;gap:12px;margin-top:14px}
  .shym-cat p.shym-cat__score b{font-size:36px}
  .shym-cat .shym-cat__faq{grid-template-columns:minmax(0,1fr)}
}

/* phones */
@media (max-width:640px){
  .shym-cat{padding-bottom:56px}
  .shym-cat .shym-cat__wrap{width:calc(100% - 32px)}
  .shym-cat .shym-cat__top{padding-top:16px}
  .shym-cat .shym-cat__crumbs{margin-bottom:10px}
  .shym-cat .shym-cat__top-words{padding-bottom:24px}
  .shym-cat p.shym-cat__intro{font-size:15px;line-height:1.6}
  /* the bar over the site's header already says the Google rating, and a phone has no room to say it twice */
  .shym-cat .shym-cat__top p.shym-cat__rating{display:none}
  .shym-cat .shym-cat__kinds{padding:4px}
  .shym-cat .shym-cat__plate{top:4px;height:calc(100% - 8px)}
  /* a kind with a long name shows its short name in its small cell */
  .shym-cat .shym-cat__kind-full{display:none}
  .shym-cat .shym-cat__kind-short{display:inline}
  /* A phone, and a switch with 5 cells or more (is-long): the row is swiped. On every phone 4 cells and half of the
     fifth are in view, and the bar runs off the right edge of the screen, so it is clear that the row goes on
     (Baymard: half or more of the next item must show. Nielsen Norman: content that runs off the screen). The edge
     where the row goes on fades: the page script sets is-moved when the row has left its start, and is-end at its end
     (see the fade rules below). */
  .shym-cat .shym-cat__kinds.is-long{margin-right:-16px;border-radius:18px 0 0 18px;scroll-snap-type:x proximity;scroll-padding-left:4px}
  /* The fade at the edge where the row goes on. It is a strip of the bar's own cream that lies over the cells and
     stays at the edge while the row moves, so the cells fade into the bar and the bar keeps its full colour. (A fade
     of the bar itself let the dark band show through its top half and the white page through its bottom half, so
     the fade looked half as tall as the bar. Francis, 13 Oct 2026.) Each strip takes no room in the row: the one at
     the end leaves 16 px after the last cell. */
  .shym-cat .shym-cat__kinds.is-long:before,.shym-cat .shym-cat__kinds.is-long:after{content:"";position:sticky;z-index:1;flex:0 0 40px;align-self:stretch;margin-top:-4px;margin-bottom:-4px;pointer-events:none;transition:opacity .2s}
  .shym-cat .shym-cat__kinds.is-long:before{left:0;margin-left:-4px;margin-right:-40px;background:linear-gradient(to right,var(--cream) 15%,rgba(238,233,229,0));opacity:0}
  .shym-cat .shym-cat__kinds.is-long:after{right:0;margin-left:-28px;background:linear-gradient(to left,var(--cream) 15%,rgba(238,233,229,0))}
  .shym-cat .shym-cat__kinds.is-long.is-moved:before{opacity:1}
  .shym-cat .shym-cat__kinds.is-long.is-end:after{opacity:0}
  .shym-cat .shym-cat__kinds.is-long a.shym-cat__kind{flex:0 0 calc((100vw - 36px) / 4.5);scroll-snap-align:start}
  .shym-cat .shym-cat__list{margin-top:20px}
  .shym-cat .shym-cat__list>.shym-cards-sort{margin:0}
  /* a phone row has no room for the words "Sort by": the pill shows the picked order alone */
  .shym-cat .shym-cards-sort button.shym-sort__btn{font-size:0;gap:0;padding:0 14px}
  .shym-cat .shym-cards-sort button.shym-sort__btn b{font-size:14px;margin-right:8px}
  .shym-cat button.shym-cat__tag{height:36px}
  .shym-cat__sheet,.shym-cat__sheet.is-sticky{max-width:none}

  .shym-cat .shym-cat__sec,.shym-cat .shym-cat__browse,.shym-cat .shym-cat__help{margin-top:56px}
  .shym-cat .shym-cat__band{margin-top:56px;padding:44px 0}
  .shym-cat .shym-cat__sec-head{margin-bottom:18px}
  .shym-cat .shym-cat__rail{margin-top:18px}
  .shym-cat .shym-cat__track{gap:10px;padding:0 16px}
  .shym-cat a.shym-cat__tile{flex-basis:62vw}
  .shym-cat a.shym-cat__tile:hover .shym-cat__tile-pic:not(.is-zoom) img{transform:scale(var(--z,1))}
  .shym-cat a.shym-cat__tile:hover .shym-cat__tile-pic.is-zoom>span{transform:translateX(-50%)}
  .shym-cat p.shym-cat__guide-text{font-size:15px;line-height:1.6}
  .shym-cat .shym-cat__guide-help p{font-size:15px;line-height:1.6}
  .shym-cat .shym-cat__help-btns .shym-btn{flex:1 1 100%}
  /* a guide card on a phone: a smaller picture at the left, the words beside it */
  .shym-cat .shym-cat__guide-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .shym-cat .shym-cat__guide-card{grid-template-columns:96px minmax(0,1fr);column-gap:14px;padding:10px 14px 14px 10px}
  .shym-cat .shym-cat__guide-card h3{margin-top:4px;font-size:15px}
  .shym-cat .shym-cat__guide-card p{margin-top:4px;font-size:13px}
  .shym-cat .shym-cat__help{padding:28px 22px;border-radius:18px}
  .shym-cat .shym-cat__help p{margin-top:0}
  .shym-cat .shym-cat__project-grid,.shym-cat .shym-cat__project-grid.is-3{gap:10px}
  .shym-cat a.shym-cat__project{height:150px}
  .shym-cat a.shym-cat__project:first-child{height:230px}
  .shym-cat a.shym-cat__project:hover .shym-cat__project-pic img{transform:none}
  .shym-cat .shym-cat__project-name,.shym-cat a.shym-cat__project:first-child .shym-cat__project-name{left:12px;right:12px;bottom:10px;font-size:15px}
  /* the reviews are one row that is swiped sideways */
  .shym-cat .shym-cat__review-grid{display:flex;gap:10px;margin:0 -16px;padding:0 16px 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none;-ms-overflow-style:none}
  .shym-cat .shym-cat__review-grid::-webkit-scrollbar{display:none}
  .shym-cat figure.shym-cat__review{flex:0 0 84%;padding:22px 20px;scroll-snap-align:start}
  .shym-cat figure.shym-cat__review blockquote{font-size:15px;line-height:1.6}
  .shym-cat details.shym-cat__faq-item summary{padding:16px 0;font-size:15px}
  .shym-cat .shym-cat__faq-answer p{font-size:15px;line-height:1.6}
}