/* Cocochoco UK kit presentation, adapted from the 20 October IE reference. */
.coco-kit-page { margin: 0; }
.coco-kit-page .coco-kit-hero {
  background: var(--coco-ink);
  color: var(--coco-white);
  padding-block: clamp(64px, 7vw, 104px);
  border-bottom: 3px solid var(--coco-gold);
}
.coco-kit-page .coco-kit-hero .coco-kicker { color: var(--coco-gold-bright); }
.coco-kit-page .coco-kit-hero h1 {
  max-width: 1020px;
  margin: 22px 0;
  font: 850 clamp(40px, 5.3vw, 76px)/.98 var(--coco-display);
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.coco-kit-hero__lead { max-width: 760px; margin: 24px 0 0; color: var(--coco-stone); line-height: 1.7; }
.coco-kit-hero__rates { margin-top: 28px; color: var(--coco-gold-bright); font-weight: 700; font-size: .9rem; line-height: 1.8; }
.coco-kit-builder-band { background: var(--coco-paper); padding-block: clamp(48px, 6vw, 88px); }
.coco-kit-intro { margin-bottom: 44px; max-width: 900px; }
.coco-kit-intro h2,
.coco-kit-help h2 { font: 800 clamp(25px, 2.7vw, 38px)/1.08 var(--coco-display); letter-spacing: -.04em; text-transform: uppercase; margin: 18px 0; }
.coco-kit-intro > p:not(.coco-kicker) { margin-top: 16px; line-height: 1.65; }
.coco-kit-trade-note { font-size: .88rem; color: var(--coco-muted); }
.coco-kit-trade-note a { font-weight: 700; text-underline-offset: 3px; }
.coco-kit-help { background: var(--coco-white); border-top: 1px solid var(--coco-rule); padding-block: clamp(56px, 6vw, 88px); }
.coco-kit-help .wp-block-columns { gap: clamp(36px, 7vw, 112px); margin: 0; align-items: stretch; }
.coco-kit-help .wp-block-column { min-width: 0; }
.coco-kit-help .wp-block-column > p:not(.coco-kicker) { margin-block: 18px; line-height: 1.7; color: var(--coco-muted); }
.coco-kit-help .wp-block-buttons { margin-top: 28px; }
.coco-kit-help .wp-element-button { background: var(--coco-gold-metal-button); border: 1px solid var(--coco-gold-dark); border-radius: 0; padding: 17px 24px; font: 800 .75rem/1.3 var(--coco-ui); letter-spacing: .04em; text-transform: uppercase; color: #fff; }

.coco-kit-page .ssdb-builder {
  --ssdb-accent: var(--coco-gold-dark) !important;
  --ssdb-button: var(--coco-gold-dark) !important;
  --ssdb-button-text: #fff !important;
  --ssdb-button-radius: 0 !important;
  --ssdb-heading-font: var(--coco-display) !important;
  --ssdb-paper: var(--coco-paper) !important;
  --ssdb-ink: var(--coco-ink) !important;
  --ssdb-muted: var(--coco-muted) !important;
  --ssdb-surface: #fff !important;
  --ssdb-card: #fff !important;
  --ssdb-line: var(--coco-rule) !important;
  margin: 0;
  padding: 0;
  font-family: var(--coco-body);
  border: 0;
  border-radius: 0;
  max-width: 100%;
}
.coco-kit-page .ssdb-product,
.coco-kit-page .ssdb-builder .ssdb-milestones li,
.coco-kit-page .ssdb-builder .ssdb-option-trigger,
.coco-kit-page .ssdb-builder .ssdb-dialog,
.coco-kit-page .ssdb-builder .ssdb-option-dialog { border-radius: 0; box-shadow: none; }
.coco-kit-page .ssdb-builder .ssdb-product { background: #fff; border-color: var(--coco-rule); }
.coco-kit-page .ssdb-builder .ssdb-product-copy,
.coco-kit-page .ssdb-builder .ssdb-option-row[data-selected=true],
.coco-kit-page .ssdb-builder .ssdb-product .ssdb-quantity,
.coco-kit-page .ssdb-builder .ssdb-option-quantity { background: #fff; }
/* Real button styling, retaining the engine's accessible names and selections. */
.coco-kit-page .ssdb-builder .ssdb-option-trigger,
.coco-kit-page .ssdb-builder .ssdb-add {
  background: var(--coco-ink);
  border: 1px solid var(--coco-ink);
  color: #fff;
  font: 700 15px/1.35 var(--coco-ui);
  min-height: 48px;
  padding: 12px 14px;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease;
}
.coco-kit-page .ssdb-builder .ssdb-option-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* One compact line in both states, independent of the selection length. */
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  flex-shrink: 0;
}
.coco-kit-page .ssdb-builder .ssdb-option-trigger::before { content: "Choose sizes"; line-height: 20px; }
.coco-kit-page .ssdb-builder .ssdb-is-selected .ssdb-option-trigger::before { content: none; }
.coco-kit-page .ssdb-builder .ssdb-option-trigger::after {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  background: currentColor;
  mask: url("pencil.svg") center / contain no-repeat;
}
.coco-kit-page .ssdb-builder .ssdb-option-chevron,
.coco-kit-page .ssdb-builder .ssdb-product:not(.ssdb-is-selected) .ssdb-option-value { display: none; }
.coco-kit-page .ssdb-builder .ssdb-option-value { color: #fff; font-size: 12px; font-weight: 500; line-height: 20px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.coco-kit-page .ssdb-builder .ssdb-option-trigger:hover:not(:disabled),
.coco-kit-page .ssdb-builder .ssdb-option-trigger:focus-visible,
.coco-kit-page .ssdb-builder .ssdb-add:hover:not(:disabled),
.coco-kit-page .ssdb-builder .ssdb-add:focus-visible { background: var(--coco-gold-dark); color: #fff; }
/* Denser desktop browsing; retain the builder's existing smaller-screen grids. */
@media (min-width: 1100px) {
  .coco-kit-page .ssdb-builder .ssdb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.coco-kit-page .ssdb-builder .ssdb-product h3 { font: 800 clamp(16px, 1.4vw, 20px)/1.2 var(--coco-display); text-transform: uppercase; letter-spacing: -.025em; }
.coco-kit-page .ssdb-builder .ssdb-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; color: var(--coco-muted); }
.coco-kit-page .ssdb-builder .ssdb-product-image { background: #fff; aspect-ratio: 1.15; }
.coco-kit-page .ssdb-builder .ssdb-product-image img {
  box-sizing: border-box;
  object-fit: contain;
  padding: clamp(16px, 2vw, 28px);
}
.coco-kit-page .ssdb-builder .ssdb-primary { background: var(--coco-gold-metal-button); color: #fff; border: 1px solid var(--coco-gold-dark); border-radius: 0; font: 800 .75rem/1.3 var(--coco-ui); text-transform: uppercase; letter-spacing: .04em; }
/* Keep the gradient in place: removing it on hover flashes before the colour transition. */
.coco-kit-page .ssdb-builder .ssdb-primary,
.coco-kit-help .wp-element-button { transition: filter 160ms ease; }
.coco-kit-page .ssdb-builder .ssdb-primary:hover:not(:disabled),
.coco-kit-page .ssdb-builder .ssdb-primary:focus-visible:not(:disabled),
.coco-kit-help .wp-element-button:hover,
.coco-kit-help .wp-element-button:focus-visible { background: var(--coco-gold-metal-button); color: #fff; filter: brightness(1.08); }
.coco-kit-page .ssdb-builder .ssdb-tray {
  background: var(--coco-white);
  border: 1px solid var(--coco-rule);
  border-top: 3px solid var(--coco-gold);
  border-radius: 0;
  padding: 20px 28px max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px #100e0d0a;
}
.coco-kit-page .ssdb-builder .ssdb-tray-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 28px; }
.coco-kit-page .ssdb-builder .ssdb-tray-count { font-size: 12px; line-height: 1.5; color: var(--coco-muted); }
.coco-kit-page .ssdb-builder .ssdb-tray-total { font: 800 30px/1.4 var(--coco-display); letter-spacing: -.04em; }
.coco-kit-page .ssdb-builder .ssdb-tray-reward { font-size: 13px; line-height: 1.5; max-width: none; }
.coco-kit-page .ssdb-builder .ssdb-tray-main > [data-action="review"] { width: 180px; min-width: 180px; min-height: 52px; padding: 16px 24px; }
.coco-kit-page .ssdb-builder .ssdb-tray-main > .ssdb-tray-hint { font-size: 13px; }
.coco-kit-page .ssdb-builder .ssdb-dialog,
.coco-kit-page .ssdb-builder .ssdb-option-dialog { background: #fff; color: var(--coco-ink); }
.coco-kit-page .ssdb-builder .ssdb-review-head h3 { font-family: var(--coco-display); font-weight: 800; text-transform: uppercase; }
@media (max-width: 780px) {
  .coco-kit-page .ssdb-builder .ssdb-tray-main { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .coco-kit-page .ssdb-builder .ssdb-tray-main > [data-action="review"] { width: 140px; min-width: 140px; min-height: 48px; padding: 14px 16px; }
}
@media (max-width: 600px) {
  .coco-kit-page .coco-kit-hero { padding-block: 48px 44px; }
  .coco-kit-hero__rates { max-width: 31ch; font-size: .8rem; }
  .coco-kit-intro { margin-bottom: 32px; }
  /* Reserve the measured fixed tray height so its end-stop clears the final row. */
  .coco-kit-page .ssdb-builder { --ssdb-grid-gap: 12px; padding-bottom: calc(var(--ssdb-tray-height, 160px) + 24px); }
  .coco-kit-page .ssdb-builder .ssdb-product-copy { padding: 12px; }
  .coco-kit-page .ssdb-builder .ssdb-product h3 { font-size: 15px; }
  .coco-kit-page .ssdb-builder .ssdb-description { font-size: 12px; -webkit-line-clamp: 2; }
  .coco-kit-page .ssdb-builder .ssdb-base-price { font-size: 15px; }
  .coco-kit-page .ssdb-builder .ssdb-product-image img { padding: 12px; }
  .coco-kit-page .ssdb-builder .ssdb-tray { padding: 14px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .coco-kit-page .ssdb-builder .ssdb-tray-total { font-size: 26px; }
}

/* Kit tier identities remain visible before unlock. */
.coco-kit-page .ssdb-builder .ssdb-heading-rewards .ssdb-milestones li[data-usable=false] { border-bottom-color: var(--ssdb-fire); }

/* Desktop size editing stays over its own product, with native modal semantics. */
@media (min-width: 781px) and (min-height: 480px) {
  .coco-kit-page .ssdb-builder .ssdb-option-dialog[data-coco-card-overlay] {
    inset: var(--coco-option-top) auto auto var(--coco-option-left);
    width: var(--coco-option-width);
    height: var(--coco-option-height);
    max-width: calc(100vw - 32px);
    max-height: var(--coco-option-height);
    border: 2px solid var(--coco-ink);
    box-sizing: border-box;
    overflow: hidden;
    transform-origin: 50% 50%;
  }
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay][open] {
    display: flex;
    flex-direction: column;
    animation: coco-kit-card-reveal 340ms cubic-bezier(.2, 0, 0, 1) both;
  }
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay]::backdrop {
    background: rgb(16 14 13 / 9%);
    animation: coco-kit-backdrop-in 220ms ease-out both;
  }
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay] .ssdb-option-head,
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay] .ssdb-option-footer { flex: 0 0 auto; padding: 16px; }
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay] .ssdb-option-head h3 { font-size: 16px; line-height: 1.3; }
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay] .ssdb-option-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay] .ssdb-option-row { grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; padding: 14px 8px; }
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay] .ssdb-option-quantity { grid-template-columns: 44px minmax(0, 1fr) 44px; width: 120px; }
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay] .ssdb-option-footer { gap: 12px; }
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay] .ssdb-option-footer > div { min-width: 0; }
  .coco-kit-page .coco-options-active .ssdb-product-image img { transform: scale(.96); }
}
@keyframes coco-kit-card-reveal {
  from { opacity: .25; transform: perspective(1000px) rotateY(-55deg); }
  to { opacity: 1; transform: perspective(1000px) rotateY(0); }
}
@keyframes coco-kit-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay][open],
  .coco-kit-page .ssdb-option-dialog[data-coco-card-overlay]::backdrop { animation: none; }
  .coco-kit-page .coco-options-active .ssdb-product-image img { transform: none; }
}