/* Kitchen Factory Newark — editorial cabinet collection */
.kfn-studio {
  --kfn-bg: #f7f5f0;
  --kfn-paper: #fff;
  --kfn-ink: #26231f;
  --kfn-muted: #777168;
  --kfn-line: #e6e0d7;
  --kfn-bronze: #76583d;
  --kfn-dark: #25211c;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  padding: 34px 0 76px;
  color: var(--kfn-ink);
  background: var(--kfn-bg);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}
.kfn-studio *, .kfn-studio *::before, .kfn-studio *::after { box-sizing: border-box; }
.kfn-studio [hidden] { display: none !important; }
.kfn-studio button, .kfn-studio input { font: inherit; letter-spacing: normal; }
.kfn-studio button { text-transform: none; }
.kfn-shell { width: min(1480px, calc(100% - clamp(32px, 7vw, 112px))); margin: 0 auto; }
.kfn-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Compact dark editorial masthead inspired by the supplied collection reference. */
.kfn-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 390px);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 4px 38px;
  width: 100%;
  margin: 0;
  padding: 29px clamp(24px, 4vw, 48px) 30px;
  border: 1px solid #332c24;
  border-radius: 5px;
  background: var(--kfn-dark);
  box-shadow: 0 12px 28px rgba(30,24,18,.08);
  text-align: left;
}
.kfn-kicker, .kfn-eyebrow { display: block; margin: 0 0 7px; color: #c9ad89; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.kfn-kicker { grid-column: 1; grid-row: 1; }
.kfn-kicker span { padding: 0 5px; color: #9b8871; }
.kfn-masthead h2 { grid-column: 1; grid-row: 2; margin: 0; color: #fbf9f5; font-family: Georgia, "Times New Roman", serif; font-size: clamp(39px, 4.3vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; text-align: left; text-transform: none; }
.kfn-masthead > p { grid-column: 1; grid-row: 3; max-width: 590px; margin: 8px 0 0; color: #d0cbc3; font-size: 14px; line-height: 1.58; }
.kfn-search { grid-column: 2; grid-row: 1 / 4; align-self: center; display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; height: 54px; margin: 0; padding: 0 15px; border: 1px solid #ded8ce; border-radius: 4px; background: #fffdfa; box-shadow: none; text-align: left; transition: border-color .18s ease, box-shadow .18s ease; }
.kfn-search:focus-within { border-color: #b69a79; box-shadow: 0 0 0 3px rgba(201,173,137,.15); }
.kfn-search svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: #837b70; stroke-width: 1.6; }
.kfn-search input { min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--kfn-ink); font-size: 14px; }
.kfn-search input::placeholder { color: #938b80; opacity: 1; }
.kfn-search__hint { color: #9a9287; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.kfn-brand-hub { padding-top: 34px; }
.kfn-section-head { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin: 0 0 20px; }
.kfn-section-head h3, .kfn-collection-head h3 { margin: 0; color: var(--kfn-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3vw, 39px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; text-transform: none; }
.kfn-section-head p, .kfn-collection-head p { max-width: 620px; margin: 6px 0 0; color: var(--kfn-muted); font-size: 13px; line-height: 1.55; }
.kfn-section-stat { display: flex; align-items: baseline; gap: 6px; color: var(--kfn-muted); font-size: 10px; white-space: nowrap; }
.kfn-section-stat strong { color: var(--kfn-ink); font: 400 21px Georgia, "Times New Roman", serif; }
.kfn-section-stat i { height: 13px; margin: 0 7px; border-left: 1px solid #d9d2c8; }
.kfn-brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.kfn-brand-card { min-width: 0; overflow: hidden; border: 1px solid var(--kfn-line); border-radius: 5px; background: var(--kfn-paper); box-shadow: 0 2px 9px rgba(49,39,29,.025); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.kfn-brand-card:hover { transform: translateY(-2px); border-color: #cfc2b2; box-shadow: 0 10px 26px rgba(49,39,29,.075); }
.kfn-brand-card__open, .kfn-brand-card__open:hover, .kfn-brand-card__open:focus, .kfn-brand-card__open:active { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--kfn-ink); font-family: inherit; font-size: inherit; font-weight: 400; line-height: normal; letter-spacing: normal; text-align: left; text-decoration: none; text-transform: none; transform: none; cursor: pointer; }
.kfn-brand-card__open:focus-visible, .kfn-card__open:focus-visible { outline: 2px solid #a88662; outline-offset: -3px; }
.kfn-brand-card__visual { position: relative; display: block; height: clamp(190px, 17vw, 238px); overflow: hidden; background: linear-gradient(145deg,#f2f0ec,#e9e5de); }
.kfn-brand-card__door { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 29%; height: 74%; padding: 8px; border: 1px solid rgba(108,91,72,.15); border-radius: 3px; background: rgba(255,255,255,.82); box-shadow: 0 8px 22px rgba(57,44,31,.09); transform: translateY(-50%); transition: transform .2s ease; }
.kfn-brand-card__door img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.kfn-brand-card__door--1 { left: 10%; transform: translateY(-50%) rotate(-3deg); }
.kfn-brand-card__door--2 { left: 35%; z-index: 2; width: 32%; height: 81%; }
.kfn-brand-card__door--3 { right: 10%; transform: translateY(-50%) rotate(3deg); }
.kfn-brand-card:hover .kfn-brand-card__door--1 { transform: translate(-2px,-51%) rotate(-4deg); }
.kfn-brand-card:hover .kfn-brand-card__door--2 { transform: translateY(-51%); }
.kfn-brand-card:hover .kfn-brand-card__door--3 { transform: translate(2px,-51%) rotate(4deg); }
.kfn-brand-card__body { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 32px; grid-template-rows: auto auto; align-items: center; gap: 5px 12px; min-height: 101px; padding: 15px 17px; border-top: 1px solid var(--kfn-line); background: #fff; text-align: left; }
.kfn-brand-card__count { grid-column: 1; grid-row: 1; margin: 0; color: #81796f; font-size: 10px; font-weight: 500; line-height: 1.35; letter-spacing: .04em; }
.kfn-brand-card__body strong { display: block; grid-column: 1; grid-row: 2; max-width: 100%; margin: 0; color: #28241f; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px,1.75vw,27px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; text-align: left; text-transform: none; word-break: normal; overflow-wrap: normal; hyphens: none; }
.kfn-brand-card__cta { display: flex; grid-column: 2; grid-row: 1 / 3; align-items: center; justify-content: center; align-self: center; width: 32px; height: 32px; margin: 0; padding: 0; color: var(--kfn-bronze); }
.kfn-brand-card__cta span { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border: 1px solid #dcd2c5; border-radius: 50%; color: var(--kfn-bronze); font-size: 15px; line-height: 1; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.kfn-brand-card:hover .kfn-brand-card__cta span { transform: translate(2px,-1px); border-color: #cabbab; background: #f8f5f0; }

.kfn-styles-view { padding-top: 0; }
.kfn-breadcrumb { display: flex; align-items: center; gap: 11px; margin: 24px 0 17px; color: #a19a90; font-size: 11px; }
.kfn-breadcrumb strong { color: var(--kfn-muted); font-weight: 500; }
.kfn-back-button { appearance: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--kfn-muted); font: 600 11px/1.4 Arial,Helvetica,sans-serif; cursor: pointer; }
.kfn-back-button span { padding-right: 4px; color: var(--kfn-bronze); }
.kfn-back-button:hover { color: var(--kfn-ink); }
.kfn-collection-head { padding: 21px 25px 20px; border: 0; border-radius: 5px; background: var(--kfn-dark); }
.kfn-collection-head .kfn-eyebrow { margin: 0 0 5px; }
.kfn-collection-head h3 { color: #fbf9f5; font-size: clamp(34px, 4vw, 48px); }
.kfn-collection-head p { color: #d0cbc3; font-size: 13px; }
.kfn-results-meta { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 1px 12px; color: var(--kfn-muted); font-size: 11px; }
.kfn-results-meta b { color: var(--kfn-ink); font-weight: 600; }
.kfn-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.kfn-card { min-width: 0; overflow: hidden; border: 1px solid #e3ded6; border-radius: 5px; background: #fff; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.kfn-card:hover { transform: translateY(-2px); border-color: #cfc2b2; box-shadow: 0 9px 25px rgba(49,39,29,.075); }
.kfn-card.is-current { border-color: #8b6d50; box-shadow: 0 0 0 1px #8b6d50; }
.kfn-card__open, .kfn-card__open:hover, .kfn-card__open:focus, .kfn-card__open:active { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font-family: inherit; text-align: left; text-decoration: none; text-transform: none; cursor: pointer; }
.kfn-card__stage { display: flex; align-items: center; justify-content: center; aspect-ratio: .86 / 1; overflow: hidden; padding: 13px; background: #f1efeb; }
.kfn-card__image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .22s ease; }
.kfn-card:hover .kfn-card__image { transform: scale(1.025); }
.kfn-card__meta { display: block; min-height: 76px; padding: 11px 13px 13px; border-top: 1px solid #eeeae5; text-align: left; }
.kfn-card__meta small { display: block; margin: 0 0 4px; color: #82796e; font-family: Arial,Helvetica,sans-serif; font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: .02em; text-transform: none; }
.kfn-card__meta strong { display: block; color: #29251f; font-family: Georgia,"Times New Roman",serif; font-size: clamp(17px,1.45vw,20px); font-weight: 400; line-height: 1.15; letter-spacing: -.015em; text-transform: none; overflow-wrap: anywhere; word-break: normal; }
.kfn-empty { padding: 38px 20px; border: 1px solid var(--kfn-line); background: #fff; color: var(--kfn-muted); font-size: 14px; text-align: center; }

/* Focused style detail. Desktop uses a calm centered view; phones use the full screen. */
.kfn-detail { --kfn-ink: #26231f; --kfn-muted: #777168; --kfn-line: #e6e0d7; --kfn-bronze: #76583d; position: fixed; z-index: 2147483000; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 28px; background: rgba(30,27,23,.48); color: var(--kfn-ink); font-family: Arial,Helvetica,sans-serif; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.kfn-detail.is-open { opacity: 1; visibility: visible; }
.kfn-detail__scrim { appearance: none; position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: default; }
.kfn-detail__panel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); width: min(1080px,calc(100vw - 56px)); height: min(720px,calc(100dvh - 56px)); min-height: 0; overflow: hidden; border: 1px solid rgba(91,72,53,.11); border-radius: 8px; outline: 0; background: #fffdfa; box-shadow: 0 30px 100px rgba(27,23,19,.24); transform: translateY(8px); transition: transform .2s ease; }
.kfn-detail [hidden] { display: none !important; }
.kfn-detail__placeholder { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px; background: #fffdfa; color: #29251f; text-align: center; }
.kfn-detail__placeholder .kfn-eyebrow { margin-bottom: 11px; color: #8b7155; }
.kfn-detail__placeholder strong { font: 400 clamp(26px,2.4vw,34px)/1.12 Georgia,"Times New Roman",serif; letter-spacing: -.02em; }
.kfn-detail__placeholder p { max-width: 250px; margin: 10px 0 0; color: #777168; font: 13px/1.55 Arial,Helvetica,sans-serif; }
.kfn-detail.is-open .kfn-detail__panel { transform: translateY(0); }
.kfn-detail__image { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; height: 100%; overflow: hidden; padding: clamp(24px,4vw,54px); background: #f0eee9; }
.kfn-detail__image img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.kfn-detail__info { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; min-height: 0; padding: clamp(28px,4.6vw,62px); background: #fffdfa; }
.kfn-detail__close { appearance: none; position: absolute; z-index: 2; top: 15px; right: 15px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid #e4ded5; border-radius: 50%; background: #fffdfa; box-shadow: 0 2px 10px rgba(45,35,27,.08); color: #4e4338; font: 300 24px/1 Arial,sans-serif; cursor: pointer; }
.kfn-detail__close:hover { border-color: #bca88f; background: #f8f5ef; }
.kfn-detail__info h3 { margin: 0 0 30px; color: var(--kfn-ink); font: 400 clamp(34px,4vw,50px)/1.04 Georgia,"Times New Roman",serif; letter-spacing: -.03em; }
.kfn-detail__nav { display: flex; justify-content: space-between; width: 100%; padding: 14px 0; border-top: 1px solid var(--kfn-line); border-bottom: 1px solid var(--kfn-line); }
.kfn-detail__nav button, .kfn-detail__back { appearance: none; min-width: 0; min-height: 0; margin: 0; padding: 7px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--kfn-muted); font: 500 12px/1.4 Arial,Helvetica,sans-serif; text-transform: none; cursor: pointer; }
.kfn-detail__nav button:hover, .kfn-detail__back:hover { color: var(--kfn-bronze); }
.kfn-detail__back { margin-top: 18px; text-decoration: underline; text-underline-offset: 4px; }
.kfn-quote { appearance: none; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; height: auto; margin: 27px 0 0; padding: 0 17px; border: 1px solid #60462f; border-radius: 4px; background: #60462f; box-shadow: none; color: #fff !important; font: 550 13px/1.3 Arial,Helvetica,sans-serif; text-align: left; text-decoration: none !important; text-transform: none; transition: background .18s ease,border-color .18s ease; }
.kfn-quote:hover { border-color: #493521; background: #493521; color: #fff !important; }
.kfn-quote span { font-size: 16px; }
.kfn-detail__close:focus-visible, .kfn-detail__nav button:focus-visible, .kfn-detail__back:focus-visible, .kfn-quote:focus-visible { outline: 2px solid #a88662; outline-offset: 3px; }
.kfn-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* Keep the document scrollable while the focused style panel is open. */
html.kfn-detail-open, body.kfn-detail-open { overflow: auto !important; }

/* Desktop selection becomes a split showroom: focused door at left, live collection at right. */
@media (min-width: 821px) {
  .kfn-detail { display: grid; grid-template-columns: clamp(320px,25vw,440px) minmax(0,1fr); align-items: stretch; justify-content: initial; padding: 0; background: #f7f5f0; }
  .kfn-detail__scrim { display: none; }
  .kfn-detail__panel { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(270px,1fr) auto; width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh; overflow-y: auto; border: 0; border-right: 1px solid #e5dfd6; border-radius: 0; box-shadow: 8px 0 28px rgba(36,29,21,.06); transform: translateX(-14px); }
  .kfn-detail.is-open .kfn-detail__panel { transform: translateX(0); }
  .kfn-detail__image { height: auto; min-height: 270px; padding: clamp(24px,3.4vw,44px); }
  .kfn-detail__info { padding: 27px clamp(24px,3vw,38px) 32px; }
  .kfn-detail__info h3 { margin-bottom: 19px; font-size: clamp(32px,2.8vw,42px); }
  .kfn-quote { margin-top: 21px; }
  .kfn-detail__context { display: grid; grid-template-rows: auto minmax(0,1fr); min-width: 0; height: 100vh; height: 100dvh; overflow: auto; padding: 0 clamp(22px,3.2vw,52px) 36px; background: #f7f5f0; }
  .kfn-detail__context[hidden] { display: none !important; }
  .kfn-detail__context-head { position: sticky; z-index: 4; top: 0; padding: 30px 0 17px; border-bottom: 1px solid #e3ddd4; background: rgba(247,245,240,.97); backdrop-filter: blur(8px); }
  .kfn-detail__context-head .kfn-eyebrow { margin-bottom: 3px; }
  .kfn-detail__context-head h2 { margin: 0; color: #29251f; font: 400 clamp(27px,2.5vw,36px)/1.08 Georgia,"Times New Roman",serif; letter-spacing: -.025em; }
  .kfn-detail__context-grid { align-content: start; padding-top: 21px; }
}
@media (min-width: 821px) and (max-width: 1020px) { .kfn-detail__context-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1021px) and (max-width: 1399px) { .kfn-detail__context-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }

@media (min-width: 1600px) { .kfn-brand-grid { gap: 20px; } .kfn-grid { gap: 17px; } }
@media (max-width: 1100px) { .kfn-shell { width: calc(100% - 48px); } .kfn-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } .kfn-brand-grid { gap: 14px; } .kfn-brand-card__visual { height: 218px; } }
@media (max-width: 820px) { .kfn-studio { padding-top: 24px; } .kfn-shell { width: calc(100% - 36px); } .kfn-masthead { grid-template-columns: minmax(0,1fr) minmax(220px,300px); gap: 4px 22px; padding: 24px 25px; } .kfn-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .kfn-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .kfn-section-head { align-items: flex-start; } .kfn-detail { padding: 18px; } .kfn-detail__panel { width: min(960px,calc(100vw - 36px)); height: min(760px,calc(100dvh - 36px)); grid-template-columns: minmax(0,1fr) minmax(0,.9fr); } }
@media (max-width: 560px) { .kfn-studio { padding: 16px 0 48px; } .kfn-shell { width: calc(100% - 24px); } .kfn-masthead { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; gap: 5px; padding: 21px 19px 19px; } .kfn-kicker { grid-column: 1; grid-row: 1; font-size: 9px; } .kfn-masthead h2 { grid-column: 1; grid-row: 2; font-size: 41px; } .kfn-masthead > p { grid-column: 1; grid-row: 3; margin-top: 5px; font-size: 13px; } .kfn-search { grid-column: 1; grid-row: 4; height: 50px; margin-top: 12px; } .kfn-search__hint { display: none; } .kfn-brand-hub { padding-top: 23px; } .kfn-section-head { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; } .kfn-section-head h3 { font-size: 31px; } .kfn-section-stat { margin-top: 0; } .kfn-brand-grid { grid-template-columns: minmax(0,1fr); gap: 12px; } .kfn-brand-card__visual { height: clamp(195px,57vw,240px); } .kfn-brand-card__body { min-height: 88px; } .kfn-breadcrumb { margin: 18px 0 14px; } .kfn-collection-head { padding: 18px 17px; } .kfn-collection-head h3 { font-size: 37px; } .kfn-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .kfn-card__stage { padding: 9px; aspect-ratio: .88 / 1; } .kfn-card__meta { min-height: 68px; padding: 10px; } .kfn-card__meta small { font-size: 9px; } .kfn-card__meta strong { font-size: 16px; } .kfn-detail { padding: 0; align-items: stretch; } .kfn-detail__panel { display: flex; flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 0; } .kfn-detail__image { flex: 0 0 50vh; min-height: 50vh; height: auto; padding: 61px 24px 20px; } .kfn-detail__image img { max-height: 50vh; } .kfn-detail__info { flex: 0 0 auto; padding: 22px 24px 28px; } .kfn-detail__close { top: 13px; right: 13px; } .kfn-detail__info h3 { margin-bottom: 20px; font-size: 37px; } .kfn-detail__nav { padding: 12px 0; } .kfn-quote { margin-top: 21px; } .kfn-detail__back { margin-top: 13px; } }
@media (max-width: 370px) { .kfn-brand-card__body { padding-right: 14px; padding-left: 14px; } .kfn-grid { grid-template-columns: minmax(0,1fr); } .kfn-card__stage { aspect-ratio: .95 / 1; } }
@media (prefers-reduced-motion: reduce) { .kfn-studio *, .kfn-studio *::before, .kfn-studio *::after, .kfn-detail, .kfn-detail * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Collection pages use an open editorial gallery instead of a stack of boxed panels. */
.kfn-studio.is-collection-view .kfn-masthead {
  grid-template-columns: minmax(0,1fr) minmax(240px,360px);
  grid-template-rows: auto;
  align-items: center;
  gap: 0 24px;
  padding: 0 0 20px;
  border: 0;
  border-bottom: 1px solid #ded8ce;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.kfn-studio.is-collection-view .kfn-kicker { grid-column: 1; grid-row: 1; margin: 0; color: #817263; font-size: 10px; letter-spacing: .12em; }
.kfn-studio.is-collection-view .kfn-masthead h2,
.kfn-studio.is-collection-view .kfn-masthead > p { display: none; }
.kfn-studio.is-collection-view .kfn-search { grid-column: 2; grid-row: 1; height: 48px; border-color: #e2dcd2; border-radius: 3px; background: rgba(255,255,255,.78); }
.kfn-collection-head { padding: 25px 0 21px; border: 0; border-radius: 0; background: transparent; }
.kfn-collection-head .kfn-eyebrow { margin-bottom: 5px; color: #8b7155; }
.kfn-collection-head h3 { color: #28241f; font-size: clamp(39px,4vw,52px); }
.kfn-collection-head p { margin-top: 8px; color: #777168; }
.kfn-results-meta { padding: 16px 0 13px; border-top: 1px solid #e7e1d8; }
.kfn-grid { grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: clamp(20px,2.4vw,36px); row-gap: 33px; }
.kfn-card { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
.kfn-card:hover { border: 0; background: transparent; box-shadow: none; transform: translateY(-2px); }
.kfn-card.is-current { border: 0; box-shadow: none; }
.kfn-card.is-current .kfn-card__stage { box-shadow: inset 0 0 0 1px rgba(118,88,61,.42); }
.kfn-card__stage { aspect-ratio: 1.04 / 1; padding: clamp(18px,2.3vw,32px); border-radius: 3px; background: #f0eee9; transition: background-color .2s ease; }
.kfn-card:hover .kfn-card__stage { background: #ebe8e1; }
.kfn-card__meta { min-height: 0; padding: 13px 1px 0; border: 0; }
.kfn-card__meta small { margin-bottom: 4px; color: #81796f; font-size: 10px; }
.kfn-card__meta strong { color: #29251f; font-size: clamp(19px,1.6vw,23px); line-height: 1.2; }
.kfn-detail__image img { transition: opacity .18s ease; }

@media (max-width: 1100px) {
  .kfn-grid { grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 20px; row-gap: 28px; }
}
@media (max-width: 820px) {
  .kfn-studio.is-collection-view .kfn-masthead { grid-template-columns: minmax(0,1fr) minmax(210px,300px); padding-bottom: 17px; }
  .kfn-studio.is-collection-view .kfn-kicker { font-size: 9px; }
  .kfn-studio.is-collection-view .kfn-search { height: 45px; }
  .kfn-collection-head { padding: 21px 0 18px; }
  .kfn-grid { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 17px; row-gap: 25px; }
  .kfn-card__stage { aspect-ratio: .98 / 1; padding: 16px; }
  .kfn-card__meta { padding-top: 11px; }
}
@media (min-width: 821px) and (max-width: 1020px) { .kfn-detail__context-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) {
  .kfn-studio.is-collection-view .kfn-masthead { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; gap: 13px; padding-bottom: 14px; }
  .kfn-studio.is-collection-view .kfn-kicker { grid-column: 1; grid-row: 1; }
  .kfn-studio.is-collection-view .kfn-search { grid-column: 1; grid-row: 2; width: 100%; height: 46px; margin-top: 0; }
  .kfn-collection-head { padding: 19px 0 15px; }
  .kfn-collection-head h3 { font-size: 36px; }
  .kfn-results-meta { padding: 12px 0 10px; }
  .kfn-grid { column-gap: 12px; row-gap: 22px; }
  .kfn-card__stage { padding: 11px; }
  .kfn-card__meta { padding-top: 9px; }
  .kfn-card__meta strong { font-size: 17px; }
}
@media (max-width: 370px) { .kfn-grid { grid-template-columns: minmax(0,1fr); } .kfn-card__stage { aspect-ratio: .95 / 1; } }

/* Desktop collection: show an empty preview first, then update it when a door is selected. */
@media (min-width: 821px) {
  .kfn-detail.is-live {
    position: relative;
    inset: auto;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(300px,.82fr) minmax(0,1.18fr);
    align-items: start;
    gap: clamp(22px,3vw,44px);
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    margin: 4px 0 30px;
    padding: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .kfn-detail.is-live .kfn-detail__scrim { display: none; }
  .kfn-detail.is-live .kfn-detail__panel {
    position: sticky;
    top: 18px;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(280px,48vh) auto;
    align-self: start;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    border: 1px solid #e5dfd6;
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(36,29,21,.045);
    transform: none;
    transition: none;
  }
  .kfn-detail.is-live.is-empty .kfn-detail__panel { min-height: min(670px,calc(100vh - 36px)); grid-template-rows: minmax(0,1fr); }
  .kfn-detail.is-live.is-empty .kfn-detail__placeholder { position: relative; inset: auto; grid-row: 1; min-height: min(670px,calc(100vh - 36px)); }
  .kfn-detail.is-live .kfn-detail__image { min-height: 280px; padding: clamp(22px,3vw,38px); }
  .kfn-detail.is-live .kfn-detail__info { padding: 25px clamp(22px,2.5vw,34px) 30px; }
  .kfn-detail.is-live .kfn-detail__info h3 { margin-bottom: 18px; font-size: clamp(31px,3vw,42px); }
  .kfn-detail.is-live .kfn-detail__close { top: 12px; right: 12px; }
  .kfn-detail.is-live .kfn-detail__context {
    display: grid;
    grid-template-rows: auto 1fr;
    align-content: start;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
  }
  .kfn-detail.is-live .kfn-detail__context-head {
    position: static;
    padding: 0 0 14px;
    border-bottom: 1px solid #ded8ce;
    background: transparent;
    backdrop-filter: none;
  }
  .kfn-detail.is-live .kfn-detail__context-head .kfn-eyebrow { margin-bottom: 4px; }
  .kfn-detail.is-live .kfn-detail__context-head h2 { font-size: clamp(24px,2.5vw,32px); }
  .kfn-detail.is-live .kfn-detail__context-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 18px; padding-top: 16px; }
}
@media (min-width: 821px) and (max-width: 1020px) {
  .kfn-detail.is-live { grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap: 18px; }
  .kfn-detail.is-live .kfn-detail__context-grid { gap: 18px 12px; }
}

/* Touch devices can report a desktop-width layout viewport; keep them in the mobile flow. */
@media (pointer: coarse) and (max-width: 1100px) {
  .kfn-studio { padding: 18px 0 70px; }
  .kfn-shell { width: calc(100% - 32px); }
  .kfn-masthead, .kfn-studio.is-collection-view .kfn-masthead { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; gap: 5px; padding: 21px 19px 19px; }
  .kfn-masthead h2 { font-size: 41px; }
  .kfn-masthead > p { margin-top: 5px; font-size: 13px; }
  .kfn-search { grid-column: 1; grid-row: 4; height: 50px; margin-top: 12px; }
  .kfn-search__hint { display: none; }
  .kfn-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kfn-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .kfn-detail { align-items: stretch; padding: 0; }
  .kfn-detail__panel { display: flex; flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 0; }
  .kfn-detail__image { flex: 0 0 48vh; min-height: 48vh; height: auto; padding: 61px 24px 20px; }
  .kfn-detail__image img { max-height: 48vh; }
  .kfn-detail__info { flex: 0 0 auto; padding: 22px 24px calc(90px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) and (max-width: 560px) {
  .kfn-shell { width: calc(100% - 24px); }
  .kfn-brand-grid { grid-template-columns: minmax(0,1fr); }
  .kfn-grid { gap: 9px; }
}
@media (pointer: coarse) and (max-width: 370px) {
  .kfn-grid { grid-template-columns: minmax(0,1fr); }
}