/* =========================================================================
   KNIGHT — homepage. Faithful port of the Claude Design "Knight" storefront
   layout. Inline styles from the design are lifted into these classes.
   Dynamic data (products, categories) is injected by index.js into the
   marked containers using the platform's existing endpoints + cart logic.
   ========================================================================= */

/* ---- shared section shell ---- */
.k-section { max-width: var(--k-maxw); margin: 0 auto; padding: 64px var(--k-gutter) 72px; }
.k-section--bordered { border-top: 1px solid var(--k-line); }
.k-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.k-section__eyebrow {
  display: block;
  font-family: var(--k-font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-muted-2);
}
.k-section__title {
  font-family: var(--k-font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.02em;
  margin: 10px 0 0;
}
.k-section__link {
  font-family: var(--k-font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--k-ink);
  padding-bottom: 3px;
  white-space: nowrap;
}
.k-section__link:hover { color: var(--k-accent); border-color: var(--k-accent); }

/* =========================================================================
   HERO — editorial split (copy left, media right)
   ========================================================================= */
.k-hero { border-bottom: 1px solid var(--k-line); }
.k-hero__grid {
  max-width: var(--k-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.k-hero__copy {
  padding: 72px 56px 72px var(--k-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--k-line);
}
.k-hero__eyebrow {
  font-family: var(--k-font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-accent);
  margin-bottom: 22px;
}
.k-hero__title {
  font-family: var(--k-font-display);
  font-weight: 900;
  font-size: clamp(44px, 6.2vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 26px;
}
.k-hero__title .dot { color: var(--k-accent); }
.k-hero__lead { font-size: 17px; line-height: 1.5; color: var(--k-muted); max-width: 440px; margin: 0 0 36px; }
.k-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* hero / generic Knight buttons */
.k-btn {
  font-family: var(--k-font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.k-btn--solid { background: var(--k-accent); color: #fff; }
.k-btn--solid:hover { background: var(--k-ink); color: var(--k-surface); }
.k-btn--ghost { background: transparent; color: var(--k-ink); border-color: var(--k-ink); }
.k-btn--ghost:hover { background: var(--k-ink); color: var(--k-surface); }

.k-hero__media {
  position: relative;
  min-height: 560px;
  background: var(--k-placeholder);
  background-image: repeating-linear-gradient(135deg, rgba(20, 19, 15, 0.05) 0 16px, transparent 16px 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-hero__media-label { font-family: var(--k-font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--k-muted-2); }
.k-hero__card {
  position: absolute;
  left: var(--k-gutter);
  bottom: var(--k-gutter);
  background: #fff;
  border: 1px solid var(--k-line-soft);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 19, 15, 0.12);
  padding: 16px 20px;
  max-width: 240px;
}
.k-hero__card-eyebrow { font-family: var(--k-font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--k-muted); margin-bottom: 6px; }
.k-hero__card-name { font-family: var(--k-font-display); font-weight: 800; font-size: 17px; line-height: 1.1; margin-bottom: 4px; }
.k-hero__card-price { font-family: var(--k-font-body); font-weight: 700; font-size: 15px; }

/* =========================================================================
   PRODUCT CARD (Knight) — rendered by index.js; add-button uses
   .js-add-to-cart so the platform cart picks it up.
   ========================================================================= */
.k-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.k-card {
  background: var(--k-card);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--k-line-soft);
  border-radius: var(--k-radius);
  overflow: hidden;
  box-shadow: var(--k-shadow);
}
.k-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--k-placeholder);
  background-image: repeating-linear-gradient(135deg, rgba(20, 19, 15, 0.045) 0 14px, transparent 14px 28px);
  display: block;
}
.k-card__media-link { position: absolute; inset: 0; display: block; }
.k-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-card__badges {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.k-card__badge {
  background: var(--k-accent);
  color: #fff;
  font-family: var(--k-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
}
.k-card__badge--new { background: var(--k-ink); }
.k-card__badge--featured { background: var(--k-accent-soft); color: var(--k-ink); }
.k-card__badge--package { background: transparent; color: var(--k-ink); border: 1px solid var(--k-ink); }
.k-card__wish {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--k-line);
  background: rgba(246, 244, 240, 0.92);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  color: var(--k-muted);
}
.k-card__wish:hover { border-color: var(--k-accent); }
.k-card__wish.is-active { color: var(--k-accent); border-color: var(--k-accent); }
/* bi-heart has vertical-align:-.125em which offsets it in the flex box */
.k-card__wish i { display: block; line-height: 1; }
.k-card__body { padding: 16px 16px 0; }
.k-card__cat { font-family: var(--k-font-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted-2); margin-bottom: 7px; }
.k-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--k-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  /* reserve two lines so all cards align even with one-line titles */
  min-height: calc(1.2em * 2);
  margin-bottom: 10px;
  color: var(--k-ink);
  text-decoration: none;
}
.k-card__name:hover { color: var(--k-accent); }
/* Old price stacked above the new price; reserve two lines and align to the
   bottom so a single price sits at the same baseline as discounted cards. */
.k-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  min-height: 40px;
  margin-bottom: 16px;
}
.k-card__price-now { font-family: var(--k-font-body); font-weight: 700; font-size: 16px; line-height: 1.3; }
.k-card__price-now.is-discounted { color: var(--k-accent); }
.k-card__price-old { font-family: var(--k-font-body); font-size: 13px; line-height: 1.3; color: rgba(20, 19, 15, 0.4); text-decoration: line-through; }
.k-card__add {
  margin-top: auto;
  font-family: var(--k-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: #fff;
  color: var(--k-ink);
  border: none;
  border-top: 1px solid var(--k-line);
  padding: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.k-card__add:hover { background: var(--k-ink); color: var(--k-surface); }

/* =========================================================================
   SPOTLIGHT — image slider (left) + 4 featured cards (right)
   ========================================================================= */
.k-spotlight__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: stretch; }
.k-slider {
  position: relative;
  min-height: 480px;
  border: 1px solid var(--k-line-soft);
  border-radius: 16px;
  overflow: hidden;
  background: var(--k-placeholder);
  box-shadow: var(--k-shadow);
}
.k-slider__track { display: flex; height: 100%; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.k-slide {
  flex: 0 0 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-image: repeating-linear-gradient(135deg, rgba(20, 19, 15, 0.05) 0 18px, transparent 18px 36px);
}
.k-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-slide__tag {
  position: absolute; top: 18px; left: 18px;
  background: var(--k-accent); color: #fff;
  font-family: var(--k-font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px; z-index: 2;
}
.k-slide__index { position: absolute; top: 21px; right: 20px; font-family: var(--k-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--k-muted-2); z-index: 2; }
.k-slide__caption { position: relative; background: #fff; border-top: 1px solid var(--k-line-soft); padding: 22px 24px; }
.k-slide__title { font-family: var(--k-font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 9px; }
.k-slide__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.k-slide__desc { font-family: var(--k-font-body); font-size: 13px; color: var(--k-muted); }
.k-slide__shop { font-family: var(--k-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--k-ink); }
.k-slider__arrow {
  position: absolute; top: 44%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(246, 244, 240, 0.92); border: 1px solid var(--k-line);
  cursor: pointer; font-size: 20px; line-height: 1; color: var(--k-ink);
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
.k-slider__arrow:hover { background: #fff; border-color: var(--k-ink); }
.k-slider__arrow--prev { left: 14px; }
.k-slider__arrow--next { right: 14px; }
.k-slider__dots { position: absolute; left: 0; right: 0; bottom: 108px; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.k-slider__dot { height: 8px; width: 8px; border-radius: 100px; background: rgba(20, 19, 15, 0.28); border: none; cursor: pointer; padding: 0; transition: width 0.25s ease, background 0.25s ease; }
.k-slider__dot.is-active { width: 20px; background: var(--k-accent); }
.k-spotlight__featured { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* =========================================================================
   COLLECTIONS — large category tiles
   ========================================================================= */
.k-collections-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.k-collection {
  position: relative;
  display: block;
  text-decoration: none !important;
  color: var(--k-ink);
  border: 1px solid var(--k-line-soft);
  border-radius: var(--k-radius);
  min-height: 380px;
  background: var(--k-placeholder);
  background-image: repeating-linear-gradient(135deg, rgba(20, 19, 15, 0.05) 0 16px, transparent 16px 32px);
  overflow: hidden;
  box-shadow: var(--k-shadow);
}
.k-collection:hover { border-color: rgba(20, 19, 15, 0.28); }
.k-collection img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-collection__caption { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--k-line-soft); padding: 22px; }
.k-collection__tag { font-family: var(--k-font-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-accent); margin-bottom: 8px; }
.k-collection__title { font-family: var(--k-font-display); font-weight: 800; font-size: 25px; letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 6px; }
.k-collection__meta-row { display: flex; align-items: center; justify-content: space-between; }
.k-collection__meta { font-family: var(--k-font-body); font-size: 12px; color: var(--k-muted); }
.k-collection__shop { font-family: var(--k-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* =========================================================================
   TRUST BAR — dark band
   ========================================================================= */
.k-trust { background: var(--k-ink); color: var(--k-surface); }
.k-trust__grid { max-width: var(--k-maxw); margin: 0 auto; padding: 0 var(--k-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.k-trust__item { padding: 44px 28px; border-left: 1px solid rgba(246, 244, 240, 0.16); }
.k-trust__item:first-child { border-left: none; }
.k-trust__num { font-family: var(--k-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--k-accent-soft); margin-bottom: 18px; }
.k-trust__title { font-family: var(--k-font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; margin-bottom: 8px; }
.k-trust__desc { font-size: 14px; line-height: 1.5; color: rgba(246, 244, 240, 0.6); }

/* =========================================================================
   RESPONSIVE  (collapse split layouts on tablet/phone)
   ========================================================================= */
@media (max-width: 991.98px) {
  .k-hero__grid { grid-template-columns: 1fr; }
  .k-hero__copy { border-right: none; border-bottom: 1px solid var(--k-line); padding: 48px 18px; }
  .k-hero__media { min-height: 380px; }
  .k-spotlight__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .k-section { padding: 40px 18px 48px; }
  .k-hero__title { font-size: clamp(40px, 12vw, 60px); }
  .k-spotlight__featured { gap: 12px; }
  .k-trust__item { padding: 28px 18px; border-left: none; border-top: 1px solid rgba(246, 244, 240, 0.16); }
  .k-trust__item:first-child { border-top: none; }
}

/* =========================================================================
   CMS SECTION WRAPPER + subtitle (Knight uses the page bg for all sections).
   Full-width hairline between sections — matches the original Knight design.
   ========================================================================= */
.k-secwrap { border-top: 1px solid var(--k-line); }
.k-section__sub {
  font-family: var(--k-font-body);
  font-size: 15px;
  color: var(--k-muted);
  margin: 8px 0 0;
  max-width: 560px;
}

/* =========================================================================
   PRODUCT SCROLL CAROUSEL (layout = scroll)
   ========================================================================= */
.k-scroll { position: relative; display: flex; align-items: center; gap: 8px; }
.k-scroll__track {
  /* Fill the row even with few items — otherwise the track shrinks to its
     content (arrow hugs the cards, mobile 70% items resolve against it). */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.k-scroll__track::-webkit-scrollbar { height: 0; }
.k-scroll__item { flex: 0 0 280px; scroll-snap-align: start; display: flex; }
.k-scroll__item > .k-card { width: 100%; }
.k-scroll__arrow {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(246, 244, 240, 0.92);
  border: 1px solid var(--k-line);
  color: var(--k-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
}
.k-scroll__arrow:hover { background: #fff; border-color: var(--k-ink); }
/* Scroll progress indicator — mobile only (desktop uses the arrows) */
.k-scroll__bar { display: none; }
.k-scroll__fill { display: block; height: 100%; background: var(--k-accent); border-radius: 100px; }
@media (max-width: 767.98px) {
  .k-scroll__arrow { display: none; }
  .k-scroll__item { flex-basis: 70%; }
  .k-scroll__bar {
    display: block;
    margin-top: 14px;
    height: 3px;
    background: rgba(20, 19, 15, 0.16);
    border-radius: 100px;
    overflow: hidden;
  }
}

/* =========================================================================
   IMAGE SECTION GRID (adapted from leon to Knight)
   ========================================================================= */
.k-image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.k-image-tile { display: block; border-radius: var(--k-radius); overflow: hidden; border: 1px solid var(--k-line-soft); }
.k-image-tile img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  aspect-ratio: 16 / 9;
  transition: transform 0.4s ease;
}
.k-image-tile:hover img { transform: scale(1.03); }