.jbm-shop-review-overlay {
--jbm-green: #115F60;
--jbm-dark: #062F30;
--jbm-aqua: #29D8DB;
--jbm-ink: #20292B;
--jbm-copy: #566568;
--jbm-soft: #F0F6F6;
--jbm-line: #D5DFDF;
--jbm-white: #FFFFFF;
}
.jbm-shop-review-overlay,
.jbm-shop-review-overlay * {
box-sizing: border-box;
}
body.jbm-shop-review-is-open {
overflow: hidden !important;
}
.jbm-shop-review-trigger-parent > ul.sub-menu,
.jbm-shop-review-trigger-parent > .sub-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.jbm-shop-review-overlay {
position: fixed;
inset: 0;
z-index: 2147483000;
padding: 28px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Lato', Arial, sans-serif;
color: var(--jbm-ink);
background: rgba(5, 20, 24, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 180ms ease, visibility 180ms ease;
}
.jbm-shop-review-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.jbm-shop-review-overlay button,
.jbm-shop-review-overlay a {
font: inherit;
}
.jbm-shop-review-overlay button {
cursor: pointer;
}
.jbm-shop-review-popup {
width: min(1400px, 100%);
max-width: none;
min-width: 0;
height: min(700px, calc(100vh - 56px));
max-height: calc(100vh - 56px);
margin: 0;
display: grid;
grid-template-rows: 108px minmax(0, 1fr);
overflow: hidden;
border-radius: 18px;
background: var(--jbm-white);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.25);
}
.jbm-shop-review-header {
min-width: 0;
padding: 20px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-bottom: 1px solid var(--jbm-line);
background: var(--jbm-white);
}
.jbm-shop-review-heading {
min-width: 0;
}
.jbm-shop-review-eyebrow {
margin: 0 0 6px;
font-size: 12px;
line-height: 1.25;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--jbm-green);
}
.jbm-shop-review-title {
margin: 0;
font-family: 'Montserrat', Arial, sans-serif;
font-size: clamp(25px, 2.5vw, 35px);
line-height: 1.1;
font-weight: 700;
color: var(--jbm-ink);
}
.jbm-shop-review-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
flex: 0 0 auto;
}
.jbm-shop-review-browse {
min-height: 46px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--jbm-aqua);
border-radius: 6px;
background: var(--jbm-aqua);
color: #083638;
font-size: 14px;
line-height: 1.2;
font-weight: 700;
text-decoration: none;
}
.jbm-shop-review-browse:hover,
.jbm-shop-review-browse:focus-visible {
border-color: var(--jbm-green);
background: var(--jbm-green);
color: var(--jbm-white);
}
.jbm-shop-review-close {
width: 34px;
height: 34px;
flex: 0 0 34px;
padding: 0 0 3px;
display: grid;
align-items: center;
justify-content: center;
border: 0;
border-radius: 0;
background: transparent;
color: var(--jbm-aqua);
font: 600 34px/1 Arial, sans-serif;
}
.jbm-shop-review-close:hover,
.jbm-shop-review-close:focus-visible {
background: transparent;
color: var(--jbm-aqua);
}
.jbm-shop-review-close:focus-visible {
outline: 3px solid rgba(41, 216, 219, 0.45);
outline-offset: 3px;
}
.jbm-shop-review-icon {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.jbm-shop-review-body {
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns: 285px minmax(0, 1fr);
}
.jbm-shop-review-navigation {
min-width: 0;
padding: 18px 20px;
overflow-y: auto;
border-right: 1px solid var(--jbm-line);
background: var(--jbm-soft);
}
.jbm-shop-review-options {
display: grid;
grid-template-columns: 1fr;
}
.jbm-shop-review-option {
width: 100%;
min-width: 0;
min-height: 58px;
margin: 0;
padding: 10px 12px;
display: grid;
grid-template-columns: 24px minmax(0, 1fr) 18px;
align-items: center;
gap: 9px;
border: 0;
border-bottom: 1px solid #CBD8D8;
background: transparent;
color: #425255;
text-align: left;
}
.jbm-shop-review-option:hover,
.jbm-shop-review-option:focus-visible {
color: var(--jbm-green);
background: #E5EFEF;
}
.jbm-shop-review-option[aria-selected="true"] {
border-bottom-color: var(--jbm-green);
background: var(--jbm-green);
color: var(--jbm-white);
}
.jbm-shop-review-option .jbm-shop-review-icon {
width: 17px;
height: 17px;
color: var(--jbm-green);
}
.jbm-shop-review-option[aria-selected="true"] .jbm-shop-review-icon {
color: var(--jbm-white);
}
.jbm-shop-review-option-label {
min-width: 0;
font-size: 14px;
line-height: 1.3;
font-weight: 700;
color: inherit;
}
.jbm-shop-review-content {
min-width: 0;
min-height: 0;
padding: 0;
overflow: hidden;
background: var(--jbm-white);
}
.jbm-shop-review-panel {
width: 100%;
max-width: none;
min-width: 0;
height: 100%;
min-height: 0;
overflow-y: auto;
}
.jbm-shop-review-panel[hidden] {
display: none;
}
.jbm-shop-review-service {
width: 100%;
min-height: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(390px, 46%);
align-items: stretch;
gap: 0;
}
.jbm-shop-review-copy {
min-width: 0;
padding: 42px 46px;
}
.jbm-shop-review-label {
margin: 0;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--jbm-green);
}
.jbm-shop-review-panel-title {
margin: 0 0 13px;
font-family: 'Montserrat', Arial, sans-serif;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.08;
font-weight: 700;
color: var(--jbm-ink);
}
.jbm-shop-review-text {
margin: 0;
font-size: 16px;
line-height: 1.55;
font-weight: 400;
color: var(--jbm-copy);
}
.jbm-shop-review-action {
min-height: 0;
margin-top: 18px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
background: transparent;
color: var(--jbm-green);
font-size: 14px;
line-height: 1.2;
font-weight: 700;
text-decoration: none;
}
.jbm-shop-review-action:hover,
.jbm-shop-review-action:focus-visible {
background: transparent;
color: var(--jbm-dark);
text-decoration: underline;
text-underline-offset: 4px;
}
.jbm-shop-review-visual {
width: 100%;
height: 100%;
min-height: 0;
position: relative;
overflow: hidden;
background: var(--jbm-green);
}
.jbm-shop-review-visual::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(6, 47, 48, 0.04), rgba(6, 47, 48, 0.28));
}
.jbm-shop-review-visual img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.jbm-shop-review-departments {
width: 100%;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
padding: 34px 0 0;
}
.jbm-shop-review-departments > .jbm-shop-review-copy {
max-width: 760px;
padding: 0 38px;
}
.jbm-shop-review-department-links {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
width: 100%;
margin-top: auto;
}
.jbm-shop-review-department {
min-height: 330px;
padding: 0;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
border: 0;
border-top: 3px solid var(--jbm-aqua);
border-right: 1px solid rgba(255, 255, 255, 0.35);
background-color: var(--jbm-dark);
background-image:
linear-gradient(to bottom, rgba(4, 22, 23, 0.04) 25%, rgba(4, 22, 23, 0.95) 100%),
var(--jbm-card-image);
background-position: center;
background-size: cover;
color: var(--jbm-white);
text-decoration: none;
transition: background-size 240ms ease;
}
.jbm-shop-review-department::after {
content: '';
position: absolute;
inset: 0;
border: 0 solid rgba(41, 216, 219, 0);
pointer-events: none;
transition: border-width 160ms ease, border-color 160ms ease;
}
.jbm-shop-review-department:last-child {
border-right: 0;
}
.jbm-shop-review-department:hover,
.jbm-shop-review-department:focus-visible {
background-size: 106%;
}
.jbm-shop-review-department:hover::after,
.jbm-shop-review-department:focus-visible::after {
border-width: 3px;
border-color: var(--jbm-aqua);
}
.jbm-shop-review-department-content {
position: relative;
z-index: 1;
min-height: 188px;
padding: 20px 18px 22px;
display: flex;
flex-direction: column;
align-items: flex-start;
background: linear-gradient(to bottom, rgba(4, 22, 23, 0), rgba(4, 22, 23, 0.96) 35%);
}
.jbm-shop-review-department-badge {
width: 42px;
height: 42px;
margin-bottom: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--jbm-aqua);
color: var(--jbm-dark);
}
.jbm-shop-review-department-badge .jbm-shop-review-icon {
width: 20px;
height: 20px;
}
.jbm-shop-review-department strong {
display: block;
min-height: 42px;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 17px;
line-height: 1.18;
font-weight: 700;
color: var(--jbm-white);
}
.jbm-shop-review-department p {
margin: 9px 0 0;
font-size: 13px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.88);
}
.jbm-shop-review-department span {
display: block;
margin-top: auto;
padding-top: 13px;
color: var(--jbm-aqua);
font-size: 13px;
font-weight: 700;
}
.jbm-shop-review-directory {
width: 100%;
height: 100%;
min-height: 0;
display: grid;
grid-template-rows: minmax(0, 1fr) 66px;
}
.jbm-shop-review-directory-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--jbm-line);
background: var(--jbm-soft);
}
.jbm-shop-review-directory-tab {
min-width: 0;
padding: 10px 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
border-right: 1px solid var(--jbm-line);
border-top: 3px solid transparent;
background: transparent;
color: #425255;
font-size: 13px;
line-height: 1.25;
font-weight: 700;
text-align: center;
}
.jbm-shop-review-directory-tab:last-child {
border-right: 0;
}
.jbm-shop-review-directory-tab:hover,
.jbm-shop-review-directory-tab:focus-visible {
background: #E5EFEF;
color: var(--jbm-green);
}
.jbm-shop-review-directory-tab[aria-selected="true"] {
border-top-color: var(--jbm-aqua);
background: var(--jbm-green);
color: var(--jbm-white);
}
.jbm-shop-review-directory-tab .jbm-shop-review-icon {
width: 17px;
height: 17px;
flex: 0 0 17px;
}
.jbm-shop-review-directory-panels {
width: 100%;
height: auto;
min-height: 0;
position: relative;
z-index: 1;
overflow: hidden;
}
.jbm-shop-review-directory-view {
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
}
.jbm-shop-review-directory-view > .jbm-shop-review-service {
height: 100%;
min-height: 0;
}
.jbm-shop-review-directory-tabs {
position: relative;
z-index: 2;
}
.jbm-shop-review-directory-view[hidden] {
display: none;
}
.jbm-shop-review-feature-copy {
min-width: 0;
padding: 34px 42px 28px;
}
.jbm-shop-review-feature-line {
width: 68px;
height: 4px;
margin: 13px 0 19px;
border-radius: 99px;
background: var(--jbm-aqua);
}
.jbm-shop-review-feature-copy .jbm-shop-review-panel-title {
margin: 0 0 12px;
font-size: clamp(29px, 2.45vw, 41px);
letter-spacing: -1px;
line-height: 1.08;
}
.jbm-shop-review-feature-copy .jbm-shop-review-text {
margin: 0 0 20px;
color: #20262D;
font-size: 16px;
line-height: 1.46;
}
.jbm-shop-review-feature-list {
margin: 0 0 21px;
padding: 0;
display: grid;
gap: 10px;
list-style: none;
}
.jbm-shop-review-feature-list li {
display: grid;
grid-template-columns: 29px minmax(0, 1fr);
align-items: start;
gap: 13px;
min-height: 29px;
color: #171A1D;
font-size: 15px;
line-height: 1.4;
}
.jbm-shop-review-feature-check {
width: 29px;
height: 29px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--jbm-green);
border-radius: 50%;
color: var(--jbm-green);
font-size: 16px;
font-weight: 700;
}
.jbm-shop-review-feature-list li > span:last-child {
padding-top: 3px;
}
.jbm-shop-review-feature-action {
width: auto;
max-width: none;
min-height: 0;
margin-top: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--jbm-green);
font-size: 14px;
line-height: 1.2;
font-weight: 700;
text-decoration: none;
}
.jbm-shop-review-feature-action:hover,
.jbm-shop-review-feature-action:focus-visible {
background: transparent;
color: var(--jbm-dark);
text-decoration: underline;
text-underline-offset: 4px;
}
.jbm-shop-review-visual-action {
position: absolute;
z-index: 2;
right: 24px;
bottom: 24px;
left: 24px;
min-height: 48px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--jbm-aqua);
background: rgba(6, 47, 48, 0.94);
color: var(--jbm-white);
font-size: 14px;
line-height: 1.2;
font-weight: 700;
text-decoration: none;
}
.jbm-shop-review-visual-action:hover,
.jbm-shop-review-visual-action:focus-visible {
background: var(--jbm-aqua);
color: var(--jbm-dark);
}
@media (max-width: 850px) {
.jbm-shop-review-overlay {
padding: 16px;
align-items: flex-start;
}
.jbm-shop-review-popup {
height: 880px;
}
.jbm-shop-review-body {
grid-template-columns: 250px minmax(0, 1fr);
}
.jbm-shop-review-navigation {
padding: 14px 12px;
}
.jbm-shop-review-service {
grid-template-columns: minmax(0, 1fr) 290px;
}
.jbm-shop-review-directory {
grid-template-rows: minmax(0, 1fr) 116px;
}
.jbm-shop-review-directory-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jbm-shop-review-directory-tab:nth-child(2) {
border-right: 0;
}
.jbm-shop-review-directory-tab:nth-child(-n+2) {
border-bottom: 1px solid var(--jbm-line);
}
.jbm-shop-review-directory-tab[aria-selected="true"] {
box-shadow: inset 0 3px 0 var(--jbm-aqua);
}
.jbm-shop-review-visual {
width: 100%;
height: 100%;
}
.jbm-shop-review-departments {
padding-top: 26px;
}
.jbm-shop-review-departments > .jbm-shop-review-copy {
padding: 0 24px;
}
.jbm-shop-review-department-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jbm-shop-review-department:nth-child(2) {
border-right: 0;
}
.jbm-shop-review-department:nth-child(-n+2) {
border-bottom: 1px solid var(--jbm-line);
}
.jbm-shop-review-copy {
padding: 34px 30px;
}
}
@media (max-width: 600px) {
.jbm-shop-review-overlay {
padding: 10px;
}
.jbm-shop-review-popup {
height: 1260px;
grid-template-rows: 150px minmax(0, 1fr);
}
.jbm-shop-review-header {
padding: 16px;
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
.jbm-shop-review-header-actions {
width: 100%;
}
.jbm-shop-review-browse {
flex: 1;
}
.jbm-shop-review-body {
grid-template-columns: 1fr;
grid-template-rows: 270px minmax(0, 1fr);
}
.jbm-shop-review-navigation {
border-right: 0;
border-bottom: 1px solid var(--jbm-line);
}
.jbm-shop-review-content {
padding: 0;
}
.jbm-shop-review-department-links {
grid-template-columns: 1fr;
}
.jbm-shop-review-department,
.jbm-shop-review-department:nth-child(2) {
min-height: 290px;
border-right: 0;
border-bottom: 1px solid var(--jbm-line);
}
.jbm-shop-review-department:last-child {
border-bottom: 0;
}
.jbm-shop-review-service {
grid-template-columns: 1fr;
}
.jbm-shop-review-directory {
grid-template-rows: minmax(0, 1fr) auto;
}
.jbm-shop-review-directory-tabs {
grid-template-columns: 1fr;
}
.jbm-shop-review-directory-tab,
.jbm-shop-review-directory-tab:nth-child(2) {
min-height: 52px;
border-right: 0;
border-bottom: 1px solid var(--jbm-line);
}
.jbm-shop-review-copy {
padding: 28px 22px;
}
.jbm-shop-review-feature-copy {
padding: 28px 22px;
}
.jbm-shop-review-visual {
min-height: 260px;
}
} @media (max-width: 1050px) {
.jbm-shop-review-overlay {
padding: 20px;
align-items: flex-start;
}
.jbm-shop-review-popup {
width: min(900px, 100%);
height: auto;
max-height: calc(100vh - 40px);
grid-template-rows: auto auto;
overflow-x: hidden;
overflow-y: auto;
}
.jbm-shop-review-header {
min-height: 104px;
}
.jbm-shop-review-body {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
.jbm-shop-review-navigation {
padding: 0;
overflow: visible;
border-right: 0;
border-bottom: 1px solid var(--jbm-line);
}
.jbm-shop-review-options {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.jbm-shop-review-option {
min-height: 68px;
border-right: 1px solid var(--jbm-line);
border-bottom: 0;
}
.jbm-shop-review-option:last-child {
border-right: 0;
}
.jbm-shop-review-content,
.jbm-shop-review-panel,
.jbm-shop-review-directory,
.jbm-shop-review-directory-panels,
.jbm-shop-review-directory-view {
height: auto;
min-height: 0;
overflow: visible;
}
.jbm-shop-review-service {
min-height: 520px;
grid-template-columns: minmax(0, 1fr) minmax(340px, 44%);
}
.jbm-shop-review-directory {
grid-template-rows: auto 66px;
}
}
@media (max-width: 760px) {
.jbm-shop-review-overlay {
padding: 12px;
}
.jbm-shop-review-popup {
width: 100%;
max-height: calc(100vh - 24px);
}
.jbm-shop-review-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jbm-shop-review-option,
.jbm-shop-review-option:last-child {
border-right: 1px solid var(--jbm-line);
border-bottom: 1px solid var(--jbm-line);
}
.jbm-shop-review-option:nth-child(2n) {
border-right: 0;
}
.jbm-shop-review-option:nth-last-child(-n+2) {
border-bottom: 0;
}
.jbm-shop-review-service {
min-height: 0;
grid-template-columns: 1fr;
}
.jbm-shop-review-visual {
order: -1;
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 1.42 / 1;
}
.jbm-shop-review-directory {
grid-template-rows: auto 116px;
}
.jbm-shop-review-directory-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jbm-shop-review-feature-copy {
padding: 42px 36px 36px;
}
}
@media (max-width: 520px) {
.jbm-shop-review-overlay {
padding: 10px;
}
.jbm-shop-review-popup {
max-height: calc(100vh - 20px);
grid-template-rows: auto auto;
border-radius: 16px;
}
.jbm-shop-review-header {
min-height: 0;
padding: 18px;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.jbm-shop-review-title {
font-size: 30px;
}
.jbm-shop-review-header-actions {
width: 100%;
}
.jbm-shop-review-browse {
flex: 1;
}
.jbm-shop-review-options {
grid-template-columns: 1fr;
}
.jbm-shop-review-option,
.jbm-shop-review-option:last-child,
.jbm-shop-review-option:nth-child(2n),
.jbm-shop-review-option:nth-last-child(-n+2) {
min-height: 58px;
border-right: 0;
border-bottom: 1px solid var(--jbm-line);
}
.jbm-shop-review-option:last-child {
border-bottom: 0;
}
.jbm-shop-review-visual {
aspect-ratio: 1.3 / 1;
}
.jbm-shop-review-feature-copy {
padding: 34px 22px 28px;
}
.jbm-shop-review-feature-copy .jbm-shop-review-panel-title {
overflow-wrap: anywhere;
font-size: 31px;
}
.jbm-shop-review-feature-copy .jbm-shop-review-text,
.jbm-shop-review-feature-list li {
overflow-wrap: anywhere;
}
.jbm-shop-review-directory {
grid-template-rows: auto auto;
}
.jbm-shop-review-directory-tabs {
grid-template-columns: 1fr;
}
.jbm-shop-review-directory-tab,
.jbm-shop-review-directory-tab:nth-child(2) {
min-height: 54px;
border-right: 0;
border-bottom: 1px solid var(--jbm-line);
}
.jbm-shop-review-directory-tab:last-child {
border-bottom: 0;
}
}