/* GPC 2.0 — Portal Stylesheet
   Extracted from GPC_v2_Mockup 0.3
   All styles scoped to the GPC portal only.
*/

:root {
  --navy: #1C3D6B;
  --navy-dark: #16314f;
  --orange: #E2710F;
  --orange-dark: #c66100;
  --link: #1C5BA8;
  --btn-light: #D9E2EC;
  --btn-light-hover: #c8d5e3;
  --bg: #ffffff;
  --bar: #F4F4F4;
  --border: #E2E5E9;
  --text: #23272e;
  --muted: #6b7280;
  --ok: #2e7d4f;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  color: var(--text);
  background: #fff;
  font-size: 15px;
  line-height: 1.45;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }

/* ---------- sticky header (topbar + meganav stick together as one unit) ---------- */
.gpc-sticky-head { position: sticky; top: 0; z-index: 50; }

/* ---------- top header ---------- */
.topbar {
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
/* Same max-width/centering as .container (the content grid below, e.g.
   #gpcResults) so the account icon/search/logo line up with the content's
   edges on wide screens, instead of the topbar (previously edge-to-edge,
   just its own 32px padding) running wider than the centered content. The
   bar's own background/border above still spans the full width. */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo .mark { display: grid; grid-template-columns: repeat(3, 7px); grid-template-rows: repeat(3, 7px); gap: 1.5px; }
.logo .mark span { display: block; border-radius: 1px; }
.logo .mark .r { background: #C8102E; }
.logo .mark .b { background: #1C3D6B; }
.logo .mark .g { background: #9aa3ad; }
.logo .txt strong { display: block; font-size: 13px; line-height: 1.15; color: #1a1a1a; }
.logo .txt span { display: block; font-size: 10.5px; color: #6b7280; }

/* Centered on .topbar-inner as a whole (not just "the middle flex slot" —
   logo and the account icon are different widths, so a plain flex:1 slot
   between them isn't visually centered relative to the full header) via
   absolute positioning against .topbar-inner, independent of the
   logo/account's own widths. */
.searchwrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 550px; display: flex; }
.gpc-search-wrap { flex: 1; position: relative; display: flex; }
.gpc-search-wrap input {
  flex: 1; width: 100%; border: 1px solid #c7ccd2; border-right: 0; border-radius: 2px 0 0 2px;
  padding: 11px 30px 11px 14px; font-size: 14px; outline: none;
}
.gpc-search-wrap input:focus { border-color: var(--navy); }
.es-form__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-block; width: 20px; height: 20px; cursor: pointer;
  background-repeat: no-repeat; background-size: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='13' cy='13' r='12' stroke='%231C3D6B'/%3E%3Cpath d='M16.8527 9.65223C16.9249 9.58379 16.9605 9.49942 16.9605 9.40003C16.9605 9.30065 16.9249 9.21441 16.8527 9.14223C16.7843 9.07379 16.6999 9.04004 16.6005 9.04004C16.5011 9.04004 16.4149 9.07379 16.3427 9.14223L13.0005 12.49L9.65271 9.14223C9.58428 9.07379 9.49991 9.04004 9.40052 9.04004C9.30114 9.04004 9.21489 9.07379 9.14271 9.14223C9.07428 9.21441 9.04053 9.30066 9.04053 9.40003C9.04053 9.49941 9.07428 9.58378 9.14271 9.65223L12.4905 13L9.14271 16.3422C9.07428 16.4144 9.04053 16.5007 9.04053 16.6C9.04053 16.6994 9.07428 16.7838 9.14271 16.8522C9.2149 16.9244 9.30115 16.96 9.40052 16.96C9.49989 16.96 9.58427 16.9244 9.65271 16.8522L13.0005 13.51L16.3427 16.8522C16.4149 16.9244 16.5012 16.96 16.6005 16.96C16.6999 16.96 16.7843 16.9244 16.8527 16.8522C16.9249 16.7838 16.9605 16.6994 16.9605 16.6C16.9605 16.5006 16.9249 16.4144 16.8527 16.3422L13.5105 13L16.8527 9.65223Z' fill='%231C3D6B' stroke='%231C3D6B' stroke-width='0.4'/%3E%3C/svg%3E");
  opacity: 0; visibility: hidden;
}
.es-form__clear.visible { opacity: 1; visibility: visible; }
.es-form__clear:hover { opacity: .7; }
.searchwrap button {
  background: var(--navy); border: 0; color: #fff; width: 52px; border-radius: 0 2px 2px 0;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.searchwrap button:hover { background: var(--navy-dark); }

.gpc-spinner {
  width: 16px; height: 16px; border: 2px solid #dbe4ee;
  border-top-color: var(--navy); border-radius: 50%;
  animation: gpc-spin .65s linear infinite; flex-shrink: 0;
}
/* Same spinner, light-on-dark — for use inside a navy .btn-primary button
   where the default navy-on-light spinner would be invisible. */
.gpc-spinner-light {
  width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; border-radius: 50%;
  animation: gpc-spin .65s linear infinite; flex-shrink: 0;
  display: inline-block; vertical-align: -2px; margin-right: 6px;
}
@keyframes gpc-spin { to { transform: rotate(360deg); } }

.account { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--navy); flex-shrink: 0; cursor: pointer; position: relative; }
.account svg { stroke: var(--navy); }
.account span { font-size: 12px; }
.acct-menu {
  position: absolute; top: 46px; right: 0; background: #fff; border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .13); min-width: 190px; z-index: 40; overflow: hidden;
}
.acct-menu .who { padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.acct-menu .who b { display: block; color: var(--text); font-size: 13.5px; }
.acct-menu button, .acct-menu a { display: block; width: 100%; text-align: left; background: #fff; border: 0; padding: 10px 14px; font-size: 13.5px; color: var(--text); text-decoration: none; }
.acct-menu button:hover, .acct-menu a:hover { background: var(--bar); text-decoration: none; }

/* ---------- mega-menu nav ---------- */
.meganav { background: var(--navy); }
.meganav-inner { max-width: 1180px; margin: 0 auto; display: flex; gap: 4px; }
.navlink { background: transparent; border: 0; color: #dbe4ee; font-size: 14px; font-weight: 700; letter-spacing: .02em; padding: 14px 18px; text-transform: none; display: inline-block; text-decoration: none; }
.navlink:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.navlink.on { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- content pages ---------- */
/* Left-aligned (not centred) so page text starts on the same line as the logo / "Products" nav link. */
.content { max-width: 820px; margin: 28px 0 0; }
.content h1 { font-size: 30px; color: #1a1a1a; margin: 0 0 6px; font-weight: 700; }
.content .intro { color: #555; font-size: 15px; margin: 0 0 30px; }
.content h2 { font-size: 19px; color: var(--navy); margin: 30px 0 10px; font-weight: 700; }
.content p { font-size: 14.5px; color: #33373d; margin: 0 0 12px; }
.step { display: flex; gap: 16px; margin-bottom: 18px; align-items: flex-start; }
.step .num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.step .stext { font-size: 14.5px; color: #33373d; padding-top: 3px; }
.step .stext b { color: #1a1a1a; }
.flow { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 8px 0 18px; }
.flow .frow { display: flex; gap: 14px; padding: 13px 16px; border-bottom: 1px solid #eef0f2; align-items: center; }
.flow .frow:last-child { border-bottom: 0; }
.flow .frow:nth-child(even) { background: #fafbfc; }
.flow .who { flex-shrink: 0; width: 120px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.flow .what { font-size: 14px; color: #33373d; }
.callout { background: #eef5fb; border-left: 3px solid var(--navy); border-radius: 4px; padding: 12px 16px; font-size: 13.5px; color: #2a3a4d; margin: 8px 0 18px; }
.cms-note { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 30px; border-top: 1px solid var(--border); padding-top: 14px; }
.content ul, .content ol { font-size: 14.5px; color: #33373d; margin: 0 0 12px; padding-left: 22px; }
.content li { margin-bottom: 4px; }

/* ---------- layout ---------- */
.page { padding: 0 32px 60px; }
.container { max-width: 1180px; margin: 0 auto; }

/* ---------- error page ---------- */
.gpc-error { max-width: 640px; margin: 0 auto; padding: 8vh 0 10vh; text-align: center; }
.gpc-error h1 { font-size: 64px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.gpc-error .sub { font-size: 16px; color: #555; margin: 0 0 30px; }
.gpc-error .actions { display: flex; align-items: center; justify-content: center; gap: 14px; }
.gpc-error .actions .btn-create { text-decoration: none; }

.gpc-results-wrap { position: relative; }
.gpc-loading-overlay {
  /* fixed, not absolute: .gpc-results-wrap can be several thousand px tall with a
     full product grid, so an absolute overlay centers itself in the middle of that
     whole container - often far below the viewport the user is actually looking at. */
  position: fixed; inset: 0; background: rgba(255, 255, 255, .65);
  display: none; align-items: center; justify-content: center; gap: 10px;
  font-size: 14px; color: var(--muted); z-index: 50;
}
.gpc-product-loading-overlay {
  /* Pagination-only equivalent of .gpc-loading-overlay: covers just the product
     grid (not the filter sidebar or header). Also fixed rather than absolute, for
     the same tall-content reason - its top/left/width/height are set from
     #gpcProductArea's live getBoundingClientRect() in productListing.js right
     before it's shown, since that area's on-screen box varies by breakpoint
     (filters column width, filters moving below the grid on narrow screens, etc).
  */
  position: fixed; background: rgba(255, 255, 255, .65);
  display: none; align-items: center; justify-content: center; gap: 10px;
  font-size: 14px; color: var(--muted); z-index: 45;
}

/* ---------- listing ---------- */
.foundbar {
  background: var(--bar); padding: 14px 20px; margin: 22px 0 22px; border-radius: 3px;
  font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.foundbar b { font-weight: 700; }
.btn-create {
  background: var(--navy); color: #fff; border: 0; border-radius: 4px; padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn-create:hover { background: var(--navy-dark); }
.listing { display: grid; grid-template-columns:230px 1fr; gap: 30px; }
.filters-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
.filters-head h3 { font-size: 15px; margin: 0; font-weight: 700; }
.clear-filters { font-size: 12px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.clear-filters:hover { color: var(--navy-dark); text-decoration: underline; }
.filtergroup { margin-bottom: 18px; border-bottom: 1px solid #eef0f2; padding-bottom: 14px; }
.filtergroup:last-child { border-bottom: 0; }
.filtergroup .glabel { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
.filteritem { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 13.5px; color: #333; cursor: pointer; }
.filteritem input { width: 15px; height: 15px; accent-color: var(--navy); cursor: pointer; }
.supcount { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.supsearch { width: 100%; border: 1px solid #c7ccd2; border-radius: 4px; padding: 7px 9px; font-size: 12.5px; outline: none; margin-bottom: 8px; }
.supsearch:focus { border-color: var(--navy); }
.suplist { max-height: 184px; overflow-y: auto; border: 1px solid #eef0f2; border-radius: 4px; padding: 4px 8px; }
.suplist::-webkit-scrollbar { width: 8px; }
.suplist::-webkit-scrollbar-thumb { background: #cfd6dd; border-radius: 4px; }
.suplist .nores { font-size: 12.5px; color: var(--muted); padding: 8px 2px; }
.suplist.short { max-height: 150px; }
.suplist.hintbox { border-style: dashed; }
.sg-hint { font-size: 12.5px; color: var(--muted); font-style: italic; padding: 8px 4px; }
.sg-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); margin: 8px 0 4px; padding-top: 6px; border-top: 1px solid #eef0f2; }
.sg-group:first-child { border-top: 0; padding-top: 0; margin-top: 2px; }
.ptags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.ptag { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--navy); background: #eaf0f6; border: 1px solid #d4e0ec; border-radius: 3px; padding: 2px 8px; line-height: 1.5; }
.ptag.std { color: #5a3e12; background: #f6efe0; border-color: #e6d6b3; }
.ptag.id { color: #444; background: #eef0f2; border-color: #dcdfe3; font-family: "SF Mono", Consolas, monospace; }

/* ---------- status badges ---------- */
.status { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 12px; letter-spacing: .02em; line-height: 1.3; }
.status.approved { background: #e3f3e8; color: #1f7a44; border: 1px solid #b3ddc3; }
.status.notready { background: #fdeeee; color: #c4564a; border: 1px solid #f3cdc8; }
.status.light { background: #e7f0fb; color: #1f5fa8; border: 1px solid #c2d7ef; }
.status.rejected { background: #f8d9d9; color: #b11f1f; border: 1px solid #ecb3b3; }
.status-lg { font-size: 13px; padding: 4px 14px; }
.ptags-lg .ptag { font-size: 12.5px; padding: 4px 11px; }

/* ---------- product grid & cards ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card {
  border: 1px solid var(--border); border-radius: 3px; padding: 16px 14px 14px; display: flex; flex-direction: column;
  background: #fff; transition: box-shadow .15s, border-color .15s;
  /* Grid items default to min-width:auto, which lets the img's intrinsic size
     (declared via its width/height attributes, used before it's fully loaded/
     decoded - relevant now that images are loading="lazy") push this card's
     column wider than its fair 1fr share. min-width:0 removes that floor so
     every card in a row stays the same width regardless of image load state. */
  min-width: 0;
}
.card:hover { box-shadow: var(--shadow); border-color: #cfd6dd; }
.card[data-id] { cursor: pointer; }
.card .imgbox { height: 130px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.card .imgbox img { max-height: 120px; max-width: 120px; width: 100%; }
.card .pname { color: var(--link); font-size: 13.5px; font-weight: 600; line-height: 1.3; min-height: 54px; max-height: 60px; overflow: hidden; cursor: pointer; }
.card .pname:hover { text-decoration: underline; }
.card .psupplier { font-size: 12.5px; color: #444; font-weight: 600; margin-top: 2px; min-height: 36px; }
.card .cstat { margin-bottom: 8px; min-height: 24px; }
.card .pub { color: var(--navy); font-size: 12.5px; font-weight: 600; margin: 14px 0 12px; min-height: 36px; }
.card .ptags { min-height: 24px; }
.card .viewbtn { background: var(--btn-light); color: var(--navy); border: 0; border-radius: 3px; padding: 9px; font-size: 13.5px; font-weight: 600; width: 100%; }
.card .viewbtn:hover { background: var(--btn-light-hover); }

/* ---------- pagination ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 34px; }
.pagination button { border: 1px solid var(--border); background: #fff; color: var(--navy); min-width: 36px; height: 36px; border-radius: 4px; font-size: 13.5px; }
.pagination button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.pagination button:hover:not(.on):not(:disabled) { background: var(--bar); }
.pagination button:disabled { color: #bbb; cursor: default; }

/* ---------- detail page ---------- */
.backlink { margin: 20px 0 6px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--link); }
.detail { display: grid; grid-template-columns: 430px 1fr; gap: 42px; margin-top: 14px; }
.gallery { display: flex; gap: 12px; }
.thumbs { display: flex; flex-direction: column; gap: 10px; }
.thumb { width: 62px; height: 62px; border: 1px solid var(--border); border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.thumb.on { border-color: var(--navy); }
.thumb img { max-width: 48px; max-height: 48px; }
.mainimg { flex: 1; border: 1px solid var(--border); border-radius: 3px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-height: 330px; }
.mainimg img { max-width: 100%; max-height: 300px; }
.mainimg .cap { color: var(--muted); font-size: 12.5px; margin-top: 12px; text-align: center; }
.detail-actions { display: flex; gap: 12px; margin-top: 14px; }
.detail-actions a { flex: 1; border: 1px solid #c7ccd2; border-radius: 3px; padding: 11px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--navy); font-weight: 600; font-size: 13.5px; }
.detail-actions a:hover { background: var(--bar); text-decoration: none; }
.detail-info h1 { font-size: 27px; line-height: 1.2; margin: 2px 0 16px; color: #1a1a1a; font-weight: 700; }
.det-supplier { font-size: 14px; color: #444; margin: 6px 0 14px; }
.det-supplier b { color: #1a1a1a; font-weight: 600; }
.desc { color: #3a3f47; font-size: 14px; position: relative; }
.desc.clamped p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.showmore { font-weight: 600; font-size: 13.5px; display: inline-block; margin-top: 4px; cursor: pointer; }
.showvariants { font-weight: 700; font-size: 14px; display: inline-block; margin: 22px 0 0; cursor: pointer; }
.detail-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn-feedback { background: var(--orange); color: #fff; border: 0; border-radius: 3px; padding: 14px 34px; font-size: 15px; font-weight: 700; }
.btn-feedback:hover { background: var(--orange-dark); }
.btn-variant { background: var(--navy); color: #fff; border: 0; border-radius: 3px; padding: 14px 28px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 9px; }
.btn-variant:hover { background: var(--navy-dark); }
.viewer-note { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 8px; }

/* ---------- tabs & variants table ---------- */
.tabs { display: flex; gap: 6px; margin: 42px 0 0; }
.tab { padding: 11px 22px; font-size: 14px; font-weight: 700; color: #23272e; background: transparent; border: 0; border-radius: 3px 3px 0 0; }
.tab.on { background: var(--navy); color: #fff; }
.tabpanel { border: 1px solid var(--border); border-radius: 0 3px 3px 3px; padding: 18px; }
.vsearch-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.vsearch { flex: 1; min-width: 240px; border: 1px solid #c7ccd2; border-radius: 4px; padding: 9px 12px; font-size: 13.5px; outline: none; }
.vsearch:focus { border-color: var(--navy); }
.vcount { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.vmore { display: none; font-size: 12.5px; color: #7a5a16; background: #fff8ec; border: 1px dashed #e3b85f; border-radius: 5px; padding: 9px 13px; margin-top: 10px; }
table.vtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.vtable th { background: #f6f7f8; color: #333; font-weight: 700; padding: 13px 10px; text-align: center; border-bottom: 1px solid var(--border); }
table.vtable td { padding: 13px 10px; text-align: center; border-bottom: 1px solid #eef0f2; }
table.vtable tbody tr:nth-child(even) { background: #fafbfc; }
table.vtable .gan { font-family: "SF Mono", Consolas, monospace; font-weight: 600; color: var(--navy); }
.prodinfo { font-size: 13.5px; }
.prodinfo .row { display: flex; border-bottom: 1px solid #eef0f2; padding: 9px 4px; }
.prodinfo .row span:first-child { width: 230px; color: var(--muted); }
.prodinfo .row span:last-child { font-weight: 600; }

/* ---------- login screen ---------- */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f7f9fc; }
.login-logo { margin-bottom: 40px; }
.login-card {
  width: 480px; max-width: 92vw; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 24px rgba(0, 0, 0, .06); padding: 46px 52px 52px; text-align: center;
}
.login-card h1 { color: var(--navy); font-size: 28px; margin: 0 0 8px; font-weight: 700; }
.login-card .sub { color: #555; font-size: 14.5px; margin-bottom: 30px; }
.login-card .field-wrap { text-align: left; margin-bottom: 18px; }
.login-card .field-wrap label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.login-card .field-wrap input { width: 100%; border: 1px solid #c7ccd2; border-radius: 4px; padding: 12px 13px; font-size: 14px; outline: none; }
.login-card .field-wrap input:focus { border-color: var(--navy); }
.login-card .field-wrap input.error { border-color: #C8102E; background: #fff6f6; }
.login-card .error-msg { font-size: 12px; color: #C8102E; margin-top: 4px; }
.login-card .signin { width: 100%; background: var(--navy); color: #fff; border: 0; border-radius: 4px; padding: 13px; font-size: 15px; font-weight: 700; margin-top: 6px; }
.login-card .signin:hover { background: var(--navy-dark); }
.login-card .forgot { display: block; margin-top: 18px; font-size: 13.5px; color: var(--link); }
/* Auth error banner */
.login-card .alert-error { display: flex; align-items: center; gap: 8px; background: #fff1f1; border: 1px solid #C8102E; border-left: 4px solid #C8102E; border-radius: 4px; color: #C8102E; font-size: 13.5px; font-weight: 600; padding: 10px 14px; margin-bottom: 18px; text-align: left; }
.login-card .alert-error svg { flex-shrink: 0; }
.login-card .alert-success { display: block; background: #e3f3e8; border: 1px solid #b3ddc3; border-left: 4px solid #1f7a44; border-radius: 4px; color: #1f7a44; font-size: 13.5px; padding: 10px 14px; margin-bottom: 18px; }

/* Field validation errors */
.login-card .field-wrap.has-error label { color: #C8102E; }
.login-card .field-wrap.has-error .required { color: #C8102E; }

/* ---------- modals ---------- */
.overlay { position: fixed; inset: 0; background: rgba(20, 30, 45, .5); display: flex; align-items: center; justify-content: center; padding: 24px 20px; z-index: 60; }
.modal { background: #fff; border-radius: 8px; width: 560px; max-width: 96vw; max-height: 92vh; box-shadow: 0 12px 48px rgba(0, 0, 0, .25); overflow: hidden; display: flex; flex-direction: column; }
.modal.wide { width: 920px; }
.modal-head { background: var(--navy); color: #fff; padding: 11px 20px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.modal-head .x { background: transparent; border: 0; color: #cdd8e6; font-size: 22px; line-height: 1; }
.modal-head .x:hover { color: #fff; }
.modal-body { padding: 16px 22px; overflow-y: auto; flex: 1 1 auto; }
.modal-body p.lead { margin: 0 0 12px; color: #444; font-size: 12.5px; line-height: 1.45; }
.modal-foot { padding: 11px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: #fafbfc; flex: 0 0 auto; }
.field { margin-bottom: 11px; }
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.field label .req { color: #C8102E; }
.field label .opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #c7ccd2; border-radius: 4px; padding: 7px 10px; font-size: 13px; outline: none; font-family: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); }
/* Direct children only — #fp-var wraps an entire grid of variant-row inputs
   nested inside #cpVariantForms .vrow, and its own .err (e.g. "Add at least
   one variant") must not cascade red to every one of them; only the
   specific required-and-empty cells (see .vrow input.err below) should be
   red. Every other .field wrapper (name, master group, supplier, ...) has
   its single input/select as a direct child, so this still covers them. */
.field.err > input, .field.err > select, .field.err > textarea { border-color: #C8102E; background: #fff6f6; }
.field .hint { font-size: 11px; color: var(--muted); margin-top: 3px; }
.field .errmsg { font-size: 12px; color: #C8102E; margin-top: 4px; display: none; }
.field.err .errmsg { display: block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kind-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kind-opt { display: flex; gap: 9px; align-items: flex-start; border: 1px solid #c7ccd2; border-radius: 6px; padding: 8px 11px; cursor: pointer; font-size: 12px; }
.kind-opt:hover { border-color: var(--navy); }
.kind-opt input { margin-top: 2px; accent-color: var(--navy); }
.kind-sub { font-size: 11px; color: var(--muted); font-weight: 400; }
.common-extra { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 11px; }
.common-head { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 9px; }
.dropzone { display: block; border: 2px dashed #c2ccd6; border-radius: 8px; padding: 13px; text-align: center; font-size: 12px; color: #555; cursor: pointer; background: #fafbfc; }
.dropzone:hover { border-color: var(--navy); background: #f4f8fc; }
.inherit-note { background: #eef5fb; border-left: 3px solid var(--navy); border-radius: 4px; padding: 7px 11px; font-size: 11.5px; color: #2a3a4d; margin-bottom: 11px; }
.vform-head { display: grid; gap: 6px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; padding: 0 2px; }
.vrow { display: grid; gap: 6px; margin-bottom: 6px; align-items: center; }
.vrow input, .vrow select { border: 1px solid #c7ccd2; border-radius: 4px; padding: 6px 8px; font-size: 12.5px; outline: none; width: 100%; background: #fff; }
.vrow input:focus, .vrow select:focus { border-color: var(--navy); }
.vrow input.err, .vrow select.err { border-color: #C8102E; background: #fff6f6; }
.cp-qty-input { cursor: pointer; }
.v-del { background: #fff; border: 1px solid #d7dbe0; border-radius: 4px; color: #b11f1f; font-size: 15px; line-height: 1; height: 30px; }
.v-del:hover { background: #fbe3e3; border-color: #ecb3b3; }

/* "Set value…" panel for quantity / range-quantity variant fields — a second
   dimming overlay stacked above the "create product" modal (same pattern as
   .overlay/.modal, higher z-index), so the panel is centered in the
   viewport and everything behind it (including the modal) is dimmed. */
.cp-qty-overlay { position: fixed; inset: 0; background: rgba(20, 30, 45, .6); display: flex; align-items: center; justify-content: center; padding: 24px 20px; z-index: 90; }
.cp-qty-popover { background: #fff; border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, .3); padding: 20px; min-width: 300px; max-width: 96vw; }
.cp-qty-popover .cp-qty-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.cp-qty-popover .cp-qty-row { display: flex; gap: 12px; margin-bottom: 14px; }
.cp-qty-popover .cp-qty-field { display: flex; flex-direction: column; gap: 4px; }
.cp-qty-popover .cp-qty-field label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cp-qty-popover .cp-qty-field input,
.cp-qty-popover .cp-qty-field select { border: 1px solid #c7ccd2; border-radius: 5px; padding: 8px 10px; font-size: 13.5px; outline: none; width: 110px; }
.cp-qty-popover .cp-qty-field input:focus,
.cp-qty-popover .cp-qty-field select:focus { border-color: var(--navy); }
.cp-qty-popover .cp-qty-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cp-qty-popover .cp-qty-actions button { padding: 7px 14px; font-size: 12.5px; }
/* Compatible-units measurements button — same conversion Pimcore admin
   shows via its own QuickTip button (and the Stock Code Grid's cell
   editor), hidden until there's a value+unit to convert. Clicking it opens
   a table modal since this page has no ExtJS to hang a QuickTip off. */
.cp-qty-popover .cp-qty-measurements-btn {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-end; /* sit level with the Value/Unit inputs, not their labels above */
  background: #fff; border: 1px solid #c7ccd2; border-radius: 5px; box-sizing: border-box;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
}
.cp-qty-popover .cp-qty-measurements-btn:hover { border-color: var(--navy); }
.cp-qty-popover .cp-qty-measurements-btn img { vertical-align: middle; }
.cp-qty-measurements-overlay { position: fixed; inset: 0; background: rgba(20, 30, 45, .6); display: flex; align-items: center; justify-content: center; padding: 24px 20px; z-index: 100; }
.cp-qty-measurements-modal { background: #fff; border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, .3); padding: 20px; min-width: 260px; max-width: 96vw; }
.cp-qty-measurements-table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
.cp-qty-measurements-table th,
.cp-qty-measurements-table td { text-align: left; padding: 6px 16px 6px 0; font-size: 13px; border-bottom: 1px solid #e7eaee; }
.cp-qty-measurements-table th { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.btn-addrow { background: #fff; border: 1px dashed #b9c2cc; border-radius: 5px; color: var(--navy); font-weight: 600; font-size: 12px; padding: 6px 12px; margin-top: 2px; }
.btn-addrow:hover { background: #f4f8fc; border-color: var(--navy); }
.btn-secondary { background: #fff; border: 1px solid #c7ccd2; color: var(--text); border-radius: 4px; padding: 8px 16px; font-size: 13px; font-weight: 600; }
.btn-secondary:hover { background: var(--bar); }
.btn-primary { background: var(--navy); color: #fff; border: 0; border-radius: 4px; padding: 8px 16px; font-size: 13px; font-weight: 700; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-primary:disabled { background: #9aa9bd; cursor: default; }

/* ---------- GAN results ---------- */
.gan-batch { margin-top: 11px; background: #eef5ee; border: 1px solid #cfe3cf; border-radius: 6px; padding: 11px 13px; }
.gan-batch .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #3c6b48; font-weight: 700; margin-bottom: 10px; }
.gan-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gan-table th { text-align: left; color: #3c6b48; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 4px 7px; border-bottom: 1px solid #cfe3cf; }
.gan-table td { padding: 4px 7px; border-bottom: 1px solid #dcebdc; }
.gan-table td.gan { font-family: "SF Mono", Consolas, monospace; font-weight: 700; color: #1f5132; }
.pending-row { background: #fff8ec; border: 1px dashed #e3b85f; border-radius: 6px; padding: 11px 14px; font-size: 13px; color: #7a5a16; display: flex; align-items: center; gap: 9px; margin-top: 10px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: #1f5132; color: #fff; padding: 13px 22px; border-radius: 7px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25); z-index: 90; opacity: 0; transition: transform .3s, opacity .3s;
  display: flex; align-items: center; gap: 10px;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { background: #b3261e; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .listing { grid-template-columns: 1fr; }
  .filters { order: 2; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .detail { grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; }
  .topbar-inner { flex-wrap: wrap; }
  /* Back to normal flow below the desktop breakpoint — the absolute
     centering above would otherwise fight with order/flex-basis here and
     the search box would stop wrapping to its own full-width row. */
  .searchwrap { position: static; transform: none; order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .page { padding: 0 16px 40px; }
  .topbar { padding: 12px 16px; }
  .login-card { padding: 32px 24px; }
}

/* Field validation */
.field-error { display: block; color: #C8102E; font-size: 12px; font-weight: 500; margin-top: 5px; min-height: 17px; }
.login-card .field-wrap input.input-error { border-color: #C8102E; background: #fff6f6; box-shadow: 0 0 0 2px rgba(200,16,46,.12); }
.signin:disabled { opacity: 0.65; cursor: not-allowed; }

/* Empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; color: #6b7280; }
.empty-state svg { margin-bottom: 16px; }
.empty-state p { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: #374151; }
.empty-state span { font-size: 13px; color: #9aa3b0; }

/* Password field with show/hide toggle */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { flex: 1; padding-right: 42px; }
.pw-toggle { position: absolute; right: 12px; background: none; border: none; cursor: pointer; padding: 0; color: #9aa3b0; display: flex; align-items: center; }
.pw-toggle:hover { color: #374151; }

/* Blueprint popup (Product Details Page — Variants tab) */
.blueprint-cell { cursor: pointer; color: var(--navy); font-weight: 700; }
.icon-blueprint {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  background-size: 15px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.2342 7.2742L10.9079 6.94795L8.64573 9.21107L8.07947 8.64575L10.3426 6.38263L9.21105 5.25107L8.0795 6.38263L7.51418 5.81731L8.64573 4.68575L7.51418 3.5542L5.25105 5.81733L4.68573 5.25107L6.94792 2.98888L5.81731 1.85733L1.85731 5.81733L7.27411 11.2341L6.70879 11.8004L0.725586 5.81719L5.81719 0.725586L11.8004 6.70879L11.2342 7.2742ZM16.3258 12.3658L17.1311 13.1711L14.868 15.4333L15.4333 15.9996L17.6964 13.7364L18.828 14.868L17.6964 15.9995L18.2617 16.5649L19.3933 15.4333L20.5248 16.5649L18.2617 18.828L18.828 19.3933L21.0902 17.1311L22.2217 18.2617L18.2617 22.2217L12.3659 16.3259L11.8006 16.8912L18.2618 23.3535L23.3534 18.2619L16.8912 11.8006L16.3258 12.3658ZM18.5542 1.08676L2.71519 16.9258L1.30051 22.2996L6.67435 20.8859L22.5143 5.0459V3.91528L19.6859 1.08688L18.5542 1.08676ZM18.8936 1.87802L17.4227 3.34895L20.2511 6.17735L21.722 4.70642V4.25455L19.3464 1.87799L18.8936 1.87802ZM3.84585 16.9258L4.41211 17.4911L17.4227 4.48046L16.8574 3.91514L3.84585 16.9258ZM4.9774 18.0573L5.54366 18.6227L18.5543 5.61201L17.988 5.04575L4.9774 18.0573ZM6.10895 19.1879L6.67427 19.7542L19.6859 6.74356L19.1196 6.17731L6.10895 19.1879ZM2.41511 21.1848L6.02447 20.2351L3.36575 17.5764L2.41511 21.1848Z' fill='%231C3D6B'/%3E%3C/svg%3E%0A");
}
.blueprint-columns { display: flex; gap: 22px; flex-wrap: wrap; }
.blueprint-gallery { flex: 1 1 260px; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.blueprint-drawing { border: 1px solid var(--border); border-radius: 4px; padding: 10px; text-align: center; }
.blueprint-drawing img { max-width: 100%; max-height: 220px; }
.blueprint-drawing-caption { font-size: 12px; color: var(--muted); margin-top: 8px; }
.blueprint-measurement-table { flex: 1 1 260px; min-width: 220px; }
.blueprint-measurement-table ul { display: flex; margin: 0; padding: 0; list-style: none; }
.blueprint-measurement-table ul:not(:last-child) { border-bottom: 1px solid var(--border); }
.blueprint-measurement-table li { padding: 10px; font-size: 13px; }
.blueprint-measurement-table li.label { width: 45%; font-weight: 700; background: #f6f7f8; }
.blueprint-measurement-table li.value { width: 55%; text-align: center; }

/* ===== Product details: gallery arrows + zoom ===== */
.thumbs-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.thumbs-wrap .thumbs { max-height: 290px; overflow-y: auto; scrollbar-width: none; }
.thumbs-wrap .thumbs::-webkit-scrollbar { display: none; }
/* Keep each thumbnail full size and scroll the column, instead of the
   column squashing every thumb to fit its max-height. */
.thumbs-wrap .thumb { flex-shrink: 0; }
.swiper-prev, .swiper-next { border: 1px solid var(--border); border-radius: 3px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.swiper-prev:hover, .swiper-next:hover { border-color: var(--navy); }
.thumbs-wrap .swiper-prev, .thumbs-wrap .swiper-next { width: 62px; height: 22px; }
.mainimg .swiper-prev, .mainimg .swiper-next { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; }
.mainimg .swiper-prev { left: 10px; }
.mainimg .swiper-next { right: 10px; }
.swiper-prev.swiper-button-disabled, .swiper-next.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; }
.arrow { display: inline-block; width: 7px; height: 7px; border: solid var(--navy); border-width: 0 2px 2px 0; }
.arrow-up { transform: rotate(-135deg); margin-top: 4px; }
.arrow-down { transform: rotate(45deg); margin-bottom: 4px; }
.arrow-left { transform: rotate(135deg); margin-left: 4px; }
.arrow-right { transform: rotate(-45deg); margin-right: 4px; }
.zoom-button { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 3px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.zoom-button:hover { border-color: var(--navy); }
.mainimg .cap[hidden] { display: none; }
.thumbs-wrap[hidden], .mainimg img[hidden], .det-video[hidden] { display: none; }
/* videos in the gallery, as the Supplier portal */
.thumb-video { position: relative; }
.thumb-video::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -6px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent rgba(255,255,255,.95); filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.det-video { width: 100%; }
.det-video iframe, .det-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.zoom-media { display: flex; flex-direction: column; align-items: center; }
.zoom-media iframe, .zoom-media video { display: block; width: min(960px, calc(92vw - 128px)); aspect-ratio: 16 / 9; border: 0; background: #000; }
/* next image still loading — current one stays, dimmed, under a spinner */
.mainimg.is-loading img, .zoom-box.is-loading img { opacity: .45; transition: opacity .15s; }
.mainimg.is-loading::after, .zoom-box.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 3px solid #d5dbe2; border-top-color: var(--navy); border-radius: 50%; animation: gpc-spin .7s linear infinite;
}
.zoom-overlay { display: flex; align-items: center; justify-content: center; }
.zoom-box { position: relative; background: #fff; border-radius: 4px; padding: 40px 64px; max-width: 92vw; max-height: 92vh; min-width: min(560px, 92vw); min-height: 320px; display: flex; align-items: center; justify-content: center; }
/* side padding leaves room for the left/right arrows beside the image */
.zoom-box img { display: block; max-width: calc(92vw - 128px); max-height: calc(92vh - 80px); }
.zoom-box .swiper-prev, .zoom-box .swiper-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; }
.zoom-box .swiper-prev { left: 10px; }
.zoom-box .swiper-next { right: 10px; }
/* caption under the zoomed image: heading (bold) + text, as the Supplier portal */
.zoom-box { flex-direction: column; }
.zoom-box .zoom-cap { display: block; margin-top: 12px; text-align: center; font-size: 13px; color: #444; }
.zoom-box .zoom-cap span { display: block; margin-top: 2px; color: var(--muted); }
.zoom-box .x { position: absolute; top: 4px; right: 8px; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: #555; }

/* ===== Product details: tabs ===== */
.legacy-table { overflow-x: auto; padding: 10px 4px; font-size: 13.5px; }
.legacy-table table { border-collapse: collapse; width: 100%; }
.legacy-table td, .legacy-table th { padding: 10px; text-align: center; border-bottom: 1px solid #eef0f2; }

/* ===== Product details: variants table ===== */
table.vtable thead .band { background: var(--navy); height: 34px; padding: 0; border: 0; }
table.vtable .more-cell { width: 44px; }
.more-details-button { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.more-details-button svg { transition: transform .15s; }
.more-details-button.up svg { transform: rotate(180deg); }
table.vtable tr.more-details-row { display: none; }
table.vtable tr.more-details-row.open { display: table-row; }
table.vtable tr.more-details-row > td { padding: 0 10px 12px; background: #fafbfc; }
.more-details-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.more-details-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eef0f2; }
.more-details-table .more-details-label { width: 40%; font-weight: 700; color: #333; }

/* ===== Product details: modals ===== */
.view-drawing-button { display: inline-flex; align-items: center; text-decoration: none; }
#gpcVariantErrField { margin: 6px 0 0; }
#gpcVariantErrField .errmsg, #fp-var .errmsg { white-space: pre-line; } /* one line per invalid row */
.vrow.committed input, .vrow.committed select { background: #f3f5f7; color: #555; }