/* Search intro + methodology explainer (2026-08-01) - moved off inline styles per
   operator instruction; was style="" on every element in components/search/main.php. */
.tdp-search-intro {
    max-width: 900px;
    margin: 0 0px 19px;
    padding: 0 6px;
}
.tdp-search-intro__title {
    margin: 0 0 10px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #254264;
}
.tdp-search-intro__lede {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}
.tdp-search-intro__methodology {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2px 20px;
    max-width: 349px;
    display: none;
}
/* Overrides .calc-v2-faq-item summary's shared near-black (--cv2-text) with this
   box's own navy, scoped so it doesn't affect the shared class elsewhere. */
.tdp-search-intro__methodology .calc-v2-faq-item summary { color: #254264; }
.tdp-search-intro__link { color: #254264; }

body{
    font-family: 'assistant', sans-serif !important;
}

.range-slider {
    height: 2px;
    background: #e5e7eb;
    border-radius: 2px;
}

.shape-btn.selected {
    background-color: #EBF5FF;
    border: 2px solid #2563EB;
}

/* Add styles for range slider handles and tracks */
.range-slider .handle {
    width: 18px;
    height: 18px;
    background: white;
    border: 2px solid #2563EB;
    border-radius: 50%;
    cursor: pointer;
}
.search-diamonds-main-tool .diamond-shape-image {
    width: 62px;
    height: unset;
}
.search-diamonds-main-tool .noUi-connect {
    background-color: #264264;
}

.search-diamonds-main-tool .noUi-horizontal {
    height: 6px;
}

.search-diamonds-main-tool .noUi-handle.noUi-handle {
    border-radius: 100px;
    width: 28px;
    top: -14px;
    /* right: -21px; */
    cursor: pointer;
}

/* 2026-08-03 (user report): dragging a handle left-to-right on mobile sometimes triggered the
   browser's own edge-swipe back-navigation gesture instead of moving the handle - the browser was
   interpreting the horizontal touch as its own gesture rather than handing it to noUiSlider.
   touch-action:none tells the browser this element handles ALL of its own touch interaction, so
   it stops trying to recognize a navigation gesture here. (Doesn't cover every OS-level edge case
   on every browser, which is why the +/- stepper buttons below exist as a drag-free alternative.) */
.search-diamonds-main-tool .noUi-target,
.search-diamonds-main-tool .noUi-handle {
    touch-action: none;
}

/* Click-based grade filters (2026-08-05) - mobile-only <select> pair replacing the drag slider for
   color/clarity/cut/fluorescence/polish/symmetry (carat/price/table/depth/ratio keep their slider
   + steppers; these 6 have no natural numeric stepper target, a tap-only dropdown fits better).
   Desktop is completely unaffected: the wrap stays hidden and the slider renders exactly as before. */
.tdp-grade-select-wrap { display: none; }
@media (max-width: 650px) {
    #color-range, #clarity-range, #cut-range, #fluorescence-range, #polish-range, #symmetry-range {
        display: none;
    }
    .tdp-grade-select-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 6px;
    }
    .tdp-grade-select {
        flex: 1 1 0;
        min-width: 0;
        /* 2026-08-07 (operator: the native dropdown arrow sat too close to the box's right edge) -
           this is a plain <select>, so the arrow is the browser's own native control, not a CSS
           background-image; padding-right is the only lever available to push it inward. Left
           padding unchanged. */
        padding: 10px 22px 10px 10px;
        border: 1px solid #d4d9e2;
        border-radius: 8px;
        background: #fff;
        color: #16233b;
        font-size: 14px;
        font-family: inherit;
    }
    .tdp-grade-select-sep { color: #8a93a5; font-size: 13px; flex: none; }
}
@media (max-width: 650px) {
    /* 2026-08-05 (operator, from a real phone screenshot): the +/- stepper buttons are GONE (see
       filters.js) - they made these rows wider than the screen, which forced a wrap that stranded
       the "-" and "$" separators on their own lines. With the buttons removed the row fits again,
       so the layout is simply: label on its own line, then the two inputs sharing the width
       evenly with their separator between them. Tailwind's fixed w-20/w-24 must be overridden or
       the inputs won't flex. Scoped with :has() to the numeric rows only (carat/price/table/
       depth/ratio) - the color/clarity/etc rows use the grade <select> pair instead. */
    .diamond-filter-structure > .flex.items-center.gap-4:has(input[id$="-min"]) {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .diamond-filter-structure .flex.items-center.gap-2:has(input[id$="-min"]) {
        display: flex;
        width: 100%;
        gap: 8px;
    }
    .diamond-filter-structure .flex.items-center.gap-2:has(input[id$="-min"]) input[id$="-min"],
    .diamond-filter-structure .flex.items-center.gap-2:has(input[id$="-min"]) input[id$="-max"] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 11px 12px;
        font-size: 16px; /* >=16px stops iOS Safari auto-zooming the page on focus */
        border-radius: 8px;
        border: 1px solid #d4d9e2;
        text-align: center;
    }
    .diamond-filter-structure .flex.items-center.gap-2:has(input[id$="-min"]) > span {
        flex: none;
        font-size: 13px;
    }
}

.search-diamonds-main-tool .bg-blue-600 {
    background-color: #264264;
}
.search-diamonds-main-tool .noUi-handle:after,.search-diamonds-main-tool .noUi-handle:before {
    left: 10px;
}

.search-diamonds-main-tool .noUi-handle:after {
    left: 15px;
}
.search-diamonds-main-tool .noUi-handle.noUi-handle-upper {
    /* right: -2px; */
}

/* 2026-08-03 (user request - "mobile drag experience is not friendly, improve it dramatically"):
   live value tooltip shown above the active handle while dragging (filters.js now passes a
   `tooltips` formatter to every slider) - styled to match the site's own navy/white pill language
   instead of noUiSlider's plain default box, and given room via the extra top padding added below.
   BUG CAUGHT via a real headless-Chrome screenshot render (2026-08-03): noUiSlider's `tooltips`
   option shows the tooltip PERMANENTLY by default, not just while dragging - the first render had
   every slider's tooltip visibly cluttering the panel at rest, the opposite of the intent (help
   during the drag, not add permanent noise). Fixed by hiding tooltips by default and only revealing
   the one on the handle actually being dragged (.noUi-active, the class noUiSlider itself applies
   to a handle during interaction) or hovered (desktop mouse users get a free preview). */
.search-diamonds-main-tool .noUi-tooltip {
    display: none;
    background: #264264;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    bottom: 24px;
    box-shadow: 0 2px 8px rgba(38, 66, 100, 0.28);
    white-space: nowrap;
}
.search-diamonds-main-tool .noUi-handle.noUi-active .noUi-tooltip,
.search-diamonds-main-tool .noUi-handle:hover .noUi-tooltip {
    display: block;
}
.search-diamonds-main-tool .noUi-target {
    margin-top: 22px; /* room for the tooltip above the handle without clipping/overlap */
}

/* Mobile: bigger touch targets are the real fix for "hard to grab/drag precisely" - handles below
   28px are under the ~44px minimum touch-target guideline, and a bigger handle also makes it much
   easier to tell the two handles apart when they're close together. Taller track + more vertical
   room between adjacent filter rows so a drag can't accidentally start on the wrong slider. */
@media (max-width: 650px) {
    .search-diamonds-main-tool .noUi-horizontal {
        height: 10px;
    }
    .search-diamonds-main-tool .noUi-handle.noUi-handle {
        width: 38px;
        height: 38px;
        top: -16px;
        right: -19px;
    }
    /* 2026-08-07 (operator, screenshot: the two grip lines sit visibly left of center). The
       desktop rule above centers these lines for a 28px-wide handle (left:10px/15px, center
       ~12.5px vs the handle's true center of 14px - already a hair off, invisible at that size).
       Mobile bumps the handle to 38px wide but never re-centered the lines - they kept the same
       10px/15px offset, ~6.5px left of the new 19px true center, which is what made the gap
       obviously visible here. Re-centered for 38px: 17px/21px average to 19px, exactly the
       handle's own center. */
    .search-diamonds-main-tool .noUi-handle:after, .search-diamonds-main-tool .noUi-handle:before {
        top: 13px;
        left: 17px;
    }
    .search-diamonds-main-tool .noUi-handle:after {
        left: 21px;
    }
    .search-diamonds-main-tool .noUi-target {
        margin-top: 26px;
        margin-bottom: 4px;
        /* 2026-08-05 (operator: "the drag filters are too close to the browser edge and the user
           can go back if he swipes from left to right"): iOS/Android reserve roughly the outer
           ~20px of each screen edge for their own back/forward swipe gesture - a slider handle
           sitting inside that strip means the browser claims the drag before the page ever sees
           it. Insetting the whole track keeps BOTH handles (including at their 0% / 100% extremes,
           which is exactly where they sat before) clear of that strip, so a drag starting on a
           handle is always the page's to handle. This is the real fix for the problem the +/-
           stepper buttons were a workaround for - which is why those could be removed. */
        margin-left: 22px;
        margin-right: 22px;
    }
    /* the step labels under each slider (0.25 / 1.0 / 2.0 …) must line up with the inset track */
    .search-diamonds-main-tool .diamond-filter-structure > .flex.justify-between {
        padding-left: 22px;
        padding-right: 22px;
    }
    .search-diamonds-main-tool .noUi-tooltip {
        font-size: 13px;
        padding: 5px 12px;
        bottom: 28px;
    }
    /* extra breathing room between filter rows so adjacent sliders don't feel cramped on a
       narrow screen (each slider's own touch target is now bigger too, per above) */
    .search-diamonds-main-tool .diamond-filter-structure {
        margin-bottom: 28px;
    }
}

.filter-step-value-title {
    position: relative;
    margin-right: -21px;
}

.filter-step-value-title .slider-step-divider {
    position: absolute;
    width: 2px;
    height: 5px;
    background-color: #ffffff;
    border-radius: 0px;
    top: -14px;
    left: 3px;
    z-index: 4;
}


.search-diamonds-main-tool .shape-btn {
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all .3s ease;
}
.search-diamonds-main-tool .bg-blue-50 {
    background-color: #f3f4f6;
    border: 1px solid #264264;
    font-weight: 600;
    border: 1px solid #D3D3D3;
    /* box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; */
}
.filter-step-value-title-txt {
    width: 40px;
    text-align: center;
    margin-left: -16px;
    margin-top: 9px;
    font-size: 13px;
    color: #b8b8b8;
    transition: all .3s ease;
    transform: scale(.95);
}
.advanced-toggle {
    margin-top: 20px;
    margin: 0 auto;
    margin-top: 20px;
}
.search-diamonds-main-tool {
    padding-top: 85px;
}
.search-diamonds-main-tool-filters{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    box-sizing: border-box;
}
.diamond-filter-title {
    font-size: 13px;
    font-weight: 300;
    min-height: 30px;
    align-items: center;
    display: flex;
    top: -1px;
    position: relative;
}

.range-value-title {display: none;}
.filter-step-value-title.active .filter-step-value-title-txt {
    font-weight: 500;
    color: #274264;
    transform: scale(1);
}

/* 2026-08-07 (operator report + screenshot): the Color/Clarity/Cut/Fluorescence/Polish/Symmetry
   step legend now actually responds to a tap (see tdpAddGradeClickFilter in filters.js), but its
   look never changed to match - on mobile it read as plain text, not a control, and active-vs-not
   was carried by a subtle grey/navy text-color difference alone (#b8b8b8 vs #274264), too close in
   weight to register as "on" vs "off" at a glance on a small screen. Mobile-only (matches this
   scale's existing mobile-vs-desktop split - the click-select experience is mobile-only, the drag
   slider stays desktop's primary input and its legend didn't need to change): a filled chip for the
   active/in-range steps, an outlined-on-tap affordance for inactive ones, and a visible pressed
   state, so "which steps are in my current range" and "this row is tappable" are both immediate. */
@media (max-width: 650px) {
    /* 2026-08-07: gap/padding are NOT one shared value - Color/Clarity (8 steps; Clarity's "VVS1"/
       "VVS2" are its widest labels) have measurably less room per chip at a 390px width than Cut/
       Fluorescence/Polish/Symmetry (4 steps). Numbers below come from measuring each row's actual
       rendered box width against its longest label's real (unwrapped) text width and picking a
       value with a few px of slack, not a guess - a single shared number would either clip
       Clarity's text or leave the roomier 4-step rows under-spaced. "Dense"/"roomy" classes are
       added in filters.js alongside `.tdp-step-clickable`, so this never touches carat/price/
       table/depth/ratio's legend, which reuses the same `.flex.justify-between` row markup. */
    .tdp-step-row-dense {
        gap: 4px;
    }
    .tdp-step-row-roomy {
        gap: 8px;
    }
    /* Scoped to .tdp-step-clickable (added in filters.js only for the six grade legends that get a
       click handler) - NOT the bare .filter-step-value-title class, which carat/price/table/depth/
       ratio also use for their drag-only, non-clickable legend. Styling the class alone would make
       those look tappable while doing nothing on tap - the exact bug this fix exists to remove. */
    .filter-step-value-title.tdp-step-clickable {
        cursor: pointer;
        /* 2026-08-07 (operator, same report): equal-width columns instead of shrink-to-content -
           the base rule's fixed 40px box (sized for a single letter like "D") wrapped "Very Good"/
           "Excellent" onto two lines, and made every chip a visibly different size depending on
           its own label length. flex:1 gives every step in a row an identical share of the row's
           width, so the chips read as one uniform button group regardless of label length. The
           base rule's `margin-right: -21px` (an overlap hack for the old plain-text legend) is
           dropped here - it fights equal flex sizing and its job (visual tick separation) is now
           done by the chip backgrounds themselves, not by overlapping text.
           `min-width: 0` overrides the browser default (`min-width: auto` on flex items), which
           otherwise sizes a flex item off its own content's unwrapped min-width REGARDLESS of the
           `width:100%` on the child text box or any padding on it - without this override, `flex:1`
           silently stopped being "equal shares" the moment content got long enough, and the row
           itself overflowed instead of the (correctly) equal-width columns absorbing it. This was
           caught by measuring the real page, not assumed - an earlier pass here missed it.
        */
        flex: 1 1 0;
        min-width: 0;
        margin-right: 0;
        text-align: center;
    }
    /* The divider tick was a small white line meant to separate plain-text labels - redundant now
       that each active step has its own chip background, and its absolute positioning assumed the
       old fixed-width/overlapping layout this rule replaces. */
    .tdp-step-clickable .slider-step-divider {
        display: none;
    }
    .tdp-step-clickable .filter-step-value-title-txt {
        display: block;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin-left: 0;
        margin-top: 6px;
        border-radius: 7px;
        white-space: nowrap;
    }
    /* 2026-08-07 (operator: "Very Good is too tight, and also Clarity"). Measured against each
       row's own real box width so neither clips: dense (8-step) rows fit "VVS1" with 3px of
       horizontal padding and ~3px of slack to spare; roomy (4-step) rows fit "Very Good" with 6px
       of padding and ~4px slack. */
    .tdp-step-row-dense .filter-step-value-title-txt {
        padding: 4px 3px;
    }
    .tdp-step-row-roomy .filter-step-value-title-txt {
        padding: 4px 6px;
    }
    .tdp-step-clickable:not(.active) .filter-step-value-title-txt {
        color: #8b93a3;
        background: transparent;
    }
    .tdp-step-clickable.active .filter-step-value-title-txt {
        background: #e7ecf4;
        color: #1b3252;
        font-weight: 700;
    }
    .tdp-step-clickable:active .filter-step-value-title-txt {
        transform: scale(.92);
    }
    .tdp-step-clickable:focus-visible {
        outline: 2px solid #264265;
        outline-offset: 2px;
        border-radius: 7px;
    }
}
div#color-range {
    margin-top: 23px;
}
.flex.justify-between.px-1.mt-2.clarity-range-step-values {}

.clarity-range-step-values .slider-step-divider {
    /* background-color: white; */
    /* top: -23px; */
    /* z-index: 7; */
}

.clarity-range-step-values {
    z-index: 3;
    position: relative;
}
.carat-filter-structure .slider-step-divider {
    display: none;
}
.type-filter-button.diamond-type-active {
    background-color: #264264;
    color: white;
}

.diamond-type-active svg path {
    fill: white;
}

.type-filter-button {
    background-color: #f3f4f6;
    border: 1px solid #D3D3D3;
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.diamond-filter-grid.gap-8 {
    gap: 15px 40px;
}
.diamond-filter-structure {
    color: #264264;
}


/* Score → colour (2026-07-30): green reserved for 5 Best/Perfect only; 4 Great Deal = blue;
   3 Good Price = grey-teal; 2 Fair = neutral grey; 1 Above Market/Overpriced = amber. */
.diamond-priceTag-label.diamond-priceTag-label-5 {
    background-color: #d6ffe2;
    color: #0b7a43;
    font-weight: 900;
}
.diamond-priceTag-label.diamond-priceTag-label-4 {
    background-color: #e8f0fe;
    color: #1d4ed8;
    font-weight: 800;
}
.diamond-priceTag-label.diamond-priceTag-label-3 {
    background-color: #eaf2fd;
    color: #4a7fc9;
    font-weight: 700;
}
.diamond-priceTag-label.diamond-priceTag-label-2 {
    background-color: #eef1f5;
    color: #5b6577;
}
.diamond-priceTag-label.diamond-priceTag-label-1 {
    background-color: #fdeede;
    color: #b5701a;
}
/* Best Overall (2026-08-05) - moved out of its own hero card into a regular result row; the badge
   is the only thing that marks it as distinct now. Navy (not green) so it never reads as a 5th
   price tier - it's a different axis (overall pick vs. price-only value) reusing the same navy
   already established for this exact concept elsewhere (next-step.php's Best Overall badge). */
.diamond-priceTag-label.diamond-priceTag-label-overall {
    background-color: #264265;
    color: #fff;
    font-weight: 800;
}
.diamond-priceTag-label {
    background-color: #edf0f3;
    color: rgb(39 66 100);
}
.diamond-results-structure table tbody[data-type="tableBody"] {
    text-transform:capitalize;   
}


.diamond-results-structure table td[data-type="diamondImage"]{
    /* max-width: 80px; */
    /* width: 12%; */
}
.diamond-results-structure table td[data-type="diamondImage"] img{
    border-radius:4px;
    max-height: 70px;
    height: unset;
    /* max-height: 100%; */
    min-width: 70px;
}
.diamond-results-structure table td[data-type="link"] a {
    background-color: #eff6ff;
    color: #2560eb;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-radius: 4px;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    font-weight: 400;
    width: 80px;
    box-sizing: border-box;
}


.diamond-results-structure table td[data-type="link"] a:hover {
    color: #2560eb;
    background-color: #e1edfc;
}
.diamond-results-structure table tbody tr {
    height: 79px;
    transition: all .3s ease;
    border-radius: 4px;
}
.loadingIcon {
    width: 60px;
    /* margin: 0 auto; */
    position: relative;
    /* top: -15px; */
    animation: starIconPulseScale .5s ease-in-out infinite;
    transform-origin: center;
}

.loadingWrapper {margin: 0 auto;padding-top: 50px;}

.loadingTitle {
    font-size: 50px;
    /* flex: 1; */
    color: #264264;
    font-weight: 200;
    display: none;
}
.loadingTitleStructure {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    max-width: 300px;
    margin: 0 auto;
    justify-content: center;
}

@keyframes starIconPulseScale {
   0% {
    transform: scale(1) rotate(0deg);
  }
  20% {
    transform: scale(1.1) rotate(0deg);
  }
  
  53.33% {
    transform: scale(1.1) rotate(90deg);
  }
  
  80% {
    transform: scale(1) rotate(90deg);
  }
  100% {
    transform: scale(1) rotate(90deg);
  }
}
.loadingSubTitle {
    font-size: 26px;
    font-weight: 200;
    margin-left: 10px;
    color: #254264;
    font-weight: 400;
    display: block;
    margin-top: 18px;
    text-transform: uppercase;
    display: none;
}

.loadingStructure {
    max-width: 500px;
    min-height: 500px;
    margin: 0 auto;
}
.diamond-results-structure .row-td-wrapper tbody tr:hover {background-color: #eff6ff57;}
.diamond-report-structure {
    display: flex;
    min-height: 500px;
    gap: 20px;
}

.diamond-report-sidebar {
    /* width: 500px; */
}
div#diamond-results {}

div#diamond-results {
    width: 100%;
    /* display: none; */
    /* max-width: 500px; */
}

.diamond-report-sidebar-wrapper {
    /* border: 1px solid #e5e7eb; */
    height: 100%;
    border-radius: 4px;
    background-color: white;
    width: 320px;
    position: relative;
}
.diamond-priceGapContent-label {
    font-size: 11px;
    position: absolute;
    margin-top: 6px;
    font-weight: 400;
    color: #1b6f34;
    margin-left: -6px;
}
.view-diamond-button-icon svg {
    height: unset;
    width: 20px;
}

.view-diamond-button-icon svg path {
    fill: #2560eb;
}

.view-diamond-button-icon {
    position: relative;
    top: 1px;
}
.main-tool-analysis-results-graph-change-value-title, .main-tool-analysis-results-price-range {
    font-size: 31px;
    font-weight: 700;
}


tr.diamond-item-result[data-price-tag="5"] td[data-type="link"] a {
    background-color: #2e7d32;
    color: white;
}

 .diamond-card[data-price-tag="5"] .view-diamond-button-structure svg path {
    /* fill: white; */
}
tr.diamond-item-result[data-price-tag="5"] td[data-type="link"] a svg path{
    fill: white;
}
/* 2026-08-02: the 5-star icon column these rules tinted is removed (section 6 - it was a 5th
   re-encoding of the same underFairPct value already shown by the priceTag badge). */


.diamond-results-table {
  border-collapse: separate;
  border-spacing: 0px; /* adds spacing between rows */
  width: 100%;
   /* removed vertical gap */
}

.diamond-results-table tr .row-wrapper {
  border-radius: 4px;
}
/* 2026-08-02 (Search redesign, section 6): removed the full-row green tint that used to apply to
   EVERY tier-5 row ("Perfect Deal" is a whole tier, not one card) - "no full-card color styling
   unless genuinely special" is the rule now; the single genuinely-special stones (Best Deal, Best
   Overall) already get their own hero treatment above the list, so regular rows stay neutral white
   and the priceTag badge alone carries the tier color. */


.diamond-results-structure .row-th-wrapper  table tbody tr {
    height: 30px;
}

.diamond-results-table tr .row-th-wrapper {
    border: 1px solid #ececec;
    background-color: #fcfcfc;
}
tr.diamond-item-result[data-price-tag="5"] .row-wrapper {
    margin-top: 2px;
}
.row-wrapper th,.row-wrapper td {
    width: 10%;
    text-align: center;
    max-width: 75px;
}
/* 2026-08-02 (Search redesign, section 5): Shape/Carat/Color/Clarity merged into one "Diamond"
   column and the old 5 value-signal columns merged into one "Price & Value" column - both need
   real width and left-aligned, multi-line text, not the legacy 9-column 10%/75px/centered layout. */
.row-wrapper th[data-type="diamondSpec"], .row-wrapper td[data-type="diamondSpec"],
.row-wrapper th[data-type="priceValue"], .row-wrapper td[data-type="priceValue"] {
    width: auto;
    max-width: none;
    text-align: left;
}

.tdp-row-spec-main {
    font-size: 14px;
    font-weight: 700;
    color: #16233b;
}
.tdp-row-spec-sub {
    font-size: 12.5px;
    color: #7a8699;
    margin-top: 2px;
}
.tdp-row-price {
    font-size: 15px;
    font-weight: 700;
    color: #16233b;
}
.tdp-row-save {
    font-size: 12.5px;
    color: #0b7a43;
    font-weight: 600;
    margin: 2px 0 6px;
}
*, ::after, ::before {
    box-sizing: content-box;
}
.diamond-results-table { display: table; }
.diamond-results-mobile { display: none; }

@media (max-width: 650px) {
    .main-tool-analysis-results-price-wrapper {
        display: none;
    }
    
    .main-tool-analysis-results-price-wrapper.main-tool-analysis-results-price-value-structure {
        display: block;
    }
    
    .poweredBy-Structure {
        display: none;
    }
    .main-tool-results-table-line {
        display: none!important;
    }
    .diamond-filter-structure {
        width: 100%;
        margin-bottom: 0px;
    }
    
    .search-diamonds-main-tool-filters {
        box-sizing: border-box;
        overflow: hidden;
    }
    
    div#shapes-container {
        box-sizing: border-box;
        display: grid;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 3px;
        flex-wrap: wrap;
        padding: 20px 0;
    }
    .shape-btn:nth-child(8){
        display:none;
        }
    
    
    .diamond-report-structure {
        flex-direction: column;
        gap: 0px;
    }
    .diamond-results-table { display: none; }
    .diamond-results-mobile { display: block; }
    
    .diamond-card {
        background: white;
        border-radius: 12px;
        /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
        margin: 8px 0;
        overflow: hidden;
        text-transform: capitalize;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0px;
        height: 140px;
        background-color: #fefeff;
        border: 1px solid #ececec;
    }
    
    .diamond-card-image {
        height: 100%;
        /* background: #f8f9fa; */
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 20px;
    }
    
    .diamond-card-image img {
        max-width: 120px;
        object-fit: contain;
        border-radius: 4px;
    }
    
    .diamond-card-content {
        padding: 16px;
        width: 100%;
        /* height: 143px; */
    }
    
    .diamond-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
    }
    
    .diamond-card-shape {
        font-weight: 600;
        font-size: 1.1em;
        text-transform: capitalize;
        font-weight: 400;
    }
    
    .diamond-price-tag {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.9em;
        background: #f0f0f0;
        text-transform: capitalize;
    }
    
    .diamond-price-tag.best-deal {
        background: #e8f5e9;
        color: #2e7d32;
    }
    
    .diamond-card-details {
        margin: 0px 0;
    }
    .diamond-card-details .detail-item .label{
        font-weight:700;
    }
    .detail-item {
        display: flex;
        justify-content: start;
        margin: 0px 0;
        font-weight: 600;
        gap: 10px;
    }
    
    .diamond-card-price {
        text-align: center;
        margin: 16px 0;
    }
    
    .price {
        /* font-size: 1.4em; */
        font-weight: 700;
        font-size: 27px;
    }
    
    .price-gap {
        color: #2e7d32;
        font-size: 11px;
        position: absolute;
        width: 100px;
        right: 12px;
        margin-top: -3px;
        display: none;
    }
    
    .view-diamond-button {
        display: block;
        text-align: center;
        padding: 7px;
        background: #1a73e8;
        color: white;
        border-radius: 6px;
        text-decoration: none;
        margin-top: 12px;
        display: flex;
        width: 80px;
        align-items: center;
        justify-content: center;
        float: right;
        background-color: #eff6ff;
        color: #2560eb;
        width: 100%;
        box-sizing: border-box;
    }
    .diamond-priceTag-label {
        font-size: 15px;
        padding: 3px 8px 3px 10px;
    }
    .diamond-priceTag-label.diamond-priceTag-label-4{
            background-color: #e8f0fe;
            color: #1d4ed8;
            font-weight: 500;
    }
    .diamond-report-sidebar-wrapper {
        width: 100%;
    }
}



.main-tool-analysis-results-graph-change-value-titleNum {
    font-weight: 500;
    background-color: #ffffff;
    color: rgb(37, 66, 100);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 700;
    padding: 2px 10px 2px 10px;
    /* position: absolute; */
    /* top: 0px; */
    /* background-color: #e5ecfd; */
    color: #0362ac;
    font-size: 15px;
    padding: 0px 4px 0px 4px;
    border-radius: 2px;
    /* border: 1px solid #0362ac; */
    font-weight: 700;
    padding: 0px 10px 0px 10px;
    /* border: 1px solid #f2f2f2; */
    border-radius: 0px;
    height: 22px;
    border-right: unset;
}

span.main-tool-analysis-results-graph-change-icon svg {
    width: 15px;
    position: relative;
    top: 5px;
    display: none;
}
.main-tool-analysis-results-price-title-structure {
    border-bottom: unset;
    margin-bottom: 0px;
    /* position: relative; */
}

.main-tool-analysis-results-graph-change-structure {
    margin-top: 20px;
    padding-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* display: none; */
    position: absolute;
    top: -12px;
    right: 2px;
}

.main-tool-analysis-results-graph-change-value {
    position: relative;
    right: -1px;
}

.main-tool-analysis-results-graph-change-title {
    font-weight: 400;
    font-size: 15px;
    padding-bottom: 0px;
    color: #6f7684;
}

.main-tool-analysis-results-price-title {
    font-size: 15px;
    font-weight: 600;
    /* text-align: center; */
    display: none;
}
.poweredBy-wrapper {
    display: flex;
    width: 100%;
    gap: 6px;
    justify-content: center;
    /* opacity: 0.7; */
}

.poweredBy-logo {
    width: 167px;
    opacity: 0.7;
}

.poweredBy-title {font-weight: 500;color: #677b92;}
.main-tool-analysis-results-params-structure {
    display: block;
    font-size: 15px;
    font-weight: 400;
    margin-top: 3px;
    color: #6f7684;
    margin-top: 12px;
}

.main-tool-analysis-results-params-type {
    display: inline-block;
    background-color: #d6ffe2;
    color: #1b6f34;
    font-size: 12px;
    padding: 0px 4px 0px 4px;
    border-radius: 2px;
    border: 1px solid rgba(22,163,74,.2);
    font-weight: 600;
    margin-top: 2px;
}

.main-tool-analysis-results-sidebar-rating-value {
    font-weight: 700;
    font-size: 35px;
    color: #264264;
}
.main-tool-results-side-bar-title {
    text-align: left;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
}
span.main-tool-analysis-results-params-label {
    display: inline-block;
    background-color: #fcfcfc;
    color: #6b7280;
    font-size: 12px;
    padding: 0px 4px 0px 4px;
    border-radius: 2px;
    border: 1px solid #6b72803b;
    font-weight: 600;
    margin-top: 2px;
    text-transform: capitalize;
}
.main-tool-analysis-results-params-labels {
    margin-bottom: 1px;
}

.main-tool-analysis-results-graph-structure {
    border-bottom: unset;
    padding-bottom: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    padding: 13px;
    border: 1px solid #f5f5f5;
    box-shadow: 0 4px 5px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}

.main-tool-analysis-results-price-wrapper {
    /* display: none; */
    border-bottom: unset;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-top: 20px;
    border-bottom: unset;
    padding-bottom: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    padding: 13px;
    border: 1px solid #f5f5f5;
    box-shadow: 0 4px 5px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
    margin: 20px;
    position: relative;
    overflow: hidden;
    padding-top: 50px;
}
.poweredBy-Structure {
    margin-top: 15px;
}

.main-tool-analysis-results-sidebar-rating-box {
    opacity: 0.5;
    /* font-weight: 600; */
    filter: blur(1px);
}

.main-tool-analysis-results-sidebar-rating-box-5 {
    opacity: 1;
    filter: blur(0px);
}
.main-tool-analysis-results-sidebar-row-title {
    /* background-color: #fcfcfc; */
    color: #264264;
    /* padding: 20px; */
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    /* border-top: 1px solid #ececec; */
    padding-top: 7px;
    /* display: none; */
    background: #fcfcfc;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    padding: 7px 0px 7px 20px;
    border-bottom: 1px solid #dbdcdf;
    font-weight: 700;
    box-sizing: border-box;
}
.main-tool-analysis-results-graph-change-structure .main-tool-analysis-results-graph-change-title {
    display: none;
}

.main-tool-analysis-results-graph-change-canvas {
    position: relative;
}
.main-tool-analysis-results-price-wrapper.main-tool-analysis-results-graph-structure {
    margin: 0px 20px 0px 20px;
    /* padding: 13px; */
    position: relative;
}

.main-tool-analysis-results-graph-subtitle {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    margin-top: 8px;
}
.main-tool-analysis-results-sidebar-rating-Description {
    font-size: 12px;
    /* color: red; */
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    line-height: 19px;
}
.main-tool-analysis-results-price-wrapper.main-tool-analysis-results-price-value-structure {
    box-shadow: unset;
    border: unset;
    margin: unset;
    padding: 18px 20px 25px 20px;
}
/* ── Batch 1 (2026-07-16): honest search 'confidence column' ─────────────────
   Remove the fabricated/broken elements: the Real-Time Price Change chart never
   had honest data (buildDiamondAnalysis was disarmed → blank canvas), and
   "Time to Buy 5/5 · Best time to buy" was manufactured urgency shown on every
   search. The fair-market price (cohort median) is now the honest headline. */
/* graph-structure + subtitle now carry the REAL advisor sparkline (1.7.17) - no longer hidden.
   rating-structure was the fabricated "Time to Buy 5/5"; that div is gone (renamed tdp-adv-ttb). */
.main-tool-analysis-results-rating-structure { display: none !important; }
.fair-market-value { font-weight: 800; }
.fair-market-listings-note { font-size: 13px; color: #64748b; margin-top: 6px; line-height: 1.4; }

/* ── Batch 2 (2026-07-16): value-preset chips above the search results ──────── */
.tdp-value-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }
.tdp-value-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.tdp-value-chip:hover { border-color: #cbd5e1; }
.tdp-value-chip span { font-size: 12px; font-weight: 800; background: #f1f5f9; color: #64748b; border-radius: 999px; padding: 1px 7px; }
.tdp-value-chip.is-on { background: #264265; border-color: #264265; color: #fff; }
.tdp-value-chip.is-on span { background: rgba(255,255,255,.22); color: #fff; }
.tdp-value-chip[data-tier="best"].is-on { background: #00a651; border-color: #00a651; }

/* ── Batch 3 (2026-07-16): mobile result cards redesigned to drive clicks ─────
   The old card had a fixed 140px height + width:100% content that overflowed
   (price and "View" were pushed off-screen), and the "% under fair" value chip
   was display:none. This rebuilds it as a clean design-line card: photo, price,
   the green value chip, specs, and a clear CTA. */
@media (max-width: 650px) {
  .diamond-results-mobile { display: flex; flex-direction: column; gap: 12px; padding: 0; }
  .diamond-card {
    display: flex; align-items: stretch; gap: 0; height: auto; margin: 0; overflow: hidden;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; text-transform: none;
    transition: box-shadow .18s ease, border-color .18s ease;
  }
  .diamond-card[data-value-tier="best"]   { border-color: #00a651; box-shadow: 0 0 0 1px #00a651; }
  .diamond-card[data-value-tier="lowest"] { border-color: #e2e8f0; box-shadow: none; }
  .diamond-card-image { flex: 0 0 112px; padding: 0; background: #f8fafc; display: flex; align-items: center; justify-content: center; }
  .diamond-card-image img { width: 112px; height: 112px; max-width: none; object-fit: cover; border-radius: 0; }
  .diamond-card-content { flex: 1; min-width: 0; width: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
  .diamond-card-header { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 0; }
  .diamond-card-tag { order: -1; }
  .diamond-card-tag .diamond-priceTag-label { font-size: 11px; font-weight: 800; padding: 2px 9px; }
  .diamond-card .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 22px; font-weight: 800; color: #0f172a; }
  .diamond-card .price-gap {
    display: inline-block; position: static; width: auto; right: auto; margin: 0;
    font-size: 12px; font-weight: 800; color: #00a651; background: #e6f7ee; border-radius: 999px; padding: 2px 9px;
  }
  .diamond-card[data-value-tier="lowest"] .price-gap { color: #64748b; background: #f1f5f9; }
  .diamond-card-details .detail-item { display: flex; gap: 12px; font-size: 13px; color: #475569; font-weight: 600; flex-wrap: wrap; margin: 0; }
  .diamond-card-details .detail-item .value { text-transform: capitalize; }
  .view-diamond-button {
    margin-top: 8px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; background: #264265; color: #fff; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none;
  }
  .view-diamond-button .view-diamond-button-icon svg path { fill: #fff !important; }
  /* value chips sit comfortably above the mobile list */
  .tdp-value-chips { padding: 4px 0 14px; }
}

/* ── Batch 3: "Why this verdict?" explainability ─────────────────────────────
   Reveals the actual reasoning - fair price for the exact spec (median + sample
   size + quality band), the stone's price, and the resulting verdict. */
.tdp-why-btn { align-self: flex-start; background: none; border: 0; padding: 2px 0; color: #264265; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tdp-why-btn .tdp-why-caret { font-size: 10px; transition: transform .15s ease; }
.tdp-why-btn.is-open .tdp-why-caret { transform: rotate(180deg); }
.tdp-why { margin: 2px 0; padding: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 12.5px; line-height: 1.6; color: #334155; }
.tdp-why b { color: #0f172a; font-weight: 800; }
/* the reused calc panel lives inside the expand - keep it flush and let its own cards breathe */
.tdp-why .calc-v2-wrapper { background: transparent; }
.tdp-why .calc-v2-why-wrap, .tdp-why .calc-v2-use-cases { margin: 0; }
.tdp-why .calc-v2-why-title { font-size: 17px; }
.tdp-why .calc-v2-rail-card { margin: 0; }
.tdp-vbar-wrap { margin: 2px 0; }

/* "What affects diamond price?" trigger + modal (1.7.17) */
.tdp-affects-link {display: inline-flex;align-items: center;gap: 4px;margin-top: 10px;background: none;border: 0;padding: 0;cursor: pointer;font: inherit;font-size: 12px;font-weight: 500;color: #64748b;opacity: 0.5;}
.tdp-affects-link:hover {color: #264265;opacity: 1;}
.tdp-affects-overlay { position: fixed; inset: 0; z-index: 12000; background: rgba(16,23,43,.5); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.tdp-affects-overlay[hidden] { display: none; }
.tdp-affects-modal { position: relative; width: 100%; max-width: 860px; background: #fff; border-radius: 16px; box-shadow: 0 24px 80px rgba(16,23,43,.35); padding: 8px; }
.tdp-affects-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #eef2f7; color: #16233b; font-size: 22px; line-height: 1; cursor: pointer; }
.tdp-affects-close:hover { background: #e0e7f1; }
.tdp-affects-modal .calc-v2-seo-card { margin: 0; }
/* per-section action buttons in the modal - smart-move cards, bottom-aligned across the factor cards */
.tdp-affects-modal .calc-v2-factor-card { display: flex; flex-direction: column; }
.tdp-affects-action {margin-top: auto;padding-top: 14px;padding: 10px 20px 0px 20px;}
.tdp-affects-action .tdp-adv-move { width: 100%; margin: 0; text-decoration: none; }
.tdp-affects-action .tdp-adv-move .tdp-adv-move-v { text-decoration: none; color: #254264; }

/* Best-deal hero at top of results (1.7.17) */
.tdp-hero-wrap { margin: 0 0 16px; }
.tdp-hero-wrap .calc-v2-bestdeal-wow { margin: 0; }
/* the calc hides this line until its JS fills it; we render it statically, so show it */
.tdp-hero-wrap .calc-v2-bestdeal-wow-line { display: block; margin-top: 8px; }
/* the calc keeps the image at opacity:0 until match.js adds .is-loaded - we render statically, so show it */
.tdp-hero-wrap .calc-v2-bestdeal-wow-img.is-loaded { opacity: 1; }
@media (max-width: 760px){ .tdp-why .calc-v2-why-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .tdp-why .calc-v2-why-grid, .tdp-why .calc-v2-use-grid { grid-template-columns: 1fr; } }

/* Expanded per-stone analysis (1.7.17) - comparison header + narrative + factor grid */
.tdp-whyx { display: flex; flex-direction: column; gap: 16px; }
/* two-column top: left = numbers + market analysis, right = distribution + range + what it means */
.tdp-whyx-cols {display: flex;grid-template-columns: 1fr 1fr;gap: 16px 22px;align-items: start;flex-direction: column;}
.tdp-whyx-col {display: flex;flex-direction: column;gap: 14px;min-width: 0;width: 100%;}
.tdp-whyx-nums { display: flex; flex-direction: column; gap: 8px; }
.tdp-whyx-num { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #eef2f7; }
.tdp-whyx-num:last-child { border-bottom: 0; padding-bottom: 0; }
.tdp-whyx-num-l { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa3b2; }
.tdp-whyx-num-v { font-size: 22px; font-weight: 800; color: #16233b; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px; }
.tdp-whyx-num-v.is-fair { color: #5b6577; }
.tdp-whyx-sub { display: flex; flex-direction: column; gap: 8px; }
.tdp-whyx-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa3b2; }
/* Price distribution: market range track with Fair + This-stone pins */
.tdp-dist { padding: 2px 0; }
.tdp-dist-track { position: relative; height: 9px; border-radius: 6px; margin: 24px 6px 6px; background: linear-gradient(90deg, #d6f2e2 0%, #eaf3e0 45%, #fdf0d8 70%, #fbe3de 100%); }
.tdp-dist-pin { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
.tdp-dist-pin i { display: block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(20,27,43,.25); }
.tdp-dist-fair i { background: #5b6577; }
.tdp-dist-stone i { background: #0f8a4f; }
.tdp-dist-pin b {position: absolute;left: 50%;transform: translateX(-50%);font-size: 10px;font-weight: 800;white-space: nowrap;}
.tdp-dist-fair b { bottom: 15px; color: #5b6577; }
.tdp-dist-stone b {top: -15px;color: #0f8a4f;/* display: none; */}
/* Legend below the bar (operator 2026-07-27) - replaces the on-pin "Fair"/"This stone" labels. */
.tdp-dist-legend { display: flex; justify-content: center; gap: 18px; margin-top: 9px; }
.tdp-dist-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #5b6577; }
.tdp-dist-lg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.tdp-dist-lg--stone i { background: #0f8a4f; }
.tdp-dist-lg--fair i { background: #5b6577; }
.tdp-dist-axis { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 600; color: #a7b0c0; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .tdp-whyx-cols { grid-template-columns: 1fr; } }
.tdp-whyx-cmp { display: flex; align-items: center; gap: 12px; }
.tdp-whyx-cmp-c { display: flex; flex-direction: column; gap: 1px; }
.tdp-whyx-cmp-l { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa3b2; }
.tdp-whyx-cmp-v { font-size: 19px; font-weight: 800; color: #16233b; font-variant-numeric: tabular-nums; }
.tdp-whyx-cmp-v.is-fair { color: #5b6577; }
.tdp-whyx-cmp-d { margin: 0 2px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.tdp-whyx-cmp-d.is-good { background: #e6f6ee; color: #0f8a4f; }
.tdp-whyx-cmp-d.is-fair { background: #eef2f7; color: #5b6577; }
.tdp-whyx-cmp-d.is-over { background: #fdecec; color: #c0392b; }
.tdp-whyx-cmp-d.is-sub  { background: #fff4e0; color: #b5701a; }
.tdp-whyx-narr { margin: 0; font-size: 12.5px; line-height: 1.6; color: #334155; }
.tdp-whyx-narr b { color: #0f172a; font-weight: 800; }

/* Phase 2 (2026-07-30) - per-diamond Verdict Block (reuses .tdp-verdict-label/-head/-sub from
   Phase 1's shared pattern) + the "why not 5/5" gap line + the distribution range/zone caption. */
.tdp-whyx-verdict{padding-bottom:2px}
.tdp-whyx-gap{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:#5b6577}
.tdp-whyx-gap:empty{display:none}
.tdp-dist-range{margin-top:8px;font-size:11.5px;color:#8a93a5;text-align:center}
.tdp-dist-range b{color:#16233b;font-weight:700}

/* Per-card reason line (Phase 2) - 5/4/3 tiers only, tdpCardReason returns '' otherwise so this
   never renders empty. */
.dcx-reason{font-size:11.5px;color:#5b6577;margin-top:4px;line-height:1.4}
.tdp-fac-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa3b2; margin-bottom: 2px; }
.tdp-fac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.tdp-fac { display: flex; gap: 9px; }
.tdp-fac-ic { flex: none; width: 22px; height: 22px; border-radius: 7px; background: #eef3fb; color: #254264; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.tdp-fac-b { min-width: 0; }
.tdp-fac-h { display: flex; align-items: baseline; gap: 6px; }
.tdp-fac-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9aa3b2; }
.tdp-fac-v { font-size: 13px; font-weight: 800; color: #16233b; }
.tdp-fac-n { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; color: #6b7585; }
@media (max-width: 560px) { .tdp-fac-grid { grid-template-columns: 1fr; } }

/* ── Batch 3: mobile filter sheet + sticky match-count bar ───────────────────
   On mobile the filters collapse behind a sticky "Filters · N match" bar so the
   results are the primary surface; opening them shows a "Show N diamonds" apply
   button that closes the sheet and jumps to results (no silent filter changes). */
.tdp-filter-bar, .tdp-sheet-backdrop, .tdp-sheet-footer { display: none; }
@media (max-width: 650px) {
  .search-diamonds-main-tool-filters {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 10000;
    /* 2026-08-05 (real bug, operator screenshot: the Natural/Lab Grown toggle and the X close
       button were cut off above the top of the screen). Two causes, both fixed here:
       (1) `88vh` on iOS Safari resolves against the LARGE viewport (as if the URL bar were
       collapsed), so a bottom-anchored sheet that tall genuinely extends above the visible
       area. `dvh` is the dynamic viewport unit that tracks the *currently* visible height;
       the vh line stays first as the fallback for browsers without dvh.
       (2) this element has a `transform`, which makes IT (not the viewport) the containing
       block for any `position: fixed` descendant - so the close button's `top: 12px` was
       measured from the sheet's own off-screen top edge, which is why it vanished too. */
    max-height: 88vh;
    max-height: 85dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 !important;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.22);
    transform: translateY(110%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    padding-bottom: 0px;
    /* padding: 16px 24px 0px 9px; */
  }
  .search-diamonds-main-tool-filters.tdp-sheet-open { transform: translateY(0); }
  .tdp-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.45); opacity: 0; visibility: hidden; transition: opacity .25s ease; }
  .tdp-sheet-backdrop.is-open { opacity: 1; visibility: visible; }
  .tdp-filter-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
  /* 2026-08-03: count removed (duplicated the Search Summary card's count) - this bar is now just
     the "Filters" button, so it's centered/full-width instead of the old margin-left:auto
     right-alignment (which assumed a count sibling to its left). */
  .tdp-filter-bar--btn-only { justify-content: center; }
  .tdp-filter-bar--btn-only .tdp-filter-bar__btn { flex: 1 1 auto; justify-content: center; margin-left: 0; }
  .tdp-filter-bar__btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: #264265; color: #fff; border: 0; border-radius: 999px; padding: 11px 22px; font-size: 15px; font-weight: 700; cursor: pointer; }
  /* first-load nudge: pulse the Filters button + a "Tap to refine" chip pointing at it */
  .tdp-filter-bar__chip { position: absolute; right: 18px; bottom: calc(100% + 10px); background: #b98a2e; color: #fff; font-size: 12px; font-weight: 800; padding: 7px 12px; border-radius: 9px; white-space: nowrap; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .3s ease, transform .3s ease; pointer-events: none; box-shadow: 0 6px 18px rgba(185,138,46,.4); }
  .tdp-filter-bar__chip::after { content: ''; position: absolute; top: 100%; right: 28px; border: 6px solid transparent; border-top-color: #b98a2e; }
  .tdp-filter-bar.tdp-bar-hint .tdp-filter-bar__chip { opacity: 1; transform: translateY(0) scale(1); }
  .tdp-filter-bar.tdp-bar-hint .tdp-filter-bar__btn { animation: tdpBtnPulse 1.1s ease .3s 2; }
  @keyframes tdpBtnPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(185,138,46,0); } 50% { box-shadow: 0 0 0 6px rgba(185,138,46,.3); } }
  @media (prefers-reduced-motion: reduce) { .tdp-filter-bar.tdp-bar-hint .tdp-filter-bar__btn { animation: none; } }
  .tdp-sheet-footer { display: block; position: sticky; bottom: 0; background: #fff; padding: 12px 16px; margin: 12px -0 0; border-top: 1px solid #e2e8f0; }
  .tdp-sheet-footer button {width: 100%;background: #00a651;color: #fff;border: 0;border-radius: 10px;padding: 14px;font-size: 16px;font-weight: 800;cursor: pointer;box-sizing: border-box;}
  body.tdp-sheet-lock { overflow: hidden; }
  /* the results/chips get bottom room so the fixed bar never covers the last card */
  .diamond-report-structure {padding-bottom: 76px;gap: 9px;}
}

/* ── Batch 3: desktop "Why?" popover (explainability parity with mobile) ────── */
.tdp-why-host { position: relative; margin-top: 5px; }
.tdp-why-mini { background: none; border: 0; color: #264265; font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.tdp-why-mini:hover { color: #00a651; }
.tdp-why-pop {
  position: absolute; z-index: 60; top: 100%; left: 0; width: 280px; margin-top: 6px;
  padding: 11px 13px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); font-size: 12.5px; line-height: 1.6; color: #334155;
  text-align: left; white-space: normal; font-weight: 400;
}
.tdp-why-pop b { color: #0f172a; font-weight: 800; }
@media (max-width: 650px) { .tdp-why-host { display: none; } }  /* mobile uses the in-card panel */

/* fix: the explanation must read as a sentence, not Title Case (table sets capitalize) */
.tdp-why-pop, .tdp-why { text-transform: none; }

/* Empty-state recovery (idea #2): turn a zero-result dead end into a way back into the funnel */
.tdp-empty{ text-transform:none; text-align:center; max-width:540px; margin:24px auto; padding:32px 20px; }
.tdp-empty__icon{ margin-bottom:12px; opacity:.9; }
.tdp-empty__icon svg{ width:32px; height:32px; }
.tdp-empty__title{ font-size:20px; font-weight:700; color:#1f2a44; margin:0 0 8px; }
.tdp-empty__why{ font-size:15px; line-height:1.55; color:#5b6577; margin:0 0 20px; }
.tdp-empty__why b{ color:#1f2a44; font-weight:600; }
.tdp-empty__actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.tdp-empty__relax{ appearance:none; -webkit-appearance:none; cursor:pointer; border:1px solid #cfd6e4; background:#fff; color:#254264; font-size:14px; font-weight:600; padding:10px 16px; border-radius:999px; line-height:1.2; transition:background .15s,border-color .15s; }
.tdp-empty__relax:hover{ background:#f2f6fc; border-color:#254264; }
.tdp-empty__relax--all{ background:#254264; color:#fff; border-color:#254264; }
.tdp-empty__relax--all:hover{ background:#1b3050; border-color:#1b3050; }

/* ══ Batch 1 (1.7.17): decision-first diamond card ══ */
@media (max-width:650px){
  .diamond-card .dc-verdict{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
  .diamond-card .dc-score{font-size:11px;font-weight:700;color:#5b6577;white-space:nowrap}
  .diamond-card .dc-score b{color:#1f2a44}
  .diamond-card .dc-score-warn{color:#b03636}
  .diamond-card .dc-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:4px 0 2px}
  .diamond-card .dc-now{font-size:22px;font-weight:800;color:#1f2a44;letter-spacing:-.01em}
  .diamond-card .dc-was{font-size:13px;color:#8a93a5;text-decoration:line-through}
  .diamond-card .dc-save{font-size:11px;font-weight:800;color:#0f8a4f;background:#e6f6ec;padding:3px 7px;border-radius:7px}
  .diamond-card .dc-spec{font-size:12.5px;color:#5b6577;margin:1px 0 6px}
  .diamond-card .dc-trust{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 9px}
  .diamond-card .dc-trust span{font-size:10.5px;font-weight:600;color:#5b6577;background:#f2f6fc;border:1px solid #e2e9f3;border-radius:999px;padding:3px 7px}
}
/* desktop: surface the recommendation + make the whole row read as clickable (kills dead clicks) */
/* .dc-score-d / .dc-save-d removed 2026-08-02 - the "Score X/10" chip and "Save X%" chip they
   styled were dropped from the row template (section 6 - redundant with the priceTag badge and
   the new "X% below Fair Market Price" line, all three re-encoding the same underFairPct value). */
.diamond-item-result{cursor:pointer}
.diamond-item-result .row-td-wrapper{transition:box-shadow .12s,transform .12s}
.diamond-item-result:hover .row-td-wrapper{box-shadow:0 3px 14px rgba(37,66,100,.14);transform:translateY(-1px)}

/* ══ Batch 2 (1.7.17): results bar + instant sort + empty-search guard ══ */
.tdp-results-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding:2px 2px 0}
.tdp-results-count{font-size:14px;color:#5b6577}
.tdp-results-count b{color:#1f2a44;font-weight:800}
.tdp-sort-wrap{font-size:13px;color:#5b6577;display:flex;align-items:center;gap:6px}
.tdp-sort{font-size:13px;font-weight:700;color:#254264;background:#fff;border:1px solid #cfd6e4;border-radius:8px;padding:7px 28px 7px 11px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23254264' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:11px}
.tdp-sort:hover{border-color:#254264}
#tdp-apply-filters.is-empty{background:#e2e7ef;color:#8a93a5;cursor:not-allowed;box-shadow:none}

/* ══ Batch 3 (1.7.17): skeleton loading + "closest matches" ══ */
.tdp-skel-wrap{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.tdp-skel-side{display:flex;flex-direction:column;gap:14px;padding:6px 0}
.tdp-skel{display:grid;grid-template-columns:96px 1fr;gap:14px;background:#fff;border:1px solid #e2e9f3;border-radius:16px;padding:14px}
.tdp-skel__img{width:96px;height:96px;border-radius:12px}
.tdp-skel__b{min-width:0}
.sk-sh{background:linear-gradient(90deg,#eef2f8 25%,#dfe6f1 37%,#eef2f8 63%);background-size:400% 100%;animation:tdpshim 1.3s infinite;border-radius:7px}
@keyframes tdpshim{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk-sh{animation:none}}
.tdp-closest{margin-top:22px;text-transform:none}
.tdp-closest__h{font-size:15px;font-weight:800;color:#1f2a44;margin:0 0 12px;text-align:center}
.tdp-closest__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tdp-mini{display:block;background:#fff;border:1px solid #e2e9f3;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .12s,transform .12s}
.tdp-mini:hover{box-shadow:0 4px 16px rgba(37,66,100,.14);transform:translateY(-2px)}
.tdp-mini__img{width:100%;height:110px;object-fit:cover;background:#eef2f8;display:block}
.tdp-mini__b{padding:10px}
.tdp-mini__tag{display:inline-block;font-size:10.5px;font-weight:800;color:#0f8a4f;background:#e6f6ec;padding:3px 7px;border-radius:6px;margin-bottom:5px}
.tdp-mini__price{font-size:18px;font-weight:800;color:#1f2a44}
.tdp-mini__spec{font-size:11.5px;color:#5b6577;margin-top:2px}

/* ══ Batch 4 (1.7.17): desktop uses the decision-first card list, not the spec table ══
   Retires the 9-column spec table (and its now-redundant star column + sortable headers) on
   desktop. The card list is the single result surface at all widths; the whole card is one click
   target (kills the dead/rage clicks). The table stays in the DOM only as the hidden empty-state
   host; pagination + the results/chip bars are siblings and keep working. */
.diamond-results-table { display: none !important; }
.diamond-results-mobile { display: flex; flex-direction: column; gap: 14px; }
/* reflow the results container so pagination sits BELOW the cards (it is a sibling of the table) */
#diamond-results { display: flex; flex-direction: column; }
#diamond-results .tdp-results-bar { order: 0; }
#diamond-results .tdp-value-chips { order: 1; }
#diamond-results .diamond-results-mobile { order: 2; }
#diamond-results .main-tool-results-table-line { order: 3; margin-top: 6px; }

@media (min-width: 651px) {
  .diamond-results-mobile { gap: 14px; }
  .diamond-card {
    display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 16px; padding: 16px 18px; cursor: pointer; text-transform: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease;
  }
  .diamond-card:hover { box-shadow: 0 6px 22px rgba(37,66,100,.13); transform: translateY(-2px); border-color: #264265; }
  .diamond-card[data-value-tier="best"]   { border-color: #bfe6cd; }
  .diamond-card[data-value-tier="lowest"] { border-color: #e2e8f0; }
  .diamond-card-image { flex: none; }
  .diamond-card-image img { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; background: #f8fafc; display: block; }
  .diamond-card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
  .diamond-card-header { display: flex; flex-direction: column; gap: 6px; }
  .diamond-card .dc-verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .diamond-card .dc-pill { font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
  .diamond-card .dc-score { font-size: 12px; font-weight: 700; color: #5b6577; }
  .diamond-card .dc-score b { color: #1f2a44; }
  .diamond-card .dc-score-warn { color: #b03636; }
  .diamond-card .dc-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .diamond-card .dc-now { font-size: 26px; font-weight: 800; color: #1f2a44; letter-spacing: -.01em; }
  .diamond-card .dc-was { font-size: 15px; color: #8a93a5; text-decoration: line-through; }
  .diamond-card .dc-save { font-size: 12px; font-weight: 800; color: #0f8a4f; background: #e6f6ec; padding: 4px 8px; border-radius: 8px; }
  .diamond-card .dc-spec { font-size: 13.5px; color: #5b6577; }
  .diamond-card .dc-trust { display: flex; flex-wrap: wrap; gap: 6px; }
  .diamond-card .dc-trust span { font-size: 11px; font-weight: 600; color: #5b6577; background: #f2f6fc; border: 1px solid #e2e9f3; border-radius: 999px; padding: 4px 9px; }
  .diamond-card .tdp-why-btn { align-self: flex-start; }
  .diamond-card .view-diamond-button { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 7px; background: #264265; color: #fff; font-weight: 800; font-size: 14px; padding: 11px 22px; border-radius: 10px; text-decoration: none; }
  .diamond-card .view-diamond-button .view-diamond-button-icon svg path { fill: #fff !important; }
}


.diamond-results-mobile { display: flex; flex-direction: column; gap: 8px; }
.diamond-card {display: block;background: #fff;border: 1px solid #e7ecf3;border-radius: 12px;padding: 0;margin: 0;cursor: pointer;overflow: hidden;transition: box-shadow .13s ease, border-color .13s ease;}
.diamond-card:hover { box-shadow: 0 3px 14px rgba(37,66,100,.12); border-color: #c3d0e4; transform: none; }
.diamond-card[data-value-tier="best"]   { border-left: 3px solid #0f8a4f; box-shadow: none; }
.diamond-card[data-value-tier="lowest"] { border-left: 3px solid #e2e8f0; box-shadow: none; }
/* 2026-08-02: was a 5-column single row (img | price | spec | rate | cta) - price and the
   rating badge sat at opposite ends of the row with spec between them, reading as
   unrelated. Rate now sits in the same column as price, directly beneath it, so the two
   read as one unit; spec and the CTA each span both rows and stay vertically centered. */
.dcx {
  display: grid;
  grid-template-columns: 52px minmax(120px,1.8fr) minmax(150px,.2fr) auto;
  grid-template-areas:
    "img price spec cta"
    "img rate spec cta";
  align-items: center;
  gap: 6px 14px;
  padding: 9px 16px;
}
.dcx-img  { grid-area: img; }
.dcx-price { grid-area: price; align-self: end; }
.dcx-rate { grid-area: rate; align-self: start; }
.dcx-spec { grid-area: spec; }
.dcx-cta  { grid-area: cta; }
.dcx-img img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #f1f5fa; display: block; }
/* diamond images fade in smoothly once loaded (over the light placeholder) */
.dcx-img { background: #f1f5fa; border-radius: 8px; }
.tdp-imgfade { opacity: 0; transition: opacity .45s ease; }
.tdp-imgfade.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tdp-imgfade { transition: none; } }
.dcx-price {display: flex;align-items: baseline;gap: 6px;flex-wrap: wrap;min-width: 0;margin-top: 8px;}
.dcx-now { font-size: 19px; font-weight: 800; color: #16233b; letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; }
/* Jewelry price hierarchy (2026-08-04, second pass): the setting price is primary (it's what
   "View Ring" actually leads to and charges - showing the full total as the big number risked
   feeling like bait-and-switch once someone clicked through), labeled inline so it's never
   mistaken for the full cost; the full total moves to .dcx-jw-break below as the secondary line. */
.dcx-jw-setting-label { font-size: 12px; font-weight: 600; color: #8a93a5; }
/* Jewelry full-ring price breakdown (2026-08-03) - "$X" alone is a bare setting price with no
   context; this makes clear the total includes this search's own lowest diamond price. Now a
   block-level line inside .dcx-jw-info's own stack (2026-08-04), not an inline flex-wrap child. */
.dcx-jw-break { font-size: 11.5px; color: #8a93a5; font-weight: 600; }
.dcx-save {font-size: 11px;font-weight: 800;color: #0f8a4f;background: #e6f6ec;padding: 2px 6px;border-radius: 6px;/* background: transparent!important; */}
/* Discount chip follows the row's tier (operator 2026-07-30) - was hardcoded green on every
   row regardless of tier, undermining "green reserved for the best tier only" (.dcx-label-N). */
.diamond-card[data-price-tag="4"] .dcx-save { color: #1d4ed8; background: #e8f0fe; }
.diamond-card[data-price-tag="3"] .dcx-save {color: #4a7fc9;background: #eaf2fd;}
.dcx-was {font-size: 12px;color: #98a2b3;text-decoration: line-through;display: none;}
.dcx-spec { font-size: 14px; color: #16233b; font-weight: 600; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; text-transform: capitalize; }
.dcx-spec b { font-weight: 800; }
.dcx-spec .dcx-sub { font-size: 12.5px; color: #8a93a5; font-weight: 600; }
/* 2026-08-07 (operator: "make the diamond cards like the jewelry cards", mobile only). `.dcx-info`
   wraps .dcx-spec/.dcx-price/the new .dcx-save-line so the mobile media query can stack them into
   one column exactly like .dcx-jw-info does - `display:contents` here means it's invisible to
   layout everywhere else, so .dcx-spec/.dcx-price keep their own existing "spec"/"price" grid
   areas and desktop is completely unaffected. .dcx-save-line (the plain-language "X% below fair
   market price" line, styled via the shared .dcx-jw-break look) only appears once the mobile rule
   below turns it on - the existing .dcx-save/.dcx-was chip stays the only discount indicator
   everywhere else, unchanged. */
.dcx-info { display: contents; }
.dcx-save-line { display: none; }
/* Phase 2 (2026-07-30): switched to column direction so the new .dcx-reason line stacks below the
   rating button instead of beside it. Previously only ever held one child (the button), so this
   change has no effect on cards without a reason line (score < 3) - row vs. column is identical
   with a single flex item. */
.dcx-rate {display: flex;flex-direction: row;align-items: start;height: 100%;gap: 4px;/* justify-content: center; */}
.dcx-stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; color: #d8dee9; white-space: nowrap; }
.dcx-stars::before { content: "\2605\2605\2605\2605\2605"; }
.dcx-stars i { position: absolute; left: 0; top: 0; overflow: hidden; color: #f5b301; white-space: nowrap; }
.dcx-stars i::before { content: "\2605\2605\2605\2605\2605"; }
.dcx-score { font-size: 13px; font-weight: 800; color: #16233b; min-width: 16px; text-align: center; }
.dcx-score.is-warn { color: #d97706; }
.dcx-q { width: 19px; height: 19px; border-radius: 50%; border: 1px solid #c3d0e4; background: #fff; color: #5b6577; font-size: 11px; font-weight: 800; line-height: 1; padding: 0; cursor: pointer; flex: none; }
.dcx-q:hover { border-color: #254264; color: #254264; background: #f2f6fc; }
.dcx-cta {display: inline-flex;align-items: center;background: #254264;color: #fff;font-size: 13px;font-weight: 800;padding: 9px 15px;border-radius: 9px;text-decoration: none;white-space: nowrap;gap: 5px;}
.dcx-cta span { transition: transform .12s ease; }
.dcx-cta:hover { background: #1b3050; }
.diamond-card:hover .dcx-cta span { transform: translateX(2px); }
.diamond-card .tdp-why { margin: 0 16px 12px; text-transform: none; }

@media (max-width: 650px) {
  .dcx {
    grid-template-columns: 52px 1fr auto; grid-template-areas: "img price spec" "img rate cta";
    column-gap: 12px; row-gap: 3px; padding: 10px 14px;
  }
  .dcx-img { grid-area: img; align-self: center; }
  .dcx-price { grid-area: price; }
  .dcx-spec { grid-area: spec; justify-self: end; text-align: right; }
  .dcx-rate { grid-area: rate; justify-self: start; }
  .dcx-cta { grid-area: cta; justify-self: end; align-self: start; }
}

/* ══ Redesign v3 (1.7.17): 5-tier coloured verdict LABEL, clickable to open the analysis (no "?") ══
   Best Price 5 (green) · Best Deal 4 (blue + check) · Fair Price 3 (grey) · High Price 2 (orange) · Bad Price 1 (red) */
/* Phase 1 (2026-07-30): padding bumped uniformly (was 6px 11px) for a larger tap target - applied
   identically across every tier, so container height stays constant; hierarchy between tiers comes
   from font-weight + icon presence only, never from size, per operator direction. */
.dcx-label {display: inline-flex;align-items: center;gap: 5px;border: 0;cursor: pointer;font-family: inherit;font-size: 10px;font-weight: 800;padding: 5px 9px;border-radius: 999px;line-height: 1;white-space: nowrap;}
.dcx-label .dcx-label-n { opacity: .7; font-size: 11px; }
.dcx-label .dcx-cv { font-size: 13px; opacity: .9; margin-left: 1px; transition: transform .15s ease; }
.dcx-label.is-open .dcx-cv { transform: rotate(180deg); }
.dcx-label .dcx-check { width: 13px; height: 13px; }
.dcx-label:hover { filter: brightness(.96); }
.dcx-label:focus-visible { outline: 2px solid #254264; outline-offset: 2px; }
.dcx-label-5 { background: #e3f6ea; color: #0b7a43; font-weight: 900; letter-spacing: .01em; }   /* Best / Perfect Deal - green (reserved for the top tier only), strongest weight + sparkle */
.dcx-label-4 { background: #e8f0fe; color: #1d4ed8; font-weight: 800; }   /* Great Deal - blue, medium weight + checkmark */
.dcx-label-3 { background: #eaf2fd; color: #4a7fc9; font-weight: 700; }   /* Good Price (below fair) - lighter blue, standard weight, no icon */
.dcx-label-2 { background: #eef1f5; color: #5b6577; }   /* Fair Price (in typical range) - neutral grey */
.dcx-label-1 { background: #fdeede; color: #b5701a; }   /* Above Market / Overpriced - amber */
.dcx-label-overall { background: #264265; color: #fff; font-weight: 800; }   /* Best Overall (2026-08-05) - navy, distinct axis from the green/blue/amber price tiers above */
/* left-border colour follows the verdict (overrides the earlier value-tier borders) */
/* Best Deal (3 cheapest) gets a bold green wash so it stands out as the buyer's pick */
/* Border colours realigned 2026-07-30 to match .dcx-label-N exactly (they'd drifted - tier 2 was
   orange and tier 1 was red here while their labels read neutral-grey/amber, sending two
   different signals for the same tier). Now one consistent colour per tier everywhere it appears. */
/* 2026-08-02 (Search redesign, section 6): dropped the full-card green background tint that used
   to stack on top of this border on every tier-5 card - a whole "Perfect Deal" tier is not
   "genuinely special" (that's reserved for the Best Deal / Best Overall heroes above), so a
   restrained left-border accent alone (matching every other tier's treatment) carries the signal now. */
.diamond-card[data-price-tag="5"] { border-left: 3px solid #0b7a43; }
.diamond-card[data-price-tag="4"] {/* border-left: 3px solid #1d4ed8; */}
.diamond-card[data-price-tag="3"] { /*border-left: 3px solid #4a7fc9; */}
.diamond-card[data-price-tag="2"] { /*border-left: 3px solid #5b6577; */}
.diamond-card[data-price-tag="1"] { /*border-left: 3px solid #b5701a; */}

/* ══ AI Price Advisor (1.7.17) - real index sparkline + Time-to-Buy + picks ══ */
.tdp-adv-graph-head{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:4px}
.tdp-adv-chg{font-size:12px;font-weight:800;padding:2px 7px;border-radius:6px;white-space:nowrap}
.tdp-adv-chg.state-buyer{color:#0f8a4f;background:#e6f6ec}
.tdp-adv-chg.state-seller{color:#c0392b;background:#fbe7e7}
.tdp-adv-spark{width:100%;height:64px;margin:2px 0 2px}
.tdp-adv-svg{width:100%;height:64px;display:block}
.tdp-adv-spark-load{font-size:12px;color:#8a93a5;padding:20px 0;text-align:center}
.tdp-adv-ttb{margin-top:14px;border-radius:12px;padding:12px 14px;background:#f2f6fc;border:1px solid #e2e9f3}
.tdp-adv-ttb.ttb-buyer{background:#e9f7ee;border-color:#bfe6cd}
.tdp-adv-ttb.ttb-seller{background:#fdf1e6;border-color:#f2d9bd}
.tdp-adv-ttb-verdict{font-size:15px;font-weight:800;color:#16233b;margin:4px 0 4px}
.tdp-adv-ttb.ttb-buyer .tdp-adv-ttb-verdict{color:#0b7a43}
.tdp-adv-ttb.ttb-seller .tdp-adv-ttb-verdict{color:#b5701a}
.tdp-adv-ttb-body{font-size:12.5px;line-height:1.5;color:#5b6577}
.tdp-adv-picks{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.tdp-adv-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:#fff;border:1px solid #dbe3ef;border-radius:10px;padding:10px 13px;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .12s,box-shadow .12s}
.tdp-adv-pick:hover{border-color:#254264;box-shadow:0 2px 10px rgba(37,66,100,.1)}
.tdp-adv-pick-k{font-size:12px;font-weight:800;color:#254264}
.tdp-adv-pick-v{font-size:14px;font-weight:800;color:#16233b}
.tdp-adv-pick-v em{font-style:normal;font-size:11px;font-weight:800;color:#0f8a4f}
.diamond-card.tdp-flash{animation:tdpFlash 1.6s ease}
@keyframes tdpFlash{0%,100%{box-shadow:none}20%,60%{box-shadow:0 0 0 3px rgba(37,66,100,.35)}}
@media (prefers-reduced-motion:reduce){.diamond-card.tdp-flash{animation:none}}

/* Smart moves (1.7.17) - deterministic advisor filter suggestions */
.tdp-adv-moves{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.tdp-adv-moves .main-tool-analysis-results-sidebar-row-title{margin-bottom:2px}
.tdp-adv-moves-sub{margin:0 0 10px;font-size:11.5px;line-height:1.5;color:#8a93a5}
/* Tool drivers: Diamond Prices link under the trend graph; Calculator CTA under Smart moves */
.tdp-adv-tool-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12px;font-weight:700;color:#254264;text-decoration:none;font-size: 12px;
    font-weight: 500;
    color: #64748b;
    opacity: 0.5;
}
.tdp-adv-tool-link:hover{color: #264265;opacity: 1;}
.tdp-adv-tool-cta{display:flex;align-items:center;gap:10px;margin-top:10px;padding:11px 12px;border:1px solid #dbe3ef;border-radius:11px;background:#fbfcfe;text-decoration:none;color:inherit;transition:border-color .12s ease,background .12s ease}
.tdp-adv-tool-cta:hover{border-color:#254264;background:#f2f6fc}
.tdp-adv-tool-cta-ic{flex:none;width:28px;height:28px;border-radius:8px;background:#eef3fb;color:#254264;display:inline-flex;align-items:center;justify-content:center}
.tdp-adv-tool-cta-ic svg{width:16px;height:16px;display:block;fill: #264264;}
.tdp-adv-tool-cta-b{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.tdp-adv-tool-cta-t{font-size:12.5px;font-weight:800;color:#254264;text-align: left;}
.tdp-adv-tool-cta-d{font-size:11px;line-height:1.4;color:#8a93a5;text-align: left;}
.tdp-adv-tool-cta>span[aria-hidden]{color:#c3d0e4;font-weight:800}
.tdp-adv-move{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:#fbfcfe;border:1px solid #dbe3ef;border-radius:10px;padding:10px 13px;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .12s ease,background .12s ease;box-sizing: border-box;}
.tdp-adv-move:hover{border-color:#254264;background:#f2f6fc}
.tdp-adv-move-k{font-size:12.5px;font-weight:800;color:#254264;white-space:nowrap}
.tdp-adv-move-v{font-size:12px;font-weight:600;color:#5b6577;text-align:right}

/* Time-to-Buy visual meter (1.7.17) - gradient track + marker instead of a text box */
.tdp-ttb2{margin-top:16px}
.tdp-ttb2-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.tdp-ttb2-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color: #264265;}
.tdp-ttb2-verdict{font-size: 13px;font-weight:800;color:#16233b;display: none;}
.tdp-ttb2-verdict.tv-buyer{color: #264265;}
.tdp-ttb2-verdict.tv-seller{color:#b5701a}
.tdp-ttb2-verdict.tv-balanced{color:#5b6577}
.tdp-ttb2-track{position:relative;height:8px;border-radius:999px;background:linear-gradient(90deg,#e6a23c 0%,#e8d36a 42%,#7cc98f 72%,#17a45f 100%)}
.tdp-ttb2-marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #17a45f;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(20,27,43,.28);transition:left .45s ease}
.tdp-ttb2-marker.mk-seller{border-color:#e0902a}
.tdp-ttb2-marker.mk-balanced{border-color:#8a93a5}
.tdp-ttb2-scale{display:flex;justify-content:space-between;margin-top:7px;font-size:10.5px;color:#98a2b3}
.tdp-ttb2-note{font-size:12px;line-height:1.5;color:#5b6577;margin-top:10px}
.fair-market-listings-note b{color:#16233b;font-weight:700}

/* Verdict Block (Phase 1, 2026-07-30) - one shared pattern: small label, bold conclusion, one
   supporting sentence. Used by Market Conditions here and the Best Deal hero (.tdp-verdict-head-inline
   variant). Evidence below (gauge, chart, distribution) illustrates this - it never restates it. */
.tdp-verdict-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#5a6b85;margin-bottom:4px;display:block}
.tdp-verdict-head{font-size:18px;font-weight:800;color:#16233b;letter-spacing:-.01em;line-height:1.25;display:block;margin-bottom:4px}
/* 2026-08-03: verdict head now renders after the bar/scale (was before it), so it needs its
   own top spacing instead of relying on the track's/scale's margin above it. */
.tdp-mkt-conditions .tdp-verdict-head{margin-top:10px}
.tdp-verdict-head.tv-buyer{color:#0b7a43}
.tdp-verdict-head.tv-balanced{color:#264265}
.tdp-verdict-head.tv-seller{color:#b5701a}
.tdp-verdict-sub{font-size:13px;color:#5b6577}
.tdp-mkt-conditions{margin-top:0;padding-bottom:18px;border-bottom:1px solid #eef1f5;margin-bottom:4px}
.tdp-mkt-conditions .tdp-ttb2-track{margin-top:2px}
/* Best Deal hero's inline verdict word - same weight/role as .tdp-verdict-head, sized for its
   context (runs inline within a paragraph rather than as its own block). */
.tdp-verdict-head-inline{font-size:15px;font-weight:800;color:#0b7a43}

/* "How we estimated this" tap-to-reveal (Phase 1, 2026-07-30) - demoted from a standing section */
.tdp-methodology-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:8px;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12px;font-weight:600;color:#5a6b85}
.tdp-methodology-toggle:hover{color:#264265}
.tdp-methodology-cv{font-size:10px;transition:transform .15s ease}
.tdp-methodology-toggle.is-open .tdp-methodology-cv{transform:rotate(180deg)}
.tdp-methodology-panel{margin-top:8px;padding:10px 12px;background:#f7f9fc;border-radius:8px;font-size:12px;line-height:1.6;color:#4b5c74}
.tdp-methodology-panel ul{margin:0;padding-left:16px}
.tdp-methodology-panel li{margin-bottom:3px}

/* Smart Moves - surface the already-computed $ impact (m.p), which existed in the data but was
   never rendered (Phase 1, 2026-07-30). */
.tdp-adv-move-p{font-size:11.5px;font-weight:700;color:#0b7a43;margin-left:6px;white-space:nowrap}

/* Mobile fix (1.7.17): the legacy rule hid every sidebar price-wrapper except the fair price
   (back when the graph/rating were fabricated). The advisor's graph + Time-to-Buy meter are real
   now - keep them visible on mobile. Double-class specificity beats the single-class mobile hide. */
.main-tool-analysis-results-price-wrapper.main-tool-analysis-results-graph-structure { display: block; }
.main-tool-analysis-results-price-wrapper.tdp-ttb2 { display: block; }
.main-tool-analysis-results-price-wrapper.tdp-adv-picks { display: flex; }
.main-tool-analysis-results-price-wrapper.tdp-adv-moves { display: flex; }

/* Per-stone value bar (1.7.17) - the meter language, applied to each result's analysis panel */
.tdp-vbar{margin:2px 0 12px}
.tdp-vbar-track{position:relative;height:8px;border-radius:999px;background:#eef2f8}
.tdp-vbar-fill{position:absolute;left:0;top:0;height:100%;border-radius:999px}
.tdp-vbar-fill.good{background:linear-gradient(90deg,#17a45f,#3cbd7a)}
.tdp-vbar-fill.over{background:linear-gradient(90deg,#e0902a,#cf4b3b)}
.tdp-vbar-fair{position:absolute;top:-3px;width:2px;height:14px;background:#16233b;border-radius:1px}
.tdp-vbar-legend{display:flex;justify-content:space-between;margin-top:10px;font-size:11.5px;font-weight:700}
.tdp-vbar-now.good{color:#0b7a43}
.tdp-vbar-now.over{color:#c0392b}
.tdp-vbar-fairlbl{color:#8a93a5}

/* AI Price Advisor - premium header + confidence + axis (1.7.17) */
.main-tool-results-side-bar-title.tdp-adv-head2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tdp-adv-brand{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:800;color:#16233b;letter-spacing:-.01em}
.tdp-adv-brand-ic{width:17px;height:17px;color:#b98a2e;flex:none}
.tdp-adv-live{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#0b7a43;background:#e6f6ec;padding:3px 8px;border-radius:999px;white-space:nowrap}
.tdp-adv-live-dot{width:6px;height:6px;border-radius:50%;background:#17a45f;animation:tdpLive 1.6s ease-in-out infinite}
@keyframes tdpLive{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.tdp-adv-live-dot{animation:none}}
.tdp-adv-conf{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:11.5px;color:#8a93a5}
.tdp-adv-conf-dots{display:inline-flex;gap:2px}
.tdp-adv-conf-dots i{width:5px;height:5px;border-radius:50%;background:#d3d9e2;display:block}
.tdp-adv-conf-high .tdp-adv-conf-dots i{background:#17a45f}
.tdp-adv-conf-med .tdp-adv-conf-dots i:nth-child(-n+2){background:#e0902a}
.tdp-adv-conf-low .tdp-adv-conf-dots i:first-child{background:#c0392b}
.tdp-adv-conf-txt b{color:#16233b;font-weight:800}
.tdp-adv-axis{display:flex;justify-content:space-between;margin-top:5px;font-size:10px;color:#a7b0c0;font-weight:600}

/* Smart-move icons (1.7.17) */
.tdp-adv-move{gap:0}
.tdp-adv-move-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:#eef3fb;color:#254264;font-size:13px;font-weight:800;flex:none;margin-right:10px}
.tdp-adv-move-k{white-space:nowrap}
.tdp-adv-move .tdp-adv-move-v{margin-left:auto;padding-left:10px}
/* Sparkline hover tooltip (1.7.17) */
.tdp-spark-tip{position:absolute;top:-2px;transform:translate(-50%,-100%);background:#16233b;color:#fff;font-size:10.5px;font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:6;box-shadow:0 2px 8px rgba(20,27,43,.28)}
.tdp-spark-tip b{font-weight:800}
.tdp-spark-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#254264;border:2px solid #fff;transform:translate(-50%,-50%);pointer-events:none;z-index:5;box-shadow:0 1px 3px rgba(20,27,43,.3)}

/* ══ Advisor sidebar polish (1.7.17) - unify section labels + consistent cards ══ */
/* every section header becomes the same clean uppercase micro-label (was a heavy 17px band) */
.diamond-report-sidebar-wrapper .main-tool-analysis-results-sidebar-row-title{
  position:static !important;
  top:auto !important;
  left:auto !important;
  width:auto !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: #264265 !important;
  background:transparent !important;
  border-bottom:0 !important;
  padding:0 !important;
  margin:0 0 10px !important;
  line-height:1.2;
}
.tdp-adv-graph-head .main-tool-analysis-results-sidebar-row-title{ margin:0 !important; }
/* consistent section cards: same margin, padding, border, radius, soft shadow */
.main-tool-analysis-results-price-wrapper.main-tool-analysis-results-graph-structure,
.main-tool-analysis-results-price-wrapper.tdp-ttb2,
.main-tool-analysis-results-price-wrapper.tdp-adv-picks,
.main-tool-analysis-results-price-wrapper.tdp-adv-moves{
  margin: 12px 18px 12px !important;
  padding:14px 16px !important;
  border:1px solid #edf1f7 !important;
  border-radius:12px !important;
  box-shadow:0 1px 3px rgba(20,27,43,.035);
  box-sizing: border-box;
}
/* the fair-price header block: a touch more breathing room, centered rhythm */
/* fair market price is now a bordered widget like the other sections (1.7.17) */
.main-tool-analysis-results-price-wrapper.main-tool-analysis-results-price-value-structure{
  margin:14px 18px 12px !important; padding:16px !important;
  border:1px solid #edf1f7 !important; border-radius:12px !important;
  box-shadow:0 1px 3px rgba(20,27,43,.035);
}
.tdp-adv-conf{ justify-content:center; }

/* Top-picks diamond rows (1.7.17) - 3 real result stones, thumbnail + price + spec */
.tdp-pick-row{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;padding:7px 8px;border-radius:10px;cursor:pointer;transition:background .12s ease}
.tdp-pick-row + .tdp-pick-row{margin-top:2px}
.tdp-pick-row:hover{background:#f2f6fc}
.tdp-pick-row-img{width:40px;height:40px;border-radius:8px;object-fit:cover;background:#eef2f8;flex:none}
.tdp-pick-row-b{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.tdp-pick-row-price{font-size:14px;font-weight:800;color:#16233b}
.tdp-pick-row-price em{font-style:normal;font-size:11px;font-weight:800;color:#0f8a4f;margin-left:5px}
.tdp-pick-row-spec{font-size:11px;color:#8a93a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdp-pick-row-arrow{color:#c3d0e4;font-weight:800;font-size:15px;flex:none}
.tdp-pick-row:hover .tdp-pick-row-arrow{color:#254264}
/* smart move becomes a two-line card: title + same-budget value on top, description below */
.tdp-adv-move{flex-direction:column;align-items:stretch;gap:5px}
.tdp-adv-move-top{display:flex;align-items:center;width:100%}
.tdp-adv-move-top .tdp-adv-move-v{margin-left:auto;padding-left:10px;font-weight:800;color:#16233b}
.tdp-adv-move-desc{font-size:11px;line-height:1.45;color:#8a93a5;padding-left:32px}

/* Fair-price title (1.7.17) - make it unmistakable that the big number is the fair price */
.tdp-adv-fairlabel{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#9aa3b2;text-align:center;margin-bottom:3px;display:flex;align-items:center;justify-content:center;gap:5px}

/* "?" info icon (2026-08-03) - replaces the standing "Market Conditions" heading; same
   tap-to-reveal interaction as .tdp-methodology-toggle, just icon-sized since the content
   is one sentence, not a list. */
.tdp-info-btn{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid #c7cedb;background:#fff;color:#7c8698;font-size:10px;font-weight:800;line-height:1;cursor:pointer;padding:0;text-transform:none;letter-spacing:0}
.tdp-info-btn:hover,.tdp-info-btn.is-open{border-color:#264265;color:#264265}
.tdp-mktcond-tip{font-size:12px;line-height:1.5;color:#5b6577;text-align:center;text-transform:none;letter-spacing:normal;font-weight:400;background:#f7f9fc;border-radius:8px;padding:8px 12px;margin:0 0 10px}

/* results bar with only the Sort control (count moved into the All chip, 1.7.17) */
.tdp-results-bar--sortonly{justify-content:flex-end}

/* Single toolbar row above results: chips (left) + Sort (right) on one line (1.7.17) */
.tdp-results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:0 2px}
.tdp-results-toolbar .tdp-value-chips{margin:0 !important;padding:0 !important}

/* keep chips on the left of the toolbar (override the legacy #diamond-results reflow order) */
.tdp-results-toolbar .tdp-value-chips{order:0 !important}
.tdp-results-toolbar .tdp-sort-wrap{order:1}

/* Filter tabs: All Prices · Best Deal · Good Prices - a segmented control */
.tdp-view-toggle{ display:inline-flex; background:#eef2f7; border-radius:11px; padding:3px; gap:2px; order:0; }
.tdp-view-btn{ border:0; background:none; font:inherit; font-size:13px; font-weight:700; color:#5b6577; padding:7px 14px; border-radius:8px; cursor:pointer; transition:background .12s ease, color .12s ease; display:inline-flex; align-items:center; gap:6px; }
.tdp-view-btn:hover{ color:#16233b; }
.tdp-view-btn.is-on{ background:#fff; color:#16233b; box-shadow:0 1px 3px rgba(20,27,43,.12); }
.tdp-view-btn span{ font-size:11px; font-weight:800; background:#dbe3ee; color:#5b6577; border-radius:999px; padding:1px 7px; }
.tdp-view-btn[data-tier="best"].is-on span{ background:#d6ffe2; color:#0b7a43; }
.tdp-view-btn.is-on span{ background:#eef2f7; }
.tdp-toolbar-right{ display:flex; align-items:center; gap:14px; order:1; }
.tdp-result-count{ font-size:12.5px; color:#9aa3b2; font-weight:600; white-space:nowrap; }
@media (max-width:560px){ .tdp-result-count{ display:none; } }

/* JEWELRY TAB (2026-08-02, user request) - engagement rings in the same row structure as diamond
   results (reuses .diamond-results-table / .row-wrapper / .tdp-row-spec-main / .tdp-row-price, all
   already defined above - only the container + empty-state need new rules). */
.tdp-jewelry-panel { margin-top: 8px; }
/* .tdp-jw-card reuses .diamond-card/.dcx verbatim (the site's real, live result-card grid) - no
   overrides needed beyond making it a link (the diamond version is a div with an onclick handler;
   jewelry has no equivalent lookup table, so the whole card is a plain <a> instead). */
.tdp-jw-card { text-decoration: none; }
.tdp-jw-card:hover { text-decoration: none; }
/* 2026-08-05 (user request): jewelry images bumped up again (68px -> 92px) - for a ring, style is
   the whole point of the photo (unlike a diamond, whose real differentiators - cut/color/clarity -
   aren't visible in a stock shape image anyway), so the image deserves more room than it had.
   Grid's first column widened to match, or the bigger image would overflow its own column.
   (2026-08-04: name / price / setting+diamond breakdown stack as one block matching the hero
   card's own structure, via its own grid-template-areas so this never touches the diamond-row
   layout .dcx-price/.dcx-spec still use elsewhere.) */
.tdp-jw-card .dcx-img img { width: 92px; height: 92px; }
.tdp-jw-card .dcx { grid-template-columns: 92px minmax(160px,1fr) auto auto; grid-template-areas: "img info rate cta"; }
.dcx-jw-info { grid-area: info; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dcx-jw-name { font-size: 14px; font-weight: 600; color: #16233b; text-transform: capitalize; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dcx-jw-name .dcx-sub { font-size: 12.5px; color: #8a93a5; font-weight: 600; text-transform: none; }
@media (max-width: 650px) {
  .tdp-jw-card .dcx { grid-template-columns: 92px 1fr auto; grid-template-areas: "img info info" "img rate cta"; }
}
.tdp-jw-empty { padding: 32px 16px; text-align: center; color: #7a8699; font-size: 14px; }
/* "Show more" (2026-08-05) - simple load-on-demand button, not numbered pagination, since this is
   an inline results list inside a tab, not its own page. */
.tdp-jw-more {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 13px 18px;
    background: #fff;
    border: 1px solid #d4d9e2;
    border-radius: 10px;
    color: #264264;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.tdp-jw-more:hover { border-color: #264264; background: #f7f9fc; }
.tdp-jw-more:disabled { opacity: .6; cursor: default; }
.tdp-jw-empty a { color: #264265; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(38, 66, 101, 0.35); }
.tdp-jw-empty a:hover { border-bottom-color: #264265; }

/* SEARCH SUMMARY / BUYING VERDICT card (2026-08-02, redesigned 2026-08-03, user request) -
   mobile-only now (was shown at every width, duplicating the desktop toolbar's own "X diamonds
   match" count and repeating Fair Market Price/Best Deal the full sidebar already shows in more
   detail right next to it there - genuinely redundant on desktop). On mobile the sidebar starts
   collapsed, so this is the only place these facts are visible before the user taps it open - a
   real, non-redundant purpose specific to the narrow viewport. Rebuilt as a proper stat-tile card
   (was inline "label: value" pairs that wrapped awkwardly across lines) - one bordered card, a
   2-up grid of tiles, each with a small uppercase label above a bold value. This block is only
   ever built by tdpSearchSummary() when __isMobile is true, but the display:none default below
   guards against a race (grid resize mid-session) ever leaving a stray copy visible on desktop. */
.tdp-search-summary{ display:none; }
@media (max-width:650px){
  .tdp-search-summary{
    display:block; margin:14px 2px 12px; padding:14px 16px; border:1px solid #edf1f7;
    border-radius:12px; background:#fff; box-shadow:0 1px 3px rgba(20,27,43,.035);
  }
}
.tdp-summary-count{ font-size:13px; color:#7a8699; font-weight:600; margin-bottom:10px; }
.tdp-summary-count strong{ color:#16233b; font-weight:800; font-size:14px; }
.tdp-summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.tdp-summary-tile{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.tdp-summary-k{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#8a93a5; }
.tdp-summary-v{ font-size:17px; font-weight:800; color:#16233b; letter-spacing:-.01em; }
/* Buying Conditions verdict - color communicates buyer outcome, same taxonomy as the AI Advisor's
   own Time-to-Buy verdict (section 8): buyer-favorable = green, balanced = neutral, seller/elevated
   = amber. "Not enough data"/pending states stay a plain neutral gray, never a color that implies a
   verdict we don't actually have. */
.tdp-summary-verdict{ font-size:14.5px; }
.tdp-summary-verdict.tv-pending, .tdp-summary-verdict.tv-unknown{ color:#9aa3b2; font-weight:700; }
.tdp-summary-verdict.tv-buyer{ color:#0b7a43; }
.tdp-summary-verdict.tv-balanced{ color:#5b6577; }
.tdp-summary-verdict.tv-seller{ color:#b8860b; }

/* ════════════════ Mobile UX pass (1.7.18) ════════════════ */
/* advisor summary + chevron are mobile-only (desktop shows the full advisor) */
.tdp-adv-headsum, .tdp-adv-chev { display: none; }
/* filter-touch + advisor-open feedback pulse */
.tdp-updating { animation: tdpUpd .6s ease; }
@keyframes tdpUpd { 0%,100%{opacity:1} 45%{opacity:.5} }
.tdp-adv-hint { animation: tdpHint 1.1s ease 2; }
@keyframes tdpHint { 0%,100%{box-shadow:0 0 0 0 rgba(15,138,79,0)} 50%{box-shadow:0 0 0 4px rgba(15,138,79,.18)} }

@media (max-width: 650px) {
    .tdp-adv-brand-ic {
    color: #16233b;
}.tdp-affects-action {
    /* padding: 10px 20px 0px 20px; */
}

.tdp-whyx-sub {
}

span.tdp-whyx-num-v {
    font-size: 16px;
}
  /* 0) stop horizontal overflow - let grid/flex text children shrink */
  .search-diamonds-main-tool, #diamond-report-structure, #diamond-results,
  .diamond-results-mobile, .diamond-card, .dcx {max-width: 100%;min-width: 0;}
  .dcx-price, .dcx-spec, .dcx-rate, .dcx-cta { min-width: 0; }
  .dcx-spec { overflow: hidden; }
.search-diamonds-main-tool{padding-top:70px;padding: 70px 12px 0px 12px;}
  /* 1) AI Price Advisor → collapsible bar */
  #tdp-adv { border: 1px solid #e7ecf3; border-radius: 12px; overflow: hidden; }
  #tdp-adv .main-tool-analysis-results-structure { display: none; }
  #tdp-adv.tdp-adv-open .main-tool-analysis-results-structure { display: block; }
  .tdp-adv-head2 { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 12px 14px; }
  .tdp-adv-headsum {display: inline;margin-left: auto;font-size: 15px;font-weight: 800;color: #16233b;white-space: nowrap;}
  .tdp-adv-chev { display: inline-flex; flex: none; color: #9aa3b2; transition: transform .2s ease; }
  .tdp-adv-chev svg { width: 18px; height: 18px; }
  #tdp-adv.tdp-adv-open .tdp-adv-chev { transform: rotate(180deg); }

  /* 2) results toolbar (tabs) fit */
  .tdp-results-toolbar { gap: 9px; flex-wrap: wrap; padding: 0; }
  .tdp-view-toggle {width: 100%;justify-content: stretch;margin-bottom: 10px;}
  .tdp-view-btn { flex: 1; justify-content: center; padding: 8px 4px; font-size: 12px; gap: 4px; }
  .tdp-view-btn span { padding: 1px 5px; }
  .tdp-toolbar-right { width: 100%; justify-content: space-between; gap: 8px; }
  .tdp-result-count { display: inline; font-size: 11.5px; }

  /* 3) best-deal card polish */
  .tdp-hero-wrap .calc-v2-bestdeal-wow-row { grid-template-columns: 74px 1fr; gap: 12px; }
  .calc-v2-bestdeal-wow-price-label { font-size: 11px; line-height: 1.35; color: #6b7a90; display: block; margin-bottom: 3px; }

  /* 4) diamond cards: rating label sits below the price (operator 2026-07-30);
     diamond params move up next to price, where the rating used to be. */
  /* 2026-08-07 (operator: "make the diamond cards like the jewelry cards" - item description,
     price, price description, then the label row, then CTA). Was two side-by-side areas ("price"
     to the left, "spec" right-aligned on the right) sharing one row - now a single "info" area
     (spec above price above the new save-line, in that order in the markup) spanning both middle
     columns, exactly matching .tdp-jw-card's own "img info info" / "img rate cta" mobile grid. */
  .dcx { grid-template-areas: "img info info" "img rate cta" "img reason reason"; row-gap: 8px; column-gap: 11px; }
  .dcx-info { display: flex; flex-direction: column; gap: 2px; grid-area: info; }
  .dcx-spec { grid-area: auto; justify-self: auto; align-self: auto; text-align: left; }
  /* `align-self: end` (base rule) meant "bottom-align within the grid cell" when .dcx-price was a
     GRID item (desktop) - but .dcx-price is now a FLEX item of .dcx-info's column-direction flex
     container on mobile, where `align-self` means the CROSS axis (horizontal) instead, so the same
     value silently became "shrink to content width and push to the right edge." Reset to auto so
     it picks up .dcx-info's default stretch (full width, left-aligned) like its siblings. */
  .dcx-price { margin-top: 2px; align-self: auto; }
  /* 2026-08-07 (operator: "make it a label like before '-15%'"): the "-X%" chip is back next to
     price on mobile too (the earlier same-day change had hidden it here since the discount was
     also spelled out in .dcx-save-line - that sentence is now the recommendation text instead, so
     there's no more overlap and no reason to hide the chip). */
  .dcx-save-line { display: block; }
  .dcx-rate { grid-area: rate; justify-self: start; align-self: center; }
  .dcx-cta {grid-area: cta;justify-self: end;align-self: end;margin-top: 2px;gap: 8px;}
  /* 2026-08-06 (operator: "the card UI is broken here" on the Best Deal card's
     "Lowest price in your current search." line). .dcx-rate is flex-direction:row - fine on
     desktop where that area is ~550px wide, but on mobile the rate column is only ~131px and the
     rating badge eats ~116px of it, leaving the reason sentence a 35px-wide sliver that wrapped
     into an 80px-tall column of broken text. (Note the rule's own comment upstream claims it was
     "switched to column direction so the reason stacks below the button" - it says row; the
     comment and the code disagree, and the code is what shipped.)
     Fix: give the reason its own full-width row in the mobile grid instead of leaving it trapped
     in the narrow rate column. It's a child of .dcx-rate in the markup, so `display: contents`
     lets it participate in the card grid directly while the badge keeps its own cell. */
  .dcx-rate { display: contents; }
  .dcx-rate > .dcx-label { grid-area: rate; justify-self: start; align-self: center; }
  /* 2026-08-07: the same reason text now shows via .dcx-save-line up in .dcx-info instead (per
     operator request) - hidden here on mobile only so it isn't shown twice; still visible on
     desktop, where .dcx-save-line stays hidden and this remains the only copy. */
  .dcx-reason { display: none; }

  /* 5) expand panel: single-column analysis, why-grid 2-up, why-card image-on-top */
  .tdp-why .tdp-whyx-cols { grid-template-columns: 1fr; }
  .tdp-why .calc-v2-why-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .tdp-why .calc-v2-why-card { display: flex; flex-direction: column; }
  .tdp-why .calc-v2-why-visual {width: 100%;box-sizing: border-box;flex-direction: column;}
  .tdp-why .calc-v2-use-grid { grid-template-columns: 1fr; }

  /* 6) filters sheet: close button, full-width footer, hide heart, nicer Advanced title */
  .search-diamonds-main-tool-filters { position: fixed; }
  /* 2026-08-07 (operator: "make the X button be above the filters wrapper, like where the
     overlay"). Was `position: sticky` inside the sheet's own scroll content (before that, a
     broken `position: fixed` that pinned to the sheet's own off-screen top edge, since the sheet's
     `transform` makes IT the containing block for fixed descendants, not the viewport). Now a
     true `document.body` sibling of the backdrop (see getDiamonds.js), so `position: fixed` here
     resolves against the real viewport - the button floats over the dimmed backdrop just above the
     sheet's rounded top edge, matching how the backdrop itself is positioned/toggled, rather than
     living inside the white sheet content. Visibility now follows the same `.is-open` toggle as the
     backdrop instead of the sheet's slide transform hiding it. The sheet's max-height is capped at
     85dvh, so at least ~15% of the viewport is always backdrop when open - 16px from the top sits
     comfortably inside that reserved space regardless of how tall the sheet's content grows. */
  .tdp-sheet-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10001;
    width: 34px; height: 34px; border-radius: 50%; border: 0; background: #eef2f7; color: #16233b;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 1px 6px rgba(15,23,42,.16);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease;
  }
  .tdp-sheet-close.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .tdp-sheet-close svg { width: 18px; height: 18px; }
  .tdp-sheet-footer {position: sticky;left: 0;right: 0;bottom: 0;width: auto;margin: 0;z-index: 10;padding-left: 0px;box-shadow: 0px 26px 0px 26px white;}
  .shape-btn[data-shape="heart"] { display: none; }
  .advanced-toggle {justify-content: center;width: 100%;background: #f2f6fc;color: #254264;font-weight: 600;border-radius: 10px;box-sizing: border-box;margin-bottom: 20px;margin-top: 20px;font-size: 14px;}
  .advanced-toggle:hover { background: #e8eef8; }
    .calc-v2-why-card-head {
    flex-direction: column-reverse;
    gap: 7px;
    margin-bottom: 0px;
}

.calc-v2-why-color-chip {
}

.calc-v2-why-color-scale {
    width: 100%;
    flex-wrap: wrap;
}

.calc-v2-why-visual.calc-v2-why-visual-clarity img {
    width: 50%;
}
}

/* ============================================================================
   1.7.20 - MOBILE-ONLY search changes (operator 2026-07-26). Everything below is
   inside @media (max-width: 650px) so the DESKTOP view is not touched at all.
     · two-stage preview: .tdp-preview hides the advisor sidebar until "Show diamonds"
     · results top bar: gold "★ Fair Price: $X" advisor summary (left) + Sort (right),
       tabs on their own row below, diamonds-match count removed.
   ========================================================================== */
@media (max-width: 650px) {
    .diamond-report-structure.tdp-preview .diamond-report-sidebar {/* display: none; */}
    .diamond-report-structure.tdp-preview #diamond-results,
    .diamond-report-structure.tdp-preview .diamond-results-structure { flex: 1 1 100%; width: 100%; }

    .tdp-results-topbar {display: flex;align-items: center;justify-content: space-between;gap: 12px;flex-wrap: wrap;display: none;}
    .tdp-adv-head2.tdp-adv-bar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: #b9892e; background: transparent; width: auto; padding: 6px 2px; margin: 0; border: 0; box-shadow: none; }
    .tdp-adv-head2.tdp-adv-bar .tdp-adv-brand,
    .tdp-adv-head2.tdp-adv-bar .tdp-adv-headsum,
    .tdp-adv-head2.tdp-adv-bar .tdp-adv-chev { color: #b9892e; }
    .tdp-adv-head2.tdp-adv-bar .tdp-adv-brand-ic { width: 18px; height: 18px; }
    .tdp-adv-head2.tdp-adv-bar .tdp-adv-headsum { font-weight: 700; }
}

.tdp-jw-cards .dcx-rate {
    justify-content: center;
    align-items: center;
}