/* SVG styles */

svg.flav-diag, svg.flav-prof {float: left;}

#svg-flavour-diag-titles {

  &.positive-style {filter: url(#flav_diag_titles_desat); opacity: 0.3;}
  /* &.positive-style.flav-diag-small {filter: url(#flav_diag_titles_desat); opacity: 0.9;} */
  &.positive-style.flav-diag-small {opacity: 0.9}
  &.defect-style {filter: url(#flav_diag_titles_desat); opacity: 0.85;}
  /* &.defect-style.flav-diag-small {filter: url(#flav_diag_titles_desat); opacity: 0.85;} */
  &.defect-style.flav-diag-small {opacity: 0.6;}

  & text.quad-title {
    /* font-size: 20.91px; */
    font-family: MerriweatherSans-Regular, Merriweather Sans;
  }
  &.positive-style text.quad-title-spicy {fill: #d27107;}
  &.positive-style text.quad-title-fruity {fill: #c32250;}
  &.positive-style text.quad-title-earthy {fill: #1b774e;}
  &.positive-style text.quad-title-mols {fill: #293a96;}
  &.defect-style text.quad-title-spicy {fill: #fffbb2;}
  &.defect-style.flav-diag-small text.quad-title-spicy {fill: #3f562e;}
  &.defect-style text.quad-title-fruity {fill: #bce1ea;}
  &.defect-style.flav-diag-small text.quad-title-fruity {fill: #364068;}
  &.defect-style text.quad-title-earthy {fill: #1b774e;  opacity: 0.35}
  &.defect-style.flav-diag-small text.quad-title-earthy {fill: #1b774e;  opacity: 1}
  &.defect-style text.quad-title-mols {fill: #fffbb2;}
  &.defect-style.flav-diag-small text.quad-title-mols {fill: #70262c;}

}

/* flavour-diag-positive */

#svg-flavour-diag {

  &.positive-style {filter: url(#flav_diag_desat); opacity: 0.3}
  &.positive-style.flav-diag-small {opacity: 0.25}
  &.defect-style {filter: url(#flav_diag_desat); opacity: 0.35}
  &.defect-style.flav-diag-small {opacity: 0.15}

  &.positive-style #quad-spicy {fill: #f8f291;}
  &.defect-style #quad-spicy {fill: #3f562e;}
  &.positive-style #quad-fruity {fill: #edb2d0;}
  &.defect-style #quad-fruity {fill: #364068;}
  &.positive-style #quad-earthy {fill: #bfe9d3;}
  &.defect-style #quad-earthy {fill: #9cc583;}
  &.positive-style #quad-mols {fill: #93d0e0;}
  &.defect-style #quad-mols {fill: #70262c;}
  &.positive-style .ellipse {fill: #c8a05a;}
  &.positive-style #outer-ellipse, &.positive-style #middle-ellipse {opacity:0.4;}
  &.positive-style #inner-ellipse {fill: rgba(200, 160, 90, 0.68);}
  &.defect-style .ellipse {fill: #fff;}
  &.defect-style #outer-ellipse {opacity:0.4;}
  &.defect-style #middle-ellipse {fill: rgba(119, 118, 90, 0.7);}
  &.defect-style #inner-ellipse {fill: rgba(244, 218, 64, 0.4);}
  
  & line.axis {stroke-width: 0.62px; stroke: #3c2415;}

  /* & text.quad-title { */
    /* font-size: 20.91px; */
    /* font-family: MerriweatherSans-Regular, Merriweather Sans; */
  /* } */
  /* &.positive-style text.quad-title-spicy {fill: #d27107;}
  &.positive-style text.quad-title-fruity {fill: #c32250;}
  &.positive-style text.quad-title-earthy {fill: #1b774e;}
  &.positive-style text.quad-title-mols {fill: #293a96;}
  &.defect-style text.quad-title-spicy {fill: #fffbb2;}
  &.defect-style text.quad-title-fruity {fill: #bce1ea;}
  &.defect-style text.quad-title-earthy {fill: #1b774e;}
  &.defect-style text.quad-title-mols {fill: #fffbb2;} */

  &.positive-style .quad-none.level-0 {fill: #492e0a;}
  &.defect-style .quad-none.level-0 {fill: #6f6f6f;}

  &.positive-style .quad-spicy.level-3 {fill: #f7ef20;}
  &.positive-style .quad-spicy.level-2 {fill: #b2a217;}
  &.positive-style .quad-spicy.level-1 {fill: #6b540e;}

    /* flavour point gradient definitions */
    &.positive-style .quad-spicy-fruity.level-3 {fill: url(#POSITIVE-spicy-fruity-l3);}
    &.positive-style .acwise-spicy-fruity-l3 {stop-color: #f7ef20;}
    &.positive-style .cwise-spicy-fruity-l3 {stop-color: #dd5191;}

    &.positive-style .quad-spicy-fruity.level-2 {fill: url(#POSITIVE-spicy-fruity-l2);}
    &.positive-style .acwise-spicy-fruity-l2 {stop-color: #b2a217;}
    &.positive-style .cwise-spicy-fruity-l2 {stop-color: #a2435b;}

    &.positive-style .quad-spicy-fruity.level-1 {fill: url(#POSITIVE-spicy-fruity-l1);}
    &.positive-style .acwise-spicy-fruity-l1 {stop-color: #6b540e;}
    &.positive-style .cwise-spicy-fruity-l1 {stop-color: #663425;}
    /* end gradient definitions */

  &.positive-style .quad-fruity.level-3 {fill: #dd5191;}
  &.positive-style .quad-fruity.level-2 {fill: #a2435b;}
  &.positive-style .quad-fruity.level-1 {fill: #663425;}

    /* flavour point gradient definitions */
    &.positive-style .quad-fruity-mols.level-3 {fill: url(#POSITIVE-fruity-mols-l3);}
    &.positive-style .acwise-fruity-mols-l3 {stop-color: #f272ad;}
    &.positive-style .cwise-fruity-mols-l3 {stop-color: #249bbb;}

    &.positive-style .quad-fruity-mols.level-2 {fill: url(#POSITIVE-fruity-mols-l2);}
    &.positive-style .acwise-fruity-mols-l2 {stop-color: #a2435b;}
    &.positive-style .cwise-fruity-mols-l2 {stop-color: #2f6d72;}

    &.positive-style .quad-fruity-mols.level-1 {fill: url(#POSITIVE-fruity-mols-l1);}
    &.positive-style .acwise-fruity-mols-l1 {stop-color: #663425;}
    &.positive-style .cwise-fruity-mols-l1 {stop-color: #40422c;}
    /* end gradient definitions */

  &.positive-style .quad-mols.level-3 {fill: #1e97b7;}
  &.positive-style .quad-mols.level-2 {fill: #2f6d72;}
  &.positive-style .quad-mols.level-1 {fill: #40422c;}

    /* flavour point gradient definitions */
    &.positive-style .quad-earthy-mols.level-3 {fill: url(#POSITIVE-earthy-mols-l3);}
    &.positive-style .acwise-earthy-mols-l3 {stop-color: #00a652;}
    &.positive-style .cwise-earthy-mols-l3 {stop-color: #1e97b7;}

    &.positive-style .quad-earthy-mols.level-2 {fill: url(#POSITIVE-earthy-mols-l2);}
    &.positive-style .acwise-earthy-mols-l2 {stop-color: #1d7635;}
    &.positive-style .cwise-earthy-mols-l2 {stop-color: #2f6d72;}

    &.positive-style .quad-earthy-mols.level-1 {fill: url(#POSITIVE-earthy-mols-l1);}
    &.positive-style .acwise-earthy-mols-l1 {stop-color: #3a4518;}
    &.positive-style .cwise-earthy-mols-l1 {stop-color: #40422c;}
    /* end gradient definitions */

  &.positive-style .quad-earthy.level-3 {fill: #00a652;}
  &.positive-style .quad-earthy.level-2 {fill: #1d7635;}
  &.positive-style .quad-earthy.level-1 {fill: #3a4518;}

    /* flavour point gradient definitions */
    &.positive-style .quad-spicy-earthy.level-3 {fill: url(#POSITIVE-spicy-earthy-l3);}
    &.positive-style .acwise-spicy-earthy-l3 {stop-color: #f7ef20;}
    &.positive-style .cwise-spicy-earthy-l3 {stop-color: #00a652;}

    &.positive-style .quad-spicy-earthy.level-2 {fill: url(#POSITIVE-spicy-earthy-l2);}
    &.positive-style .acwise-spicy-earthy-l2 {stop-color: #b2a217;}
    &.positive-style .cwise-spicy-earthy-l2 {stop-color: #1d7635;}

    &.positive-style .quad-spicy-earthy.level-1 {fill: url(#POSITIVE-spicy-earthy-l1);}
    &.positive-style .acwise-spicy-earthy-l1 {stop-color: #6b540e;}
    &.positive-style .cwise-spicy-earthy-l1 {stop-color: #3a4518;}
    /* end gradient definitions */

  &.defect-style .quad-spicy.level-3 {fill: #257005;}
  &.defect-style .quad-spicy.level-2 {fill: #319507;}
  &.defect-style .quad-spicy.level-1 {fill: #3dba09;}

    /* flavour point gradient definitions */
    &.defect-style .quad-spicy-fruity.level-3 {fill: url(#DEFECTS-spicy-fruity-l3);}
    &.defect-style .acwise-spicy-fruity-l3 {stop-color: #257005;}
    &.defect-style .cwise-spicy-fruity-l3 {stop-color: #19316e;}

    &.defect-style .quad-spicy-fruity.level-2 {fill: url(#DEFECTS-spicy-fruity-l2);}
    &.defect-style .acwise-spicy-fruity-l2 {stop-color: #319507;}
    &.defect-style .cwise-spicy-fruity-l2 {stop-color: #214293;}

    &.defect-style .quad-spicy-fruity.level-1 {fill: url(#DEFECTS-spicy-fruity-l1);}
    &.defect-style .acwise-spicy-fruity-l1 {stop-color: #3dba09;}
    &.defect-style .cwise-spicy-fruity-l1 {stop-color: #2952b7;}
    /* end gradient definitions */

  &.defect-style .quad-fruity.level-3 {fill: #19316e;}
  &.defect-style .quad-fruity.level-2 {fill: #214293;}
  &.defect-style .quad-fruity.level-1 {fill: #2952b7;}

    /* flavour point gradient definitions */
    &.defect-style .quad-fruity-mols.level-3 {fill: url(#DEFECTS-fruity-mols-l3);}
    &.defect-style .acwise-fruity-mols-l3 {stop-color: #19316e;}
    &.defect-style .cwise-fruity-mols-l3 {stop-color: #690b0b;}

    &.defect-style .quad-fruity-mols.level-2 {fill: url(#DEFECTS-fruity-mols-l2);}
    &.defect-style .acwise-fruity-mols-l2 {stop-color: #214293;}
    &.defect-style .cwise-fruity-mols-l2 {stop-color: #8c0e0e;}

    &.defect-style .quad-fruity-mols.level-1 {fill: url(#DEFECTS-fruity-mols-l1);}
    &.defect-style .acwise-fruity-mols-l1 {stop-color: #2952b7;}
    &.defect-style .cwise-fruity-mols-l1 {stop-color: #af1212;}
    /* end gradient definitions */

  &.defect-style .quad-mols.level-3 {fill: #690b0b;}
  &.defect-style .quad-mols.level-2 {fill: #8c0e0e;}
  &.defect-style .quad-mols.level-1 {fill: #af1212;}

    /* flavour point gradient definitions */
    &.defect-style .quad-earthy-mols.level-3 {fill: url(#DEFECTS-earthy-mols-l3);}
    &.defect-style .acwise-earthy-mols-l3 {stop-color: #938014;}
    &.defect-style .cwise-earthy-mols-l3 {stop-color: #690b0b;}

    &.defect-style .quad-earthy-mols.level-2 {fill: url(#DEFECTS-earthy-mols-l2);}
    &.defect-style .acwise-earthy-mols-l2 {stop-color: #c3ab1b;}
    &.defect-style .cwise-earthy-mols-l2 {stop-color: #8c0e0e;}

    &.defect-style .quad-earthy-mols.level-1 {fill: url(#DEFECTS-earthy-mols-l1);}
    &.defect-style .acwise-earthy-mols-l1 {stop-color: #f4d522;}
    &.defect-style .cwise-earthy-mols-l1 {stop-color: #af1212;}
    /* end gradient definitions */

  &.defect-style .quad-earthy.level-3 {fill: #938014;}  
  &.defect-style .quad-earthy.level-2 {fill: #c3ab1b;}
  &.defect-style .quad-earthy.level-1 {fill: #f4d522;}

    /* flavour point gradient definitions */
    &.defect-style .quad-spicy-earthy.level-3 {fill: url(#DEFECTS-spicy-earthy-l3);}
    &.defect-style .acwise-spicy-earthy-l3 {stop-color: #257005;}
    &.defect-style .cwise-spicy-earthy-l3 {stop-color: #938014;}

    &.defect-style .quad-spicy-earthy.level-2 {fill: url(#DEFECTS-spicy-earthy-l2);}
    &.defect-style .acwise-spicy-earthy-l2 {stop-color: #319507;}
    &.defect-style .cwise-spicy-earthy-l2 {stop-color: #c3ab1b;}

    &.defect-style .quad-spicy-earthy.level-1 {fill: url(#DEFECTS-spicy-earthy-l1);}
    &.defect-style .acwise-spicy-earthy-l1 {stop-color: #3dba09;}
    &.defect-style .cwise-spicy-earthy-l1 {stop-color: #f4d522;}
    /* end gradient definitions */

    & text.point-text {
      font-family: MerriweatherSans-Regular, Merriweather Sans;
      fill: #fff;
      text-transform: uppercase;
      /* font-weight: 600; */
      letter-spacing: -0.03em;
    }
    
    /* &.positive-style text.quad-spicy.level-3-text { */
    &.positive-style text.point-text.quad-spicy.level-3-text,
    &.positive-style text.point-text.quad-spicy-earthy.level-3-text,
    &.positive-style text.point-text.quad-spicy-fruity.level-3-text,
    &.defect-style text.point-text.quad-earthy.level-1-text,
    &.defect-style text.point-text.quad-earthy.level-2-text,
    &.defect-style text.point-text.quad-spicy.level-1-text,
    &.defect-style text.point-text.quad-spicy-earthy.level-1-text
    {
      fill: #444;
    }

    &.positive-style text.point-text.quad-none.level-0-text {fill: #FFF869;}
    &.defect-style text.point-text.quad-none.level-0-text {fill: #FFF869;}
  
}

#svg-flavour-prof {

  &.positive-style {filter: url(#flav_prof_desat);}
  &.defect-style {filter: url(#flav_prof_desat);}  

  /* &.positive-style .profile-overlay {fill: #f1f1f1; opacity: 0.4;} */
  &.positive-style .profile-overlay {fill: #1f1f30; opacity: 0.075;}
  &.defect-style .profile-overlay {fill: #233128; opacity: 0.15;}

  &.positive-style .rad-quad-none.level-0 {fill: url(#POSITIVE-rad-none-l0);}
  &.positive-style .stop-quad-none-l0 {stop-color: #492e0a;}

  &.positive-style .rad-quad-spicy.level-3 {fill: url(#POSITIVE-rad-spicy-l3);}
  &.positive-style .stop-quad-spicy-l3 {stop-color: #f7ef20;}
  &.positive-style .rad-quad-spicy.level-2 {fill: url(#POSITIVE-rad-spicy-l2);}
  &.positive-style .stop-quad-spicy-l2 {stop-color: #b2a217;}
  &.positive-style .rad-quad-spicy.level-1 {fill: url(#POSITIVE-rad-spicy-l1);}
  &.positive-style .stop-quad-spicy-l1 {stop-color: #6b540e;}

  &.positive-style .rad-quad-spicy-fruity.level-3 {fill: url(#POSITIVE-rad-spicy-fruity-l3);}
  &.positive-style .stop-quad-spicy-fruity-l3 {stop-color: rgb(244, 177, 119);}
  &.positive-style .rad-quad-spicy-fruity.level-2 {fill: url(#POSITIVE-rad-spicy-fruity-l2);}
  &.positive-style .stop-quad-spicy-fruity-l2 {stop-color: rgb(178, 126, 77);}
  &.positive-style .rad-quad-spicy-fruity.level-1 {fill: url(#POSITIVE-rad-spicy-fruity-l1);}
  &.positive-style .stop-quad-spicy-fruity-l1 {stop-color: rgb(107, 73, 34);}

  &.positive-style .rad-quad-fruity.level-3 {fill: url(#POSITIVE-rad-fruity-l3);}
  &.positive-style .stop-quad-fruity-l3 {stop-color: #dd5191;}
  &.positive-style .rad-quad-fruity.level-2 {fill: url(#POSITIVE-rad-fruity-l2);}
  &.positive-style .stop-quad-fruity-l2 {stop-color: #a2435b;}
  &.positive-style .rad-quad-fruity.level-1 {fill: url(#POSITIVE-rad-fruity-l1);}
  &.positive-style .stop-quad-fruity-l1 {stop-color: #663425;}

  &.positive-style .rad-quad-fruity-mols.level-3 {fill: url(#POSITIVE-rad-fruity-mols-l3);}
  &.positive-style .stop-quad-fruity-mols-l3 {stop-color: rgb(152, 133, 179);}
  &.positive-style .rad-quad-fruity-mols.level-2 {fill: url(#POSITIVE-rad-fruity-mols-l2);}
  &.positive-style .stop-quad-fruity-mols-l2 {stop-color: rgb(118, 100, 115);}
  &.positive-style .rad-quad-fruity-mols.level-1 {fill: url(#POSITIVE-rad-fruity-mols-l1);}
  &.positive-style .stop-quad-fruity-mols-l1 {stop-color: rgb(87, 64, 48);}

  &.positive-style .rad-quad-mols.level-3 {fill: url(#POSITIVE-rad-mols-l3);}
  &.positive-style .stop-quad-mols-l3 {stop-color: #1e97b7;}
  &.positive-style .rad-quad-mols.level-2 {fill: url(#POSITIVE-rad-mols-l2);}
  &.positive-style .stop-quad-mols-l2 {stop-color: #2f6d72;}
  &.positive-style .rad-quad-mols.level-1 {fill: url(#POSITIVE-rad-mols-l1);}
  &.positive-style .stop-quad-mols-l1 {stop-color: #40422c;}

  &.positive-style .rad-quad-earthy-mols.level-3 {fill: url(#POSITIVE-rad-earthy-mols-l3);}
  &.positive-style .stop-quad-earthy-mols-l3 {stop-color: rgb(20, 161, 137);}
  &.positive-style .rad-quad-earthy-mols.level-2 {fill: url(#POSITIVE-rad-earthy-mols-l2);}
  &.positive-style .stop-quad-earthy-mols-l2 {stop-color: rgb(49, 115, 89);}
  &.positive-style .rad-quad-earthy-mols.level-1 {fill: url(#POSITIVE-rad-earthy-mols-l1);}
  &.positive-style .stop-quad-earthy-mols-l1 {stop-color: rgb(66, 69, 39);}

  &.positive-style .rad-quad-earthy.level-3 {fill: url(#POSITIVE-rad-earthy-l3);}
  &.positive-style .stop-quad-earthy-l3 {stop-color: #00a652;}
  &.positive-style .rad-quad-earthy.level-2 {fill: url(#POSITIVE-rad-earthy-l2);}
  &.positive-style .stop-quad-earthy-l2 {stop-color: #1d7635;}
  &.positive-style .rad-quad-earthy.level-1 {fill: url(#POSITIVE-rad-earthy-l1);}
  &.positive-style .stop-quad-earthy-l1 {stop-color: #3a4518;}

  &.positive-style .rad-quad-spicy-earthy.level-3 {fill: url(#POSITIVE-rad-spicy-earthy-l3);}
  &.positive-style .stop-quad-spicy-earthy-l3 {stop-color: rgb(140, 202, 63);}
  &.positive-style .rad-quad-spicy-earthy.level-2 {fill: url(#POSITIVE-rad-spicy-earthy-l2);}
  &.positive-style .stop-quad-spicy-earthy-l2 {stop-color: rgb(114, 142, 44);}
  &.positive-style .rad-quad-spicy-earthy.level-1 {fill: url(#POSITIVE-rad-spicy-earthy-l1);}
  &.positive-style .stop-quad-spicy-earthy-l1 {stop-color: rgb(87, 78, 21);}

  &.defect-style .rad-quad-none.level-0 {fill: url(#POSITIVE-rad-none-l0);}
  &.defect-style .stop-quad-none-l0 {stop-color: #6f6f6f;}

  &.defect-style .rad-quad-spicy.level-3 {fill: url(#DEFECTS-rad-spicy-l3);}
  &.defect-style .stop-quad-spicy-l3 {stop-color: #257005;}
  &.defect-style .rad-quad-spicy.level-2 {fill: url(#DEFECTS-rad-spicy-l2);}
  &.defect-style .stop-quad-spicy-l2 {stop-color: #319507;}
  &.defect-style .rad-quad-spicy.level-1 {fill: url(#DEFECTS-rad-spicy-l1);}
  &.defect-style .stop-quad-spicy-l1 {stop-color: #3dba09;}

  &.defect-style .rad-quad-spicy-fruity.level-3 {fill: url(#DEFECTS-rad-spicy-fruity-l3);}
  &.defect-style .stop-quad-spicy-fruity-l3 {stop-color: rgb(27, 79, 66);}
  &.defect-style .rad-quad-spicy-fruity.level-2 {fill: url(#DEFECTS-rad-spicy-fruity-l2);}
  &.defect-style .stop-quad-spicy-fruity-l2 {stop-color: rgb(39, 108, 9);}
  &.defect-style .rad-quad-spicy-fruity.level-1 {fill: url(#DEFECTS-rad-spicy-fruity-l1);}
  &.defect-style .stop-quad-spicy-fruity-l1 {stop-color: rgb(51, 136, 114);}

  &.defect-style .rad-quad-fruity.level-3 {fill: url(#DEFECTS-rad-fruity-l3);}
  &.defect-style .stop-quad-fruity-l3 {stop-color: #19316e;}
  &.defect-style .rad-quad-fruity.level-2 {fill: url(#DEFECTS-rad-fruity-l2);}
  &.defect-style .stop-quad-fruity-l2 {stop-color: #214293;}
  &.defect-style .rad-quad-fruity.level-1 {fill: url(#DEFECTS-rad-fruity-l1);}
  &.defect-style .stop-quad-fruity-l1 {stop-color: #2952b7;}

  &.defect-style .rad-quad-fruity-mols.level-3 {fill: url(#DEFECTS-rad-fruity-mols-l3);}
  &.defect-style .stop-quad-fruity-mols-l3 {stop-color: rgb(64, 26, 59);}
  &.defect-style .rad-quad-fruity-mols.level-2 {fill: url(#DEFECTS-rad-fruity-mols-l2);}
  &.defect-style .stop-quad-fruity-mols-l2 {stop-color: rgb(88, 38, 81);}
  &.defect-style .rad-quad-fruity-mols.level-1 {fill: url(#DEFECTS-rad-fruity-mols-l1);}
  &.defect-style .stop-quad-fruity-mols-l1 {stop-color: rgb(106, 53, 108);}

  &.defect-style .rad-quad-mols.level-3 {fill: url(#DEFECTS-rad-mols-l3);}
  &.defect-style .stop-quad-mols-l3 {stop-color: #690b0b;}
  &.defect-style .rad-quad-mols.level-2 {fill: url(#DEFECTS-rad-mols-l2);}
  &.defect-style .stop-quad-mols-l2 {stop-color: #8c0e0e;}
  &.defect-style .rad-quad-mols.level-1 {fill: url(#DEFECTS-rad-mols-l1);}
  &.defect-style .stop-quad-mols-l1 {stop-color: #af1212;}

  &.defect-style .rad-quad-earthy-mols.level-3 {fill: url(#DEFECTS-rad-earthy-mols-l3);}
  &.defect-style .stop-quad-earthy-mols-l3 {stop-color: rgb(107, 88, 8);}
  &.defect-style .rad-quad-earthy-mols.level-2 {fill: url(#DEFECTS-rad-earthy-mols-l2);}
  &.defect-style .stop-quad-earthy-mols-l2 {stop-color: rgb(169, 95, 23);}
  &.defect-style .rad-quad-earthy-mols.level-1 {fill: url(#DEFECTS-rad-earthy-mols-l1);}
  &.defect-style .stop-quad-earthy-mols-l1 {stop-color: rgb(211, 120, 31);}

  &.defect-style .rad-quad-earthy.level-3 {fill: url(#DEFECTS-rad-earthy-l3);}
  &.defect-style .stop-quad-earthy-l3 {stop-color: #938014;}
  &.defect-style .rad-quad-earthy.level-2 {fill: url(#DEFECTS-rad-earthy-l2);}
  &.defect-style .stop-quad-earthy-l2 {stop-color: #c3ab1b;}
  &.defect-style .rad-quad-earthy.level-1 {fill: url(#DEFECTS-rad-earthy-l1);}
  &.defect-style .stop-quad-earthy-l1 {stop-color: #f4d522;}

  &.defect-style .rad-quad-spicy-earthy.level-3 {fill: url(#DEFECTS-rad-spicy-earthy-l3);}
  &.defect-style .stop-quad-spicy-earthy-l3 {stop-color: rgb(92, 119, 9);}
  &.defect-style .rad-quad-spicy-earthy.level-2 {fill: url(#DEFECTS-rad-spicy-earthy-l2);}
  &.defect-style .stop-quad-spicy-earthy-l2 {stop-color: rgb(127, 160, 15);}
  &.defect-style .rad-quad-spicy-earthy.level-1 {fill: url(#DEFECTS-rad-spicy-earthy-l1);}
  &.defect-style .stop-quad-spicy-earthy-l1 {stop-color: rgb(160, 200, 22);}

  & text.point-text {
    font-family: MerriweatherSans-Regular, Merriweather Sans;
    fill: #f8f7ee;
    text-transform: uppercase;
    /* font-weight: 600; */
    /* letter-spacing: -0.03em; */
  }
  
  /* &.positive-style text.quad-spicy.level-3-text { */
  &.positive-style text.point-text.quad-spicy.level-3-text,
  &.positive-style text.point-text.quad-spicy-earthy.level-3-text,
  &.positive-style text.point-text.quad-spicy-fruity.level-3-text,
  &.defect-style text.point-text.quad-earthy.level-1-text,
  &.defect-style text.point-text.quad-earthy.level-2-text,
  &.defect-style text.point-text.quad-spicy.level-1-text,
  &.defect-style text.point-text.quad-spicy-earthy.level-1-text
  {
    fill: #444;
  }


}



/* End SVG styles */


.flav-diag-large {
  height: 466px;
  width: 660px;
  position: relative;
  float: left;
  z-index: 1;
  /* overflow: hidden; */
}

.flav-diag-small {
  height: 93px;
  width: 132px;
  position: relative;
  float: left;
}

 div.quad {
  position: absolute;
}

.flav-diag-large div.quad {
  width: 329px;
  height: 232px;
}

.flav-diag-small div.quad {
  width: 66px;
  height: 46px;
}

.positive-style div#quad-spicy {
  background-color: #f8f291;
  border-right: 1px solid #60534b;
  border-bottom: 1px solid #60534b;
}

.defect-style div#quad-spicy {
  background-color: #3f562e;
  border-right: 1px solid #60534b;
  border-bottom: 1px solid #60534b;
}

.flav-diag-large div#quad-spicy {
  top: 0px;
  left: 0px;
}

.flav-diag-small div#quad-spicy {
  top: 0px;
  left: 0px;
}

.positive-style div#quad-fruity {
  background-color: #edb2d0;
  border-left: 1px solid #60534b;
  border-bottom: 1px solid #60534b;
}

.defect-style div#quad-fruity {
  background-color: #364068;
  border-left: 1px solid #60534b;
  border-bottom: 1px solid #60534b;
}

.flav-diag-large div#quad-fruity {
  top: 0px;
  left: 330px;
}

.flav-diag-small div#quad-fruity {
  top: 0px;
  left: 66px;
}

.positive-style div#quad-earthy {
  background-color: #bfe9d3;
  border-right: 1px solid #60534b;
  border-top: 1px solid #60534b;
}

.defect-style div#quad-earthy {
  background-color: #9cc583;
  border-right: 1px solid #60534b;
  border-top: 1px solid #60534b;
}

.flav-diag-large div#quad-earthy {
  top: 233px;
  left: 0px;
}

.flav-diag-small div#quad-earthy {
  top: 46px;
  left: 0px;
}

.positive-style div#quad-mols {
  background-color: #93d0e0;
  border-left: 1px solid #60534b;
  border-top: 1px solid #60534b;
}

.defect-style div#quad-mols {
  background-color: #70262c;
  border-left: 1px solid #60534b;
  border-top: 1px solid #60534b;
}

.flav-diag-large div#quad-mols {
  top: 233px;
  left: 330px;
}

.flav-diag-small div#quad-mols {
  top: 46px;
  left: 66px;
}

.quad-title {
  text-transform: uppercase;
  position: absolute;
}

.flav-diag-large .quad-title  {
  font-size: 22px;
}

.flav-diag-small .quad-title {
  font-size: 11px;
  z-index: 1;
  line-height: normal;
}

/*span.map-point.quad-none .flavour-text {
  display: none;
}*/

.positive-style div#quad-spicy .quad-title {
  color: #d27107;
}

.defect-style div#quad-spicy .quad-title {
  color: #fffbb2;
}

.flav-diag-large div#quad-spicy .quad-title {
  top: 15px;
  left: 20px;
}

.flav-diag-small div#quad-spicy .quad-title {
  top: 5px;
  left: 4px;
}

.positive-style div#quad-fruity .quad-title {
  color: #c32250;
}

.defect-style div#quad-fruity .quad-title {
  color: #bce1ea;
}

.flav-diag-large div#quad-fruity .quad-title {
  top: 15px;
  right: 20px;
}

.flav-diag-small div#quad-fruity .quad-title {
  top: 5px;
  right: 4px;
  text-align: right;
}

 div#quad-earthy .quad-title {
  color: #1b774e;
}

.flav-diag-large div#quad-earthy .quad-title {
  bottom: 15px;
  left: 20px;
}

.flav-diag-small div#quad-earthy .quad-title {
  bottom: 6px;
  left: 4px;
}

.positive-style div#quad-mols .quad-title {
  color: #293a96;
}
.defect-style div#quad-mols .quad-title {
  color: #fffbb2;
}

.flav-diag-large div#quad-mols .quad-title {
  bottom: 15px;
  right: 20px;
}

.flav-diag-small div#quad-mols .quad-title {
  bottom: 6px;
  right: 4px;
}

 div#choc {
  height: 466px;
  width: 660px;
  position: relative;
}

div#choc div.choc-title {
  text-transform: uppercase;
  font-size: 20px;
  color: #fff;
  text-align: center;
  width: 180px;
  height: 20px;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -90px;
}

div#inner-ellipse .quad-title {
  color: #fff;
  top: 100px;
  left: 70px;
  opacity: 1;
}

div.ellipse {
  position: absolute;
  border-radius:50%;
}

.positive-style div.ellipse {
  background-color: #c8a05a;;
}

.defect-style div.ellipse {
  background-color: #fff;
}

.positive-style div#inner-ellipse {
  background: rgba(200, 160, 90, 0.68);
}

.defect-style div#inner-ellipse {
  background: rgba(244, 218, 64, 0.4);
}

.flav-diag-large div#inner-ellipse {
  top: 136px;
  left: 185px;
  height: 194px;
  width: 290px;
}

.flav-diag-small div#inner-ellipse {
  top: 27px;
  left: 37px;
  height: 39px;
  width: 58px;
}

.positive-style div#middle-ellipse {
  opacity:0.4;
}

.defect-style div#middle-ellipse {
  background: rgba(119, 118, 90, 0.7);
}

.flav-diag-large div#middle-ellipse {
  top: 74px;
  left: 90px;
  height: 318px;
  width: 480px;
}

.flav-diag-small div#middle-ellipse {
  top: 15px;
  left: 18px;
  height: 64px;
  width: 96px;
}

.positive-style div#outer-ellipse {
  opacity:0.4;
}

.defect-style div#outer-ellipse {
  opacity:0.4;
}

.flav-diag-large div#outer-ellipse {
  top: 8px;
  left: 8px;
  height: 450px;
  width: 645px;
}

.flav-diag-small div#outer-ellipse {
  top: 2px;
  left: 2px;
  height: 90px;
  width: 129px;
}

span.map-point {
  position: absolute;
  height: 58px;
  width: 58px;
  margin-top: 204px;
  margin-left: 301px;
  background: #492e0a;
  border-radius:50%;
  z-index: 10;
}

#flavour-diag-defect span.map-point.quad-none {
  background: #6f6f6f;
}

span.satellite {
  position: absolute;
  /*height: 85px;*/
  width: 100px;
  margin-top: 204px;
  margin-left: 301px;
  background: #492e0a;
  opacity: 0.9;
  padding: 5px;
  border-radius:5%;
  font-size: 12px;
  letter-spacing: -0.04em;
  line-height:18px;
  color: #eee;
  display: none;
  z-index: 14;
}

span.map-point-functions {
  display: block;
  width: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}

span.map-point-intens-slider {
    display: inline-block;
    width: 78px;
    height: 10px;
    margin-right: 9px;
}

span.map-point-functions i.trash {
  cursor: pointer;
}

/* span.level0 {
  position: absolute;
  height: 58px;
  width: 58px;
  margin-top: 0;
  margin-left: -35px;
  background: #492e0a;
  border-radius:50%;
} */

span.flavour-text-container {
  margin-top: 204px;
  margin-left: 301px;
  opacity: 1;
  position: absolute;
  z-index: 12;
}

span.flavour-text {
  display: table-cell;
  height: 58px;
  width: 58px;
  vertical-align: middle;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.04em;
  text-align: center;
  color: #eee;
  z-index: 12;
  user-select: none;
}

span.flavour-text:hover {
  color: #bbb;
  cursor: pointer;
}

#flavour-diag-defect span.flavour-text.level0:hover {
  cursor: auto;
}

span.sat-point:hover {
  color: #bbb;
  cursor: pointer;
}

.satellite-selected span.sat-point {
  color: #bbb;
  cursor: default;
}

.sat-point-default {
  border-bottom: 2px solid #bbb;
  text-transform: uppercase;
  font-weight: bold;
  color: #eee !important;
  display: block;
  margin-bottom: 9px;
}

.sat-related {
  border-bottom: 1px solid #bbb;
}

span.flavour-text.profile-selected,
span.flavour-text.profile-selected:hover {
  font-weight: bold;
  color: #fbe8c4;
}


span.flavour-text-container.quad-none {
  width: 126px;
  margin-left: 267px;
  background: none;
}

span.quad-none span.flavour-text.level0 {
  color: #FFF869;
  width: 126px;
  font-size: 19px;
  text-transform: uppercase;
}

#flavour-diag-defect span.map-point.quad-none span.flavour-text {
  color: #f9f6c3;
  width: 126px;
  margin-left: 8px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.positive-style span.quad-spicy .flavour-text.level3,
.positive-style span.quad-spicy-earthy .flavour-text.level3,
.positive-style span.quad-spicy-fruity .flavour-text.level3,
.defect-style span.quad-earthy .flavour-text.level1,
.defect-style span.quad-earthy .flavour-text.level2,
.defect-style span.quad-spicy .flavour-text.level1,
.defect-style span.quad-spicy-earthy .flavour-text.level1
 {
  color: #444;
}

.positive-style span.map-point.quad-spicy {
  background: #f7ef20;
}
.defect-style span.map-point.quad-spicy {
  background: #3dba09;
}
.positive-style span.map-point.quad-fruity {
  background: #dd5191;
}
.defect-style span.map-point.quad-fruity {
  background: #2952b7;
}
.positive-style span.map-point.quad-earthy {
  background: #00a652;
}
.defect-style span.map-point.quad-earthy {
  background: #f4d522;
}
.positive-style span.map-point.quad-mols {
  background: #1e97b7;
}
.defect-style span.map-point.quad-mols {
  background: #af1212;
}
/* .defect-style span.map-point.quad-none .level0 {
  background: #6f6f6f;
} */
.positive-style span.map-point.quad-spicy-fruity {
  background: linear-gradient(to right, #f7ef20, #f272ad);
}
.defect-style span.map-point.quad-spicy-fruity {
  background: linear-gradient(to right, #3dba09, #2952b7);
}
.positive-style span.map-point.quad-fruity-mols {
  background: linear-gradient(#f272ad, #249bbb);
}
.defect-style span.map-point.quad-fruity-mols {
  background: linear-gradient(#2952b7, #af1212);
}
.positive-style span.map-point.quad-spicy-earthy {
  background: linear-gradient(#f7ef20, #00a652);
}
.defect-style span.map-point.quad-spicy-earthy {
  background: linear-gradient(#3dba09, #f4d522);
}
.positive-style span.map-point.quad-earthy-mols {
  background: linear-gradient(to right, #00a652, #249bbb);
}
.defect-style span.map-point.quad-earthy-mols {
  background: linear-gradient(to right, #f4d522, #af1212);
}

span.overlay {
  display: block;
  height: 58px;
  width: 58px;
  border-radius:50%;
  z-index: 11;
  position: relative;
}

/* not used? */
/* .positive-style span.overlay { */
  /*background: #755113;*/
/* } */

span.cluster-selected {
  display: block;
  /* margin-top: -29px;
  margin-left: 42px; */
  top: -62px;
  left: 48px;
  opacity: 0.8;
  z-index: 15;
  position: relative;
  font-size: 18px;
  color: white;
}

span.quad-none span.cluster-selected {
  left: 82px;
}

.positive-style span.overlay.level3 {
  opacity:0;
}

.defect-style span.overlay.level3 {
  background: rgba(0, 0, 0, 0.4)
}

.positive-style span.overlay.level2 {
  background: rgba(73, 46, 10, 0.4)
}

.defect-style span.overlay.level2 {
  background: rgba(0, 0, 0, 0.2)
}

.positive-style span.overlay.level1 {
  background: rgba(73, 46, 10, 0.8)
  /*opacity:0.8;*/
}

/* span.overlay.level1 + span.flavour-text,
span.overlay.level2 + span.flavour-text,
span.overlay.level3+ span.flavour-text
{
  margin-top: -37px;
} */

/* span.map-point.profile-selected {

} */

span.select-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
}

#flavour-diag-positive span.select-circle.quad-fruity.level3 {background-color: rgb(221,81,145)}
#flavour-diag-positive span.select-circle.quad-fruity.level2 {background: rgb(163, 68, 95)}
#flavour-diag-positive span.select-circle.quad-fruity.level1 {background: rgb(103, 53, 41,1)}

#flavour-diag-positive span.select-circle.quad-spicy.level3 {background: rgb(247,239,32)}
#flavour-diag-positive span.select-circle.quad-spicy.level2 {background: rgb(179, 165, 23)}
#flavour-diag-positive span.select-circle.quad-spicy.level1 {background: rgb(108, 86, 15)}

#flavour-diag-positive span.select-circle.quad-earthy.level3 {background: rgb(0,166,82)}
#flavour-diag-positive span.select-circle.quad-earthy.level2 {background: rgb(45, 119, 54)}
#flavour-diag-positive span.select-circle.quad-earthy.level1 {background: rgb(64, 70, 25)}

#flavour-diag-positive span.select-circle.quad-mols.level3 {background: rgb(30,151,183)}
#flavour-diag-positive span.select-circle.quad-mols.level2 {background: rgb(51, 110, 117)}
#flavour-diag-positive span.select-circle.quad-mols.level1 {background: rgb(66, 67, 49)}

#flavour-diag-positive span.select-circle.quad-fruity-mols.level3 {background: rgb(152, 133, 179)}
#flavour-diag-positive span.select-circle.quad-fruity-mols.level2 {background: rgb(118, 100, 115)}
#flavour-diag-positive span.select-circle.quad-fruity-mols.level1 {background: rgb(87, 64, 48)}

#flavour-diag-positive span.select-circle.quad-spicy-earthy.level3 {background: rgb(140, 202, 63)}
#flavour-diag-positive span.select-circle.quad-spicy-earthy.level2 {background: rgb(114, 142, 44)}
#flavour-diag-positive span.select-circle.quad-spicy-earthy.level1 {background: rgb(87, 78, 21)}

#flavour-diag-positive span.select-circle.quad-earthy-mols.level3 {background: rgb(20, 161, 137)}
#flavour-diag-positive span.select-circle.quad-earthy-mols.level2 {background: rgb(49, 115, 89)}
#flavour-diag-positive span.select-circle.quad-earthy-mols.level1 {background: rgb(66, 69, 39)}

#flavour-diag-positive span.select-circle.quad-spicy-fruity.level3 {background: rgb(244, 177, 119)}
#flavour-diag-positive span.select-circle.quad-spicy-fruity.level2 {background: rgb(178, 126, 77)}
#flavour-diag-positive span.select-circle.quad-spicy-fruity.level1 {background: rgb(107, 73, 34)}

#flavour-diag-positive span.select-circle.quad-none.level0 {background: rgb(72, 46, 11)}

#flavour-diag-defect span.select-circle.quad-fruity.level3 {background: rgb(21, 46, 109)}
#flavour-diag-defect span.select-circle.quad-fruity.level2 {background: rgb(32, 64, 146)}
#flavour-diag-defect span.select-circle.quad-fruity.level1 {background: rgb(41, 82, 183)}

#flavour-diag-defect span.select-circle.quad-spicy.level3 {background: rgb(34, 110, 2)}
#flavour-diag-defect span.select-circle.quad-spicy.level2 {background: rgb(47, 149, 6)}
#flavour-diag-defect span.select-circle.quad-spicy.level1 {background: rgb(61, 186, 7)}

#flavour-diag-defect span.select-circle.quad-earthy.level3 {background: rgb(147, 128, 15)}
#flavour-diag-defect span.select-circle.quad-earthy.level2 {background: rgb(196, 171, 23)}
#flavour-diag-defect span.select-circle.quad-earthy.level1 {background: rgb(244, 213, 34)}

#flavour-diag-defect span.select-circle.quad-mols.level3 {background: rgb(103, 6, 6)}
#flavour-diag-defect span.select-circle.quad-mols.level2 {background: rgb(139, 12, 13)}
#flavour-diag-defect span.select-circle.quad-mols.level1 {background: rgb(175, 17, 18)}

#flavour-diag-defect span.select-circle.quad-fruity-mols.level3 {background: rgb(64, 26, 59)}
#flavour-diag-defect span.select-circle.quad-fruity-mols.level2 {background: rgb(88, 38, 81)}
#flavour-diag-defect span.select-circle.quad-fruity-mols.level1 {background: rgb(106, 53, 108)}

#flavour-diag-defect span.select-circle.quad-spicy-earthy.level3 {background: rgb(92, 119, 9)}
#flavour-diag-defect span.select-circle.quad-spicy-earthy.level2 {background: rgb(127, 160, 15)}
#flavour-diag-defect span.select-circle.quad-spicy-earthy.level1 {background: rgb(160, 200, 22)}

#flavour-diag-defect span.select-circle.quad-earthy-mols.level3 {background: rgb(107, 88, 8)}
#flavour-diag-defect span.select-circle.quad-earthy-mols.level2 {background: rgb(169, 95, 23)}
#flavour-diag-defect span.select-circle.quad-earthy-mols.level1 {background: rgb(211, 120, 31)}

#flavour-diag-defect span.select-circle.quad-spicy-fruity.level3 {background: rgb(27, 79, 66,1)}
#flavour-diag-defect span.select-circle.quad-spicy-fruity.level2 {background: rgb(39, 108, 9)}
#flavour-diag-defect span.select-circle.quad-spicy-fruity.level1 {background: rgb(51, 136, 114)}

/* span.cluster-5 {
  font-size: 90px;
  color: red;
} */

span.select-circle-cluster-5 {
  width: 230px;
  height: 230px;
  margin-top: 118px;
  margin-left: 215px;
  z-index: 9;
}

/* span.cluster-4 {
  font-size: 75px;
  color: green;
} */

span.select-circle-cluster-4 {
  width: 200px;
  height: 200px;
  margin-top: 133px;
  margin-left: 230px;
  z-index: 8;
}

/* span.cluster-3 {
  font-size: 60px;
  color: white;
} */

span.select-circle-cluster-3 {
  width: 180px;
  height: 180px;
  margin-top: 143px;
  margin-left: 240px;
  z-index: 7;
}

/* span.cluster-2 {
  font-size: 55px;
  color: blue;
} */

span.select-circle-cluster-2 {
  width: 150px;
  height: 150px;
  margin-top: 158px;
  margin-left: 255px;
  z-index: 6;
}

/* span.cluster-1 {
  font-size: 50px;
  color: yellow;
} */

span.select-circle-cluster-1 {
  width: 120px;
  height: 120px;
  margin-top: 173px;
  margin-left: 270px;
  z-index: 5;
}

span.cluster-plus {
  font-size: 22px;
  font-weight: bold;
  color: white;
  line-height: 12px;
}

span.select-circle-cluster-plus {
  width: 90px;
  height: 90px;
  margin-top: 188px;
  margin-left: 285px;
  z-index: 3;
}

/*span.map-point.cluster-1::after {
  content: "5";
}
span.map-point.cluster-2::after {
  content: "4";
}
span.map-point.cluster-3::after {
  content: "5";
}
span.map-point.cluster-4::after {
  content: "2";
}
span.map-point.cluster-5::after {
  content: "1";
}*/

#sp-flav-notes-positive,
#sp-flav-notes-defect {
  margin-left: 25px;
  margin-bottom: 15px;
  width: 660px;
  height: 50px;
}
span.flavour-select {
  font-weight: bold;
  padding-right: 10px;
  display: inline-block;
}

input#MapReset,
input#DefectsMapReset
 {
  position: absolute;
  bottom: 47px;
  left: 2px;
  border: none;
  background: none;
  text-decoration: underline;
  font-weight: normal;
  font-size: 20px;
  color: #293a96;
  text-transform: uppercase;
  z-index: 20;
  padding-left: 18px;
  padding-bottom: 7px;
}

#page input#MapReset:hover,
#page input#DefectsMapReset:hover
 {
  background: none;
}


.profile-scores-block {
  position: relative;
  float: left;
}

.profile-scores-large {
  height: 466px;
  width: 660px;
  margin-left: -660px;
}

.profile-scores-small {
  height: 93px;
  width: 132px;
  margin-left: -132px;
}

.profile-totals {
  font-weight: bold;
  font-size: 130%;
  margin-bottom: 5px;
}


.group-profile-container {
  position: relative;
  float: left;
  padding: 15px;
}

.group-profile-container h2 {
  font-size: 30px;
  max-width: 630px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


#global-score-container {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 37px;
  z-index: 99;
  margin-top: 30px;
}

#global-score {
  position: absolute;
  right: -31px;
}

#scores-block {
  float: left;
  margin-bottom: 5px;
}

#scores-block .scores {
  float: left;
  margin-bottom: 5px;
  min-height: 100px;
  width: 179px;
}

.score-block {
  float: left;
  margin-left: 3px;
  margin-right: 4px;
}

#global-score, .score-block {
  width: 66px;
  background-color: #ecf3f9;
  border-width: 2px;
  border-radius: 8px;
  border: solid;
  border-color: #424f59;
  padding: 3px 5px;
  text-align: center;
  margin-bottom: 7px;
}

#global-score h3,
.score-block h3,
.flavcount-block h3
 {
  font-size: 17px;
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  text-align: center;
  line-height: 18px;
  margin-bottom: 7px;
}

#global-score p,
.score-block p {
  margin-bottom: 5px;
}

#global-score #score-number,
.score-block #score-number {
  font-size: 22px;
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  color: #084b7e;

}

.flavcount-block {
  float: left;
  margin-left: 3px;
  margin-right: 4px;
  width: 145px;
  background-color: #ecf3f9;
  border-width: 2px;
  border-radius: 8px;
  border: solid;
  border-color: #084b7e;
  padding: 3px 10px;
  margin-bottom: 7px;
}

.fc-label {
  float: left;
  width: 115px;
}


.profile-details-table, .profile-evaluation {
  background-color: #ecf3f9;
  border-width: 2px;
  border-radius: 8px;
  border: solid;
  border-color: #084b7e;
  padding: 3px 5px;
  margin-bottom: 15px;
}

.profile-details-table td:first-child, .profile-evaluation td:first-child {
  font-weight: bold;
}

span.score-circle {
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(74,45,13,1) 37%, rgba(74,45,13,0.89) 48%, rgba(91,65,14,0.78) 59%, rgba(104,81,15,0) 68%, rgba(124,105,16,0) 81%, rgba(212,209,25,0) 100%);
  /*background: radial-gradient(ellipse at center, rgba(74,45,13,1) 37%, rgba(74,45,13,0.89) 48%, rgba(91,65,14,0.78) 59%, rgba(104,81,15,0) 68%, rgba(124,105,16,0) 81%, rgba(212,209,25,0) 100%);*/
  /* background: radial-gradient(ellipse at center, rgba(74,45,13,1) 27%, rgba(74,45,13,0.89) 38%, rgba(91,65,14,0.78) 49%, rgba(104,81,15,0) 58%, rgba(124,105,16,0) 71%, rgba(212,209,25,0) 100%);*/

}

span.flavour-name {
  position: absolute;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -0.04em;
  text-align: center;
  color: #eee;
}

span.score-flavour {
  width: 120px;
  display:inline-block;
}

span.score-bar {
  background-color: blue;
  display: inline-block;
}

/* ****************************************** FORM STYLING ************************************** */

.hide-conditional {
  display: none !important;
}

.hide-read-only-field {
  display: none !important;
}

.sp-profiling-form .chosen-container,
.sp-profiling-form .frm_slimselect.ss-main {
  max-width: 100% !important;
  width: 100% !important;
}

.sp-profiling-form .chosen-container span,
.sp-profiling-form .ss-main .ss-single
{
  font-size: 16px;
  font-weight: bold;
  color: #084b7e;
  /*line-height: 1.3em;*/
}

.sp-profiling-form .chosen-container-single .chosen-single,
.sp-profiling-form .ss-main .ss-values
 {
  /* width: 700px !important; */
  width: 100% !important;
}


.sp-profiling-form .frm_section_heading {
  border: 1px solid #bbc4cc;
  border-radius: 10px;
  background-color: #ecf3f9;
  padding: 2px 6px 2px 25px;
  margin-top: 25px;
}

.sp-profiling-form .frm_section_heading h3 {
  border: none !important;
  padding: 15px 0 3px 0;
  margin: 0;
  font-size: 18px;
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  font-weight: bold;
  color: #084b7e;
}

.sp-profiling-form .frm_section_spacing {
  margin-bottom: 12px !important;
}

/* hide the select for picked flavours - better to change those to read only inputs */
[id^=field_flav-prof-dark-comp],
[id^=field_flav-prof-dark-defect] {
  display: none;
}

.sp-profiling-form .frm_form_field .frm_form_field {
  margin-left: 25px;
  font-size: 15px;
}

.sp-profiling-form .frm_form_field .frm_form_field.flav-diag-large-container {
  margin-left: 0;
  height: 466px;
}

.sp-profiling-form .sp-field-indent.frm_form_field {
  margin-left: 55px;
}

.sp-profiling-form .frm_toggle_container {
  display:block !important;
}

.sp-profiling-form div.frm_description {
  border: 2px solid #4c9ad642;
  border-radius: 5px;
  background-color: #8dc3ef45;
  padding: 5px 9px 3px 5px !important;

}

.sp-profiling-form .traffic-lights div.frm_description {
  margin-left: 48px;
  max-width: 700px;
}

.sp-profiling-form .frm_left_container div.frm_description {
  max-width: 530px;
  /* margin-left: 160px; */
}

.sp-profiling-form .frm_section_heading div.frm_description {
  max-width: 640px;
  margin-left: 0px;
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
}

.sp-profiling-form .sp-options-descr-indent div.frm_description {
  margin-left: 76px;
  max-width: 642px;
}

.sp-profiling-form .frm_top_container label.frm_primary_label {
  margin-top: 30px;
  margin-bottom: 4px;
}

.sp-condition-check .frm_top_container .frm_opt_container {
  margin-left: 30px;
}


/* Need to select parent of #calc-monitor in jQuery and add css */
#frm_field_747_container,
#frm_field_411_container {
  position: -webkit-sticky;
  position: sticky;
  top: 34px;
  z-index: 100;
  /* margin-top: 37px; */
  opacity: 0.75;
  margin-bottom: 0;
}

#calc-monitor {
  position: absolute;
  right: -205px;
  width: 188px;
  min-height: 360px;
  margin-top: 100px;
}

#calc-monitor h5 {
  margin-top: 10px;
}

ul#calc-output {
  list-style: none;
  margin-left: 0;
}

ul#calc-output span {
  display: inline-block;
  width: 107px;
  font-weight: bold;
}

.sp-profiling-form .flav-diag-large {
  float: none;
}

#sample-info {

  font-size: 15px;
}

/* Customize the label (the container) */
.frm_style_profiling-form-style.with_frm_style .traffic-lights .frm_radio label {
 display: block;
 position: relative;
 margin-bottom: 12px;
 cursor: pointer;
 font-size: 15px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 padding-left: 45px !important;
}

/* Hide the browser's default radio button */
.traffic-lights label input {
 position: absolute;
 opacity: 0;
}

/* Create a custom radio button */
.traffic-lights label .traffic {
 position: absolute;
 top: -2px;
 left: 0;
 height: 1.5em;
 width: 1.5em;
 border-radius: 50%;
 background-color: blue;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.traffic:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the indicator (dot/circle) when checked */
.traffic-lights label input:checked ~ .traffic:after {
 display: block;
}

/* Style the indicator (dot/circle) */
.traffic-lights label .traffic:after {
 top: 0.4em;
 left: 0.4em;
 width: 0.7em;
 height: 0.7em;
 border-radius: 50%;
 background: #ececec;
}

/* green 1 (lightest) */
.condition label[for*="-0"] .traffic,
.condition-reason label[for*="-1"] .traffic,
.yes label[for*="-0"] .traffic,
.reaction label[for*="-0"] .traffic,
.like-it label[for*="-4"] .traffic,
.zero-scale label[for*="-4"] .traffic,
.characteristics label[for*="-4"] .traffic,
.character label[for*="-4"] .traffic {
    background-color: #009933;
}

/* green/amber */
.zero-scale label[for*="-3"] .traffic,
.characteristics label[for*="-3"] .traffic,
.character label[for*="-3"] .traffic {
    background-color: #abbb10;
}

/* amber 1 (lightest) */
.reaction label[for*="-1"] .traffic,
.indifferent label[for*="-4"] .traffic,
.zero-scale label[for*="-2"] .traffic,
.characteristics label[for*="-2"] .traffic,
.character label[for*="-2"] .traffic {
    background-color: #ff9900;
}

/* amber/red */
.zero-scale label[for*="-1"] .traffic,
.characteristics label[for*="-1"] .traffic,
.character label[for*="-1"] .traffic {
    background-color: #ea5613;
}

/* red 1 (lightest)*/
.condition label[for*="-1"] .traffic,
.condition-reason label[for*="-0"] .traffic,
.reaction label[for*="-2"] .traffic,
.dislike label[for*="-4"] .traffic,
.zero-scale label[for*="-0"] .traffic,
.characteristics label[for*="-0"] .traffic,
.character label[for*="-0"] .traffic {
    background-color: #cc0000;
}

/* not sure */
/* khaki 1 */
.notsure label[for*="-4"] .traffic,
.reaction label[for*="-3"] .traffic {
    background-color: #666633;
}

/* On mouse-over, add a grey background color */
.reaction label:hover input ~ .traffic {
 background-color: #777;
}

/* green 2 */
.like-it label[for*="-3"] .traffic {
    background-color: #007033;
}

/* green 3 */
.like-it label[for*="-2"] .traffic {
    background-color: #006633;
}

/* green 4 */
.like-it label[for*="-1"] .traffic {
    background-color: #004422;
}

/* green 5 (darkest)*/
.like-it label[for*="-0"] .traffic {
    background-color: #003311;
}

/* amber 2 */
.indifferent label[for*="-3"] .traffic {
    background-color: #cc8800;
}

/* amber 3 */
.indifferent label[for*="-2"] .traffic {
    background-color: #aa7700;
}

/* amber 4 */
.indifferent label[for*="-1"] .traffic {
    background-color: #774400;
}

/* amber 5 (darkest) */
.indifferent label[for*="-0"] .traffic {
    background-color: #552200;
}

/* red 2 */
.dislike label[for*="-3"] .traffic {
    background-color: #990000;
}

/* red 3 */
.dislike label[for*="-2"] .traffic {
    background-color: #770000;
}

/* red 4 */
.dislike label[for*="-1"] .traffic {
    background-color: #550000;
}

/* red 5 (darkest) */
.dislike label[for*="-0"] .traffic {
    background-color: #330000;
}

/* khaki 2 */
.notsure label[for*="-3"] .traffic {
    background-color: #878744;
}

/* khaki 3 */
.notsure label[for*="-2"] .traffic {
    background-color: #999955;
}

/* khaki 4 */
.notsure label[for*="-1"] .traffic {
    background-color: #aaaa66;
}

/* khaki 5 */
.notsure label[for*="-0"] .traffic {
    background-color: #bbbb88;
}

#profile-container {
  margin-top: 15px;
  padding: 0 0 15px 25px;
  /* position: relative; */
  /* float: left; */
  width: 870px;
  background-color: #0f4379;
}

#profile-container.flavor-card {
  padding: 0 0 1px 25px;
  width: 690px;
}

#profile-container h2 {
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  padding-left: 3px;
  padding-top: 15px;
  margin-bottom: 8px;
  color: #fff;
  font-size: 2.1em;
}

#profile-container.flavor-card h2 {
  padding-top: 12px;
}


#profile-container h5 {
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  height: 25px;
  color: #dddcf2;
  font-weight: 200;
  padding-left: 3px;
  padding-top: 0px;
  padding-bottom: 4px;
}

#profile-container.flavor-card h5 {
  padding-bottom: 0;
}

#profile-grid-container {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 15px;
}

.flavor-card-stats {
  padding: 5px 0 5px 25px;
}

.sample-profile-block {
  display: flex;
  margin-top: 10px;
  margin-bottom: 30px;
 /* width: 855px;  /* hack to get the container to be wide enough for the score section - should redo all with flex etc */
  /* padding: 3px; */
}

.sample-map-block {
  /* width: 660px; */
  background-color: #fff;
}

.sample-character-block {
  padding: 0 0 10px 10px;
  width: 190px;
}

.character-scale-container {
  margin-left: 4px;
}

.character-scale-container h3 {
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  font-size: 15px;
  margin-bottom: 2px;
  color: #fff;
}

.character-scale {
  width: 175px;
  height: 20px;
  background: linear-gradient(to right, #990000, #ca5613, #bb8800, #abbb10, #006622);
}

.character-score {
  display: block;
  height: 100%;
  width: 15px;
  overflow: hidden;
  background-color: rgba(74,45,13,1);
  color: rgba(74,45,13,1);
  margin-left: 20px;
}

.map-point-intens-slider .ui-slider-handle {
  width: 17px;
  height: 19px;
  top: -6px;
  margin-left: -11px;
  font-size: 13px;
  text-align: center;
  user-select: none;
}

/* =================== SHARED DATATABLES LIST TOOLBAR =================== */
/*  Add class  sp-list-wrap  to any DataTables wrapper to inherit these styles.
    Table-specific chrome (headers, row accents, expand button) stays per-section below. */

/* Shared container chrome — bottom corners rounded on all shortcodes */
.sp-list-wrap .dt-container {
  border-radius: 0 0 6px 6px;
}

/* Toolbar rows */
.sp-list-wrap .dt-layout-row {
  padding: 6px 0 !important;
  margin: 0;
  box-sizing: border-box;
}
/* Buttons toolbar row — flush top and bottom */
.sp-list-wrap .dt-layout-row:has(.dt-buttons) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Table row — small top gap between toolbar and table header */
.sp-list-wrap .dt-layout-row:has(table) {
  padding-top: 3px !important;
}

/* All toolbar/pagination/table cells — consistent 10px inset from the border */
.sp-list-wrap .dt-layout-row > .dt-layout-start,
.sp-list-wrap .dt-layout-row > .dt-layout-end,
.sp-list-wrap .dt-layout-row > .dt-layout-full {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

/* Button row */
.sp-list-wrap .dt-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
}

/* All buttons — compact, outlined */
.sp-list-wrap .dt-buttons .dt-button {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  background-image: none !important;
  color: #084b7e !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  padding: 3px 10px !important;
  font-size: 0.82em !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  margin: 0 !important;
}
.sp-list-wrap .dt-buttons .dt-button:hover,
.sp-list-wrap .dt-buttons .dt-button:focus,
.sp-list-wrap .dt-buttons .dt-button:active {
  background: #084b7e !important;
  color: #fff !important;
  border-color: #084b7e !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Primary action button (New group, New session, etc.) */
.sp-list-wrap .dt-buttons .dt-button.sp-btn-new-group,
.sp-list-wrap .dt-buttons .dt-button.sp-btn-primary {
  background: #084b7e !important;
  color: #fff !important;
  border-color: #084b7e !important;
  margin-left: 6px !important;
}
.sp-list-wrap .dt-buttons .dt-button.sp-btn-new-group:hover,
.sp-list-wrap .dt-buttons .dt-button.sp-btn-primary:hover {
  background: #0a3d66 !important;
  border-color: #0a3d66 !important;
}

/* Page-length dropdown panel */
.sp-list-wrap .dt-button-collection {
  background: #fff;
  border: 1px solid #084b7e;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(8,75,126,0.12);
  padding: 4px 0;
}
.sp-list-wrap .dt-button-collection .dt-button {
  background: transparent !important;
  color: #084b7e !important;
  font-weight: 400 !important;
  padding: 5px 14px !important;
  border-radius: 0 !important;
  border: none !important;
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 !important;
}
.sp-list-wrap .dt-button-collection .dt-button:hover,
.sp-list-wrap .dt-button-collection .dt-button.dt-button-active {
  background: #eaf3fb !important;
  color: #084b7e !important;
  border: none !important;
}

/* Search input — compact with placeholder, no "Search:" label */
.sp-list-wrap .dt-search input {
  padding: 3px 7px !important;
  height: 26px !important;
  min-height: unset !important;
  box-sizing: border-box !important;
  font-size: 0.82em !important;
  line-height: 1.4 !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
.sp-list-wrap .dt-search input:focus {
  border-color: #084b7e !important;
  outline: none !important;
  box-shadow: none !important;
}
.sp-list-wrap .dt-search {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

/* Fix dropdown arrow overlapping page-length value + kill theme bottom-margin on selects */
.sp-list-wrap .dt-length select {
  padding-right: 22px;
  margin-bottom: 0 !important;
  -webkit-appearance: auto;
  appearance: auto;
}

/* Inline filter dropdowns — same height as search input and buttons */
.sp-list-wrap .sp-list-filter {
  height: 26px !important;
  min-height: unset !important;
  padding: 2px 8px !important;
  font-size: 0.82em !important;
  line-height: 1.4 !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  color: #084b7e !important;
  background: #fff !important;
  box-sizing: border-box !important;
  vertical-align: middle;
  margin: 0 4px 0 0 !important;
  cursor: pointer;
  -webkit-appearance: auto;
  appearance: auto;
  padding-right: 22px !important;
}
.sp-list-wrap .sp-list-filter:focus {
  outline: none !important;
  border-color: #084b7e !important;
  box-shadow: none !important;
}

/* Processing/loading bar — full width matching the table's 10px side inset */
.sp-list-wrap .dt-processing {
  top: 120px !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
  padding: 10px 14px !important;
  font-size: 0.88em !important;
  color: #084b7e !important;
  background: #fff !important;
  border: 2px solid #084b7e !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-align: center !important;
}

/* =================== GROUPS LIST SHORTCODE [sp-groups-list] =================== */

/* List-table container: full border + overflow clip (profile cards use layout-row borders instead) */
.sp-groups-list-wrap .dt-container,
.sp-producers-list-wrap .dt-container {
  border-left: 2px solid #084b7e;
  border-right: 2px solid #084b7e;
  border-bottom: 2px solid #084b7e;
  overflow: hidden;
}
/* Keep table at 100% so it never bleeds past the container border */
.sp-groups-list-wrap table.dataTable,
.sp-producers-list-wrap table.dataTable {
  width: 100% !important;
  box-sizing: border-box;
}

.sp-groups-login-msg {
  color: #666;
  font-style: italic;
}

.sp-groups-add-btn {
  display: inline-block;
  background-color: #084b7e;
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  transition: background-color 0.2s ease;
}
.sp-groups-add-btn:hover {
  background-color: #0a6ab3;
  color: #fff !important;
  text-decoration: none;
}

.sp-groups-list-wrap {
  margin: 8px 0 24px;
}


/* Expand-toggle column — circle +/− button */
#sp-groups-list-table tbody td.sp-expand-ctrl {
  cursor: pointer;
  text-align: center;
  width: 28px;
  padding: 6px 4px;
  vertical-align: middle;
}
#sp-groups-list-table tbody td.sp-expand-ctrl::before {
  content: '+';
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  background-color: #084b7e;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  transition: background-color 0.2s ease;
}
#sp-groups-list-table tbody td.sp-expand-ctrl:hover::before {
  background-color: #0a6ab3;
}
#sp-groups-list-table tbody tr.sp-row-expanded td.sp-expand-ctrl::before {
  content: '\2212';
  background-color: #0a6ab3;
}

/* Left-align Date column */
#sp-groups-list-table th.dt-left,
#sp-groups-list-table td.dt-left {
  text-align: left !important;
}

/* Header: dark navy + white text — matches session-samples header bar */
#sp-groups-list-table thead th {
  background-color: #0f4379 !important;
  color: #fff !important;
  border-right: 1px solid rgba(255,255,255,0.15) !important;
  border-bottom: 2px solid #084b7e !important;
  padding: 10px 12px;
}

/* Top-align all body cells + faint column dividers */
#sp-groups-list-table tbody td {
  vertical-align: top;
  border-right: 1px solid rgba(8,75,126,0.1);
}

/* Hover accent on first cell — inset shadow avoids layout shift */
#sp-groups-list-table tbody tr:hover > td:first-child {
  box-shadow: inset 4px 0 0 #084b7e;
}

/* Highlight the expanded parent row */
#sp-groups-list-table tbody tr.sp-row-expanded > td {
  background-color: #eaf3fb !important;
  font-weight: 600;
}
#sp-groups-list-table tbody tr.sp-row-expanded > td:first-child {
  box-shadow: inset 4px 0 0 #084b7e;
}

/* Child row wrapper */
.sp-child-row-inner {
  padding: 12px 16px 12px 24px;
  background-color: #f0f7ff;
  border-left: 4px solid #084b7e;
}

/* Sessions sub-table */
.sp-groups-sessions-subtable {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 10px 0;
  font-size: 0.92em;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(8,75,126,0.08);
}
.sp-groups-sessions-subtable thead th {
  background-color: #dceaf7;
  border-bottom: 2px solid #084b7e;
  border-right: 1px solid rgba(8,75,126,0.15);
  padding: 7px 12px;
  text-align: left;
  font-weight: 700;
  color: #084b7e;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sp-groups-sessions-subtable tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid #e0ecf7;
  border-right: 1px solid rgba(8,75,126,0.1);
  vertical-align: middle;
}
.sp-groups-sessions-subtable tbody tr:last-child td {
  border-bottom: none;
}
.sp-groups-sessions-subtable tbody tr:hover td {
  background-color: #f4f9fe;
}
.sp-groups-sessions-subtable a {
  color: #084b7e;
  text-decoration: none;
}
.sp-groups-sessions-subtable a:hover {
  text-decoration: underline;
}

.sp-no-sessions {
  color: #999;
  font-style: italic;
  padding: 8px 16px;
  margin: 0;
}

.sp-groups-add-session-link {
  display: inline;
  margin-left: 6px;
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}
.sp-groups-add-session-link:hover {
  opacity: 1;
  text-decoration: underline;
  color: #fff;
}
#sp-groups-list-table th.sp-col-group,
#sp-groups-list-table td.sp-col-group {
  width: 25%;
}

/* =================== PRODUCERS LIST SHORTCODE [sp-producers-list] =================== */

.sp-producers-login-msg {
  color: #666;
  font-style: italic;
}

.sp-producers-list-wrap {
  margin: 8px 0 24px;
}


/* Header: dark navy matching session-samples */
#sp-producers-list-table thead th {
  background-color: #0f4379 !important;
  color: #fff !important;
  border-right: 1px solid rgba(255,255,255,0.15) !important;
  border-bottom: 2px solid #084b7e !important;
  padding: 10px 12px;
}

/* Body cells */
#sp-producers-list-table tbody td {
  vertical-align: middle;
  border-right: 1px solid rgba(8,75,126,0.1);
  padding: 8px 10px;
}

/* Hover accent on first cell — inset shadow avoids layout shift */
#sp-producers-list-table tbody tr:hover > td:first-child {
  box-shadow: inset 4px 0 0 #084b7e;
}
#sp-producers-list-table tbody tr:hover > td {
  background-color: #f4f9fe;
}

/* Name column — proportional width, shrinkable */
#sp-producers-list-table th.sp-col-producer-name,
#sp-producers-list-table td.sp-col-producer-name {
  width: 22%;
  font-weight: 600;
}
.sp-org-bracket {
  color: #7a9ec0;
  font-weight: 400;
}


/* Private tag — used inside Owner cell */
.sp-private-tag {
  color: #999;
  font-weight: 400;
  font-size: 0.88em;
}

/* Private badge — standalone cell */
.sp-private-badge {
  display: inline-block;
  background-color: #f0e6fb;
  color: #7b3fa0;
  border: 1px solid #c9a0e0;
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Private column — narrow, centred */
#sp-producers-list-table th.sp-col-private,
#sp-producers-list-table td.sp-col-private {
  width: 72px;
  text-align: center;
}


/* Delete button */
.sp-delete-producer-btn {
  background: none;
  border: 1px solid #c0392b;
  color: #c0392b;
  border-radius: 3px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.sp-delete-producer-btn:hover {
  background: #c0392b;
  color: #fff;
}
.sp-delete-producer-btn--disabled,
.sp-delete-producer-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: #aaa;
  color: #aaa;
  pointer-events: none;
}
/* Wrapper span carries the tooltip — pointer-events must be on so title shows */
.sp-delete-producer-wrap {
  display: inline-block;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='20' height='20'%3E%3Cpath fill='%23c0392b' d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'%3E%3C/path%3E%3C/svg%3E") 10 10, not-allowed;
}
.sp-delete-producer-wrap .sp-delete-producer-btn--disabled:hover {
  background: none;
  color: #aaa;
}

/* =================== SESSION SAMPLES SHORTCODE [sp-session-samples] =================== */

.sp-ssn-samples-wrap {
  margin: 8px 0 24px;
}

/* Header bar */
.sp-ssn-header {
  background-color: #0f4379;
  padding: 15px 25px 12px;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
}
.sp-ssn-title {
  color: #fff;
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.6em;
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  flex: 1;
}
.sp-ssn-header-btn {
  flex-shrink: 0;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 0.75em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sp-ssn-header-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

/* Group info bar — sits between the session title and the DataTables chrome */
.sp-ssn-group-info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 16px 8px;
  background: #e8eef4;
  border-left: 2px solid #084b7e;
  border-right: 2px solid #084b7e;
  border-bottom: 1px solid #a8bccf;
  font-size: 0.88em;
  color: #3a4a5a;
}
.sp-ssn-group-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.sp-ssn-group-link {
  color: #084b7e;
  text-decoration: none;
}
.sp-ssn-group-link:hover {
  text-decoration: underline;
}

/* Hide the table header — this is a card layout, not a spreadsheet */
#sp-session-samples-table thead {
  display: none;
}

/* Card gap spacing only — borders are on the cells, not the row */
#sp-session-samples-table tbody tr + tr {
  margin-top: 8px; /* not supported on tr; handled by border-spacing below */
}

/* Use border-spacing to gap the cards */
#sp-session-samples-table {
  border-collapse: separate;
  border-spacing: 0 8px;
  min-height: 140px;
}


/* Body cells */
#sp-session-samples-table tbody td {
  vertical-align: top;
  padding: 0;
  border-top: 2px solid #084b7e;
  border-bottom: 2px solid #084b7e;
  background-color: #fff;
  overflow: hidden; /* clips child backgrounds to the cell's border-radius */
}
#sp-session-samples-table tbody td:first-child {
  border-left: 2px solid #084b7e;
  border-radius: 6px 0 0 6px;
}
#sp-session-samples-table tbody td:last-child {
  border-right: 2px solid #084b7e;
  border-radius: 0 6px 6px 0;
}
#sp-session-samples-table tbody tr:hover td {
  background-color: #f4f9fe;
}

/* Placeholder card shown while new sample row loads after AJAX submit */
.sp-ssn-placeholder-row td {
  border: 2px dashed #7a9ec0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  padding: 16px 20px !important;
}
.sp-ssn-row-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #7a9ec0;
  font-style: italic;
  font-size: 0.9em;
}
.sp-ssn-row-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #d4e3f0;
  border-top-color: #084b7e;
  border-radius: 50%;
  animation: sp-ssn-spin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes sp-ssn-spin {
  to { transform: rotate(360deg); }
}

/* Thumbnail column (left) */
.sp-ssn-col-thumb {
  width: 148px;
  text-align: center;
  padding: 9px !important;
  vertical-align: middle !important;
  background-color: #0f4379 !important;
  border-right: 1px solid rgba(255,255,255,0.3) !important;
}
.sp-ssn-profile-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sp-ssn-profile-thumb .sample-map-block {
  display: block; /* removes inline bottom gap */
  border: 2px solid #084b7e;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,67,121,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  line-height: 0; /* eliminates any descender space below the SVG */
}
.sp-ssn-profile-thumb:not(:has(.sp-ssn-thumb-btn:hover)):hover .sample-map-block {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(15,67,121,0.28);
}
/* Overlay — three action icons, shown on thumb hover */
.sp-ssn-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 6px;
  background: rgba(10, 35, 70, 0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.sp-ssn-profile-thumb:hover .sp-ssn-thumb-overlay {
  opacity: 1;
  pointer-events: auto;
}
.sp-ssn-thumb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.sp-ssn-thumb-btn:hover {
  background: rgba(255, 255, 255, 0.38);
  transform: scale(1.18);
  color: #fff;
}
.sp-ssn-thumb-btn svg {
  width: 15px;
  height: 15px;
}

/* Detail column (right) — no outer padding; batch bar goes edge-to-edge */
.sp-ssn-col-detail {
  padding: 0 !important;
}
.sp-ssn-detail-row {
  padding: 0;
}

/* Row 1: Batch name bar — full-width dark blue */
.sp-ssn-detail-batch {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #0f4379;
  padding: 9px 14px 9px 14px;
  border-radius: 0 4px 0 0; /* match inner curve of the card's top-right corner */
}
.sp-ssn-batch-name {
  flex: 1;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  font-size: 0.95em;
}
.sp-ssn-action-link {
  flex-shrink: 0;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding: 3px 10px;
  font-size: 0.8em;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 4px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.sp-ssn-action-link:hover {
  background-color: rgba(255,255,255,0.18);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}
/* Wrapper carries the tooltip; button pointer-events:none lets the span receive hover */
.sp-ssn-remove-wrap {
  display: inline-block;
  cursor: not-allowed;
}
button.sp-ssn-action-remove--disabled {
  background: none;
  font-family: inherit;
  line-height: inherit;
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Detail cell: batch bar full-width on top, sub-area below */
.sp-ssn-detail-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Sub-area below title: image strip left, content right */
.sp-ssn-detail-below {
  display: flex;
  align-items: stretch;
  flex: 1;
}
.sp-ssn-product-thumb {
  flex: none;
  align-self: stretch;
  aspect-ratio: 3 / 4;
  background-color: #4a4f57;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,0.15);
}
/* Placeholder SVG — absolutely positioned like the img so it can't inflate the box */
.sp-ssn-product-thumb svg {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  transform: scale(0.75);
}

.sp-ssn-product-thumb img {
  /* Absolute so the image never influences the box dimensions */
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
  display: block;
  box-sizing: border-box;
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
}
.sp-ssn-detail-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Row 2: Scores panel */
.sp-ssn-detail-scores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 14px;
}

/* Score pills — labelled with value below */
.sp-ssn-score-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background-color: #ecf3f9;
  border: 2px solid #424f59;
  border-radius: 8px;
  padding: 4px 10px 5px;
  font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
  min-width: 48px;
  text-align: center;
}
.sp-ssn-pill-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6a7a;
  line-height: 1.2;
}
.sp-ssn-pill-val {
  font-size: 16px;
  font-weight: 700;
  color: #084b7e;
  line-height: 1.3;
}
.sp-ssn-score-pill.sp-ssn-score-minor {
  border-width: 1px;
  padding: 3px 8px 4px;
  min-width: 42px;
}
.sp-ssn-score-pill.sp-ssn-score-minor .sp-ssn-pill-val {
  font-size: 13px;
  font-weight: 500;
}
.sp-ssn-score-pill.sp-ssn-score-zero {
  opacity: 0.45;
}

/* Pill hover animation — transform + box-shadow only; layout boxes never shift */
.sp-ssn-detail-scores .sp-ssn-score-pill {
  transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}
/* Hovered minor pill: scale up, bold text, thicker border via box-shadow (no layout impact) */
.sp-ssn-detail-scores .sp-ssn-score-pill.sp-ssn-score-minor:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 1px #424f59;
}
.sp-ssn-detail-scores .sp-ssn-score-pill.sp-ssn-score-minor:hover .sp-ssn-pill-val {
  font-weight: 700;
}
/* Score scales down while any minor pill is hovered */
.sp-ssn-detail-scores:has(.sp-ssn-score-minor:hover) .sp-ssn-score-pill:not(.sp-ssn-score-minor) {
  transform: scale(0.85);
}

/* Batch creation date — pushed to far right of the scores flex row */
.sp-ssn-batch-date {
  margin-left: auto;
  font-size: 0.82em;
  color: #5a6a7a;
  white-space: nowrap;
}

/* Sets tag inline with scores */
.sp-ssn-sets-tag {
  display: inline-block;
  font-size: 0.82em;
  color: #3a4a5a;
  background: #eef2f5;
  border-radius: 4px;
  padding: 3px 8px;
}

/* Edit batch / product links — right-aligned, vertically centred inside the scores flex row */
.sp-ssn-edit-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  margin-left: auto;
  align-self: center;
}
.sp-ssn-edit-link {
  font-size: 0.78em;
  color: #5a7a9a;
  text-decoration: none;
  white-space: nowrap;
}
.sp-ssn-edit-link:hover {
  color: #084b7e;
  text-decoration: underline;
}

/* Row 3: Flavor profile links */
.sp-ssn-detail-links {
  font-size: 0.88em;
  padding: 0 14px 2px;
  display: flex;
  align-items: baseline;
}
.sp-ssn-links-label {
  font-weight: 600;
  color: #5a6a7a;
  flex: 0 0 9.5em;
}
.sp-ssn-detail-links a {
  color: #084b7e;
  text-decoration: none;
  font-weight: 500;
}
.sp-ssn-detail-links a:hover {
  text-decoration: underline;
}
.sp-ssn-link-sep {
  color: #aab;
  margin: 0 2px;
}

/* Login / error messages */
.sp-ssn-login-msg,
.sp-ssn-error-msg {
  padding: 20px;
  background-color: #ecf3f9;
  border-left: 4px solid #084b7e;
  color: #1a2a3a;
  font-size: 0.95em;
  border-radius: 0 4px 4px 0;
}

/* DataTables toolbar row — thin side borders so it reads as part of the table */
#sp-session-samples-wrap .dt-layout-row {
  border-left: 2px solid #084b7e;
  border-right: 2px solid #084b7e;
  padding: 6px 0;
  margin: 0;
  box-sizing: border-box;
}
/* First toolbar row — top border removed; group info bar provides the visual top boundary */
#sp-session-samples-wrap .dt-layout-row:first-child {
  border-radius: 0 0 0 0;
  padding-top: 11px;
  padding-bottom: 3px;
}
#sp-session-samples-wrap .dt-container {
  border-bottom: 2px solid #084b7e;
  border-radius: 0 0 6px 6px;
}

/* Sort buttons */
#sp-session-samples-wrap .dt-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}
#sp-session-samples-wrap .dt-buttons .dt-button.sp-ssn-sort-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  color: #084b7e !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  padding: 3px 10px !important;
  font-size: 0.82em !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  margin: 0 !important;
}
#sp-session-samples-wrap .dt-buttons .dt-button.sp-ssn-sort-btn:hover {
  background: #084b7e !important;
  color: #fff !important;
}
#sp-session-samples-wrap .dt-buttons .dt-button.sp-ssn-sort-btn.sp-ssn-sort-active {
  background: #084b7e !important;
  color: #fff !important;
}
/* Visual separator before # Order and page-length buttons */
#sp-session-samples-wrap .dt-buttons .dt-button.sp-ssn-sort-btn-num,
#sp-session-samples-wrap .dt-buttons .dt-button.sp-ssn-btn-pagelength {
  margin-left: 0 !important;
}
/* "New sample" button — visually distinct action button */
#sp-session-samples-wrap .dt-buttons .dt-button.sp-ssn-btn-new-sample {
  background: #084b7e !important;
  color: #fff !important;
  margin-left: 12px !important;
  border-color: #084b7e !important;
}
#sp-session-samples-wrap .dt-buttons .dt-button.sp-ssn-btn-new-sample:hover {
  background: #0a3d66 !important;
  border-color: #0a3d66 !important;
}
/* New sample modal chrome + widget-width: moved to sp-profile-forms.css */
.sp-ssn-modal-loading {
  color: #888;
  font-style: italic;
  padding: 4px 0;
}

/* Compact search input */
#sp-session-samples-wrap .dt-search input {
  padding: 3px 7px !important;
  height: 26px !important;
  min-height: unset !important;
  box-sizing: border-box !important;
  font-size: 0.82em !important;
  line-height: 1.4 !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* Tighten gap between toolbar and first card */
#sp-session-samples-wrap #sp-session-samples-table {
  margin-top: -4px;
}

/* Toolbar content inset */
#sp-session-samples-wrap .dt-layout-row > * {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

/* Fix dropdown arrow overlapping page-length value */
#sp-session-samples-wrap .dt-length select {
  padding-right: 22px;
  -webkit-appearance: auto;
  appearance: auto;
}

/* Search box alignment */
#sp-session-samples-wrap .dt-search {
  margin-bottom: 0;
}

/* Responsive */
@media screen and (max-width: 560px) {
  .sp-ssn-col-thumb {
    width: auto;
    display: block;
    padding: 10px 10px 0 10px !important;
    border-radius: 4px 4px 0 0 !important;
    border-right: 2px solid #084b7e !important;
    border-bottom: none !important;
  }
  .sp-ssn-col-detail {
    display: block;
    border-left: 2px solid #084b7e !important;
    border-radius: 0 0 4px 4px !important;
    border-top: none !important;
  }
  .sp-ssn-detail-batch {
    border-radius: 0;
  }
  .sp-ssn-detail-scores {
    gap: 5px;
  }
}

/* ── Lightbox ──────────────────────────────────────────────── */
#sp-ssn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-ssn-lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  cursor: pointer;
}
.sp-ssn-lb-frame {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 6px;
  padding: 16px;
  max-width: 94vw;
  max-height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-ssn-lb-img {
  display: block;
  max-width: min(1100px, 88vw);
  max-height: 86vh;
  border-radius: 3px;
}
.sp-ssn-lb-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f4379;
  color: #fff;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sp-ssn-lb-close:hover {
  background: #084b7e;
}
.sp-ssn-lb-prev,
.sp-ssn-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,67,121,0.85);
  color: #fff;
  border: none;
  width: 44px;
  height: 70px;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.sp-ssn-lb-prev { left: -56px; }
.sp-ssn-lb-next { right: -56px; }
.sp-ssn-lb-prev:hover,
.sp-ssn-lb-next:hover {
  background: rgba(8,75,126,1);
}
/* Pointer cursor on clickable thumbnails */
#sp-session-samples-wrap .sp-ssn-product-thumb img {
  cursor: zoom-in;
}

/* ═══════════════════════════════════════════════════════════════
   [sp-personal-profiles] — Profile Cards
   ═══════════════════════════════════════════════════════════════ */

/* ── DataTables chrome — same pattern as session-samples ──── */
#sp-personal-profiles-wrap .dt-layout-row {
  border-left: 2px solid #084b7e;
  border-right: 2px solid #084b7e;
  padding: 6px 0;
  margin: 0;
  box-sizing: border-box;
}
#sp-personal-profiles-wrap .dt-layout-row:first-child {
  border-top: 2px solid #084b7e;
  padding-top: 11px;
  padding-bottom: 3px;
}
#sp-personal-profiles-wrap .dt-container {
  border-bottom: 2px solid #084b7e;
  border-radius: 0 0 6px 6px;
}
#sp-personal-profiles-wrap .dt-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}
#sp-personal-profiles-wrap .dt-buttons .dt-button.sp-ssn-sort-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  color: #084b7e !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  padding: 3px 10px !important;
  font-size: 0.82em !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  margin: 0 !important;
}
#sp-personal-profiles-wrap .dt-buttons .dt-button.sp-ssn-sort-btn:hover,
#sp-personal-profiles-wrap .dt-buttons .dt-button.sp-ssn-sort-btn.sp-ssn-sort-active {
  background: #084b7e !important;
  color: #fff !important;
}
#sp-personal-profiles-wrap .dt-search input {
  padding: 3px 7px !important;
  height: 26px !important;
  min-height: unset !important;
  box-sizing: border-box !important;
  font-size: 0.82em !important;
  line-height: 1.4 !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
#sp-personal-profiles-wrap .dt-search {
  margin-bottom: 0;
}
#sp-personal-profiles-wrap .dt-layout-row > * {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
#sp-personal-profiles-wrap .dt-length select {
  padding-right: 22px;
  -webkit-appearance: auto;
  appearance: auto;
}

/* ── Per-card border: border-collapse separate + cell borders ── */
#sp-personal-profiles-wrap table.dataTable {
  border-collapse: separate;
  border-spacing: 0 6px;
  width: 100% !important;
}
#sp-personal-profiles-wrap table.dataTable td {
  padding: 0;
  vertical-align: top;
}
#sp-personal-profiles-wrap table.dataTable thead {
  display: none;
}
/* Left cell: left + top + bottom border, rounded left corners */
#sp-personal-profiles-wrap table.dataTable tbody tr td.sp-ssn-col-thumb {
  border-top: 2px solid #084b7e;
  border-bottom: 2px solid #084b7e;
  border-left: 2px solid #084b7e;
  border-radius: 6px 0 0 6px;
}
/* Right cell: right + top + bottom border, rounded right corners */
#sp-personal-profiles-wrap table.dataTable tbody tr td.sp-ssn-col-detail {
  border-top: 2px solid #084b7e;
  border-bottom: 2px solid #084b7e;
  border-right: 2px solid #084b7e;
  border-radius: 0 6px 6px 0;
}

/* ── Left column: wide enough for two 132px SVGs side-by-side ── */
#sp-personal-profiles-wrap .sp-ssn-col-thumb {
  width: 292px;
  padding: 6px !important; /* slightly tighter than session-samples' 9px */
}


/* ── Batches list: DataTables chrome — same pattern as session-samples ── */
#sp-batches-list-wrap .dt-layout-row {
  border-left: 2px solid #084b7e;
  border-right: 2px solid #084b7e;
  padding: 6px 0;
  margin: 0;
  box-sizing: border-box;
}
#sp-batches-list-wrap .dt-layout-row:first-child {
  border-top: 2px solid #084b7e;
  padding-top: 11px;
  padding-bottom: 3px;
}
#sp-batches-list-wrap .dt-container {
  border-bottom: 2px solid #084b7e;
  border-radius: 0 0 6px 6px;
}
#sp-batches-list-wrap .dt-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}
#sp-batches-list-wrap .dt-buttons .dt-button.sp-ssn-sort-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  color: #084b7e !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  padding: 3px 10px !important;
  font-size: 0.82em !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  margin: 0 !important;
}
#sp-batches-list-wrap .dt-buttons .dt-button.sp-ssn-sort-btn:hover,
#sp-batches-list-wrap .dt-buttons .dt-button.sp-ssn-sort-btn.sp-ssn-sort-active {
  background: #084b7e !important;
  color: #fff !important;
}
/* Anchor the DataTables processing overlay inside the table area */
#sp-batches-list-wrap .dt-layout-table {
  position: relative;
}
/* "New batch" button — filled action button at the right (after page-length) */
#sp-batches-list-wrap .dt-buttons .dt-button.sp-ssn-btn-add {
  background: #084b7e !important;
  color: #fff !important;
  border-color: #084b7e !important;
  margin-left: 12px !important;
}
#sp-batches-list-wrap .dt-buttons .dt-button.sp-ssn-btn-add:hover {
  background: #0a3d66 !important;
  border-color: #0a3d66 !important;
}
/* Batch modal chrome: moved to sp-profile-forms.css */
#sp-batches-list-wrap .dt-search input {
  padding: 3px 7px !important;
  height: 26px !important;
  min-height: unset !important;
  box-sizing: border-box !important;
  font-size: 0.82em !important;
  line-height: 1.4 !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
#sp-batches-list-wrap .dt-search {
  margin-bottom: 0;
}
#sp-batches-list-wrap .dt-layout-row > * {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
#sp-batches-list-wrap .dt-length select {
  padding-right: 22px;
  -webkit-appearance: auto;
  appearance: auto;
}
#sp-batches-list-wrap #sp-batches-list-table {
  margin-top: -4px;
}

/* ── Batches list: per-card borders ──────────────────────────── */
#sp-batches-list-table thead {
  display: none;
}
#sp-batches-list-table {
  border-collapse: separate;
  border-spacing: 0 8px;
  min-height: 140px;
  width: 100% !important;
}
#sp-batches-list-table tbody td {
  vertical-align: top;
  padding: 0;
  border-top: 2px solid #084b7e;
  border-bottom: 2px solid #084b7e;
  background-color: #fff;
  overflow: hidden;
}
#sp-batches-list-table tbody td:first-child {
  border-left: 2px solid #084b7e;
  border-radius: 6px 0 0 6px;
}
#sp-batches-list-table tbody td:last-child {
  border-right: 2px solid #084b7e;
  border-radius: 0 6px 6px 0;
}
#sp-batches-list-table tbody tr:hover td {
  background-color: #f4f9fe;
}

/* ── Thumb pair: two slots side-by-side with separator ──────── */
.sp-ppc-thumb-pair {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 8px 0 6px;
}
.sp-ppc-thumb-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
/* Thin white divider between Profile and Group — mirrors the column/card separator */
.sp-ppc-thumb-slot:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}

/* ── Main and group thumbs: overflow:hidden clips nav bar + zoom ── */
.sp-ppc-main-thumb,
.sp-ppc-group-thumb {
  overflow: visible;
  border-radius: 6px;
  cursor: zoom-in;
}

/* ── Bottom nav buttons — transparent bg, same circle style as session-samples ── */
.sp-ppc-thumb-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 4px;
  background: transparent;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
  z-index: 2;
}
.sp-ppc-main-thumb:hover .sp-ppc-thumb-nav,
.sp-ppc-group-thumb:hover .sp-ppc-thumb-nav,
.sp-ssn-profile-thumb:hover .sp-ppc-thumb-nav {
  opacity: 1;
  pointer-events: auto;
}
.sp-ppc-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
  cursor: pointer;
}
.sp-ppc-nav-btn:hover {
  background: rgba(255, 255, 255, 0.38);
  transform: scale(1.18);
  color: #fff;
}
.sp-ppc-nav-btn svg {
  width: 15px;
  height: 15px;
}

/* ── Centre zoom icon — click to open popup ─────────────────── */
.sp-ppc-thumb-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  cursor: pointer;
  z-index: 1;
}
.sp-ppc-main-thumb:hover .sp-ppc-thumb-zoom,
.sp-ppc-group-thumb:hover .sp-ppc-thumb-zoom,
.sp-ssn-profile-thumb:hover .sp-ppc-thumb-zoom {
  opacity: 1;
  pointer-events: auto;
}

/* ── Grey hover overlay — darkens thumb so icons are visible ─── */
.sp-ppc-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 0;
}
.sp-ssn-profile-thumb:hover .sp-ppc-thumb-overlay {
  opacity: 1;
  transform: scale(1.06);
}

.sp-ssn-thumb-clickable {
  cursor: pointer;
}
.sp-ppc-thumb-zoom svg {
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}

/* ── Toggle links under the main thumb ──────────────────────── */
.sp-ppc-toggle-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sp-ppc-toggle-link {
  font-size: 0.68em;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.14s ease;
  cursor: pointer;
  line-height: 1.4;
}
.sp-ppc-toggle-link.sp-ppc-toggle-active {
  color: #fff;
  font-weight: 600;
  font-size: 0.74em;
}
.sp-ppc-toggle-link:hover {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.sp-ppc-toggle-sep {
  color: rgba(255, 255, 255, 0.22);
  font-size: 0.6em;
}
/* Static label (used when toggle not shown, or below group thumb) */
.sp-ppc-thumb-slot-label {
  font-size: 0.68em;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* ── Edit button in title bar ───────────────────────────────── */
.sp-ppc-edit-btn {
  flex-shrink: 0;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding: 3px 10px;
  font-size: 0.8em;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.sp-ppc-edit-btn:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

/* ── SVG popup overlay ──────────────────────────────────────── */
#sp-ppc-svg-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sp-ppc-svg-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  cursor: pointer;
}
#sp-ppc-svg-overlay-content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: min(720px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: auto;
}
/* JS handles SVG block width; just ensure SVG itself scales cleanly */
#sp-ppc-svg-overlay-content svg,
#sp-ppc-svg-overlay-content canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
#sp-ppc-svg-overlay-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f4379;
  color: #fff;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#sp-ppc-svg-overlay-close:hover {
  background: #084b7e;
}
#sp-ppc-svg-overlay-label {
  font-size: 0.82em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6a7a;
}

/* ── Product image lightbox ─────────────────────────────────── */
#sp-ppc-img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Producers list: button bar ──────────────────────────────── */
#sp-producers-list-wrap .dt-buttons {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}
#sp-producers-list-wrap .dt-buttons .dt-button.sp-ssn-btn-add {
  background: #084b7e !important;
  color: #fff !important;
  border-color: #084b7e !important;
  margin-left: 6px !important;
}
#sp-producers-list-wrap .dt-buttons .dt-button.sp-ssn-btn-add:hover {
  background: #0a3d66 !important;
  border-color: #0a3d66 !important;
}

/* ── Producers list: action buttons (Edit / Remove) in table cells ── */
#sp-producers-list-wrap .sp-ssn-action-link {
  color: #084b7e;
  border-color: rgba(8,75,126,0.45);
}
#sp-producers-list-wrap .sp-ssn-action-link:hover {
  background-color: #084b7e;
  border-color: #084b7e;
  color: #fff;
}

/* Producer modal chrome: moved to sp-profile-forms.css */

/* =================== PRODUCTS LIST SHORTCODE [sp-products-list] =================== */

#sp-products-list-wrap .dt-layout-table {
  position: relative;
}

/* Product modal chrome: moved to sp-profile-forms.css */

#sp-products-list-wrap thead {
  display: none;
}

#sp-products-list-wrap {
  margin: 8px 0 24px;
}

/* DataTables chrome — same pattern as session-samples */
#sp-products-list-wrap .dt-layout-row {
  border-left: 2px solid #084b7e;
  border-right: 2px solid #084b7e;
  padding: 6px 0;
  margin: 0;
  box-sizing: border-box;
}
#sp-products-list-wrap .dt-layout-row:first-child {
  border-top: 2px solid #084b7e;
  padding-top: 11px;
  padding-bottom: 3px;
}
#sp-products-list-wrap .dt-container {
  border-bottom: 2px solid #084b7e;
  border-radius: 0 0 6px 6px;
}
#sp-products-list-wrap .dt-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}

/* Sort buttons — identical look to session-samples */
#sp-products-list-wrap .dt-buttons .dt-button.sp-ssn-sort-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  color: #084b7e !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  padding: 3px 10px !important;
  font-size: 0.82em !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  margin: 0 !important;
}
#sp-products-list-wrap .dt-buttons .dt-button.sp-ssn-sort-btn:hover,
#sp-products-list-wrap .dt-buttons .dt-button.sp-ssn-sort-btn.sp-ssn-sort-active {
  background: #084b7e !important;
  color: #fff !important;
}
#sp-products-list-wrap .dt-buttons .dt-button.sp-ssn-btn-add-item {
  background: #084b7e !important;
  color: #fff !important;
  border-color: #084b7e !important;
  margin-left: 12px !important;
}
#sp-products-list-wrap .dt-buttons .dt-button.sp-ssn-btn-add-item:hover {
  background: #0a3d66 !important;
  border-color: #0a3d66 !important;
}

#sp-products-list-wrap .dt-search input {
  padding: 3px 7px !important;
  height: 26px !important;
  min-height: unset !important;
  box-sizing: border-box !important;
  font-size: 0.82em !important;
  line-height: 1.4 !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
#sp-products-list-wrap .dt-search {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
#sp-products-list-wrap .dt-layout-row > * {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
#sp-products-list-wrap .dt-length select {
  padding-right: 22px;
  margin-bottom: 0 !important;
  -webkit-appearance: auto;
  appearance: auto;
}

/* Card spacing — same 8px gap as session-samples */
#sp-products-list-table {
  border-collapse: separate;
  border-spacing: 0 8px;
  min-height: 140px;
}
#sp-products-list-table tbody td {
  vertical-align: top;
  padding: 0;
  border-top: 2px solid #084b7e;
  border-bottom: 2px solid #084b7e;
  background-color: #fff;
  overflow: hidden;
}
#sp-products-list-table tbody td:first-child {
  border-left: 2px solid #084b7e;
  border-radius: 6px 0 0 6px;
}
#sp-products-list-table tbody td:last-child {
  border-right: 2px solid #084b7e;
  border-radius: 0 6px 6px 0;
}
#sp-products-list-table tbody tr:hover td {
  background-color: #f4f9fe;
}

/* Grey placeholder — two maps stacked (positive + defects), each 93px = 186px total */
.sp-pl-no-map-placeholder {
  width: 132px;
  height: 186px;
  background: #eaecee;
  border: 2px solid #d0d5da;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(15,67,121,0.08);
  overflow: hidden;
}


/* Product image lightbox for products list */
#sp-pl-img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   Stock list  —  [sp-stock-list]
   Mirrors products-list DataTables chrome (scoped per wrapper
   per the sp-core CLAUDE.md convention); adds cell styles for
   the 5-column card layout (Producer / Product / Batch / Qty
   / Updated) and the filter row (in-stock + type dropdown).
   ============================================================ */

/* DataTables chrome — same pattern as products list */
#sp-stock-list-wrap .dt-layout-row {
  border-left: 2px solid #084b7e;
  border-right: 2px solid #084b7e;
  padding: 6px 0;
  margin: 0;
  box-sizing: border-box;
}
#sp-stock-list-wrap .dt-layout-row:first-child {
  border-top: 2px solid #084b7e;
  padding-top: 11px;
  padding-bottom: 3px;
}
#sp-stock-list-wrap .dt-container {
  border-bottom: 2px solid #084b7e;
  border-radius: 0 0 6px 6px;
}
#sp-stock-list-wrap .dt-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-left: 2px;
}
#sp-stock-list-wrap .dt-buttons .dt-button.sp-ssn-sort-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  color: #084b7e !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  padding: 3px 10px !important;
  font-size: 0.82em !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  margin: 0 !important;
}
#sp-stock-list-wrap .dt-buttons .dt-button.sp-ssn-sort-btn:hover,
#sp-stock-list-wrap .dt-buttons .dt-button.sp-ssn-sort-btn.sp-ssn-sort-active {
  background: #084b7e !important;
  color: #fff !important;
}
#sp-stock-list-wrap .dt-search input {
  padding: 3px 7px !important;
  height: 26px !important;
  min-height: unset !important;
  box-sizing: border-box !important;
  font-size: 0.82em !important;
  line-height: 1.4 !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}
#sp-stock-list-wrap .dt-search {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
#sp-stock-list-wrap .dt-layout-row > * {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
#sp-stock-list-wrap .dt-length select {
  padding-right: 22px;
  margin-bottom: 0 !important;
  -webkit-appearance: auto;
  appearance: auto;
}

/* Filter row — sits inline alongside the sort buttons (inserted via
   JS as a sibling of .dt-buttons). Match vertical centring + baseline
   so the checkbox, label, and select align with the surrounding sort
   buttons / page-length picker / search box. */
#sp-stock-list-wrap .sp-st-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: center;
  gap: 14px;
  margin: 0;
  font-size: 0.82em;            /* match sp-ssn-sort-btn font-size */
  color: #444;
  line-height: 1.4;
}
#sp-stock-list-wrap .sp-st-filter input[type=checkbox] {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
#sp-stock-list-wrap .sp-st-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
#sp-stock-list-wrap .sp-st-filter input[type=checkbox] {
  margin: 0;
}
#sp-stock-list-wrap .sp-st-filter-label {
  color: #666;
}
#sp-stock-list-wrap .sp-st-select {
  /* Match the sort-button / search-input dimensions so this dropdown
     sits on the same baseline with the same height. !important is
     needed because The7 / Formidable frontend stylesheets ship select
     rules with high specificity that otherwise win. */
  padding: 3px 24px 3px 7px !important;   /* extra right padding leaves room for the arrow */
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  box-sizing: border-box !important;
  border: 1px solid #084b7e !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #084b7e !important;
  font-size: 0.82em !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Hide column header row — card layout */
#sp-stock-list-wrap #sp-stock-list-table thead {
  display: none;
}

/* Card row spacing + borders — same pattern as batches / products list */
#sp-stock-list-table {
  border-collapse: separate;
  border-spacing: 0 8px;
  min-height: 80px;
  /* Fixed layout so the thumb cell's width:124px is honoured rather
     than auto-expanded by DataTables. Without this the thumb cell can
     grow wider than the actual thumb element, leaving asymmetric
     white space on the right. */
  table-layout: fixed;
}
#sp-stock-list-table tbody td {
  vertical-align: top;
  padding: 0;
  border-top: 2px solid #084b7e;
  border-bottom: 2px solid #084b7e;
  background-color: #fff;
  overflow: hidden;
}
#sp-stock-list-table tbody td:first-child {
  border-left: 1px solid #084b7e;
  border-radius: 6px 0 0 6px;
  padding: 6px;                /* breathing room around thumb so the dark
                                   grey doesn't bleed into the next cell */
}
#sp-stock-list-table tbody td:last-child {
  border-right: 2px solid #084b7e;
  border-radius: 0 6px 6px 0;
}
#sp-stock-list-table tbody tr:hover td {
  background-color: #f4f9fe;
}

/* Detail card body padding — separate from the thumb cell */
#sp-stock-list-wrap .sp-ssn-detail-inner {
  padding: 0;
}
#sp-stock-list-wrap .sp-ssn-detail-row {
  padding: 3px 14px;
  line-height: 1.35;
}

/* Title bar — brand-blue header with producer + product on the left,
   Edit producer / Edit product links right-aligned. Allow the batch-name
   to shrink below its intrinsic content width (min-width: 0) AND
   allow flex wrap so long names push the action chips to a new line
   instead of forcing the whole card wider than its container. */
#sp-stock-list-wrap .sp-ssn-detail-batch {
  background: #084b7e;
  border-bottom: 0;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #fff;
}
#sp-stock-list-wrap .sp-ssn-detail-batch .sp-ssn-batch-name {
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  flex: 1 1 60%;
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
#sp-stock-list-wrap .sp-ssn-detail-batch .sp-st-card-product {
  font-weight: 500;
  color: #cfe1f0;
}
#sp-stock-list-wrap .sp-ssn-detail-batch .sp-ssn-action-link {
  font-size: 12px;
  white-space: nowrap;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 6px;
  text-decoration: none;
}
#sp-stock-list-wrap .sp-ssn-detail-batch .sp-ssn-action-link:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.8);
  color: #fff;
  text-decoration: none;
}

#sp-stock-list-wrap .sp-ssn-detail-below {
  display: block;
  padding: 3px 0 5px;
}
#sp-stock-list-wrap .sp-ssn-detail-rows {
  display: block;
}
#sp-stock-list-wrap .sp-ssn-detail-links .sp-ssn-links-label {
  font-weight: 600;
  color: #555;
}
#sp-stock-list-wrap .sp-ssn-action-link {
  font-size: 12px;
  color: #084b7e;
  text-decoration: none;
  margin-left: 8px;
}
#sp-stock-list-wrap .sp-ssn-action-link:hover {
  text-decoration: underline;
  color: #063a63;
}

/* Stock-row qty styling — inline with the detail row. Flex + center
   align so the smaller Label / Edit-link / Updated text vertically
   centers against the larger qty number. gap:0 so the value starts
   immediately after the label's trailing space, matching the Type /
   Batch rows' visual alignment (which are plain inline text). */
#sp-stock-list-wrap .sp-st-stock-row {
  background: #f9fbfd;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
#sp-stock-list-wrap .sp-st-qty-inline {
  font-weight: 700;
  font-size: 15px;
  color: #084b7e;
}
#sp-stock-list-wrap .sp-st-qty-zero { color: #999; }
#sp-stock-list-wrap .sp-st-qty-neg  { color: #c0392b; }
#sp-stock-list-wrap .sp-st-weight {
  color: #555;
  font-size: 13px;
  margin-left: 4px;
}
#sp-stock-list-wrap .sp-st-updated-inline {
  color: #888;
  font-size: 12px;            /* match Edit stock link */
  font-style: italic;
  margin-left: 10px;
}
#sp-stock-list-wrap .sp-st-empty {
  font-style: italic;
  color: #999;
}

/* Compact thumbnail — same "white rounded card around the photo" look
   the products list uses for its product photo, but WITHOUT the dark
   grey container backing (which on the products list pairs with the
   col-0 flavour-map block; we don't have that block here, so the grey
   becomes just an ugly square). The white card sits directly in the
   stock-list cell, exactly the way profile-map thumbs sit in col-0
   on the products list. */
#sp-stock-list-wrap td:first-child {
  width: 92px;
  max-width: 92px;
  /* Right border visually matches the left card border (which appears
     thicker because of the rounded corner curve). 6px gives the same
     visual weight as the curved 2px left border. */
  border-right: 6px solid #084b7e;
}
#sp-stock-list-wrap .sp-ssn-product-thumb {
  width: 72px;
  /* `height: 100%` lets the white card stretch to the cell's content
     height so the top/bottom margin always matches the 6px side
     padding. Falls back to 108px if the cell can't compute height
     (e.g. on older browsers or content-empty cells). */
  height: 100%;
  min-height: 108px;
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  position: relative;
  display: block;
}
#sp-stock-list-wrap .sp-ssn-product-thumb img,
#sp-stock-list-wrap .sp-ssn-product-thumb svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 5px;
  border-radius: 6px;
  box-sizing: border-box;
  display: block;
  transform: none;
}
#sp-stock-list-wrap .sp-ssn-product-thumb svg {
  padding: 14px;                /* placeholder chocolate-bar outline */
}