/* Kiwi Nails — Print stylesheet for catalogues & compliance docs
 * Designed for ⌘P → "Save as PDF" workflow.
 */

@page {
  size: A4;
  margin: 18mm 16mm 22mm 16mm;
}

@page :first {
  margin: 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #1a1a1a;
  line-height: 1.5;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  font-size: 11pt;
}

/* ── Screen-only notice bar ───────────────────────────────────── */
.no-print {
  background: linear-gradient(135deg, #1f3a6b, #E87722);
  color: #fff;
  padding: 14px 24px;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.no-print kbd {
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
}
@media print { .no-print { display: none !important; } }

/* ── Cover page ────────────────────────────────────────────────── */
.cover {
  page-break-after: always;
  width: 210mm;
  height: 297mm;
  padding: 0;
  margin: 0;
  background: linear-gradient(180deg, #16294d 0%, #1f3a6b 60%, #25446e 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.cover::before {
  content: "";
  position: absolute; right: -150px; top: -150px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(232,119,34,0.35), transparent 65%);
}
.cover .top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22mm 22mm 0;
  position: relative; z-index: 2;
}
.cover .top img { height: 16mm; }
.cover .top .meta { font-size: 11pt; color: #ffd2a8; letter-spacing: 1.5pt; text-transform: uppercase; }

.cover .title {
  padding: 30mm 22mm 0;
  position: relative;
  z-index: 2;
}
.cover .eyebrow {
  display: inline-block;
  background: rgba(232,119,34,0.25);
  color: #ffd2a8;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 1.8pt;
  text-transform: uppercase;
  margin-bottom: 16pt;
}
.cover h1 {
  font-size: 56pt;
  line-height: 1;
  margin: 0;
  font-weight: 800;
  letter-spacing: -1pt;
}
.cover h1 .accent { color: #E87722; }
.cover h2 {
  font-size: 22pt;
  line-height: 1.2;
  margin: 12pt 0 0;
  font-weight: 400;
  color: #cfd6e3;
  max-width: 120mm;
}

.cover .image-block {
  margin-top: auto;
  height: 130mm;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.cover .image-block img {
  max-height: 110mm;
  max-width: 70%;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}

.cover .footer-bar {
  background: rgba(0,0,0,0.25);
  padding: 8mm 22mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10pt;
  position: relative;
  z-index: 2;
}
.cover .footer-bar .badges {
  display: flex; gap: 14pt; font-weight: 700;
}
.cover .footer-bar .badges span { color: #E87722; }

/* ── TOC page ──────────────────────────────────────────────────── */
.page {
  page-break-after: always;
  padding-top: 8mm;
}
.page:last-child { page-break-after: auto; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10pt;
  border-bottom: 3pt solid #E87722;
  margin-bottom: 14pt;
}
.page-header img { height: 12mm; }
.page-header .badge {
  background: #1f3a6b;
  color: #fff;
  padding: 4pt 12pt;
  border-radius: 999px;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 1.5pt;
  text-transform: uppercase;
}

.page-title {
  font-size: 28pt;
  font-weight: 800;
  color: #1f3a6b;
  margin: 0 0 6pt;
  letter-spacing: -0.5pt;
}
.page-subtitle {
  color: #6b6b6b;
  font-size: 12pt;
  margin: 0 0 18pt;
}

.toc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12pt;
}
.toc-table tr td {
  padding: 9pt 0;
  border-bottom: 1pt dotted #cccccc;
}
.toc-table tr td.section {
  background: #1f3a6b;
  color: #fff;
  font-weight: 700;
  padding: 8pt 12pt;
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 1pt;
}
.toc-table tr td.section + td { background: #1f3a6b; color: #fff; font-weight: 700; padding-right: 12pt; text-align: right; }
.toc-table tr td:first-child { padding-left: 8pt; }
.toc-table tr td:last-child { text-align: right; color: #1f3a6b; font-weight: 600; padding-right: 8pt; }

/* ── Section pages ────────────────────────────────────────────── */
.section-cover {
  page-break-after: always;
  page-break-before: always;
  padding: 30mm 0 0;
}
.section-cover .label {
  color: #E87722;
  font-size: 11pt;
  letter-spacing: 2.5pt;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8pt;
}
.section-cover h1 {
  font-size: 42pt;
  color: #1f3a6b;
  margin: 0 0 12pt;
  letter-spacing: -0.5pt;
  font-weight: 800;
  line-height: 1.05;
}
.section-cover p.lead {
  color: #6b6b6b;
  font-size: 14pt;
  line-height: 1.5;
  max-width: 140mm;
}
.section-cover .hero-img {
  margin-top: 24pt;
  background: #f6f6f3;
  border-radius: 8pt;
  padding: 14pt;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130mm;
}
.section-cover .hero-img img {
  max-width: 80%;
  max-height: 110mm;
}

/* ── Product section ──────────────────────────────────────────── */
.product-section {
  page-break-inside: avoid;
  margin-bottom: 24pt;
}
.product-section .heading {
  background: #1f3a6b;
  color: #fff;
  padding: 10pt 14pt;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4pt 4pt 0 0;
}
.product-section .heading h3 {
  margin: 0;
  font-size: 13pt;
  font-weight: 700;
}
.product-section .heading .pill {
  background: rgba(232,119,34,0.25);
  color: #fff;
  padding: 3pt 10pt;
  border-radius: 999px;
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: 0.8pt;
  text-transform: uppercase;
}

.product-section .inner {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 0;
  border: 1pt solid #ddd;
  border-top: 0;
  border-radius: 0 0 4pt 4pt;
  overflow: hidden;
}
.product-section .photo {
  background: linear-gradient(180deg, #fbfbfa, #efefe9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8pt;
  border-right: 1pt solid #ddd;
  min-height: 38mm;
}
.product-section .photo img {
  max-width: 100%;
  max-height: 32mm;
}

.product-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
}
.product-section table thead th {
  background: #f2f2ef;
  color: #1f3a6b;
  text-align: left;
  padding: 6pt 10pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5pt;
  font-size: 8pt;
  border-bottom: 1pt solid #ddd;
}
.product-section table tbody td {
  padding: 5pt 10pt;
  border-bottom: 1pt solid #f0f0f0;
}
.product-section table tbody tr:last-child td { border-bottom: 0; }
.product-section table tbody tr:nth-child(even) td { background: #fafaf8; }
.product-section table td.code {
  font-family: "SF Mono", Menlo, monospace;
  font-weight: 600;
  color: #1f3a6b;
  font-size: 8.5pt;
}
.product-section table td.barcode {
  font-family: "SF Mono", Menlo, monospace;
  color: #6b6b6b;
  font-size: 8pt;
}

/* ── Compliance doc layout ────────────────────────────────────── */
.doc-page {
  padding-top: 4mm;
}
.doc-page h1 {
  font-size: 24pt;
  color: #1f3a6b;
  margin: 0 0 8pt;
  font-weight: 800;
  letter-spacing: -0.4pt;
  padding-bottom: 10pt;
  border-bottom: 3pt solid #E87722;
}
.doc-page h2 {
  color: #1f3a6b;
  font-size: 14pt;
  margin: 22pt 0 8pt;
  padding-bottom: 4pt;
  border-bottom: 1pt solid #e0e0e0;
}
.doc-page h3 {
  color: #1f3a6b;
  font-size: 11pt;
  margin: 14pt 0 4pt;
}
.doc-page p { margin: 0 0 8pt; }
.doc-page ul { margin: 0 0 12pt; padding-left: 20pt; }
.doc-page li { margin-bottom: 4pt; }

.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8pt 0 14pt;
  font-size: 10pt;
}
.doc-table th {
  background: #e8eef8;
  color: #1f3a6b;
  text-align: left;
  padding: 8pt 10pt;
  font-weight: 700;
  border: 1pt solid #c5cfdb;
  vertical-align: top;
}
.doc-table td {
  border: 1pt solid #ddd;
  padding: 8pt 10pt;
  vertical-align: top;
}

.callout {
  background: #fff5e6;
  border-left: 4pt solid #E87722;
  padding: 10pt 14pt;
  margin: 12pt 0;
  font-size: 10pt;
  color: #6c4818;
  border-radius: 0 4pt 4pt 0;
}
.callout b { color: #1f3a6b; }

.signature-block {
  margin-top: 32pt;
  padding-top: 18pt;
  border-top: 2pt solid #1f3a6b;
}
.signature-block .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24pt;
  margin-top: 18pt;
}
.signature-block .label {
  color: #6b6b6b;
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.8pt;
  margin-bottom: 3pt;
}
.signature-block .sig-line {
  border-bottom: 1pt solid #1a1a1a;
  height: 28pt;
  margin-bottom: 6pt;
}
.signature-block b { color: #1f3a6b; }

.doc-footer {
  margin-top: 32pt;
  padding-top: 12pt;
  border-top: 1pt solid #ddd;
  color: #888;
  font-size: 8pt;
  line-height: 1.5;
}

.cert-badge-row {
  display: flex;
  gap: 14pt;
  flex-wrap: wrap;
  margin: 10pt 0 20pt;
}
.cert-badge {
  flex: 1;
  min-width: 80mm;
  background: #f8f9fb;
  border: 1pt solid #e0e0e0;
  border-radius: 4pt;
  padding: 10pt 14pt;
  display: flex;
  gap: 12pt;
  align-items: center;
}
.cert-badge .logo {
  width: 18mm;
  height: 18mm;
  background: #1f3a6b;
  color: #fff;
  border-radius: 4pt;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12pt;
  letter-spacing: 0.5pt;
  flex-shrink: 0;
}
.cert-badge .name {
  font-size: 11pt;
  font-weight: 700;
  color: #1f3a6b;
  margin: 0 0 2pt;
}
.cert-badge .desc {
  font-size: 9pt;
  color: #6b6b6b;
  line-height: 1.4;
}