/* Shared shop primitives: buttons, forms, badges, layout container.
 *
 * Loaded BEFORE the theme, exactly where these lived in the original file, so the theme's own components still override them.
 *
 * SPLIT DELIBERATELY: these rules used to sit inside the Cutlass theme, and
 * several share a selector target AND specificity with the theme's own chrome
 * (.cb-container vs .cb-siteheader__topinner, for one). At equal specificity
 * source order decides the winner, so loading every extracted rule after the
 * theme flattened the site header. Keeping the original relative order is what
 * makes the cascade come out the same as before the extraction.
 */

.cb-container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }

.cb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--cb-radius);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  white-space: nowrap;
}

.cb-btn:active { transform: translateY(1px); }

.cb-btn--primary {
  background: var(--cb-primary);
  color: #fff !important;
  border-color: var(--cb-primary);
}

.cb-btn--primary:hover { background: var(--cb-primary-dark); border-color: var(--cb-primary-dark); color: #fff !important; }

.cb-btn--ghost {
  background: transparent;
  color: #fff !important;
  border-color: rgba(255,255,255,.55);
}

.cb-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff !important; }

.cb-btn--outline {
  background: transparent;
  color: var(--cb-primary) !important;
  border-color: var(--cb-primary);
}

.cb-btn--outline:hover { background: var(--cb-primary-light); color: var(--cb-primary) !important; }

.cb-btn--preorder {
  background: #fff;
  color: var(--cb-primary) !important;
  border-color: var(--cb-primary);
}

.cb-btn--preorder:hover {
  background: var(--cb-primary-light);
  color: var(--cb-primary-dark) !important;
  border-color: var(--cb-primary-dark);
}

.cb-btn--cart {
  width: 120px;
  padding: .55rem .5rem;
  font-size: .82rem;
}

.cb-btn--sm  { padding: .45rem .8rem; font-size: .8rem; }

.cb-btn--lg  { padding: .9rem 1.75rem; font-size: 1rem; }

.cb-btn--block { display: flex; width: 100%; }

.cb-cart-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: var(--cb-primary);
  color: #fff !important;
  border-radius: var(--cb-radius);
  font-weight: 600;
  font-size: .85rem;
  position: relative;
}

.cb-cart-link:hover { background: var(--cb-primary-dark); color: #fff !important; }

.cb-cart-link__badge {
  background: var(--cb-accent);
  color: #fff;
  border-radius: 999px;
  padding: .1rem .5rem;
  font-size: .7rem;
  font-weight: 700;
  margin-left: .25rem;
}

.cb-badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.cb-badge--instock   { background: var(--cb-success-bg); color: var(--cb-success); }

.cb-badge--backorder { background: var(--cb-warning-bg); color: var(--cb-warning); }

.cb-badge--oos       { background: var(--cb-danger-bg);  color: var(--cb-danger); }

.cb-badge--request   { background: var(--cb-primary-light); color: var(--cb-primary); }

.cb-dispatch-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  margin-top: .25rem;
  white-space: nowrap;
  width: fit-content;
}

.cb-dispatch-badge--instock   { background: var(--cb-success-bg); color: var(--cb-success); }

.cb-dispatch-badge--backorder { background: var(--cb-warning-bg); color: var(--cb-warning); }

.cb-form-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  margin-top: 1.5rem;
}

.cb-form-grid__form h2,
.cb-form-grid__aside h2 { margin-top: 0; }

.cb-form-grid__aside { font-size: .92rem; }

.cb-form-grid__aside h3 { margin-top: 1.5rem; }

@media (max-width: 900px) {
  .cb-form-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.cb-form { margin-top: 1.5rem; }

.cb-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cb-form__field { margin-bottom: 1rem; display: block; }

.cb-form__field label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cb-ink);
  margin-bottom: .35rem;
}

.cb-form__field label span { color: var(--cb-accent); }

.cb-form__field input[type="text"],
.cb-form__field input[type="email"],
.cb-form__field input[type="tel"],
.cb-form__field select,
.cb-form__field textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--cb-border-strong);
  border-radius: var(--cb-radius);
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
  color: var(--cb-ink);
  transition: border-color .15s, box-shadow .15s;
}

.cb-form__field input:focus,
.cb-form__field select:focus,
.cb-form__field textarea:focus {
  outline: none;
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 3px var(--cb-primary-light);
}

.cb-form__field textarea { resize: vertical; min-height: 110px; }

.cb-form__error {
  display: block;
  margin-top: .35rem;
  color: var(--cb-danger);
  font-size: .8rem;
  font-weight: 600;
}

.cb-form__hint {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--cb-ink-muted);
  font-weight: 400;
}

@media (max-width: 720px) {
  .cb-form__row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .cb-cart__grid,
  .cb-checkout__grid {
    grid-template-columns: 1fr;
  }
  .cb-cart__sidebar,
  .cb-checkout__summary {
    position: static;
  }
  .cb-cart__checkout-form {
    max-width: 100%;
  }
  .cb-order__details { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .cb-cart-link { padding: .5rem .7rem; font-size: .8rem; }
  .cb-cart-link__text { display: none; }
}