/**
 * Section: Build Your Kit
 *
 * Ported from .docs/mockup/css/build.css (403 lines), values unchanged.
 * Tokens only, apart from the mockup's own structural literals (icon boxes,
 * hairline widths, the tile close button) which the section contract keeps.
 *
 * FOUR DELIBERATE DIFFERENCES FROM THE MOCKUP FILE.
 *
 * 1. SCOPED. `.part`, `.parts`, `.tile`, `.canvas` and `.palette` are the most
 *    collidable class names in the whole design system, and this section is not
 *    the only thing that can be on a page. Every rule is scoped under
 *    `.builder`. Nothing else in the theme claims any of them today; this is so
 *    it stays that way.
 *
 * 2. `.builder-dnd` IS THE FORM. The mockup's builder needs no form because it
 *    never submits anything. This one does — see the section file — so the grid
 *    lives on a `<form>` and its hidden inputs, nonce fields and JSON config
 *    are held out of the grid explicitly rather than trusting the UA default.
 *
 * 3. `pointer-events: none` ON THE DISABLED CTA. The mockup only sets
 *    `aria-disabled` and `cursor: not-allowed`, which still leaves the control
 *    clickable. It cannot be a real `disabled` attribute — a disabled submit is
 *    omitted from the POST along with its own name — so the empty state is
 *    enforced here instead, with the script and the server both re-checking.
 *
 * 4. `cursor: grab` ONLY WHEN DRAGGING WORKS. The mockup shows a grab cursor
 *    unconditionally. Dragging is an enhancement here, so the cursor and the
 *    `draggable` attribute both arrive with the script, which adds
 *    `.is-enhanced`.
 *
 * `.material-symbols-outlined`, `.btn-primary` and `.sr-only` are shared chrome
 * in components.css / base.css and are not redeclared.
 */

.builder {
  padding-block: var(--section-space-s);
  padding-inline: var(--space-gutter);
}

.builder-dnd {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-l);
  align-items: start;
}

/* The form's own plumbing must never become a grid item. */
.builder-dnd > input,
.builder-dnd > script {
  display: none;
}

/* --- WooCommerce notices ---
   Woo's own stylesheets are dequeued theme-wide (see catnip_trim_woo_styles),
   so each surface that prints notices styles them. Same treatment as
   assets/css/woo/pdp.css. */
.builder-notices {
  max-width: var(--container);
  margin-inline: auto;
}

.builder-notices:empty {
  display: none;
}

.builder-notices .woocommerce-message,
.builder-notices .woocommerce-info,
.builder-notices .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
  padding: var(--space-s) var(--space-m);
  border-left: 4px solid var(--eucalypt);
  border-radius: var(--radius-md);
  background: var(--coastal-soft);
  color: var(--charcoal);
  font-size: var(--text-small);
  line-height: 1.5;
}

.builder-notices .woocommerce-error {
  border-left-color: var(--terracotta);
  background: var(--pebble);
}

.builder-notices .woocommerce-message a,
.builder-notices .woocommerce-info a,
.builder-notices .woocommerce-error a {
  color: var(--deep-ocean);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Palette --- */
.builder .palette {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  background: var(--pebble);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.builder .palette-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-h3);
  color: var(--deep-ocean);
  line-height: 1;
}

.builder .palette-hint {
  font-size: var(--text-small);
  color: var(--graphite);
  line-height: 1.5;
  margin-top: calc(var(--space-s) * -1 + 4px);
}

/* `h3` here, `h4` in the mockup — a heading-level fix only, see the section
   file. The type treatment is the mockup's, unchanged. */
.builder .palette-group h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--space-xs);
}

.builder .parts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.builder .part {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  text-align: left;
  background: var(--off-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-s);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast), border-color var(--duration-fast);
}

.builder.is-enhanced .part {
  cursor: grab;
}

.builder .part:hover {
  border-color: var(--terracotta);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.builder.is-enhanced .part:active {
  cursor: grabbing;
}

.builder .part:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.builder .part.dragging {
  opacity: 0.45;
}

.builder .part-ic {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--coastal-soft);
  display: grid;
  place-items: center;
  color: var(--deep-ocean);
  overflow: hidden;
  flex-shrink: 0;
}

.builder .part-ic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.builder .part-ic .material-symbols-outlined {
  font-size: 22px;
}

.builder .part-name {
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--charcoal);
}

.builder .part-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--deep-ocean);
}

/* --- Canvas --- */
.builder .canvas-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.builder .canvas-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.builder .canvas-head h2 {
  font-size: var(--text-h3);
  font-weight: 800;
}

.builder .clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--graphite);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast), background var(--duration-fast);
}

.builder .clear-btn:hover {
  color: var(--terracotta);
  background: var(--pebble);
}

.builder .clear-btn:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.builder .clear-btn .material-symbols-outlined {
  font-size: 18px;
}

.builder .canvas {
  min-height: 440px;
  border: 2px dashed var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--off-white);
  padding: var(--space-m);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.builder .canvas.is-over {
  border-color: var(--terracotta);
  background: var(--coastal-soft);
}

/* [hidden] must beat the display rules below (server and script both toggle
   these, so it has to hold whether or not the script ever runs) */
.builder .canvas-empty[hidden],
.builder .build-tiles[hidden] {
  display: none;
}

.builder .canvas-empty {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2xs);
  color: var(--graphite);
  pointer-events: none;
}

.builder .canvas-empty .material-symbols-outlined {
  font-size: 48px;
  color: var(--coastal-blue);
  margin-bottom: var(--space-2xs);
}

.builder .canvas-empty strong {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h4);
  color: var(--deep-ocean);
}

.builder .canvas-empty span {
  font-size: var(--text-small);
  max-width: 42ch;
  line-height: 1.5;
}

/* --- Build tiles --- */
.builder .build-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-s);
}

.builder .tile {
  position: relative;
  background: var(--pebble);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-start;
  animation: scaleIn 0.35s var(--ease-out);
}

.builder .tile-rm {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--hairline-soft);
  color: var(--graphite);
  display: grid;
  place-items: center;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.builder .tile-rm:hover {
  background: var(--terracotta);
  color: var(--white);
}

.builder .tile-rm:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.builder .tile-rm .material-symbols-outlined {
  font-size: 16px;
}

.builder .tile-ic {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--coastal-soft);
  display: grid;
  place-items: center;
  color: var(--deep-ocean);
  overflow: hidden;
  flex-shrink: 0;
}

.builder .tile-ic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.builder .tile-ic .material-symbols-outlined {
  font-size: 24px;
}

.builder .tile-name {
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--charcoal);
  line-height: 1.3;
}

.builder .tile-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--deep-ocean);
}

/* --- Summary bar --- */
.builder .build-summary {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
  background: var(--deep-ocean);
  color: var(--off-white);
  border-radius: var(--radius-lg);
  padding: var(--space-m) var(--space-l);
}

.builder .bs-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}

.builder .bs-count {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--off-white);
}

.builder .bs-ship {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  /* Was --coastal-blue: 4.06:1 on Deep Ocean, under the AA floor of 4.5:1 for
     normal text, and this line is the one that motivates spend. --coastal-soft
     clears it. Same fix and same reasoning as cta-dark.css. */
  color: var(--coastal-soft);
}

.builder .bs-ship .material-symbols-outlined {
  font-size: 18px;
}

.builder .bs-ship.free {
  color: var(--eucalypt-on-dark);
}

.builder .bs-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.builder .bt-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  /* 11px is well under the large-text allowance, so --coastal-blue's 4.06:1
     fails here too. Bold does not rescue it below 18.66px. */
  color: var(--coastal-soft);
}

.builder .bt-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  color: var(--off-white);
}

.builder .build-summary .btn-primary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.builder .build-note {
  font-size: var(--text-small);
  color: var(--graphite);
  line-height: 1.5;
  max-width: 74ch;
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .builder-dnd {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  .builder .palette {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .builder .parts {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .builder .build-summary {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .builder .bs-total {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }

  .builder .build-summary .btn-primary {
    justify-content: center;
  }

  .builder .parts {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion: the tile entrance is decoration, and a canvas that pops on
   every add is exactly what a visitor asking for less motion wants less of. */
@media (prefers-reduced-motion: reduce) {
  .builder .tile {
    animation: none;
  }
}