.gsm-wrap{--navy:#0b1f4a;--wa:#25d366;--line:rgba(11,31,74,.12);--paper:#f5f7fb;font-family:DM Sans,system-ui,sans-serif;color:#0c1424}
.gsm-title{margin:0 0 .35rem;font-size:clamp(1.5rem,3vw,1.95rem);color:var(--navy);font-weight:800}
.gsm-sub{margin:0 0 1.1rem;color:#5b6b82;max-width:48ch}
.gsm-search{display:flex;gap:.4rem;background:#fff;border:2px solid rgba(11,31,74,.32);border-radius:999px;padding:.4rem;margin-bottom:1.1rem;box-shadow:0 12px 34px rgba(11,31,74,.12)}.gsm-search:focus-within{border-color:#1d4ed8;box-shadow:0 0 0 4px rgba(29,78,216,.16),0 12px 34px rgba(11,31,74,.12)}.gsm-search input{flex:1;border:0;padding:.9rem 1.15rem;font:inherit;font-size:1.02rem;outline:0;min-width:0;border-radius:999px;background:transparent;color:#0c1424}.gsm-search input::placeholder{color:#64748b;opacity:1;font-weight:550}.gsm-search button{border:0;border-radius:999px;background:var(--navy);color:#fff;font-weight:800;padding:.8rem 1.35rem;cursor:pointer;white-space:nowrap}
.gsm-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.gsm-cat{border:1px solid var(--line);background:#fff;border-radius:16px;padding:1.05rem .9rem 0.9rem;text-align:center;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:stretch;gap:.55rem;min-height:100%}
.gsm-cat:hover,.gsm-cat.active{transform:translateY(-3px);box-shadow:0 14px 36px rgba(11,31,74,.12);border-color:rgba(29,78,216,.4);outline:2px solid #1d4ed8}
.gsm-cat .ico{width:56px;height:56px;margin:0 auto;border-radius:14px;display:grid;place-items:center;background:linear-gradient(160deg,#0b1f4a,#1d4ed8);color:#fff;overflow:hidden}
.gsm-cat .ico svg{width:28px;height:28px}
.gsm-cat .ico img.gsm-cat-logo,.gsm-cat .ico .gsm-cat-logo{width:100%;height:100%;object-fit:cover;display:block}
.gsm-cat strong{display:block;color:var(--navy);font-size:1rem;text-transform:capitalize}
.gsm-preview{list-style:none;margin:0;padding:.35rem 0 0;border-top:1px solid var(--line);text-align:left}
.gsm-preview li{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;padding:.28rem 0;font-size:.78rem;border-bottom:1px dashed rgba(11,31,74,.08)}
.gsm-preview li:last-child{border-bottom:0}
.gsm-preview .n{color:#334155;font-weight:650;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.gsm-preview .p{color:var(--navy);font-weight:800;white-space:nowrap}
.gsm-preview .muted{color:#94a3b8;font-weight:600}
.gsm-more{display:block;margin-top:.15rem;font-size:.78rem;font-weight:750;color:#1d4ed8}
.gsm-panel{margin-top:1.25rem;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.gsm-panel-head{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:1rem 1.1rem;background:#e9eef6;border-bottom:1px solid var(--line)}
.gsm-panel-head h3{margin:0;color:var(--navy)}
.gsm-table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
.gsm-table{width:100%;border-collapse:collapse;min-width:680px}
.gsm-table th,.gsm-table td{padding:.8rem .95rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-size:.92rem}
.gsm-table th{background:#f8fafc;color:var(--navy);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
.gsm-table td.gsm-col-action{white-space:nowrap;width:1%;vertical-align:middle}
.price{font-weight:800;color:var(--navy);white-space:nowrap}
.desc{color:#5b6b82;font-size:.86rem;max-width:28ch}
.badge{display:inline-block;margin-top:.35rem;font-size:.72rem;font-weight:750;padding:.15rem .45rem;border-radius:6px;background:#e9eef6;color:var(--navy)}
.gsm-empty{text-align:center;padding:2rem;color:#5b6b82;font-weight:600}
.gsm-pager{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap;padding:.9rem;border-top:1px solid var(--line)}
.gsm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border:0;border-radius:999px;padding:.55rem .95rem;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.gsm-btn-wa{background:var(--wa);color:#063518}
/* Mobile: card rows so Commander stays fully visible */
@media (max-width:760px){
  .gsm-table-wrap{overflow:visible}
  .gsm-table{min-width:0;display:block;width:100%}
  .gsm-table thead{display:none}
  .gsm-table tbody{display:block;width:100%}
  .gsm-table tr{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "name price"
      "details details"
      "action action";
    gap:.35rem .75rem;
    margin:0;
    padding:1rem 1rem 1.05rem;
    border-bottom:1px solid var(--line);
    background:#fff;
  }
  .gsm-table tr:nth-child(even){background:#fafbfd}
  .gsm-table td{display:block;padding:0;border:0;max-width:none;width:auto}
  .gsm-table td.gsm-col-name{grid-area:name;min-width:0}
  .gsm-table td.gsm-col-details{grid-area:details}
  .gsm-table td.gsm-col-price{grid-area:price;text-align:right;align-self:start}
  .gsm-table td.gsm-col-action{grid-area:action;width:100%;white-space:normal;padding-top:.55rem}
  .gsm-table td.gsm-col-details .desc{max-width:none;font-size:.9rem}
  .gsm-table td.gsm-col-action .gsm-btn-wa{
    width:100%;
    min-height:48px;
    padding:.85rem 1rem;
    font-size:1rem;
    box-shadow:0 8px 20px rgba(37,211,102,.28);
  }
  .gsm-panel{border-radius:14px}
  .gsm-panel-head{padding:.85rem 1rem}
}
.gsm-btn-light{background:#fff;color:var(--navy)}
.gsm-btn-outline{background:transparent;color:var(--navy);border:1.5px solid rgba(11,31,74,.25)}
.gsm-band{margin-top:1.5rem;background:linear-gradient(120deg,#0b1f4a,#132a5c);color:#fff;border-radius:22px;padding:1.4rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.gsm-band p{margin:.25rem 0 0;opacity:.85}
.gsm-admin .gsm-filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}
.gsm-admin .gsm-form .form-table th{width:180px}