/* The single-garment "discounts apply after 5+" note is baked into this
   product's description content (not plugin-generated) and doesn't apply
   to packs, which are fixed-price with no bulk-discount tiers. This CSS
   file only loads on pack product pages (CPF_Pack_Handler::enqueue_assets),
   so hiding it here is scoped to packs without touching the content or
   any other product. */
.c44-discount-note {
  display: none !important;
}

/* Packs are fixed-price, not a range, so the "From:" price prefix is
   misleading here — hidden, scoped to pack pages only (see note above). */
.c44-from-label {
  display: none !important;
}

/* Selected colourway name sits beside the "Step 1. Select Colour" heading,
   not stacked below it — no CSS existed for this label/span pair before,
   so it fell back to the default block stacking. */
#cpf-pack-interface .cpf-first-attr-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

#cpf-pack-interface .cpf-color-label {
  font-size: 1em;
  font-weight: 400;
  color: #666;
}

#cpf-pack-components-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 16px 0;
}

.cpf-pack-component-table {
  flex: 1 1 0;
  min-width: 220px;
}

/* Fixed-height, scrollable size list — keeps every component's table the
   same height regardless of how many sizes it has, instead of the page
   growing to fit the longest one. */
.cpf-pack-size-table-scroll {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.cpf-pack-size-table-scroll .cpf-table {
  box-shadow: none;
  border-radius: 0;
}

.cpf-pack-size-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Pack colour swatches — larger square garment-photo tiles, per client
   mockup (docs/superpowers/specs/2026-09-15-packs-bundles-design.md),
   distinct from the small round swatches used on regular products.
   Scoped to #cpf-pack-interface so it never affects any other page. */
#cpf-pack-interface .cpf-swatches-container {
  gap: 10px;
}

#cpf-pack-interface .cpf-pack-swatch-item {
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 3px;
  transition: border-color 0.2s ease;
}

#cpf-pack-interface .cpf-pack-swatch-item.cpf-swatch-selected {
  border-color: #0073aa;
  background-color: transparent;
}

/* Base stylesheet has a max-width:480px rule that shrinks the OUTER
   selected swatch div to 33x33px on regular (circle-swatch) product
   pages. It also matches pack tiles since they reuse .cpf-swatch-item
   / .cpf-swatch-selected, but pack tiles' inner image/text is fixed at
   72x90px — so on a narrow screen the outer box shrank around a child
   too big for it and the content spilled out over the next swatch.
   Force the outer tile back to its real size regardless of viewport. */
#cpf-pack-interface .cpf-swatches-container .cpf-pack-swatch-item,
#cpf-pack-interface .cpf-swatches-container .cpf-pack-swatch-item.cpf-swatch-selected {
  width: auto;
  height: auto;
}

/* The base stylesheet grows .cpf-swatch-image by 3px of border and adds
   a box-shadow on selection (custom-product-flow.css) — that's the
   circle-swatch design for regular products. Packs show selection via
   the outer tile's own border above instead, so neutralize the base
   rule here to stop the inner image growing/overlapping its neighbour
   on select. */
#cpf-pack-interface .cpf-pack-swatch-item.cpf-swatch-selected .cpf-swatch-image {
  border: none;
  box-shadow: none;
}

#cpf-pack-interface .cpf-pack-swatch-item .cpf-swatch-image,
#cpf-pack-interface .cpf-pack-swatch-item .cpf-swatch-text {
  box-sizing: border-box;
  width: 72px;
  height: 90px;
  border-radius: 4px;
}

#cpf-pack-interface .cpf-pack-swatch-item .cpf-swatch-image {
  background-size: cover;
  background-position: center;
}

#cpf-pack-interface .cpf-pack-swatch-item .cpf-swatch-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
}

.cpf-pack-component-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cpf-pack-component-progress {
  font-weight: normal;
  font-size: 0.85em;
  color: #666;
}

.cpf-pack-component-table.cpf-pack-complete .cpf-pack-component-progress {
  color: #2e7d32;
  font-weight: bold;
}

/* Stepper buttons/input now reuse the real product's cpf-qty-btn /
   cpf-qty-minus / cpf-qty-plus / cpf-qty-input / cpf-qty-cell classes
   (assets/js/cpf-pack.js), so they pick up the same theme styling as
   the regular product page for free — no pack-specific override
   needed here any more. */

/* Add to Quote button — the regular product's matching style is keyed
   to the ID #cpf-add-to-cart (custom-product-flow.css), which the pack
   button never matched since it uses its own ID. Duplicated here
   rather than editing the shared base rule, to keep pack styling
   self-contained. */
#cpf-pack-add-to-cart {
  margin-top: 0;
  background-color: #ffe50c;
  color: #231f20;
  transition: 0.3s linear;
  font-size: var(--font-20);
  text-transform: uppercase;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  border-radius: 50px;
  border: solid 1px #ffe50c;
  padding: 1rem 2.5rem 0.8rem 2.5rem;
  line-height: 1.3;
}

#cpf-pack-add-to-cart:hover {
  background-color: #00a4e6;
  color: #fff;
  border-color: #fff;
}

#cpf-pack-add-to-cart:active {
  transform: translateY(0);
}

#cpf-pack-add-to-cart:disabled {
  background-color: #ccc;
  border-color: #ccc;
  color: #231f20;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}