/* Approved AB-430 hardware selector and combined quote. */
.hardware-order { padding-bottom: 3rem; }
.hardware-order h2 { font-size: 1.55rem; text-align: center; margin: 0 0 1.25rem; }
.hardware-order h3 { font-size: 1.25rem; margin: 0 0 .65rem; }
.hardware-order p { margin: 0 0 .75rem; }
.hardware-order label { display: block; font-weight: 600; margin-bottom: .35rem; }
.hardware-order :is(select, input, button) { min-height: 44px; }
.hardware-order :is(section, article)[id] { scroll-margin-top: 7rem; }
.hw-pack-price { color: #374151; }
.hw-pack-price strong { font-size: 1.35rem; }
.hw-quote { border: 1px solid #c4cede; border-radius: 8px; background: #f4f7fb; padding: 1.4rem; min-width: 0; }
.hw-quote h2 { font-size: 1.35rem; }
.hw-order-lines { border-bottom: 1px solid #c4cede; padding-bottom: .75rem; margin-bottom: .8rem; font-size: .95rem; }
.hw-order-lines p { color: #475569; text-align: center; margin: 0; }
.hw-zip-row { display: flex; gap: .5rem; }
.hw-zip-row input { min-width: 0; width: 100%; }
.hw-zip-row button { padding: .6rem .9rem; border-radius: 6px; white-space: nowrap; }
.hw-error { color: #a40000; font-size: .9rem; margin-top: .5rem !important; }
.hw-error:empty, .hw-detail-status:empty { display: none; }
.hw-detail-status { color: #15803d; margin-top: .75rem !important; }
.hw-product-tabs { display: flex; justify-content: center; border-bottom: 1px solid #c4cede; margin-bottom: 1.5rem; }
.hw-product-tabs button { background: #fff; color: #002868; padding: .8rem 1.5rem; border: 0; border-bottom: 3px solid transparent; font-weight: 600; }
.hw-product-tabs button:hover { background: #f4f7fb; }
.hw-product-tabs [aria-selected=true] { border-bottom-color: #002868; background: #f4f7fb; }
.hw-product-detail { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 3rem; max-width: 900px; margin: 0 auto 2rem; align-items: center; }
.hw-product-detail[hidden] { display: none; }
.hw-detail-image { padding: 2rem; }
.hw-detail-image img { display: block; width: 100%; height: 190px; object-fit: contain; }
.hw-detail-copy h3 { font-size: 1.6rem; }
.hw-detail-action { display: flex; gap: .75rem; align-items: end; margin-top: 1rem; }
.hw-detail-action > div { flex: 1; }
.hw-detail-action button { border-radius: 6px; padding: .65rem 1rem; }
.hw-edit-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .35rem .75rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid #c4cede; }
.hw-edit-row:last-child { border-bottom: 0; }
.hw-edit-row > strong { font-size: .95rem; }
.hw-edit-row > p { margin: 0; text-align: right; color: #374151; font-variant-numeric: tabular-nums; }
.hw-edit-row .hw-remove { justify-self: end; padding-inline: .25rem; }
.hw-remove { border: 0; background: none; text-decoration: underline; color: #a40000; }

.hardware-order .hw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: start;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.hw-selector-column { min-width: 0; border: 1px solid #b7c5d6; border-radius: 8px; background: #f4f7fb; padding: 1.25rem; }
.hw-selector-column > h2 { margin-bottom: 1rem; }
.hw-selector-column .hw-product-tabs { margin-bottom: 0; border: 1px solid #002868; border-radius: 6px 6px 0 0; overflow: hidden; }
.hw-selector-column .hw-product-tabs button { flex: 1; background: #fff; border-bottom: 0; padding: .75rem; }
.hw-selector-column .hw-product-tabs button + button { border-left: 1px solid #b7c5d6; }
.hw-selector-column .hw-product-tabs [aria-selected="true"] { background: #002868; color: #fff; }
.hw-selector-column .hw-product-tabs button:hover:not([aria-selected="true"]) { background: #e4edf6; }
.hw-selector-column .hw-product-detail { grid-template-columns: 135px minmax(0, 1fr); gap: 1rem; margin: 0; padding: 1.25rem; background: #fff; border: 1px solid #b7c5d6; border-top: 0; }
.hw-selector-column .hw-detail-image { padding: 0; }
.hw-selector-column .hw-detail-image img { height: 150px; }
.hw-selector-column .hw-detail-copy h3 { font-size: 1.35rem; text-align: center; }
.hw-selector-column .hw-detail-copy p { color: #17293b; font-size: .98rem; line-height: 1.5; }
.hw-selector-column .hw-fit-detail { color: #334155 !important; font-size: .9rem !important; }
.hw-selector-column .hw-product-purchase { margin-top: 1rem; border-top: 1px solid #b7c5d6; padding-top: .8rem; }
.hw-selector-column .hw-pack-price { display: flex; justify-content: center; align-items: baseline; gap: .5rem; margin-bottom: .65rem; }
.hw-selector-column .hw-pack-price strong { font-size: 1.55rem; color: #374151; }
.hw-selector-column .hw-detail-action { margin: 0; gap: .6rem; }
.hw-selector-column .hw-detail-action label { font-size: .9rem; }
.hw-selector-column .hw-detail-action button { padding-inline: .8rem; }
.hw-selector-column .hw-fit-help { margin: 1rem 0 0; font-size: .9rem; text-align: center; }
.hw-quote-column .hw-standard-quote { --pricing-value-width: 100px; margin: 0; max-width: none; padding: 1.25rem; border: 1px solid #b7c5d6; border-radius: 8px; box-shadow: none; background: #f4f7fb; }

.hw-standard-quote .pricing-header { background: #e4edf6; border: 1px solid #e1e6ef; border-radius: 6px; color: #1f2a44; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; padding: .65rem .85rem; }
.hw-standard-quote .hw-order-lines { border: 0; padding-bottom: 0; margin-bottom: .75rem; }
.hw-standard-quote .pricing-subtotal { background: #e4edf6; border-block: 1px solid #d6dde8; margin: .25rem 0 .1rem; }
.hw-standard-quote .hw-edit-row { grid-template-columns: minmax(0,1fr) var(--pricing-value-width); column-gap: 12px; padding: 10px 12px; border-bottom-color: #d6dde8; background: #fff; }
.hw-standard-quote .hw-edit-row:nth-child(even) { background: #eef3f8; }
.hw-standard-quote .hw-edit-row > p { text-align: right; font-weight: 700; }
.hw-standard-quote .hw-edit-row > span { color: #475569; font-size: .9rem; }
.hw-standard-quote .hw-remove { min-height: 32px; padding: 0; font-size: .85rem; }
.hw-standard-quote .pricing-line { margin-bottom: 0; padding: 12px; }
.hw-standard-quote .pricing-label { color: #1f2937; }
.hw-standard-quote .hw-inline-delivery { display: grid; grid-template-columns: minmax(0,1fr) var(--pricing-value-width); gap: 12px; align-items: center; margin: 0; padding: 12px; border-bottom: 1px solid #d6dde8; background: #fff; }
.hw-standard-quote.pricing-pending .hw-inline-delivery { grid-template-columns: max-content minmax(0,1fr); gap: 8px; }
.hw-standard-quote .hw-inline-delivery label { margin: 0; font-size: .98rem; text-transform: none; letter-spacing: 0; }
.hw-standard-quote .hw-zip-row { gap: .4rem; flex-wrap: nowrap; min-width: 0; }
.hw-standard-quote .hw-zip-row input { flex: 1 1 0; width: 0; min-width: 0; padding-inline: .5rem; text-align: left; font-weight: 400; letter-spacing: 0; }
.hw-standard-quote .hw-zip-row button { flex: 0 0 auto; font-size: .9rem; padding-inline: .6rem; }
.hw-standard-quote .hw-delivery-value { color: #374151; justify-self: end; }
.hw-standard-quote .hw-error { grid-column: 1 / -1; margin: 0 !important; }
.hw-standard-quote .pricing-divider { background: #d6dde8; margin: 12px 0 16px; }
.hw-standard-quote .pricing-total { padding: 16px 12px; background: #e4edf6; border-radius: 6px; }
.hw-standard-quote .pricing-total-label { color: #1f2937; }
.hw-standard-quote .pricing-total-value { font-size: 1.35rem; line-height: 1.3; }
.hw-standard-quote .pricing-tax { background: #eef3f8; }
.hw-standard-quote .pricing-tax .pricing-label { color: #475569; }
.hw-standard-quote .hw-total-note { display: block; font-size: .88rem; color: #475569; margin-top: .3rem; }
.hw-standard-quote .hw-recalculate { display: block; margin: .6rem auto 0; background: none; border: 0; text-decoration: underline; color: #002868; font-size: .9rem; }
.hw-standard-quote .pricing-actions { margin-top: 1rem; }
.hw-standard-quote .quote-cta-group { gap: .6rem; }
.hw-quote-column .hw-standard-quote .quote-cta-item .cta-button { border-radius: 6px !important; padding: .7rem .5rem; gap: .4rem; margin: 0; min-height: 46px; box-shadow: none; transform: none; letter-spacing: 0; }

.hardware-order .cta-button {
  border: 0;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  transform: none;
  transition: background-color .16s ease;
}
.hardware-order .cta-button-primary { background: #087466; }
.hardware-order .cta-button-primary:hover { background: #065c51; }
.hardware-order .cta-button-secondary { background: #002868; }
.hardware-order .cta-button-secondary:hover { background: #153e77; }
.hardware-order .cta-button:is(:hover, :active, :focus) { box-shadow: none; transform: none; }
.hardware-order .cta-button:disabled { opacity: .55; cursor: not-allowed; }
.hardware-order :is(button, a, select) { touch-action: manipulation; }
.hardware-order select { background-color: #fff; color: #17293b; }
.hw-standard-quote .cta-button:disabled { opacity: .55; cursor: not-allowed; }
.hw-standard-quote [hidden] { display: none !important; }
@media (max-width: 1100px) {
  .hardware-order .hw-layout { grid-template-columns: minmax(0,1fr) 360px; gap: 1rem; }
  .hw-selector-column .hw-product-detail { grid-template-columns: minmax(0,1fr); }
  .hw-selector-column .hw-detail-image img { height: 90px; }
}
@media (max-width: 850px) {
  .hardware-order .hw-layout { grid-template-columns: minmax(0,1fr); }
  .hw-quote-column { width: 100%; max-width: 440px; margin-inline: auto; }
}
@media (max-width: 480px) {
  .hw-selector-column { padding: .85rem; }
  .hw-selector-column .hw-product-detail { padding: 1rem .75rem; }
  .hw-selector-column .hw-detail-action { flex-wrap: wrap; }
  .hw-selector-column .hw-detail-action > div { flex-basis: 100%; }
  .hw-selector-column .hw-detail-action button { width: 100%; }
  .hw-quote-column .hw-standard-quote { padding: 1rem; }
}

.hw-detail-image a { display: block; text-align: center; color: #002868; }
.hw-detail-image a img { cursor: zoom-in; }
.hw-detail-image a span { display: block; font-size: .8rem; margin-top: .35rem; text-decoration: underline; }

.ws-modal-card-image.hw-hardware-preview {
  width: fit-content !important;
  max-width: min(720px, calc(100vw - 48px)) !important;
}
.hw-hardware-preview .ws-modal-image {
  width: auto !important;
  height: auto !important;
  max-width: min(680px, calc(100vw - 84px));
  max-height: min(480px, calc(100dvh - 180px));
}

.hw-selector-column .hw-detail-action:has(> button:only-child) { justify-content: center; }

.hardware-order .pool-repair-hero-picture {
  display: flex;
  align-items: center;
}
.hardware-order .pool-repair-hero-photo {
  position: static;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.hardware-order .hw-hero-subtext {
  max-width: 56ch;
  margin: 12px auto 0;
  font-size: 1.05rem;
  line-height: 1.55;
  text-align: center;
}

.hardware-order .hw-copy-cat-cta,
.hardware-order .hw-copy-cat-cta:hover,
.hardware-order .hw-copy-cat-cta:active {
  border-radius: 6px;
  box-shadow: none;
  transform: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.hardware-order .hw-detail-status { color: #a40000; }
.hardware-order .hw-product-tabs button:focus-visible { outline-offset: -4px; }
.hardware-order [hidden] { display: none !important; }
.hardware-order .pricing-line { display: flex; justify-content: space-between; gap: 12px; }
.hardware-order .pricing-value { min-width: var(--pricing-value-width); text-align: right; font-variant-numeric: tabular-nums; }
.hardware-order .pricing-total-value { color: #1d4ed8; font-variant-numeric: tabular-nums; }
.hardware-order .hw-buy { width: 100%; }
.hw-fallback { display: grid; gap: .75rem; max-width: 440px; margin: 1.5rem auto; }
@media (prefers-reduced-motion: reduce) {
  .hardware-order .cta-button, .hardware-order .hw-copy-cat-cta { transition: none; }
  .hardware-order .cta-button-loading::after { animation: none; }
}

@media (max-width: 767px) {
  .hw-selector-column .hw-product-tabs button { padding: .6rem; font-size: .9rem; }
}
@media (max-width: 360px) {
  .hw-standard-quote.pricing-pending .hw-inline-delivery { grid-template-columns: minmax(0,1fr); }
}
