.og-page {
  max-width:1240px;
  margin:0 auto;
  padding:28px 24px 48px;
  color:#17324b;
  font-family:Roboto,Arial,sans-serif;
  line-height:1.5;
}
.og-page * {
  box-sizing:border-box;
}
.og-page [hidden] {
  display:none!important;
}
.og-page h1 {
  font-size:clamp(25px,3vw,34px);
  line-height:1.15;
  margin:0 0 8px;
  font-weight:500;
  overflow-wrap:anywhere;
}
.og-page h2 {
  font-size:20px;
  margin:0;
  font-weight:500;
}
.og-page p {
  color:#5f7382;
  font-size:13px;
  margin:5px 0;
}
.og-page a {
  color:#0b5488;
}
.og-page button,.og-page input,.og-page select,.og-dialog button {
  font:inherit;
}
.og-page button,.og-dialog button {
  cursor:pointer;
}
.og-page :focus-visible,.og-dialog :focus-visible {
  outline:3px solid #277aad;
  outline-offset:3px;
}
.og-breadcrumb {
  font-size:13px;
  color:#587185;
  margin-bottom:18px;
}
.og-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}
.og-actions {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  align-items:center;
}
.og-btn-primary,.og-btn-secondary,.og-btn-danger {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  padding:9px 14px;
  border-radius:8px;
  border:1px solid #b7c7d1;
  background:white;
  color:#17324b;
  text-decoration:none;
  font-weight:500;
  font-size:14px;
}
.og-page a.og-btn-primary,.og-btn-primary {
  background:#0b5488;
  color:#fff;
  border-color:#0b5488;
}
.og-btn-danger {
  color:#a63333;
}
.og-btn-primary:hover {
  background:#09446e;
}
.og-btn-secondary:hover,.og-btn-danger:hover {
  background:#edf4f7;
}
.og-page button:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.og-guide-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.og-guide-card {
  padding:20px;
  border:1px solid #d7e0e5;
  border-radius:12px;
  box-shadow:0 5px 16px #1437500d;
  overflow-wrap:anywhere;
}
.og-guide-card p {
  margin:14px 0 20px;
}
.og-guide-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  background:#e9f2f7;
  color:#0b5488;
  border-radius:10px;
  margin-bottom:16px;
}
.og-quick-start {
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #dce4e8;
}
.og-quick-start>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.og-browse-actions {
  margin-bottom:18px;
}
.og-toolbar {
  display:grid;
  grid-template-columns:minmax(200px,1fr) 190px 190px;
  gap:12px;
  padding:14px;
  border:1px solid #d7e0e5;
  background:#f8fafb;
  border-radius:11px;
}
.og-toolbar label {
  font-size:12px;
  color:#587185;
}
.og-toolbar input,.og-toolbar select {
  display:block;
  width:100%;
  min-height:42px;
  border:1px solid #c8d4dc;
  border-radius:8px;
  padding:8px 10px;
  background:#fff;
  color:#17324b;
  margin-top:4px;
}
.og-bulk {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:16px 0;
  font-size:13px;
}
.og-page input[type=checkbox] {
  width:18px;
  height:18px;
  accent-color:#0b5488;
  vertical-align:middle;
}
.og-list {
  border-top:1px solid #d9e2e7;
}
.og-row {
  display:grid;
  grid-template-columns:24px 56px minmax(150px,1fr) 130px 120px 110px 94px;
  align-items:center;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid #d9e2e7;
}
.og-row img {
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:8px;
  background:#f5f7f8;
}
.og-meta {
  min-width:0;
  overflow-wrap:anywhere;
}
.og-name {
  font-weight:500;
  text-decoration:none;
}
.og-name:hover {
  text-decoration:underline;
}
.og-qty>label {
  font-size:12px;
  color:#587185;
  display:block;
  margin-bottom:4px;
}
.og-stepper {
  display:grid;
  grid-template-columns:32px 50px 32px;
}
.og-stepper button,.og-stepper input {
  min-height:42px;
  width:100%;
  border:1px solid #c7d2d9;
  background:#fff;
  color:#17324b;
  text-align:center;
  padding:0;
}
.og-stepper input {
  border-left:0;
  border-right:0;
  appearance:textfield;
  -moz-appearance:textfield;
}
.og-stepper input::-webkit-inner-spin-button {
  appearance:none;
}
.og-stepper button:first-child {
  border-radius:7px 0 0 7px;
}
.og-stepper button:last-child {
  border-radius:0 7px 7px 0;
}
.og-save-status {
  display:block;
  font-size:11px;
  color:#5f7382;
  min-height:17px;
  margin-top:4px;
}
.og-save-status[data-error=true] {
  color:#a63333;
}
.og-stock {
  font-size:12px;
  color:#246b45;
  overflow-wrap:anywhere;
}
.og-stock-unavailable {
  color:#876328;
}
.og-row-actions {
  display:flex;
  gap:5px;
}
.og-row-actions button {
  min-width:42px;
  padding:8px;
}
.og-footer-total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:20px;
  padding-top:10px;
}
.og-empty {
  grid-column:1/-1;
  padding:65px 24px;
  text-align:center;
}
.og-empty p {
  margin:12px auto 22px;
  max-width:480px;
}
.og-empty-icon {
  display:block;
  margin:0 auto 20px;
  font-size:42px;
  color:#0b5488;
}
.og-page #og-status:not(:empty) {
  padding:12px 16px;
  background:#edf4f7;
  border:1px solid #cfdee8;
  border-radius:8px;
  margin-bottom:20px;
  overflow-wrap:anywhere;
}
.og-page #og-status[data-error=true] {
  background:#fff1ef;
  color:#8d3434;
}
.og-dialog {
  font-family:Roboto,Arial,sans-serif;
  color:#17324b;
  max-width:500px;
  width:calc(100% - 32px);
  border:1px solid #d7e0e5;
  border-radius:14px;
  padding:24px;
  box-shadow:0 18px 48px #0004;
}
.og-dialog::backdrop {
  background:#08192699;
}
.og-dialog h2 {
  margin:0 0 12px;
  font-size:22px;
}
.og-dialog p {
  white-space:pre-line;
  line-height:1.6;
  max-height:45vh;
  overflow:auto;
}
.og-dialog .og-actions {
  justify-content:flex-end;
  margin-top:20px;
}
.og-print-only {
  display:none;
}
@media(max-width:1000px) {
  .og-row {
    grid-template-columns:24px 56px minmax(150px,1fr) 125px 120px;
  }
  .og-stock {
    grid-column:3;
  }
  .og-row-actions {
    grid-column:5;
    grid-row:2;
  }
  .og-header {
    flex-wrap:wrap;
  }
  .og-guide-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:650px) {
  .og-page {
    padding:20px 15px 35px;
  }
  .og-guide-grid,.og-toolbar {
    grid-template-columns:1fr;
  }
  .og-header,.og-footer-total {
    display:block;
  }
  .og-header>.og-actions {
    margin-top:16px;
  }
  .og-row {
    grid-template-columns:24px 50px minmax(0,1fr);
    gap:10px;
  }
  .og-row img {
    width:50px;
    height:50px;
  }
  .og-price,.og-qty,.og-stock,.og-row-actions {
    grid-column:3;
    grid-row:auto;
  }
  .og-row-actions {
    justify-content:flex-start;
  }
  .og-footer-total>.og-actions {
    margin-top:18px;
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .og-quick-start>div {
    align-items:flex-start;
    flex-direction:column;
  }
  .og-bulk {
    flex-wrap:wrap;
  }
  .og-dialog .og-actions {
    flex-wrap:wrap;
  }
}
@media print {
  body:has(.og-print)>:not(.og-print) {
    display:none!important;
  }
  .og-page {
    max-width:none;
    padding:0;
    font-size:11px;
  }
  .og-no-print,.og-dialog {
    display:none!important;
  }
  .og-print-only {
    display:block;
  }
  .og-row {
    grid-template-columns:40px minmax(150px,1fr) 105px 55px 100px;
    gap:8px;
    break-inside:avoid;
  }
  .og-row img {
    width:40px;
    height:40px;
  }
  .og-stock,.og-price,.og-qty {
    grid-column:auto;
    grid-row:auto;
  }
  .og-header,.og-footer-total {
    display:block;
  }
  .og-page h1 {
    font-size:24px;
  }
  .og-page a {
    color:inherit;
    text-decoration:none;
  }
  .og-page p {
    font-size:10px;
  }
  .og-empty {
    padding:20px;
  }
}
.og-retry-save {
  border:0;
  background:none;
  text-decoration:underline;
  color:#0b5488;
  padding:4px 0;
  min-height:32px;
  font-size:12px;
}