.product-offers-section {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafbfe;
}

.product-offers-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.product-offers-heading h4 { margin: 0; font-size: 18px; }
.product-offers-heading > p { margin: 0; color: var(--muted); font-size: 12px; }
.product-offers-section .offer-list { margin-top: 14px; overflow-x: auto; }

.product-offers-section .offer-table-head,
.product-offers-section .offer-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) 110px minmax(130px, 1fr) 90px minmax(190px, 1.4fr) minmax(220px, 1.4fr);
  gap: 12px;
  align-items: center;
  min-width: 980px;
}

.product-offers-section .offer-table-head {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #f1f4f9;
  border-radius: 9px;
}

.product-offers-section .offer-row {
  padding: 13px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.product-offers-section .offer-row:last-child { border-bottom: 0; }
.offer-source, .offer-state { display: grid; gap: 4px; }
.offer-source small, .offer-state small { color: var(--muted); line-height: 1.35; }
.offer-cost { color: #0d7f81; font-size: 15px; }
.availability { display: inline-flex; width: max-content; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.availability.available { color: #137a50; background: #e6f7ef; }
.availability.unavailable { color: #9d6500; background: #fff3d9; }
.physical-stock { font-weight: 800; }
.stock-not-synchronized { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.offer-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.offer-actions button { padding: 7px 9px; font-size: 11px; }
.product-table-row { cursor: pointer; }
.product-table-row:focus { outline: 3px solid rgba(36, 87, 214, .22); outline-offset: -3px; }

@media (max-width: 720px) {
  .product-offers-heading { align-items: flex-start; flex-direction: column; }
}
