/* PISOL stylesheet. The token block below is written by the site builder from _tokens.js:
   colours, fonts and class names have exactly one home and this file is not it.
   Contrast on the one dark band is handled by re-declaring variables, never by paired
   rules such as .dark h2 - a paired rule fixes one element and knows nothing about the next. */

:root { --psl-ink: #2c2d31; --psl-paper: #ffffff; --psl-cream: #faf5ec; --psl-flame: #e05c14; --psl-flame-deep: #b8450c; --psl-sage: #8ca47b; --psl-sage-deep: #4f6543; --psl-wood: #c9954f; --psl-stone: #6b6a66; --psl-star: #8a5d14; --psl-kick: var(--psl-flame-deep); --psl-rule: rgba(44,45,49,.14); --psl-rule-dark: rgba(255,255,255,.22); --psl-display: 'Podkova', Georgia, serif; --psl-text: 'Pathway Extreme', system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--psl-paper);
  color: var(--psl-ink);
  font-family: var(--psl-text);
  font-size: 17px;
  line-height: 1.62;
  font-variation-settings: 'opsz' 16;
}

img { max-width: 100%; }

a { color: var(--psl-flame-deep); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--psl-flame);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--psl-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}

p, address { margin: 0 0 16px; font-style: normal; }

/* ---- frame -------------------------------------------------------------------------- */

.boardleaf {
  max-width: 1214px;
  margin: 0 auto;
  padding-left: clamp(18px, 5vw, 44px);
  padding-right: clamp(18px, 5vw, 44px);
}

.jumpover {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 30;
  background: var(--psl-flame-deep);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}

.jumpover:focus { left: 0; }

/* ---- header ------------------------------------------------------------------------- */

.hobhead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--psl-paper);
  border-bottom: 1px solid var(--psl-rule);
}

.hobhead .boardleaf {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  flex-wrap: wrap;
}

.pisolmark {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  line-height: 0;
}

.pisolmark img { display: block; max-width: 100%; }

.hobfold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid var(--psl-rule);
  border-radius: 9px;
  padding: 8px 13px;
  font: inherit;
  font-size: 15px;
  color: inherit;
  cursor: pointer;
}

.hobmenu {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.hobmenu a {
  display: inline-block;
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--psl-ink);
  text-decoration: none;
  font-size: 15.5px;
}

.hobmenu a:hover { background: var(--psl-cream); color: var(--psl-flame-deep); }

.headpick { white-space: nowrap; }

/* ---- bands and section heads --------------------------------------------------------- */

.milkband, .crustband, .ironband { padding: clamp(38px, 6vw, 74px) 0; }

.milkband { background: var(--psl-paper); }
.crustband { background: var(--psl-cream); }

/* The only dark stripe on the site. Everything inside reads the same variables, so a kicker
   or a star that later moves onto this band keeps its contrast without a second rule. */
.ironband {
  background: var(--psl-sage-deep);
  --psl-ink: #ffffff;
  --psl-kick: #fbe0cb;
  --psl-stone: #e8ece4;
  --psl-star: #f0d089;
  --psl-rule: var(--psl-rule-dark);
  --psl-paper: transparent;
  color: #fff;
}

.stripkick {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--psl-kick);
  margin: 0 0 9px;
}

.striphead {
  font-size: clamp(25px, 3.4vw, 37px);
  color: inherit;
}

.stripdeck {
  max-width: 63ch;
  color: var(--psl-stone);
  margin-bottom: 26px;
}

/* ---- buttons -------------------------------------------------------------------------- */

/* The buy label is a picture, so this button holds no words of its own. */
.spoutbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--psl-flame-deep);
  border: 0;
  border-radius: 9px;
  padding: 11px 20px;
  cursor: pointer;
  font: inherit;
  line-height: 0;
}

.spoutbtn:hover { background: var(--psl-flame); }

.spoutbtn img { display: block; }

.rimedge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.6px solid var(--psl-flame-deep);
  border-radius: 9px;
  padding: 10px 19px;
  color: var(--psl-flame-deep);
  background: none;
  text-decoration: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.rimedge:hover { background: var(--psl-flame-deep); color: #fff; }

.ironband .rimedge { border-color: #fff; color: #fff; }
.ironband .rimedge:hover { background: #fff; color: var(--psl-sage-deep); }

/* ---- hero ----------------------------------------------------------------------------- */

.openkitchen {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.opencopy h1 {
  font-size: clamp(31px, 5vw, 51px);
  margin-bottom: 16px;
}

.opencopy > p {
  font-size: 18.5px;
  color: var(--psl-stone);
  max-width: 46ch;
}

.opencopy .rimedge { margin-right: 10px; }

.opencopy .rimedge:first-of-type { background: var(--psl-flame-deep); color: #fff; }

.opencopy .rimedge:first-of-type:hover { background: var(--psl-flame); border-color: var(--psl-flame); }

.openshelf {
  background: var(--psl-cream);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  gap: 14px;
}

.openshelf .tileshot { border-radius: 12px; }

.openshelf p { margin: 0; font-size: 15px; color: var(--psl-stone); }

/* ---- shelf tiles, sorting pills, the pair ---------------------------------------------- */

.joblist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 18px;
}

.jobdoor {
  display: flex;
  flex-direction: column;
  background: var(--psl-cream);
  border: 1px solid var(--psl-rule);
  border-radius: 13px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.jobdoor:hover { border-color: var(--psl-flame); }

.jobdoor > span:first-child {
  display: block;
  position: relative;
  aspect-ratio: 5 / 3;
  flex: none;
  background: var(--psl-cream);
}

.jobdoor > span:first-child img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.jobline {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 18px;
}

.jobline h3 { font-size: 20px; margin-bottom: 6px; }

.jobline p { font-size: 14.5px; color: var(--psl-stone); margin: 0; }

.jobline b {
  display: block;
  margin-top: auto;
  padding-top: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--psl-kick);
}

.jobpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.4px solid var(--psl-rule);
  border-radius: 999px;
  padding: 8px 16px;
  margin: 0 8px 9px 0;
  background: var(--psl-paper);
  text-decoration: none;
  color: inherit;
  font-size: 15.5px;
}

.jobpill:hover { border-color: var(--psl-flame); color: var(--psl-flame-deep); }

.jobpill i { font-style: normal; color: var(--psl-stone); font-size: 13.5px; }

.benchpair {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.benchpair > div {
  border-radius: 15px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--psl-rule);
  display: flex;
  flex-direction: column;
}

.benchpair > div:first-child { background: var(--psl-cream); }

.benchpair > div:last-child {
  background: var(--psl-paper);
  border-left: 5px solid var(--psl-flame);
}

.benchpair h2 { font-size: clamp(22px, 2.6vw, 28px); }

.benchpair p { color: var(--psl-stone); }

.benchpair .rimedge, .benchpair .spoutbtn { align-self: flex-start; margin-top: auto; }

/* ---- product tile --------------------------------------------------------------------- */

.tilecase { display: flex; flex-direction: column; }

.tiletool {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--psl-paper);
  border: 1px solid var(--psl-rule);
  border-radius: 13px;
  padding: 12px 13px 15px;
  text-decoration: none;
  color: inherit;
}

.tiletool:hover { border-color: var(--psl-flame); }

/* min-height keeps the picture from stretching the flex item past its own box */
.tileshot {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border-radius: 9px;
  overflow: hidden;
}

.tileshot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}

.tilelabel {
  font-family: var(--psl-display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.28;
}

.tilemeta {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tilemeta b { font-size: 17.5px; color: var(--psl-kick); }

.starnick {
  color: var(--psl-star);
  font-size: 14.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.starnick small {
  color: var(--psl-stone);
  font-size: 12.5px;
  letter-spacing: 0;
  margin-left: 5px;
}

.tonedots {
  align-self: flex-start;
  font-size: 12.5px;
  color: var(--psl-stone);
  background: var(--psl-cream);
  border-radius: 999px;
  padding: 2px 10px;
}

.tileact { margin-top: 9px; width: 100%; }

/* ---- the two homepage grids ------------------------------------------------------------ */

/* Сетка с переносом на любой ширине.
   ⚠ До 17.10.2026 эта полоса на телефоне ездила боком (grid-auto-flow: column + overflow-x),
   и ни одна проба того не видела: scrollWidth ДОКУМЕНТА совпадал с clientWidth, скролл жил
   внутри полосы. Карусели на сайте нет ни на одной ширине — мерить надо и элементы. */
.mostused {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 16px;
}

.freshtools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 18px;
}

/* ---- guide teasers ---------------------------------------------------------------------- */

.notestrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
}

.notestrip a {
  display: block;
  padding: 20px 21px 22px;
  border: 1px solid var(--psl-rule);
  border-radius: 13px;
  background: var(--psl-paper);
  text-decoration: none;
  color: inherit;
}

.notestrip a:hover { border-color: var(--psl-flame); }

.notestrip h3 { font-size: 19px; margin-bottom: 8px; }

.notestrip p { font-size: 14.5px; color: var(--psl-stone); margin: 0; }

.benchroll { border-top: 1px solid var(--psl-rule); }

.benchroll a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 28px;
  padding: 20px 2px 21px;
  border-bottom: 1px solid var(--psl-rule);
  text-decoration: none;
  color: inherit;
}

.benchroll a:hover h3 { color: var(--psl-flame); }

.benchroll h3 { font-size: 21px; margin: 0; }

.benchroll p { font-size: 15px; color: var(--psl-stone); margin: 0; }

@media (min-width: 800px) {
  .benchroll a { grid-template-columns: 5fr 6fr; align-items: baseline; }
}

/* ---- mission band and the closing paragraph ----------------------------------------------- */

.makecall { max-width: 66ch; }

.makecall p { color: var(--psl-stone); font-size: 18px; }

.sidenote {
  max-width: 74ch;
  border-left: 4px solid var(--psl-wood);
  padding-left: clamp(16px, 2.4vw, 26px);
}

.sidenote h2 { font-size: 23px; }

.sidenote p { color: var(--psl-stone); margin-bottom: 0; }

/* ---- quotes (used on product pages, where the words were actually written) ------------------ */

.sinkwall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
}

.sinkquote {
  margin: 0;
  background: var(--psl-cream);
  border-radius: 13px;
  padding: 20px 21px;
  font-size: 15.5px;
}

.sinkquote p { margin: 0 0 12px; }

.sinksigner {
  font-style: normal;
  font-size: 13.5px;
  color: var(--psl-stone);
  letter-spacing: 0.02em;
}

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

.youarehere {
  font-size: 13.5px;
  color: var(--psl-stone);
  padding: 14px 0 0;
}

.youarehere a { color: var(--psl-stone); }

.youarehere span { padding: 0 6px; opacity: 0.6; }

/* ---- product page ----------------------------------------------------------------------------- */

.toolmain {
  display: grid;
  gap: clamp(22px, 3.5vw, 46px);
  align-items: start;
  padding: 22px 0 clamp(30px, 5vw, 56px);
}

.toolshot > span {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--psl-rule);
  border-radius: 15px;
  overflow: hidden;
}

.toolshot > span img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}

.toolside h1 { font-size: clamp(25px, 3.4vw, 35px); margin-bottom: 10px; }

.toolside > .starnick { display: inline-block; margin-bottom: 14px; }

.pricesill {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--psl-cream);
  border-radius: 13px;
  padding: 16px 18px;
  margin: 18px 0;
}

.pricesill b {
  font-family: var(--psl-display);
  font-size: 27px;
  color: var(--psl-kick);
}

.pricesill em {
  flex-basis: 100%;
  font-style: normal;
  font-size: 12.5px;
  color: var(--psl-stone);
  line-height: 1.45;
}

/* the same tool in other colors: a wrapping grid of links, never a sideways strip */
.tonepick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tonepick a,
.tonepick .onhob {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1.4px solid var(--psl-rule);
  background: var(--psl-paper);
  border-radius: 9px;
  padding: 6px 14px 6px 6px;
  font-size: 14.5px;
  color: inherit;
  text-decoration: none;
}

.tonepick img {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--psl-cream);
}

.tonepick a:hover { border-color: var(--psl-flame-deep); }

.tonepick .onhob {
  border-color: var(--psl-flame-deep);
  background: var(--psl-cream);
  font-weight: 600;
}

.toolword h2 { font-size: 22px; margin-top: 30px; }

.toolword ul { padding-left: 20px; }

.toolword li { margin-bottom: 9px; }

.specstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.specstrip li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--psl-cream);
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.3;
}

.specstrip svg { flex: 0 0 auto; width: 21px; height: 21px; color: var(--psl-sage-deep); }

.howsteps {
  counter-reset: hob;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.howsteps li {
  counter-increment: hob;
  position: relative;
  padding-left: 48px;
  margin-bottom: 16px;
}

.howsteps li::before {
  content: counter(hob);
  position: absolute;
  left: 0;
  top: 0;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--psl-flame-deep);
  color: #fff;
  font-family: var(--psl-display);
  font-weight: 700;
  font-size: 16px;
}

.alsofits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 18px;
}

/* ---- long-form pages: guides, notes, service ------------------------------------------------- */

/* A narrow column pinned to the left, not centred. It is the reading idiom of the site and it
   is the same on guides and on service pages, so the two groups do not look like two sites.
   ⚠ On a guide this leaves 366px empty to the right of the text for the whole article, and on a
   screenshot that reads like a sidebar that failed to load. It is not one. Measured with
   _tmp/readrail.js: the column is 760px inside a 1126px container, and every long-form page on
   the site sits the same way. On the service pages nothing follows the column and it reads
   fine; on a guide the full-width tile band underneath is what makes the gap noticeable, which
   is an ordinary magazine shape. Centring the column here would split the idiom in two. */
.readpage {
  max-width: 760px;
  padding: clamp(24px, 4vw, 46px) 0 clamp(34px, 5vw, 64px);
}

.readhead h1 { font-size: clamp(28px, 4vw, 41px); }

.readhead p { font-size: 18.5px; color: var(--psl-stone); }

.readsec { margin-top: 34px; }

.readsec h2 { font-size: 24px; }

.readfacts {
  background: var(--psl-cream);
  border-radius: 13px;
  padding: 22px 24px;
  margin-top: 34px;
}

.readfacts h2 { font-size: 20px; }

.readfacts ul { margin: 0; padding-left: 20px; }

.readfacts li { margin-bottom: 9px; }

.readclose {
  margin-top: 30px;
  border-top: 2px solid var(--psl-rule);
  padding-top: 20px;
}

.readpage h2 { margin-top: 32px; }

.readpage h3 { font-size: 19px; margin-top: 24px; }

.readpage dl { margin: 0; }

.readpage dt { font-family: var(--psl-display); font-weight: 700; margin-top: 22px; }

.readpage dd { margin: 6px 0 0; }

/* ---- the picker --------------------------------------------------------------------------------- */

.jobstep {
  border-top: 1px solid var(--psl-rule);
  padding: 20px 0 8px;
}

.jobstep h2 { font-size: 20px; margin-bottom: 12px; }

.jobopt {
  display: inline-flex;
  align-items: center;
  border: 1.4px solid var(--psl-rule);
  border-radius: 999px;
  background: var(--psl-paper);
  padding: 8px 17px;
  margin: 0 8px 9px 0;
  font: inherit;
  font-size: 15.5px;
  color: inherit;
  cursor: pointer;
}

.jobopt:hover { border-color: var(--psl-flame); }

.jobopt.onhob {
  border-color: var(--psl-flame-deep);
  background: var(--psl-flame-deep);
  color: #fff;
  font-weight: 600;
}

.jobout { margin-top: 26px; }

.jobout > p { color: var(--psl-stone); }

.jobout .freshtools { margin-top: 16px; }

/* ---- footer ---------------------------------------------------------------------------------------- */

.larderfoot {
  background: var(--psl-cream);
  border-top: 2px solid var(--psl-rule);
  padding: clamp(32px, 4.5vw, 54px) 0 30px;
  font-size: 15px;
}

.lardercols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 24px;
}

.lardercols h2 {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--psl-stone);
  font-family: var(--psl-text);
  font-weight: 600;
  margin-bottom: 10px;
}

.lardercols ul { list-style: none; margin: 0; padding: 0; }

.lardercols li { margin-bottom: 7px; }

.lardercols a { color: var(--psl-ink); text-decoration: none; }

.lardercols a:hover { color: var(--psl-flame-deep); text-decoration: underline; }

.larderfine {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--psl-rule);
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--psl-stone);
}

.larderfine p { margin: 0; max-width: 52ch; }

/* ---- wider screens ------------------------------------------------------------------------------------ */

@media (min-width: 700px) {
  .mostused { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  .openkitchen { grid-template-columns: 1.08fr 0.92fr; }
  .toolmain { grid-template-columns: 1.02fr 0.98fr; }
  .larderfine { flex-wrap: nowrap; }
}

/* ---- narrow screens --------------------------------------------------------------------------------------- */

@media (max-width: 1119px) {
  .hobmenu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-bottom: 10px;
  }

  .hobmenu.hobopen { display: flex; }

  .hobmenu a { padding: 11px 4px; border-bottom: 1px solid var(--psl-rule); border-radius: 0; }

  /* The picker is the main thing a visitor can do here, so it stays in the header and only
     gets smaller. The drop-down holds shelves and notes, not this button. */
  .headpick { padding: 8px 13px; font-size: 14.5px; }
}

@media (min-width: 1120px) {
  .hobfold { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}