/* GemTrove catalogue card text-clipping fix — r2 (2026-11-15, spacing tightened)
   Problem: on Safari (MacBook Air, iPad, iPhone) the card text block was squashed:
   .gt-diamond-card-body had flex:1 1 0% + min-height:0, and each text line inside had
   overflow:hidden + min-height:0, so Safari shrank SKU / title / spec lines and sliced the text.
   The title's line-height of 1.1 also clipped Cormorant ascenders/descenders in every browser.
   Fix: the body sizes to its content, lines never shrink, and the title gets enough line box. */

/* 1. Card body takes its full content height (never compressed below content) */
html body .gt-grid .gt-card.gt-diamond-card > .gt-diamond-card-body,
html body #gt-main-content #filter-form .gt-card.gt-diamond-card > .gt-diamond-card-body {
  flex: 1 0 auto !important;
  min-height: auto !important;
}

/* 2. No text line inside the card may be shrunk by flexbox */
html body .gt-diamond-card-body > *,
html body #gt-main-content #filter-form .gt-diamond-card-body > * {
  flex-shrink: 0 !important;
}

/* 3. Title: single line with ellipsis kept, but a line box tall enough for the serif glyphs */
html body #gt-main-content #filter-form .gt-diamond-card-title,
html body .gtcat .gt-card.gt-diamond-card h2.gt-diamond-card-title,
html body .gt-diamond-card-title {
  line-height: 1.16 !important;
  padding-top: 0.05em !important;
  padding-bottom: 0.1em !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* 4. SKU + spec lines: comfortable line boxes, no fixed heights */
html body #gt-main-content #filter-form .gt-diamond-card-body .gt-card-sku,
html body .gt-diamond-card-body .gt-diamond-card-sku {
  line-height: 1.3 !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
}
html body #gt-main-content #filter-form .gt-diamond-card-body .gt-spec,
html body .gt-diamond-card-body .gt-diamond-card-spec {
  line-height: 1.38 !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* 5. Origin badge: line-height 1 is fine for one line, but give it room so it never crops */
html body #gt-main-content #filter-form .gt-diamond-card-origin,
html body .gt-card-detail-top .gt-diamond-card-origin {
  line-height: 1.2 !important;
  max-width: 100%;
}

/* 6. Price line sits directly under the specs (no stretched gap above the price) */
html body .gt-diamond-card-body > .gt-diamond-card-price-line,
html body #gt-main-content #filter-form .gt-diamond-card-body > .gt-diamond-card-price-line {
  margin-top: 0 !important;
}

/* 7. r2 spacing: rows size to their own content (no page-wide tallest-card height),
      tighter, even 3px rhythm between lines, slimmer price divider */
html body .gt-grid:not(.list),
html body #gt-main-content #filter-form .gt-grid:not(.list) {
  grid-auto-rows: auto !important;
}
html body .gt-grid:not(.list) .gt-card.gt-diamond-card > .gt-diamond-card-body,
html body #gt-main-content #filter-form .gt-grid:not(.list) .gt-card.gt-diamond-card > .gt-diamond-card-body {
  row-gap: 3px !important;
}
html body #gt-main-content #filter-form .gt-diamond-card-top,
html body .gt-diamond-card-body > .gt-diamond-card-top {
  margin-bottom: 2px !important;
}
html body #gt-main-content #filter-form .gt-diamond-card-body > .gt-diamond-card-price-line,
html body .gt-diamond-card-body > .gt-diamond-card-price-line {
  padding-top: 7px !important;
}
html body .gt-grid:not(.list) .gt-diamond-card-body > .gt-list-extra {
  display: none !important;
}

/* 8. Spec lines wrap fully instead of being hard-cut at 2 lines (long fancy-colour names on phones) */
html body #gt-main-content #filter-form .gt-grid:not(.list) .gt-diamond-card-body .gt-spec,
html body .gt-grid:not(.list) .gt-diamond-card-body .gt-diamond-card-spec {
  display: block !important;
  -webkit-line-clamp: none !important;
  line-clamp: none !important;
  overflow: visible !important;
}