/* Home sections: category tiles (pk-categories) and product rows (pk-product-row).
   Flat fills, no resting shadows, no hairlines. Builds on styles.css tokens and .card / .cover. */

/* shared eyebrow */
.pk-sec-eyebrow{margin:0;font-family:var(--font-body);font-weight:800;font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.band-ink .pk-sec-eyebrow,.band-red .pk-sec-eyebrow{color:var(--accent-soft)}
.pk-cats-section h2,.pk-row-section h2{font-size:var(--fs-h2)}
.cover.t-all{--fg:var(--card)}

/* ---------- category tiles ---------- */
.pk-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:640px){.pk-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pk-cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pk-cats li{display:flex;min-width:0}
.pk-cat{flex:1;display:flex;flex-direction:column;background:var(--card);color:var(--ink);text-decoration:none;text-align:left;transition:transform 200ms var(--ease-out)}
.pk-cat:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pk-cat-media{position:relative;display:block;background:var(--tint);height:220px;overflow:hidden}
.pk-cat-media .cover{position:absolute;left:50%;bottom:-18px;width:128px;transition:transform 260ms var(--ease-out)}
.pk-cat-media .ct-title{font-size:.9rem}
.pk-cat-back{transform-origin:50% 100%}
.pk-cat-b1{transform:translateX(-50%) translateX(-44px) rotate(-9deg);opacity:.55}
.pk-cat-b2{transform:translateX(-50%) translateX(44px) rotate(9deg);opacity:.75}
.pk-cat-front{transform:translateX(-50%)}
.pk-cat-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:22px 24px 24px}
.pk-cat-title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lead);letter-spacing:-.03em;line-height:1.15}
.pk-cat-text{color:var(--muted);font-size:var(--fs-body);line-height:1.5}
.pk-cat-count{margin-top:auto;padding-top:12px;font-size:var(--fs-small);font-weight:800;color:var(--accent)}
.band-tint .pk-cat-media{background:var(--tint-2)}
@media (hover:hover) and (pointer:fine){
  .pk-cat:hover{transform:translateY(-4px)}
  .pk-cat:hover .pk-cat-b1{transform:translateX(-50%) translateX(-58px) rotate(-13deg)}
  .pk-cat:hover .pk-cat-b2{transform:translateX(-50%) translateX(58px) rotate(13deg)}
  .pk-cat:hover .pk-cat-front{transform:translateX(-50%) translateY(-8px)}
  .pk-cat:hover .pk-cat-title{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}
}

/* ---------- product row ---------- */
.pk-row-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin:0 0 32px}
.pk-row-intro{display:grid;gap:12px;max-width:720px;text-align:left}
.pk-row-intro .lead{margin:0}
.pk-row-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px;white-space:nowrap}
.pk-row-all:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pk-row-arrow{display:inline-flex;transition:transform 200ms var(--ease-out)}
.pk-row-arrow svg{width:1em;height:1em}
@media (hover:hover) and (pointer:fine){
  .pk-row-all:hover{color:var(--accent);text-decoration-thickness:3px}
  .band-ink .pk-row-all:hover,.band-red .pk-row-all:hover{color:var(--accent-soft)}
  .pk-row-all:hover .pk-row-arrow{transform:translateX(3px)}
}
.band-ink .pk-row-all,.band-red .pk-row-all{text-decoration-color:var(--accent-soft)}

.pk-row-cards{justify-content:flex-start}
.pk-row-cards .card{color:var(--ink)}
@media (min-width:640px){.pk-row-cards .card{--cols:2}}
@media (min-width:1100px){.pk-row-cards .card{--cols:4}.pk-row-cards .card-body{padding:20px 20px 22px}}

/* phones: horizontal scroll-snap row */
@media (max-width:639px){
  .pk-row-cards{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);gap:16px;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 12px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .pk-row-cards .card{flex:0 0 min(80%, 320px);scroll-snap-align:start}
  .pk-row-cards .card:focus-within{scroll-snap-align:center}
  .pk-row-head{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .pk-cat,.pk-cat-media .cover,.pk-row-arrow{transition:none}
  .pk-cat:hover,.pk-cat:hover .pk-cat-front{transform:none}
  .pk-cat:hover .pk-cat-front{transform:translateX(-50%)}
}