/* KIDMI catalogue stylesheet. Fonts live in the same folder, so bare filenames only. */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('hanken.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('instrument.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --tanbark: #2b2118;
  --fawn: #a98963;
  --oatcream: #f6f1e7;
  --cinder: #b5432f;
  --peat: #6b6257;
  --pinline: #e3d9c8;
  --birchen: #fffdf9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Instrument Sans', 'Segoe UI', sans-serif;
  color: var(--tanbark);
  background: var(--birchen);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: 'Hanken Grotesk', 'Segoe UI', sans-serif; line-height: 1.25; font-weight: 700; }
[hidden] { display: none !important; }

.gaiter { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }

/* ---------- header: slogan strip / masthead / nav ribbon ---------- */
.bandlet {
  background: var(--tanbark);
  color: var(--oatcream);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding-block: .45rem;
}

.welt { background: var(--birchen); border-bottom: 1px solid var(--pinline); }
.welt-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  gap: 1rem;
}
.welt-flap {
  justify-self: start;
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: .5rem;
}
.welt-flap span {
  display: block;
  width: 24px; height: 2px;
  background: var(--tanbark);
  margin-block: 5px;
  transition: transform .2s;
}
.welt-mark { justify-self: center; display: inline-flex; align-items: center; text-decoration: none; }
.welt-mark img { height: 30px; width: auto; }
.welt-seek {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--pinline);
  border-radius: 999px;
  background: var(--oatcream);
  color: var(--peat);
  font: inherit;
  font-size: .88rem;
  padding: .45rem 1.1rem;
  cursor: pointer;
}
.welt-seek:hover { border-color: var(--fawn); color: var(--tanbark); }

.railband { background: var(--fawn); }
.railband-in {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .25rem;
}
.railband a {
  color: #fff;
  text-decoration: none;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .65rem 1.1rem;
}
.railband a:hover, .railband a.lit { background: rgba(43, 33, 24, .25); }

/* search overlay */
.seekveil {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(43, 33, 24, .55);
  z-index: 60;
  padding-top: 12vh;
}
body.peek-open .seekveil { display: block; }
body.peek-open, body.flap-open { overflow: hidden; }
.seekveil-box {
  background: var(--birchen);
  max-width: 640px;
  margin-inline: auto;
  border-radius: 10px;
  padding: 1.2rem;
}
.seekveil-box form { display: flex; gap: .6rem; }
.seekveil-box input {
  flex: 1;
  font: inherit;
  padding: .6rem .9rem;
  border: 1px solid var(--pinline);
  border-radius: 6px;
  background: var(--oatcream);
}
.seekveil-box input:focus { outline: 2px solid var(--fawn); }
.seekveil-close {
  background: none; border: 0; cursor: pointer;
  font-size: 1.3rem; color: var(--peat); padding: .3rem .6rem;
}
.seekhits { margin-top: .9rem; max-height: 52vh; overflow-y: auto; }
.seekhits a {
  display: flex; align-items: center; gap: .8rem;
  padding: .5rem; border-radius: 6px; text-decoration: none;
}
.seekhits a:hover { background: var(--oatcream); }
.seekhits img { width: 46px; height: 46px; object-fit: contain; background: #fff; border-radius: 4px; }
.seekhits .hitname { font-size: .88rem; }
.seekhits .hitcost { margin-left: auto; font-weight: 700; font-size: .88rem; color: var(--cinder); white-space: nowrap; }
.seeknone { color: var(--peat); font-size: .9rem; padding: .5rem; }

/* mobile drawer */
.flapnav {
  display: none;
  position: fixed;
  inset: 0 30% 0 0;
  background: var(--birchen);
  z-index: 70;
  padding: 1.4rem;
  overflow-y: auto;
  box-shadow: 4px 0 24px rgba(0,0,0,.2);
}
body.flap-open .flapnav { display: block; }
.flapnav a {
  display: block;
  padding: .7rem 0;
  text-decoration: none;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  border-bottom: 1px solid var(--pinline);
}
.flapnav-shut { background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--peat); margin-bottom: .6rem; }
.flapscrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(43,33,24,.45);
  z-index: 65;
}
body.flap-open .flapscrim { display: block; }

/* ---------- hero ---------- */
.stoop { background: var(--oatcream); border-bottom: 1px solid var(--pinline); }
.stoop-in {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2.5rem;
  align-items: center;
  padding-block: 3.2rem;
}
.stoop-kicker {
  color: var(--cinder);
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}
.stoop h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: 1rem; }
.stoop p { color: var(--peat); max-width: 46ch; margin-bottom: 1.4rem; }
.stoop-shot img { border-radius: 12px; box-shadow: 0 14px 34px rgba(43,33,24,.18); }

/* ---------- buttons ---------- */
.fetch {
  display: inline-block;
  background: var(--cinder);
  color: #fff;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  border: 0;
  border-radius: 6px;
  padding: .75rem 1.6rem;
  cursor: pointer;
}
.fetch:hover { background: #983525; }
.fetch-ghost {
  display: inline-block;
  color: var(--tanbark);
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  border: 1.5px solid var(--tanbark);
  border-radius: 6px;
  padding: .7rem 1.5rem;
  cursor: pointer;
  background: transparent;
}
.fetch-ghost:hover { background: var(--tanbark); color: var(--oatcream); }

/* ---------- sections and card grid ---------- */
.backroom { padding-block: 2.8rem; }
.backroom-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.backroom-head h2 { font-size: 1.45rem; }
.backroom-head a { color: var(--cinder); font-size: .88rem; font-weight: 700; text-decoration: none; }
.backroom-head a:hover { text-decoration: underline; }
.backroom-sub { color: var(--peat); max-width: 62ch; margin-top: -.9rem; margin-bottom: 1.4rem; }

.lastrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
}
.cubby {
  background: #fff;
  border: 1px solid var(--pinline);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.cubby:hover { box-shadow: 0 10px 26px rgba(43,33,24,.12); transform: translateY(-2px); }
.cubby-peep { background: #fff; aspect-ratio: 1; padding: 8%; }
.cubby-peep img { width: 100%; height: 100%; object-fit: contain; }
.cubby-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.cubby-name { font-size: .92rem; font-weight: 600; text-decoration: none; }
.cubby-name:hover { color: var(--cinder); }
.toecap {
  align-self: flex-start;
  font-size: .72rem;
  color: var(--peat);
  background: var(--oatcream);
  border-radius: 4px;
  padding: .1rem .5rem;
}
.lustre { font-size: .8rem; color: var(--peat); }
.lustre b { color: #c98a1b; font-weight: 400; letter-spacing: .06em; }
.cubby-cost { margin-top: auto; font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: 1.02rem; }
.cubby .fetch { font-size: .82rem; padding: .55rem 1rem; text-align: center; }

/* ---------- breadcrumbs ---------- */
.crumbrail { font-size: .8rem; color: var(--peat); padding-block: 1rem 0; }
.crumbrail a { color: var(--peat); text-decoration: none; }
.crumbrail a:hover { color: var(--cinder); }
.crumbrail span { margin-inline: .35rem; }

/* ---------- category page ---------- */
.stall-head { padding-block: 2rem .4rem; }
.stall-head h1 { font-size: 1.7rem; margin-bottom: .6rem; }
.stall-head p { color: var(--peat); max-width: 68ch; }
.stall-tally { font-size: .82rem; color: var(--peat); margin-block: 1rem; }

/* ---------- product page ---------- */
.tryon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem;
  padding-block: 1.6rem 2.6rem;
}
.tryon-peep {
  background: #fff;
  border: 1px solid var(--pinline);
  border-radius: 12px;
  padding: 6%;
  align-self: start;
}
.tryon-peep img { width: 100%; object-fit: contain; }
.tryon-board h1 { font-size: 1.45rem; margin-bottom: .7rem; }
.tryon-board .lustre { font-size: .9rem; margin-bottom: .8rem; }
.costline {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  margin-block: .6rem 1.1rem;
}
.costline small { font-size: .78rem; color: var(--peat); font-family: 'Instrument Sans', sans-serif; font-weight: 400; display: block; }
.boardlist { list-style: none; margin-block: 1.3rem; }
.boardlist li {
  padding-left: 1.3rem;
  position: relative;
  margin-bottom: .55rem;
  font-size: .93rem;
  color: #443a2e;
}
.boardlist li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fawn);
}
.tryon-board .fetch { padding: .9rem 2.2rem; font-size: 1rem; }
.boardnote { font-size: .8rem; color: var(--peat); margin-top: .9rem; max-width: 52ch; }
.yarn { padding-block: .4rem 2.4rem; max-width: 74ch; }
.yarn h2 { font-size: 1.2rem; margin-bottom: .7rem; }
.yarn p { margin-bottom: .9rem; color: #443a2e; }

/* ---------- prose / service pages ---------- */
.inlay { max-width: 74ch; padding-block: 2.4rem 3rem; }
.inlay h1 { font-size: 1.8rem; margin-bottom: 1.1rem; }
.inlay h2 { font-size: 1.25rem; margin-block: 1.6rem .6rem; }
.inlay p, .inlay li { color: #443a2e; margin-bottom: .85rem; }
.inlay ul { padding-left: 1.2rem; }
.inlay a { color: var(--cinder); }

/* ---------- home extras ---------- */
.stallwalk { padding-block: 2.8rem; }
.stallwalk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.stalldoor {
  background: var(--oatcream);
  border: 1px solid var(--pinline);
  border-radius: 10px;
  padding: 1.4rem 1.2rem;
  text-decoration: none;
  display: block;
}
.stalldoor:hover { border-color: var(--fawn); }
.stalldoor h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.stalldoor p { font-size: .84rem; color: var(--peat); margin-bottom: .6rem; }
.stalldoor em { font-style: normal; font-size: .8rem; color: var(--cinder); font-weight: 700; }

.saywall { background: var(--oatcream); border-block: 1px solid var(--pinline); padding-block: 2.8rem; }
.saywall h2 { text-align: center; font-size: 1.45rem; margin-bottom: 1.6rem; }
.saywall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.sayer { background: #fff; border-radius: 10px; padding: 1.3rem; border: 1px solid var(--pinline); }
.sayer p { font-size: .9rem; color: #443a2e; margin-bottom: .8rem; }
.sayer cite { font-style: normal; font-size: .8rem; color: var(--peat); font-weight: 700; }

/* ---------- footer ---------- */
.outsole { background: var(--tanbark); color: #cfc4b2; margin-top: 2rem; }
.outsole a { color: #cfc4b2; text-decoration: none; }
.outsole a:hover { color: #fff; }

.outsole-trust { border-bottom: 1px solid rgba(246,241,231,.14); }
.outsole-trust .gaiter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  padding-block: 1.6rem;
}
.trustcell { font-size: .84rem; }
.trustcell b { display: block; color: var(--oatcream); font-family: 'Hanken Grotesk', sans-serif; font-size: .9rem; margin-bottom: .2rem; }

.outsole-mani .gaiter {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2.4rem;
  padding-block: 2.2rem;
}
.outsole-mani img { height: 26px; width: auto; margin-bottom: .9rem; }
.outsole-mani p { font-size: .88rem; max-width: 52ch; }
.cheatbox { font-size: .84rem; }
.cheatbox b { color: var(--oatcream); display: block; margin-bottom: .5rem; font-family: 'Hanken Grotesk', sans-serif; }
.cheatbox li { margin-bottom: .35rem; list-style: none; }

.outsole-nav { border-top: 1px solid rgba(246,241,231,.14); }
.outsole-nav .gaiter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  padding-block: 1.8rem;
}
.foldgroup b { display: block; color: var(--oatcream); font-family: 'Hanken Grotesk', sans-serif; font-size: .86rem; margin-bottom: .6rem; text-transform: uppercase; letter-spacing: .06em; }
.foldgroup a { display: block; font-size: .86rem; padding-block: .22rem; }

.outsole-last { border-top: 1px solid rgba(246,241,231,.14); }
.outsole-last .gaiter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.1rem;
  font-size: .78rem;
}
.finethread { font-size: .76rem; color: #9a8f7d; max-width: 92ch; padding-block: .6rem; }
.risekey {
  background: none;
  border: 1px solid rgba(246,241,231,.3);
  color: #cfc4b2;
  border-radius: 6px;
  font: inherit;
  font-size: .78rem;
  padding: .4rem .9rem;
  cursor: pointer;
}
.risekey:hover { color: #fff; border-color: #fff; }

/* ---------- счётчики и таблицы главной ---------- */
.tallyrail { background: var(--tanbark); color: var(--oatcream); }
.tallyrail-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-block: 1.5rem;
  text-align: center;
}
.tallystone b {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--fawn);
}
.tallystone span {
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pinline);
}
.benchwrap { overflow-x: auto; margin-top: 1.2rem; }
.benchtable {
  width: 100%;
  border-collapse: collapse;
  background: var(--birchen);
  border: 1px solid var(--pinline);
  font-size: .92rem;
}
.benchtable th, .benchtable td {
  padding: .7rem .9rem;
  border: 1px solid var(--pinline);
  text-align: left;
  vertical-align: top;
}
.benchtable thead th {
  background: var(--oatcream);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tanbark);
}
.benchtable tbody th {
  background: var(--oatcream);
  font-weight: 600;
  white-space: nowrap;
}
.benchtable a { color: var(--cinder); font-weight: 600; text-decoration: none; }
.benchtable a:hover { text-decoration: underline; }
.benchtable-star td:nth-child(2) { background: rgba(169, 137, 99, .13); font-weight: 600; }

/* ---------- преимущества и FAQ главной ---------- */
.perkrail { padding-block: 2.8rem; background: var(--oatcream); border-block: 1px solid var(--pinline); }
.perkrail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.perkstone {
  background: #fff;
  border: 1px solid var(--pinline);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
}
.perkstone h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.perkstone p { font-size: .9rem; color: var(--peat); }
.askfold { padding-block: 2.8rem; }
.askfold-list { max-width: 74ch; }
.askrow { border-bottom: 1px solid var(--pinline); }
.askrow summary {
  cursor: pointer;
  padding: .9rem 0;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  list-style-position: outside;
}
.askrow summary::marker { color: var(--fawn); }
.askrow p { padding: 0 0 1rem; color: var(--peat); font-size: .93rem; max-width: 68ch; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .lastrow { grid-template-columns: repeat(3, 1fr); }
  .stallwalk-grid { grid-template-columns: repeat(2, 1fr); }
  .perkrail-grid { grid-template-columns: repeat(2, 1fr); }
  .stoop-in { grid-template-columns: 1fr; padding-block: 2.2rem; }
  .stoop-shot { order: -1; }
  .tryon { grid-template-columns: 1fr; gap: 1.6rem; }
  .saywall-grid { grid-template-columns: 1fr; }
  .outsole-mani .gaiter { grid-template-columns: 1fr; }
  .railband { display: none; }
  .welt-flap { display: block; }
}
@media (max-width: 560px) {
  .lastrow { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .stallwalk-grid { grid-template-columns: 1fr; }
  .perkrail-grid { grid-template-columns: 1fr; }
  .tallyrail-in { grid-template-columns: repeat(2, 1fr); }
  .tallystone b { font-size: 1.5rem; }
  .benchtable { font-size: .8rem; }
  .benchtable th, .benchtable td { padding: .45rem .55rem; }
  .benchtable tbody th { white-space: normal; }
  .welt-in { min-height: 62px; }
  .welt-mark img { height: 24px; }
  .welt-seek span { display: none; }
  .welt-seek { padding: .45rem .7rem; }
  .outsole-trust .gaiter, .outsole-nav .gaiter { grid-template-columns: 1fr; }
  .cubby-body { padding: .7rem .7rem .9rem; }
  .cubby .fetch { padding: .5rem .6rem; }
  .flapnav { inset: 0 15% 0 0; }
}