/* ==========================================================================
   KP Jewelry — design tokens
   Mirrors the reference storefront: white ground, near-black ink, copper
   promo bar, red sale price, wide-tracked uppercase micro-type.
   ========================================================================== */

:root {
  --kpj-ink: #111111;
  --kpj-ink-soft: #444444;
  --kpj-muted: #6b6b6b;
  --kpj-faint: #999999;
  --kpj-rule: #e3e3e3;
  --kpj-rule-soft: #efefef;
  --kpj-bg: #ffffff;
  --kpj-bg-alt: #f7f5f2;
  --kpj-bg-tint: #faf8f6;
  --kpj-copper: #cb8967;
  --kpj-copper-dark: #b3724f;
  --kpj-sale: #c10b0b;
  --kpj-gold: #a98247;
  --kpj-success: #167f4c;

  --kpj-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kpj-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --kpj-max: 1400px;
  --kpj-gutter: 20px;
  --kpj-header-h: 92px;

  --kpj-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--kpj-bg);
  color: var(--kpj-ink);
  font-family: var(--kpj-font);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

hr { border: 0; border-top: 1px solid var(--kpj-rule); margin: 2rem 0; }

::selection { background: var(--kpj-copper); color: #fff; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.kpj-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--kpj-ink); color: #fff; padding: 12px 20px;
}
.kpj-skip-link:focus { left: 8px; top: 8px; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.kpj-container {
  width: 100%;
  max-width: var(--kpj-max);
  margin-inline: auto;
  padding-inline: var(--kpj-gutter);
}

.kpj-container--wide { max-width: 1720px; }
.kpj-container--narrow { max-width: 860px; }

.kpj-section { padding-block: 56px; }
.kpj-section--tight { padding-block: 36px; }
.kpj-section--alt { background: var(--kpj-bg-alt); }

.kpj-section__head {
  text-align: center;
  margin-bottom: 32px;
}

.kpj-section__title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Headline set, rather than the wide-tracked label the other sections use. */
.kpj-section__title--display {
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 12px;
}

.kpj-section__sub {
  color: var(--kpj-muted);
  font-size: 14px;
  max-width: 620px;
  margin-inline: auto;
}

.kpj-eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kpj-muted);
  margin-bottom: 10px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.kpj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 30px;
  border: 1px solid var(--kpj-ink);
  background: var(--kpj-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--kpj-ease), color .2s var(--kpj-ease), border-color .2s var(--kpj-ease);
}
.kpj-btn:hover { background: #000; border-color: #000; color: #fff; }

.kpj-btn--ghost { background: transparent; color: var(--kpj-ink); }
.kpj-btn--ghost:hover { background: var(--kpj-ink); color: #fff; }

.kpj-btn--light { background: #fff; border-color: #fff; color: var(--kpj-ink); }
.kpj-btn--light:hover { background: var(--kpj-ink); border-color: var(--kpj-ink); color: #fff; }

.kpj-btn--outline-light { background: transparent; border-color: #fff; color: #fff; }
.kpj-btn--outline-light:hover { background: #fff; color: var(--kpj-ink); }

.kpj-btn--block { width: 100%; }
.kpj-btn--sm { min-height: 40px; padding: 9px 20px; font-size: 11px; }

.kpj-link-underline {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

/* ==========================================================================
   Promo bar
   ========================================================================== */

.kpj-promo {
  background: var(--kpj-copper);
  color: #fff;
  text-align: center;
  font-size: 13px;
  letter-spacing: .08em;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.kpj-promo__track { position: relative; height: 20px; width: 100%; }

.kpj-promo__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--kpj-ease), transform .5s var(--kpj-ease);
  pointer-events: none;
}
.kpj-promo__item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.kpj-promo__item a { border-bottom: 1px solid rgba(255, 255, 255, .7); }

/* ==========================================================================
   Header
   ========================================================================== */

.kpj-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--kpj-rule);
}

.kpj-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: var(--kpj-header-h);
}

.kpj-header__left { display: flex; align-items: center; gap: 16px; }
.kpj-header__right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

.kpj-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-align: center;
}
.kpj-logo__mark {
  font-family: var(--kpj-serif);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .04em;
}
.kpj-logo__sub {
  font-size: 9px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--kpj-muted);
  margin-top: 4px;
  padding-left: .42em;
}

.kpj-iconbtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kpj-ink);
}
.kpj-iconbtn:hover { color: var(--kpj-copper-dark); }
.kpj-iconbtn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.kpj-iconbtn__label { display: none; }

.kpj-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--kpj-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  display: grid;
  place-items: center;
}
.kpj-badge:empty, .kpj-badge[data-count="0"] { display: none; }

/* Search */
.kpj-search { position: relative; width: 100%; max-width: 320px; }
.kpj-search__form { display: flex; align-items: center; border-bottom: 1px solid var(--kpj-rule); }
.kpj-search__input {
  flex: 1;
  border: 0;
  background: none;
  padding: 10px 4px;
  font-size: 13px;
  letter-spacing: .04em;
  outline: none;
}
.kpj-search__input::placeholder { color: var(--kpj-faint); }
.kpj-search__submit { background: none; border: 0; padding: 6px; cursor: pointer; }
.kpj-search__submit svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.kpj-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.kpj-burger svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ==========================================================================
   Mega menu
   ========================================================================== */

.kpj-nav { border-top: 1px solid var(--kpj-rule-soft); }
.kpj-nav__list {
  display: flex;
  justify-content: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kpj-nav__item { position: static; }

.kpj-nav__link {
  display: block;
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  position: relative;
  white-space: nowrap;
}
.kpj-nav__link::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .25s var(--kpj-ease);
}
.kpj-nav__item:hover > .kpj-nav__link::after,
.kpj-nav__item.is-open > .kpj-nav__link::after { transform: scaleX(1); }

.kpj-nav__item--sale > .kpj-nav__link { color: var(--kpj-sale); }

.kpj-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--kpj-rule);
  border-bottom: 1px solid var(--kpj-rule);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--kpj-ease), transform .2s var(--kpj-ease), visibility .2s;
  z-index: 90;
}
.kpj-nav__item:hover > .kpj-mega,
.kpj-nav__item.is-open > .kpj-mega { opacity: 1; visibility: visible; transform: none; }

.kpj-mega__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 300px;
  gap: 36px;
  padding-block: 34px 40px;
}

.kpj-mega__col > h4,
.kpj-mega__heading {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kpj-ink);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--kpj-rule);
}

.kpj-mega__links { list-style: none; margin: 0; padding: 0; }
.kpj-mega__links li { margin-bottom: 9px; }
.kpj-mega__links a {
  font-size: 13.5px;
  color: var(--kpj-ink-soft);
  transition: color .15s var(--kpj-ease);
}
.kpj-mega__links a:hover { color: var(--kpj-copper-dark); }
.kpj-mega__links a.is-accent { color: var(--kpj-sale); font-weight: 500; }

.kpj-mega__feature { display: block; }
.kpj-mega__feature-img {
  aspect-ratio: 27 / 30;
  overflow: hidden;
  background: var(--kpj-bg-alt);
  margin-bottom: 12px;
}
.kpj-mega__feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--kpj-ease); }
.kpj-mega__feature:hover .kpj-mega__feature-img img { transform: scale(1.04); }
.kpj-mega__feature-title {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.kpj-mega__feature-sub { font-size: 13px; color: var(--kpj-muted); }

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.kpj-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(90vw, 380px);
  background: #fff;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform .3s var(--kpj-ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.kpj-drawer.is-open { transform: none; }

.kpj-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--kpj-rule);
}
.kpj-drawer__close { background: none; border: 0; padding: 6px; cursor: pointer; }
.kpj-drawer__close svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.kpj-drawer__list { list-style: none; margin: 0; padding: 0; }
.kpj-drawer__list li { border-bottom: 1px solid var(--kpj-rule-soft); }
.kpj-drawer__list > li > a,
.kpj-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 20px;
  background: none;
  border: 0;
  text-align: left;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.kpj-drawer__toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; transition: transform .2s var(--kpj-ease); }
.kpj-drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.kpj-drawer__panel { display: none; background: var(--kpj-bg-tint); padding: 6px 0 14px; }
.kpj-drawer__panel.is-open { display: block; }
.kpj-drawer__panel h4 {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kpj-muted);
  margin: 14px 20px 6px;
}
.kpj-drawer__panel ul { list-style: none; margin: 0; padding: 0; }
.kpj-drawer__panel li { border: 0; }
.kpj-drawer__panel a { display: block; padding: 8px 20px; font-size: 14px; color: var(--kpj-ink-soft); }

.kpj-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--kpj-ease), visibility .3s;
  z-index: 150;
}
.kpj-overlay.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   Campaign banners

   The artwork carries its own headline and call to action, so the banner is a
   bare linked image shown at its native proportions — cropping it to a fixed
   band would cut the lockup the designer placed in the frame.
   ========================================================================== */

.kpj-banner { display: block; background: var(--kpj-bg-alt); }
.kpj-banner img { width: 100%; height: auto; }

/* ==========================================================================
   Service strip
   ========================================================================== */

.kpj-strip { background: var(--kpj-bg-tint); border-block: 1px solid var(--kpj-rule); }
.kpj-strip__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--kpj-max);
  margin-inline: auto;
  padding: 18px var(--kpj-gutter);
  text-align: center;
}
.kpj-strip__item { position: relative; }
.kpj-strip__item a { display: block; padding: 0 20px; transition: opacity .2s var(--kpj-ease); }
.kpj-strip__item a:hover { opacity: .72; }
.kpj-strip__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10%; right: 0;
  width: 1px; height: 80%;
  background: var(--kpj-rule);
}
.kpj-strip h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
}
.kpj-strip p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--kpj-muted); }

/* ==========================================================================
   Editorial tiles
   ========================================================================== */

.kpj-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Category and brand tiles are captioned in the artwork itself. */
.kpj-tile,
.kpj-brandtile { display: block; overflow: hidden; background: var(--kpj-bg-alt); }
.kpj-tile img,
.kpj-brandtile img { width: 100%; aspect-ratio: 760 / 600; object-fit: cover; transition: transform .6s var(--kpj-ease); }
.kpj-tile:hover img,
.kpj-brandtile:hover img { transform: scale(1.05); }

/* ==========================================================================
   Merchandising block (image beside centred copy)
   ========================================================================== */

.kpj-merch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.kpj-merch__media { display: block; overflow: hidden; background: var(--kpj-bg-alt); }
.kpj-merch__media img { width: 100%; transition: transform .6s var(--kpj-ease); }
.kpj-merch__media:hover img { transform: scale(1.03); }
.kpj-merch__copy { max-width: 420px; margin-inline: auto; text-align: center; }
.kpj-merch__title {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.kpj-merch__copy p { color: var(--kpj-ink-soft); margin-bottom: 26px; }

/* ==========================================================================
   Split promo (New in jewellery / watches)
   ========================================================================== */

.kpj-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kpj-split__card { text-align: center; }
.kpj-split__media { display: block; overflow: hidden; background: var(--kpj-bg-alt); }
.kpj-split__media img { width: 100%; aspect-ratio: 1328 / 900; object-fit: cover; transition: transform .6s var(--kpj-ease); }
.kpj-split__media:hover img { transform: scale(1.04); }
.kpj-split__title {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 24px 0 10px;
}

/* ==========================================================================
   Service cards
   ========================================================================== */

.kpj-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kpj-service { display: block; }
.kpj-service__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kpj-bg-alt); margin-bottom: 16px; }
.kpj-service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--kpj-ease); }
.kpj-service:hover .kpj-service__media img { transform: scale(1.05); }
.kpj-service__title {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kpj-service__text { font-size: 13.5px; color: var(--kpj-muted); margin-bottom: 12px; }

/* In the homepage carousel the cards are centred and the headings set larger,
   matching the reference storefront. The journal listing reuses the plain
   variant above. */
.kpj-rail--tiles .kpj-service { text-align: center; }
.kpj-rail--tiles .kpj-service__title {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 10px;
}
.kpj-rail--tiles .kpj-service__text { padding-inline: 10px; }

/* ==========================================================================
   Brand logo grid
   ========================================================================== */

.kpj-logos-band { background: var(--kpj-bg-alt); padding: 52px 20px; }
.kpj-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 52px 50px;
  max-width: 1200px;
  margin-inline: auto;
}
.kpj-logos__item {
  flex: 0 0 calc(25% - 38px);
  max-width: calc(25% - 38px);
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpj-logos__item img {
  width: auto;
  max-width: 200px;
  max-height: 70px;
  object-fit: contain;
  transition: opacity .25s var(--kpj-ease), transform .25s var(--kpj-ease);
}
.kpj-logos__item:hover img { opacity: .75; transform: translateY(-2px); }
.kpj-logos__cta { text-align: center; margin: 48px 0 0; }

/* ==========================================================================
   Product card
   ========================================================================== */

.kpj-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kpj-products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kpj-card { position: relative; display: flex; flex-direction: column; }

.kpj-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--kpj-bg-tint);
  overflow: hidden;
  margin-bottom: 14px;
}
.kpj-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  transition: opacity .35s var(--kpj-ease);
}
.kpj-card__media img.kpj-card__img--alt { opacity: 0; }
.kpj-card:hover .kpj-card__media img.kpj-card__img--alt { opacity: 1; }
.kpj-card:hover .kpj-card__media img.kpj-card__img--main { opacity: 0; }

.kpj-card__badges {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.kpj-badge-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--kpj-ink);
  color: #fff;
}
.kpj-badge-pill--sale { background: var(--kpj-sale); }
.kpj-badge-pill--new { background: var(--kpj-copper); }
.kpj-badge-pill--light { background: #fff; color: var(--kpj-ink); border: 1px solid var(--kpj-rule); }

.kpj-card__wish {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .9);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s var(--kpj-ease), background .2s var(--kpj-ease);
}
.kpj-card:hover .kpj-card__wish, .kpj-card__wish.is-active { opacity: 1; }
.kpj-card__wish svg { width: 17px; height: 17px; stroke: var(--kpj-ink); fill: none; stroke-width: 1.5; }
.kpj-card__wish.is-active svg { fill: var(--kpj-sale); stroke: var(--kpj-sale); }

.kpj-card__brand {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kpj-muted);
  margin-bottom: 5px;
}
.kpj-card__title {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0 0 8px;
  color: var(--kpj-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kpj-card__price { font-size: 14px; font-weight: 600; color: var(--kpj-ink); margin-top: auto; }
.kpj-card__price del { color: var(--kpj-faint); font-weight: 400; margin-right: 8px; text-decoration: line-through; }
.kpj-card__price ins { text-decoration: none; color: var(--kpj-sale); }

.kpj-card__cta {
  margin-top: 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s var(--kpj-ease), transform .2s var(--kpj-ease);
}
.kpj-card:hover .kpj-card__cta { opacity: 1; transform: none; }

/* Carousel rail */
.kpj-rail { position: relative; }
.kpj-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.kpj-rail__track::-webkit-scrollbar { display: none; }
.kpj-rail__track > * { scroll-snap-align: start; }

/* Campaign tiles are wider than a product card: five to a screen on desktop. */
.kpj-rail--tiles .kpj-rail__track { grid-auto-columns: minmax(300px, 1fr); }

.kpj-rail__nav {
  position: absolute;
  top: 32%;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--kpj-rule);
  border-radius: 50%;
  cursor: pointer;
  z-index: 4;
  transition: background .2s var(--kpj-ease), color .2s var(--kpj-ease);
}
.kpj-rail__nav:hover { background: var(--kpj-ink); color: #fff; border-color: var(--kpj-ink); }
.kpj-rail__nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.kpj-rail__nav--prev { left: -18px; }
.kpj-rail__nav--next { right: -18px; }
.kpj-rail__nav[disabled] { opacity: .25; pointer-events: none; }

/* ==========================================================================
   USP bar / trust
   ========================================================================== */

.kpj-usp { border-block: 1px solid var(--kpj-rule); background: var(--kpj-bg-tint); }
.kpj-usp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-block: 28px;
}
.kpj-usp__item { display: flex; gap: 14px; align-items: flex-start; justify-content: center; text-align: left; }
.kpj-usp__item svg { width: 26px; height: 26px; stroke: var(--kpj-copper-dark); fill: none; stroke-width: 1.3; flex: 0 0 auto; }
.kpj-usp__title {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.kpj-usp__text { font-size: 12.5px; color: var(--kpj-muted); }

/* ==========================================================================
   Newsletter
   ========================================================================== */

.kpj-newsletter { background: var(--kpj-bg-alt); }
.kpj-newsletter__inner { max-width: 660px; margin-inline: auto; text-align: center; padding-block: 56px; }
.kpj-newsletter__form { display: flex; gap: 10px; margin-top: 22px; }
.kpj-newsletter__input {
  flex: 1;
  border: 1px solid var(--kpj-rule);
  background: #fff;
  padding: 13px 16px;
  font-size: 14px;
  outline: none;
}
.kpj-newsletter__input:focus { border-color: var(--kpj-ink); }
.kpj-newsletter__note { font-size: 11.5px; color: var(--kpj-muted); margin-top: 14px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.kpj-footer { background: #fff; border-top: 1px solid var(--kpj-rule); }

.kpj-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.3fr;
  gap: 34px;
  padding-block: 54px 40px;
}

.kpj-footer__title {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.kpj-footer__list { list-style: none; margin: 0; padding: 0; }
.kpj-footer__list li { margin-bottom: 9px; }
.kpj-footer__list a { font-size: 13.5px; color: var(--kpj-muted); }
.kpj-footer__list a:hover { color: var(--kpj-ink); }

.kpj-footer__store address { font-style: normal; font-size: 13.5px; color: var(--kpj-muted); line-height: 1.75; }
.kpj-footer__store strong { color: var(--kpj-ink); font-weight: 500; }

.kpj-social { display: flex; gap: 10px; margin-top: 18px; }
.kpj-social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--kpj-rule);
  border-radius: 50%;
  transition: background .2s var(--kpj-ease), color .2s var(--kpj-ease), border-color .2s var(--kpj-ease);
}
.kpj-social a:hover { background: var(--kpj-ink); color: #fff; border-color: var(--kpj-ink); }
.kpj-social svg { width: 16px; height: 16px; fill: currentColor; }

.kpj-footer__bottom {
  border-top: 1px solid var(--kpj-rule);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  color: var(--kpj-muted);
}
.kpj-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }
.kpj-pay { display: flex; gap: 8px; align-items: center; }
.kpj-pay span {
  border: 1px solid var(--kpj-rule);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--kpj-ink-soft);
  background: #fff;
}

/* ==========================================================================
   Breadcrumb / page head
   ========================================================================== */

.kpj-breadcrumb {
  font-size: 12px;
  color: var(--kpj-muted);
  padding-block: 16px;
}
.kpj-breadcrumb a { color: var(--kpj-muted); }
.kpj-breadcrumb a:hover { color: var(--kpj-ink); text-decoration: underline; }
.kpj-breadcrumb .sep { margin-inline: 8px; color: var(--kpj-rule); }

.kpj-pagehead { text-align: center; padding-block: 20px 30px; }
.kpj-pagehead__title {
  font-family: var(--kpj-serif);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 400;
  margin-bottom: 10px;
}
.kpj-pagehead__desc { max-width: 660px; margin-inline: auto; color: var(--kpj-muted); font-size: 14.5px; }
.kpj-pagehead__count { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--kpj-faint); margin-top: 10px; }

/* ==========================================================================
   Shop layout: filters + grid
   ========================================================================== */

.kpj-shop { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; padding-bottom: 70px; }

.kpj-filters { position: sticky; top: calc(var(--kpj-header-h) + 60px); }
.kpj-facet { border-bottom: 1px solid var(--kpj-rule); padding-block: 18px; }
.kpj-facet:first-child { padding-top: 0; }
.kpj-facet__title {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.kpj-facet ul { list-style: none; margin: 0; padding: 0; }
.kpj-facet li { margin-bottom: 8px; }
.kpj-facet a { font-size: 13.5px; color: var(--kpj-ink-soft); display: flex; justify-content: space-between; gap: 10px; }
.kpj-facet a:hover { color: var(--kpj-copper-dark); }
.kpj-facet .count { color: var(--kpj-faint); font-size: 12px; }
.kpj-facet li.current-cat > a, .kpj-facet li.chosen > a { font-weight: 600; color: var(--kpj-ink); }

.kpj-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  border-block: 1px solid var(--kpj-rule);
  margin-bottom: 28px;
}
.kpj-toolbar__count { font-size: 12.5px; color: var(--kpj-muted); }
.kpj-toolbar__right { display: flex; align-items: center; gap: 14px; }
.kpj-toolbar select {
  border: 1px solid var(--kpj-rule);
  background: #fff;
  padding: 9px 30px 9px 12px;
  font-size: 12.5px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23444' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.kpj-filter-toggle { display: none; }

/* Pagination */
.kpj-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 48px; }
.kpj-pagination .page-numbers {
  min-width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--kpj-rule);
  font-size: 13px;
  padding-inline: 12px;
  transition: background .2s var(--kpj-ease), color .2s var(--kpj-ease), border-color .2s var(--kpj-ease);
}
.kpj-pagination .page-numbers:hover { border-color: var(--kpj-ink); }
.kpj-pagination .page-numbers.current { background: var(--kpj-ink); color: #fff; border-color: var(--kpj-ink); }
.kpj-pagination .page-numbers.dots { border-color: transparent; }

/* ==========================================================================
   Product detail
   ========================================================================== */

.kpj-pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 60px; padding-block: 26px 70px; align-items: start; }

.kpj-gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
.kpj-gallery__thumbs { display: flex; flex-direction: column; gap: 10px; }
.kpj-gallery__thumb {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--kpj-rule);
  background: var(--kpj-bg-tint);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.kpj-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.kpj-gallery__thumb.is-active { border-color: var(--kpj-ink); }
.kpj-gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--kpj-bg-tint);
  overflow: hidden;
}
.kpj-gallery__stage img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }

.kpj-pdp__brand { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--kpj-muted); margin-bottom: 10px; }
.kpj-pdp__title { font-family: var(--kpj-serif); font-size: clamp(26px, 2.6vw, 36px); font-weight: 400; line-height: 1.18; margin-bottom: 10px; }
.kpj-pdp__sku { font-size: 12px; color: var(--kpj-faint); margin-bottom: 18px; }

.kpj-pdp__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.kpj-pdp__price .amount { font-size: 26px; font-weight: 600; }
.kpj-pdp__price del { color: var(--kpj-faint); font-size: 17px; text-decoration: line-through; }
.kpj-pdp__price del .amount { font-size: 17px; font-weight: 400; }
.kpj-pdp__price ins { text-decoration: none; }
.kpj-pdp__price ins .amount { color: var(--kpj-sale); }
.kpj-pdp__saving { font-size: 12.5px; color: var(--kpj-sale); font-weight: 500; margin-bottom: 18px; }

.kpj-pdp__stock { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 20px; }
.kpj-pdp__stock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kpj-success); }
.kpj-pdp__stock.is-out .dot { background: var(--kpj-faint); }

.kpj-pdp__form { border-top: 1px solid var(--kpj-rule); padding-top: 22px; margin-bottom: 22px; }
.kpj-pdp__row { display: flex; gap: 12px; align-items: stretch; margin-bottom: 12px; }

.kpj-qty { display: inline-flex; align-items: center; border: 1px solid var(--kpj-rule); }
.kpj-qty button { width: 42px; height: 48px; background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1; }
.kpj-qty input { width: 46px; height: 48px; border: 0; text-align: center; font-size: 14px; outline: none; -moz-appearance: textfield; }
.kpj-qty input::-webkit-outer-spin-button, .kpj-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.kpj-pdp__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kpj-pdp__usps li { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--kpj-ink-soft); }
.kpj-pdp__usps svg { width: 19px; height: 19px; stroke: var(--kpj-copper-dark); fill: none; stroke-width: 1.4; flex: 0 0 auto; margin-top: 1px; }

.kpj-accordion { border-top: 1px solid var(--kpj-rule); margin-top: 26px; }
.kpj-accordion__item { border-bottom: 1px solid var(--kpj-rule); }
.kpj-accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.kpj-accordion__btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; transition: transform .25s var(--kpj-ease); }
.kpj-accordion__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.kpj-accordion__panel { display: none; padding-bottom: 20px; font-size: 14px; color: var(--kpj-ink-soft); }
.kpj-accordion__panel.is-open { display: block; }
.kpj-accordion__panel table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kpj-accordion__panel th, .kpj-accordion__panel td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--kpj-rule-soft); vertical-align: top; }
.kpj-accordion__panel th { width: 40%; font-weight: 500; color: var(--kpj-muted); }

/* ==========================================================================
   Cart / checkout / account — WooCommerce surface polish
   ========================================================================== */

.kpj-woo-page { padding-block: 20px 70px; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  border: 1px solid var(--kpj-rule);
  border-left: 3px solid var(--kpj-copper);
  background: var(--kpj-bg-tint);
  padding: 14px 18px;
  margin: 0 0 24px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.woocommerce-error { border-left-color: var(--kpj-sale); }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.woocommerce table.shop_table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 12px;
  border-bottom: 1px solid var(--kpj-ink);
  font-weight: 500;
}
.woocommerce table.shop_table td { padding: 18px 12px; border-bottom: 1px solid var(--kpj-rule); vertical-align: middle; }
.woocommerce table.shop_table img { width: 74px; }

.kpj-cart { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.kpj-cart__totals { border: 1px solid var(--kpj-rule); padding: 26px; background: var(--kpj-bg-tint); position: sticky; top: calc(var(--kpj-header-h) + 20px); }
.kpj-cart__totals h2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }

.woocommerce .quantity input.qty {
  width: 64px; height: 42px;
  border: 1px solid var(--kpj-rule);
  text-align: center;
  font-size: 14px;
}

.woocommerce form .form-row { display: flex; flex-direction: column; margin-bottom: 16px; }
.woocommerce form .form-row label { font-size: 12px; letter-spacing: .06em; margin-bottom: 6px; color: var(--kpj-ink-soft); }
.woocommerce form .form-row .required { color: var(--kpj-sale); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
  border: 1px solid var(--kpj-rule);
  background: #fff;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  width: 100%;
  height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--kpj-ink); }

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 30px;
  border: 1px solid var(--kpj-ink);
  border-radius: 0;
  background: var(--kpj-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--kpj-ease), color .2s var(--kpj-ease);
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover { background: #000; color: #fff; }

.woocommerce .button.alt, .woocommerce button.button.alt { background: var(--kpj-ink); }
.woocommerce a.button.wc-backward { background: #fff; color: var(--kpj-ink); }
.woocommerce a.button.wc-backward:hover { background: var(--kpj-ink); color: #fff; }

.woocommerce-checkout #payment { background: var(--kpj-bg-tint); border: 1px solid var(--kpj-rule); padding: 24px; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 18px; padding: 0; }
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 12px; font-size: 14px; }
.woocommerce-checkout #payment div.payment_box { font-size: 13px; color: var(--kpj-muted); padding: 10px 0 0 24px; }

.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }

/* Logged out there is no account navigation to fill the first column, so
   WooCommerce's "Login" heading lands in it, stranded to the left of the form.
   The page title already names the page, so the heading goes and everything
   else spans the full width. */
.woocommerce-account .woocommerce > h2 { display: none; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account .woocommerce > .u-columns { grid-column: 1 / -1; }

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--kpj-rule); }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--kpj-rule); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 14px 18px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--kpj-ink); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--kpj-bg-tint); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover { background: var(--kpj-ink); }

.kpj-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; max-width: 980px; margin-inline: auto; }
.kpj-auth__col { border: 1px solid var(--kpj-rule); padding: 32px; }

/* Cross-sells / related */
.kpj-related { border-top: 1px solid var(--kpj-rule); padding-block: 56px; }

/* ==========================================================================
   Editorial / static pages
   ========================================================================== */

.kpj-page { padding-block: 10px 70px; }
.kpj-prose { font-size: 15.5px; line-height: 1.78; color: var(--kpj-ink-soft); }
.kpj-prose h2 { font-size: 22px; margin-top: 2em; color: var(--kpj-ink); }
.kpj-prose h3 { font-size: 17px; margin-top: 1.6em; color: var(--kpj-ink); }
.kpj-prose ul, .kpj-prose ol { padding-left: 1.3em; margin-bottom: 1.3em; }
.kpj-prose li { margin-bottom: .5em; }
.kpj-prose a { color: var(--kpj-copper-dark); text-decoration: underline; text-underline-offset: 3px; }
.kpj-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.6em; font-size: 14px; }
.kpj-prose th, .kpj-prose td { border: 1px solid var(--kpj-rule); padding: 11px 14px; text-align: left; }
.kpj-prose th { background: var(--kpj-bg-tint); font-weight: 500; }
.kpj-prose blockquote {
  border-left: 3px solid var(--kpj-copper);
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  font-family: var(--kpj-serif);
  font-size: 20px;
  color: var(--kpj-ink);
}

.kpj-page-hero { position: relative; background: var(--kpj-bg-alt); }
.kpj-page-hero__media { aspect-ratio: 1920 / 420; }
.kpj-page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.kpj-page-hero__inner { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; }
.kpj-page-hero__title { font-family: var(--kpj-serif); font-size: clamp(30px, 3.6vw, 50px); font-weight: 400; }

/* FAQ accordion on service pages */
.kpj-faq { max-width: 820px; margin-inline: auto; }

/* Store card */
.kpj-store-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.kpj-store-card__media { aspect-ratio: 4 / 3; background: var(--kpj-bg-alt); overflow: hidden; }
.kpj-store-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Wishlist grid reuses product cards */
.kpj-empty { text-align: center; padding-block: 70px; }
.kpj-empty__title { font-family: var(--kpj-serif); font-size: 28px; margin-bottom: 10px; }
.kpj-empty__text { color: var(--kpj-muted); margin-bottom: 24px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
  .kpj-mega__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpj-mega__feature { display: none; }
  .kpj-nav__link { padding: 14px 12px; font-size: 11.5px; }
}

@media (max-width: 1024px) {
  :root { --kpj-header-h: 72px; }

  .kpj-burger { display: inline-flex; }
  .kpj-nav { display: none; }
  .kpj-header__bar { grid-template-columns: auto 1fr auto; }
  .kpj-header__left .kpj-search { display: none; }

  .kpj-shop { grid-template-columns: 1fr; gap: 0; }
  .kpj-filters {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(90vw, 340px);
    background: #fff;
    z-index: 200;
    padding: 20px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .3s var(--kpj-ease);
  }
  .kpj-filters.is-open { transform: none; }
  .kpj-filter-toggle { display: inline-flex; }

  .kpj-pdp { grid-template-columns: 1fr; gap: 36px; }
  .kpj-cart { grid-template-columns: 1fr; }
  .kpj-cart__totals { position: static; }
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }

  .kpj-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .kpj-services { grid-template-columns: repeat(2, 1fr); }
  .kpj-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .kpj-merch { gap: 28px; }
  .kpj-logos__item { flex-basis: calc(33.333% - 34px); max-width: calc(33.333% - 34px); }
}

@media (max-width: 780px) {
  .kpj-section { padding-block: 40px; }
  .kpj-tiles { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .kpj-split { grid-template-columns: 1fr; }
  .kpj-usp__grid { grid-template-columns: 1fr; gap: 18px; }
  .kpj-usp__item { justify-content: flex-start; }
  .kpj-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .kpj-gallery { grid-template-columns: 1fr; }
  .kpj-gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .kpj-gallery__thumb { flex: 0 0 70px; }
  .kpj-merch { grid-template-columns: 1fr; gap: 20px; }
  .kpj-strip__track { grid-template-columns: 1fr; gap: 18px; }
  .kpj-strip__item:not(:last-child)::after { display: none; }
  .kpj-logos-band { padding: 32px 16px; }
  .kpj-logos { gap: 30px 18px; }
  .kpj-logos__item { flex-basis: calc(50% - 9px); max-width: calc(50% - 9px); min-height: 56px; }
  .kpj-logos__item img { max-width: 100%; max-height: 52px; }
  .kpj-rail--tiles .kpj-rail__track { grid-auto-columns: minmax(220px, 1fr); }
  .kpj-newsletter__form { flex-direction: column; }
  .kpj-store-card { grid-template-columns: 1fr; }
  .kpj-auth { grid-template-columns: 1fr; gap: 26px; }
  .kpj-footer__grid { grid-template-columns: 1fr; gap: 26px; padding-block: 36px 26px; }
  .kpj-toolbar { flex-wrap: wrap; }
  .kpj-rail__nav { display: none; }
  .woocommerce table.shop_table th { display: none; }
  .woocommerce table.shop_table td { display: block; text-align: right; border: 0; padding: 8px 0; }
  .woocommerce table.shop_table tr { display: block; border-bottom: 1px solid var(--kpj-rule); padding-block: 14px; }
  .woocommerce table.shop_table td::before { content: attr(data-title); float: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--kpj-muted); }
  .woocommerce table.shop_table td.product-thumbnail::before { display: none; }
  .woocommerce table.shop_table img { margin-left: auto; }
}

@media (max-width: 480px) {
  .kpj-products { gap: 20px 10px; }
  .kpj-logo__mark { font-size: 26px; }
  .kpj-logo__sub { font-size: 8px; letter-spacing: .3em; }
}

@media print {
  .kpj-header, .kpj-footer, .kpj-promo, .kpj-usp { display: none; }
}

/* ==========================================================================
   WooCommerce page layouts (cart / checkout / account)
   ========================================================================== */

.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  align-items: start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; min-width: 0; }
.woocommerce-cart .cart-collaterals { grid-column: 2; }
.woocommerce-cart .cart-collaterals .cart_totals {
  border: 1px solid var(--kpj-rule);
  background: var(--kpj-bg-tint);
  padding: 30px;
  position: sticky;
  top: calc(var(--kpj-header-h) + 20px);
}
.woocommerce-cart .cart_totals h2 {
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.woocommerce-cart .cart-collaterals .cart_totals table { width: 100%; border-collapse: collapse; font-size: 15px; }
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td { padding: 12px 16px; border-bottom: 1px solid var(--kpj-rule); text-align: left; }
.woocommerce-cart .cart-collaterals .cart_totals table th { font-weight: 400; color: var(--kpj-muted); }

.woocommerce-cart .cart-collaterals .cart_totals table td { text-align: right; font-weight: 500; }
.woocommerce-cart .cart_totals .order-total th { color: var(--kpj-ink); }
.woocommerce-cart .cart_totals .order-total td { font-size: 21px; font-weight: 600; }
.woocommerce-cart .wc-proceed-to-checkout { margin-top: 20px; }
.woocommerce-cart .wc-proceed-to-checkout .button { width: 100%; }
.woocommerce-cart .coupon { display: flex; gap: 8px; margin-bottom: 18px; }
.woocommerce-cart .coupon input.input-text {
  flex: 1;
  border: 1px solid var(--kpj-rule);
  padding: 12px 14px;
  font-size: 14px;
}
.woocommerce-cart td.product-remove a.remove {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--kpj-bg-alt);
  color: var(--kpj-muted);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}
.woocommerce-cart td.product-remove a.remove:hover { background: var(--kpj-sale); color: #fff; }
.woocommerce-cart td.product-name a { font-size: 14px; }
.woocommerce-cart .actions { padding-top: 20px; }

.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}
.woocommerce-checkout form.checkout .col2-set { grid-column: 1; display: grid; gap: 28px; }

/* Billing and shipping stack down the left column. WooCommerce sizes both at
   47% for its own side-by-side float layout, which leaves each one half-empty
   once they are grid rows instead, and its clearfix pseudo-elements become
   grid items of their own — an empty first row that drops the billing heading
   a gap's worth below the order review beside it. */
.woocommerce-checkout form.checkout .col2-set > .col-1,
.woocommerce-checkout form.checkout .col2-set > .col-2 { float: none; width: 100%; }
.woocommerce-checkout form.checkout .col2-set::before,
.woocommerce-checkout form.checkout .col2-set::after { display: none; }

/* The heading and the review are wrapped into one panel by the theme (see
   kpj_checkout_review_open) so they share a grid cell; as two separate items
   the review is pushed into the row below the whole billing form. A validation
   notice, which the checkout script prepends to the form, spans both columns. */
.woocommerce-checkout form.checkout > .kpj-checkout__review { grid-column: 2; }
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.woocommerce-checkout form.checkout #order_review_heading {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.woocommerce-checkout #order_review {
  border: 1px solid var(--kpj-rule);
  background: var(--kpj-bg-tint);
  padding: 26px;
}
.woocommerce-checkout #order_review table.shop_table { margin-bottom: 20px; }
.woocommerce-checkout #order_review .order-total td { font-size: 17px; font-weight: 600; }
.woocommerce-checkout h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
.woocommerce-checkout .form-row-wide { grid-column: 1 / -1; }

/* Woo floats .form-row-first and .form-row-last at 47% for its own two-up
   layout. The grid above already gives them half a row each, so that width
   applies a second time and the field ends up a third of the width of the
   label above it. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row { float: none; width: 100%; }

.woocommerce-checkout #place_order { width: 100%; margin-top: 8px; }

.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register { border: 1px solid var(--kpj-rule); padding: 30px; }
.woocommerce-account .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.woocommerce-form-login__rememberme { flex-direction: row; align-items: center; gap: 8px; }

.woocommerce .woocommerce-ordering select { min-width: 190px; }
.woocommerce-checkout-review-order-table tfoot th { border-bottom: 1px solid var(--kpj-rule); }

@media (max-width: 1024px) {
  .woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals { grid-column: 1; }
  .woocommerce-cart .cart-collaterals .cart_totals { position: static; }
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout form.checkout .col2-set,
  .woocommerce-checkout form.checkout > .kpj-checkout__review { grid-column: 1; }
  .woocommerce-account .u-columns { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Inline-element corrections
   Card internals are <span>s nested inside a single wrapping <a>, so they need
   explicit block display to stack rather than run together as inline text.
   ========================================================================== */

.kpj-tile__media,
.kpj-tile__title,
.kpj-service__media,
.kpj-service__title,
.kpj-service__text,
.kpj-split__media,
.kpj-split__title,
.kpj-mega__feature-img,
.kpj-mega__feature-title,
.kpj-mega__feature-sub { display: block; }

.kpj-link-underline { display: inline-block; }

.kpj-split__body .kpj-btn { display: inline-flex; }

/* Campaign band: the artwork is product photography on a bright ground, so the
   white headline needs its own scrim rather than relying on the image. */
.kpj-campaign__media { position: relative; }
.kpj-campaign__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .52) 100%);
}
.kpj-campaign__inner { z-index: 2; }
.kpj-campaign__inner .kpj-hero__eyebrow,
.kpj-campaign__inner p { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }

/* Hero artwork is a macro crop; anchor it so the subject stays in frame. */
.kpj-hero__media img,
.kpj-campaign__media img { object-position: center 42%; }

/* Editorial tiles: source photography has inconsistent backgrounds, so sit
   every piece on the same tint instead of cropping edge to edge. */
.kpj-tile__media,
.kpj-service__media,
.kpj-mega__feature-img { background: var(--kpj-bg-tint); }
.kpj-tile__media img,
.kpj-service__media img { object-fit: cover; }

/* Touch devices have no hover, so the wishlist control must always be visible. */
@media (hover: none) {
  .kpj-card__wish { opacity: 1; }
  .kpj-card__cta { opacity: 1; transform: none; }
}

/* ==========================================================================
   Small-screen overflow containment

   Grid and flex children default to min-width:auto, so long unbreakable
   strings (the tracked-out logo lockup, promo copy) can push the whole page
   wider than the viewport. Constrain them explicitly.
   ========================================================================== */

html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

.kpj-header__bar > *,
.kpj-usp__item > *,
.kpj-footer__bottom > * { min-width: 0; }

.kpj-logo { max-width: 100%; }
.kpj-logo__mark,
.kpj-logo__sub { max-width: 100%; overflow-wrap: anywhere; }

.kpj-promo__item { padding-inline: 12px; }
.kpj-promo__item span,
.kpj-promo__item a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

@media (max-width: 1024px) {
  .kpj-header__bar { gap: 8px; }
  .kpj-iconbtn { padding: 8px 6px; }
}

@media (max-width: 560px) {
  :root { --kpj-gutter: 16px; }

  .kpj-promo { font-size: 12px; letter-spacing: .04em; }
  .kpj-logo__mark { font-size: 23px; }
  .kpj-logo__sub { font-size: 7.5px; letter-spacing: .2em; padding-left: .2em; }
  .kpj-iconbtn { padding: 8px 5px; }
  .kpj-iconbtn svg { width: 19px; height: 19px; }
  .kpj-badge { min-width: 15px; height: 15px; font-size: 9px; }

  .kpj-hero__title { font-size: clamp(28px, 9vw, 40px); }
  .kpj-hero__text { font-size: 14px; }
  .kpj-hero__actions { flex-direction: column; align-items: stretch; }

  .kpj-tile__title { font-size: 11.5px; letter-spacing: .1em; }
  .kpj-section__title { font-size: 18px; letter-spacing: .12em; }
  .kpj-pagehead__title { font-size: 28px; }

  .kpj-footer__bottom { flex-direction: column; align-items: flex-start; }
  .kpj-pay { flex-wrap: wrap; }
}

/* ==========================================================================
   WooCommerce core stylesheet overrides

   Core decorates notices with an icon-font pseudo-element positioned for its
   own layout. The theme styles notices itself (copper rule, flex row), so the
   pseudo-elements are removed rather than left to render as tofu.
   ========================================================================== */

.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-message::before,
.woocommerce-message::after,
.woocommerce-error::before,
.woocommerce-error::after,
.woocommerce-noreviews::before,
.woocommerce p.no-comments::before { content: none !important; display: none !important; }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error { padding-left: 18px !important; }

/* Core floats the "Return to shop" style buttons; the theme's notices are flex. */
.woocommerce-info .button,
.woocommerce-message .button { float: none; }

/* Core's own grid fights the theme's product grid on shortcode-rendered pages. */
.woocommerce .kpj-products { display: grid !important; float: none; }
.woocommerce ul.products { margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/* WooCommerce shortcode loops ([products], related, cross-sells) reuse the
   theme card via woocommerce/content-product.php, so give ul.products the same
   grid as .kpj-products and strip core's float/clearfix scaffolding. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  clear: none;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { content: none; }

/* Core badge and button markup is not emitted by the theme card; hide any that
   a third party re-introduces so tiles stay consistent. */
.woocommerce ul.products li.product > span.onsale,
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product > .woocommerce-loop-product__title,
.woocommerce ul.products li.product > .price { display: none; }

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
}


/* ==========================================================================
   Hero — full-bleed campaign banner

   The artwork is purpose-shot for a wide crop, so it letterboxes cleanly. A
   left-weighted scrim keeps the overlaid copy legible without dulling the
   product, which sits right of centre in these compositions.
   ========================================================================== */

.kpj-hero { position: relative; background: var(--kpj-bg-alt); }

.kpj-hero__media {
  position: relative;
  aspect-ratio: 1920 / 533;
  min-height: 340px;
  overflow: hidden;
}
.kpj-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.kpj-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .30) 38%, rgba(0, 0, 0, 0) 66%);
}

.kpj-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
}

.kpj-hero__copy { max-width: 520px; color: #fff; }

.kpj-hero__eyebrow {
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: .92;
  color: #fff;
}

.kpj-hero__title {
  font-family: var(--kpj-serif);
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.06;
  margin-bottom: 16px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}

.kpj-hero__text {
  font-size: 15.5px;
  line-height: 1.65;
  margin-bottom: 26px;
  color: #fff;
  opacity: .95;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .3);
}

.kpj-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .kpj-hero__media { aspect-ratio: 4 / 5; min-height: 0; }
  .kpj-hero__media img { object-position: center 30%; }
  .kpj-hero__media::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .12) 28%, rgba(0, 0, 0, .68) 100%);
  }
  .kpj-hero__inner { align-items: flex-end; padding-bottom: 40px; }
  .kpj-hero__copy { max-width: 100%; text-align: center; }
  .kpj-hero__actions { justify-content: center; }
  .kpj-hero__title { font-size: clamp(30px, 8.5vw, 44px); }
}

/* ==========================================================================
   Cart: corrections to WooCommerce's own layout defaults

   These override rules from woocommerce-layout.css / woocommerce.css that
   assume Woo's stock full-width cart. They sit last in the file so that, where
   specificity ties with a Woo selector, source order settles it.
   ========================================================================== */

/* Woo floats .cart_totals at `width: 48%` — sized for a full-width collaterals
   row. Inside our 360px sidebar column that collapsed the panel to ~170px and
   broke the shipping options to roughly one word per line. Our own rule styled
   the panel but never declared a width, so Woo's default stood. */
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
}

.woocommerce-cart .cart_totals ul#shipping_method { list-style: none; margin: 0; padding: 0; }
.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0 0 8px; }
.woocommerce-cart .cart_totals ul#shipping_method label { font-weight: 400; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button { font-size: 12px; color: var(--kpj-muted); }

/* Below 780px the totals table uses the shared shop_table treatment above —
   hidden <th>, data-title pseudo-labels — so this desktop layout must not
   reach it, or every row shows its label twice.

   Woo reserves 35% of the table for labels at a specificity of (0,3,1), which
   left the shipping row — a radio list plus a notice — in a ~100px column.
   Laying the rows out as flex lets that row stack and use the full width.
   `display: block` on the cells alone does not work: the browser then wraps
   them in an anonymous cell that inherits the narrow first column. */
@media (min-width: 781px) {
  .woocommerce-cart .cart-collaterals .cart_totals table,
  .woocommerce-cart .cart-collaterals .cart_totals table tbody,
  .woocommerce-cart .cart-collaterals .cart_totals table tr,
  .woocommerce-cart .cart-collaterals .cart_totals table th,
  .woocommerce-cart .cart-collaterals .cart_totals table td {
    display: block;
    width: auto;
  }
  /* WooCommerce outlines every shop_table, so the rows need side padding of
     their own or the figures sit hard against that border. */
  .woocommerce-cart .cart-collaterals .cart_totals table tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--kpj-rule);
  }
  .woocommerce-cart .cart-collaterals .cart_totals table th,
  .woocommerce-cart .cart-collaterals .cart_totals table td { padding: 0; border: 0; }

  /* Five figures plus a currency symbol is long enough to wrap, which reads as
     though the total had been split in two. The label is the half that gives
     way — except on the shipping row, whose value is a radio list. */
  .woocommerce-cart .cart-collaterals .cart_totals table td { white-space: nowrap; }
  .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals td { white-space: normal; }

  /* The shipping row stacks instead of sitting label-beside-value. */
  .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals { display: block; }
  .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals th { margin-bottom: 10px; }
  .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals td { text-align: left; font-weight: 400; }
}

/* The checkout CTA is an <a>, and Woo styles `a.button.alt` (0,3,1), which
   outranked our `.button.alt` (0,2,0) — so the primary CTA rendered in
   WooCommerce purple. Matching the element selector settles it. */
.woocommerce a.button.alt,
.woocommerce a.button.alt:visited {
  background: var(--kpj-ink);
  border: 1px solid var(--kpj-ink);
  color: #fff;
}
.woocommerce a.button.alt:hover { background: #000; color: #fff; }

/* Woo's disabled state sets `color: inherit` at 50% opacity. Over our dark
   button that is dark text on a dimmed dark ground — the blank grey slab
   beside the coupon field. Give it a real disabled treatment instead. */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
  background: var(--kpj-bg-alt);
  border: 1px solid var(--kpj-rule);
  color: var(--kpj-faint);
  opacity: 1;
  cursor: not-allowed;
}

/* Cart actions on narrow screens.

   The coupon row is a flex pair: a text input and a button. Neither shrinks —
   an <input> refuses to go below its intrinsic min-content width, and the
   button carries 30px of side padding plus .16em tracking — so together they
   overrun a 390px viewport and the whole page scrolls sideways. Stack them. */
@media (max-width: 780px) {
  .woocommerce-cart .coupon { flex-wrap: wrap; }
  .woocommerce-cart .coupon input.input-text {
    flex: 1 1 100%;
    min-width: 0;
  }
  .woocommerce-cart .coupon .button,
  .woocommerce-cart td.actions > .button {
    width: 100%;
  }
}

/* Demonstration notice.

   Sits above the promo bar and stays put — the bar below rotates, so a notice
   placed in it would be hidden most of the time. Ink ground so it separates
   from the copper promo strip and reads as a system message, not marketing. */
.kpj-demo-bar {
  background: var(--kpj-ink);
  color: #fff;
  font-size: 11px;
  letter-spacing: .06em;
}
.kpj-demo-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-block: 7px;
  text-align: center;
}
.kpj-demo-bar__tag {
  flex: 0 0 auto;
  border: 1px solid var(--kpj-copper);
  color: var(--kpj-copper);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 9px;
  padding: 2px 7px;
}

@media (max-width: 600px) {
  .kpj-demo-bar { font-size: 10px; }
  .kpj-demo-bar__inner { gap: 8px; padding-block: 6px; }
  /* The label and the sentence each take their own line rather than the
     sentence being clipped — an unreadable notice is no notice. */
  .kpj-demo-bar__inner > span { flex: 1 1 100%; min-width: 0; }
  .kpj-demo-bar__inner > .kpj-demo-bar__tag { flex: 0 0 auto; }
}