/* ===== Diamond Search Product Layout ===== */
.ctd-config-panel {
  /*padding: 15px;*/
}
.ctd-config-panel h1 {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}
.ctd-ex-tax {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

/* Section Titles */
.ctd-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
  font-family: 'Urbanist';  
  letter-spacing: 0.5px;
}
.ctd-size-25{font-size:25px;}
.ctd-color-gold{color:#C2A559;}
.ctd-background-color-gold{background-color:#C2A559 !important;}
.ctd-frontend-color-white{background-color:#C2A559 !important;}
.ctd-background-color-gold:hover{background-color:#555555 !important;}
.ctd-background-color-white:hover{background-color:#C2A559 !important;}
.ctd-section-title .ctd-metal-name {
  color: #C2A559;
}

/* ===== Metal Tabs — pill-style nav ===== */

.ctd-metal-section{
	flex-direction: column;
}
.ctd-metal-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: none;
  background: #f0ece0;
  border-radius: 8px;
  padding: 4px;
}
.ctd-metal-tab {
  flex: 1;
  padding: 10px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400; /* #4690 [A]: was 700 */
  
  letter-spacing: 0.5px;
  color: #888;
  transition: all 0.2s;
  border-radius: 6px;
  text-align: center;
  line-height: 1.2;
}
.ctd-metal-tab.active {
  background: #C2A559;
  color: #fff;
  box-shadow: 0 2px 6px rgba(176,158,102,0.4);
}
.ctd-metal-tab:hover:not(.active) {
  background: rgba(176,158,102,0.15);
  color: #555;
}

/* Metal Swatches */
.ctd-metal-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 10px 0;
  margin-bottom: 12px;
}
.ctd-metal-swatches.d-none {
  display: none !important;
}
.ctd-metal-sub-group {
  width: 100%;
  margin-bottom: 10px;
}
.ctd-metal-sub-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.ctd-metal-sub-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.ctd-metal-swatch {
  width: 75px;
  height: auto;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.2s;
  text-align: center;
  background: #fff;
  margin:5px;
}
.ctd-metal-swatch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ctd-metal-swatch.active {
  border: 2px solid #C2A559;
  box-shadow: 0 0 0 1px rgba(176,158,102,0.4);
}
.ctd-metal-swatch:hover:not(.active) {
  border-color: #999;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* ===== Diamond Colours — compact row ===== */
.ctd-diamond-colours {
  display: flex;
  gap: 0px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.ctd-diamond-colour {
  text-align: center;
  cursor: pointer;
  width: 85px;
  padding: 4px;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: all 0.2s;
}
.ctd-diamond-colour img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /*border: 2px solid transparent;*/
  padding: 1px;
  transition: all 0.2s;
  object-fit: cover;
}
.ctd-diamond-colour.active {
  background: #f0ece0;
  border-color: #C2A559;
}
.ctd-diamond-colour.active img {
  /*border-color: #C2A559;
  box-shadow: 0 0 0 2px rgba(176,158,102,0.3);*/
}
.ctd-diamond-colour:hover:not(.active) img {
  border-color: #ccc;
  transform: scale(1.05);
}
.ctd-diamond-colour span {
  display: block;
  font-size: 9px;
  font-weight: 600;
  margin-top: 2px;
  color: #555;
  line-height: 1.1;
  text-transform: uppercase;
}
.ctd-diamond-colour.ctd-diamond-other {
  border: 2px dashed #ccc;
  background: #fafafa;
}
.ctd-diamond-colour.ctd-diamond-other.active {
  border-color: #C2A559;
  background: #f0ece0;
  border-style: solid;
}
.ctd-diamond-colour.ctd-diamond-other img {
  border-radius: 6px;
}

/* Starting Price */
.ctd-starting-price {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 3px;
  padding-bottom:10px;
  color:#C2A559;
}
.ctd-ring-price {
  font-size: 12px;
  color: #888;
  margin-bottom: 0;
}

/* ===== Budget Input ===== */
.ctd-label-budget{
	margin-bottom:10px !important;
}
.ctd-budget-section {
  background: #f9f9f9;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.ctd-budget-label {
  font-size: 12px;
  font-weight: 700;
  
  display: block;
  margin-bottom: 6px;
  color: #444;
  margin-top:10px;
}
.ctd-budget-section .form-control {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  color: #333;
}
.ctd-budget-section .form-control:focus {
  border-color: #C2A559;
  box-shadow: 0 0 0 3px rgba(176,158,102,0.12);
}

/* Search Mode */
.ctd-search-prompt {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0;
}

/* ===== Diamond Type — styled radios ===== */
.ctd-diamond-type-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
  color: #555;
}
.ctd-diamond-type-radios {
  display: flex;
  border-radius: 8px;
  border: 1px solid #bbb;
  padding:15px;
}
.ctd-diamond-type-radios .form-check{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
}
.ctd-diamond-type-radios .form-check-inline {
  margin-right: 0;
}
.ctd-diamond-type-radios .form-check-input{
    width:18px;
    height:18px;
    margin:0 3px 0 0 !important;
    cursor:pointer;
    accent-color:#C2A559;
    flex-shrink:0;
}
.ctd-diamond-type-radios .form-check-label{
    display:flex;
    align-items:center;
    margin:0;
    font-size:13px;
    font-weight:400; /* #4690 [B]: was 600 */
    line-height:1;
    color:#555;
    cursor:pointer;
    transition:color .2s;
}
.ctd-diamond-type-radios .form-check-input:checked ~ .form-check-label {
  color: #C2A559;
  font-weight: 400; /* #4690 [B]: was 700 */
}

/* ===== Action Buttons ===== */
.ctd-action-buttons {
  display: flex;
  gap: 8px;
}
.ctd-action-buttons .btn {
  flex: 1;
}


/* Diamond Results */
.ctd-diamond-results-wrapper {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 2px solid #eee;
}
.ctd-results-header p {
  font-size: 14px;
  color: #555;
  font-style: italic;
}
.ctd-diamond-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  transition: all 0.3s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}
.ctd-diamond-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.ctd-diamond-label {
  font-size: 18px;
  font-weight: 700;
  color: #C2A559;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.ctd-diamond-price {
  margin-bottom: 12px;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 6px;
}
.ctd-price-label {
  font-size: 10px;
  color: #888;
  display: block;
  text-transform: uppercase;
}
.ctd-price-value {
  font-size: 22px;
  font-weight: 700;
  color: #C2A559;
}
.ctd-price-vat {
  font-size: 10px;
  color: #888;
}
.ctd-diamond-details {
  text-align: center;
  padding: 10px;
  background: #fafafa;
  border-radius: 6px;
  margin-bottom: 10px;
}
.ctd-diamond-details p {
  font-size: 15px;
  margin-top: 0;
  margin-bottom: 3px;
  color: #444;
}
.ctd-no-results {
  padding: 40px 20px;
}
.ctd-no-results p {
  font-size: 15px;
  color: #666;
}

/* ===== Diamond Type Toggle (Either mode) ===== */
.ctd-filter-by-type {
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    color: #000000;
}
.ctd-choose-diamond {
    margin: 0 auto;
    text-align: center;
    font-size: 25px;
    color: #C2A559;
}
.ctd-diamond-type-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 15px 0 25px;
}
.ctd-type-toggle {
  display: inline-block;
  cursor: pointer;
}
.ctd-type-toggle img {
  width: 100%;
  border: 3px solid #eee;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  display: block;
  max-width:150px;
}
.ctd-type-toggle.active img {
  border-color: #C2A559;
  box-shadow: 0 0 10px rgba(176, 158, 102, 0.5);
}
.ctd-type-toggle:hover:not(.active) img {
  border-color: #ccc;
}
.ctd-type-results-section {
  display: none;
}
.ctd-type-results-section.active {
  display: block;
}
.ctd-type-heading {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid #C2A559;
}
.ctd-type-count {
  font-size: 13px;
  color: #666;
}
.ctd-no-type-results {
  padding: 25px 20px;
  color: #888;
}

/* Selected Diamond */
.ctd-selected-diamond {
  background: #f8f9fa;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}
.ctd-selected-diamond h4 {
  font-size: 16px;
  font-weight: 700;
  color: #C2A559;
}
.ctd-selected-details p {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 13px;
  color: #444;
}
.ctd-total-price {
  font-size: 16px;
  color: #C2A559;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #ddd;
}

/* Selected Diamond Image */
.ctd-selected-image img {
  border: 3px solid #ddd;
  border-radius: 10px;
}

/* Selected Diamond Video */
.ctd-selected-video{
	margin-top:10px;
}
.ctd-selected-video a {
  font-size: 12px;
  font-weight: 600;
  color: #C2A559;
  border-color: #C2A559;
}
.ctd-selected-video a:hover {
  background: #C2A559;
  color: #fff;
}

/* Selected Diamond Certificate */
.ctd-selected-certificate img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px;
}

/* Diamond Card Video */
.ctd-diamond-video {
  min-height: 30px;
  margin-top:10px;
}
.ctd-diamond-video a {
  font-size: 11px;
}

.ctd-card-video {
  min-height: 30px;
  margin-top:10px;
}
.ctd-card-video a {
  font-size: 11px;
}



/* Post Selection Options */
.ctd-post-selection {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 2px solid #eee;
}
.ctd-post-options {
  margin-bottom: 15px;
}
.ctd-post-options label {
  font-weight: 600;
  font-size: 13px;
  color: #333;
}
.ctd-post-options .form-control {
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px;
}
.ctd-post-options .form-control:focus {
  border-color: #C2A559;
  box-shadow: 0 0 0 3px rgba(176,158,102,0.12);
}
.ctd-row-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.ctd-row-btn {
  flex: 1;
  min-width: 0;
}
@media (max-width: 575.98px) {
  .ctd-row-buttons {
    flex-direction: column;
  }
}

/* Diamond Photo Popup */
.ctd-diamond-image{
	margin:0 auto;
	text-align:center;
}
.ctd-diamond-image.has-photo {
  position: relative;
  cursor: pointer;
}
.ctd-diamond-image.has-photo img {
  transition: opacity 0.2s;
  max-height:400px;
}
.ctd-diamond-image.has-photo:hover img {
  opacity: 0.85;
}
.ctd-photo-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  pointer-events: none;
}
.ctd-photo-popup-img {
  max-height: 80vh;
  object-fit: contain;
}

/* Diamond Video Popup */
.ctd-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.ctd-video-wrapper iframe {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: none;
  display: block;
}

/* Fast Search Loading Overlay */
.ctd-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ctd-search-overlay-inner {
  text-align: center;
  color: #555;
}
.ctd-search-overlay-inner .fa-spinner {
  color: #C2A559;
}
.ctd-search-overlay-inner p {
  font-size: 16px;
  font-weight: 600;
  margin-top: 15px;
}

/* Results Actions (Change Price button) */
.ctd-results-actions {
  border-top: 1px solid #eee;
  padding-top: 20px;
}
.ctd-results-actions .btn {
  font-weight: 600;
  padding: 10px 24px;
  border-color: #C2A559;
  color: #C2A559;
}
.ctd-results-actions .btn:hover {
  background: #C2A559;
  color: #fff;
}
.ctd-results-actions .btn i {
  margin-right: 6px;
}

/* Mini-cart diamond summary */
.ctd-mini-cart-summary {
  display: block;
  color: #C2A559;
  font-weight: 600;
}

/* Responsive: Video + Photo */
@media (max-width: 576px) {
  /* Phones: square like the 360 viewer, as wide as the screen allows (3:4 at 300px cropped the stone) */
  .ctd-video-wrapper {
    max-width: min(92vw, 500px);
  }
  .ctd-video-wrapper iframe {
    aspect-ratio: 1 / 1;
  }
  .ctd-photo-popup-img {
    max-height: 60vh;
  }
}
@media (min-width: 577px) and (max-width: 768px) {
  .ctd-video-wrapper {
    max-width: 400px;
  }
}

/* ===== Detailed Search Form ===== */
.ctd-detailed-search-form {
  background: #f9f9f9;
  padding: 18px;
  border-radius: 8px;
  border: 1px solid #eee;
  margin-top: 15px;
}
.ctd-ds-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}
.ctd-ds-section:last-of-type {
  border-bottom: none;
}
.ctd-text-lowercase {
  text-transform: lowercase !important;
}
.ctd-ds-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  color: #333;
  display: block;
  margin-bottom: 5px;
}
.ctd-ds-label-bold {
  font-size: 13px;
  color: #222;
}
.ctd-ds-help {
  font-size: 10px;
  color: #888;
  font-style: italic;
  margin-top: 2px;
  display: block;
}
.ctd-ds-price-range {
  display: flex;
  gap: 12px;
}
.ctd-ds-price-field {
  flex: 1;
}
.ctd-ds-price-field .form-control {
  border: 1px solid #ddd;
  border-radius: 4px;
}
.ctd-ds-price-field .form-control:focus {
  border-color: #C2A559;
  box-shadow: 0 0 0 2px rgba(176,158,102,0.12);
}
.ctd-ds-row {
  margin-bottom: 12px;
}
.ctd-ds-row .form-control,
.ctd-ds-row .form-select {
  border: 1px solid #ddd;
  border-radius: 4px;
}
.ctd-ds-row .form-control:focus,
.ctd-ds-row .form-select:focus {
  border-color: #C2A559;
  box-shadow: 0 0 0 2px rgba(176,158,102,0.12);
}
.ctd-ds-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ctd-ds-check {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  transition: all 0.2s;
}
.ctd-ds-check:hover {
  border-color: #C2A559;
}
.ctd-ds-check input:checked + span {
  color: #C2A559;
  font-weight: 700;
}
.ctd-ds-check input {
  margin: 0;
}
.ctd-ds-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ctd-ds-range span {
  font-size: 12px;
  color: #666;
}
.ctd-ds-range .form-select {
  flex: 1;
}
.ctd-ds-advanced-toggle {
  margin-bottom: 12px;
  padding-top: 5px;
  border-top: 1px solid #eee;
}
.ctd-ds-advanced {
  padding: 14px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  margin-bottom: 12px;
}
.ctd-ds-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.ctd-ds-sort {
  flex: 0 0 auto;
}
.ctd-ds-sort .form-select {
  min-width: 160px;
}
.ctd-ds-buttons {
  display: flex;
  gap: 8px;
}
.ctd-ds-buttons .btn {
  padding: 10px 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
}

/* Detailed Search Results Grid */
.ctd-detailed-results {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 2px solid #eee;
}
.ctd-detailed-results .ctd-results-header p {
  font-size: 13px;
  color: #555;
  font-style: italic;
  margin-bottom: 12px;
}
.ctd-card-body {
  padding: 12px;
  text-align: center;
}
.ctd-card-price {
  background: #f9f9f9;
  padding: 6px;
  border-radius: 6px;
  margin-bottom: 8px;
  text-align: center;
}
.ctd-card-price .ctd-price-label {
  font-size: 9px;
  color: #888;
  display: block;
  text-transform: uppercase;
}
.ctd-card-price .ctd-price-value {
  font-size: 18px;
  font-weight: 700;
  color: #C2A559;
}
.ctd-card-specs {
  font-size: 15px;
  color: #444;
  text-align: center;
}
.ctd-card-specs p {
  margin-bottom: 2px;
  margin-top:10px;
}
.ctd-card-cert .ctd-cert-img {
  max-height: 100px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 2px;
}
.ctd-card-footer {
  padding: 10px 12px;
  /*margin:0 auto;*/
}
.ctd-card-footer .btn {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}
.ctd-card-footer .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(176,158,102,0.4);
}
.ctd-card-video {
  min-height: 30px;
}
.ctd-card-video .btn {
  font-size: 10px;
}

/* Detailed Search Pagination */
.ctd-detailed-pagination {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
.ctd-detailed-pagination .pagination {
  margin-bottom: 0;
}
.ctd-detailed-pagination .page-link {
  color: #C2A559;
  border-color: #ddd;
  font-size: 12px;
  padding: 6px 12px;
}
.ctd-detailed-pagination .page-item.active .page-link {
  background-color: #C2A559;
  border-color: #C2A559;
  color: #fff;
}
.ctd-detailed-pagination .page-link:hover {
  background-color: #f0ece0;
  color: #C2A559;
}

/* Responsive: Detailed Search */
@media (max-width: 576px) {
  .ctd-ds-price-range {
    flex-direction: column;
    gap: 8px;
  }
  .ctd-ds-checkboxes {
    gap: 3px;
  }
  .ctd-ds-check {
    padding: 3px 6px;
    font-size: 10px;
  }
  .ctd-ds-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ctd-ds-sort .form-select {
    width: 100%;
  }
  .ctd-ds-buttons {
    flex-direction: column;
  }
  .ctd-ds-buttons .btn {
    width: 100%;
  }
  .ctd-metal-tabs {
    flex-direction: column;
  }
  .ctd-diamond-colour {
    width: 80px;
  }
  .ctd-diamond-colour img {
    width: 55px;
    height: 55px;
  }
  .ctd-diamond-colour span {
    font-size: 9px;
  }
}

/* ===== Fast Search Card Grid ===== */
.ctd-fast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ctd-fast-card-wrap {
  display: flex;
}
.ctd-fast-card-wrap .card {
  width: 100%;
}

/* Select Button */
.btn-select-diamond {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  border-radius: 6px;
  transition: all 0.2s;
}
.btn-select-diamond:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(176,158,102,0.4);
}
.btn-block {
  display: block;
  width: 100%;
}

/* Watch Video Button */
.btn-watch-video {
  font-size: 12px;
  font-weight: 600;
  border-color: #C2A559;
  color: #C2A559;
}
.btn-watch-video:hover {
  background: #C2A559;
  color: #fff;
}

/* ===== Video Popup — Responsive ===== */
.ctd-video-modal-content {
  border: none;
  border-radius: 12px;
  overflow: hidden;
}
.ctd-video-modal-content .modal-header {
  border-bottom: 1px solid #eee;
  padding: 12px 16px;
}
.ctd-video-modal-content .modal-header .modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.ctd-video-modal-content .modal-body {
  padding: 0;
}
.ctd-video-modal-content .ctd-video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.ctd-video-modal-content .ctd-video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.custom-product-details .ctd-metal-swatches {
    padding: 0px;
    margin: 0px;
}
 
.custom-product-details .form-group:not(:first-child){
	margin-top: 5px !important;
}

@media (max-width: 768px) {
  .ctd-fast-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
@media (min-width: 769px) and (max-width: 991px) {
  .ctd-fast-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Full-Width Search Mode ===== */
.ctd-fullwidth-results {
  display: none;
}

#content.ctd-search-active .ctd-fullwidth-results {
  display: block;
  width: 100%;
  padding: 0 0 20px;
}

#content.ctd-search-active .product-info,
#content.ctd-search-active #product-tabs-oc,
#content.ctd-search-active .tags,
#content.ctd-search-active > .description {
  display: none !important;
}

@media (max-width: 768px) {
  #content.ctd-search-active .ctd-fullwidth-results {
    padding: 0 0 12px;
  }
}

/* ===== UI Refinements ===== */

/* Budget placeholder */
#ctd-budget::placeholder { color: #ccc; opacity: 1; }
#ctd-budget::-webkit-input-placeholder { color: #ccc; }
#ctd-budget::-moz-placeholder { color: #ccc; opacity: 1; }
#ctd-budget:-ms-input-placeholder { color: #ccc; }

/* Whatsapp link */
.ctd-whatsapp-link {
  font-size: 15px;
  color: #000000;
  text-decoration: none;
  width:100%;
  display:inline-block;
}
.ctd-whatsapp-link i.fa-whatsapp{
  font-size: 20px;
  color:#25D366;
}
.ctd-whatsapp-link:hover {
  color: #555555;
  text-decoration: none;
}

/* Tweak Me link */
.ctd-tweak-link {
  font-size: 16px; /* #4686/#4689: same size and weight as Add to Cart (was 13px/600) */
  font-weight: 400;
  color: #C2A559;
  text-decoration: underline;
  width:100%;
  display:inline-block;
}
.ctd-tweak-link:hover {
  color: #8a7a4f;
  text-decoration: none;
}

/* Info icons */
.ctd-btn-info-icon {
  margin-left: 4px;
  font-size: 12px;
  opacity: 0.7;
  vertical-align: middle;
}
.ctd-btn-info-icon:hover {
  opacity: 1;
}
.ctd-info-icon {
  color: #C2A559;
  cursor: help;
  margin-left: 3px;
  font-size: 13px;
}

/* Search guidance */
.ctd-search-guidance {
  margin-top: 8px;
}
.ctd-guidance-text {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  margin-bottom: 4px;
}
.ctd-guidance-highlight {
  color: #C2A559;
}
.ctd-guidance-contact {
  font-size: 12px;
  color: #666;
  margin-bottom: 0;
  margin-top:10px;
}
.ctd-guidance-phone {
  color: #C2A559;
  font-weight: 600;
  text-decoration: none;
}
.ctd-guidance-phone:hover {
  text-decoration: underline;
}

/* =====================================================
   CTD Mobile Layout Improvements
   ===================================================== */

@media (max-width:768px){

    /* Prevent horizontal scrolling */
    html,
    body{
        overflow-x:hidden;
    }

    .ctd-config-panel{
        width:100%;
        max-width:100%;
        overflow:hidden;
		padding:0px;
    }

    /* ---------- A ---------- */

    .ctd-metal-tabs,
    .ctd-metal-swatches,
    .ctd-diamond-colours,
    .ctd-budget-section{
        width:100%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        box-sizing:border-box;
    }

    /* ---------- B ---------- */

    .ctd-metal-swatches{
        justify-content:center;
        align-items:center;
    }

    .ctd-metal-sub-row{
        justify-content:center;
    }

    /* ---------- C ---------- */

    .ctd-section-title{
        text-align:center;
		margin:0 auto;
		display:block;
    }

    /* ---------- D ---------- */

    .ctd-diamond-colours{
        justify-content:center;
        align-items:flex-start;
        gap:12px;
    }

    /* ---------- E ---------- */

    .ctd-budget-section{
        margin-left:auto;
        margin-right:auto;
    }

    /* ---------- F ---------- */

    .ctd-diamond-colour{
        width:90px;
        margin:0;
    }

    .ctd-diamond-colour img{
        width:60px;
        height:60px;
    }

    /* ---------- G ---------- */

    .ctd-diamond-colour:first-child{
        /*flex:0 0 100%;
        width:100%;
        margin-bottom:12px;*/
    }

    /* ---------- H ---------- */

    .ctd-diamond-colour:first-child img{
        width:60px;
        height:60px;
    }

    .ctd-diamond-colour:first-child span{
        margin-top:6px;
    }
	.ctd-size-25 {
		font-size: 20px;
	}

}

/* ===== Metal Options — visually hidden radio group ===== */
.ctd-metal-radio-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ===================================================================
   CTD site-wide INCLUDES_ widget migration - CSS restoration
   2026-09-28
   ---------------------------------------------------------------
   Root cause: the legacy stylesheet catalog/view/stylesheet/
   common_header_style.css (source of these rules on the old
   thatdiamond/oc4011 codebase) was never migrated into this Journal3
   theme, so every migrated widget referencing these class names had
   no layout CSS at all. Audited ALL 112 migrated widgets' HTML: only
   4 custom (non-Bootstrap) classes actually carry layout rules in the
   legacy stylesheet - .image-block, .image-block.metal-colour,
   .scrolling_container .image-block, and
   .scrolling_container .image-block span.shape. The remaining custom
   classes used across widgets (diamond-text-bottom, seealldiamond-*,
   seeallmetal-*, include-wedding-rings, metal-top-cc) have no CSS in
   the legacy stylesheet either - confirmed intentional (plain
   Bootstrap block/text-center styling), not a migration gap.
   Rules below are ported verbatim from common_header_style.css.
   These class names are unique to the migrated widget markup and are
   not used anywhere else in the Journal3 theme or Bootstrap, so this
   block cannot affect any other component. Backup of the pre-change
   file: deployment/database/09-backup-custom.css-before-widget-css-fix-2026-09-28.css
   =================================================================== */

/* CTD addendum 2026-09-28: legacy site used a Bootstrap 3 float-based grid where
   generic ".row" children floated automatically. This Journal3 theme's ".row" is
   NOT a generic flex/float grid (confirmed: only ".site-wrapper > .container > .row"
   and one sitemap route get "display:flex" - a plain ".row" like the widget markup's
   falls back to normal block flow, which stacked these items vertically). float:left
   + a clearfix on the row restores the legacy horizontal layout without touching
   Journal3's own ".row" rule (scoped to these widget classes only, so no other
   component is affected). */
.scrolling_container .row {
	overflow: hidden; /* clearfix: contain the floated .image-block children */
}

/* CTD 2026-09-29 filter-metal-css-fix
   Problem: ".image-block.metal-colour" (0,2,0) and ".scrolling_container .image-block"
   (0,2,0) both set width !important; the later 10% rule won at 768-1400px and shrank the
   four Filter-by-Metal icons to 10% each. Fix: metal icons get a (0,3,0) selector with a
   fixed 25% width at every viewport, and the 10% diamond-shape rule now excludes them via
   :not(.metal-colour), so the two rule sets can never match the same element. */
.scrolling_container .image-block.metal-colour {
	width: 25% !important;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0 !important;
	float: left;
	box-sizing: border-box;
}

.scrolling_container .image-block span.shape {
	text-align: center;
	margin: 0 auto;
	display: block;
}

/* Bootstrap ".container" is a fixed 750px/970px at 768-1199px, wider than this widget's
   parent (the category-text column), so the row overflowed by up to ~60px and the last
   icon was clipped at 768px. Scoped to the widget row only; above 1199px Bootstrap's
   1170px width + the inline max-width:1200px are unchanged. */
@media (min-width: 768px) and (max-width: 1199px) {
	.scrolling_container .row.container {
		width: 100%;
		max-width: 100%;
	}
}

/* >=1200px: keep Bootstrap's 1170px when it fits, shrink to the parent when it does not
   (parent is narrower than 1170px between 1200px and ~1264px viewports). */
@media (min-width: 1200px) {
	.scrolling_container .row.container {
		width: min(1170px, 100%);
	}
}
/* Diamond-shape widgets (10 items): 10% per item on tablet/desktop, and now also above
   1400px (previously natural 192px width -> 6 per row, left-aligned). Below 768px: 20% per
   item = 5 per row, 2 rows (previously natural 192px width -> 1 per line at 375px). */
.scrolling_container .image-block:not(.metal-colour) {
	float: left;
	width: 10% !important;
	margin: 0 !important;
	padding: 5px;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.scrolling_container .image-block:not(.metal-colour) {
		width: 20% !important;
		padding: 5px 2px;
		font-size: 11px;
		line-height: 1.2;
		word-break: break-word;
	}
}
/* CTD 2026-10-02 filter-metal widget sizing
   Problem: Journal > Custom CSS (oc_journal3_setting.customCSS, printed in a <style> after
   this file) sets ".scrolling_container .image-block.metal-colour { width:auto !important }"
   and "> a img.img-fluid { width:100% !important }" for >=768px, so each metal item takes the
   image file's own pixel size. 49 widgets use 150px files (/image/catalog/metal-icons/) and
   look right; 30 widgets use 640x480 files (/image/metal-icons/) and rendered one 652px item
   per row (~2,078px tall widget). Fix: pin the icon to the intended 150px at >=768px whatever
   the file size. The extra .image-container class gives (0,5,2) over Journal's (0,4,2), which
   is needed because this file loads first. Journal's 22% rule for (max-width: 767px) is
   untouched; "not all and (max-width: 767px)" is its exact complement, so no viewport width
   (including fractional ones between 767px and 768px) falls between the two rules. */
@media not all and (max-width: 767px) {
	.scrolling_container .image-container .image-block.metal-colour > a img.img-fluid {
		width: 150px !important;
	}
}
/* === END CTD widget CSS restoration === */

/* === Homepage: desktop main menu fit + hero slider (2026-10-02) ===================
   This file is linked before Journal's generated <style> blocks, so a rule here only
   wins on higher specificity. The #main-menu ID and the doubled
   .module-slider.module-slider-1267 class exist for that reason; no !important used. */

/* Desktop main menu (header module 1043, menu style MENU_CAPS).
   MENU_CAPS sets one fixed 15px for every desktop width and the header runs in Journal's
   "scroll" overflow mode, so the 10 items (1699px in one row) pushed the last ones out of
   view below 1720px. Font size and item gap now scale with the viewport. Labels unchanged.
   Re-tuned 6 Nov 2026 for 11 items (Coloured Stones added): the 10-item sizing pushed
   Men's Rings out of view at every width from 1210 to ~1750px. Font, gap, letter-spacing
   and link padding now all scale; tested to fit 1210-2560px: 11px at 1280, 11.9px at 1366,
   12.5px at 1440, 13.4px at 1536, 14.7px at 1680, the client's 15px from 1705px up.
   Desktop header only: Journal swaps to the mobile header at 1200px and the mobile menu
   is not inside .desktop-main-menu-wrapper. */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item {
	--menu-item-gap: clamp(2px, 2.5vw - 32px, 16px);
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item > a,
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item > a > .links-text {
	font-size: clamp(11px, 0.88vw, 15px);
	letter-spacing: clamp(0px, 0.0625vw - 0.6px, 0.5px);
}

.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item > a {
	padding-inline: clamp(2px, 0.3vw - 1px, 5px);
}

/* 9 of the 10 items open a dropdown, so the caret told the customer nothing and cost
   117px of the row (about 1.3px of font size at 1366px). */
.desktop-main-menu-wrapper #main-menu > .j-menu > .main-menu-item.dropdown > a::after {
	display: none;
}

/* Hero slider: Journal slider modules carrying the module Custom Class "ctd-hero"
   (1267 "New Main Slider" for tablet + desktop, 1268 "NewMain Slider 2 Mobile" for phone).
   Text, links, alignment and type are module settings; only what Journal has no setting
   for lives here.

   Height: Journal sizes a slide from the image ratio (2000x700 = 35% of the width) with no
   upper limit - 473px at 1366x768, on top of the 180px header. Cap it at 65% of the space
   under the header so about a third of that space always shows the content below.
   --slide-max-height and --slide-auto-reduction (header height) are Journal's own
   variables; the module's min-height still wins on short or narrow screens. */
.module-slider.ctd-hero {
	--slide-max-height: calc((100vh - var(--slide-auto-reduction, 0px)) * 0.65);
}

/* Readability scrim behind the left-aligned copy. Journal's own overlay element; Journal
   switches it off per slide with ".module-slider-N .module-item-N .slide-content::before",
   hence the extra .swiper-slide in the selector. */
.module-slider.ctd-hero .swiper-slide .slide-content::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 1;
	mix-blend-mode: normal;
	background: linear-gradient(90deg, rgba(18, 14, 10, 0.78) 0%, rgba(18, 14, 10, 0.58) 34%, rgba(18, 14, 10, 0) 66%);
}

@media (min-width: 901px) {
	/* Keep the copy in the left part of the slide, clear of the product in the photo. */
	.module-slider.ctd-hero .module-subitem.slide-text {
		--layer-max-width: min(500px, 37vw);
	}

	/* Slide Custom Class "ctd-hero-end": for photos whose subject is on the left.
	   Same block moved to the right, scrim mirrored. */
	.module-slider.ctd-hero .ctd-hero-end .slide-layers {
		padding-inline-start: 60%;
	}

	.module-slider.ctd-hero .swiper-slide.ctd-hero-end .slide-content::before {
		background: linear-gradient(270deg, rgba(18, 14, 10, 0.78) 0%, rgba(18, 14, 10, 0.58) 34%, rgba(18, 14, 10, 0) 66%);
	}
}

/* Tablet portrait and phone: the photo is cropped to its centre, so the copy moves to the
   bottom of the slide and the scrim rises from there, leaving the subject clear. */
@media (max-width: 900px) {
	.module-slider.ctd-hero .slide-layers {
		justify-content: flex-end;
	}

	.module-slider.ctd-hero .swiper-slide .slide-content::before {
		background: linear-gradient(0deg, rgba(18, 14, 10, 0.85) 0%, rgba(18, 14, 10, 0.6) 45%, rgba(18, 14, 10, 0) 85%);
	}
}
/* === END homepage menu + hero === */

/* === CTD QRQI look-and-feel pass (2026-10-04, v1.2 same day) =====================
   Presentation only: no markup, script or data depends on these rules.
   Journal prints its generated <style> blocks and Journal > Custom CSS after this file,
   so where Journal sets the same property the selectors below carry extra classes to win
   on specificity. !important is used only against a Journal !important or an inline style
   written by a third-party script; each case is marked. */

/* #4661 Home carousel: white copy over photographs. */
.home_top_slider .slide-text-item {
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.45);
}

/* #4655 [B] Header cart button: site radius (Journal: .desktop-cart-wrapper div#cart 2px). */
html .desktop-cart-wrapper div#cart {
	border-radius: 6px;
}

/* #4671 Footer colours: moved to ctd-global.css. */

/* #4666 / #4667 Category pages: intro copy centred under the title; product units as
   white cards with the site radius. */
.route-product-category .category-description,
.route-product-category .category-seo-intro {
	text-align: center;
}
.route-product-category .main-products.product-grid .product-thumb {
	background-color: #FFFFFF;
	border-radius: 6px;
	overflow: hidden;
}
.route-product-category .main-products.product-grid .product-thumb .caption {
	padding-bottom: 12px;
}

/* #4666 / #4667 [C] "Filter by metal" units: white background and the site radius, the same
   for all four metals. Journal > Custom CSS already gives the link a 1px border in the theme
   border colour but no radius (the shape units get 6px there), and nothing resets the theme's
   underlined-link style inside this widget - so both are set here, on the metal link only.
   The whole unit stays one link; hover and keyboard focus are shown on its border. */
.scrolling_container .image-block.metal-colour > a {
	height: 100%;
	background-color: #FFFFFF;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.scrolling_container .image-block.metal-colour > a:hover,
.scrolling_container .image-block.metal-colour > a:focus-visible {
	border-color: #C2A559;
	text-decoration: none;
}
/* Phones: the units are about 52px wide; a smaller label keeps "Platinum" inside its unit. */
@media (max-width: 767px) {
	.scrolling_container .image-block.metal-colour > a > span {
		padding: 0 2px 4px;
		font-size: 12px;
		line-height: 1.3;
	}
}

/* #4668 [D] Optional product banner (Bestseller): gold, white text. Icon removed in #4695
   (ctd-global.css). */
.product-thumb .product-labels .product-label.product-label-31 > strong {
	background-color: #C2A559;
	border-color: #C2A559;
	color: #FFFFFF;
	border-radius: 6px;
}

/* #4668 [E] / #4688 Product cards (category grid, related products): Outfit 400.
   Clive 5 Nov 2026: name 20% smaller, 18px -> 14.4px (line height kept at 1.7: 30.6px -> 24.48px).
   !important: Journal sets this font-size with !important. */
.main-products-style.product-grid .product-thumb .caption .name a,
.module-products .product-grid .product-thumb .caption .name a {
	font-family: 'Outfit', sans-serif;
	font-size: 14.4px !important;
	font-weight: 400;
	line-height: 1.7;
}
/* Price row at 18px no longer fits on one line in a four-column card, so it becomes two
   tidy rows: "Market Price [old]" over "Our Price [new]". */
.product-thumb .caption .price .search-price {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: center;
	column-gap: 8px;
	row-gap: 2px;
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 30.6px;
}
.product-thumb .caption .price .search-price > * {
	margin: 0;
	width: auto;
}
/* Gold price button: white text + site radius (the gold background is already in place). */
.search-price .side-product-price-old {
	background-color: #C2A559;
	color: #FFFFFF;
	border-radius: 6px;
}
/* #4696 Product card price block: "Market Price" (struck through) / "Our Price" larger with
   the gold price button / "Today's saving". Labels left, prices centred. */
.product-thumb .caption .price .search-price {
	column-gap: 24px;
}
.product-thumb .caption .price .search-price > .ctd-search-market-price,
.product-thumb .caption .price .search-price > .ctd-our-price,
.product-thumb .caption .price .search-price > .ctd-saving-label {
	justify-self: start;
	text-align: left;
}
.product-thumb .caption .price .search-price > .side-product-price-old,
.product-thumb .caption .price .search-price > .price-new,
.product-thumb .caption .price .search-price > .ctd-saving {
	justify-self: center;
	text-align: center;
}
/* #4734 Pin each item to its row so a theme "order" on .price-new cannot push the gold
   price to the end: "Our Price Today" | gold price, then "Today's saving" | amount. */
.product-thumb .caption .price .search-price > .ctd-search-market-price { grid-row: 1; grid-column: 1; }
.product-thumb .caption .price .search-price > .side-product-price-old { grid-row: 1; grid-column: 2; }
.product-thumb .caption .price .search-price > .ctd-our-price { grid-row: 2; grid-column: 1; }
.product-thumb .caption .price .search-price > .price-new { grid-row: 2; grid-column: 2; }
.product-thumb .caption .price .search-price > .ctd-saving-label { grid-row: 3; grid-column: 1; }
.product-thumb .caption .price .search-price > .ctd-saving { grid-row: 3; grid-column: 2; }
.product-thumb .caption .price .search-price > .side-product-price-old {
	background: none;
	color: inherit;
	text-decoration: line-through;
	padding: 0;
}
.product-thumb .caption .price .search-price > .ctd-our-price,
.product-thumb .caption .price .search-price > .price-new {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.6;
}
.product-thumb .caption .price .search-price > .price-new {
	background-color: var(--ctd-gold, #C2A559);
	color: var(--ctd-white, #FFFFFF);
	border-radius: var(--ctd-radius, 6px) !important;
	padding: 0 10px;
	text-decoration: none;
}
/* #4735 [A]/[B] Equal space above and below the gold price: every row gets the height of the
   tallest one (the price button or the "Market Price" info icon), with content centred, so
   the gap Market Price → gold price matches gold price → Today's saving.
   [C] Radius above is !important so Journal's skin styles cannot square the button off. */
.product-thumb .caption .price .search-price,
.module-side_products .side-product .caption .price .search-price {
	grid-auto-rows: 1fr;
}
@media (max-width: 767px) {
	/* Clive 5 Nov 2026: 20% smaller, 15px -> 12px */
	.main-products-style.product-grid .product-thumb .caption .name a,
	.module-products .product-grid .product-thumb .caption .name a {
		font-size: 12px !important;
		line-height: 1.5;
	}
	.product-thumb .caption .price .search-price {
		font-size: 13px;
		line-height: 1.5;
		column-gap: 5px;
	}
	.product-thumb .caption .price .search-price > .ctd-our-price,
	.product-thumb .caption .price .search-price > .price-new {
		font-size: 15px;
	}
	.product-thumb .caption .price .search-price > .price-new {
		padding: 0 6px;
	}
}

/* #4669 [F] / #4687 / #4691 "Bestsellers in this category" / "From Same Category" strip:
   tabs and product names in Outfit 18/400/30.6. */
.module.module-side_products .side-products-tabs .nav-tabs > li > a:not(.item-all-link),
.module-side_products .side-product .caption .name a {
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 30.6px;
}
/* #4697 Strip price block, laid out like the product page price table: label | value rows -
   "Market Price" | struck-through price, "Our Price" | gold price button,
   "Today's saving" | amount. 14px: the text column is about 124px wide (measured on dev). */
.module-side_products .side-product .caption .price .search-price {
	display: grid;
	grid-template-columns: max-content max-content;
	justify-content: start;
	align-items: center;
	column-gap: 6px;
	row-gap: 2px;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}
.module-side_products .side-product .caption .price .search-price > * {
	margin: 0;
	width: auto;
	font: inherit;
}
.module-side_products .side-product .search-price > .side-product-price-old {
	background-color: transparent;
	color: inherit;
	padding: 0;
	text-decoration: line-through;
}
.module-side_products .side-product .search-price > .ctd-our-price {
	font-weight: 500;
}
.module-side_products .side-product .search-price > .price-new {
	justify-self: start;
	padding: 0 6px;
	background-color: var(--ctd-gold);
	color: var(--ctd-white);
	border-radius: var(--ctd-radius) !important;
}
/* Fix 2026-10-13: pricing layout bug - Eternity Rings "Most Viewed" / side-product cards.
   Journal's base theme sets `order: 1` on .price-new globally. With no explicit grid-row/
   grid-column here, CSS Grid auto-placement re-sorts all six items by that order value
   instead of source order, so "Our Price" lands next to "Today's saving" and the saving
   amount prints under "Our Price" while the actual price prints under "Today's saving".
   Pinning every item's row/column (same fix already applied to the main product-card grid,
   #4734) makes the layout immune to that order value. Values/calculations unchanged. */
.module-side_products .side-product .search-price > .ctd-search-market-price { grid-row: 1; grid-column: 1; }
.module-side_products .side-product .search-price > .side-product-price-old { grid-row: 1; grid-column: 2; }
.module-side_products .side-product .search-price > .ctd-our-price { grid-row: 2; grid-column: 1; }
.module-side_products .side-product .search-price > .price-new { grid-row: 2; grid-column: 2; }
.module-side_products .side-product .search-price > .ctd-saving-label { grid-row: 3; grid-column: 1; }
.module-side_products .side-product .search-price > .ctd-saving { grid-row: 3; grid-column: 2; }
/* Phones: the strip card has about 70px for text. Smaller name and price, and a narrower
   rank number; the price block stacks each label over its value so it stays clear of it. */
@media (max-width: 767px) {
	.module-side_products .side-product .caption .name a {
		font-size: 15px;
		line-height: 1.5;
	}
	.module-side_products .side-product .caption .price .search-price {
		grid-template-columns: max-content;
		font-size: 13px;
		row-gap: 0;
	}
	/* Single column at this width: re-pin every item into its own row, column 1, so the
	   order:1 on .price-new (above) cannot pull it out of sequence here either. */
	.module-side_products .side-product .search-price > .ctd-search-market-price { grid-row: 1; grid-column: 1; }
	.module-side_products .side-product .search-price > .side-product-price-old { grid-row: 2; grid-column: 1; }
	.module-side_products .side-product .search-price > .ctd-our-price { grid-row: 3; grid-column: 1; }
	.module-side_products .side-product .search-price > .price-new { grid-row: 4; grid-column: 1; }
	.module-side_products .side-product .search-price > .ctd-saving-label { grid-row: 5; grid-column: 1; }
	.module-side_products .side-product .search-price > .ctd-saving { grid-row: 6; grid-column: 1; }
	.module-side_products .side-product::before {
		width: 30px;
		font-size: 30px;
	}
}

/* #4664 "Filter by diamond shape" widget: title above the shapes; from tablet up the
   shapes are 25% smaller and stay on one line (10 shapes; the "Change Metal" tile is
   hidden by #4695 in ctd-global.css). */
.scrolling_container:has(> .diamond-text-bottom) {
	display: flex;
	flex-direction: column;
}
.scrolling_container > .diamond-text-bottom {
	order: -1;
}
@media not all and (max-width: 767px) {
	.scrolling_container .row.image-container:has(> .image-block:not(.metal-colour)) {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
	}
	/* !important: the rule this replaces (10% per item, above) is !important. */
	.scrolling_container .row.image-container > .image-block:not(.metal-colour) {
		width: 7.5% !important;
	}
}

/* #4672 [B] / #4676 Diamond cards: "Full Details" / "Add Jewellery" in title case, sharing
   the card width like the buttons on the diamond page. */
.filter-product .enq-btn-wrapper {
	display: flex;
	gap: 6px;
}
.filter-product .enq-btn-wrapper > .feature-btn,
.filter-product .enq-btn-wrapper > .design-btn-wrapper {
	flex: 1 1 0;
	min-width: 0;
}
/* Second selector: the diamond page prints its own rule for the "similar diamonds" cards
   with two ids (#product-product #relatedDiamonds ... uppercase 13px) - #4672 [A]. */
.filter-product .enq-btn-wrapper .feature-btn > a.btn,
#product-product #relatedDiamonds .filter-product .enq-btn-wrapper .feature-btn > a.btn {
	width: 100%;
	max-width: none;
	height: 44px;
	line-height: 44px;
	font-size: 15px;
	text-transform: none;
}
.filter-product .enq-btn-wrapper .design-btn-wrapper > a.btn {
	width: 100%;
}

/* #4660 Diamond cards: every photo fills the same square, as wide as the card and its button.
   "cover" so every block looks identical: "contain" left landscape photos shorter than the
   square, with a gap above and below. In a square box only the plain background at the sides
   of a landscape photo is trimmed; the centred diamond is not cut off. */
.filter-product .product-img img.img-fluid {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

/* #4678 [A] / #4679 [A] Page title band: template size, from tablet up (28px at 768px,
   48px from about 1410px). Phones keep Journal's own 24px: long product and category names
   would otherwise fill the first screen. Long titles wrap to two lines at 48px, so the lines
   are kept even and off the screen edge. */
html:not(.popup) .site-wrapper > h1.title.page-title {
	text-wrap: balance;
}
@media (min-width: 768px) {
	html:not(.popup) .site-wrapper > h1.title.page-title {
		font-size: clamp(28px, 3.4vw, 48px);
		line-height: 1.2;
		padding-left: 16px;
		padding-right: 16px;
	}
}
/* #4678 The ring size page prints the same heading twice: in the title band [A] and again in
   the page body [B]. With [A] now at the size of [B] the second one is not shown. Done here
   and not in ringsize.twig because the dev copy of that template is newer than the local one.
   Only applies when the title band is present. */
.route-information-ringsize .site-wrapper:has(> h1.page-title) #content > h1.text-center {
	display: none;
}

/* #4678 [C] Ring size converter form. !important: Journal sets select font-size with it. */
.ringsizer-container .ringsizer .form-group,
.ringsizer-container .ringsizer .form-group > label {
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 30.6px;
}
.ringsizer-container .ringsizer .form-select {
	font-size: 18px !important;
}

/* #4679 Free ring sizer: photo frame, delivery line, form labels and fields.
   !important on the label cell: the form script writes font-size/font-family inline. */
.ctd-ring-sizer-content img {
	border: 1px solid #444444;
	border-radius: 6px;
}
/* #4679 (update) Intro copy in the site body type, Outfit 18/400/30.6. It was set at 1.3em
   inline, so it came out larger than body text elsewhere. Bold lead-ins stay bold. */
.ctd-ring-sizer-content > .col-sm-8,
.ctd-ring-sizer-content > .col-sm-8 p {
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 30.6px;
}
.ctd-ring-sizer-content .col-sm-8 > p:last-child > strong {
	font-size: 22px;
}
#crmWebToEntityForm .zcwf_col_lab {
	font-family: 'Outfit', sans-serif !important;
	font-size: 18px !important;
	font-weight: 400;
	line-height: 30.6px;
}
#crmWebToEntityForm .zcwf_col_lab label {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
#crmWebToEntityForm .zcwf_col_fld input[type="text"],
#crmWebToEntityForm .zcwf_col_fld textarea,
#crmWebToEntityForm .zcwf_col_fld select {
	border: 1px solid #C9C4BA;
	border-radius: 6px;
}
/* #4682 [G] / [H] (and the same form on the free ring sizer page): fields fill the form
   panel so their right edges line up with it, one height, one font. The form script sets
   60% widths and 2px padding; these selectors carry the form id so they win without
   !important. The label column is a little wider so "How did you find us?*" stays on one
   line. Below 651px the form script stacks label over field; that is left alone. */
#crmWebToEntityForm .zcwf_col_fld input[type="text"],
#crmWebToEntityForm .zcwf_col_fld textarea,
#crmWebToEntityForm .zcwf_col_fld select.zcwf_col_fld_slt {
	width: 100%;
	max-width: none;
	min-height: 40px;
	padding: 6px 10px;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
}
#crmWebToEntityForm .zcwf_col_fld textarea {
	min-height: 96px;
}
/* !important: Journal sets select border-radius and font-size with !important. */
#crmWebToEntityForm .zcwf_col_fld select.zcwf_col_fld_slt {
	border-radius: 6px !important;
	font-size: 16px !important;
}
#crmWebToEntityForm .zcwf_button {
	border-radius: 6px;
}
@media (min-width: 651px) {
	#crmWebToEntityForm .zcwf_col_lab {
		width: 32%;
	}
	#crmWebToEntityForm .zcwf_col_fld {
		width: 66%;
	}
}

/* #4684 Empty cart: message and Continue centred. :has() keeps a cart with items as is. */
#shopping-cart.cart-page:not(:has(form, table)) {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
#shopping-cart.cart-page:not(:has(form, table)) > p {
	font-family: 'Outfit', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 30.6px;
}
#shopping-cart.cart-page:not(:has(form, table)) > .buttons {
	justify-content: center;
	width: 100%;
	max-width: 420px;
}
#shopping-cart.cart-page:not(:has(form, table)) > .buttons > .pull-right {
	float: none;
	width: 100%;
}

/* #4686 / #4689 "Tweak Me": info icon white on the dark button. */
.ctd-tweak-link .ctd-info-icon {
	color: #FFFFFF;
}

/* #4685 Contact page main box: details on the left (40%), Journal contact form on the right
   (60%), stacked below 1024px. The demo map and London / New York store blocks are hidden
   here so they never flash; information/contact.twig then removes them. */
.route-information-contact #content-top .grid-row-content-top-2 > .grid-cols-wrapper > .grid-cols {
	flex-wrap: wrap;
	column-gap: 0;
}
.route-information-contact #content-top .grid-col-content-top-2-1 {
	flex: 0 0 40%;
	min-width: 40%;
}
.route-information-contact #content-top .grid-col-content-top-2-2 {
	flex: 0 0 60%;
	min-width: 60%;
}
@media (max-width: 1023px) {
	.route-information-contact #content-top .grid-col-content-top-2-1,
	.route-information-contact #content-top .grid-col-content-top-2-2 {
		flex: 0 0 100%;
		min-width: 100%;
		max-width: 100%;
	}
}
@media (min-width: 1100px) {
	.route-information-contact #content-top .grid-row-content-top-2 {
		margin-top: 0;
	}
}
/* Both halves of the box share the same padding, so the details start level with the
   "Contact Us" heading. On desktop the details are spread over the full height, so the last
   item (WhatsApp) ends level with the Submit button and the box ends there. */
.route-information-contact #content-top .grid-col-content-top-2-1,
.route-information-contact #content-top .grid-col-content-top-2-2 {
	padding: 40px;
}
.route-information-contact #content-top .grid-col-content-top-2-2 form,
.route-information-contact #content-top .grid-col-content-top-2-2 .grid-item:last-child,
.route-information-contact #content-top .grid-col-content-top-2-2 .grid-item:last-child .module-body {
	margin-bottom: 0;
	padding-bottom: 0;
}
@media (min-width: 1024px) {
	.route-information-contact #content-top .grid-col-content-top-2-1 :is(.grid-items, .grid-item, .module-info_blocks, .module-body, .info_blocks-grid, .auto-grid-items) {
		height: 100%;
	}
	.route-information-contact #content-top .grid-col-content-top-2-1 :is(.auto-grid-items, .info_blocks-grid:not(:has(.auto-grid-items))) {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.route-information-contact #content-top .grid-col-content-top-2-1 .module-item:first-child .info-block {
		padding-top: 0;
	}
	.route-information-contact #content-top .grid-col-content-top-2-1 .module-item:last-child .info-block {
		padding-bottom: 0;
		border-bottom: 0;
	}
}
.route-information-contact .grid-item:has(iframe[src*="google.com/maps"]),
.route-information-contact .grid-item:has(iframe[data-src*="google.com/maps"]),
.route-information-contact .grid-item:has(iframe[src*="maps.google."]) {
	display: none;
}

/* #4680 / #4682 "Need some help?" grid outside the product page (404 and enquiry pages).
   No panel behind the cards: they sit on the page background (v1.2 - the
   #FAFAFA panel added in v1.0 is removed). */
.ctd-help-standalone {
	max-width: 805px; /* #4722 five 145px cards and four 10px gaps, plus padding */
	margin: 24px auto 30px;
	padding: 20px;
}
.ctd-help-standalone .ctd-help-title {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 600;
	color: #333333;
	text-align: center;
}
/* #4722 Help grid and card size/border/radius: ctd-global.css */
.ctd-help-standalone .ctd-help-card:hover {
	border-color: #C2A559;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ctd-help-standalone .ctd-help-card i {
	font-size: 28px;
	color: #C2A559;
}
.ctd-help-standalone .ctd-help-card i.fa-whatsapp {
	color: #25D366;
}
.ctd-help-standalone .ctd-help-card span {
	font-size: 14px;
	color: #666666;
}
.ctd-help-standalone .ctd-help-card strong {
	font-size: 15px;
	color: #333333;
}
@media (max-width: 420px) {
	.ctd-help-standalone {
		padding: 14px;
	}
}
/* #4682 [E] Enquiry form sits below the help options, out of the first screen. */
#information-enquiry .ctd-enquiry-form {
	margin-top: 96px;
	scroll-margin-top: 140px;
}
/* #4659 / #4670 / #4677 (look only) Diamond search filters in the layout the client prefers
   from the live site: label on the left, options sharing the row as equal buttons, site
   radius. Layout rules apply from 992px up; below that the stacked mobile layout is kept.
   No control, name, value or script hook changes - the search itself is untouched.
   The search template prints its own <style> after this file with .search-card selectors,
   hence the extra .maindiamondsearch class on every rule. */
.search-card.maindiamondsearch .search-options .pill-option,
.search-card.maindiamondsearch .search-options .shape-option,
.search-card.maindiamondsearch .search-options .range-input {
	border-radius: 6px;
}
@media (min-width: 992px) {
	.search-card.maindiamondsearch .search-section {
		justify-content: flex-start;
	}
	.search-card.maindiamondsearch .search-row {
		flex-direction: row;
		align-items: center;
		width: 100%;
		gap: 16px;
		margin-bottom: 0;
	}
	.search-card.maindiamondsearch .search-row > .search-label {
		flex: 0 0 130px;
		text-align: left;
	}
	.search-card.maindiamondsearch .search-row > .search-options {
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.search-card.maindiamondsearch .search-options > .filtercontainer {
		flex: 1 1 0;
		min-width: 0;
	}
	.search-card.maindiamondsearch .search-options > .filtercontainer > .pill-option {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 44px;
	}
	.search-card.maindiamondsearch .search-options > .row {
		display: flex;
		flex: 1 1 auto;
		gap: 10px;
		margin: 0;
		padding: 0;
	}
	.search-card.maindiamondsearch .search-options .small-pill {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1 1 0;
		min-height: 44px;
	}
	/* #100028 Carat row centred under the other rows (fills the options area, content centred). */
	.search-card.maindiamondsearch .search-options > .range-group {
		flex: 1 1 auto;
		justify-content: center;
	}
	.search-card.maindiamondsearch .search-options .range-input {
		width: 180px;
	}
}
/* #4692 Size Chart popup (Journal module 534): the portrait image (1126x1397) is scaled to
   the window height so the whole chart shows without scrolling inside the popup. */
.popup-wrapper.popup-block-534 .popup-content img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 150px);
	margin: 0 auto;
}
/* === END CTD QRQI look-and-feel pass === */
/* === CTD QRQI functional pass v1.3 (2026-10-04) === */
/* #4674 Diamond listings - "Refine Search".
   One state lives on #product-diamond-search (set by js/custom.js):
     .ctd-rs-collapsed  filters closed: current search + "Refine Search" button shown
     .ctd-rs-open       filters open
   The first two groups below are the same decision made before any script runs, so a
   listing that already has its search (colour or carat) never shows the filter panel
   open and then closes it. /diamonds and the coloured landings (/diamonds/coloured-lab-grown)
   start open, so the colour choice is in view (tweak 100031). */
html.route-product-coloured #product-diamond-search:not(.ctd-rs-open) #searchoptioncontainer,
html.route-product-naturallabdynamic #product-diamond-search:not(.ctd-rs-open) #searchoptioncontainer,
#product-diamond-search.ctd-rs-collapsed #searchoptioncontainer {
	display: none;
}
/* The button's wrapper carries an inline display:none from the template, and
   diamond_search.js hides/shows it with inline styles; the state class decides. */
html.route-product-coloured #product-diamond-search:not(.ctd-rs-open) .refinesearchcontainer,
html.route-product-naturallabdynamic #product-diamond-search:not(.ctd-rs-open) .refinesearchcontainer,
#product-diamond-search.ctd-rs-collapsed .refinesearchcontainer {
	display: block !important;
}
#product-diamond-search.ctd-rs-open .refinesearchcontainer {
	display: none !important;
}
#product-diamond-search:not(.ctd-rs-open) #btn_advance_search_d {
	display: none;
}
/* Current search (built by js/custom.js), shown only while collapsed */
.ctd-rs-context {
	display: none;
	margin: 16px 0 14px;
	text-align: center;
}
#product-diamond-search.ctd-rs-collapsed .ctd-rs-context {
	display: block;
}
.ctd-rs-label {
	display: block;
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.4;
	color: #444444;
}
.ctd-rs-shape-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.ctd-rs-context a.ctd-rs-shape {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start; /* icons on one line across every tile; two-line labels no longer push their icon up */
	gap: 6px;
	width: 76px;
	padding: 10px 4px 8px;
	background-color: #FFFFFF;
	border: 1px solid #E5E5E5;
	border-radius: 6px;
	color: #1A1A1A;
	font-size: 12px;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.ctd-rs-context a.ctd-rs-shape:hover,
.ctd-rs-context a.ctd-rs-shape:focus-visible {
	border-color: #C2A559;
	color: #1A1A1A;
	text-decoration: none;
}
/* #4726 - icons match the filter panel's shape tiles (.search-card .shape-img):
   50px, 40px up to 900px, 32px up to 600px (#4728: one size, --ctd-shape-icon in ctd-global.css). */
.ctd-rs-context a.ctd-rs-shape img {
	width: var(--ctd-shape-icon, 50px);
	max-width: none;
	height: var(--ctd-shape-icon, 50px);
	object-fit: contain;
}
.ctd-rs-context a.ctd-rs-shape.is-active {
	border-color: #C2A559;
	box-shadow: inset 0 0 0 1px #C2A559;
}
.ctd-rs-shape.is-active::after {
	content: "\2713";
	position: absolute;
	top: 4px;
	right: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #C2A559;
	color: #FFFFFF;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}
.ctd-rs-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 8px;
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #444444;
}
.ctd-rs-summary-label {
	font-weight: 600;
	color: #1A1A1A;
}
.ctd-rs-chip {
	display: inline-block;
	padding: 4px 10px;
	background-color: #FAF7EF;
	border: 1px solid #E8DFC6;
	border-radius: 6px;
	color: #1A1A1A;
}
.ctd-rs-chip b {
	margin-right: 5px;
	font-weight: 400;
	color: #6B6B6B;
}
@media (max-width: 767px) {
	.ctd-rs-shape-list {
		gap: 6px;
	}
	.ctd-rs-context a.ctd-rs-shape {
		width: calc(20% - 5px);
		padding: 8px 2px 6px;
		font-size: 11px;
	}
	.ctd-rs-summary {
		font-size: 13px;
	}
}
/* #4726 - the tiles themselves now match the filter panel's shape tiles (.shape-option):
   2px border, same padding, gap and 11px label, about the width each panel tile gets at
   1440px; 88px from 991px down (the panel's 5-column grid), a fifth of the row on phones. */
.ctd-rs-shape-list {
	gap: 10px;
}
.ctd-rs-context a.ctd-rs-shape {
	gap: 8px;
	width: clamp(88px,8vw,119px);
	padding: 12px 14px;
	border-width: 2px;
	font-size: 11px;
	font-weight: 500;
}
.ctd-rs-context a.ctd-rs-shape.is-active {
	box-shadow: none;
}
@media (max-width: 991px) {
	.ctd-rs-context a.ctd-rs-shape {
		width: 88px;
		padding: 10px;
	}
}
@media (max-width: 600px) {
	.ctd-rs-shape-list {
		gap: 6px;
	}
	.ctd-rs-context a.ctd-rs-shape {
		width: calc(25% - 4.5px);
		padding: 8px 2px;
		font-size: 9px;
	}
}
/* === END CTD QRQI functional pass v1.3 === */
/* === CTD QRQI final UI pass v1.4 (2026-10-04) === */
/* #4674 - the current-search block and "Refine Search" use the site's own text and button values:
   body text 15px #575757, bold 700 (Outfit is loaded in 400/700 only), and the same size and
   padding as the panel's "Search Diamonds" button instead of a 20px full-width bar. */
.ctd-rs-label {
	font-size: 15px;
	color: #575757;
}
.ctd-rs-summary {
	color: #575757;
}
.ctd-rs-summary-label {
	font-weight: 700;
}
.ctd-rs-chip {
	border-color: #E5E0D6;
}
.ctd-rs-chip b {
	color: #575757;
}
#product-diamond-search .refinesearchcontainer {
	text-align: center;
}
#product-diamond-search #refinesubmitsearch_d {
	width: auto;
	min-width: 0;
	max-width: 100%;
	padding: 14px 48px;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0;
}
/* === END CTD QRQI final UI pass v1.4 === */
/* === CTD QRQI search card v1.6-r2 (2026-10-05) === */
/* Look only. No control name, value, id or script hook is changed.
   The search templates print their own <style> after this file, so the search-card rules
   carry #product-diamond-search to win on specificity. !important is used only on the
   properties where the template (or Journal's input.form-control rule) itself uses
   !important; each of those lines is marked [T]. */

/* ---- Diamond search card: #4659 / #4698 ---------------------------------------------- */

/* One control size for the whole card: 42px high, 6px radius, 1px border. */
#product-diamond-search .search-card.maindiamondsearch .search-options .pill-option,
#product-diamond-search .search-card.maindiamondsearch .search-options .small-pill,
#product-diamond-search .search-card.maindiamondsearch .fluor-options .fluor-pill {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
}
/* #4698 [C] Unselected filter buttons take the #F6F1ED fill. */
#product-diamond-search .search-card.maindiamondsearch .search-options .pill-option:not(.selected),
#product-diamond-search .search-card.maindiamondsearch .search-options .small-pill:not(.selected),
#product-diamond-search .search-card.maindiamondsearch .fluor-options .fluor-pill:not(.selected) {
	background-color: #F6F1ED;
}
/* One selected state for every filter button (Diamond and Fluorescence were gold, Colour /
   Clarity / Certificate were black). */
#product-diamond-search .search-card.maindiamondsearch .search-options .small-pill:hover {
	border-color: var(--ds-gold);
}
#product-diamond-search .search-card.maindiamondsearch .search-options .small-pill.selected {
	border-color: var(--ds-gold);
	background-color: var(--ds-gold);
	color: #fff;
}
/* Colour row. Its buttons sit inside an extra Bootstrap .row (the script swaps that element's
   content between D-J and the fancy colours). Two things made the row differ from Clarity and
   Certificate: (1) the wrapper was a second flex container with its own rules, and (2) its
   Bootstrap clearfix ::before / ::after became two empty flex items, each costing one 10px
   gap, so the row started 10px late and ended 10px early.
   The wrapper is taken out of the layout (display: contents) and its clearfix removed, so the
   Colour buttons are laid out by the same container and the same rules as the other rows,
   whatever the number of buttons. The element itself stays in the page for the script. */
#product-diamond-search .search-card.maindiamondsearch .search-options > .row {
	display: contents;
}
#product-diamond-search .search-card.maindiamondsearch .search-options > .row::before,
#product-diamond-search .search-card.maindiamondsearch .search-options > .row::after {
	content: none;
}
/* Shape tick: icon font instead of a text character. */
#product-diamond-search .search-card.maindiamondsearch .shape-option.selected::after {
	content: "\f00c";
	font-family: FontAwesome;
	font-size: 9px;
	line-height: 1;
}
/* #4698 [A] / #100028 Shapes fill their row as equal tiles, so the Shape, Colour, Clarity and
   Certificate rows all start and end on the same lines and the search sits centred in the card
   (desktop row layout). */
@media (min-width: 992px) {
	#product-diamond-search .search-card.maindiamondsearch .search-row > .search-options:has(> .shape-option) {
		justify-content: center;
	}
	#product-diamond-search .search-card.maindiamondsearch .search-options > .shape-option {
		flex: 1 1 0;
		min-width: 0;
	}
}
/* Tablet and phone: twelve shapes as even rows - two rows of six on tablet, three rows of four on phones. */
@media (max-width: 991px) {
	#product-diamond-search .search-card.maindiamondsearch .search-row > .search-options:has(> .shape-option) {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 88px));
		justify-content: center;
		gap: 10px;
	}
	#product-diamond-search .search-card.maindiamondsearch .search-options > .shape-option {
		min-width: 0;
	}
}

/* Shape tiles: two-line labels (Square / Elongated Cushion and Radiant) sit as one tight label,
   and every label keeps room for two lines, so all shape tiles are the same size. */
#product-diamond-search .search-card.maindiamondsearch .shape-option .shape-name,
.ctd-rs-context a.ctd-rs-shape span {
	display: block;
	width: min-content; /* two-word names always break the same way (Square / Cushion), whatever the tile width */
	min-height: 2.4em;
	margin: 0 auto;
	line-height: 1.2;
	text-align: center;
}

/* Carat row: FROM [field] TO [field] | or search by budget [pound field] +/- 5%.
   Captions sit beside their field, so every part shares one 42px line and one centre. */
#product-diamond-search .search-card.maindiamondsearch .range-group {
	align-items: center;
	gap: 12px;
}
#product-diamond-search .search-card.maindiamondsearch .range-input-group {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
#product-diamond-search .search-card.maindiamondsearch .range-label {
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.04em;
}
#product-diamond-search .search-card.maindiamondsearch .range-input,
#product-diamond-search .search-card.maindiamondsearch .budget-input input {
	box-sizing: border-box;
	height: 42px;
	margin: 0;
	padding: 0 12px !important; /* [T] */
	border-radius: 6px !important; /* [T] */
	font-size: 16px !important; /* [T] */
	line-height: 20px;
	box-shadow: none;
}
#product-diamond-search .search-card.maindiamondsearch .range-input:focus,
#product-diamond-search .search-card.maindiamondsearch .budget-input input:focus {
	border-color: var(--ds-gold) !important; /* [T] */
	outline: none;
	box-shadow: 0 0 0 2px rgba(194, 165, 89, 0.2);
}
/* #100028 Budget search on its own centred line under FROM / TO at every width, no divider. */
#product-diamond-search .search-card.maindiamondsearch .budget-group {
	flex: 0 0 100%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
}
#product-diamond-search .search-card.maindiamondsearch .budget-label {
	font-size: 14px;
	line-height: 1;
}
/* The pound sign is part of the field (left, inside), not a loose character after it. */
#product-diamond-search .search-card.maindiamondsearch .budget-input {
	position: relative;
	gap: 0;
}
#product-diamond-search .search-card.maindiamondsearch .budget-input i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 12px;
	display: flex;
	align-items: center;
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
}
#product-diamond-search .search-card.maindiamondsearch .budget-input input {
	width: 120px;
	padding-left: 28px !important; /* [T] */
	text-align: left;
}
#product-diamond-search .search-card.maindiamondsearch .budget-variance {
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
}

/* Advanced panel controls follow the same size. */
#product-diamond-search .search-card.maindiamondsearch .advanced-select {
	box-sizing: border-box;
	height: 42px;
	padding: 0 14px;
	border-radius: 6px;
}
#product-diamond-search .search-card.maindiamondsearch .search-section-title .fa {
	font-size: 16px;
	line-height: 1;
}

/* #4659 [B] Action buttons: one pair. Same height, radius, type and icon size; the outline
   button is secondary, the gold button primary. Icons are Font Awesome (already loaded by
   the theme) and take the text colour. */
#product-diamond-search .ctd-search-row .search-actions {
	gap: 16px;
}
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle,
#product-diamond-search .ctd-search-row .search-actions .search-btn {
	box-sizing: border-box;
	display: flex !important; /* [T] template forces display:block on the link on phones */
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 0 0 240px;
	width: 240px !important; /* [T] */
	max-width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	border-radius: 6px !important; /* [T] */
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle {
	background-color: #fff;
	color: var(--ds-text);
}
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle:hover,
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle:focus {
	color: var(--ds-text);
	text-decoration: none;
}
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle .toggle-text,
#product-diamond-search .ctd-search-row .search-actions .search-btn .ctd-btn-label {
	line-height: 1;
}
#product-diamond-search .ctd-search-row .search-actions .ctd-btn-icon,
#product-diamond-search .ctd-search-row .search-actions .arrow .fa {
	flex: 0 0 auto;
	width: 16px;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	color: inherit;
}
#product-diamond-search .ctd-search-row .search-actions .advanced-toggle .arrow {
	display: flex;
	align-items: center;
	font-size: 16px;
	line-height: 1;
}

/* Small desktop: ten shapes and the whole carat row still fit on one line. */
@media (min-width: 992px) and (max-width: 1199px) {
	#product-diamond-search .search-card.maindiamondsearch .search-options > .shape-option {
		padding-right: 4px;
		padding-left: 4px;
	}
	#product-diamond-search .search-card.maindiamondsearch .search-options .range-input {
		width: 120px;
	}
}
/* Tablet: buttons of one row share a minimum width. */
@media (min-width: 601px) and (max-width: 991px) {
	#product-diamond-search .search-card.maindiamondsearch .search-options .small-pill {
		min-width: 64px;
	}
}
/* Phone */
@media (max-width: 600px) {
	#product-diamond-search .search-card.maindiamondsearch .search-row > .search-options {
		width: 100%;
	}
	#product-diamond-search .search-card.maindiamondsearch .search-row > .search-options:has(> .shape-option) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
	}
	#product-diamond-search .search-card.maindiamondsearch .search-options > .shape-option {
		padding: 8px 2px;
	}
	#product-diamond-search .search-card.maindiamondsearch .search-options .pill-option {
		padding: 0 8px;
		font-size: 13px;
	}
	/* Colour / Clarity / Certificate: four equal buttons per line. */
	#product-diamond-search .search-card.maindiamondsearch .search-options .small-pill {
		flex: 0 0 calc((100% - 30px) / 4);
		min-width: 0;
		padding: 0 4px;
	}
	/* FROM [field] TO [field] on one line with two equal fields (no dash column since #100028). */
	#product-diamond-search .search-card.maindiamondsearch .range-group {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: 8px;
		width: 100%;
	}
	#product-diamond-search .search-card.maindiamondsearch .range-input-group {
		display: contents;
	}
	#product-diamond-search .search-card.maindiamondsearch .range-input {
		width: 100%;
	}
	#product-diamond-search .search-card.maindiamondsearch .budget-group {
		grid-column: 1 / -1;
	}
	#product-diamond-search .ctd-search-row .search-actions .advanced-toggle,
	#product-diamond-search .ctd-search-row .search-actions .search-btn {
		flex: 0 0 auto;
		width: 100% !important; /* [T] */
	}
}
/* === END CTD QRQI search card v1.6-r2 === */
/* === CTD shape strip: one row on desktop (2026-10-21) === */
/* The refine-search shape strip wrapped its last tile onto a second row once the
   twelfth shape (Elongated Radiant) was added: twelve tiles at clamp(88px,8vw,119px)
   plus eleven 10px gaps need 1478px at a 1440px viewport, but the row is 1361px wide,
   so it only fits again above a ~1617px viewport. The tiles now share the row instead
   of carrying a fixed width, capped at the same 119px so none of them grows, and a
   thirteenth shape would shrink the tiles rather than wrap. Below 1200px a tile would
   be narrower than the 50px icon plus its padding, so the 88px wrapping behaviour
   there is left exactly as it was. */
@media (min-width: 1200px) {
	.ctd-rs-context .ctd-rs-shape-list {
		flex-wrap: nowrap;
	}
	.ctd-rs-context a.ctd-rs-shape {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		max-width: 119px;
	}
}