/* Combo-Kits storefront (v1.9.0 -- spotlight layout).
   One combo big, thumbnail tabs to switch, click hero = fullscreen. */

* { box-sizing: border-box; }

:root {
  --bg:         #faf7f0;
  --panel:      #ffffff;
  --ink:        #1a1a1a;
  --ink-soft:   #555;
  --ink-mute:   #888;
  --line:       #e3ddd0;
  --accent:     #ffd800;
  --primary:    #0a2548;
  --primary-2:  #1d4f91;
  --good:       #1a8531;
  --bad:        #a82626;
  --shadow:     0 4px 12px rgba(0,0,0,0.06);
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---------- top bar ---------- */
.ck-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 28px;
  background: var(--panel); box-shadow: var(--shadow);
}
.ck-brand {
  display: flex; align-items: center; gap: 20px;
  text-decoration: none; color: var(--ink);
  min-width: 0;
}
.ck-brand__logo { height: 60px; width: auto; display: block; flex-shrink: 0; }
.ck-brand__text { min-width: 0; }
.ck-brand__text strong {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px; font-weight: 700; line-height: 1.1;
  color: var(--primary); letter-spacing: -0.005em;
}
.ck-brand__text small {
  display: block; margin-top: 3px;
  font-size: 13px; color: var(--ink-soft); line-height: 1.35;
}
.ck-cart-chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  flex-shrink: 0;
}
.ck-cart-chip:hover { border-color: var(--primary-2); box-shadow: 0 3px 8px rgba(0,0,0,0.08); }
.ck-cart-chip__count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--primary);
  font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
}
.ck-cart-chip__meta { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.ck-cart-chip__total { color: var(--primary); font-weight: 800; font-size: 15px; }
@media (max-width: 700px) {
  .ck-topbar { padding: 12px 16px; gap: 12px; }
  .ck-brand__logo { height: 44px; }
  .ck-brand__text strong { font-size: 18px; }
  .ck-brand__text small { display: none; }
  .ck-cart-chip { padding: 4px 14px 4px 4px; gap: 8px; }
  .ck-cart-chip__count { width: 30px; height: 30px; font-size: 14px; }
}

/* ---------- SPOTLIGHT LAYOUT (v1.9.1: two-column hero + detail) ---------- */
.ck-spotlight {
  /* v1.11.1: was 1200px. On a 1676px window that left 231px of empty margin
     on the left and 245px on the right -- nearly 500px of the screen doing
     nothing while the ornament sat small in the middle. 1500px reclaims most
     of it and still keeps a comfortable gutter on very wide monitors. */
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ck-spot-row {
  display: grid;
  /* v1.11.0: was a 50/50 split, which left the picker only ~512px -- too
     narrow for a card grid. The Ornament Configurator gets this right: the
     detail panel is the NARROW column and the grid gets the room. Same shape
     here, so the two pages read as one store. */
  grid-template-columns: minmax(320px, 560px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .ck-spot-row { grid-template-columns: 1fr; }
}

/* ---------- HERO -- the big rotating ball ---------- */
.ck-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #e8ecec 0%, #d6dcd9 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.ck-hero__stage {
  /* v1.11.1: 4:5 -- the NATIVE ratio of the rendered videos (900x1125).
     It was 1:1, which meant object-fit:cover cropped the top and bottom off
     every ornament: you lost the tip of the finial and the crown of the ball
     on the one image that is supposed to sell the thing. Matching the source
     ratio shows the whole ornament with no crop at all. */
  aspect-ratio: 4 / 5;
  max-height: 80vh;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #e8ecec 0%, #d6dcd9 100%);
  line-height: 0; font-size: 0;
}
.ck-hero__video, .ck-hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* v1.9.3: dad's number -- center 50%. Ball framed dead-center of the
     available crop; equal breathing above ball and below finial. */
  object-position: center 50%;
  display: block;
  vertical-align: top;
  background: transparent;
}
.ck-hero__zoom-hint {
  position: absolute;
  bottom: 14px; right: 16px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 160ms ease;
}
.ck-hero:hover .ck-hero__zoom-hint { opacity: 1; }

/* ---------- v1.11.1: left column = hero + the four-sides strip ---------- */
.ck-herocol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ck-sides {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px 14px;
  box-shadow: var(--shadow);
}
.ck-sides__cap {
  display: block;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 9px;
}
.ck-sides__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.ck-side {
  position: relative;
  appearance: none; padding: 0; border: 2px solid transparent;
  border-radius: 10px; overflow: hidden; cursor: zoom-in;
  background: #f4efe4; line-height: 0;
  transition: border-color 140ms ease, transform 140ms ease;
}
.ck-side:hover { border-color: var(--primary-2); transform: translateY(-2px); }
.ck-side:focus-visible { outline: 3px solid var(--primary-2); outline-offset: 2px; }
.ck-side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ck-side__n {
  position: absolute; left: 5px; top: 5px;
  min-width: 17px; height: 17px; border-radius: 999px;
  background: rgba(10,37,72,0.78); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .ck-side { transition: none; }
  .ck-side:hover { transform: none; }
}

/* ---------- v1.11.1: prices ---------- */
.ck-tab__price {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px; font-weight: 700;
  color: var(--primary);
}
.ck-tab__price s { color: var(--ink-mute); font-weight: 400; font-size: 12px; margin-right: 3px; }
.ck-detail__price {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px; font-weight: 700;
  color: var(--primary);
  margin-right: auto;
}
.ck-detail__price s { color: var(--ink-mute); font-weight: 400; font-size: 17px; margin-right: 6px; }
/* Fullscreen -- fill the screen edge-to-edge. */
.ck-hero__stage:fullscreen, .ck-hero__stage:-webkit-full-screen {
  aspect-ratio: auto;
  max-height: none;
  width: 100vw; height: 100vh;
  background: #0a0c14;
  border-radius: 0;
  cursor: default;
}
.ck-hero__stage:fullscreen .ck-hero__video,
.ck-hero__stage:fullscreen .ck-hero__img {
  width: 100vw; height: 100vh; object-fit: contain;
}

/* ---------- DETAIL under hero -- title, tabs, actions ---------- */
.ck-detail {
  background: var(--panel);
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: var(--shadow);
}
.ck-detail__eyebrow {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.ck-detail__title {
  margin: 0 0 8px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px; font-weight: 700; color: var(--ink);
  line-height: 1.2; letter-spacing: -0.005em;
}
.ck-detail__desc {
  margin: 6px 0 18px;
  color: var(--ink-soft); font-size: 14.5px; line-height: 1.6;
}

/* Combo-switch tabs
   v1.10.1: this was a single non-wrapping flex row of 200px thumbs. That fit
   when there were three combos. At eight it produced 1876px of tiles inside a
   512px column, so five of the eight were only reachable by dragging the row
   sideways -- which visitors do not do. It is now a wrapping 4-up grid: every
   kit is on screen at once, and it keeps wrapping on its own as more sets are
   added, which a single row never would.
   Thumb size is now driven by the column width instead of a fixed px value,
   so it lands near 112px in the current layout rather than Ron's old 200px.
   That trade -- smaller thumbs in exchange for nothing being hidden -- is the
   whole point of the change. To go back to one big row, restore
   display:flex + overflow-x:auto here and the fixed width in .ck-tab__thumb. */
.ck-tabs {
  /* auto-fill, not a fixed count: the grid re-flows on its own as combos are
     added and as the column width changes. Same rule the singles page uses. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.ck-tab {
  /* v1.11.0: a real product card (image / name / buy), matching .ia-card on
     the Ornament Configurator. NOTE: this is a div with role="button", not a
     <button> -- it contains its own Add button, and a button inside a button
     is invalid HTML that browsers silently drop. Keyboard handling for the
     card is wired up in combo_kits.js. */
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7f1e0 0%, #e9dfc6 100%);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.ck-tab:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.13); }
.ck-tab:focus-visible { outline: 3px solid var(--primary-2); outline-offset: 2px; }
.ck-tab.is-active {
  border-color: var(--primary-2);
  box-shadow: 0 3px 10px rgba(29,79,145,0.22);
}
.ck-tab__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 8px 10px;
  min-width: 0;
}
.ck-tab__add {
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 8px 6px;
  background: var(--accent);
  color: var(--primary);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 120ms ease;
}
.ck-tab__add:hover { filter: brightness(0.94); }
.ck-tab__add:disabled { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .ck-tab, .ck-tab__add { transition: none; }
  .ck-tab:hover { transform: none; }
}
.ck-tab__thumb {
  /* v1.11.0: square, edge-to-edge at the top of the card -- the singles page
     shows the whole ornament this way, and the round crop was cutting the
     finial off. Was a 200px circle (v1.9.5, "dad's number"). */
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4efe4;
  flex-shrink: 0;
}
.ck-tab__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;   /* matches the hero framing */
  display: block;
}
.ck-tab__label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px; font-weight: 700;
  line-height: 1.2;
  /* v1.10.1: was nowrap, which is what let the old row run to 1876px.
     Long names ("Faith, Joy, Love, Peace", "Pledge of Allegiance") now wrap
     inside a ~106px tile. Clamped to two lines with the height reserved, so
     every tile in the grid is exactly the same height whether its name runs
     to one line or two -- without the reserve, one long name makes its whole
     row taller than the other. */
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  padding-bottom: 0;
}

/* Gluing upsell (inline checkbox above Add-to-Cart) */
.ck-upsell {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #fffbe8;
  border: 1px solid #e6d78a;
  border-radius: 10px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.ck-upsell:hover { background: #fff6d1; border-color: #d9c56a; }
.ck-upsell input {
  margin-top: 3px; width: 18px; height: 18px;
  accent-color: var(--good); flex-shrink: 0; cursor: pointer;
}
.ck-upsell__text { flex: 1; }
.ck-upsell__text strong { display: block; color: var(--ink); font-size: 14px; font-weight: 700; }
.ck-upsell__price {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  background: var(--good); color: #fff;
  font-style: normal; font-weight: 800; font-size: 12px;
  border-radius: 6px; vertical-align: 1px;
}
.ck-upsell__text small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }

/* Actions row -- qty + Add to Cart */
.ck-detail__actions { display: flex; align-items: stretch; gap: 12px; }
.ck-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--panel);
}
.ck-qty__btn {
  width: 44px; height: 52px; border: 0; background: transparent;
  font: inherit; font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.ck-qty__btn:hover { background: #f4efe4; }
.ck-qty__n {
  min-width: 40px; padding: 0 12px;
  font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; text-align: center;
}
.ck-add {
  flex: 1;
  padding: 14px 22px; border: 0; border-radius: 10px;
  background: var(--good); color: #fff;
  font: inherit; font-weight: 800; font-size: 16px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.ck-add:hover:not(:disabled) { background: #15702a; transform: translateY(-1px); }
.ck-add:disabled { background: #8db99a; cursor: not-allowed; }

/* ---------- EXTRAS section (below the fold) ---------- */
.ck-extras { display: flex; flex-direction: column; gap: 14px; }

/* Standalone Gluing Guides button */
.ck-gluing-btn {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--good);
  border-radius: 12px;
  background: #f6fff2;
  color: var(--ink);
  cursor: pointer; text-align: left;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  font: inherit;
}
.ck-gluing-btn:hover {
  background: #e9fbe0; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(26, 133, 49, 0.15);
}
.ck-gluing-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.ck-gluing-btn__icon {
  font-size: 22px; flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 8px; border: 1px solid rgba(26,133,49,0.3);
}
.ck-gluing-btn__label { flex: 1; min-width: 0; }
.ck-gluing-btn__label strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ck-gluing-btn__label small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.ck-gluing-btn__cta {
  flex-shrink: 0; padding: 9px 16px; border-radius: 8px;
  background: var(--good); color: #fff;
  font-weight: 800; font-size: 13px; white-space: nowrap;
}
.ck-gluing-btn__cta em { font-style: normal; font-weight: 800; margin-left: 4px; }

/* Materials note */
.ck-materials {
  padding: 16px 20px;
  background: #f5eddb; border-left: 3px solid #b89a52;
  border-radius: 8px;
  color: var(--ink-soft); font-size: 13px; line-height: 1.6;
}
.ck-materials strong {
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px; font-weight: 700;
}

/* ---------- v1.9.6-7: hero-click modal (proper lightbox, not native fullscreen) ---------- */
.ck-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  /* v1.9.7: anchor near the top, not dead-center -- centered vertically
     leaves too much backdrop above and the ball reads as "too low". */
  justify-content: flex-start;
  padding: max(32px, 4vh) 24px 24px;
  background: rgba(20, 22, 30, 0.9);
  z-index: 10000;
  animation: ck-modal-fadein 180ms ease;
  overflow-y: auto;
}
.ck-modal.is-open { display: flex; flex-direction: column; }
@keyframes ck-modal-fadein { from { opacity: 0; } to { opacity: 1; } }

.ck-modal__stage {
  position: relative;
  width: min(96vw, 900px);
  max-height: 85vh;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #e8ecec 0%, #d6dcd9 100%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.ck-modal__video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* v1.9.8: dad's ask -- object-position: top so the ball anchors to the top
     of the modal frame and the finial trails below. */
  object-position: top;
  display: block; background: transparent;
}
.ck-modal__stage:hover::after {
  content: 'paused';
  position: absolute; top: 12px; left: 14px;
  background: rgba(0,0,0,0.55); color: #fff;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  pointer-events: none;
}
.ck-modal__caption {
  margin-top: 14px;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px; font-weight: 700;
  text-align: center;
  max-width: min(96vw, 900px);
}
.ck-modal__close {
  position: fixed; top: 18px; right: 22px;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--primary);
  font-size: 22px; font-weight: 700; line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 120ms ease, background 120ms ease;
}
.ck-modal__close:hover { background: #fff; transform: scale(1.06); }
@media (max-width: 600px) {
  .ck-modal { padding: 12px; }
  .ck-modal__caption { font-size: 16px; margin-top: 10px; }
  .ck-modal__close { top: 10px; right: 12px; }
}

/* ---------- Toast ---------- */
.ck-toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--primary); color: #fff;
  padding: 12px 22px; border-radius: 8px;
  font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 10001;
}
.ck-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ck-toast.is-error { background: var(--bad); }

/* ---------- Sticky cart footer ---------- */
.ck-cartbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--primary); color: #fff;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.25);
  z-index: 100;
}
.ck-cartbar__inner {
  max-width: 1000px; margin: 0 auto;
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ck-cartbar__meta { display: inline-flex; align-items: baseline; gap: 10px; font-size: 15px; color: rgba(255,255,255,0.85); }
.ck-cartbar__count { font-weight: 700; }
.ck-cartbar__sep { color: rgba(255,255,255,0.55); }
.ck-cartbar__total { color: #fff; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.ck-cartbar__checkout {
  padding: 10px 20px; border-radius: 8px;
  background: var(--accent); color: var(--primary);
  text-decoration: none; font-weight: 800; font-size: 14px;
  transition: filter 120ms ease, transform 120ms ease;
}
.ck-cartbar__checkout:hover { filter: brightness(0.96); transform: translateY(-1px); }
.ck-cartbar[data-count="0"] .ck-cartbar__checkout {
  background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); pointer-events: none;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 700px) {
  .ck-spotlight { padding: 12px 14px 90px; gap: 14px; }
  .ck-hero__stage { aspect-ratio: 1 / 1; max-height: 58vh; }
  .ck-detail { padding: 16px 18px; }
  .ck-detail__title { font-size: 22px; }
  .ck-detail__desc { font-size: 13.5px; }
  /* v1.11.0: smaller minimum track on phones so two cards still sit side by
     side instead of one giant card per row. */
  .ck-tabs { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .ck-tab__body { padding: 6px 6px 8px; gap: 6px; }
  .ck-tab__label { font-size: 12px; }
  .ck-tab__add { font-size: 11px; padding: 7px 4px; }
  .ck-gluing-btn { flex-direction: column; text-align: center; }
  .ck-gluing-btn__cta { width: 100%; padding: 12px; }
  .ck-cartbar__inner { padding: 10px 14px; }
  .ck-cartbar__total { font-size: 17px; }
}