/* =========================================================
   LABS.INCU — Shop / Product detail / Blog pages
   Scoped under .shop-page so it never leaks into other pages
   (this stylesheet is only @push('css')'d on the marketplace,
   product-details and blog views — the cart page has its own
   self-contained styles).
   ========================================================= */
.shop-page {
  --color-primary: #3700b3;
  --color-primary-dark: #1f0065;
  --color-primary-light: #efeaff;
  --color-accent-orange: #ff6f00;
  --color-heading: #101828;
  --color-text: #5f6b7a;
  --color-text-light: #8a94a6;
  --color-border: #e7e6ef;
  --color-white: #ffffff;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-card-hover: 0 12px 28px rgba(16, 24, 40, 0.12);
  --container-max: 1320px;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  color: var(--color-text);
}

.shop-page img { max-width: 100%; }
.shop-page h1, .shop-page h2, .shop-page h3, .shop-page h4, .shop-page h5 {
  color: var(--color-heading);
  font-weight: 700;
}

.shop-page .container-xl-custom {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline-start: 24px;
  padding-inline-end: 24px;
}

.shop-page .section-py { padding-top: 56px; padding-bottom: 56px; }

/* ---------- Page banner ---------- */
.shop-page .page-banner {
  background: var(--color-primary-light);
  padding: 60px 0 54px;
  text-align: center;
}
.shop-page .page-banner h1 { font-size: 34px; margin-bottom: 14px; }
.shop-page .page-banner .breadcrumb-trail { color: var(--color-text); font-size: 14.5px; }
.shop-page .page-banner .breadcrumb-trail a { color: var(--color-text); transition: color .2s ease; }
.shop-page .page-banner .breadcrumb-trail a:hover,
.shop-page .page-banner .breadcrumb-trail a:focus-visible { color: var(--color-primary); }
.shop-page .page-banner .breadcrumb-trail .sep { margin: 0 8px; color: var(--color-text-light); }

@media (max-width: 576px) {
  .shop-page .page-banner { padding: 44px 0 38px; }
  .shop-page .page-banner h1 { font-size: 26px; }
}

/* ---------- Sidebar / categories ---------- */
.shop-page .shop-sidebar {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}
.shop-page .shop-sidebar h5 { font-size: 17px; margin-bottom: 6px; }
.shop-page .category-list { list-style: none; margin: 14px 0 0; padding: 0; }
.shop-page .category-list li { border-bottom: 1px solid var(--color-border); }
.shop-page .category-list li:last-child { border-bottom: none; }
.shop-page .category-list a {
  display: block; padding: 12px 2px; color: var(--color-text); font-size: 14.5px;
  transition: color .2s ease, padding-left .2s ease;
}
.shop-page .category-list a:hover,
.shop-page .category-list a.active,
.shop-page .category-list a:focus-visible { color: var(--color-primary); padding-left: 6px; font-weight: 600; }

/* ---------- Toolbar ---------- */
.shop-page .shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 16px 22px; margin-bottom: 24px; font-size: 14.5px;
}
.shop-page .sort-select {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 14px;
  font-size: 14px; color: var(--color-heading); background-color: var(--color-white);
}
.shop-page .sort-select:focus { outline: none; border-color: var(--color-primary); }

/* ---------- Buttons ---------- */
.shop-page .btn-solid {
  background-color: var(--color-primary); color: var(--color-white); font-weight: 600;
  padding: 12px 30px; border-radius: var(--radius-sm); border: 1px solid var(--color-primary);
  transition: background-color .2s ease, transform .15s ease; display: inline-block;
}
.shop-page .btn-solid:hover, .shop-page .btn-solid:focus-visible {
  background-color: var(--color-primary-dark); border-color: var(--color-primary-dark);
  color: var(--color-white); transform: translateY(-1px);
}
.shop-page .btn-outline-primary-custom {
  background-color: transparent; color: var(--color-primary); font-weight: 600;
  padding: 12px 26px; border-radius: var(--radius-sm); border: 1px solid var(--color-primary);
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.shop-page .btn-outline-primary-custom:hover, .shop-page .btn-outline-primary-custom:focus-visible {
  background-color: var(--color-primary); color: var(--color-white); transform: translateY(-1px);
}
.shop-page .btn-solid:disabled, .shop-page .btn-solid.disabled {
  opacity: .55; cursor: not-allowed; transform: none;
}
.shop-page .btn-outline-primary-custom.btn-sm {
  padding: 7px 14px; font-size: 12.5px;
}

/* ---------- Product request actions (product detail page) ---------- */
.shop-page .product-request-actions {
  padding-top: 14px; border-top: 1px solid var(--color-border);
}

/* ---------- Product comparison ---------- */
.shop-page .comparison-table-wrap { overflow-x: auto; }
.shop-page .comparison-table { min-width: 720px; }
.shop-page .comparison-table th { background: var(--color-bg-light, #f8f9fb); vertical-align: middle; }
.shop-page .comparison-table td { vertical-align: middle; }
.shop-page .comparison-product-col { text-align: center; min-width: 160px; }
.shop-page .comparison-product-col img { width: 90px; height: 90px; object-fit: contain; margin-bottom: 8px; }
.shop-page .comparison-product-col h4 { font-size: 14px; margin-bottom: 4px; }
.shop-page .comparison-product-col h4 a { color: inherit; text-decoration: none; }

/* ---------- Section head ---------- */
.shop-page .section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 18px; border-bottom: 1px solid var(--color-border); margin-bottom: 34px;
}
.shop-page .section-head h2 { font-size: 26px; line-height: 1.35; }
.shop-page .section-head .view-all { color: var(--color-text-light); font-size: 14px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ---------- Product grid card ---------- */
.shop-page .product-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 16px 20px;
  height: 100%; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  position: relative; display: flex; flex-direction: column;
}
.shop-page .product-card > form { margin-top: auto; }
.shop-page .product-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); border-color: transparent; }
.shop-page .product-card .thumb {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden;
}
.shop-page .product-card .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.shop-page .product-card h3 { font-size: 14px; font-weight: 500; color: #333c47; line-height: 1.4; margin-bottom: 10px; }
.shop-page .product-card h3 a { color: inherit; text-decoration: none; }
.shop-page .product-card h3 a:hover { color: var(--color-primary); }
.shop-page .product-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shop-page .product-price { color: var(--color-primary); font-weight: 700; font-size: 15px; }
.shop-page .product-old-price { color: var(--color-text-light); font-size: 12px; text-decoration: line-through; margin-left: 6px; }
.shop-page .product-rating { color: var(--color-accent-orange); font-size: 12px; letter-spacing: 1px; }
.shop-page .product-card .wishlist-btn {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-white); border: 1px solid var(--color-border); display: flex; align-items: center;
  justify-content: center; color: var(--color-text-light); z-index: 2;
}
.shop-page .product-card .wishlist-btn.active,
.shop-page .product-card .wishlist-btn:hover { color: #e63946; border-color: #e63946; }
.shop-page .product-card .compare-btn {
  position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-white); border: 1px solid var(--color-border); display: flex; align-items: center;
  justify-content: center; color: var(--color-text-light); z-index: 2;
}
.shop-page .product-card .compare-btn.active,
.shop-page .product-card .compare-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.shop-page .product-card .btn-add-cart {
  width: 100%; margin-top: 4px; background: var(--color-primary-light); color: var(--color-primary);
  border: none; border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12.5px; font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.shop-page .product-card .btn-add-cart:hover:not(:disabled) { background: var(--color-primary); color: var(--color-white); }

/* ---------- Empty state ---------- */
.shop-page .shop-empty { text-align: center; padding: 60px 20px; color: var(--color-text-light); }

/* ---------- Pagination ---------- */
.shop-page .pagination { margin-top: 36px; justify-content: center; }
.shop-page .pagination .page-link { color: var(--color-primary); border-color: var(--color-border); }
.shop-page .pagination .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); }

/* ---------- Product detail card ---------- */
.shop-page .product-detail-card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 28px; margin-bottom: 40px;
}
.shop-page .product-detail-gallery-main {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px;
  background: #f7f6fc; display: flex; align-items: center; justify-content: center; min-height: 320px;
}
.shop-page .product-detail-gallery-main img { max-height: 320px; object-fit: contain; }
.shop-page .product-detail-thumbs .thumb-box {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); height: 96px; background: #f4f3fb;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s ease;
}
.shop-page .product-detail-thumbs .thumb-box:hover { border-color: var(--color-primary); }
.shop-page .product-detail-thumbs .thumb-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.shop-page .product-detail-info .model-name { color: var(--color-text-light); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.shop-page .product-detail-info h2 { font-size: 24px; line-height: 1.35; margin: 8px 0 16px; }
.shop-page .product-detail-info .divider { border-top: 1px solid var(--color-border); margin: 18px 0; }
.shop-page .product-detail-info .features-list { padding-left: 20px; margin: 12px 0 0; }
.shop-page .product-detail-info .features-list li { margin-bottom: 8px; font-size: 14.5px; }
.shop-page .product-detail-info .usage-note {
  background: var(--color-primary-light); border-radius: var(--radius-sm); padding: 16px 18px;
  font-size: 14px; color: var(--color-text); margin: 22px 0;
}

/* ---------- Small related-product card ---------- */
.shop-page .related-product-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; text-align: start;
  height: 100%; transition: box-shadow .2s ease, transform .2s ease;
}
.shop-page .related-product-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.shop-page .related-product-card .thumb { height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: hidden; }
.shop-page .related-product-card .thumb img { max-height: 100%; object-fit: contain; }
.shop-page .related-product-card small { color: var(--color-text-light); font-size: 12px; }
.shop-page .related-product-card h4 { font-size: 14.5px; margin: 6px 0; font-weight: 600; line-height: 1.4; }
.shop-page .related-product-card h4 a { color: inherit; text-decoration: none; }
.shop-page .related-product-card h4 a:hover { color: var(--color-primary); }
.shop-page .related-product-card .price { font-weight: 700; color: var(--color-heading); font-size: 14px; }

/* ---------- Blog listing / details ---------- */
.shop-page .blog-post-meta { font-size: 13.5px; color: var(--color-text-light); margin-bottom: 16px; }
.shop-page .blog-post-title { font-size: 32px; line-height: 1.3; margin-bottom: 24px; }
.shop-page .blog-post-image { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 28px; }
.shop-page .blog-post-body p { margin-bottom: 18px; font-size: 14.5px; }

.shop-page .blog-sidebar { border-left: 1px solid var(--color-border); padding-left: 32px; }
@media (max-width: 900px) {
  .shop-page .blog-sidebar { border-left: none; padding-left: 0; margin-top: 40px; border-top: 1px solid var(--color-border); padding-top: 32px; }
}
.shop-page .blog-sidebar-item { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--color-border); }
.shop-page .blog-sidebar-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.shop-page .blog-sidebar-item .dot-marker { width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); display: inline-block; margin-bottom: 12px; }
.shop-page .blog-sidebar-item h4 { font-size: 16px; line-height: 1.4; margin-bottom: 10px; }
.shop-page .blog-sidebar-item h4 a { color: inherit; text-decoration: none; }
.shop-page .blog-sidebar-item h4 a:hover { color: var(--color-primary); }
.shop-page .blog-sidebar-item p { font-size: 13.5px; margin-bottom: 12px; color: var(--color-text); }
.shop-page .read-more-link { font-size: 13.5px; font-weight: 600; color: var(--color-primary); transition: color .2s ease; }
.shop-page .read-more-link:hover, .shop-page .read-more-link:focus-visible { color: var(--color-primary-dark); }

.shop-page .blog-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease; background: var(--color-white);
}
.shop-page .blog-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.shop-page .blog-card-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f4f3fb; }
.shop-page .blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shop-page .blog-card-body { padding: 20px; }
.shop-page .blog-card-body h3 { font-size: 17px; line-height: 1.4; margin-bottom: 10px; }
.shop-page .blog-card-body h3 a { color: inherit; text-decoration: none; }
.shop-page .blog-card-body h3 a:hover { color: var(--color-primary); }
.shop-page .blog-card-excerpt { font-size: 13.5px; color: var(--color-text); margin-bottom: 12px; }

/* ---------- Contact page ---------- */
.shop-page .contact-form-card .form-control,
.shop-page .contact-form-card .form-select {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 13px 16px; font-size: 14px;
}
.shop-page .contact-form-card .form-control:focus,
.shop-page .contact-form-card .form-select:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(55, 0, 179, .08);
}

.shop-page .official-address h5 { margin-bottom: 22px; font-size: 19px; }
.shop-page .official-address p { font-size: 14.5px; line-height: 1.95; color: var(--color-text); }

.shop-page .social-icons { display: flex; gap: 10px; margin-top: 0; }
.shop-page .social-icons a {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.shop-page .official-address .social-icons a { background: var(--color-primary-light); color: var(--color-primary); }
.shop-page .official-address .social-icons a:hover,
.shop-page .official-address .social-icons a:focus-visible { background-color: var(--color-primary); color: var(--color-white); }

.shop-page .qa-item { display: flex; gap: 18px; margin-bottom: 26px; }
.shop-page .qa-number {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-primary);
  color: var(--color-white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.shop-page .qa-content h5 { font-size: 15.5px; margin-bottom: 8px; }
.shop-page .qa-content p { font-size: 13.5px; margin: 0; color: var(--color-text); }

.shop-page .map-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.shop-page .map-frame iframe { width: 100%; height: 340px; border: 0; display: block; }

/* ---------- FAQ page ---------- */
.shop-page .faq-accordion .accordion-item {
  border: 1px solid var(--color-border); border-radius: var(--radius-md) !important; overflow: hidden; margin-bottom: 14px;
}
.shop-page .faq-accordion .accordion-button {
  font-weight: 600; font-size: 15px; color: var(--color-heading); padding: 18px 20px; box-shadow: none;
}
.shop-page .faq-accordion .accordion-button:not(.collapsed) { background: var(--color-primary-light); color: var(--color-primary-dark); }
.shop-page .faq-accordion .accordion-button:focus { box-shadow: none; border-color: var(--color-border); }
.shop-page .faq-accordion .accordion-button::after { flex-shrink: 0; }
.shop-page .faq-accordion .accordion-body { font-size: 14.5px; color: var(--color-text); padding: 4px 20px 20px; }

.shop-page .faq-cta {
  text-align: center; margin-top: 40px; padding: 36px 24px; border-radius: var(--radius-md);
  background: var(--color-primary-light);
}
.shop-page .faq-cta h5 { margin-bottom: 8px; }
.shop-page .faq-cta p { color: var(--color-text); margin-bottom: 18px; }

/* ---------- Laboratory Center ---------- */
.shop-page .lab-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white);
  transition: box-shadow .2s ease, transform .2s ease; height: 100%; display: flex; flex-direction: column;
}
.shop-page .lab-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.shop-page .lab-card-thumb { aspect-ratio: 16 / 9; background: #f4f3fb; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.shop-page .lab-card-thumb img { max-width: 60%; max-height: 60%; object-fit: contain; }
.shop-page .lab-card-body { padding: 18px; }
.shop-page .lab-card-body h3 { font-size: 16px; margin: 8px 0 6px; }
.shop-page .lab-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--color-text-light); margin: 0; }

.shop-page .lab-verification-badge {
  display: inline-flex; align-items: center; gap: 6px; color: var(--color-white); font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px;
}

/* Match-strength badge on the Testing & Inspection Center compare cards - same
   pill shape/scale as .lab-verification-badge, colour picked by score tier. */
.shop-page .lab-match-badge {
  display: inline-flex; align-items: center; gap: 6px; color: var(--color-white); font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .3px; background: var(--color-primary);
}
.shop-page .lab-match-badge.tier-high { background: #17c3a2; }
.shop-page .lab-match-badge.tier-medium { background: #f5a524; }
.shop-page .lab-match-badge.tier-low { background: #8a94a6; }

.shop-page .lab-highlight-list { list-style: none; margin: 0 0 12px; padding: 0; font-size: 12.5px; color: var(--color-text); }
.shop-page .lab-highlight-list li { padding: 3px 0; display: flex; align-items: flex-start; gap: 6px; }
.shop-page .lab-highlight-list li i { color: var(--color-primary); margin-top: 2px; }

.shop-page .lab-side-block { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
.shop-page .lab-side-block h4 { font-size: 14px; margin-bottom: 10px; }
.shop-page .lab-side-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.shop-page .lab-side-list li { padding: 6px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.shop-page .lab-side-list li:last-child { border-bottom: none; }
.shop-page .lab-side-list a { color: var(--color-primary); text-decoration: none; }
.shop-page .lab-side-list a:hover { text-decoration: underline; }

.shop-page .lab-form-heading { font-size: 16px; font-weight: 700; color: var(--color-heading); border-bottom: 1px solid var(--color-border); padding-bottom: 10px; margin-bottom: 6px; }

.shop-page .lab-cta-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; height: 100%;
  background: var(--color-white);
}
.shop-page .lab-cta-card h3 { font-size: 18px; margin: 12px 0 8px; }
.shop-page .lab-cta-card p { color: var(--color-text); margin-bottom: 16px; }

.shop-page .lab-capability-pill {
  display: block; text-align: center; padding: 12px 10px; border-radius: var(--radius-sm);
  background: #f4f3fb; color: var(--color-text-light); font-size: 13px; font-weight: 600;
}
.shop-page .lab-capability-pill-live {
  background: var(--color-primary-light); color: var(--color-primary); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.shop-page .lab-capability-pill-live:hover { background: var(--color-primary); color: var(--color-white); }

/* ---------- Compliance journey strip ---------- */
.shop-page .compliance-journey { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; }
.shop-page .compliance-step {
  flex: 1 1 150px; max-width: 180px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 18px 14px; text-align: center;
}
.shop-page .compliance-step-number {
  width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: var(--color-white);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; margin: 0 auto 10px;
}
.shop-page .compliance-step h4 { font-size: 14px; margin-bottom: 6px; }
.shop-page .compliance-step p { font-size: 12px; color: var(--color-text-light); margin: 0; }
.shop-page .compliance-step-arrow { display: flex; align-items: center; color: var(--color-text-light); }

/* ---------- Regulatory directory (Point 8) ---------- */
.shop-page .regulatory-domain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.shop-page .regulatory-domain-card {
  display: block; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px 20px;
  text-align: center; text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease;
}
.shop-page .regulatory-domain-card:hover { box-shadow: 0 10px 24px rgba(16, 24, 40, .08); transform: translateY(-2px); }
.shop-page .regulatory-domain-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto 14px;
}
.shop-page .regulatory-domain-card h4 { font-size: 15px; margin-bottom: 8px; color: var(--color-heading); }
.shop-page .regulatory-domain-card p { font-size: 13px; color: var(--color-text-light); margin-bottom: 10px; }
.shop-page .regulatory-domain-card .view-link { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.shop-page .regulatory-principle-box {
  border: 1px dashed var(--color-primary); border-radius: var(--radius-md); padding: 20px 24px; background: var(--color-primary-light);
}
.shop-page .regulatory-principle-box h4 { color: var(--color-heading); margin-bottom: 8px; }
.shop-page .regulatory-principle-box p { color: var(--color-text); margin: 0; }
.shop-page .regulatory-authority-box {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 20px; background: #fafaff;
}

@media (max-width: 768px) {
  .shop-page .compliance-step-arrow { display: none; }
}

/* ---------- Testing & Inspection Center tracker ---------- */
.shop-page .testing-tracker-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; }
.shop-page .testing-tracker-step {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 110px; text-align: center;
}
.shop-page .testing-tracker-step-icon {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; border: 2px solid var(--color-border); color: var(--color-text-light); background: var(--color-white);
}
.shop-page .testing-tracker-step span { font-size: 13px; color: var(--color-text-light); }
.shop-page .testing-tracker-step--done .testing-tracker-step-icon,
.shop-page .testing-tracker-step--active .testing-tracker-step-icon {
  border-color: var(--step-color, var(--color-primary)); color: var(--step-color, var(--color-primary));
}
.shop-page .testing-tracker-step--done .testing-tracker-step-icon { background: var(--step-color, var(--color-primary)); color: var(--color-white); }
.shop-page .testing-tracker-step--done span,
.shop-page .testing-tracker-step--active span { color: var(--color-heading); font-weight: 600; }
.shop-page .testing-tracker-connector { flex: 1 1 40px; height: 2px; background: var(--color-border); margin-bottom: 22px; min-width: 24px; }
.shop-page .testing-tracker-connector--done { background: var(--color-primary); }

/* Rejected/blocked stage (e.g. Import Compliance Journey's Registration
   stage when registration_status = Status::REJECT) - same shape as
   --done/--active but flagged red instead of the step's own colour. */
.shop-page .testing-tracker-step--blocked .testing-tracker-step-icon {
  border-color: var(--step-color, #ef4444); color: var(--color-white); background: var(--step-color, #ef4444);
}
.shop-page .testing-tracker-step--blocked span { color: #ef4444; font-weight: 600; }

/* ---------- Import Compliance Journey (doc section 23) ---------- */
.shop-page .import-compliance-journey .regulatory-authority-box { display: flex; flex-direction: column; }
.shop-page .import-compliance-shipping-list { list-style: none; margin: 0; padding: 0; }
.shop-page .import-compliance-shipping-list li {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 13.5px; color: var(--color-text);
}
.shop-page .import-compliance-shipping-list li:last-child { border-bottom: none; }
.shop-page .import-compliance-shipping-list li i { color: var(--color-primary); margin-top: 3px; }

@media (max-width: 576px) {
  .shop-page .testing-tracker-steps { flex-direction: column; }
  .shop-page .testing-tracker-connector { display: none; }
}

/* ==========================================================================
   Filter sidebar + async results (Stage 4)
   The sidebar used to offer categories only, while the controller already
   supported search, price and rating. These are the controls for them.
   ========================================================================== */

.shop-page .breadcrumb-trail {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.shop-page .breadcrumb-trail li + li::before {
  content: "/";
  margin-inline-end: 8px;
  color: var(--color-text-light);
}

.shop-page .filter-group + .filter-group {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}

.shop-page .filter-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 10px;
}

.shop-page .filter-search {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.shop-page .filter-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 9px 12px;
  font-size: 14.5px;
  background: transparent;
  color: var(--color-text);
}

.shop-page .filter-search button {
  border: 0;
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding-inline: 14px;
  cursor: pointer;
}

.shop-page .filter-search:focus-within {
  border-color: var(--color-primary);
}

/* Category and rating options are radios styled as rows - the control is a
   real input, so keyboard and screen readers get a proper radio group. */
.shop-page .category-list,
.shop-page .rating-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-page .rating-list li + li,
.shop-page .category-list li + li {
  border-top: 1px solid var(--color-border);
}

.shop-page .category-list label,
.shop-page .rating-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 2px;
  font-size: 14.5px;
  color: var(--color-text);
  cursor: pointer;
  transition: color .2s ease;
}

.shop-page .category-list label:hover,
.shop-page .rating-list label:hover,
.shop-page .category-list label.active,
.shop-page .rating-list label.active {
  color: var(--color-primary);
}

.shop-page .category-list input,
.shop-page .rating-list input {
  accent-color: var(--color-primary);
  flex: 0 0 auto;
}

.shop-page .rating-list .bi-star-fill {
  color: #f5a623;
  font-size: 13px;
}

.shop-page .filter-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-page .filter-range input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 14.5px;
  color: var(--color-text);
}

.shop-page .filter-range input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
}

.shop-page .filter-clear {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: underline;
}

.shop-page .shop-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.shop-page .shop-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-light);
}

/* Results are swapped in place; dim and lock them while the request is out so
   the visitor can see something is happening without a layout jump. */
.shop-page #shopResults {
  transition: opacity .18s ease;
}

.shop-page #shopResults.is-loading {
  opacity: .45;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .shop-page #shopResults {
    transition: none;
  }
}

/* ==========================================================================
   Cart (Pass A)
   Replaces 48 lines of inline <style> that hardcoded #2f5bff on a purple
   site. Everything below draws on the brand ramp in tokens.css.
   ========================================================================== */

.cart-page .cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}

.cart-page .cart-lines {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cart-page .cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto;
  gap: 20px;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--color-border);
}

.cart-page .cart-line:last-child { border-bottom: none; }

.cart-page .cart-thumb {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  overflow: hidden;
}

.cart-page .cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-page .cart-line-main h3 {
  font-size: 15.5px;
  font-weight: 600;
  margin: 0 0 5px;
  line-height: 1.4;
}

.cart-page .cart-line-main h3 a { color: var(--color-heading); }

.cart-page .cart-line-main h3 a:hover,
.cart-page .cart-line-main h3 a:focus-visible { color: var(--brand-text); }

.cart-page .cart-line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--color-text-light);
}

.cart-page .cart-stock {
  margin: 8px 0 0;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-page .cart-stock-low { color: #b4650a; }
.cart-page .cart-stock-out { color: #a81f2d; }

/* Stepper: minus, value, plus - in that order, and the value is typeable. */
.cart-page .qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cart-page .qty-btn {
  width: 34px;
  height: 36px;
  border: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.cart-page .qty-btn:hover,
.cart-page .qty-btn:focus-visible {
  background: var(--brand-tint);
  color: var(--brand-text);
}

.cart-page .qty-input {
  width: 46px;
  height: 36px;
  border: 0;
  border-inline: 1px solid var(--color-border);
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-heading);
  background: var(--color-white);
  -moz-appearance: textfield;
}

.cart-page .qty-input::-webkit-outer-spin-button,
.cart-page .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-page .cart-unit-price {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--color-text-light);
}

.cart-page .cart-line-total {
  text-align: end;
  min-width: 120px;
}

.cart-page .cart-line-amount {
  display: block;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

.cart-page .cart-remove {
  margin-top: 9px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 12.5px;
  color: var(--color-text-light);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: color .15s ease;
}

.cart-page .cart-remove:hover,
.cart-page .cart-remove:focus-visible { color: #a81f2d; }

/* ---------- Summary ---------- */
.cart-page .cart-summary { position: sticky; top: 24px; }

.cart-page .cart-summary-inner {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
}

.cart-page .cart-summary h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--color-heading);
}

.cart-page .cart-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 14.5px;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.cart-page .cart-summary-row small { color: var(--color-text-light); }
.cart-page .cart-summary-muted span:last-child { color: var(--color-text-light); font-size: 13.5px; }

.cart-page .cart-summary-total {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-heading);
}

.cart-page .cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.cart-page .cart-btn.w-100 { width: 100%; }

.cart-page .cart-btn-solid {
  margin-top: 20px;
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.cart-page .cart-btn-solid:hover,
.cart-page .cart-btn-solid:focus-visible {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}

.cart-page .cart-btn-outline {
  margin-top: 10px;
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}

.cart-page .cart-btn-outline:hover,
.cart-page .cart-btn-outline:focus-visible {
  border-color: var(--brand);
  color: var(--brand-text);
}

.cart-page .cart-assurances {
  list-style: none;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--color-border);
}

.cart-page .cart-assurances li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: 10px;
}

.cart-page .cart-assurances li:last-child { margin-bottom: 0; }
.cart-page .cart-assurances i { color: var(--brand); margin-top: 2px; }

/* ---------- Empty / loading / undo ---------- */
.cart-page .cart-empty {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  padding: 70px 20px;
  color: var(--color-text-light);
}

.cart-page .cart-empty i { font-size: 2.5rem; }
.cart-page .cart-empty p { margin: 16px 0 20px; }

.cart-page #cartBody { transition: opacity .18s ease; }
.cart-page #cartBody.is-loading { opacity: .5; pointer-events: none; }

.cart-undo {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-heading, #101828);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .2);
}

.cart-undo-btn {
  border: 0;
  background: none;
  color: var(--brand-200, #C6B6FF);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 991.98px) {
  .cart-page .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .cart-page .cart-summary { position: static; }
}

@media (max-width: 640px) {
  .cart-page .cart-line {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    row-gap: 16px;
  }
  .cart-page .cart-thumb { width: 64px; height: 64px; }
  .cart-page .cart-line-qty,
  .cart-page .cart-line-total { grid-column: 2; }
  .cart-page .cart-line-total { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-page #cartBody { transition: none; }
}

/* ==========================================================================
   Product page (Pass B)
   ========================================================================== */

.shop-page .product-detail-thumbs .thumb-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.shop-page .product-detail-thumbs .thumb-box img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.shop-page .product-detail-thumbs .thumb-box:hover,
.shop-page .product-detail-thumbs .thumb-box:focus-visible {
  border-color: var(--brand);
}

.shop-page .product-detail-thumbs .thumb-box.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-tint);
}

/* ---------- Availability ---------- */
.shop-page .product-availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
}

.shop-page .product-availability.is-in { background: #e6f4ec; color: #2c7a52; }
.shop-page .product-availability.is-low { background: #fcf3e3; color: #a85e08; }
.shop-page .product-availability.is-out { background: #fbeaec; color: #a81f2d; }

/* ---------- Compliance & documentation ---------- */
.shop-page .product-trust {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  margin-top: 24px;
}

.shop-page .product-trust-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 20px;
}

.shop-page .product-trust-heading i { color: var(--brand); }

.shop-page .product-provenance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 24px;
  margin: 0 0 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--color-border);
}

.shop-page .product-provenance:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.shop-page .product-provenance dt {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 4px;
}
.shop-page .product-provenance dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--color-heading); }

.shop-page .product-doc-group + .product-doc-group { margin-top: 20px; }
.shop-page .product-doc-group h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 10px;
}

.shop-page .product-doc-list { list-style: none; margin: 0; padding: 0; }
.shop-page .product-doc-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text);
}
.shop-page .product-doc-list li:last-child { border-bottom: none; }
.shop-page .product-doc-list i { color: var(--brand); }

/* ---------- Sticky buy bar (mobile) ---------- */
.product-sticky-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1030;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: var(--color-white, #fff);
  border-top: 1px solid var(--color-border, #e7e6ef);
  box-shadow: 0 -4px 18px rgba(16, 24, 40, .08);
}

.product-sticky-bar[hidden] { display: none !important; }

.product-sticky-price strong { display: block; font-size: 16px; color: var(--color-heading); }
.product-sticky-price small { color: var(--color-text-light); font-size: 12.5px; }
.product-sticky-bar form { margin: 0; }

@media (max-width: 991.98px) {
  .product-sticky-bar:not([hidden]) { display: flex; }
}

/* ---------- Add-to-cart confirmation ---------- */
.product-added {
  position: fixed;
  inset-block-start: 90px;
  inset-inline-end: 24px;
  z-index: 1090;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  padding: 14px 16px;
  border-radius: var(--radius-md, 10px);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #e7e6ef);
  box-shadow: 0 12px 30px rgba(16, 24, 40, .14);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}

.product-added.is-in { opacity: 1; transform: translateY(0); }
.product-added img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; background: var(--brand-tint); }
.product-added div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-added strong { font-size: 14px; color: var(--color-heading); }
.product-added span { font-size: 12.5px; color: var(--color-text-light); }
.product-added-cta { font-size: 13.5px; font-weight: 700; color: var(--brand-text); white-space: nowrap; }
.product-added-close {
  border: 0; background: none; font-size: 20px; line-height: 1;
  color: var(--color-text-light); cursor: pointer; padding: 0 2px;
}

@media (max-width: 575.98px) {
  .product-added { inset-inline: 12px; max-width: none; inset-block-start: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-added { transition: none; }
}

/* ==========================================================================
   Quote request confirmation + tracking (Pass C)
   ========================================================================== */

.cart-page .quote-hero { text-align: center; max-width: 640px; margin: 0 auto 36px; }

.cart-page .quote-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #e6f4ec;
  color: #2c7a52;
  font-size: 30px;
  margin-bottom: 18px;
}

.cart-page .quote-hero h1 { font-size: 30px; margin-bottom: 10px; }
.cart-page .quote-hero p { color: var(--color-text-light); margin: 0; }

.cart-page .quote-next {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 0 0 32px;
  padding: 0;
}

.cart-page .quote-next li {
  counter-increment: step;
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 22px 20px 22px;
}

.cart-page .quote-next li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-text);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.cart-page .quote-next strong { display: block; font-size: 15px; color: var(--color-heading); margin-bottom: 5px; }
.cart-page .quote-next span { font-size: 13.5px; color: var(--color-text-light); }

.cart-page .quote-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 26px 28px;
}

.cart-page .quote-ref {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.cart-page .quote-ref-label { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-light); }
.cart-page .quote-ref-value { font-size: 19px; letter-spacing: .06em; color: var(--color-heading); }

.cart-page .quote-status {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: #fcf3e3;
  color: #a85e08;
}
.cart-page .quote-status-1 { background: var(--brand-tint); color: var(--brand-text); }
.cart-page .quote-status-2 { background: #e6f4ec; color: #2c7a52; }
.cart-page .quote-status-3 { background: #fbeaec; color: #a81f2d; }

.cart-page .quote-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; }
.cart-page .quote-table th {
  text-align: start;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  font-weight: 500;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-page .quote-table td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.cart-page .quote-table td small { display: block; font-size: 12.5px; color: var(--color-text-light); margin-top: 3px; }
.cart-page .quote-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-page .quote-table tfoot td { border-bottom: none; padding-top: 10px; padding-bottom: 4px; }
.cart-page .quote-table tfoot .quote-total td {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-heading);
}

.cart-page .quote-note { margin: 18px 0 0; font-size: 13px; color: var(--color-text-light); }

.cart-page .quote-response {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
}
.cart-page .quote-response h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: var(--color-heading); }
.cart-page .quote-response p { margin: 0; font-size: 14px; color: var(--color-text); }
.cart-page .quote-response small { color: var(--color-text-light); font-size: 12.5px; }

.cart-page .quote-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px 24px;
  margin: 24px 0 0;
}
.cart-page .quote-meta dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-light); margin-bottom: 4px; }
.cart-page .quote-meta dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--color-heading); }

.cart-page .quote-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cart-page .quote-actions .cart-btn { margin-top: 0; width: auto; }

.cart-page .quote-keep { margin-top: 18px; font-size: 13.5px; color: var(--color-text-light); }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-page .page-banner-lead {
  max-width: 60ch;
  margin: 0 auto 14px;
  color: var(--color-text);
  font-size: 15.5px;
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.contact-method {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.contact-method:hover,
.contact-method:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 10px 26px -18px rgba(24, 16, 56, .5);
  transform: translateY(-2px);
  color: var(--color-text);
}

.contact-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--brand-tint);
  color: var(--brand-text);
  font-size: 17px;
  margin-bottom: 14px;
}

.contact-method-label {
  display: block;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.contact-method strong {
  display: block;
  font-size: 15.5px;
  color: var(--color-heading);
  margin-bottom: 4px;
  word-break: break-word;
}

.contact-method small { color: var(--color-text-light); font-size: 13px; }

.contact-page .contact-form-card,
.contact-page .contact-aside {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 30px 32px;
  height: 100%;
}

.contact-page .contact-form-card h2,
.contact-page .contact-aside h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 8px;
}

.contact-form-intro { color: var(--color-text-light); font-size: 14.5px; margin: 0 0 24px; }

/* Labels are visible. They used to be visually-hidden, leaving the
   placeholder as the only label - which disappears the moment you type. */
.contact-form .form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 6px;
}

.form-optional { font-weight: 400; color: var(--color-text-light); }

.contact-form .form-control,
.contact-form .form-select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14.5px;
  color: var(--color-heading);
  background: var(--color-white);
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .16);
}

.contact-form .form-control::placeholder { color: #b3bac6; }
.contact-form .invalid-feedback { font-size: 12.5px; color: #a81f2d; margin-top: 5px; }
.contact-form .is-invalid { border-color: #a81f2d; }

.contact-hint {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand-text);
  font-size: 13.5px;
}

.contact-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 24px;
}

.contact-form-actions .cart-btn { margin-top: 0; }

.contact-assurance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--color-text-light);
}

.contact-assurance i { color: var(--brand); }

.contact-address {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--color-text);
  margin: 0 0 18px;
}

.contact-address i { color: var(--brand); margin-top: 3px; }

.contact-page .map-frame {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 4 / 3;
}

.contact-page .map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.contact-social { margin-top: 24px; }
.contact-social strong { display: block; font-size: 13px; color: var(--color-heading); margin-bottom: 10px; }
.contact-social-icons { display: flex; gap: 10px; flex-wrap: wrap; }

.contact-social-icons a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.contact-social-icons a:hover,
.contact-social-icons a:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ---------- FAQ ---------- */
.contact-faq-head { margin-bottom: 22px; }
.contact-faq-head h2 { font-size: 22px; font-weight: 700; color: var(--color-heading); margin: 0 0 6px; }
.contact-faq-head p { color: var(--color-text-light); margin: 0; font-size: 14.5px; }

.contact-faq .accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm) !important;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--color-white);
}

.contact-faq .accordion-button {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-heading);
  background: var(--color-white);
  box-shadow: none;
  padding: 16px 20px;
}

.contact-faq .accordion-button:not(.collapsed) {
  background: var(--brand-tint);
  color: var(--brand-text);
}

.contact-faq .accordion-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.contact-faq .accordion-body {
  font-size: 14.5px;
  color: var(--color-text);
  padding: 4px 20px 18px;
}

.contact-faq-more { margin-top: 18px; font-size: 14px; color: var(--color-text-light); }
.contact-faq-more a { color: var(--brand-text); font-weight: 600; }

@media (max-width: 575.98px) {
  .contact-page .contact-form-card,
  .contact-page .contact-aside { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-method { transition: none; }
}

/* ==========================================================================
   Laboratory directory
   ==========================================================================
   The old card carried a logo, a name and two meta lines. Accreditations - the
   thing that actually decides which laboratory you approach - were stored on
   every record and shown on none of them.
   ========================================================================== */

.lab-directory .lab-filters,
.lab-directory .lab-cta {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px 22px;
}

.lab-directory .lab-cta { margin-top: 20px; }

.lab-directory .lab-cta h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 8px;
}

.lab-directory .lab-cta p {
  font-size: 13.5px;
  color: var(--color-text-light);
  margin: 0 0 16px;
}

.lab-directory .lab-cta .btn-solid { width: 100%; }

.lab-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, #8a94a6);
  flex: 0 0 auto;
}

/* ---------- Grid ---------- */

.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
}

.lab-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lab-card:hover,
.lab-card:focus-within {
  border-color: var(--brand);
  box-shadow: 0 14px 32px -22px rgba(24, 16, 56, .55);
  transform: translateY(-2px);
}

.lab-card-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.lab-card-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--brand-tint);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lab-card-logo img { width: 100%; height: 100%; object-fit: contain; }

.lab-card-id h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 5px;
}

.lab-card-id h3 a { color: var(--color-heading); }
.lab-card-id h3 a:hover,
.lab-card-id h3 a:focus-visible { color: var(--brand-text); }

.lab-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-light);
}

.lab-card-meta span { display: inline-flex; align-items: center; gap: 5px; }

/* The badge takes its colour from the verification status row rather than a
   hardcoded palette, so a new status just works. */
.lab-verification-badge {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--badge, #8a94a6);
}

.lab-card-specs {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.55;
}

.lab-accreditations {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
}

.lab-accreditations li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fbfaff;
  font-size: 12.5px;
  color: var(--color-text);
}

.lab-accreditations i { color: var(--brand); font-size: 12px; }
.lab-accreditations .is-more { color: var(--color-text-light); background: transparent; }

.lab-card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.lab-card-facts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--color-text-light);
}

.lab-card-facts span { display: inline-flex; align-items: center; gap: 6px; }
.lab-card-facts i { color: var(--brand); }

@media (max-width: 575.98px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-card-foot { flex-direction: column; align-items: stretch; }
  .lab-card-foot .btn-outline-primary-custom { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-card { transition: none; }
}

/* ==========================================================================
   Business registration / login
   ==========================================================================
   The register form was one long undifferentiated column ending in ten bare
   checkboxes. It is now three numbered steps, with the roles as selectable
   cards - the roles decide which parts of the platform open up, so they are
   the most consequential choice on the page and should look like it.
   ========================================================================== */

.business-register .biz-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: 26px 28px;
  margin: 0 0 20px;
}

.business-register .biz-fieldset legend {
  display: flex;
  align-items: center;
  gap: 11px;
  float: none;
  width: auto;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 18px;
  padding: 0;
}

.business-register .biz-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-text);
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}

.business-register .biz-legend-note {
  margin: -8px 0 18px;
  font-size: 14px;
  color: var(--color-text-light);
  max-width: 68ch;
}

/* ---------- Role cards ---------- */

.business-register .biz-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.business-register .biz-role {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  font-size: 14.5px;
  color: var(--color-text);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.business-register .biz-role i {
  font-size: 17px;
  color: var(--color-text-light);
  transition: color .16s ease;
}

.business-register .biz-role:hover {
  border-color: var(--brand);
}

/* The checkbox stays a real checkbox - keyboard, screen readers and the form
   post all keep working; it is just positioned as the card's indicator. */
.business-register .biz-role .form-check-input {
  margin: 0;
  flex: 0 0 auto;
  order: 3;
  margin-inline-start: auto;
}

.business-register .biz-role:has(.form-check-input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--color-heading);
  font-weight: 600;
}

.business-register .biz-role:has(.form-check-input:checked) i { color: var(--brand-text); }

.business-register .biz-role:has(.form-check-input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .22);
}

.business-register .biz-role-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: #f7f6fc;
  font-size: 13.5px;
  color: var(--color-text);
}

.business-register .biz-role-note i { color: var(--brand); margin-top: 2px; }

/* ---------- Actions ---------- */

.business-register .biz-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 20px 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.business-register .biz-actions-note { font-size: 14px; color: var(--color-text-light); }
.business-register .biz-actions-note a { color: var(--brand-text); font-weight: 600; }

/* ---------- Aside ---------- */

.business-register .biz-aside {
  position: sticky;
  top: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: 26px 26px 22px;
}

.business-register .biz-aside h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 18px;
}

.business-register .biz-benefits { list-style: none; margin: 0; padding: 0; }

.business-register .biz-benefits li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.business-register .biz-benefits li:last-child { border-bottom: none; }

.business-register .biz-benefits i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.business-register .biz-benefits strong {
  display: block;
  font-size: 14.5px;
  color: var(--color-heading);
  margin-bottom: 3px;
}

.business-register .biz-benefits span { font-size: 13px; color: var(--color-text-light); line-height: 1.55; }

.business-register .biz-aside-foot {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.business-register .biz-aside-foot strong { display: block; font-size: 14px; color: var(--color-heading); margin-bottom: 5px; }
.business-register .biz-aside-foot p { font-size: 13px; color: var(--color-text-light); margin: 0 0 8px; }
.business-register .biz-aside-foot a { font-size: 13.5px; font-weight: 600; color: var(--brand-text); }

/* ---------- Login card ---------- */

.business-register .biz-login-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: 32px;
}

.business-register .biz-login-head { margin-bottom: 24px; }
.business-register .biz-login-head h2 { font-size: 20px; font-weight: 700; color: var(--color-heading); margin: 0 0 6px; }
.business-register .biz-login-head p { font-size: 14px; color: var(--color-text-light); margin: 0; }

.business-register .biz-login-foot {
  margin: 20px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-light);
}

.business-register .biz-login-foot a { color: var(--brand-text); font-weight: 600; }

@media (max-width: 991.98px) {
  .business-register .biz-aside { position: static; margin-top: 4px; }
}

@media (max-width: 575.98px) {
  .business-register .biz-fieldset,
  .business-register .biz-actions,
  .business-register .biz-login-card { padding: 22px 18px; }
  .business-register .biz-roles { grid-template-columns: minmax(0, 1fr); }
  .business-register .biz-actions .btn-solid { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .business-register .biz-role { transition: none; }
}