/*!
 * Client Name Local Styles
 * Copyright 2008-2017 Punchmark
 */



@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Marcellus+SC&display=swap');
@import url('overrides/footer.css');
@import url('overrides/components.css');
@import url('pages/contact.css');

.script,
.accent {
  font-family: "Marcellus SC", serif !important;
}

/* ==========================================================================
   White product surface: product grid (v2) and product detail page.
   Scope: body#jewelry (category + search grid, filter drawer, quick view)
   and body#jewelry-details (PDP and its modals). The header, footer, home
   and content pages keep the dark Peridot surface. Vendor photos sit on
   white, so text, controls and icons here take the dark teal (#0e2a2e).
   The monolith hard-codes the Peridot colors, so each surface is answered
   by name; the theme's own !important button rule is answered in kind.
   ========================================================================== */

/* Surface and inherited text */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) {
  --bs-body-bg: #ffffff;
  --bs-body-bg-color: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #0e2a2e;
  --bs-body-color-rgb: 14, 42, 46;
  --bs-primary: #155e68;
  --bs-primary-rgb: 21, 94, 104;
  --bs-primary-color: #ffffff;
  --bs-p-color: #0e2a2e;
  --bs-p-lead-color: #0e2a2e;
  --bs-h1-color: #0e2a2e;
  --bs-h2-color: #0e2a2e;
  --bs-h3-color: #0e2a2e;
  --bs-h4-color: #0e2a2e;
  --bs-h5-color: #0e2a2e;
  --bs-h6-color: #0e2a2e;
  --bs-input-bg-color: #ffffff;
  --bs-input-color: #0e2a2e;
  --bs-input-border-color: #6b7b7e;
  color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal-content),
:is(body#jewelry, body#jewelry-details) main#main-content section {
  background-color: #ffffff;
}

/* Links */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) a:not(.btn) {
  color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) a:not(.btn):is(:hover, :focus) {
  color: #155e68;
  text-decoration: underline;
}

/* Buttons: dark primary on white, never the cream accent */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) button {
  color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .btn-primary {
  color: #ffffff;
  background-color: #0e2a2e;
  border-color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .btn-primary:is(:hover, :focus, :active, .active) {
  color: #ffffff;
  background-color: #1d4a50;
  border-color: #1d4a50;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .btn-primary:disabled {
  color: #ffffff;
  background-color: #5d6f72;
  border-color: #5d6f72;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .btn-default {
  color: #0e2a2e;
  background-color: #ffffff;
  border-color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .btn-default:is(:hover, :focus, :active, .active) {
  color: #ffffff;
  background-color: #0e2a2e;
  border-color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .btn-outline-dark {
  color: #0e2a2e !important;
  border-color: #0e2a2e !important;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .btn-outline-dark:is(:hover, :focus, :active, .active) {
  color: #ffffff !important;
  background-color: #0e2a2e !important;
}

/* Button hovers the theme repaints after the .btn-default hover above */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) button.btn-quick-view:is(:hover, :focus, :active) span {
  color: #ffffff;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .grid-quick-view-details button.btn-wishlist:hover {
  color: var(--bs-danger);
  background-color: #ffffff;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .item-in-a-wishlist .grid-quick-view-details button.btn-wishlist:is(:focus, :active) {
  color: var(--bs-danger);
  background-color: #ffffff;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) svg.btn-default:is(:hover, :focus, :active, .active) {
  color: #0e2a2e;
  background-color: transparent;
}

/* Form controls */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) :is(.form-control, .form-select, input[type="text"], input[type="search"], input[type="email"], input[type="tel"], textarea, select) {
  color: #0e2a2e;
  background-color: #ffffff;
  border-color: #6b7b7e;
}

body#jewelry-details main#main-content #jewelry-details-summary-column #jewelry-details-summary .form-floating :is(.form-control, .form-select) {
  color: #0e2a2e;
  background-color: #ffffff;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) :is(.form-control, .form-select, textarea)::placeholder {
  color: #5d6f72;
  opacity: 1;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .form-floating > :is(.form-control, textarea)::placeholder {
  color: transparent;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .form-check-input {
  background-color: #ffffff;
  border-color: #6b7b7e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .form-check-input:checked {
  background-color: #0e2a2e;
  border-color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .form-floating > label {
  color: #3d5256;
}

/* Visible keyboard focus on white */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #0e2a2e;
  outline-offset: 2px;
  box-shadow: none;
}

/* Grid toolbar: filter and sort pills, active filter chips, scroller arrows */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .grid-toolbar .pill {
  color: #0e2a2e;
  background-color: #ffffff;
  border: 1px solid #6b7b7e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .grid-toolbar .pill:is(:hover, :focus) {
  background-color: #eef2f2;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .grid-toolbar .pill :is(i, svg) {
  color: #0e2a2e;
  fill: currentColor;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .grid-toolbar .pill.active {
  color: #ffffff;
  background-color: #0e2a2e;
  border-color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .grid-toolbar .pill.active :is(button, span, i, svg, .pill-dismiss i) {
  color: #ffffff;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .grid-toolbar .scroll-button {
  color: #0e2a2e;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #6b7b7e;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .grid-toolbar .scroll-button.right::after {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .grid-toolbar .scroll-button.left::after {
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #ffffff);
}

/* Modal close buttons */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .btn-close {
  filter: none;
  opacity: 0.85;
}

/* Breadcrumbs */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .breadcrumb .breadcrumb-item.active {
  color: #3d5256 !important;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .breadcrumb-item + .breadcrumb-item::before,
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .breadcrumb .breadcrumb-item:nth-last-child(2)::before {
  color: #5d6f72;
}

/* Sort menu and other dropdowns */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .dropdown-menu {
  color: #0e2a2e;
  background-color: #ffffff;
  border-color: #6b7b7e;
}

/* Phone country list in forms: the theme paints it dark with !important, answered in kind */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .input-group-combobox .dropdown-menu {
  background: #ffffff !important;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .input-group-combobox .dropdown-menu .search-row {
  background: #ffffff !important;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .input-group-combobox .dropdown-menu .dropdown-item {
  color: #0e2a2e !important;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .input-group-combobox .dropdown-menu .dropdown-item:is(:hover, :focus) {
  color: #0e2a2e !important;
  background: #eef2f2 !important;
}

:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters, .modal) .input-group-combobox .dropdown-menu .dropdown-item .text-muted {
  color: #3d5256 !important;
}

/* Product detail: action icons, accordions, gallery thumbs and arrows */
:is(body#jewelry, body#jewelry-details) main#main-content :is(#callUsButton, #shippingInfoButton, #returnPolicyButton) i {
  color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details) main#main-content .accordion-button {
  color: #0e2a2e;
  background-color: rgba(0, 0, 0, 0);
}

:is(body#jewelry, body#jewelry-details) main#main-content .accordion-button:not(.collapsed) {
  color: #0e2a2e;
  background-color: #f4f6f6;
}

:is(body#jewelry, body#jewelry-details) main#main-content .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230e2a2e'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

:is(body#jewelry, body#jewelry-details) main#main-content .column-slider-thumbs .thumb-item {
  background-color: #ffffff;
}

:is(body#jewelry, body#jewelry-details) main#main-content .column-slider-thumbs .thumb-item.active {
  outline-color: #0e2a2e;
}

/* ==========================================================================
   White diamond search surface: /diamonds (body#diamonds).
   The same treatment as the product surface above, applied to the diamond
   search page's main content only. The header, the assistance banner, the
   footer and the cookie notice keep the dark Peridot surface. The shape,
   slider, advanced-filter and results-table controls are answered by name
   because the monolith hard-codes their Peridot colors.
   ========================================================================== */

/* Surface and inherited text */
body#diamonds main#main-content {
  --bs-body-bg: #ffffff;
  --bs-body-bg-color: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #0e2a2e;
  --bs-body-color-rgb: 14, 42, 46;
  --bs-primary: #155e68;
  --bs-primary-rgb: 21, 94, 104;
  --bs-primary-color: #ffffff;
  --bs-p-color: #0e2a2e;
  --bs-h1-color: #0e2a2e;
  --bs-h2-color: #0e2a2e;
  --bs-h3-color: #0e2a2e;
  --bs-h4-color: #0e2a2e;
  --bs-h5-color: #0e2a2e;
  --bs-h6-color: #0e2a2e;
  --bs-input-bg-color: #ffffff;
  --bs-input-color: #0e2a2e;
  --bs-input-border-color: #6b7b7e;
  --bs-default-bg-color: #ffffff;
  --bs-final-site-color: #ffffff;
  color: #0e2a2e;
}

body#diamonds main#main-content section {
  background-color: #ffffff;
}

/* Links and buttons */
body#diamonds main#main-content a:not(.btn, .nav-link) {
  color: #0e2a2e;
}

body#diamonds main#main-content a:not(.btn, .nav-link):is(:hover, :focus) {
  color: #155e68;
  text-decoration: underline;
}

/* DataTables pagination: the theme paints the hovered, focused and active page with var(--bs-primary), which this block
   re-points to teal, so the link rules above would leave teal or ink text on that teal. Light text instead. */
body#diamonds main#main-content .dataTables_paginate .pagination > li:is(:hover, :focus, .active) > a {
  color: #ffffff;
}

body#diamonds main#main-content button {
  color: #0e2a2e;
}

body#diamonds main#main-content #diamond-shapes button:is(:hover, .active) {
  color: #155e68;
}

body#diamonds main#main-content .btn-primary {
  color: #ffffff;
  background-color: #0e2a2e;
  border-color: #0e2a2e;
}

body#diamonds main#main-content .btn-primary:is(:hover, :focus, :active, .active) {
  color: #ffffff;
  background-color: #1d4a50;
  border-color: #1d4a50;
}

body#diamonds main#main-content .btn-default {
  color: #0e2a2e;
  background-color: #ffffff;
  border-color: #0e2a2e;
}

body#diamonds main#main-content .btn-default:is(:hover, :focus, :active, .active) {
  color: #ffffff;
  background-color: #0e2a2e;
  border-color: #0e2a2e;
}

/* Fields */
body#diamonds main#main-content .form-control {
  color: #0e2a2e;
  background-color: #ffffff;
  border-color: #6b7b7e;
}

body#diamonds main#main-content .form-control::placeholder {
  color: #5d6f72;
  opacity: 1;
}

body#diamonds main#main-content .form-label-group > label {
  color: #3d5256;
  background: #ffffff !important;
}

body#diamonds main#main-content .custom-checkbox .custom-control-indicator {
  background: #ffffff;
  border-color: #6b7b7e !important;
}

body#diamonds main#main-content .custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
  background: #0e2a2e;
  border-color: #0e2a2e !important;
}

/* Keyboard focus */
body#diamonds main#main-content :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #0e2a2e;
  outline-offset: 2px;
  box-shadow: none;
}

/* Breadcrumb and muted text (the monolith sets both with !important) */
body#diamonds main#main-content .breadcrumb .breadcrumb-item.active {
  color: #3d5256 !important;
}

body#diamonds main#main-content .breadcrumb-item + .breadcrumb-item::before,
body#diamonds main#main-content .breadcrumb .breadcrumb-item:nth-last-child(2)::before {
  color: #5d6f72;
}

body#diamonds main#main-content .text-muted {
  color: #3d5256 !important;
}

/* Results table and filter frame */
body#diamonds main#main-content table.table thead th {
  color: #0e2a2e;
  background: #f4f6f6;
}

body#diamonds main#main-content table.table :is(th, td),
body#diamonds main#main-content table.table.table-striped thead th {
  border-color: #ffffff !important;
}

body#diamonds main#main-content #diamond-filters {
  border-color: rgba(14, 42, 46, 0.15);
}

/* ==========================================================================
   Color fixes on the white surfaces: tooltips, slider tracks and handles, and
   the diamond results table's sort arrows and text.
   Scope: body#jewelry, body#jewelry-details and body#diamonds. Peridot colors
   these with cream or translucent values made for a dark page, so each is
   answered by name. Ink #0e2a2e, teal #155e68 and the greys #5d6f72 and
   #6b7b7e are the colors the surfaces above already use.
   ========================================================================== */

/* Tooltips mount on the body, outside the scoped wrappers. The theme paints the bubble cream and the platform forces
   its text to --bs-light with !important, so the text vanishes (cream on cream). Ink bubble, white text, matching tip. */
:is(body#jewelry, body#jewelry-details, body#diamonds) .tooltip .tooltip-inner {
  color: #ffffff !important;
  background-color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details, body#diamonds) .tooltip.bs-tooltip-top .tooltip-arrow::before,
:is(body#jewelry, body#jewelry-details, body#diamonds) .tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details, body#diamonds) .tooltip.bs-tooltip-bottom .tooltip-arrow::before,
:is(body#jewelry, body#jewelry-details, body#diamonds) .tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details, body#diamonds) .tooltip.bs-tooltip-start .tooltip-arrow::before,
:is(body#jewelry, body#jewelry-details, body#diamonds) .tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: #0e2a2e;
}

:is(body#jewelry, body#jewelry-details, body#diamonds) .tooltip.bs-tooltip-end .tooltip-arrow::before,
:is(body#jewelry, body#jewelry-details, body#diamonds) .tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: #0e2a2e;
}

/* Diamond search sliders: the unselected track is the body color at 5%, 1.1:1 on white. A grey ring bounds it (4.4:1),
   so its extent reads and the teal range keeps its contrast against the pale fill. */
body#diamonds main#main-content .slider.slider-horizontal .slider-track {
  box-shadow: inset 0 0 0 1px #6b7b7e;
}

/* Grid price slider: the handle is an ink dot on an ink bar, so it reads as part of the bar.
   A white dot with an ink ring, the white-dot handle the diamond search sliders use. */
:is(body#jewelry, body#jewelry-details) :is(main#main-content, #offcanvasGridFilters) .irs-handle::before {
  box-sizing: border-box;
  background-color: #ffffff;
  border: 2px solid #0e2a2e;
}

/* Diamond results sort arrows: gray-500 at 0.3 opacity, 1.2:1 on the header. Grey when unsorted, ink on the sorted column. */
body#diamonds main#main-content table.table thead :is(.sorting, .sorting_asc, .sorting_desc)::after {
  color: #5d6f72;
  opacity: 1;
}

body#diamonds main#main-content table.table thead :is(.sorting_asc, .sorting_desc)::after {
  color: #0e2a2e;
  -webkit-text-stroke-color: #0e2a2e;
}

/* Diamond results table text: the monolith sets the table, striped-row and hover text to the cream made for a dark page */
body#diamonds main#main-content table.table {
  --bs-table-color: #0e2a2e;
  --bs-table-striped-color: #0e2a2e;
  --bs-table-hover-color: #0e2a2e;
  --bs-table-active-color: #0e2a2e;
  color: #0e2a2e;
}

/* Scroller arrows */
section.scrollable-section .scroll-arrow {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

section.scrollable-section .scroll-arrow i {
    color: var(--bs-dark) !important;
}

section.scrollable-section .scroll-arrow:hover i {
    color: var(--bs-dark) !important;
}

section.scrollable-section .section-scrollbar .section-scrollbar-thumb {
    background: var(--bs-primary) !important;
    opacity: 0.75
}

section.scrollable-section .section-scrollbar .section-scrollbar-thumb:hover,
section.scrollable-section .section-scrollbar .section-scrollbar-thumb:focus {
    opacity: 1
}

/* Nav */
@media(min-width:768px){
    nav.navbar .navbar-nav .nav-item .nav-link {
        line-height: 1;
    }
}
/* ==========================================================================
   White diamond details surface: /diamonds-details/<id> (body#diamonds-details)
   and its ring-builder twin /ringsettings-diamonds-details (body#ringsettings-diamonds-details).
   The same treatment as the product surface above, applied to the details page's main
   content (its modals sit inside it) and to the inquiry form's modal, which the platform
   appends to the body (#widgetFormModal). The header, the footer, the cookie notice and
   the cookie-preferences modal keep the dark Peridot surface. The monolith hard-codes the
   Peridot colors, so each surface is answered by name; every rule below matches an
   element on these pages or in their inquiry modal.
   ========================================================================== */

/* Surface and inherited text */
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) {
  --bs-body-bg: #ffffff;
  --bs-body-bg-color: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #0e2a2e;
  --bs-body-color-rgb: 14, 42, 46;
  --bs-primary: #155e68;
  --bs-primary-rgb: 21, 94, 104;
  --bs-primary-color: #ffffff;
  --bs-p-color: #0e2a2e;
  --bs-p-lead-color: #0e2a2e;
  --bs-h1-color: #0e2a2e;
  --bs-h2-color: #0e2a2e;
  --bs-h3-color: #0e2a2e;
  --bs-h4-color: #0e2a2e;
  --bs-h5-color: #0e2a2e;
  --bs-h6-color: #0e2a2e;
  --bs-input-bg-color: #ffffff;
  --bs-input-color: #0e2a2e;
  --bs-input-border-color: #6b7b7e;
  --bs-default-bg-color: #ffffff;
  --bs-final-site-color: #ffffff;
  color: #0e2a2e;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, main#main-content .modal-content, #widgetFormModal .modal-content),
:is(body#diamonds-details, body#ringsettings-diamonds-details) main#main-content section {
  background-color: #ffffff;
}

/* Links */
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) a:not(.btn) {
  color: #0e2a2e;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) a:not(.btn):is(:hover, :focus) {
  color: #155e68;
  text-decoration: underline;
}

/* Buttons: dark primary on white, never the cream accent */
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) button:not(.btn, .mz-button, .list-group-item) {
  color: #0e2a2e;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .btn-primary {
  color: #ffffff;
  background-color: #0e2a2e;
  border-color: #0e2a2e;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .btn-primary:is(:hover, :focus, :active, .active) {
  color: #ffffff;
  background-color: #1d4a50;
  border-color: #1d4a50;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .btn-primary:disabled {
  color: #ffffff;
  background-color: #5d6f72;
  border-color: #5d6f72;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .btn-default:not(svg) {
  color: #0e2a2e;
  background-color: #ffffff;
  border-color: #0e2a2e;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .btn-default:not(svg):is(:hover, :focus, :active, .active) {
  color: #ffffff;
  background-color: #0e2a2e;
  border-color: #0e2a2e;
}

/* The CAPTCHA listen icon is an svg.btn-default whose stroke is the theme's cream (1:1 on white): ink at rest, and never filled on hover */
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) svg.btn-default {
  color: #0e2a2e;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) svg.btn-default:is(:hover, :focus, :active, .active) {
  color: #0e2a2e;
  background-color: rgba(0, 0, 0, 0);
}

/* Form controls */
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) :is(.form-control, .form-select, input[type="text"], input[type="search"], input[type="email"], input[type="tel"], textarea, select) {
  color: #0e2a2e;
  background-color: #ffffff;
  border-color: #6b7b7e;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) :is(.form-control, .form-select, textarea)::placeholder {
  color: #5d6f72;
  opacity: 1;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .form-floating > :is(.form-control, textarea)::placeholder {
  color: transparent;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .form-floating > label {
  color: #3d5256;
}

/* Visible keyboard focus on white */
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #0e2a2e;
  outline-offset: 2px;
  box-shadow: none;
}

/* Modal close buttons */
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .btn-close {
  filter: none;
  opacity: 0.85;
}

/* Breadcrumbs */
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .breadcrumb .breadcrumb-item.active {
  color: #3d5256 !important;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .breadcrumb-item + .breadcrumb-item::before,
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .breadcrumb .breadcrumb-item:nth-last-child(2)::before {
  color: #5d6f72;
}

/* Dropdowns and the phone country list in the inquiry form */
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .dropdown-menu {
  color: #0e2a2e;
  background-color: #ffffff;
  border-color: #6b7b7e;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .input-group-combobox .dropdown-menu,
:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .input-group-combobox .dropdown-menu .search-row {
  background: #ffffff !important;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .input-group-combobox .dropdown-menu .dropdown-item {
  color: #0e2a2e !important;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .input-group-combobox .dropdown-menu .dropdown-item:is(:hover, :focus) {
  color: #0e2a2e !important;
  background: #eef2f2 !important;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) :is(main#main-content, #widgetFormModal) .input-group-combobox .dropdown-menu .dropdown-item .text-muted {
  color: #3d5256 !important;
}

/* Detail page: action icons, accordions */
:is(body#diamonds-details, body#ringsettings-diamonds-details) main#main-content :is(#callUsButton, #shippingInfoButton, #returnPolicyButton) i {
  color: #0e2a2e;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) main#main-content .accordion-button {
  color: #0e2a2e;
  background-color: rgba(0, 0, 0, 0);
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) main#main-content .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230e2a2e'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Diamond clarity and cut lists: grades this stone does not have are disabled list items drawn at 50% opacity,
   which is 3.1:1 (labels) and 2.4:1 (grade codes) on white. A solid muted ink keeps them legible and still reads as inactive. */
:is(body#diamonds-details, body#ringsettings-diamonds-details) main#main-content .list-group-item.disabled {
  opacity: 1;
  color: #5d6f72;
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) main#main-content .list-group-item.disabled :is(.title, .grades, em) {
  color: #5d6f72;
}

/* The help sentence under the certificate: section.default .text-dark paints it cream with !important (1.13:1 on white), answered in kind */
:is(body#diamonds-details, body#ringsettings-diamonds-details) main#main-content .text-dark {
  color: #0e2a2e !important;
}

/* Phone country toggle in the inquiry form: the theme draws its caret in #c0c0c0 (1.8:1 on white) and, on focus, removes the outline
   and leaves a 25% teal halo (1.5:1); a solid ink ring and an ink caret answer it (the theme's focus rule is !important) */
:is(body#diamonds-details, body#ringsettings-diamonds-details) #widgetFormModal [data-label="Country Code"] .dropdown-toggle::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230e2a2e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

:is(body#diamonds-details, body#ringsettings-diamonds-details) #widgetFormModal .input-group-combobox .dropdown > button.dropdown-toggle:focus-visible {
  outline: 2px solid #0e2a2e !important;
  outline-offset: 2px;
  box-shadow: none !important;
}