/* ข้อมูลการ์ดสินค้าแยกตามลำดับ: ชื่อ / รหัส / รุ่นรถ / OEM / ราคาและปุ่ม */
#productGrid > .card { display: flex; flex-direction: column; align-self: stretch; min-width: 0; container-type: inline-size; container-name: product-card; }
#productGrid > .card:hover { transform: none; }
#productGrid .card-media { flex: 0 0 auto; height: 180px !important; aspect-ratio: auto; }
#productGrid .card-media img { height: 100% !important; object-fit: contain !important; }
#productGrid .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
}
#productGrid .card-brand {
  align-self: flex-start;
  margin: 0 0 6px;
  padding: 3px 8px;
  border: 1px solid #ff5a3c44;
  border-radius: 5px;
  color: #ffb29f;
  font: 600 14px/1.5 var(--font-body);
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
#productGrid .card-name {
  display: block;
  min-height: 0;
  margin: 0 0 8px;
  color: var(--text);
  font: 700 19px/1.5 var(--font-body);
  -webkit-line-clamp: unset;
  overflow: visible;
}
#productGrid .card-title-link {
  display: -webkit-box;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
#productGrid .card-info { display: flex; flex: 1; flex-direction: column; gap: 6px; margin: 0 0 2px; }
#productGrid .card-info-row { min-width: 0; }
#productGrid .card-info-row:has(.card-fit) { flex: 1; }
#productGrid .card-info-row:has(.card-oem) { margin-top: auto; }
#productGrid .card-info dt { margin: 0 0 2px; color: var(--muted); font: 400 14px/1.5 var(--font-body); }
#productGrid .card-info dd { margin: 0; overflow-wrap: anywhere; }
#productGrid .card-pn { color: var(--text); font: 700 18px/1.55 ui-monospace, Consolas, monospace; letter-spacing: .02em; }
#productGrid .card-fit { color: var(--text); font: 400 16px/1.55 var(--font-body); }
#productGrid .card-spec { color: var(--dim); font: 400 16px/1.6 var(--font-body); }
#productGrid .card-fit-list, #productGrid .card-spec-list { list-style: none; padding: 0; margin: 0; }
#productGrid .card-fit-list { display: grid; gap: 4px; }
#productGrid .card-fit-list li { padding-left: 12px; border-left: 2px solid #ff3b1f80; overflow-wrap: anywhere; }
#productGrid .card-spec-list { display: flex; flex-wrap: wrap; gap: 6px; }
#productGrid .card-spec-list li { max-width: 100%; padding: 3px 8px; border: 1px solid var(--line); border-radius: 5px; overflow-wrap: anywhere; }
#productGrid .card-oem { color: var(--dim); font: 400 16px/1.6 ui-monospace, Consolas, monospace; -webkit-line-clamp: 2; }
#productGrid .card-oem { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
#productGrid .card-purchase { display: flex; flex: 0 0 auto; flex-direction: column; margin-top: 0; padding-top: 4px; border-top: 1px solid var(--line); }
#productGrid .card-warranty { margin: 0 0 2px; color: var(--muted); font: 400 14px/1.5 var(--font-body); }
#productGrid .card-price-slot { display: flex; flex-direction: column; min-height: 0; margin-bottom: 6px; }
#productGrid .card-price { font-size: 28px; line-height: 1.35; }
#productGrid .card-price span { font-size: 14px; }
#productGrid .card-price-ask { font-size: 22px; }
#productGrid .card-price-original, #productGrid .card-price-wholesale { font-size: 15px; line-height: 1.5; }
#productGrid .card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0; }
#productGrid .card-actions .card-detail-btn, #productGrid .card-actions .add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  font: 600 16px/1.5 var(--font-body);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}
#productGrid .card-title-link:focus-visible, #productGrid .card-actions :focus-visible { outline: 3px solid #ffdf00; outline-offset: 3px; }
html[data-theme="light"] #productGrid .card-brand { color: #a92b19; border-color: #c43e263d; background: #fff2ed; }
@container product-card (max-width: 320px) {
  #productGrid .card-actions .card-detail-btn, #productGrid .card-actions .add-btn { font-size: 14px; padding-inline: 6px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .kok-catalog #productGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #productGrid .card-media { height: 150px !important; }
  #productGrid .card-body { padding: 12px; }
  #productGrid .card-brand { font-size: 12px; padding: 2px 6px; margin-bottom: 8px; }
  #productGrid .card-name { font-size: 18px; margin-bottom: 6px; }
  #productGrid .card-info { gap: 6px; margin-bottom: 2px; }
  #productGrid .card-info dt { font-size: 13px; }
  #productGrid .card-pn { font-size: 15px; }
  #productGrid .card-fit { font-size: 15px; }
  #productGrid .card-spec { font-size: 14px; }
  #productGrid .card-fit-list li { padding-left: 8px; }
  #productGrid .card-oem { font-size: 14px; }
  #productGrid .card-purchase { padding-top: 4px; }
  #productGrid .card-warranty { font-size: 13px; }
  #productGrid .card-price { font-size: 26px; }
  #productGrid .card-price span { font-size: 12px; }
  #productGrid .card-price-ask { font-size: 18px; }
  #productGrid .card-price-original, #productGrid .card-price-wholesale { font-size: 14px; }
  #productGrid .card-price-slot { min-height: 0; margin-bottom: 6px; }
  #productGrid .card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #productGrid .card-actions .card-detail-btn, #productGrid .card-actions .add-btn { min-height: 44px; padding-inline: 4px; font-size: 15px; }
}
@media (max-width: 600px) {
  .kok-catalog #productGrid { grid-template-columns: minmax(0, 1fr); }
}