.product-grid [hidden] {
display: none !important;
} .product-grid__toolbar {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: var(--wp--preset--spacing--50);
}
.product-grid__search input {
width: 100%;
max-width: 420px;
padding: 11px 16px 9px;
border: 1px solid var(--wp--preset--color--contrast);
border-radius: 4px;
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast);
font: inherit;
font-size: 16px;
}
.product-grid__search input::placeholder {
color: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
}
.product-grid__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.product-grid__pill {
padding: 9px 18px 6px;
border: 1px solid var(--wp--preset--color--contrast);
border-radius: 4px;
background: transparent;
color: var(--wp--preset--color--contrast);
font-family: var(--tundra-font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.product-grid__pill:hover,
.product-grid__pill:focus-visible,
.product-grid__pill.is-active {
background-color: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
} .product-grid__pills--apps .product-grid__pill {
padding: 7px 14px 4px;
border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
font-size: 11px;
} .product-grid__type + .product-grid__type {
margin-top: var(--wp--preset--spacing--70);
}
.product-grid__type-title {
margin: 0 0 var(--wp--preset--spacing--50);
font-size: 32px;
}
.product-grid__group + .product-grid__group {
margin-top: var(--wp--preset--spacing--50);
} .product-grid__app-title {
margin: 0 0 var(--wp--preset--spacing--40);
font-size: 18px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.product-grid__app-title span {
display: inline-block;
padding-bottom: 6px;
border-bottom: 3px solid var(--wp--preset--color--accent);
}
.product-grid__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 20px;
} .product-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid #dde3ec;
border-radius: 4px;
background: var(--wp--preset--color--base);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card.is-linked:hover {
transform: translate(-2px, -3px);
box-shadow: 0 10px 24px rgba(0, 40, 85, 0.18);
} .product-card__media {
display: flex;
align-items: center;
justify-content: center;
height: 170px;
padding: 16px 20px;
border-bottom: 1px solid #eef1f6;
background: var(--wp--preset--color--base);
} .product-card__media:empty {
background: var(--wp--preset--color--navy-soft);
}
.product-card__media img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.product-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 16px 18px 18px;
}
.product-card__brand {
margin: 0 0 6px;
font-family: var(--tundra-font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
}
.product-card__title {
margin: 0;
font-size: 17px;
line-height: 1.25;
text-transform: none;
}
.product-card__link {
margin: auto 0 0;
padding-top: 14px;
text-align: right;
}
.product-card__link a {
color: var(--wp--preset--color--contrast);
font-family: var(--tundra-font-display);
font-size: 12px;
letter-spacing: 0.02em;
text-decoration: none;
}
.product-card__link a::after {
content: "\2192";
display: inline-block;
margin-left: 8px;
transition: transform 0.2s ease;
} .product-card__link a::before {
content: "";
position: absolute;
inset: 0;
}
.product-card:hover .product-card__link a::after {
transform: translateX(4px);
}
.product-grid__empty {
margin: var(--wp--preset--spacing--50) 0 0;
}
@media (max-width: 600px) {
.product-grid__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.product-card__media {
height: 120px;
padding: 12px;
}
.product-card__title {
font-size: 15px;
}
} .product-single__media {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
border: 1px solid #dde3ec;
border-radius: 4px;
background: var(--wp--preset--color--base);
}
.product-single__media img {
width: auto;
max-width: 100%;
height: auto;
max-height: 360px;
object-fit: contain;
}
.product-single__terms a {
text-decoration: none;
} :is(.product-single__content, .product-downloads) .wp-block-file {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0;
padding: 12px 0;
border-bottom: 1px solid #dde3ec;
font-size: 16px;
}
:is(.product-single__content, .product-downloads) .wp-block-file a:first-child {
color: var(--wp--preset--color--contrast);
text-decoration: none;
}
:is(.product-single__content, .product-downloads) .wp-block-file .wp-block-file__button {
flex-shrink: 0;
font-size: 12px;
} .product-single__content :is(ul, ol).wp-block-list > li:has(> :is(ul, ol)) {
display: grid;
grid-template-columns: 9px minmax(0, 1fr);
column-gap: 1.3rem;
}
.product-single__content :is(ul, ol).wp-block-list > li > :is(ul, ol) {
grid-column: 2;
padding-left: 0;
} .product-header__trail {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
font-family: var(--tundra-font-condensed, var(--tundra-font-display));
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.product-header__trail a {
color: #9eb0cc;
text-decoration: none;
}
.product-header__trail a:hover {
color: var(--wp--preset--color--base);
}
.product-header__trail [aria-current] {
color: var(--wp--preset--color--accent);
}
.product-header__sep {
color: #9eb0cc;
}
.product-header__eyebrow {
margin: var(--wp--preset--spacing--50) 0 0;
font-family: var(--tundra-font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wp--preset--color--accent);
}
.product-header__title {
margin: var(--wp--preset--spacing--20) 0 0;
font-size: 44px;
}
.product-header__desc {
max-width: 760px;
margin-top: var(--wp--preset--spacing--40);
}
.product-header__desc p:last-child {
margin-bottom: 0;
} .product-grid__chip {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
margin: 0;
padding: 7px 8px 5px 14px;
border-radius: 4px;
background: var(--wp--preset--color--navy-soft);
font-family: var(--tundra-font-display);
font-size: 12px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--wp--preset--color--contrast);
}
.product-grid__chip-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--base);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.product-grid__chip-clear:hover {
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--contrast);
}
@media (max-width: 600px) {
.product-header__title {
font-size: 32px;
}
} .product-grid__filters {
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
}
.product-grid__select {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
flex: 0 1 320px;
}
.product-grid__select-label {
font-family: var(--tundra-font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, transparent);
}
.product-grid__select select {
width: 100%;
padding: 11px 44px 9px 16px;
border: 1px solid var(--wp--preset--color--contrast);
border-radius: 4px;
background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23002855' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
color: var(--wp--preset--color--contrast);
font: inherit;
font-size: 16px;
appearance: none;
cursor: pointer;
}
.product-grid__select.is-disabled select {
border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
color: color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
cursor: default;
}
@media (max-width: 600px) {
.product-grid__select {
flex-basis: 100%;
}
} .product-card__featured {
position: absolute;
top: 12px;
right: 12px;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 5.25px 12px 3.75px 10px; border-radius: 999px;
background: var(--wp--preset--color--surface-dark);
color: var(--wp--preset--color--base);
font-family: var(--tundra-font-display);
font-size: 10.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: uppercase;
pointer-events: none;
}
.product-card__featured::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wp--preset--color--accent);
} .product-downloads {
margin-top: var(--wp--preset--spacing--50);
}
.product-downloads__title {
margin: 0 0 4px;
text-align: left;
padding-bottom: 10px;
border-bottom: 2px solid var(--wp--preset--color--contrast);
font-size: 18px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.product-downloads .wp-block-file {
font-size: 15px;
} .product-applications {
margin-top: var(--wp--preset--spacing--50);
}
.product-applications__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.product-applications__list li {
display: block;
margin: 0;
padding: 0;
}
.product-applications__list li::before,
.product-applications__list li::marker {
content: none;
}
.product-badge {
display: inline-flex;
padding: 6.25px 12px 4.75px;
border-radius: 999px;
background: var(--wp--preset--color--navy-soft);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
color: var(--wp--preset--color--contrast);
font-family: var(--tundra-font-display);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.2s, box-shadow 0.2s;
}
.product-badge:hover {
background: var(--wp--preset--color--accent);
box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
color: var(--wp--preset--color--contrast);
} .product-single--enquiry .product-single__cols > .wp-block-column:first-child {
display: none;
}
.product-single--enquiry .product-single__cols > .wp-block-column:last-child {
flex-basis: 100% !important;
max-width: 860px;
margin-inline: auto;
} .product-enquiry {
padding: var(--wp--preset--spacing--60);
border-radius: 4px;
background: var(--wp--preset--color--navy-soft);
}
.product-enquiry__eyebrow {
margin: 0;
font-family: var(--tundra-font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.product-enquiry__title {
margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
text-align: left;
font-size: 36px;
} .product-card__legacy,
.product-single__legacy {
display: inline-flex;
margin: 0;
padding: 5.25px 10px 3.75px;
border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
border-radius: 999px;
background: var(--wp--preset--color--base);
color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
font-family: var(--tundra-font-display);
font-size: 10.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.product-card__legacy {
position: absolute;
top: 12px;
right: 12px;
z-index: 1;
pointer-events: none;
}
.product-single__legacy {
margin-top: var(--wp--preset--spacing--30);
border-color: rgba(255, 255, 255, 0.45);
background: transparent;
color: var(--wp--preset--color--base);
} .product-single__media:not(:has(img)) {
display: none;
} .product-grid__toolbar {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
gap: 14px 16px;
}
.product-grid__filters {
display: contents;
}
.product-grid__search {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
flex: 0 1 320px;
order: 1;
margin-left: auto;
}
.product-grid__search input {
max-width: none;
padding-left: 44px;
line-height: inherit;
background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='7.5' cy='7.5' r='6' fill='none' stroke='%23002855' stroke-width='2'/%3E%3Cpath d='m12 12 5 5' stroke='%23002855' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 16px center;
}
.product-grid__toolbar > .product-grid__chip {
order: 3;
}
.product-grid__toolbar:has(> .product-grid__chip:not([hidden]))::after {
content: "";
order: 2;
flex-basis: 100%;
margin-top: -14px;
}
@media (max-width: 600px) {
.product-grid__search {
flex-basis: 100%;
order: 0;
margin-left: 0;
}
}