/* =========================================================
   TK Comercio — "Catálogo"
   A trade counter, not a brochure: paper-white, square corners,
   one grotesk at several weights, tables given more room than
   pictures. Nothing here should feel like a luxury brand site.
   ========================================================= */

:root {
  --main: #17201C;
  --bg: #F7F6F2;
  --bg-dark: #EDEBE3;
  --bg-soft: #FFFFFF;

  --second: #146B4C;        /* emerald — prices, links, rules */
  --third: #8A7A4E;         /* olive brass — kickers */
  --gold: #146B4C;

  --key-green: #146B4C;
  --key-navy: #1B3A52;
  --key-red: #B2554F;

  --line: rgba(23, 32, 28, 0.16);
  --line-soft: rgba(23, 32, 28, 0.09);
  --dim: rgba(23, 32, 28, 0.70);
  --dimmer: rgba(23, 32, 28, 0.46);

  --accent-line: rgba(20, 107, 76, 0.38);
  --accent-soft: rgba(20, 107, 76, 0.08);
  --hdr-bg: rgba(247, 246, 242, 0.93);
  --hover-bg: rgba(23, 32, 28, 0.045);
  --shadow: 0 18px 44px rgba(23, 32, 28, 0.14);
  --ph: rgba(23, 32, 28, 0.34);
  --scrim: linear-gradient(180deg, rgba(14,22,18,.74) 0%, rgba(14,22,18,.42) 45%, rgba(14,22,18,.84) 100%);
  --glow-top: linear-gradient(180deg, rgba(20,107,76,.07) 0%, transparent 70%);
  --glow-tile: none;
  --glow-cta: linear-gradient(180deg, rgba(20,107,76,.08), transparent 70%);

  /* One typeface. A wholesaler does not need two. */
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Hiragino Sans", "Hiragino Sans GB", "Yu Gothic", "Microsoft YaHei", "PingFang SC", "PingFang TC",
    "Apple SD Gothic Neo", "Malgun Gothic", "Nirmala UI", "Noto Sans", sans-serif;
  --font-header: var(--font-body);

  --radius: 0px;
  --h-weight: 500;
  --h-track: -0.4px;
}

h1, h2, h3, h4 { font-weight: var(--h-weight); letter-spacing: var(--h-track); line-height: 1.1; }
h1 em { font-style: normal; color: var(--second); }
body { font-weight: 400; }

/* Kickers read as catalogue section numbers */
.kicker { color: var(--third); font-weight: 500; }

/* Flat, squared cards on a hairline grid — a price list, not a gallery */
.cats { background: var(--line-soft); }
.cat { background: var(--bg-soft); }
.cat h4 { font-weight: 500; }
.cat__es { color: var(--second); }

.tiles { background: var(--line-soft); }
.tile { background: var(--bg-soft); }
.tile::before { display: none; }
.tile:hover { background: #FFFDF7; }
.tile h3 { font-size: 1.5rem; font-weight: 500; }

.stats { background: var(--line-soft); }
.stat { background: var(--bg-soft); }
.stat span { color: rgba(23, 32, 28, 0.62); }

/* The table is the point of this site, so give it weight */
.ptable table { min-width: 700px; }
.ptable th {
  background: var(--main);
  color: #F7F6F2;
  border-bottom: 0;
  letter-spacing: .16em;
}
.ptable td { color: var(--main); }
.ptable td.num { color: var(--second); font-weight: 500; }
.ptable tbody tr:nth-child(even) td { background: rgba(23, 32, 28, 0.025); }
.ptable tbody tr:hover td { background: var(--accent-soft); }

.rows .row__n { color: var(--second); font-weight: 500; }

/* Buttons squared off like a counter form */
.btn { border-radius: 0; font-weight: 500; letter-spacing: .2em; }
.btn--solid { background: var(--second); border-color: var(--second); color: #FFFFFF; }

.imgcard { border: 1px solid var(--line); filter: none; }

.pull { background: var(--main); }
.pull p { color: #F7F6F2; }
/* 진한 에메랄드는 먹색 위에서 읽히지 않는다 — 밝은 쪽으로 올린다 */
.pull span { color: #7FD0AC; }

.quote blockquote { font-weight: 300; font-style: normal; }

/* Dark footer under a paper-white page — the counter closes for the day.
   Base colours are ink-on-paper, so every line inside is re-stated. */
.ftr { background: var(--main); border-top: 0; }
.ftr, .ftr li, .ftr ul a, .ftr__blurb, .ftr__btm { color: rgba(247, 246, 242, 0.62); }
.ftr h5 { color: rgba(247, 246, 242, 0.46); }
.ftr .brand__n { color: #F7F6F2; }
.ftr .brand__s { color: rgba(247, 246, 242, 0.52); }
.ftr__top { border-bottom-color: rgba(247, 246, 242, 0.14); }
.ftr ul a:hover, .ftr ul a.on { color: #7FD0AC; }