/* END.-style home skeleton (preview: &home=end). Cards come from kpt-end-cards.css. */
.kpt-eh { --eh-ink: #1a1a1a; --eh-muted: #767676; --eh-gap: 24px; color: var(--eh-ink); }
.kpt-eh .section { padding-block: 0; }
.kpt-eh > * + * { margin-top: 56px; }

/* Section heads: uppercase label, "view all", arrows. */
.kpt-eh-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.kpt-eh-head h2 { margin: 0; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 1.4px; text-transform: uppercase; }
.kpt-eh-spot .kpt-eh-head h2 { display: flex; align-items: center; gap: 10px; }
.kpt-eh-spot .kpt-eh-head h2::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.kpt-eh-head-tools { display: flex; align-items: center; gap: 6px; }
.kpt-eh-all { margin-right: 10px; color: var(--eh-ink); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.kpt-eh-arrow { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #d6d6d6; border-radius: 999px; background: #fff; color: var(--eh-ink); font: 20px/1 Arial, sans-serif; cursor: pointer; }
.kpt-eh-arrow span { margin-top: -2px; }
.kpt-eh-arrow:disabled { opacity: .35; cursor: default; }
.kpt-eh-arrow:not(:disabled):hover { border-color: var(--eh-ink); }
.kpt-eh-head-tools:not(:has(.kpt-eh-arrow:not(:disabled))) > .kpt-eh-arrow { display: none; }
.kpt-eh :is(a, button):focus-visible { outline: 2px solid var(--eh-ink); outline-offset: 3px; }

/* Horizontal tracks. */
.kpt-eh [data-eh-track] { display: grid; grid-auto-flow: column; gap: var(--eh-gap); margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kpt-eh [data-eh-track]::-webkit-scrollbar { display: none; }
.kpt-eh [data-eh-track] > * { scroll-snap-align: start; min-width: 0; }
.kpt-eh .kpt-eh-track.product-grid { grid-template-columns: none; grid-auto-columns: calc((100% - 4 * var(--eh-gap)) / 5); }

/* Hero carousel and lifestyle: full-bleed photograph, copy on the calm left side. */
.kpt-eh-hero { position: relative; }
.kpt-eh-hero-track { gap: 0 !important; grid-auto-columns: 100%; }
.kpt-eh-slide, .kpt-eh-lifestyle { position: relative; display: block; height: clamp(420px, 46vw, 760px); overflow: hidden; background: #e9e5df; color: var(--eh-ink); text-decoration: none; }
.kpt-eh-slide > img, .kpt-eh-lifestyle > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.kpt-eh-slide-copy { position: absolute; left: clamp(20px, 5vw, 72px); bottom: clamp(28px, 6vw, 88px); display: grid; justify-items: start; gap: 10px; max-width: min(460px, 42%); }
.kpt-eh-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; }
.kpt-eh-slide-copy strong { font-family: inherit; font-size: clamp(26px, 3vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; }
.kpt-eh-line { font-size: 14px; line-height: 20px; }
.kpt-eh-button { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 13px 25px; border-radius: 999px; background: var(--eh-ink); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; }
.kpt-eh-slide:hover .kpt-eh-button, .kpt-eh-lifestyle:hover .kpt-eh-button { background: #000; }
.kpt-eh-dots { position: absolute; left: 50%; bottom: 18px; display: flex; gap: 8px; transform: translateX(-50%); }
.kpt-eh-dots button { width: 28px; height: 3px; padding: 0; border: 0; border-radius: 0; background: rgba(26,26,26,.25); cursor: pointer; }
.kpt-eh-dots button[aria-selected="true"] { background: var(--eh-ink); }
.kpt-eh-dots button::after { content: ""; display: block; height: 24px; margin-top: -10px; }

/* Brand spotlight: editorial portrait + rail. */
.kpt-eh-spot-body { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: var(--eh-gap); align-items: start; }
.kpt-eh-spot-art { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e5df; }
.kpt-eh-spot-art > img, .kpt-eh-edit > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kpt-eh-spot-art:hover > img, .kpt-eh-edit:hover > img { transform: scale(1.03); }
.kpt-eh-spot .kpt-eh-track.product-grid { grid-auto-columns: calc((100% - 2 * var(--eh-gap)) / 3); }
.kpt-eh-chip { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--eh-ink); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; }

/* The Edits: portrait tiles. */
.kpt-eh-edit-track { grid-auto-columns: calc((100% - 2 * var(--eh-gap)) / 3); }
.kpt-eh-edit { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #e9e5df; }

/* Features (model guides). */
.kpt-eh-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--eh-gap); }
.kpt-eh-feature { display: grid; gap: 8px; color: var(--eh-ink); text-decoration: none; }
.kpt-eh-feature-media { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 6px; overflow: hidden; background: #eee; }
.kpt-eh-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.kpt-eh-feature-kicker { color: var(--eh-muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.kpt-eh-feature strong { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.kpt-eh-feature:hover strong { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .kpt-eh .kpt-eh-track.product-grid { grid-auto-columns: calc((100% - 2 * var(--eh-gap)) / 3.3); }
  .kpt-eh-spot .kpt-eh-track.product-grid { grid-auto-columns: calc((100% - var(--eh-gap)) / 2.2); }
}
@media (max-width: 767px) {
  .kpt-eh { --eh-gap: 12px; }
  .kpt-eh > * + * { margin-top: 40px; }
  .kpt-eh-arrow { display: none; }
  .kpt-eh-all { margin-right: 0; }
  .kpt-eh .kpt-eh-track.product-grid, .kpt-eh-spot .kpt-eh-track.product-grid { grid-auto-columns: calc((100% - var(--eh-gap)) / 2.2); }
  .kpt-eh-slide, .kpt-eh-lifestyle { height: auto; aspect-ratio: 4 / 5; }
  .kpt-eh-slide > img, .kpt-eh-lifestyle > img { object-position: 72% 50%; }
  .kpt-eh-slide-copy { left: 20px; right: 20px; bottom: 44px; max-width: none; padding: 16px; background: rgba(245, 242, 237, .9); }
  .kpt-eh-spot-body { grid-template-columns: 1fr; }
  .kpt-eh-edit-track { grid-auto-columns: 72%; }
  .kpt-eh-feature-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .kpt-eh-feature { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .kpt-eh-spot-art > img, .kpt-eh-edit > img { transition: none; }
  .kpt-eh [data-eh-track] { scroll-behavior: auto; }
}

/* Brand spotlights: square campaign, centered product with neighboring peeks. */
.kpt-eh .kpt-eh-spot {
  --spot-control-size:44px; --spot-control-border:#7f8783;
  --spot-accent:var(--accent,#741e32); --spot-card-share:calc((100% - 2 * var(--eh-gap)) / 2);
}
.kpt-eh .kpt-eh-spot-body { grid-template-columns:minmax(0,49%) minmax(0,1fr); gap:12px; align-items:center; }
.kpt-eh .kpt-eh-spot-art { aspect-ratio:1; }
.kpt-eh .kpt-eh-spot-art > img { object-position:center 62%; }
.kpt-eh-spot-shelf { min-width:0; align-self:center; }
.kpt-eh .kpt-eh-spot-shelf .kpt-eh-track.product-grid {
  box-sizing:border-box; width:100%; grid-template-columns:none; grid-auto-columns:var(--spot-card-share);
  padding-inline:0; scroll-padding-inline:0;
  align-items:start; scroll-snap-type:x mandatory;
}
.kpt-eh .kpt-eh-spot-shelf [data-eh-track] > * { scroll-snap-align:center; }
.kpt-eh-spot .kpt-eh-pager { display:inline-flex; flex-shrink:0; align-items:center; width:max-content;
  gap:8px; padding:3px; border:1px solid var(--spot-control-border); border-radius:999px; background:#fff; }
.kpt-eh-spot .kpt-eh-pager .kpt-eh-arrow { display:inline-grid; width:var(--spot-control-size); height:var(--spot-control-size);
  min-width:var(--spot-control-size); padding:0; border:0; border-radius:50%; background:transparent; color:var(--eh-ink); }
.kpt-eh-spot .kpt-eh-pager .kpt-eh-arrow svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; }
.kpt-eh-spot .kpt-eh-pager [data-eh-step="-1"] svg { transform:rotate(180deg); }
@media (hover: hover) {
  .kpt-eh-spot .kpt-eh-pager .kpt-eh-arrow:hover:not(:disabled) { background:var(--spot-accent); color:#fff; }
}
.kpt-eh-spot .kpt-eh-pager .kpt-eh-arrow:active:not(:disabled) { background:var(--spot-accent); color:#fff; }
.kpt-eh-spot .kpt-eh-pager .kpt-eh-arrow:disabled { opacity:.35; cursor:default; }
.kpt-eh-spot-count { min-width:40px; text-align:center; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.kpt-eh-spot-progress { display:flex; justify-content:center; margin-top:18px; overflow-x:auto; }
.kpt-eh-spot-progress button { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; padding:0; border:0; background:none; cursor:pointer; }
.kpt-eh-spot-progress button::before { content:""; width:22px; height:2px; background:var(--spot-control-border); opacity:.4; }
.kpt-eh-spot-progress button[aria-current="true"]::before { background:var(--eh-ink); opacity:1; }
.kpt-eh-spot :is(.kpt-eh-pager button,.kpt-eh-spot-progress button,[data-eh-track]):focus-visible { outline:2px solid var(--spot-accent); outline-offset:3px; }
@media(max-width:767px) {
  .kpt-eh .kpt-eh-spot { --spot-card-share:74%; }
  .kpt-eh .kpt-eh-spot-body { grid-template-columns:minmax(0,1fr); gap:24px; }
  .kpt-eh-spot .kpt-eh-head { flex-wrap:wrap; gap:12px; }
  .kpt-eh-spot .kpt-eh-head h2 { flex-basis:100%; }
  .kpt-eh-spot .kpt-eh-head-tools { width:100%; justify-content:space-between; gap:12px; }
  .kpt-eh-spot .kpt-eh-all { display:inline-flex; align-items:center; min-height:44px; }
  .kpt-eh-spot-progress { margin-top:10px; }
}
@media(prefers-reduced-motion:reduce) { .kpt-eh-spot [data-eh-track] { scroll-behavior:auto; } }

.kpt-eh .kpt-eh-spot-shelf [data-eh-track]:has(> :only-child){justify-content:center;}

/* 2026-10-15: rounded home campaign and editorial cards; product cards excluded. */
#fw-shopping.kpt-eh { --eh-card-radius: 24px; }
#fw-shopping.kpt-eh :is(.kpt-eh-slide, .kpt-eh-lifestyle, .kpt-eh-spot-art, .kpt-eh-edit, .kpt-studio-card, .kpt-eh-feature-media, .kpt-review-card) {
  border-radius: var(--eh-card-radius);
}
@media (max-width: 767px) {
  #fw-shopping.kpt-eh { --eh-card-radius: 22px; }
  #fw-shopping.kpt-eh .kpt-eh-slide-copy { border-radius: var(--eh-card-radius); }
}
