/* Product configurator v2 — collapsible ordering guide.
   Shared by the public product page and the back-office preview; both wrap the
   markup (front/view/block/configurator-v2.twig) in a #configurator container.
   Loads after configurator.css so these #configurator-scoped rules override
   the generic .ucfg-* engine styles. */

/* --- collapsed hero banner --- */
#configurator .cfg-hero {
  background: var(--cz-primary);
  border-radius: 1.25rem;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#configurator .cfg-hero::after {
  /*content: "PRODUCT CONFIGURATOR";*/
  position: absolute;
  right: -1rem;
  bottom: -1.4rem;
  font-family: var(--cz-font-monospace, ui-monospace, Menlo, monospace);
  font-size: 3.25rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .05);
  pointer-events: none;
  white-space: nowrap;
}
#configurator .cfg-hero-eyebrow {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .375rem;
}
#configurator .cfg-hero-title {
  color: #fff;
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 .25rem;
}
#configurator .cfg-hero-sub {
  color: rgba(255, 255, 255, .65);
  font-size: .875rem;
  margin: 0;
}
#configurator .cfg-hero-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  color: var(--cz-primary);
  border-radius: 2rem;
  padding: .625rem 1.375rem;
  font-size: .875rem;
  font-weight: 600;
  z-index: 1;
  transition: transform .15s ease;
}
#configurator .cfg-hero:hover .cfg-hero-btn { transform: translateY(-1px); }
#configurator .cfg-hero-btn i { transition: transform .25s ease; }
#configurator .cfg-hero[aria-expanded="true"] .cfg-hero-btn i { transform: rotate(180deg); }
/* --- joined to the Instant Ship panel above it (instant-ship.css) ---
   The collapsed hero is styled as the last row of the Instant Ship table: same grey
   panel, a row rule on top, an icon tile where the rows have their photo, the title
   at the rows' title size and the button in the action column. Two ids outrank the
   plain #configurator rules above, so these apply at every width. */
#instant-ship + #configurator .cfg-hero {
  background: var(--cz-tertiary-bg);
  border-radius: 0 0 1.25rem 1.25rem;
  border-top: 1px solid var(--cz-border-color);
  padding: 1.125rem 3rem 1.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: .875rem;
}
#instant-ship + #configurator .cfg-hero::after {
  content: none;
}
/* the tile: sliders drawn inline so it needs neither the icon kit nor markup */
#instant-ship + #configurator .cfg-hero::before {
  content: "";
  width: 5.25rem;
  height: 5.25rem;
  border-radius: .75rem;
  background-color: var(--cz-body-bg);
  border: 1px solid var(--cz-border-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23002868' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9h24M4 16h24M4 23h24'/%3E%3Ccircle cx='21' cy='9' r='3' fill='%23fff'/%3E%3Ccircle cx='11' cy='16' r='3' fill='%23fff'/%3E%3Ccircle cx='18' cy='23' r='3' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2rem;
}
#instant-ship + #configurator .cfg-hero > div {
  min-width: 0;
}
#instant-ship + #configurator .cfg-hero-eyebrow {
  font-size: .8125rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cz-secondary-color);
  margin-bottom: .125rem;
}
/* same styling as the Instant Ship item title (.instant-ship-attrs): body face, not
   the heading face an h2 would get */
#instant-ship + #configurator .cfg-hero-title {
  font-family: var(--cz-body-font-family);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--cz-heading-color);
  margin: 0;
}
#instant-ship + #configurator .cfg-hero-sub {
  color: var(--cz-secondary-color);
  font-size: .8125rem;
  margin-top: .375rem;
  max-width: 60ch;
}
#instant-ship + #configurator .cfg-hero-btn {
  background: var(--cz-primary);
  color: #fff;
  font-size: .75rem;
  padding: .5rem 1rem;
}
#instant-ship + #configurator .cfg-hero:focus-visible {
  outline-offset: -3px;
}
@media (max-width: 767.98px) {
  #instant-ship + #configurator .cfg-hero {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    padding: 1rem 1.25rem 1.25rem;
  }
  #instant-ship + #configurator .cfg-hero::before {
    width: 4rem;
    height: 4rem;
    background-size: 1.5rem;
  }
  #instant-ship + #configurator .cfg-hero-btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
}
#configurator .cfg-hero:focus-visible {
  outline: 2px solid var(--cz-primary);
  outline-offset: 3px;
}

/* --- ordering-guide accordion --- */
#configurator .acc {
  background: var(--cz-body-bg);
  border: 1px solid var(--cz-border-color);
  border-radius: 1.25rem;
  overflow: hidden;
}
#configurator .acc-row + .acc-row { border-top: 1px solid var(--cz-border-color); }
#configurator .acc-row { position: relative; }
/* stepper rail connecting the badges */
#configurator .acc-row::before {
  content: "";
  position: absolute;
  left: calc(2.25rem - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cz-border-color);
}
#configurator .acc-row.acc-done::before { background: var(--cz-primary); }
#configurator .acc-row.acc-active:not(.acc-done)::before {
  background: linear-gradient(to bottom, var(--cz-primary) 2.25rem, var(--cz-border-color) 2.25rem);
}
#cfgSteps .acc-row:first-child::before { top: 1.375rem; }
#cfgSteps .acc-row:last-child::before { top: 0; bottom: auto; height: 1.875rem; }
#cfgSteps .acc-row:first-child:last-child::before { display: none; }
#configurator .acc-row.acc-open { background: var(--cz-tertiary-bg); }
#configurator .acc-row.acc-active { box-shadow: inset 3px 0 0 var(--cz-primary); }
#configurator .acc-head {
  display: grid;
  grid-template-columns: 2rem 1.375rem minmax(0, 1fr) auto 1rem;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
#configurator .acc-row:not(.acc-open) .acc-head:hover { background: var(--cz-tertiary-bg); }
#configurator .acc-head:focus-visible { outline: 2px solid var(--cz-primary); outline-offset: -2px; }
/* step badge: outlined = upcoming, filled + ring = current, filled check = done */
#configurator .acc-step {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--cz-border-color);
  color: var(--cz-secondary-color);
  background: var(--cz-body-bg);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
#configurator .acc-step i { font-size: .625rem; }
#configurator .acc-row.acc-done .acc-step {
  background: var(--cz-primary);
  border-color: var(--cz-primary);
  color: #fff;
}
#configurator .acc-row.acc-active .acc-step {
  background: var(--cz-primary);
  border-color: var(--cz-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--cz-primary-bg-subtle, rgba(0, 40, 104, .12));
}
#configurator .acc-chev {
  font-size: .75rem;
  color: var(--cz-secondary-color);
  text-align: center;
  transition: transform .25s ease;
}
#configurator .acc-row.acc-open .acc-chev { transform: rotate(180deg); color: var(--cz-emphasis-color); }
#configurator .acc-ico {
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--cz-primary);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
#configurator .acc-name {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--cz-emphasis-color);
  display: flex;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
}
#configurator .acc-req {
  font-size: .6875rem;
  font-weight: 500;
  color: var(--cz-danger);
  flex-shrink: 0;
}
#configurator .acc-value {
  font-family: var(--cz-font-monospace, ui-monospace, Menlo, monospace);
  font-size: .75rem;
  font-weight: 600;
  color: var(--cz-emphasis-color);
  background: var(--cz-tertiary-bg);
  border: 1px solid var(--cz-border-color);
  border-radius: 2rem;
  padding: .25rem .75rem;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#configurator .acc-value.acc-value-std {
  font-family: inherit;
  font-weight: 500;
  color: var(--cz-secondary-color);
}
#configurator .acc-value.acc-value-empty {
  font-family: inherit;
  font-weight: 500;
  color: var(--cz-primary-text-emphasis);
  background: var(--cz-primary-bg-subtle);
  border-color: transparent;
}
#configurator .acc-body { padding: .25rem 1.25rem 1.5rem 4rem; }
#configurator .acc-step-label {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cz-secondary-color);
  margin-bottom: .375rem;
}
@media (max-width: 575px) {
  /* phones: stack the hero so the title no longer wraps one word per line beside the button */
  #configurator .cfg-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
  }
  #configurator .cfg-hero-title { font-size: 1.25rem; }
  #configurator .acc-head { grid-template-columns: 1.75rem 1.25rem minmax(0, 1fr) auto 1rem; padding: .875rem 1rem; }
  #configurator .acc-body { padding-left: 1rem; }
  #configurator .acc-row::before { left: calc(1.875rem - 1px); }
}
#configurator .acc-note {
  font-size: .875rem;
  color: var(--cz-secondary-color);
  margin-bottom: .875rem;
}

/* --- option cards inside an open step --- */
#configurator .ucfg-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .625rem;
}
#configurator .ucfg-opt {
  background: var(--cz-body-bg);
  border: 1px solid var(--cz-border-color);
  border-radius: .875rem;
  padding: .875rem 1rem;
  font-family: inherit;
  font-size: .8125rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
#configurator .ucfg-opt:hover:not(.ucfg-disabled):not(.ucfg-selected) {
  border-color: var(--cz-primary);
  transform: translateY(-1px);
  box-shadow: 0 .375rem .875rem rgba(0, 0, 0, .07);
}
#configurator .ucfg-opt:focus-visible { outline: 2px solid var(--cz-primary); outline-offset: 2px; }
#configurator .ucfg-opt.ucfg-selected {
  background: var(--cz-primary);
  border-color: var(--cz-primary);
}
#configurator .ucfg-opt.ucfg-disabled { opacity: .38; cursor: not-allowed; }
#configurator .ucfg-code {
  font-family: var(--cz-font-monospace, ui-monospace, Menlo, monospace);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--cz-emphasis-color);
}
#configurator .ucfg-opt.ucfg-selected .ucfg-code { color: #fff; }
#configurator .ucfg-lbl {
  display: block;
  font-size: .75rem;
  color: var(--cz-secondary-color);
  margin-top: .1875rem;
}
#configurator .ucfg-opt.ucfg-selected .ucfg-lbl { color: rgba(255, 255, 255, .75); }
#configurator .ucfg-quote-flag {
  display: inline-block;
  font-size: .625rem;
  background: var(--cz-warning-bg-subtle);
  color: var(--cz-warning-text-emphasis);
  border-radius: .375rem;
  padding: .0625rem .375rem;
  margin-left: .375rem;
  vertical-align: .0625rem;
}
#configurator .ucfg-opt.ucfg-selected .ucfg-quote-flag { background: rgba(255, 255, 255, .2); color: #fff; }
#configurator .ucfg-params { margin-top: .875rem; display: flex; gap: 1rem; flex-wrap: wrap; }
#configurator .ucfg-params label {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: var(--cz-emphasis-color);
  margin-bottom: .25rem;
}
#configurator .ucfg-params input,
#configurator .ucfg-params select {
  border: 1px solid var(--cz-border-color);
  border-radius: .625rem;
  padding: .4375rem .625rem;
  font-family: inherit;
  font-size: .8125rem;
  width: 8.5rem;
  background: var(--cz-body-bg);
}
#configurator .ucfg-params input:focus,
#configurator .ucfg-params select:focus { outline: none; border-color: var(--cz-primary); }

/* --- summary card --- */
#configurator .cfg-summary { position: sticky; top: 6rem; }
#configurator .cfg-code-plate {
  background: var(--cz-primary);
  border-radius: .875rem;
  padding: 1.125rem 1.25rem;
  position: relative;
  min-height: 4.25rem;
  display: flex;
  align-items: center;
}
#configurator .cfg-code-text {
  font-family: var(--cz-font-monospace, ui-monospace, Menlo, monospace);
  font-size: 1rem;
  line-height: 1.6;
  color: #fff;
  word-break: break-all;
  padding-right: 2.5rem;
}
#configurator .cfg-code-text.cfg-placeholder {
  font-family: inherit;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .55);
}
#configurator .cfg-tok { border-radius: .25rem; padding: 0 .0625rem; transition: background .2s ease; }
#configurator .cfg-tok.cfg-tok-active { background: rgba(255, 255, 255, .22); }
#configurator .cfg-sep { color: rgba(255, 255, 255, .45); }
#configurator .cfg-copy-btn {
  position: absolute;
  top: .625rem;
  right: .625rem;
  background: rgba(255, 255, 255, .12);
  border: 0;
  border-radius: .5rem;
  color: rgba(255, 255, 255, .85);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
#configurator .cfg-copy-btn:hover { background: rgba(255, 255, 255, .25); }
#configurator .cfg-status { font-size: .8125rem; }
#configurator .cfg-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  font-weight: 600;
  color: var(--cz-emphasis-color);
  margin-bottom: .375rem;
}
#configurator .cfg-progress-track {
  height: .375rem;
  border-radius: 1rem;
  background: var(--cz-border-color);
  overflow: hidden;
  margin-bottom: .875rem;
}
#configurator .cfg-progress-bar {
  height: 100%;
  border-radius: 1rem;
  background: var(--cz-primary);
  transition: width .35s ease;
}
#configurator .cfg-chip-intro {
  font-size: .8125rem;
  color: var(--cz-secondary-color);
  margin-bottom: .5rem;
}
#configurator .cfg-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
#configurator .cfg-chip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  background: var(--cz-body-bg);
  color: var(--cz-emphasis-color);
  border: 1px solid var(--cz-border-color);
  border-radius: 2rem;
  padding: .3125rem .875rem;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#configurator .cfg-chip i {
  font-size: .6875rem;
  color: var(--cz-primary);
  flex-shrink: 0;
}
#configurator .cfg-chip:hover {
  transform: translateY(-1px);
  border-color: var(--cz-primary);
  box-shadow: 0 .25rem .625rem rgba(0, 0, 0, .08);
}
#configurator .cfg-warnings {
  font-size: .8125rem;
  color: var(--cz-warning-text-emphasis);
  background: var(--cz-warning-bg-subtle);
  border-radius: .625rem;
  padding: .625rem .75rem;
}
#configurator .acc-row.acc-flash { animation: cfg-flash 1.2s ease; }
@keyframes cfg-flash {
  0%, 60% { box-shadow: inset 0 0 0 2px var(--cz-primary); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  #configurator .ucfg-opt, #configurator .cfg-chip, #configurator .cfg-progress-bar,
  #configurator .cfg-hero-btn, #configurator .cfg-hero-btn i, #configurator .cfg-tok,
  #configurator .acc-chev { transition: none; }
  #configurator .acc-row.acc-flash { animation: none; box-shadow: inset 0 0 0 2px var(--cz-primary); }
}