:root {
    --jov-navy: #3a4863;
    --jov-navy-dark: #2d384d;
    --jov-orange: #f17b36;
    --jov-orange-dark: #db6420;
    --jov-ink: #182033;
    --jov-muted: #677085;
    --jov-soft: #f5f7fa;
    --jov-border: #e3e7ed;

    /* Structural tokens. The colours above are fixed by the brand and are not
       touched; everything below is layout only, added so that spacing, rounding,
       elevation, image framing and stacking stop being decided ad hoc per
       component. Overlapping controls and escaped hover states were all caused
       by components positioning themselves against each other without a shared
       scale to agree on. */

    --jov-space-1: 4px;
    --jov-space-2: 8px;
    --jov-space-3: 12px;
    --jov-space-4: 16px;
    --jov-space-5: 24px;
    --jov-space-6: 32px;
    --jov-space-7: 48px;
    --jov-space-8: 64px;
    --jov-space-9: 96px;

    --jov-radius-sm: 4px;
    --jov-radius-md: 8px;
    --jov-radius-lg: 12px;
    --jov-radius-pill: 999px;

    --jov-shadow-1: 0 1px 2px rgba(24, 32, 51, .06);
    --jov-shadow-2: 0 4px 12px rgba(24, 32, 51, .1);
    --jov-shadow-3: 0 14px 28px rgba(24, 32, 51, .12);

    /* Image framing. The frame owns the dimensions, the image fits inside it. */
    --jov-tile-inset: 12px;
    --jov-gallery-max-h: 520px;
    --jov-thumb-size: 72px;

    /* Stacking ladder. Every positioned element takes its z-index from here and
       from nowhere else, so two components can never both decide they are on
       top. */
    --jov-z-base: 1;
    --jov-z-card-hover: 5;
    --jov-z-badge: 10;
    --jov-z-sticky: 100;
    --jov-z-header: 200;
    --jov-z-drawer: 300;
    --jov-z-modal: 400;
    --jov-z-toast: 500;
}

body {
    background: #fff;
    color: var(--jov-ink);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6,
.footer-widget__title {
    color: var(--jov-ink);
    font-family: "PT Sans", sans-serif;
    font-weight: 700;
    letter-spacing: -.015em;
}

p {
    color: var(--jov-muted);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.75;
}

a {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.jov-site-logo {
    display: block;
    height: auto;
    max-width: 260px;
    width: 100%;
}

.jov-age-bar {
    background: var(--jov-navy-dark);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 12px;
}

.jov-age-bar__inner,
.jov-age-bar__notice,
.jov-age-bar__support {
    align-items: center;
    display: flex;
}

.jov-age-bar__inner {
    justify-content: space-between;
    min-height: 38px;
}

.jov-age-bar__notice,
.jov-age-bar__support {
    gap: 14px;
}

.jov-age-bar__notice strong {
    align-items: center;
    background: var(--jov-orange);
    border-radius: 50%;
    display: inline-flex;
    font-size: 11px;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.jov-age-copy--mobile {
    display: none;
}

.jov-age-bar a {
    color: #fff;
}

.jov-age-bar a:hover {
    color: #ffb484;
}

.jov-age-bar__support i {
    color: var(--jov-orange);
    margin-right: 4px;
}

.jov-header,
.main-header.jov-header {
    background: var(--jov-navy);
    color: #fff;
}

.jov-header-main {
    padding: 22px 0;
}

.jov-header-main .header-search-bar {
    padding: 0;
}

.jov-header-main .search-info {
    background: #fff;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 5px 18px rgba(19, 27, 43, .12);
    min-height: 48px;
    overflow: visible;
}

.jov-header-main .header-search-bar input {
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: var(--jov-ink);
    height: 48px;
    padding: 5px 58px 5px 20px;
    width: 100%;
}

.jov-header-main .header-search-icon {
    align-items: center;
    background: var(--jov-orange);
    border-radius: 0 5px 5px 0;
    color: #fff;
    display: flex;
    height: 48px;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    /* The upstream rule centres the icon with translateY(-50%) against top:50%.
       Anchoring it to the top of the field without also dropping that transform
       lifted the whole button half its height clear of the search bar. */
    transform: none;
    width: 52px;
}

.jov-header-main .header-search-icon:hover {
    background: var(--jov-orange-dark);
}

.jov-header-main .header-meta__social {
    gap: 7px;
    margin-left: 0;
}

/* The icon actions are fixed round buttons. The account link carries a label as
   well, so it is excluded here and shaped as a pill below - left in, its text
   spilled straight out of a 42px circle. */
.jov-header-main .header-meta__social > a:not(.jov-header-account),
.jov-header-main .header-meta__social > button {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 18px;
    height: 42px;
    justify-content: center;
    margin: 0;
    overflow: visible;
    position: relative;
    width: 42px;
}

.jov-header-main .header-meta__social > a:not(.jov-header-account):hover,
.jov-header-main .header-meta__social > button:hover {
    background: var(--jov-orange);
    border-color: var(--jov-orange);
}

.jov-header-main .header-cart span {
    align-items: center;
    background: var(--jov-orange);
    border: 2px solid var(--jov-navy);
    box-sizing: border-box;
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    height: 18px;
    inset-inline-end: -3px;
    justify-content: center;
    line-height: 1;
    min-width: 18px;
    padding: 0;
    top: -3px;
    width: 18px;
}

.jov-header-nav {
    background: #fff;
    border-bottom: 1px solid var(--jov-border);
    box-shadow: 0 4px 18px rgba(31, 42, 65, .07);
    color: var(--jov-ink);
    position: relative;
    z-index: 1001;
}

.jov-header-nav__inner {
    align-items: stretch;
    display: flex;
    min-height: 52px;
}

.jov-main-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.jov-main-nav > ul,
.jov-main-nav > ul > li {
    height: 100%;
}

.jov-main-nav > ul {
    align-items: stretch;
    display: flex;
    list-style: none;
    overflow: visible;
}

.jov-main-nav > ul > li {
    flex: 0 0 auto;
    margin: 0;
    position: relative;
}

.jov-main-nav > ul > li.has-megamenu {
    position: static;
}

.jov-main-nav > ul > li > a {
    align-items: center;
    color: var(--jov-ink);
    display: flex;
    font-family: "PT Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    height: 52px;
    letter-spacing: .01em;
    padding: 0 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.jov-main-nav > ul > li:first-child > a {
    color: #d62828;
}

.jov-main-nav > ul > li:hover > a,
.jov-main-nav > ul > li > a:hover {
    background: rgba(241, 123, 54, .09);
    color: var(--jov-orange);
}

.jov-main-nav ul.submenu {
    border: 1px solid var(--jov-border);
    border-top: 3px solid var(--jov-orange);
    box-shadow: 0 15px 35px rgba(24, 32, 51, .14);
    min-width: 245px;
    padding: 8px 0;
}

.jov-main-nav ul.submenu li a {
    color: var(--jov-ink);
    font-size: 13px;
    padding: 8px 20px;
}

.jov-main-nav ul.submenu li a:hover {
    color: var(--jov-orange);
}

/* ---------------------------------------------------------------------------
   Mega menu

   The catalogue ranges are long - E-Liquid alone carries around 350 entries -
   so the panel groups them by initial letter, flows the groups into columns and
   offers an instant filter. Every entry stays reachable; nothing is truncated.
--------------------------------------------------------------------------- */
.jov-main-nav > ul > li > ul.mega-menu {
    /* Anchor large menus to the navigation bar, not to a narrow menu item. */
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translateX(-50%);
    background: #fff;
    border-top: 3px solid var(--jov-orange);
    box-shadow: 0 22px 48px rgba(24, 32, 51, .18);
    display: block;
    max-width: calc(100vw - 40px);
    padding: 0;
    width: min(1240px, calc(100vw - 40px));
    z-index: 1100;
}

/* The base theme pins every .mega-menu li to 260px and lays the panel out as a
   flex row; both have to be undone for the grouped panel to fill the dropdown. */
.jov-main-nav > ul > li > ul.mega-menu {
    display: block !important;
}

.jov-main-nav > ul > li > ul.mega-menu > li.jov-mega {
    display: flex;
    flex-direction: column;
    max-height: min(76vh, 660px);
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
}

.jov-main-nav > ul > li > ul.mega-menu .jov-mega__list > li {
    padding: 0 !important;
    width: 100% !important;
}

.jov-mega__toolbar {
    align-items: center;
    background: var(--jov-soft);
    border-bottom: 1px solid var(--jov-border);
    display: flex;
    gap: 12px;
    padding: 12px 22px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.jov-mega__search {
    align-items: center;
    background: #fff;
    border: 1px solid var(--jov-border);
    border-radius: 6px;
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    padding: 0 12px;
}

.jov-mega__search i {
    color: var(--jov-muted);
    font-size: 13px;
}

.jov-mega__filter {
    background: transparent;
    border: 0;
    color: var(--jov-ink);
    font-size: 13px;
    height: 36px;
    outline: none;
    width: 100%;
}

.jov-mega__count {
    background: var(--jov-navy);
    border-radius: 20px;
    color: #fff;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    min-width: 34px;
    padding: 4px 10px;
    text-align: center;
}

.jov-mega__grid {
    columns: var(--jov-mega-columns, 3);
    column-gap: 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 22px 20px;
}

.jov-mega__group {
    break-inside: avoid;
    display: inline-block;
    margin-bottom: 14px;
    width: 100%;
}

.jov-mega__letter {
    border-bottom: 1px solid var(--jov-border);
    color: var(--jov-orange);
    display: block;
    font-family: "PT Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 6px;
    padding-bottom: 4px;
}

.jov-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jov-mega__list > li > a {
    border-radius: 4px;
    color: var(--jov-ink);
    display: block;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    padding: 5px 8px;
    transition: background-color .15s ease, color .15s ease;
}

.jov-mega__list > li > a:hover {
    background: rgba(241, 123, 54, .1);
    color: var(--jov-orange);
}

.jov-mega__empty {
    color: var(--jov-muted);
    font-size: 13px;
    margin: 0;
    padding: 0 22px 18px;
}

/* Keep every catalogue image in a predictable card-sized frame. This prevents
   a second hover image or an unusually shaped supplier image from spilling
   into the next product card. */
.jov-product-grid .tpproduct__thumb,
.bb-product-items-wrapper .tpproduct__thumb,
.related-product-area .tpproduct__thumb {
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
}

.jov-product-grid .tpproduct__thumb > a,
.jov-product-grid .tpproduct__thumb > a > img,
.bb-product-items-wrapper .tpproduct__thumb > a,
.bb-product-items-wrapper .tpproduct__thumb > a > img,
.related-product-area .tpproduct__thumb > a,
.related-product-area .tpproduct__thumb > a > img {
    display: block;
    height: 100%;
    width: 100%;
}

.jov-product-grid .tpproduct__thumb > a > img,
.bb-product-items-wrapper .tpproduct__thumb > a > img,
.related-product-area .tpproduct__thumb > a > img {
    object-fit: contain;
}

.jov-product-grid .tpproduct__thumb > a > img.product-thumb-secondary,
.bb-product-items-wrapper .tpproduct__thumb > a > img.product-thumb-secondary,
.related-product-area .tpproduct__thumb > a > img.product-thumb-secondary {
    inset: 0;
    position: absolute;
}

.bb-product-listing-page-description__copy {
    max-height: 8.4em;
    overflow: hidden;
    position: relative;
}

.bb-product-listing-page-description__copy.is-expanded {
    max-height: none;
}

.bb-product-listing-page-description__copy a,
.bb-product-listing-page-description .ck-content a {
    color: var(--jov-orange);
    text-decoration: underline;
}

.bb-product-listing-page-description__copy a:hover,
.bb-product-listing-page-description .ck-content a:hover {
    color: var(--jov-orange-dark);
}

.tpproduct-details__review-score {
    color: var(--jov-ink);
    font-size: 13px;
    font-weight: 700;
    margin-left: 6px;
}

@media (max-width: 1399px) {
    .jov-main-nav > ul > li > ul.mega-menu {
        width: calc(100vw - 32px);
    }

    .jov-mega__grid {
        columns: min(var(--jov-mega-columns, 3), 3);
    }
}

.jov-header-nav__contact {
    align-items: center;
    align-self: stretch;
    background: var(--jov-orange);
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    padding: 0 18px;
    text-transform: uppercase;
}

.jov-header-nav__contact:hover {
    background: var(--jov-orange-dark);
    color: #fff;
}

.tp-md-lg-header {
    background: var(--jov-navy);
    color: #fff;
}

.tp-md-lg-header .header-canvas button,
.tp-md-lg-header .header-meta-info button {
    color: #fff;
    font-size: 22px;
}

.tp-md-lg-header .jov-site-logo {
    margin: auto;
    max-width: 230px;
}

.tpsideinfo {
    background: var(--jov-navy-dark);
    /* The drawer is a fixed 350px plus 30px of padding each side, which is wider
       than a 360px phone - the panel and its close button ran off the edge. It
       takes the full width on a phone instead: a part-width panel left a strip
       of page down one side that read as a gap rather than as a way out. */
    box-sizing: border-box;
    max-width: 100vw;
}

@media (max-width: 767px) {
    .tpsideinfo {
        /* 100% rather than 100vw: vw includes the scrollbar, which pushed the
           panel a few pixels wider than the page and reintroduced an overflow. */
        width: 100%;
    }
}

.jov-mobile-support {
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    border-top: 1px solid rgba(255, 255, 255, .15);
    clear: both;
    display: grid;
    gap: 9px;
    margin: 20px 0;
    padding: 18px 0;
    width: 100%;
}

.jov-mobile-support,
.jov-mobile-support a,
.jov-mobile-support span {
    color: #fff;
    font-size: 13px;
}

.jov-mobile-support i,
.jov-mobile-support b {
    color: var(--jov-orange);
    margin-right: 5px;
}

.jov-home,
.jov-static-page {
    color: var(--jov-ink);
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
}

.jov-home img,
.jov-static-page img {
    max-width: 100%;
}

.jov-hero {
    background: #141b28;
}

.jov-hero .carousel-item img {
    display: block;
    height: auto;
    max-height: 700px;
    object-fit: cover;
    width: 100%;
}

.jov-hero .carousel-control-prev,
.jov-hero .carousel-control-next {
    background: rgba(24, 32, 51, .42);
    border-radius: 50%;
    height: 46px;
    opacity: .9;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
}

.jov-hero .carousel-control-prev {
    left: 24px;
}

.jov-hero .carousel-control-next {
    right: 24px;
}

.jov-hero .carousel-indicators [data-bs-target] {
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    height: 10px;
    opacity: .75;
    width: 10px;
}

.jov-hero .carousel-indicators .active {
    background-color: var(--jov-orange);
    opacity: 1;
}

.jov-trust-strip {
    background: var(--jov-navy);
    color: #fff;
}

.jov-trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.jov-trust-strip__item {
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    gap: 16px;
    min-height: 104px;
    padding: 18px 34px;
}

.jov-trust-strip__item:last-child {
    border-right: 0;
}

.jov-trust-strip__item img {
    height: 46px;
    object-fit: contain;
    width: 46px;
}

.jov-trust-strip__item strong,
.jov-trust-strip__item span {
    display: block;
}

.jov-trust-strip__item strong {
    color: #fff;
    font-family: "PT Sans", sans-serif;
    font-size: 18px;
}

.jov-trust-strip__item span {
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
}

.jov-section {
    padding: 82px 0;
}

.jov-section--soft {
    background: var(--jov-soft);
}

.jov-narrow {
    max-width: 980px;
}

.jov-intro {
    text-align: center;
}

.jov-intro h1 {
    font-size: clamp(34px, 4vw, 54px);
    margin-bottom: 8px;
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: normal;
}

.jov-intro h2 {
    color: var(--jov-orange);
    font-size: clamp(22px, 2.5vw, 31px);
    margin-bottom: 28px;
}

.jov-intro p {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
}

.jov-intro__lead {
    color: var(--jov-ink);
    font-family: "PT Sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.jov-eyebrow {
    color: var(--jov-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .17em;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.jov-button {
    background: var(--jov-orange);
    border: 2px solid var(--jov-orange);
    border-radius: 4px;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 11px;
    margin-top: 16px;
    padding: 13px 25px;
    text-transform: uppercase;
}

.jov-button:hover {
    background: var(--jov-navy);
    border-color: var(--jov-navy);
    color: #fff;
}

.jov-section-heading {
    margin-bottom: 38px;
    text-align: center;
}

.jov-section-heading h2,
.jov-section-heading h3 {
    font-size: clamp(30px, 3vw, 44px);
    margin-bottom: 0;
}

.jov-promo-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 48px;
}

.jov-promo-card,
.jov-category-card {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(30, 40, 61, .08);
    display: block;
    overflow: hidden;
}

.jov-promo-card img,
.jov-category-card img {
    display: block;
    height: auto;
    transition: transform .35s ease;
    width: 100%;
}

.jov-promo-card:hover img,
.jov-category-card:hover img {
    transform: scale(1.035);
}

.jov-promo-card span {
    align-items: center;
    color: var(--jov-ink);
    display: flex;
    font-family: "PT Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    justify-content: space-between;
    padding: 14px 18px;
}

.jov-promo-card:hover span {
    color: var(--jov-orange);
}

.jov-category-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, 1fr);
}

.jov-category-card {
    position: relative;
}

.jov-category-card strong {
    background: rgba(45, 56, 77, .92);
    bottom: 18px;
    color: #fff;
    font-family: "PT Sans", sans-serif;
    font-size: 18px;
    left: 18px;
    padding: 8px 16px;
    position: absolute;
}

.jov-brand-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(4, 1fr);
}

.jov-brand-card {
    background: #fff;
    border: 1px solid var(--jov-border);
    border-radius: 5px;
    display: block;
    overflow: hidden;
}

.jov-brand-card img {
    aspect-ratio: 3 / 4;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
    width: 100%;
}

.jov-brand-card:hover {
    border-color: var(--jov-orange);
    box-shadow: 0 12px 28px rgba(30, 40, 61, .1);
    transform: translateY(-4px);
}

.jov-brand-card:hover img {
    transform: scale(1.025);
}

.jov-brand-card > div {
    padding: 16px 18px 18px;
}

.jov-brand-card strong,
.jov-brand-card span {
    display: block;
}

.jov-brand-card strong {
    color: var(--jov-ink);
    font-family: "PT Sans", sans-serif;
    font-size: 19px;
}

.jov-brand-card span {
    color: var(--jov-orange);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    margin-top: 3px;
    text-transform: uppercase;
}

.jov-key-features {
    background: var(--jov-navy);
}

.jov-section-heading--light h2 {
    color: #fff;
}

.jov-features-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, 1fr);
}

.jov-features-grid > div {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 5px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 145px;
    padding: 22px 16px;
    text-align: center;
}

.jov-features-grid i {
    color: var(--jov-orange);
    font-size: 29px;
}

.jov-features-grid span {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.jov-guide-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, 1fr);
}

.jov-guide-grid article {
    border: 1px solid var(--jov-border);
    border-left: 4px solid var(--jov-orange);
    border-radius: 4px;
    padding: 27px 28px;
}

.jov-guide-grid h3 {
    font-size: 23px;
    margin-bottom: 8px;
}

.jov-guide-grid p {
    margin-bottom: 0;
}

.jov-age-callout {
    align-items: center;
    background: #fff8f3;
    border: 1px solid #ffd9c2;
    border-radius: 6px;
    display: grid;
    gap: 22px;
    grid-template-columns: auto 1fr auto;
    margin-top: 48px;
    padding: 25px 28px;
}

.jov-age-callout__badge {
    align-items: center;
    background: var(--jov-orange);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-family: "PT Sans", sans-serif;
    font-size: 21px;
    font-weight: 700;
    height: 62px;
    justify-content: center;
    width: 62px;
}

.jov-age-callout h3,
.jov-age-callout p {
    margin-bottom: 0;
}

.jov-age-callout h3 {
    font-size: 21px;
}

.jov-age-callout a {
    color: var(--jov-orange);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.jov-static-page {
    margin: 0 auto;
    max-width: 1240px;
    padding: 76px 24px 90px;
}

.jov-static-hero {
    align-items: center;
    background: var(--jov-navy);
    border-radius: 7px;
    display: grid;
    gap: 60px;
    grid-template-columns: 1.25fr .75fr;
    margin-bottom: 38px;
    overflow: hidden;
    padding-left: 60px;
}

.jov-static-hero h1,
.jov-static-hero p:not(.jov-eyebrow) {
    color: #fff;
}

.jov-static-hero h1 {
    font-size: clamp(36px, 4vw, 55px);
}

.jov-static-hero img {
    height: 100%;
    min-height: 390px;
    object-fit: cover;
    width: 100%;
}

.jov-age-notice {
    align-items: start;
    background: #fff8f3;
    border: 1px solid #ffd7bf;
    border-radius: 6px;
    display: flex;
    gap: 20px;
    margin-bottom: 48px;
    padding: 25px 28px;
}

.jov-age-notice > strong {
    background: var(--jov-orange);
    border-radius: 50%;
    color: #fff;
    flex: 0 0 auto;
    padding: 11px 8px;
}

.jov-age-notice h2 {
    font-size: 22px;
    margin-bottom: 4px;
}

.jov-age-notice p {
    margin-bottom: 0;
}

.jov-age-notice a,
.jov-policy-content a,
.jov-contact-details a {
    color: var(--jov-orange);
}

.jov-content-section {
    column-gap: 60px;
    columns: 2;
    margin: 0 auto 58px;
}

.jov-content-section h2 {
    break-after: avoid;
    font-size: 27px;
    margin-bottom: 10px;
    margin-top: 0;
}

.jov-content-section p {
    break-inside: avoid;
    margin-bottom: 30px;
}

.jov-stock-list {
    align-items: start;
    background: var(--jov-soft);
    border-radius: 7px;
    display: grid;
    gap: 55px;
    grid-template-columns: .8fr 1.2fr;
    padding: 40px 46px;
}

.jov-stock-list ul {
    display: grid;
    gap: 11px 30px;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
}

.jov-stock-list li::before {
    color: var(--jov-orange);
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    margin-right: 9px;
}

.jov-page-heading {
    margin: 0 auto 46px;
    max-width: 780px;
    text-align: center;
}

.jov-page-heading h1 {
    font-size: clamp(38px, 4vw, 56px);
    margin-bottom: 12px;
}

.jov-contact-grid {
    display: grid;
    gap: 34px;
    grid-template-columns: .7fr 1.3fr;
}

.jov-contact-details {
    background: var(--jov-navy);
    border-radius: 7px;
    color: #fff;
    padding: 38px 34px;
}

.jov-contact-details h2 {
    color: #fff;
    font-size: 28px;
    margin-bottom: 26px;
}

.jov-contact-details > a,
.jov-contact-details > div {
    align-items: start;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    display: flex;
    gap: 15px;
    padding: 17px 0;
}

.jov-contact-details > a:hover {
    color: #ffb484;
}

.jov-contact-details i {
    color: var(--jov-orange);
    font-size: 21px;
    margin-top: 4px;
}

.jov-contact-details small,
.jov-contact-details span {
    display: block;
}

.jov-contact-details small {
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.jov-contact-details__note {
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    margin: 28px 0 0;
}

.jov-contact-details__note strong {
    color: var(--jov-orange);
}

.jov-contact-form {
    border: 1px solid var(--jov-border);
    border-radius: 7px;
    padding: 38px;
}

.jov-contact-form h2 {
    font-size: 30px;
}

.jov-contact-form .tpcontact__form {
    margin-top: 24px;
}

.jov-contact-form .tpcontact__form form.contact-form .contact-form-group input.contact-form-input,
.jov-contact-form .tpcontact__form form.contact-form .contact-form-group textarea {
    border: 1px solid var(--jov-border);
    border-radius: 4px;
}

.jov-contact-form .tpcontact__form form.contact-form .contact-form-group input.contact-form-input:focus,
.jov-contact-form .tpcontact__form form.contact-form .contact-form-group textarea:focus {
    border-color: var(--jov-orange);
}

.jov-contact-form .tp-color-btn {
    background: var(--jov-orange);
    border-radius: 4px;
    color: #fff;
}

.jov-contact-form .tp-color-btn:hover {
    background: var(--jov-navy);
}

.jov-policy-page {
    max-width: 1050px;
}

.jov-policy-content {
    background: #fff;
    border: 1px solid var(--jov-border);
    border-radius: 7px;
    padding: 42px 50px;
}

.jov-policy-content h2,
.jov-policy-content h3 {
    color: var(--jov-ink);
    margin-top: 34px;
}

.jov-policy-content > h2:first-child,
.jov-policy-content > h3:first-child {
    margin-top: 0;
}

.jov-policy-content h2 {
    font-size: 27px;
}

.jov-policy-content h3 {
    font-size: 21px;
}

.jov-policy-content p,
.jov-policy-content li {
    color: #4f596b;
    font-size: 15px;
    line-height: 1.8;
}

.jov-policy-content ul,
.jov-policy-content ol {
    margin: 14px 0 22px 22px;
}

.jov-policy-content address {
    background: var(--jov-soft);
    border-left: 3px solid var(--jov-orange);
    font-style: normal;
    margin: 20px 0;
    padding: 18px 20px;
}

.jov-business-details {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, 1fr);
}

.jov-business-details p {
    background: var(--jov-soft);
    border-radius: 4px;
    margin: 0;
    padding: 22px;
}

.footer-area {
    color: #fff;
}

.footer-area .jov-footer-contact {
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    display: grid;
    gap: 20px;
    grid-template-columns: .7fr 1fr 1.3fr;
    margin-bottom: 48px;
    padding-bottom: 32px;
}

.jov-footer-contact > a,
.jov-footer-contact > div {
    align-items: center;
    color: #fff;
    display: flex;
    gap: 13px;
}

.jov-footer-contact > a:hover {
    color: #ffb484;
}

.jov-footer-contact i {
    color: var(--jov-orange);
    font-size: 24px;
}

.jov-footer-contact small,
.jov-footer-contact span {
    display: block;
}

.jov-footer-contact small {
    color: rgba(255, 255, 255, .6);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.footer-area .footer-widget,
.footer-area .footer-content,
.footer-area .footer-content p,
.footer-area .footer-widget__links a,
.footer-area .footer-widget__newsletter p {
    color: rgba(255, 255, 255, .78);
}

.footer-area .footer-widget__title {
    color: #fff;
    font-size: 18px;
    margin-bottom: 22px;
}

.footer-area .footer-widget__links a:hover {
    color: var(--jov-orange);
}

.footer-area .footer-logo .jov-site-logo {
    max-width: 245px;
}

.footer-area .footer-widget__newsletter input {
    border: 1px solid rgba(255, 255, 255, .25);
}

.footer-area .footer-widget__newsletter button {
    background: var(--jov-orange);
    color: #fff;
}

.footer-area .footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.footer-area .footer-copyright__content {
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    padding: 19px 0;
}

.footer-area .footer-copyright .col-xl-6 {
    width: 100%;
}

.scroll-top {
    background: var(--jov-orange);
}

.jov-trust-strip__grid,
.jov-promo-grid,
.jov-category-grid,
.jov-features-grid,
.jov-product-grid {
    grid-template-columns: repeat(var(--jov-columns, 3), minmax(0, 1fr));
}

.jov-trust-strip__item {
    color: #fff;
}

.jov-trust-strip__item > i {
    color: var(--jov-orange);
    flex: 0 0 46px;
    font-size: 31px;
    text-align: center;
}

.jov-hero .carousel-item {
    position: relative;
}

.jov-hero__content {
    color: #fff;
    display: flex;
    flex-direction: column;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.jov-hero__content small,
.jov-hero__content strong,
.jov-hero__content > span,
.jov-hero__content b {
    max-width: 520px;
}

.jov-hero__content small {
    color: var(--jov-orange);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.jov-hero__content strong {
    color: #fff;
    font-family: "PT Sans", sans-serif;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.08;
}

.jov-hero__content b {
    margin-top: 15px;
}

.jov-editorial__grid {
    align-items: center;
    display: grid;
    gap: 55px;
    grid-template-columns: 1fr 1fr;
}

.jov-editorial__grid--image-left .jov-editorial__image {
    order: -1;
}

.jov-editorial__image img {
    border-radius: 7px;
    height: auto;
    width: 100%;
}

.jov-editorial__content h2,
.jov-age-guide h2 {
    font-size: clamp(30px, 3vw, 44px);
}

.jov-richtext > :last-child {
    margin-bottom: 0;
}

.jov-promo-card p {
    color: var(--jov-muted);
    font-size: 13px;
    margin: -4px 18px 17px;
}

.jov-promo-card span b {
    font: inherit;
}

.jov-product-shelf__header,
.jov-deal__heading,
.jov-category-products__heading,
.jov-newsletter__inner {
    align-items: center;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    margin-bottom: 34px;
}

.jov-product-shelf__header h2,
.jov-product-shelf__header h3,
.jov-deal__heading h2,
.jov-category-products__heading h3 {
    margin-bottom: 0;
}

.jov-product-shelf__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}

.jov-product-shelf__tabs button {
    background: #fff;
    border: 1px solid var(--jov-border);
    border-radius: 4px;
    color: var(--jov-ink);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 13px;
}

.jov-product-shelf__tabs button:hover,
.jov-product-shelf__tabs button.active {
    background: var(--jov-orange);
    border-color: var(--jov-orange);
    color: #fff;
}

.jov-product-shelf.is-loading .jov-product-grid {
    opacity: .5;
    pointer-events: none;
}

.jov-product-shelf__status {
    color: var(--jov-muted);
    font-size: 12px;
    min-height: 20px;
}

.jov-product-grid {
    display: grid;
    gap: 24px;
}

.jov-product-grid__item,
.jov-product-grid__item .tpproduct {
    min-width: 0;
}

.jov-product-grid__item {
    display: flex;
}

.jov-product-grid__item .tpproduct {
    height: 100%;
    margin-bottom: 0;
    width: 100%;
}

.jov-section-empty {
    grid-column: 1 / -1;
    margin: 20px 0;
    text-align: center;
}

.jov-section-help {
    font-size: 12px;
    margin-top: 12px;
}

.jov-deal {
    background-color: #fff5ef;
    background-position: center;
    background-size: cover;
}

.jov-deal__countdown {
    display: flex;
    gap: 8px;
}

.jov-deal__countdown .cdown {
    background: var(--jov-navy);
    border-radius: 4px;
    color: #fff;
    min-width: 64px;
    padding: 8px;
    text-align: center;
}

.jov-deal__countdown .time-count,
.jov-deal__countdown p {
    color: #fff;
    display: block;
    font-size: 11px;
    line-height: 1.2;
    margin: 0;
}

.jov-deal__countdown .time-count {
    font-size: 20px;
    font-weight: 700;
}

.jov-category-products + .jov-category-products {
    margin-top: 48px;
}

.jov-category-products__heading a {
    color: var(--jov-orange);
    font-size: 13px;
    font-weight: 700;
}

.jov-collection-grid,
.jov-native-brand-grid,
.jov-gallery-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jov-native-brand {
    align-items: center;
    background: #fff;
    border: 1px solid var(--jov-border);
    border-radius: 5px;
    color: var(--jov-ink);
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    min-height: 180px;
    padding: 24px;
    text-align: center;
}

.jov-native-brand:hover {
    border-color: var(--jov-orange);
    color: var(--jov-orange);
    transform: translateY(-3px);
}

.jov-native-brand img {
    height: 80px;
    object-fit: contain;
    width: 100%;
}

.jov-feature-item {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 5px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 145px;
    padding: 22px 16px;
    text-align: center;
}

.jov-feature-item:hover {
    border-color: var(--jov-orange);
    color: #fff;
}

.jov-feature-item img {
    height: 38px;
    object-fit: contain;
    width: 38px;
}

.jov-feature-item i {
    color: var(--jov-orange);
    font-size: 29px;
}

.jov-feature-item span {
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
}

.jov-age-guide {
    align-items: center;
    background: #fff8f3;
    border: 1px solid #ffd9c2;
    border-radius: 7px;
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr auto;
    padding: 38px 42px;
}

.jov-age-guide--with-image {
    grid-template-columns: minmax(220px, .65fr) 1fr auto;
}

.jov-age-guide > img {
    border-radius: 5px;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
    width: 100%;
}

.jov-gallery-grid a {
    border-radius: 5px;
    display: block;
    overflow: hidden;
}

.jov-gallery-grid img {
    aspect-ratio: 1 / 1;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
    width: 100%;
}

.jov-gallery-grid a:hover img {
    transform: scale(1.04);
}

.jov-newsletter {
    background-color: var(--jov-navy);
    background-position: center;
    background-size: cover;
    color: #fff;
}

.jov-newsletter__inner {
    margin-bottom: 0;
}

.jov-newsletter__inner > div {
    flex: 1 1 50%;
}

.jov-newsletter h2,
.jov-newsletter p {
    color: #fff;
}

.jov-newsletter__form .input-group {
    margin-bottom: 8px !important;
}

.jov-newsletter__form input {
    border: 0;
    min-height: 52px;
    padding: 0 18px;
}

.jov-newsletter__form button {
    background: var(--jov-orange);
    border-color: var(--jov-orange);
    color: #fff;
}

.jov-newsletter small {
    color: rgba(255, 255, 255, .72);
}

@media (max-width: 1399px) {
    .jov-main-nav > ul > li > a {
        font-size: 11px;
        padding: 0 5px;
    }

    /* The full catalogue menu cannot share this row with the contact link once
       the container drops to the xl grid width. The same phone number and email
       remain visible in the age bar above, so release the space to the menu
       instead of letting the last items overlap it. */
    .jov-header-nav__contact {
        display: none;
    }
}

@media (max-width: 1199px) {
    .jov-age-bar__inner {
        justify-content: center;
    }

    .jov-age-bar__support {
        display: none;
    }

    .tp-md-lg-header {
        padding-bottom: 18px !important;
        padding-top: 18px !important;
    }

    .jov-brand-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jov-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .jov-section {
        padding: 64px 0;
    }

    .jov-hero .carousel-control-prev,
    .jov-hero .carousel-control-next {
        height: 38px;
        width: 38px;
    }

    .jov-trust-strip__item {
        padding: 16px 20px;
    }

    .jov-static-hero {
        gap: 30px;
        grid-template-columns: 1fr 1fr;
        padding-left: 36px;
    }

    .jov-contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-area .jov-footer-contact {
        grid-template-columns: 1fr 1fr;
    }

    .footer-area .jov-footer-contact > div {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    body,
    p {
        font-size: 15px;
    }

    .jov-age-bar__inner {
        min-height: 40px;
    }

    .jov-age-bar__notice {
        gap: 8px;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .jov-age-bar__notice strong {
        flex: 0 0 25px;
    }

    .jov-age-copy--desktop {
        display: none;
    }

    .jov-age-copy--mobile {
        display: inline;
        line-height: 1.25;
        white-space: normal;
    }

    .tp-md-lg-header .jov-site-logo {
        max-width: 180px;
    }

    .jov-hero .carousel-item img {
        min-height: 190px;
        object-position: center;
    }

    .jov-hero .carousel-control-prev,
    .jov-hero .carousel-control-next {
        display: none;
    }

    .jov-trust-strip__grid {
        grid-template-columns: 1fr;
    }

    .jov-trust-strip__item {
        border-bottom: 1px solid rgba(255, 255, 255, .16);
        border-right: 0;
        min-height: 82px;
        padding: 12px 22px;
    }

    .jov-trust-strip__item:last-child {
        border-bottom: 0;
    }

    .jov-section {
        padding: 50px 0;
    }

    .jov-intro h1 {
        font-size: 30px;
        line-height: 1.12;
    }

    .jov-intro h2 {
        font-size: 21px;
    }

    .jov-promo-grid,
    .jov-category-grid,
    .jov-brand-grid,
    .jov-guide-grid,
    .jov-features-grid {
        grid-template-columns: 1fr;
    }

    .jov-category-card strong {
        bottom: 12px;
        left: 12px;
    }

    .jov-brand-card img {
        aspect-ratio: 4 / 3;
        object-position: center 35%;
    }

    .jov-features-grid > div {
        flex-direction: row;
        justify-content: flex-start;
        min-height: 76px;
        text-align: left;
    }

    .jov-age-callout {
        grid-template-columns: auto 1fr;
        padding: 22px;
    }

    .jov-age-callout a {
        grid-column: 1 / -1;
    }

    .jov-static-page {
        padding: 50px 16px 65px;
    }

    .jov-static-hero {
        grid-template-columns: 1fr;
        padding: 34px 28px 0;
    }

    .jov-static-hero img {
        margin: 0 -28px;
        max-width: calc(100% + 56px);
        min-height: 260px;
        width: calc(100% + 56px);
    }

    .jov-content-section {
        columns: 1;
    }

    .jov-stock-list,
    .jov-business-details {
        gap: 20px;
        grid-template-columns: 1fr;
        padding: 28px 24px;
    }

    .jov-stock-list ul {
        grid-template-columns: 1fr;
    }

    .jov-contact-details,
    .jov-contact-form,
    .jov-policy-content {
        padding: 28px 22px;
    }

    .jov-policy-content h2 {
        font-size: 23px;
    }

    .footer-area .jov-footer-contact {
        grid-template-columns: 1fr;
    }

    .footer-area .jov-footer-contact > div {
        grid-column: auto;
    }

    .footer-area .footer-widget,
    .footer-area .footer-copyright__content {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jov-home *,
    .jov-static-page *,
    .jov-header * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 991px) {
    .jov-product-grid,
    .jov-collection-grid,
    .jov-native-brand-grid,
    .jov-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jov-editorial__grid,
    .jov-age-guide,
    .jov-age-guide--with-image {
        grid-template-columns: 1fr;
    }

    .jov-editorial__grid .jov-editorial__image {
        order: -1;
    }

    .jov-age-guide .jov-age-callout__badge {
        grid-row: 1;
    }
}

@media (max-width: 767px) {
    .jov-product-shelf__header,
    .jov-deal__heading,
    .jov-category-products__heading,
    .jov-newsletter__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .jov-product-shelf__tabs {
        justify-content: flex-start;
    }

    .jov-product-grid,
    .jov-collection-grid,
    .jov-native-brand-grid,
    .jov-gallery-grid {
        grid-template-columns: 1fr;
    }

    .jov-age-guide {
        padding: 28px 22px;
    }

    .jov-deal__countdown {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------------
   Quick view popup

   The popup reuses the product detail markup inside a Magnific Popup shell.
   Left unstyled it collapses: the image column renders as a 120px strip with a
   zero-height slide, and the fixed 460px shell clips the add-to-cart button off
   the bottom. Give the media its own panel, let the detail column scroll on its
   own, and keep the purchase controls pinned so they are always reachable.
--------------------------------------------------------------------------- */
.quickview-content {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(24, 32, 51, .22);
    align-items: stretch;
    display: flex !important;
    flex-direction: row !important;
    /* Let the panel size to its content, capped to the viewport. A definite
       height leaves dead space under the shorter column, because the popup
       shell sizes the columns from content rather than stretching them. */
    max-height: min(86vh, 620px);
    overflow: hidden;
    width: 100%;
}

.quickview-content > .thumbnails {
    background: var(--jov-soft);
    border-inline-end: 1px solid var(--jov-border);
    display: flex;
    flex: 0 0 42%;
    max-height: none;
    max-width: 42%;
    padding: 26px;
    width: 42% !important;
}

.quickview-content .images,
.quickview-content .thumbnail {
    height: auto;
    margin: auto;
    width: 100%;
}

/* The panel already provides a soft background and its own padding, so a second
   white card around the image read as a frame inside a frame and shrank the
   product to roughly 40% of the column. The image now fills the panel it is given
   and, per the image contract, is never enlarged past its natural size. */
.quickview-content .thumbnail {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 320px;
}

.quickview-content .thumbnail img {
    background: transparent;
    border-radius: var(--jov-radius-md);
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: 380px;
    max-width: 100%;
    object-fit: contain;
    padding: 0;
    width: auto;
}

/* Only the description scrolls. The name, price, variant selector and purchase
   controls all stay put, so the things you decide with are never scrolled out of
   reach - previously the whole column scrolled and the selector could end up off
   screen while the panel showed the middle of a paragraph. */
.quickview-content > .product-detail {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    max-height: min(86vh, 620px);
    min-width: 0;
    overflow: hidden;
    padding: 30px 32px 0 !important;
    width: 58% !important;
}

/* min-height: 0 at every level of the chain, or a flex item refuses to shrink
   below its content and the column spills past the panel it sits in - which put
   the purchase bar 69px below the panel, where the panel's own clipping cut it
   in half. */
.quickview-content .tpproduct-details__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    /* This box has to fill the column, not size to its content: when it sized to
       content its children ran past its own box and the column's clipping cut the
       purchase bar in half. */
    height: 100%;
    min-height: 0;
}

.quickview-content .tpproduct-details__pera {
    flex: 1 1 auto;
    /* Shrinkable, but not out of existence - on a product with a tall variant
       block the fixed rows would otherwise take every pixel and the description
       would collapse to nothing. */
    min-height: 72px;
    overflow-y: auto;
    padding-inline-end: var(--jov-space-2);
}

/* The bar is the last row, so the column needs the padding the top has. */
.quickview-content > .product-detail {
    padding-bottom: var(--jov-space-4) !important;
}

.quickview-content .cart-form {
    flex: 0 0 auto;
}

.quickview-content .tpproduct-details__title {
    font-size: 21px;
    line-height: 1.35;
    margin-bottom: 0;
}

.quickview-content .tpproduct-details__title a {
    color: var(--jov-ink);
}

.quickview-content .tpproduct-details__title a:hover {
    color: var(--jov-orange);
}

.quickview-content .tpproduct-details__price {
    border-bottom: 1px solid var(--jov-border);
    padding-bottom: 18px;
}

.quickview-content .tpproduct-details__pera {
    color: var(--jov-muted);
    /* This was clamped to four lines to keep the purchase controls above the
       fold. Those controls are pinned now, so the description can be read in
       full instead - it is the one part of the panel that scrolls. */
    display: block;
    font-size: 15px;
    margin-bottom: 18px;
    overflow-y: auto;
}

.quickview-content .tpproduct-details__pera p {
    font-size: 15px;
    margin-bottom: 0;
}

/* Keep the quantity, add-to-cart and wishlist controls visible while the rest
   of the detail column scrolls. */
/* The purchase bar sticks to the foot of the scrolling detail column. Without
   room reserved beneath it, whatever the column ends on - usually the flavour
   swatches - sits underneath it and is only half readable. */
/* Now that only the description scrolls, this bar is simply the last row of a
   column that does not move. Leaving it sticky pinned it over the variant
   selector - a sticky box still overlays what sits behind it. */
.quickview-content .tpproduct-details__count {
    background: #fff;
    border-top: 1px solid var(--jov-border);
    flex: 0 0 auto;
    gap: var(--jov-space-3) !important;
    margin-bottom: 0 !important;
    padding: var(--jov-space-4) 0;
    position: static;
}

/* The bar is the last thing in the scrolling column, so everything above it
   scrolls underneath. The variant selector is the last thing above it and was
   left half covered, which on a product with options is the one control the
   shopper needs. Reserve the bar's own height beneath the form. */
.quickview-content:not(.quickview-content--compact) .cart-form .tpproductdot {
    margin-bottom: var(--jov-space-3) !important;
}

/* Add to cart is the point of this panel, so it takes the room that is left
   rather than sitting as a small control between two others. */
.quickview-content .tpproduct-details__count .btn.add-to-cart {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 180px;
    padding: 0 var(--jov-space-5);
}

.quickview-content .tpproduct-details__quantity,
.quickview-content .tpproduct-details__count .tpproduct-details__wishlist {
    flex: 0 0 auto;
}

/* Magnific Popup shell: centre the panel and keep it inside the viewport. */
.mfp-content .quickview-content {
    margin: 0 auto;
    max-width: 940px;
}

@media (max-width: 767px) {
    .quickview-content {
        flex-direction: column !important;
        max-height: 88vh;
    }

    .quickview-content > .thumbnails {
        border-bottom: 1px solid var(--jov-border);
        border-inline-end: 0;
        flex: 0 0 auto;
        max-width: 100%;
        padding: 18px;
        width: 100% !important;
    }

    .quickview-content .thumbnail img {
        margin: 0 auto;
        max-width: 260px;
    }

    .quickview-content > .product-detail {
        max-height: none;
        padding: 22px 20px 0 !important;
        width: 100% !important;
    }
}

/* ---------------------------------------------------------------------------
   Product detail description and review tabs

   The migrated Shopify descriptions render as a bare wall of text directly
   against the page edge. Give the tab bar a real selected state and the copy a
   readable measure, with sane handling for the tables, lists and images that
   come through in the imported HTML.
--------------------------------------------------------------------------- */
.tpproduct-details__navtab {
    margin-top: 10px;
}

.tpproduct-details__nav .nav-tabs {
    border-bottom: 1px solid var(--jov-border);
    gap: 6px;
    justify-content: flex-start;
    padding-bottom: 0;
}

.tpproduct-details__nav .nav-tabs .nav-links {
    border-bottom: 2px solid transparent;
    color: var(--jov-muted);
    font-family: "PT Sans", sans-serif;
    font-size: 15px;
    letter-spacing: .01em;
    margin: 0;
    padding: 12px 20px;
    text-transform: uppercase;
    transition: color .2s ease, border-color .2s ease;
}

.tpproduct-details__nav .nav-tabs .nav-links:hover {
    color: var(--jov-ink);
}

.tpproduct-details__nav .nav-tabs .nav-links.active {
    border-bottom-color: var(--jov-orange);
    color: var(--jov-ink);
}

.tp-content-tab .ck-content {
    color: var(--jov-muted);
    font-size: 16px;
    line-height: 1.8;
    padding: 32px 0 8px;
}

.tp-content-tab .ck-content > :last-child {
    margin-bottom: 0;
}

.tp-content-tab .ck-content h1,
.tp-content-tab .ck-content h2,
.tp-content-tab .ck-content h3,
.tp-content-tab .ck-content h4,
.tp-content-tab .ck-content h5,
.tp-content-tab .ck-content h6 {
    color: var(--jov-ink);
    margin: 26px 0 12px;
}

.tp-content-tab .ck-content h2 {
    font-size: 22px;
}

.tp-content-tab .ck-content h3,
.tp-content-tab .ck-content h4 {
    font-size: 18px;
}

.tp-content-tab .ck-content p {
    margin-bottom: 16px;
}

.tp-content-tab .ck-content ul,
.tp-content-tab .ck-content ol {
    margin: 0 0 18px;
    padding-inline-start: 22px;
}

.tp-content-tab .ck-content li {
    list-style: inherit;
    margin-bottom: 8px;
}

.tp-content-tab .ck-content ul {
    list-style: disc;
}

.tp-content-tab .ck-content ol {
    list-style: decimal;
}

.tp-content-tab .ck-content a {
    color: var(--jov-orange-dark);
    text-decoration: underline;
}

.tp-content-tab .ck-content img {
    border-radius: 10px;
    height: auto;
    max-width: 100%;
}

.tp-content-tab .ck-content strong,
.tp-content-tab .ck-content b {
    color: var(--jov-ink);
}

/* Imported Shopify specification tables are frequently wider than the column;
   keep them scrollable instead of forcing the page to scroll sideways. */
.tp-content-tab .ck-content table {
    border: 1px solid var(--jov-border);
    border-collapse: collapse;
    display: block;
    margin-bottom: 18px;
    max-width: 100%;
    overflow-x: auto;
    width: 100%;
}

.tp-content-tab .ck-content th,
.tp-content-tab .ck-content td {
    border: 1px solid var(--jov-border);
    padding: 10px 14px;
    text-align: start;
}

.tp-content-tab .ck-content th {
    background: var(--jov-soft);
    color: var(--jov-ink);
    font-weight: 700;
}

@media (max-width: 767px) {
    .tpproduct-details__nav .nav-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }

    .tpproduct-details__nav .nav-tabs .nav-links {
        padding: 12px 14px;
    }

    .tp-content-tab .ck-content {
        padding-top: 24px;
    }
}

/* ===========================================================================
   Homepage restyle
   ---------------------------------------------------------------------------
   Tightens the vertical rhythm, gives every section a consistent header, and
   turns the catalogue rows into proper cards. Colours and logo are unchanged -
   everything below reuses the existing brand tokens.
   ========================================================================= */

/* --- rhythm ------------------------------------------------------------- */
.jov-section {
    padding: 58px 0;
}

.jov-section + .jov-section {
    padding-top: 52px;
}

.jov-section--soft + .jov-section--soft {
    padding-top: 0;
}

/* --- section headers ---------------------------------------------------- */
.jov-section-heading {
    margin-bottom: 26px;
}

.jov-section-heading h2,
.jov-section-heading h3,
.jov-category-products__heading h3 {
    font-size: clamp(22px, 2.3vw, 30px);
    letter-spacing: -.02em;
    margin-bottom: 4px;
    position: relative;
}

.jov-eyebrow {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-bottom: 5px;
}

.jov-eyebrow::before {
    background: var(--jov-orange);
    content: "";
    display: inline-block;
    height: 2px;
    width: 20px;
}

.jov-intro h2 {
    margin-bottom: 20px;
}

/* --- trust strip -------------------------------------------------------- */
.jov-trust-strip__item {
    padding: 18px 22px;
    transition: background-color .2s ease;
}

.jov-trust-strip__item:hover {
    background: rgba(255, 255, 255, .05);
}

.jov-trust-strip__item > i {
    font-size: 26px;
}

/* --- editorial ---------------------------------------------------------- */
.jov-editorial__grid {
    align-items: center;
    gap: 44px;
}

.jov-editorial__image img {
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(24, 32, 51, .16);
}

.jov-editorial__content {
    padding: 6px 0;
}

/* --- promo cards -------------------------------------------------------- */
.jov-promo-card {
    border: 1px solid var(--jov-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.jov-promo-card:hover {
    border-color: rgba(241, 123, 54, .5);
    box-shadow: 0 16px 34px rgba(24, 32, 51, .14);
    transform: translateY(-4px);
}

.jov-promo-card img {
    transition: transform .4s ease;
}

.jov-promo-card:hover img {
    transform: scale(1.03);
}

/* --- product shelf ------------------------------------------------------ */
.jov-product-shelf__header {
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 22px;
}

.jov-product-shelf__tabs {
    gap: 6px;
}

.jov-product-shelf__tabs button {
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .02em;
    padding: 8px 16px;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* --- product cards ------------------------------------------------------ */
/* One definition for every product card on the storefront: homepage shelves,
   category listings, search results and the related-products carousel. */
.tpproduct {
    background: #fff;
    border: 1px solid var(--jov-border);
    border-radius: 12px;
    /* The card clips its own children so a hover control can never overhang the
       rounded corner, whatever is added to the card later. */
    overflow: hidden;
    padding: 10px 10px 14px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.tpproduct:hover {
    border-color: rgba(241, 123, 54, .45);
    box-shadow: 0 14px 30px rgba(24, 32, 51, .13);
    transform: translateY(-3px);
}

.tpproduct .tpproduct__thumb {
    border-radius: 9px;
    margin-bottom: 12px;
}

.tpproduct .tpproduct__content {
    padding: 0 4px;
}

.tpproduct .tpproduct__title {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 0;
    min-height: 2.8em;
}

.tpproduct .tpproduct__title a {
    color: var(--jov-ink);
}

.tpproduct:hover .tpproduct__title a {
    color: var(--jov-orange);
}

/* Image overlay actions: circular buttons that fade in together. */
.tpproduct .tpproduct__thumb-action {
    bottom: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
    top: auto;
    transform: none;
    z-index: var(--jov-z-card-hover);
}

.tpproduct .tpproduct__thumb-action a {
    align-items: center;
    background: #fff;
    border: 1px solid var(--jov-border);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(24, 32, 51, .14);
    color: var(--jov-ink);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    margin: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease, color .2s ease;
    width: 36px;
}

.tpproduct:hover .tpproduct__thumb-action a,
.tpproduct:focus-within .tpproduct__thumb-action a {
    opacity: 1;
    transform: translateY(0);
}

.tpproduct .tpproduct__thumb-action a:nth-child(2) { transition-delay: .04s; }
.tpproduct .tpproduct__thumb-action a:nth-child(3) { transition-delay: .08s; }

.tpproduct .tpproduct__thumb-action a:hover {
    background: var(--jov-orange);
    border-color: var(--jov-orange);
    color: #fff;
}

.tpproduct .tpproduct__thumb-action a i {
    font-size: 14px;
}

/* The base theme swaps the price row for the cart control on hover. That stays,
   because overlaying the button elsewhere covered the price; only the control
   itself changes, from an underlined link into a real button. */
.tpproduct .tpproduct__priceinfo-list span {
    font-size: 16px;
    font-weight: 700;
}

/* The cart control used to be absolutely positioned and revealed on hover, which
   is where the overlap bugs came from: it sat over the price on a mouse, and on a
   touch device - where there is no hover - it was permanently visible on top of
   the price with no room reserved for it. Swapping one absolute offset for another
   only moved the collision.

   It is now a normal block in the card's vertical flow. The card is a column, the
   content area grows to fill it, and the button sits at the bottom of every card.
   Price and button are both always visible, cards in a row end at the same height,
   and no state - mouse, keyboard or touch - can put one control on top of another. */
.tpproduct {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tpproduct .tpproduct__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.tpproduct .tpproduct__rating {
    align-items: center;
    display: flex;
    gap: 6px;
    margin: 2px 0 0;
    min-height: 22px;
}

.tpproduct .tpproduct__priceinfo {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}

/* Price above, button below, both full width. Side by side would need a minimum
   width the card cannot promise - these tiles are as narrow as 146px in the
   sidebar listing - and anything that cannot shrink ends up outside the card.

   The price is absolutely positioned upstream at bottom: -20px, hanging it below
   its own container so the cart control could take its place on hover. With the
   card clipping its children that put the price half outside the card, which is
   why it looked pinned to the bottom edge and cut off. Both items flow now. */
.tpproduct .tpproduct__priceinfo-list,
.tpproduct:hover .tpproduct__priceinfo-list,
.tpproduct:focus-within .tpproduct__priceinfo-list {
    bottom: auto;
    flex: 0 0 auto;
    inset-inline-start: auto;
    opacity: 1;
    position: static;
    top: auto;
    visibility: visible;
}

.tpproduct .tpproduct__cart {
    flex: 0 0 auto;
    inset: auto;
    min-width: 0;
    opacity: 1;
    position: static;
    transform: none;
    visibility: visible;
    width: 100%;
}

.tpproduct .tpproduct__cart a {
    align-items: center;
    background: var(--jov-orange);
    border-radius: var(--jov-radius-md);
    box-shadow: 0 6px 16px rgba(241, 123, 54, .32);
    color: #fff;
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    height: 40px;
    justify-content: center;
    letter-spacing: .01em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s ease;
    width: 100%;
}

.tpproduct .tpproduct__cart a:hover {
    background: var(--jov-orange-dark);
    color: #fff;
}

.tpproduct .tpproduct__cart a i {
    color: #fff;
    font-size: 14px;
    margin: 0;
}

/* Touch devices have no hover, so the image overlay controls stay available. The
   cart button no longer needs a rule here - it is always in the layout. */
@media (hover: none) {
    .tpproduct .tpproduct__thumb-action a {
        opacity: 1;
        transform: none;
        visibility: visible;
    }
}

/* --- features ----------------------------------------------------------- */
/* These tiles sit on the navy band and carry white text, so they keep the
   translucent treatment - only the radius and hover lift are refreshed. */
.jov-features-grid > div,
.jov-feature-item {
    border-radius: 10px;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.jov-features-grid > div:hover,
.jov-feature-item:hover {
    background: rgba(255, 255, 255, .14);
    border-color: var(--jov-orange);
    transform: translateY(-2px);
}

.jov-feature-item img {
    height: 46px;
    width: 46px;
}

.jov-feature-item strong {
    font-size: 15px;
}

/* --- age guide ---------------------------------------------------------- */
.jov-age-guide {
    border-radius: 14px;
}

/* --- newsletter --------------------------------------------------------- */
.jov-newsletter__inner {
    border-radius: 14px;
    padding: 34px;
}

.jov-newsletter__form input[type="email"] {
    border-radius: 8px;
    height: 46px;
}

.jov-newsletter__form button {
    border-radius: 8px;
    height: 46px;
}

@media (max-width: 991px) {
    .jov-section {
        padding: 42px 0;
    }

    .jov-editorial__grid {
        gap: 26px;
    }

    .jov-newsletter__inner {
        padding: 24px;
    }
}

/* --- gallery ------------------------------------------------------------ */
/* The gallery mixes square product photography with wide promo banners.
   Cropping to fill cut the wording off the banners, so contain them instead
   and let the tile provide the consistent square. */
.jov-gallery-grid a {
    background: var(--jov-soft);
    border: 1px solid var(--jov-border);
    border-radius: 10px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.jov-gallery-grid a:hover {
    border-color: rgba(241, 123, 54, .45);
    box-shadow: 0 14px 28px rgba(24, 32, 51, .12);
    transform: translateY(-3px);
}

.jov-gallery-grid {
    align-items: start;
}

/* Square product shots and wide banners share this grid, so let each tile take
   its natural height rather than forcing a square that letterboxes the banners. */
.jov-gallery-grid img {
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
    padding: 8px;
}

/* ---------------------------------------------------------------------------
   Image framing
   ---------------------------------------------------------------------------
   The generated media sizes are square centre-crops, so the storefront serves
   originals instead. Originals arrive in every shape and size - roughly a fifth
   of the catalogue is under 400px wide and a fifth is not square - so the frame
   has to own the dimensions and the image has to fit inside it.

   Two rules, applied to every image frame below:
     1. the frame sets the size; the image never does
     2. the image is never enlarged past its natural size, so a small supplier
        photo sits centred at its own size rather than being stretched soft
--------------------------------------------------------------------------- */

/* Product detail gallery. Without a frame the slide takes the image's natural
   height, which pushed the buy box off-screen on tall sources. */
.product-gallery__wrapper a {
    align-items: center;
    background: #fff;
    display: flex;
    height: var(--jov-gallery-max-h);
    justify-content: center;
    padding: var(--jov-space-4);
}

.product-gallery__wrapper a > img {
    height: auto;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

/* Thumbnail rail. The upstream rule sets a width with !important and no height,
   so a tall source produced a tall thumbnail and the rail lost its rhythm. */
.product-thumbnails .slick-slide img {
    background: #fff;
    border-radius: var(--jov-radius-sm);
    height: var(--jov-thumb-size);
    object-fit: contain;
    padding: var(--jov-space-1);
    width: var(--jov-thumb-size) !important;
}

/* Catalogue tiles. The square frame and `contain` were already correct; what was
   missing was an inset, so black-background product shots met the white card
   edge to edge and read as a pasted block. */
.jov-product-grid .tpproduct__thumb,
.bb-product-items-wrapper .tpproduct__thumb,
.related-product-area .tpproduct__thumb {
    padding: var(--jov-tile-inset);
}

.jov-product-grid .tpproduct__thumb > a,
.bb-product-items-wrapper .tpproduct__thumb > a,
.related-product-area .tpproduct__thumb > a {
    align-items: center;
    display: flex;
    justify-content: center;
}

.jov-product-grid .tpproduct__thumb > a > img,
.bb-product-items-wrapper .tpproduct__thumb > a > img,
.related-product-area .tpproduct__thumb > a > img {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

/* The hover image is positioned against the tile, so it needs the same inset as
   the primary image or the two would sit at different sizes as they cross-fade. */
.jov-product-grid .tpproduct__thumb > a > img.product-thumb-secondary,
.bb-product-items-wrapper .tpproduct__thumb > a > img.product-thumb-secondary,
.related-product-area .tpproduct__thumb > a > img.product-thumb-secondary {
    inset: var(--jov-tile-inset);
    margin: auto;
}

/* Brand cards were cropped to a 3/4 portrait, which cut the top and bottom off
   brand logos. Brand artwork is the one thing that must never be trimmed. */
.jov-brand-card img {
    aspect-ratio: 4 / 3;
    background: #fff;
    object-fit: contain;
    padding: var(--jov-space-3);
}

/* The page heading in the breadcrumb bar. It only renders on pages that supply no
   heading of their own, so it is the document h1 and needs a size that suits a bar
   rather than the 40px browser default for h1. */
.tp-breadcrumb__title {
    font-size: 32px;
    margin-bottom: 0;
}

/* The article title was an h4 before it became the page h1; keep the size it had. */
.postbox__single-title {
    font-size: 30px;
}

@media (max-width: 767px) {
    .tp-breadcrumb__title {
        font-size: 24px;
    }

    .postbox__single-title {
        font-size: 24px;
    }
}

/* Badges sit above the image but below the hover controls, per the stacking ladder.
   The upstream rule offsets them 25px/20px, which was set for a card with far more
   padding than this one and pushed them into the middle of the product shot. */
.tpproduct .product__badge-list {
    inset-inline-start: var(--jov-space-2);
    top: var(--jov-space-2);
    z-index: var(--jov-z-badge);
}

/* Quick view slider controls. Slick is initialised with dots and arrows, but they
   inherited the catalogue slider styling and sat almost invisibly on the soft
   panel background. */
.quickview-content .thumbnails .slick-dots {
    bottom: -6px;
    display: flex !important;
    gap: var(--jov-space-1);
    justify-content: center;
    list-style: none;
    margin: var(--jov-space-3) 0 0;
    padding: 0;
    position: relative;
}

.quickview-content .thumbnails .slick-dots li button {
    background: var(--jov-border);
    border: 0;
    border-radius: var(--jov-radius-pill);
    color: transparent;
    height: 8px;
    padding: 0;
    width: 8px;
}

.quickview-content .thumbnails .slick-dots li.slick-active button {
    background: var(--jov-orange);
    width: 20px;
}

.quickview-content .thumbnails .slick-arrow {
    background: #fff;
    border: 1px solid var(--jov-border);
    border-radius: 50%;
    height: 34px;
    width: 34px;
    z-index: var(--jov-z-badge);
}

/* --- buttons ------------------------------------------------------------ */
/* The secondary button carries a shine sweep: a translucent strip parked just
   outside its leading edge that animates across on hover. It only works if the
   button clips it, and nothing did - so the strip sat permanently outside the
   button as a pale block, and on hover it ran out past the far edge. Clipping is
   the whole fix; the effect then behaves as its author intended. */
.tpsecondary-btn {
    overflow: hidden;
}

/* --- footer newsletter -------------------------------------------------- */
/* The plugin renders the field inside an .input-group and the submit button
   outside it, so the group joined nothing and the button read as floating loose
   under the field. Presenting the two as one stacked control gives the pairing
   back without altering the form the plugin builds. */
.footer-area .footer-widget__newsletter .input-group {
    margin-bottom: var(--jov-space-2) !important;
}

.footer-area .footer-widget__newsletter input {
    border-radius: var(--jov-radius-md);
    height: 48px;
    padding-inline: var(--jov-space-4);
    width: 100%;
}

.footer-area .footer-widget__newsletter button {
    align-items: center;
    border: 0;
    border-radius: var(--jov-radius-md);
    display: flex;
    height: 48px;
    justify-content: center;
    padding: 0 var(--jov-space-5);
    width: 100%;
}

.footer-area .footer-widget__newsletter button:hover {
    background: var(--jov-orange-dark);
}

.footer-area .footer-widget__newsletter .newsletter-message {
    margin-top: var(--jov-space-2);
}

/* --- product filters ---------------------------------------------------- */
/* Stand-in for the folder glyph that used to be inlined once per category. Drawn
   with a border rather than an image so it costs nothing per row. */
.bb-product-filter-icon {
    border: 1.5px solid currentColor;
    border-radius: 2px;
    display: inline-block;
    height: 12px;
    margin-inline-end: var(--jov-space-2);
    opacity: .55;
    position: relative;
    top: 1px;
    width: 14px;
}

.bb-product-filter-icon::before {
    border-top: 1.5px solid currentColor;
    content: "";
    inset-inline-start: 1px;
    position: absolute;
    top: -4px;
    width: 5px;
}

/* A flat list of several hundred categories cannot be scanned, and it pushed the
   product grid far below the fold. Every option is kept - the panel scrolls
   instead of the page. */
.bb-product-filter-content > .bb-product-filter-items {
    max-height: 420px;
    overflow-y: auto;
    padding-inline-end: var(--jov-space-2);
}

.bb-product-filter-content > .bb-product-filter-items::-webkit-scrollbar {
    width: 6px;
}

.bb-product-filter-content > .bb-product-filter-items::-webkit-scrollbar-thumb {
    background: var(--jov-border);
    border-radius: var(--jov-radius-pill);
}

/* --- trust strip -------------------------------------------------------- */
/* Three of the five badges have an image asset and two fall back to an icon
   font, so the row mixed a 46px picture with a 26px glyph and the tiles ran to
   different heights. Until the two missing assets exist, give the glyph the same
   footprint as the images and let every tile share one height, so the strip reads
   as one row rather than five unrelated cards. */
.jov-trust-strip__grid {
    align-items: stretch;
}

.jov-trust-strip__item {
    height: 100%;
}

.jov-trust-strip__item > i,
.jov-trust-strip__item i.fal,
.jov-trust-strip__item i.fas {
    align-items: center;
    display: inline-flex;
    font-size: 26px;
    height: 46px;
    justify-content: center;
    width: 46px;
}

/* --- narrow viewports --------------------------------------------------- */
/* The frames introduced above are sized for a desktop column. On a phone the
   gallery frame would take most of the first screen and the quick view would
   keep a two-column split it has no room for. */
/* Between 992 and 1199 the gallery column is at its narrowest while the frame is
   still at full height, which left a tall band of empty space around the image. */
@media (max-width: 1199px) and (min-width: 992px) {
    :root {
        --jov-gallery-max-h: 420px;
    }
}

@media (max-width: 991px) {
    :root {
        --jov-gallery-max-h: 380px;
    }

    .quickview-content {
        flex-direction: column;
    }

    .quickview-content > .thumbnails {
        border-inline-end: 0;
        border-bottom: 1px solid var(--jov-border);
        flex: 0 0 auto;
        max-width: 100% !important;
        width: 100% !important;
    }

    .quickview-content > .product-detail {
        max-height: none;
        width: 100% !important;
    }

    .quickview-content .thumbnail {
        min-height: 240px;
    }

    .quickview-content .thumbnail img {
        max-height: 260px;
    }
}

@media (max-width: 767px) {
    :root {
        --jov-gallery-max-h: 320px;
        --jov-tile-inset: 8px;
        --jov-thumb-size: 56px;
    }

    /* The filter panel is inside a slide-in drawer on a phone, where a nested
       scrolling list fights the drawer's own scroll. */
    .bb-product-filter-content > .bb-product-filter-items {
        max-height: none;
        overflow-y: visible;
    }

    /* Touch targets. Anything tappable needs to clear 44px. */
    .tpproduct .tpproduct__thumb-action a {
        height: 44px;
        width: 44px;
    }

    .footer-area .footer-widget__newsletter input,
    .footer-area .footer-widget__newsletter button {
        height: 46px;
    }
}

/* The card reserves two lines for the title but the markup carries Bootstrap's
   .text-truncate, which cuts it to one and leaves the reserved line empty. Product
   names here are long and front-loaded with flavour and brand, so a second line is
   worth having - clamp to the space already set aside instead of hiding it. */
.tpproduct .tpproduct__title,
.tpproduct .tpproduct__title.text-truncate {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* Heading for static documents on the full-width template, which has no
   breadcrumb bar to carry the page title. */
.jov-static-title {
    font-size: 32px;
    margin-bottom: var(--jov-space-5);
}

@media (max-width: 767px) {
    .jov-static-title {
        font-size: 24px;
    }
}

/* --- key features ------------------------------------------------------- */
/* These tiles were built for a 46px icon, but the images configured against them
   are 720x340 category banners, so each one rendered as an unreadable sliver.
   Present them at the shape they actually are: a banner across the top of the
   tile. The aspect ratio matches the source exactly, so nothing is cropped. */
.jov-key-features--photos .jov-feature-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--jov-space-4);
    text-align: start;
}

.jov-key-features--photos .jov-feature-item img {
    aspect-ratio: 72 / 34;
    background: rgba(255, 255, 255, .06);
    border-radius: var(--jov-radius-md);
    height: auto;
    margin-bottom: var(--jov-space-4);
    object-fit: cover;
    width: 100%;
}

.jov-key-features .jov-feature-item i {
    margin-bottom: var(--jov-space-3);
}

/* --- footer on small screens -------------------------------------------- */
/* Below 576px every footer column goes full width, so the five of them stacked
   into nearly 2,000px of footer - longer than a phone screen twice over. The
   three link lists are short enough to sit two across, and the 40px gap between
   widgets is desktop spacing. */
@media (max-width: 575px) {
    .footer-area .footer-widget.mb-40 {
        margin-bottom: var(--jov-space-5);
    }

    .footer-area .footer-widget.ml-30 {
        margin-inline-start: 0;
    }

    .footer-area .col-lg-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .footer-area .footer-widget__title {
        margin-bottom: var(--jov-space-3);
    }

    .footer-area .footer-widget__links li {
        line-height: 1.5;
        margin-bottom: var(--jov-space-1);
    }
}

/* --- modal purchase controls -------------------------------------------- */
/* The add-to-cart button inherits padding but no height, so it collapsed to the
   height of its own text - about 17px - and read as a coloured strip rather than
   a button. It is the primary action in both modals. */
.quickview-content .btn.add-to-cart {
    align-items: center;
    /* Bootstrap's .btn resets the background to transparent on a real <button>,
       which is what the select-options modal uses, so that one rendered as an
       outline while quick view - which uses an anchor - stayed orange. State the
       colour here so both modals carry the same primary action. */
    background-color: var(--jov-orange);
    border: 0;
    border-radius: var(--jov-radius-md);
    color: #fff;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: var(--jov-space-2);
    height: 46px;
    justify-content: center;
    line-height: 1;
    padding: 0 var(--jov-space-5);
}

.quickview-content .tpproduct-details__quantity {
    height: 46px;
}

/* Keep the whole modal inside the viewport. When it grows taller than the window
   the page scrolls instead of the detail column, which takes the sticky purchase
   bar off screen with it - the bar can only hold its place if the panel it sits
   in is the thing that scrolls. */
.quickview-content {
    max-height: min(90vh, 700px);
}

/* The panel used to take its height from the image column, which left the detail
   column too short for its own fixed rows - the purchase bar ran past the bottom
   and was clipped. Let the detail column ask for the height it needs and have the
   image column match it. */
.quickview-content > .product-detail {
    max-height: none !important;
}

.quickview-content > .thumbnails {
    align-self: stretch;
    max-height: none !important;
}

.quickview-content > .thumbnails {
    max-height: 100%;
}

/* --- select-options modal ----------------------------------------------- */
.quickview-content--compact .quickview-content__heading {
    align-items: flex-start;
    display: flex;
    gap: var(--jov-space-4);
    margin-bottom: var(--jov-space-3);
}

.quickview-content--compact .quickview-content__thumb {
    align-items: center;
    background: #fff;
    border: 1px solid var(--jov-border);
    border-radius: var(--jov-radius-md);
    display: flex;
    flex: 0 0 auto;
    height: 84px;
    justify-content: center;
    overflow: hidden;
    padding: var(--jov-space-1);
    width: 84px;
}

.quickview-content--compact .quickview-content__thumb img {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

.quickview-content--compact .quickview-content__heading .tpproduct-details__title-area {
    flex: 1 1 auto;
    margin-bottom: 0 !important;
    min-width: 0;
}

.quickview-content .btn.add-to-cart:hover,
.quickview-content .btn.add-to-cart:focus {
    background-color: var(--jov-orange-dark);
    color: #fff;
}

/* The theme disables add-to-cart in four places - while a variant change is in
   flight, and when the chosen combination is unavailable or out of stock - but
   nothing ever styled that state, so a button you cannot press looked exactly
   like one you can. */
.quickview-content .btn.add-to-cart:disabled,
.quickview-content .btn.add-to-cart[disabled],
.cart-form button[type="submit"]:disabled {
    background-color: var(--jov-border);
    border-color: var(--jov-border);
    color: var(--jov-muted);
    cursor: not-allowed;
    opacity: 1;
}

/* With the description now the only flexible row, the fixed rows above and below
   it have to fit in what is left. Their desktop margins were sized for a column
   that scrolled as a whole, and together they overran the panel by a few pixels,
   clipping the foot of the purchase bar. */
.quickview-content .tpproduct-details__price {
    margin-bottom: 8px !important;
    margin-top: 4px !important;
}

.quickview-content .tpproduct-details__pera {
    margin-bottom: 10px;
}

.quickview-content .tpproduct-details__tag-area {
    margin-bottom: 2px !important;
}

/* --- login and register banner ------------------------------------------ */
/* The auth banner slot was built for a wide photograph and stretched whatever it
   was given edge to edge. It carries the logo, so it needs breathing room and its
   own aspect kept rather than being pulled across the full card width. */
.auth-card__banner {
    background: var(--jov-soft);
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: 120px;
    max-width: 260px;
    object-fit: contain;
    padding: var(--jov-space-5) var(--jov-space-4) 0;
    width: auto;
}

/* --- trust strip layout ------------------------------------------------- */
/* Five claims were being laid out in a four-column grid, so the fifth dropped
   onto a row of its own and the strip read as a mistake. The count drives the
   columns now, stepping down by width rather than orphaning the last item. */
@media (max-width: 1199px) {
    .jov-trust-strip__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    .jov-trust-strip__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575px) {
    .jov-trust-strip__grid {
        grid-template-columns: 1fr !important;
    }

    .jov-trust-strip__item {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
        min-height: 0;
        padding: var(--jov-space-4) var(--jov-space-4);
    }

    .jov-trust-strip__item:last-child {
        border-bottom: 0;
    }
}

/* At five across each tile is narrow, so the desktop padding no longer fits. */
@media (min-width: 1200px) {
    .jov-trust-strip__item {
        padding: var(--jov-space-4) var(--jov-space-5);
    }
}

/* The divider belongs between tiles, not after the last one in a row. */
.jov-trust-strip__item:last-child {
    border-right: 0;
}

/* --- newsletter --------------------------------------------------------- */
/* This band carried a promotional photograph behind its own heading and form,
   which left white text sitting on top of white product artwork. A gradient
   drawn from the existing brand navy keeps the section distinct from the white
   above it without competing with the words. */
.jov-newsletter {
    background-image: linear-gradient(135deg, var(--jov-navy) 0%, var(--jov-navy-dark) 55%, var(--jov-ink) 100%);
}

/* --- section rhythm ----------------------------------------------------- */
/* Five white blocks ran back to back in the middle of the page, so the scroll
   felt flat and white product cards had no edge to sit against. The shelves take
   the soft tint and everything between them stays white, which alternates the
   page without touching the three navy bands - those are the only strong
   statements on the homepage and they stop reading as such if the blocks either
   side are coloured too. No new colour: the tint is an existing token. */
.jov-section.jov-product-shelf {
    background: var(--jov-soft);
}

/* Consecutive tinted sections would otherwise show a seam of double padding. */
.jov-section.jov-product-shelf + .jov-section.jov-product-shelf {
    padding-top: 0;
}

/* Cards need a visible edge once they are no longer white-on-white. */
.jov-product-shelf .tpproduct {
    border-color: #dfe4ec;
}

/* --- homepage shelf density --------------------------------------------- */
/* Four cards across a 1700px viewport gave a 344x517 card, of which the image
   alone was 322px - so barely a row and a half fitted on a laptop screen. A
   fifth column brings the card down to roughly 275x440 without shrinking the
   title, which is already tight for names this long. */
/* Each shelf shows six products, and six divides evenly by six, three, two and
   one - so the column count steps through those and no breakpoint ever leaves a
   part-filled row. */
@media (min-width: 1200px) {
    .jov-product-shelf .jov-product-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .jov-product-shelf .jov-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .jov-product-shelf .jov-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .jov-product-shelf .jov-product-grid {
        grid-template-columns: 1fr;
    }
}

/* The image should not be able to take two thirds of the card's height. */
.jov-product-shelf .tpproduct__thumb {
    max-height: 260px;
}

/* A permanently solid button on every card turned each row into a line of
   orange slabs. It reads as a button either way; filling only on hover keeps
   the emphasis for the card the shopper is actually on. */
.jov-product-shelf .tpproduct__cart a {
    background: rgba(241, 123, 54, .12);
    box-shadow: none;
    color: var(--jov-orange-dark);
}

.jov-product-shelf .tpproduct__cart a i {
    color: var(--jov-orange-dark);
}

.jov-product-shelf .tpproduct:hover .tpproduct__cart a,
.jov-product-shelf .tpproduct:focus-within .tpproduct__cart a,
.jov-product-shelf .tpproduct__cart a:hover,
.jov-product-shelf .tpproduct__cart a:focus {
    background: var(--jov-orange);
    color: #fff;
}

.jov-product-shelf .tpproduct:hover .tpproduct__cart a i,
.jov-product-shelf .tpproduct:focus-within .tpproduct__cart a i,
.jov-product-shelf .tpproduct__cart a:hover i {
    color: #fff;
}

/* --- gallery tiles ------------------------------------------------------ */
/* This grid mixes tall bottle shots with wide category banners, and letting each
   tile take its natural height left the row looking like a mistake: four tall
   tiles then two short ones on a line of their own. A shared frame with the image
   contained inside it keeps every tile the same size whatever shape it holds -
   nothing is cropped, the tile just stops resizing to fit. */
@media (min-width: 1200px) {
    .jov-gallery-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .jov-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .jov-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.jov-gallery-grid a {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.jov-gallery-grid img {
    aspect-ratio: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    padding: var(--jov-space-3);
    width: auto;
}

/* --- promotional flags in product names --------------------------------- */
/* Names imported from Shopify carry flags written as *asterisks* - *NEW FLAVOUR*,
   *PRICE REDUCED*, *SALE* and so on. They are labels, not part of the name, so
   they read as a label: a size down from the name, spaced, and in the accent
   colour. Deliberately not full size - the card already carries an orange price
   and often an orange discount badge, and a third shout would undo that. */
.jov-name-flag {
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--jov-orange);
}

/* Anywhere the surrounding text turns orange on hover, an orange flag would be
   swallowed by it, so the two swap and the flag stays legible either way. */
.tpproduct:hover .jov-name-flag,
.tpproduct:focus-within .jov-name-flag,
.jov-main-nav li:hover > a .jov-name-flag,
.jov-native-brand:hover .jov-name-flag,
.jov-category-card:hover .jov-name-flag,
.bb-product-filter-link:hover .jov-name-flag,
.categories-dropdown li:hover .jov-name-flag,
a:hover > .jov-name-flag {
    color: var(--jov-navy);
}

/* On the navy bands and in the header the accent is too dark to read, so the
   flag takes the soft tint instead. */
.jov-section--dark .jov-name-flag,
.jov-key-features .jov-name-flag,
.jov-trust-strip .jov-name-flag,
.jov-newsletter .jov-name-flag,
.tp-header-area .jov-name-flag,
.header-area .jov-name-flag,
.footer-area .jov-name-flag {
    color: var(--jov-soft);
}

/* =========================================================================
   Homepage on phones
   ========================================================================= */

@media (max-width: 767px) {
    /* --- trust strip: swipe, not a wall ---------------------------------
       Five claims stacked vertically put a screen and a half of small print
       between the banner and the first product. They scroll sideways instead,
       one and a bit visible at a time so it is obvious there is more, and the
       tile is slimmer: smaller icon, tighter copy, no fixed minimum height. */
    .jov-trust-strip__grid {
        display: flex !important;
        gap: 0;
        margin-inline: calc(var(--jov-space-4) * -1);
        overflow-x: auto;
        padding-inline: var(--jov-space-4);
        scroll-padding-inline: var(--jov-space-4);
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .jov-trust-strip__grid::-webkit-scrollbar {
        display: none;
    }

    /* One claim at a time, and slimmer again: the strip rotates on its own, so
       a peek of the next tile is no longer needed to hint that there is more. */
    .jov-trust-strip__item {
        border-bottom: 0;
        border-right: 0;
        flex: 0 0 100%;
        gap: var(--jov-space-3);
        min-height: 0;
        padding: var(--jov-space-3) var(--jov-space-4);
        scroll-snap-align: start;
    }

    .jov-trust-strip__item strong,
    .jov-trust-strip__item h3,
    .jov-trust-strip__item h4 {
        font-size: 13px;
        line-height: 1.2;
        margin-bottom: 0;
    }

    /* The supporting sentence is what doubled the height. The claim itself is
       the point at this size; the detail is on the policy pages.

       Targeted at the sentence only: the claim and its description sit inside a
       wrapper span, so hiding every span in the tile hid the text entirely. */
    .jov-trust-strip__item > span > span,
    .jov-trust-strip__item p {
        display: none;
    }

    .jov-trust-strip__item img,
    .jov-trust-strip__item > i {
        height: 22px;
        width: 22px;
        font-size: 15px;
        flex: 0 0 22px;
    }

    .jov-section.jov-trust-strip,
    .jov-trust-strip {
        padding-block: var(--jov-space-1);
    }

    .jov-trust-strip__item {
        align-items: center;
        min-height: 0;
        padding: 0 var(--jov-space-4);
    }

    /* One line per claim. A two-line claim would set the height of every tile in
       the strip, which is what kept the band deep. */
    .jov-trust-strip__item > span {
        min-width: 0;
        overflow: hidden;
    }

    .jov-trust-strip__item strong,
    .jov-trust-strip__item h3,
    .jov-trust-strip__item h4 {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Dots, built in script because they only mean anything once the strip is
       a carousel - which depends on width, not on content. */
    .jov-trust-strip__dots {
        display: flex;
        gap: var(--jov-space-1);
        justify-content: center;
        padding-top: var(--jov-space-1);
    }

    .jov-trust-strip__dot {
        background: rgba(255, 255, 255, .3);
        border: 0;
        border-radius: var(--jov-radius-pill);
        height: 5px;
        padding: 0;
        transition: background-color .2s ease, width .2s ease;
        width: 5px;
    }

    .jov-trust-strip__dot.is-active {
        background: var(--jov-orange);
        width: 18px;
    }
}

/* The dots exist only where the strip scrolls. */
@media (min-width: 768px) {
    .jov-trust-strip__dots {
        display: none;
    }

    /* --- section headings ------------------------------------------------
       The shelf header is a flex row holding the heading and the tab list. Once
       it wraps on a narrow screen, space-between pushes the heading block over
       to the right while the tabs sit left, so the two look unrelated. Stack
       them and align both to the start. */
    .jov-product-shelf__header,
    .jov-deal__heading,
    .jov-category-products__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--jov-space-4);
        margin-bottom: var(--jov-space-5);
    }

    .jov-product-shelf__header > *,
    .jov-section-heading {
        text-align: start;
        width: 100%;
    }
}

/* --- two products per row on phones --------------------------------------
   Ten products over five rows of two, rather than one column and ten rows of
   scrolling. The card carries less at this width, so the title clamps tighter
   and the controls shrink to suit. */
@media (max-width: 479px) {
    .jov-product-shelf .jov-product-grid,
    .jov-product-grid,
    .bb-product-items-wrapper .row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tpproduct .tpproduct__title {
        font-size: 13px;
        min-height: 2.6em;
    }

    .tpproduct .tpproduct__cart a {
        font-size: 11px;
        gap: var(--jov-space-1);
        height: 36px;
        padding: 0 var(--jov-space-2);
    }

    .tpproduct .tpproduct__priceinfo-list span {
        font-size: 15px;
    }
}

/* --- gallery: centre a lone final tile -----------------------------------
   Five tiles in a two-column grid leaves the last one alone on its row, hard
   against the left edge and reading as a mistake. Span it across both columns
   and centre it at its own width. */
@media (max-width: 991px) {
    .jov-gallery-grid > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: calc(50% - var(--jov-space-3));
        width: 100%;
    }
}

/* --- brand and gallery tiles stay two-up on phones -----------------------
   These collapsed to a single column below 768px, which turned four brands into
   four full-width blocks and a lot of scrolling for very little information. */
@media (max-width: 767px) {
    .jov-native-brand-grid,
    .jov-gallery-grid,
    .jov-collection-grid,
    .jov-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* --- footer on phones ----------------------------------------------------
   With the columns stacked the logo sat alone against the left edge above a
   full-width paragraph, so it read as detached from the block it belongs to. */
@media (max-width: 767px) {
    .footer-area .footer-logo,
    .footer-area .footer-widget.footer-col-1 {
        text-align: center;
    }

    .footer-area .footer-logo .jov-site-logo,
    .footer-area .footer-logo img {
        margin-inline: auto;
    }
}

/* --- search inside the mobile menu --------------------------------------- */
.jov-mobile-search {
    margin-top: var(--jov-space-5);
    position: relative;
}

.jov-mobile-search .input-search-product {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--jov-radius-md);
    color: #fff;
    height: 46px;
    padding-inline: var(--jov-space-4) 46px;
    width: 100%;
}

.jov-mobile-search .input-search-product::placeholder {
    color: rgba(255, 255, 255, .6);
}

.jov-mobile-search .input-search-product:focus {
    background: rgba(255, 255, 255, .14);
    border-color: var(--jov-orange);
    outline: none;
}

.jov-mobile-search button[type="submit"] {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .8);
    height: 46px;
    inset-block-start: 0;
    inset-inline-end: 0;
    position: absolute;
    width: 46px;
}

/* The results panel is positioned against the form, and the menu panel scrolls,
   so it has to stay inside it rather than escaping over the page. */
.jov-mobile-search .panel--search-result {
    max-height: 50vh;
    overflow-y: auto;
    z-index: var(--jov-z-drawer);
}

/* --- delivery bar -------------------------------------------------------- */
/* Sits above the header on the source, black on white text. */
.jov-delivery-bar {
    background: #000;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: var(--jov-space-2) 0;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 575px) {
    .jov-delivery-bar {
        font-size: 11px;
        letter-spacing: .02em;
        padding: var(--jov-space-1) 0;
    }
}

/* --- main navigation ----------------------------------------------------- */
/* With the contact button gone the bar has nothing pulling it right, so the menu
   centres rather than sitting hard against the left edge. */
.jov-header-nav__inner {
    justify-content: center;
}

.jov-header-nav__inner .jov-main-nav {
    flex: 0 1 auto;
}

/* --- breadcrumb band ----------------------------------------------------- */
/* Was 60px of padding top and bottom around a 32px heading, so a strip of
   navigation took more vertical space than most page headings. */
.jov-breadcrumb {
    padding-bottom: var(--jov-space-5);
    padding-top: var(--jov-space-5);
}

.jov-breadcrumb .tp-breadcrumb__title {
    font-size: 26px;
}

@media (max-width: 767px) {
    .jov-breadcrumb {
        padding-bottom: var(--jov-space-4);
        padding-top: var(--jov-space-4);
    }

    .jov-breadcrumb .tp-breadcrumb__title {
        font-size: 21px;
    }
}

/* --- saving badge -------------------------------------------------------- */
/* Black on white, as the source draws it, rather than the theme's green. */
.jov-save-badge {
    background-color: #000 !important;
    color: #fff;
}

/* --- header account link -------------------------------------------------- */
/* The account action is named rather than left as a bare icon, so it is a pill
   the height of the round icon buttons beside it, wide enough for its label.
   Below 1200px the label drops and it becomes one of the circles. */
.jov-header-main .header-meta__social > .jov-header-account {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 18px;
    gap: 9px;
    height: 42px;
    justify-content: center;
    margin: 0;
    padding: 0 18px 0 15px;
    white-space: nowrap;
}

.jov-header-main .header-meta__social > .jov-header-account span {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
}

.jov-header-main .header-meta__social > .jov-header-account:hover {
    background: var(--jov-orange);
    border-color: var(--jov-orange);
    color: #fff;
}

@media (max-width: 1399.98px) {
    .jov-header-main .header-meta__social > .jov-header-account span {
        display: none;
    }

    .jov-header-main .header-meta__social > .jov-header-account {
        padding: 0;
        width: 42px;
    }
}

/* --- links inside body copy ---------------------------------------------- */
/* Links written into editorial copy and product descriptions inherited the
   surrounding text colour, so they read as plain prose and nobody followed
   them. The source marks them orange and underlined, which is what these
   internal links are there to do. */
.jov-richtext a,
.tpproduct-details__description a,
.jov-editorial__content .jov-richtext a,
.page-content a:not(.jov-button):not(.btn) {
    color: var(--jov-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.jov-richtext a:hover,
.tpproduct-details__description a:hover,
.page-content a:not(.jov-button):not(.btn):hover {
    color: var(--jov-orange-dark);
}

/* On the tinted and dark sections orange on the background is too close to
   read, so the link takes the light ink and keeps only the underline. */
.jov-section--dark .jov-richtext a,
.jov-section--dark .jov-richtext a:hover {
    color: var(--jov-soft-grey, #d7dbe3);
}

/* --- homepage copy blocks ------------------------------------------------ */
/* These carry the store's long-form SEO copy. Centred, they ran the full width
   of a 980px column with no measure and no rhythm, so they read as a wall.
   The heading stays centred as the section marker; the prose goes
   left-aligned on a comfortable measure, which is what makes it readable. */
.jov-intro .jov-richtext {
    margin-left: auto;
    margin-right: auto;
    max-width: 68ch;
    text-align: left;
}

.jov-intro .jov-richtext p {
    line-height: 1.75;
    margin-bottom: 1.15em;
}

.jov-intro .jov-richtext > :last-child {
    margin-bottom: 0;
}

/* A short accent rule under the heading, matching the one the section headings
   elsewhere on the page already use, so these blocks belong to the same page. */
.jov-intro h2::after,
.jov-intro--panel h3::after {
    background: var(--jov-orange);
    content: "";
    display: block;
    height: 3px;
    margin: 14px auto 0;
    width: 46px;
}

.jov-intro h3 {
    font-size: clamp(20px, 2vw, 26px);
    margin-bottom: 18px;
}

/* The four range sections sit in an unbroken run. Framing each as its own
   panel gives the eye a boundary between them without adding any chrome. */
.jov-intro--panel .container {
    background: var(--jov-panel, #f7f8fa);
    border: 1px solid var(--jov-border);
    border-radius: var(--jov-radius-lg, 14px);
    padding: 38px 44px;
}

/* Tinted sections already have a background, so a panel the same colour would
   be invisible; it takes the page white instead. */
.jov-section--tint .jov-intro--panel .container,
.jov-intro--panel.jov-section--tint .container {
    background: #fff;
}

@media (max-width: 767.98px) {
    .jov-intro--panel .container {
        border-radius: var(--jov-radius-md, 10px);
        padding: 26px 20px;
    }

    .jov-intro .jov-richtext {
        max-width: 100%;
    }
}

/* --- featured category tiles --------------------------------------------- */
/* These tiles use the source's own artwork, which already carries its label
   and a "Shop Now" call to action inside the image. The overlaid caption
   repeated that a second time, and disagreed with it - "E-Liquid Bottles" over
   a banner reading "E-LIQUIDS". It is kept in the markup for screen readers
   and for the link's accessible name, and taken out of the picture. */
.jov-category-card strong {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.jov-category-card {
    border-radius: var(--jov-radius-md, 10px);
    display: block;
    overflow: hidden;
    position: relative;
    transition: transform .22s ease, box-shadow .22s ease;
}

.jov-category-card img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.jov-category-card:hover {
    box-shadow: 0 14px 30px rgba(24, 32, 51, .18);
    transform: translateY(-3px);
}

/* --- Shopify homepage alignment ----------------------------------------- */
/* Source: juicedoutvapes.co.uk Shogun homepage. Colour tokens and logo stay
   as they are; this only restyles spacing, type, and section chrome. */

.jov-home .jov-section {
    padding: 40px 0;
}

.jov-home .jov-section-heading {
    margin-bottom: 22px;
}

.jov-home .jov-section-heading h2,
.jov-home .jov-section-heading h3 {
    font-size: 25px;
    font-weight: 600;
}

.jov-trust-strip {
    background: #fff;
    border-bottom: 1px solid var(--jov-border);
    color: var(--jov-ink);
}

.jov-trust-strip__item {
    border-right: 1px solid var(--jov-border);
    min-height: 92px;
    padding: 18px 24px;
}

.jov-trust-strip__item strong {
    color: var(--jov-ink);
    font-size: 16px;
}

.jov-trust-strip__item span span {
    color: var(--jov-muted);
}

.jov-trust-strip__item i {
    color: #2bb673;
    font-size: 32px;
}

.jov-intro h1,
.jov-intro__kicker {
    color: var(--jov-ink);
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 18px;
    text-align: center;
}

.jov-intro h2 {
    color: var(--jov-ink);
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 22px;
}

.jov-intro h2::after {
    display: none;
}

.jov-intro--panel {
    background: var(--jov-navy);
    color: #fff;
    padding: 8px 0;
}

.jov-intro--panel .container {
    background: transparent;
    border: 0;
    border-radius: 0;
    max-width: 1140px;
    padding: 36px 24px;
    text-align: left;
}

.jov-intro--panel h3 {
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: left;
}

.jov-intro--panel h3::after {
    display: none;
}

.jov-intro--panel .jov-richtext,
.jov-intro--panel .jov-richtext p {
    color: #fff;
    max-width: none;
    text-align: left;
}

.jov-intro--panel .jov-richtext a {
    color: #fff;
    text-decoration: underline;
}

.jov-intro .jov-richtext,
.jov-intro .jov-richtext p {
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
    text-align: center;
}

.jov-intro .jov-richtext a {
    color: var(--jov-orange);
    text-decoration: underline;
}

.jov-range-block .container,
.jov-intro--panel.jov-editorial .container {
    max-width: 1320px;
    padding-left: 24px;
    padding-right: 24px;
}

.jov-range-block .jov-editorial__grid {
    align-items: center;
    gap: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.jov-range-block .jov-editorial__grid:not(.jov-editorial__grid--image-left) .jov-editorial__content {
    order: 1;
}

.jov-range-block .jov-editorial__grid:not(.jov-editorial__grid--image-left) .jov-editorial__image {
    order: 2;
}

.jov-range-block .jov-editorial__image img {
    border-radius: 0;
    box-shadow: none;
    display: block;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    width: 100%;
}

.jov-intro--panel.jov-editorial .jov-editorial__content h3,
.jov-range-block h3 {
    color: #fff;
}

.jov-key-features-block .jov-editorial__grid,
.jov-key-features-block .jov-editorial__grid--split {
    align-items: center;
    gap: 28px 36px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
}

.jov-key-features-block .jov-editorial__content {
    text-align: left;
}

.jov-key-features-block .jov-editorial__image img {
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.jov-key-features-block h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 18px;
    text-align: left;
}

.jov-key-features-block .jov-richtext ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jov-key-features-block .jov-richtext li {
    margin-bottom: 8px;
    padding-left: 1.1em;
    position: relative;
}

.jov-key-features-block .jov-richtext li::before {
    content: "●";
    left: 0;
    position: absolute;
}

.jov-home .jov-native-brand {
    min-height: 0;
    overflow: hidden;
    padding: 0 0 16px;
}

.jov-home .jov-native-brand img {
    height: 320px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.jov-home .jov-product-shelf__header {
    justify-content: center;
    margin-bottom: 24px;
    text-align: center;
}

.jov-home .jov-product-shelf:has(.jov-product-shelf__tabs) .jov-product-shelf__header {
    justify-content: space-between;
    text-align: left;
}

.jov-home .jov-category-grid {
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jov-home .jov-category-card {
    aspect-ratio: 720 / 340;
}

.jov-home .jov-hero .carousel-item img {
    max-height: 700px;
}

@media (max-width: 991.98px) {
    .jov-key-features-block .jov-editorial__grid,
    .jov-key-features-block .jov-editorial__grid--split,
    .jov-range-block .jov-editorial__grid {
        grid-template-columns: 1fr;
    }

    .jov-home .jov-category-grid {
        grid-template-columns: 1fr;
    }

    .jov-home .jov-native-brand img {
        height: 220px;
    }

    .jov-intro h1,
    .jov-intro__kicker {
        font-size: 28px;
    }
}