/* Shared base for every page (storefront, admin, dev preview), in the
   C2 theme's visual language (BigStuffed-New-Website/c2-product-page,
   assets/c2-*.css): paper background, 1px ink lines, square corners,
   Poppins, small uppercase labels. Colour values are C2's own. */

:root {
  --c2-paper: #EFECE6;
  --c2-photo: #E4E0D8;
  --c2-field: #F7F3EF;   /* form field fill (C2 contact form) */
  --c2-ink: #1A1816;
  --c2-orange: #F7630C;
  --c2-soft: color-mix(in srgb, var(--c2-ink) 65%, var(--c2-paper));
  --c2-line: color-mix(in srgb, var(--c2-ink) 18%, transparent);
  --c2-ok: #3f8f4a;
  --c2-bad: #b3261e;
  --pad: 16px;
  --font: "Poppins", -apple-system, "Segoe UI", Arial, sans-serif;
}
@media (min-width: 990px) { :root { --pad: 38px; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  background: var(--c2-paper);
  color: var(--c2-ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }

/* ---------- dev catalog preview ---------- */
.dev-banner {
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--c2-ink);
  background: var(--c2-ink);
  color: var(--c2-paper);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.dev-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 20px var(--pad); border-bottom: 1px solid var(--c2-ink);
}
.dev-header h1 {
  margin: 0; font-size: 32px; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase;
}
.dev-header button, .dev-header-actions button {
  height: 40px; padding: 0 16px; border: 1px solid var(--c2-ink); border-radius: 0;
  background: var(--c2-ink); color: var(--c2-paper); cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.dev-header-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dev-header-actions form { display: flex; gap: 6px; align-items: center; }
.dev-back-link { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.dev-back-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.empty-state { padding: 48px var(--pad); color: var(--c2-soft); border-bottom: 1px solid var(--c2-ink); }

.catalog-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c2-ink);
}
@media (min-width: 990px) { .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { border-right: 1px solid var(--c2-ink); border-bottom: 1px solid var(--c2-ink); }
.card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--c2-photo); }
.no-image {
  width: 100%; aspect-ratio: 4 / 5; background: var(--c2-photo);
  display: flex; align-items: center; justify-content: center;
  color: var(--c2-soft); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.card-body { padding: 14px 18px 20px; }
.card-body h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.variant-title, .sku, .qty, .base-price { margin: 2px 0; font-size: 12px; color: var(--c2-soft); }
.ai-desc { margin: 8px 0; font-size: 13px; color: var(--c2-ink); }
.b2b-prices { width: 100%; font-size: 13px; margin-top: 6px; border-collapse: collapse; }
.b2b-prices td { padding: 4px 0; border-top: 1px solid var(--c2-line); }
.b2b-prices td:last-child { text-align: right; font-weight: 700; }
.qty-input-label { display: block; margin-top: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.qty-input { width: 64px; height: 36px; margin-left: 6px; padding: 0 8px; border: 1px solid var(--c2-ink); border-radius: 0; background: transparent; }

.totals-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  padding: 14px var(--pad); background: var(--c2-ink); color: var(--c2-paper); font-size: 13px;
}
#totals-output { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.totals-grand { font-weight: 800; font-size: 15px; }
.totals-ok { color: #9ED3A6; }
.totals-warn { color: #F5C26B; }
.totals-error { color: #F2A29C; }
.totals-excluded { color: #F2A29C; font-size: 12px; width: 100%; }

/* ---------- admin ---------- */
.admin-wrap { padding: 0 0 96px; }
.admin-wrap > :not(.admin-nav):not(.admin-table):not(.sf-review-bottom):not(.b2b-scroll):not(.b2b-savebar) { margin-left: var(--pad); margin-right: var(--pad); }
.admin-wrap > h1 {
  margin-top: 36px; margin-bottom: 18px;
  font-size: 40px; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase;
}
@media (min-width: 990px) { .admin-wrap > h1 { margin-top: 48px; font-size: 56px; } }
.admin-wrap h2 {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--c2-ink);
  font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase;
}
.admin-wrap h3 { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.admin-wrap a { text-underline-offset: 3px; }

/* nav: a bar of cells split by ink lines (C2 collection filter bar) */
.admin-nav {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border-bottom: 1px solid var(--c2-ink);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.admin-nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 16px;
  border-right: 1px solid var(--c2-ink); text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.admin-nav a:first-child { padding-left: var(--pad); }
.admin-nav a:hover, .admin-nav a.is-current { background: var(--c2-ink); color: var(--c2-paper); }
.admin-nav .admin-nav-brand { font-weight: 800; letter-spacing: 0.1em; }
.admin-nav .admin-nav-brand img { height: 18px; width: auto; display: block; }
.admin-nav .admin-nav-brand:hover img { filter: invert(1); }

.admin-back { margin-top: 20px; margin-bottom: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.admin-back a { text-decoration: none; }
.admin-back + h1 { margin-top: 16px !important; }
.admin-wrap .sf-review-bottom { margin-bottom: 28px; }
.admin-wrap .admin-table:has(+ .sf-review-bottom) { margin-bottom: 0; }
/* plain action buttons outside .admin-form (auto-fill, delete, ...) */
.admin-wrap form:not(.admin-form) > button {
  height: 40px; padding: 0 16px; border: 1px solid var(--c2-ink); border-radius: 0; background: transparent;
  color: var(--c2-ink); cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.admin-wrap form:not(.admin-form) > button:hover { background: var(--c2-ink); color: var(--c2-paper); }
.admin-hint { color: var(--c2-soft); font-size: 13px; max-width: 70ch; }

/* Square framed toggle links above a report table (e.g. missing prices: all / live only) */
.admin-filter { display: flex; flex-wrap: wrap; margin-top: 20px; }
.admin-filter a { padding: 10px 16px; border: 1px solid var(--c2-ink); margin-right: -1px; color: var(--c2-ink); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.admin-filter a:hover { background: var(--c2-photo); }
.admin-filter a.is-current { background: var(--c2-ink); color: var(--c2-paper); }

.admin-table { width: 100%; border-collapse: collapse; margin: 16px 0 28px; font-size: 13px; border-top: 1px solid var(--c2-ink); border-bottom: 1px solid var(--c2-ink); }
.admin-table th, .admin-table td { padding: 12px 14px; text-align: left; vertical-align: middle; border-top: 1px solid var(--c2-line); }
.admin-table tr > :first-child { padding-left: var(--pad); }
.admin-table tr > :last-child { padding-right: var(--pad); }
.admin-table tr:first-child th, .admin-table thead th {
  border-top: 0; border-bottom: 1px solid var(--c2-ink);
  background: color-mix(in srgb, var(--c2-ink) 5%, var(--c2-paper));
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.admin-table tr:nth-child(2) td { border-top: 0; }
.admin-table img { display: block; max-width: 120px; height: auto; }
.admin-table input, .admin-table select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--c2-ink); border-radius: 0; background: transparent; font-size: 13px; }
.admin-table button, .admin-table a.button {
  height: 36px; padding: 0 14px; border: 1px solid var(--c2-ink); border-radius: 0; background: transparent;
  color: var(--c2-ink); cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.admin-table button:hover { background: var(--c2-ink); color: var(--c2-paper); }

/* B2B prices tab: narrow editable prices, each next to a read-only retail price */
.b2b-search { display: block; width: calc(100% - 2 * var(--pad)); max-width: 420px; min-height: 44px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--c2-ink); border-radius: 0; background: transparent; color: var(--c2-ink); font: 400 13px/1.4 var(--font); }
.b2b-scroll { overflow-x: auto; }
.b2b-table th, .b2b-table td { padding: 8px; white-space: nowrap; }
.b2b-table td:first-child { white-space: normal; min-width: 130px; }
.b2b-table .b2b-cell input { display: block; width: 58px; min-height: 30px; padding: 4px 6px; }
.b2b-table .b2b-cell input.is-changed { outline: 2px solid var(--c2-ink); outline-offset: -2px; font-weight: 700; }
.b2b-table .b2b-cell input.is-warning { border-color: #B3261E; color: #B3261E; font-weight: 700; }
.b2b-table .b2b-cell input.is-warning.is-changed { outline-color: #B3261E; }
.b2b-table .b2b-retail { color: var(--c2-soft); }
.b2b-error { color: #B3261E; font-weight: 600; }
.b2b-savebar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 12px var(--pad); border-top: 1px solid var(--c2-ink); background: var(--c2-paper); font-size: 13px; }
.b2b-savebar button:disabled { opacity: 0.35; cursor: default; }
@media (min-width: 990px) {
  .b2b-scroll { overflow-x: visible; }
  .b2b-table thead th { position: sticky; top: 0; z-index: 1; }
}

.admin-form { display: flex; flex-direction: column; gap: 18px; max-width: 520px; margin-top: 20px; margin-bottom: 28px; }
.admin-form label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.admin-form label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 10px; }
.admin-form input:not([type="checkbox"]):not([type="radio"]), .admin-form select, .admin-form textarea {
  width: 100%; min-height: 52px; padding: 14px; border: 1px solid var(--c2-ink); border-radius: 0; background: transparent;
  color: var(--c2-ink); font: 400 15px/1.4 var(--font); letter-spacing: 0; text-transform: none;
}
.admin-form textarea { min-height: 120px; resize: vertical; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { outline: 2px solid var(--c2-ink); outline-offset: -2px; }
.admin-form input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--c2-ink); }
.admin-form button, .admin-btn {
  display: inline-flex; align-items: center; justify-content: center; width: fit-content;
  height: 56px; padding: 0 28px; border: 1px solid var(--c2-ink); border-radius: 0;
  background: var(--c2-ink); color: var(--c2-paper); cursor: pointer; text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: opacity 0.2s ease;
}
.admin-form button:hover, .admin-btn:hover { opacity: 0.85; }
.admin-form .rte-toolbar button {
  height: 32px; padding: 0 10px; background: transparent; color: var(--c2-ink); font-size: 12px; letter-spacing: 0; text-transform: none;
}

/* Rich-text editor (see rich_text_editor.js) — a toolbar over a plain
   contenteditable div, styled to read like the inputs around it. */
.rte { border: 1px solid var(--c2-ink); text-transform: none; letter-spacing: 0; font-weight: 400; }
.rte-toolbar { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--c2-ink); }
.rte-toolbar button {
  border: 0; border-right: 1px solid var(--c2-ink); border-radius: 0; background: transparent;
  padding: 0 12px; height: 36px; font-size: 13px; cursor: pointer; color: var(--c2-ink);
}
.rte-toolbar button:hover { background: var(--c2-ink); color: var(--c2-paper); }
.rte-content { min-height: 140px; padding: 14px; font-size: 14px; line-height: 1.6; outline: none; }
.rte-content p { margin: 0 0 8px; }
.rte-content p:last-child { margin-bottom: 0; }
.rte-content a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }