.wcsp-layout {
  max-width: 1100px;
  margin: 0 auto;
}

.wcsp-heading {
  margin: 10px 0 12px 0;
}

.wcsp-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px
}

@media(max-width:960px) {
  .wcsp-grid {
    grid-template-columns: 1fr
  }
}

.wcsp-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  background: #fff
}

.wcsp-card-title {
  font-weight: 700;
  border-left: 4px solid #22c55e;
  padding-left: 10px;
  margin-bottom: 10px
}

.wcsp-card-row {
  display: flex;
  justify-content: space-between;
  margin: 8px 0
}

.wcsp-help {
  background: #ecfeff;
  border-left: 4px solid #22c55e;
  padding: 12px 14px;
  border-radius: 8px;
  margin: 10px 0 16px
}

.wcsp-toolbar {
  display: flex;
  gap: 8px;
  margin: 8px 0
}

.wcsp-searchpanel[aria-hidden="true"] {
  display: none
}

.wcsp-searchbar {
  display: flex;
  gap: 8px;
  margin: 6px 0
}

.wcsp-search-results .wcsp-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #eee
}

.wcsp-search-results img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  object-fit: cover;
  background: #f5f5f5
}

.wcsp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0
}

.wcsp-table thead th {
  padding: 12px;
  font-weight: 700
}

.wcsp-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  vertical-align: middle
}

.wcsp-thumb {
  width: 150px !important;
  height: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  border-radius: 10px;
  object-fit: cover;
  background: #f5f5f5
}

.wcsp-table td:first-child {
  min-width: 170px;
  width: 170px
}

.wcsp-action {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap
}

.wcsp-action .button {
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 6px
}

.wcsp-action .wcsp-remove-item {
  background: #991b1b !important;
  border-color: #991b1b !important;
  color: #fff !important
}

.col-actions {
  min-width: 220px
}

.wcsp-table thead th.col-qty,
.wcsp-table thead th.col-price {
  width: 140px
}

.wcsp-table td:nth-child(4) {
  width: 140px
}

.wcsp-table td:nth-child(5) {
  width: 140px
}

.wcsp-table td:nth-child(4) input.wcsp-qty {
  max-width: 120px
}

.wcsp-table tfoot th {
  padding: 12px
}

.wcsp-table tfoot .wcsp-total-label {
  text-align: right
}

.wcsp-table tfoot .wcsp-total-price {
  width: 140px
}

.wcsp-removed td:not(.wcsp-action) {
  text-decoration: line-through;
  opacity: .6
}

.wcsp-removed td.wcsp-action,
.wcsp-removed td.wcsp-action * {
  text-decoration: none !important;
  opacity: 1 !important
}


/* v0.5.3 patch E — alternate row inline layout and header text color */
.wcsp-altbox .wcsp-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.wcsp-altbox .wcsp-result-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.wcsp-altbox .wcsp-result-meta .title {
  font-weight: 600;
}

.wcsp-altbox .wcsp-result-meta .sub {
  opacity: .7;
}

.wcsp-altbox .wcsp-result-price {
  margin-left: auto;
  min-width: 80px;
  text-align: right;
}

/* Ensure table header text uses injected color even if theme overrides */
.wcsp-table thead th {
  color: inherit !important;
}


/* v0.5.3 patch F — make Select Alternate same size as action buttons */
.wcsp-altbox .wcsp-result-row .button {
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 6px;
}


/* v0.5.3 patch G — ensure header children follow forced color */
.wcsp-table thead th * {
  color: inherit !important;
}

/* v0.5.6 mobile layout tweaks for school pack table */
@media (max-width: 768px) {
  .wcsp-layout {
    padding: 0 10px;
  }

  .wcsp-grid {
    grid-template-columns: 1fr;
  }

  .wcsp-card {
    margin-top: 16px;
  }

  .wcsp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .wcsp-table thead {
    display: none;
  }

  .wcsp-table,
  .wcsp-table tbody,
  .wcsp-table tr,
  .wcsp-table td {
    display: block;
    width: 100%;
  }

  .wcsp-table tr {
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
  }

  .wcsp-table td {
    padding: 4px 6px;
    text-align: left;
  }

  .wcsp-table td:first-child {
    text-align: center;
    margin-bottom: 6px;
  }

  .wcsp-table td:first-child img,
  .wcsp-thumb {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
    border-radius: 10px;
  }

  .wcsp-table td:nth-child(2)::before,
  .wcsp-table td:nth-child(3)::before,
  .wcsp-table td:nth-child(4)::before,
  .wcsp-table td:nth-child(5)::before,
  .wcsp-table td:nth-child(6)::before {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
    color: #6b7280;
    font-size: 12px;
    text-transform: none;
  }

  .wcsp-table td:nth-child(2)::before {
    content: "Item";
  }

  .wcsp-table td:nth-child(3)::before {
    content: "School Recommended Qty";
  }

  .wcsp-table td:nth-child(4)::before {
    content: "Selected Quantity";
  }

  .wcsp-table td:nth-child(5)::before {
    content: "Price per item";
  }

  .wcsp-table td:nth-child(6)::before {
    content: "Actions";
  }

  .wcsp-table tfoot tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .wcsp-table tfoot th {
    display: block;
    width: auto;
    padding: 4px 0;
    text-align: left;
  }
}