/*Global css styles for all schemes using the S3 theme*/
:root
{
    --header-height                   : 50px;
    --navbar-height                   : 60px;
    --radius-round                    : 50%;

    --scheme-font-family-p            : sans-serif;
    --scheme-font-family-s            : sans-serif;

    --scheme-colour-f                 : #808080; /*UI*/
    --scheme-colour-d                 : #606060;
    --scheme-colour-m                 : #808080;
    --scheme-colour-l                 : #B0B0B0;
    --scheme-colour-h                 : #808080;

    /* These should contrast their counterparts above */
    --scheme-colour-f-foreground      : #FFFFFF; /*UI*/
    --scheme-colour-d-foreground      : #FFFFFF;
    --scheme-colour-m-foreground      : #FFFFFF;
    --scheme-colour-l-foreground      : #3A3A3A;
    --scheme-colour-h-foreground      : #3A3A3A;

    /*Go here to set these based on hex colours above https://isotropic.co/tool/hex-color-to-css-filter */
    --scheme-colour-filt-f            : invert(53%) sepia(0%) saturate(1258%) hue-rotate(201deg) brightness(95%) contrast(91%);
    --scheme-colour-filt-d            : invert(53%) sepia(0%) saturate(1258%) hue-rotate(201deg) brightness(95%) contrast(91%);
    --scheme-colour-filt-m            : invert(53%) sepia(0%) saturate(1258%) hue-rotate(201deg) brightness(95%) contrast(91%);
    --scheme-colour-filt-l            : invert(53%) sepia(0%) saturate(1258%) hue-rotate(201deg) brightness(95%) contrast(91%);
    --scheme-colour-filt-h            : invert(53%) sepia(0%) saturate(1258%) hue-rotate(201deg) brightness(95%) contrast(91%);

    --scheme-colour-filt-f-foreground : invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    --scheme-colour-filt-d-foreground : invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    --scheme-colour-filt-m-foreground : invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    --scheme-colour-filt-l-foreground : invert(20%) sepia(0%) saturate(0%) hue-rotate(121deg) brightness(92%) contrast(86%);
    --scheme-colour-filt-h-foreground : invert(20%) sepia(0%) saturate(0%) hue-rotate(121deg) brightness(92%) contrast(86%);

    --scheme-background-colour        : #F6F6F6;
    --scheme-foreground-colour        : #3A3A3A;

    --link-background-colour          : #FFFFFF;
    --link-foreground-colour          : #3A3A3A;
    --link-foreground-colour-hover    : #000000;

    --body-foreground                 : rgb(30, 30, 30);
    --footer-foreground               : #FFFFFF;
    --ui-colour                       : var(--scheme-colour-f);

    --scheme-radius-sm                : 4px;
    --scheme-radius-md                : 6px;
    --scheme-radius-lg                : 10px;

    --transition-short                : 300ms;
    --transition-long                 : 600ms;
    --transition-xlong                : 1000ms;

    --adv_W: 320px !important;   
}


[v-cloak]
{
    display : none;
}


#splash
{
    width            : 300px;
    max-width        : 80vw;
    position         : fixed;
    top              : 50%;
    left             : 50%;
    transform        : translate(-50%, -50%);
    transition       : scale 0.3s ease-in-out;
    background-color : #FFFFFF;
    padding          : 1rem;
    aspect-ratio     : 1;
    object-fit       : contain;
    transform-origin:0 0;
    border-radius:var(--scheme-radius-lg);
}


#vue-app[v-cloak] + #splash
{
    scale : 1;
}


#vue-app:not([v-cloak]) + #splash
{
    scale : 0;
}


.non-auth, .auth
{
    display : none;
}


html.ph-trj-auth .auth
{
    display : block !important;
}


html.ph-trj-auth li.auth
{
    display : list-item !important;
}


html.ph-trj-auth span.auth
{
    display : inline !important;
}


html.ph-trj-auth .pre-auth
{
    display : none;
}


html:not(.ph-signedin) .non-auth
{
    display : initial;
}


body
{
    color : var(--scheme-foreground-colour);
}


@media (min-width : 480px)
{
    :root
    {
        --header-height : 65px;
    }
}


@media (min-width : 768px)
{
    :root
    {
        --header-height : 90px;
    }
}


@media (min-width : 1200px)
{
    :root
    {
        --header-height : 90px;
        --navbar-height : 30px;
    }
}


main
{
    position         : relative;
    background-color : var(--scheme-background-colour);
}


article
{
    min-height     : 70vh;
    translate      : 0 0;
    padding : 0.1px 0;
}


.greeting
{
    max-width       : 100%;
    margin-top      : -35px;
    justify-content : normal !important;
    padding-bottom  : 10px !important;
}


.greeting .ph-callout
{
    min-width : 0 !important;
}


.greeting h4
{
    margin : 30px 0 0 0;
}


.greeting h4 a, .greeting h4 a:hover
{
    color : #FFF;
}


.lens
{
    background-color : rgba(0, 0, 0, 0.175);
    backdrop-filter  : blur(5px);
}


.object-fit-cover
{
    object-fit : cover !important;
}


/**	DEMO Scheme site
*********************************************************/
body.demo_scheme:before
{
    position       : absolute;
    inset          : 0;
    display        : block;
    content        : '';
    z-index        : 10001;
    pointer-events : none;
    box-shadow     : inset 0 0 0 3px rgba(248, 102, 0, 0.4);
}


body.demo_scheme:after
{
    position       : absolute;
    right          : 3px;
    top            : 2.5px;
    background     : rgba(248, 102, 0, 0.4);
    padding        : 2px 7px 5px 10px;
    border-radius  : 0 0 0 5px;
    font-size      : 12px;
    color          : #FFFFFF;
    display        : block;
    content        : 'DEMO Scheme';
    z-index        : 10001;
    pointer-events : none;
}


/**	PAGE TRANSITIONS
*********************************************************/
.route-enter-from,
.route-leave-to
{
    opacity   : 0;
    transform : translateY(10px);
}


.route-enter-to,
.route-leave-from
{
    opacity   : 1;
    transform : translateY(0);
}


.route-enter-active,
.route-leave-active
{
    pointer-events : none;
    transition     : all 0.3s ease;
}


.route-enter-active
{
    transition-delay : 0.3s;
}


/*
.route-enter-active
{
transition-delay : 150ms;
}

/*


.route-enter-active, .route-leave-active,
.route-rev-enter-active, .route-rev-leave-active
{
transition : all var(--transition-short) ease-in-out;
}

.route-enter-from, .route-leave-to,
.route-rev-enter-from, .route-rev-leave-to
{
opacity: 0;
}

.route-enter-from
{
translate: 50vw 0;
}

.route-leave-to
{
translate: -50vw 0;

}

.route-rev-enter-from
{
translate: -50vw 0;
}

.route-rev-leave-to
{
translate: 50vw 0;
}

@media all and (min-width:768px)
{
.route-enter-from
{
translate: 0 5vh;
}

.route-leave-to
{
translate: 0 5vh;
}

.route-rev-enter-from
{
translate: 0 5vh;
}

.route-rev-leave-to
{
translate: 0 5vh;
}
}
*/

/*
.route-enter-from,
.route-leave-to
{
opacity        : 0;
pointer-events : none;
translate      : 0 10px;
}


.route-enter-active,
.route-leave-active
{
pointer-events : none;
translate      : 0 0;
}


.route-enter-active
{
__transition-delay : 150ms;
}
*/


dialog
{
    border-radius    : var(--scheme-radius-sm);
    border           : none;
    overflow         : hidden;
    color            : #FFFFFF;
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
    box-shadow       : 0 10px 20px rgba(0, 0, 0, 0.1);
}


dialog:-internal-dialog-in-top-layer::backdrop
{
    background-color : rgba(255, 255, 255, 0.5)
}


dialog h4
{
    margin-bottom  : 1rem;
    border-bottom  : 1px solid;
    padding-bottom : 0.5rem;
}


dialog ol
{
    font-size    : 0.8rem;
    line-height  : 1.5rem;
    padding-left : 1rem;
}


dialog#browser_push_instructions img
{
    width         : 70%;
    border-radius : var(--scheme-radius-sm);
}


body, input, textarea, select
{
    font-family : var(--scheme-font-family-s), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size   : 16px;
    overflow-x  : hidden;
}


h1, h2, h3, h4, h5, h6, nav, button, .button, .cta-button
{
    font-family : var(--scheme-font-family-p), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}


#cookiescript_badge
{
    display : none !important;
}


#cookiescript_injected
{
    background-color : var(--scheme-colour-d) !important;
    color            : var(--scheme-colour-d-foreground) !important;
    border-radius    : var(--scheme-radius-sm);
}


#cookiescript_injected, #cookiescript_badgetext
{
    font-family : var(--scheme-font-family-p), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}


h3, .h3
{
    font-size : calc(1.2rem + 0.6vw);
}


/**	APP CONTAINER
Fixing this to the screen size provides smoother
transitions when navigating between pages/routes.
*********************************************************/
#vue-app
{
    position   : fixed;
    top        : 0;
    left       : 0;
    right      : 0;
    bottom     : 0;
    overflow-x : hidden;
    overflow-y : auto;
}


/**
*********************************************************/
.pin-code
{
    padding         : 0;
    margin          : 0 auto;
    display         : flex;
    justify-content : center;

}


.pin-code input
{
    border           : none;
    text-align       : center;
    width            : 48px;
    height           : 48px;
    font-size        : 36px;
    background-color : #F3F3F3;
    margin-right     : 5px;
}


.pin-code input:focus
{
    border  : 1px solid #573D8B;
    outline : none;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
{
    -webkit-appearance : none;
    margin             : 0;
}


/** DOWNLOAD PWA BUTTON & section
*********************************************************/
/*.pwa-promo-item
{
display : none;
}


.show-pwa-promo .pwa-promo-item
{
display : block;
}


.show-pwa-promo .pwa-promo-downloaded
{
display : none;
}


.install_pwa_button
{
display : none
}*/


/*
@media (display-mode : browser)
{
.install_pwa_button
{
display : block
}
}
*/


.promo-panel{
    background-color:#FFFFFF;border-radius:var(--scheme-radius-md);}

.promo-panel img:not(.ion-icon){
    width:100%;
    max-width:50vw;   border-radius:var(--scheme-radius-sm);margin-bottom:1rem;
}

html header
{
    display : none;
}


hr:not([size])
{
    margin           : 0;
    border           : 0;
    height           : 25px;
    background-color : transparent;
}


/* @media (pointer : fine) */
@media screen and (min-width : 1200px)
{
    #cookiescript_badge
    {
        display : flex !important;
    }

    html.scroll-down .nav-outer
    {
        transform : translateY(-100%);
    }

    hr:not([size])
    {
        height : 30px;
    }


}


input, select, textarea
{
    background            : #FFFFFF;
    border                : 0;
    -webkit-border-radius : 0;
    font-size             : 16px;
    margin                : 0;
    min-height            : 26px;
    padding               : 4px;
    vertical-align        : top;
}


html .nav-outer .scrollup-header
{
    background-color : #FFFFFF;
}


html .nav-outer .scrollup-header .scheme-logo
{
    /*width    : calc(var(--header-height) - 1rem);*/
    height    : calc(var(--header-height) - 0.5rem);
    overflow  : hidden;
    max-width : calc(100% - 160px);
}


html .nav-outer .scrollup-header .scheme-logo img
{
    flex       : 1;
    max-width  : 100%;
    max-height : 100%;
    width      : auto;
    display    : block;
}


@media all and (min-width : 768px)
{

    html .nav-outer .scrollup-header .scheme-logo
    {
        height : calc(var(--header-height) - 1rem);
    }


    html .nav-outer .scrollup-header .scheme-logo img
    {
        height : calc(100% - 10px);
    }
}


/*
html.scroll-down .nav-outer .scrollup-header .scheme-logo,
html.scroll-up .nav-outer .scrollup-header .scheme-logo {
height: 40px;
}
*/
.nav-tool .ion-icon
{
    width : 64px;
}


ion-icon
{
    pointer-events : none;
}


img
{
    max-width : 100%;
}


a
{
    text-decoration : none;
    color           : var(--link-foreground-colour);
}


a:hover
{
    text-decoration : underline;
    color           : var(--link-foreground-colour-hover);
}


main
{
    margin-bottom : var(--navbar-height);
}


@media all and (min-width : 1200px)
{
    main
    {
        margin-bottom : 0;
    }
}


article:has(.footer-svg)
{
    padding-bottom : 160px;
}


main p > a,
.content p > a,
.content li > a
{
    color : var(--scheme-colour-f);
}


.button,
.cta-button
{
    background    : var(--scheme-colour-f);
    border-radius : 0.25rem;
    cursor        : pointer;
    color         : var(--scheme-colour-f-foreground) !important;
    text-align    : center;
    font-size     : 125%;
}


.button .ion-icon
{
    width          : 1.2em;
    filter         : var(--scheme-colour-filt-f-foreground);
    margin-left    : 5px;
    vertical-align : -4px;
}


.stripe .button, .stripe .cta-button,
.stripe .button:hover, .stripe .cta-button:hover
{
    background : #FFFFFF;
    color      : #333333 !important;
}


.button:hover, .cta-button:hover
{
    color : #FFFFFF;
}


.cta-group a
{
    color : #FFFFFF;
}


.button
{
    padding    : 0.6em 1.2em;
    display    : inline-block;
    transition : filter var(--transition-short) ease-in-out;
}


.button:hover
{
    padding    : 0.6em 1.2em;
    display    : inline-block;
    transition : filter var(--transition-short) ease-in-out;
}


article .button
{
    box-shadow : 0 0 0 0 rgba(0, 0, 0, 0.25);
    transition : filter var(--transition-short) ease-in-out, box-shadow var(--transition-short) ease-in-out;
}


article .button:hover
{
    box-shadow : 0 0 0 4px rgba(0, 0, 0, 0.25);
    transition : filter var(--transition-short) ease-in-out, box-shadow var(--transition-short) ease-in-out;
}


.button-lite
{
    border        : 1px solid var(--scheme-colour-f);
    color         : var(--scheme-colour-f);
    padding       : 0.375rem 0.75rem;
    display       : inline-block;
    border-radius : 0.25rem;
}


p > .button-lite,
li > .button-lite
{
    padding : 0.1rem 0.25rem;
}


.over .button-lite
{
    border : 1px solid #FFFFFF;
    color  : #FFFFFF;
}


.cta-button
{
    max-width : 294px;
    padding   : 8px;
    width     : 100%;
}


.button:hover, .cta-button:not(.cta-button.ph-benefit-rate):hover
{
    filter          : brightness(1.1);
    text-decoration : none;
}


.offcanvas-start
{
    overflow-y : auto;
}


.offcanvas .btn-close.text-reset
{
    position : fixed;
    top      : 1rem;
    left     : 350px;
}


@media (max-width : 767px)
{
    .offcanvas-start
    {
        width : 100%;
    }

    .offcanvas .btn-close.text-reset
    {
        left  : auto;
        right : 2rem;
    }
}


ol.ph-feature-steps
{
    list-style    : none;
    padding       : 0;
    margin        : 20px 0;
    counter-reset : section;
}


ol.ph-feature-steps > li
{
    margin       : 16px 0 10px 0 !important;

    padding-left : 2.75em;
    position     : relative;
}


ol.ph-feature-steps > li:before
{
    counter-increment : section;
    content           : counter(section);
    position          : absolute;
    border-radius     : var(--radius-round);
    background        : rgb(65, 65, 65);
    color             : #FFFFFF;
    width             : 1.4em;
    height            : 1.4em;
    top               : -0.05em;
    left              : 0;
    z-index           : 2;
    text-align        : center;
    line-height       : 1.3em;
    font-size         : 1.5em;
    letter-spacing    : -0.1em;
    text-indent       : -0.1em;
}


ol.ph-feature-steps > li:after
{
    content    : ' ';
    position   : absolute;
    background : rgb(65, 65, 65);
    width      : 3px;
    top        : 1em;
    bottom     : -1em;
    left       : 1.0em;
    z-index    : 1;
}


ol.ph-feature-steps > li:last-child:after
{
    display : none;
}


ol.ph-feature-steps > li > ul
{
    margin-top : 0;
}


ol.ph-feature-steps > li > ul > li
{
    margin-top    : 0;
    margin-bottom : 0;
}


.ph-competition-panel
{
    width         : 600px;
    max-width     : 100%;
    margin        : 0 auto 100px;
    background    : #CCCCCC;
    background    : -moz-radial-gradient(center, ellipse cover, #CCCCCC 0%, #AAAAAA 100%);
    background    : -webkit-radial-gradient(center, ellipse cover, #CCCCCC 0%, #AAAAAA 100%);
    background    : radial-gradient(ellipse at center, #CCCCCC 0%, #AAAAAA 100%);
    filter        : progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#aaaaaa', GradientType=1);
    border-radius : 8px;
    box-shadow    : 0 0 0 5px #EEEEEE;
    overflow      : hidden;
}


.ph-competition-panel, .ph-competition-panel a
{
    color : #FFFFFF;
}


.ph-competition-image
{
    background : rgba(255, 255, 255, 0.25);
    box-shadow : 0 0 25px rgba(0, 0, 0, 0.33);
}


.ph-competition-image img
{
    display   : block;
    margin    : 0 auto;
    max-width : 100%;
}


.ph-competition-introduction, .ph-competition-entered, .ph-competition-panel form, .ph-competition-footer
{
    padding : 15px;
}


.ph-competition-footer
{
    background : rgba(0, 0, 0, 0.15);
}


.ph-competition-panel p:last-child, .ph-competition-footer p
{
    margin-bottom : 0;
}


.ph-competition-panel form
{
    padding-top : 0;
    background  : none;
}


.ph-competition-panel h3
{
    color      : #FFFFFF;
    margin-top : 0 !important;
}


.ph-competition-panel p
{
    line-height : normal !important;
}


.ph-competition-panel input:not([type='submit'])
{
    color : #333333;
}


.ph-competition-panel label + div
{
    padding : 5px;
}


#ph-competition-form-insertions-container
{
    text-align : center;
}


#ph-competition-form-insertions-container span
{
    display       : inline-block;
    width         : 70px;
    height        : 70px;
    margin        : 5px 15px;
    background    : rgba(245, 170, 0, 1);
    border-radius : 35px;
    padding-top   : 10px;
    font-size     : 21px;
    line-height   : 1;
    position      : relative;
    box-sizing    : border-box;
}


#ph-competition-form-insertions-container span input
{

}


#ph-competition-form-insertions-container span label
{
    color         : #FFFFFF;
    position      : absolute;
    top           : 0;
    right         : 0;
    bottom        : 0;
    left          : 0;
    cursor        : pointer;
    padding-top   : 38px;
    border-radius : 35px;
    margin        : 0;
}


#ph-competition-form-insertions-container span input:checked + label
{
    color       : #FFFFFF;
    position    : absolute;
    top         : 0;
    right       : 0;
    bottom      : 0;
    left        : 0;
    cursor      : pointer;
    padding-top : 38px;
    font-weight : bold;
    box-shadow  : 0 0 0 5px rgba(245, 170, 0, 0.5);
}


#ph-competition-form-phone, #ph-competition-form-gender, #ph-competition-form-address
{
    display : none;
}


.cntr-y
{
    display         : flex !important;
    justify-content : center;
    align-items     : center;
}


figure.ph-benefit-feature
{
    height    : 70px;
    margin    : 0;
    width     : 70px;
    padding   : 10px 0;
    text-wrap : balance;
}


.ph-product-table
{
    border-collapse : collapse;
    width           : 100%;
}


.ph-product-table figure
{
    margin     : 0 auto 12px;
    box-shadow : none;
}


.ph-product-table td
{
    vertical-align : top;
    padding        : 12px 10px 0 10px;
    border-right   : 1px solid #EEEEEE;
}


.ph-product-table.ph-product-table-4 td
{
    width : 25%;
}


@media all and (max-width : 600px)
{
    .ph-product-table.ph-product-table-4 td
    {
        width         : 100%;
        padding       : 12px 0 10px 0;
        display       : block;
        border-right  : none;
        border-bottom : 1px solid #EEEEEE;
    }

    .ph-product-table.ph-product-table-4 td:last-child
    {
        border-bottom : none;
    }
}


.ph-product-table td:last-child
{
    border-right : none;
}


.ph-product-table p
{
    margin      : 8px 0;
    line-height : normal;
    font-size   : 90%;
}


.introPriceTable
{
    border-bottom : 2px solid #888888;
    border-top    : 2px solid #888888;
    margin        : 20px 0 20px 20px;
}


.introPriceTable td, .introPriceTable th
{
    line-height : normal;
    padding     : 5px;
    text-align  : left;
}


.introPriceTable td[colspan]
{
    font-weight : bold;
}


.introPriceTable th
{
    border-bottom : 1px solid #CCCCCC;
    font-weight   : bold;
    padding       : 10px 5px;
}


.introPriceSection td
{
    border-top : 1px solid #CCCCCC;
}


#to-top
{
    display       : none;
    position      : fixed;
    bottom        : 70px;
    z-index       : 99;
    font-size     : 3.2em;
    border        : none;
    outline       : none;
    cursor        : pointer;
    width         : 1em;
    height        : 1em;
    border-radius : var(--radius-round);
    right         : 26px;
    rotate        : 180deg;
}


#to-top:hover
{
    filter : brightness(1.1);
}


#to-top img.ion-icon
{
    filter : var(--scheme-colour-filt-f-foreground);
}


/* Header
====================================== */
/*.header-right{
display:flex;
flex-wrap: wrap;
height: 22px;
margin-left:30px;
}
.header-right ion-icon{
margin-right:4px;
margin-top:2px;
}
.favourites ion-icon{
margin-top: 0;
font-size:16px;
}*/
html .nav-outer
{
    position : sticky;
    top      : 0;
    z-index  : 1020;
}


.page-header
{
    box-shadow : 0 1px 3px rgba(0, 0, 0, 0.2);
}


.page-header-container
{
    height : var(--header-height);
}


.account img.ion-icon
{
    width         : 22px;
    margin-bottom : 4px;
}


@media (min-width : 768px)
{
    .account img.ion-icon
    {
        width : 30px;
    }
}


.header-right
{
    margin-bottom : 0;
}


.header-right a
{
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    border-radius    : var(--scheme-radius-sm);
    background-color : transparent;
    box-shadow       : 0 0 0 0 var(--ui-colour);
    transition       : box-shadow 150ms ease-in-out 0ms, background-color 0ms linear 150ms;
}


.header-right a:hover
{
    text-decoration  : none;
    background-color : var(--ui-colour);
    color            : #FFFFFF;
    box-shadow       : 0 0 0 4px var(--ui-colour);
    transition       : box-shadow 150ms ease-in-out 0ms, background-color 0ms linear 0ms;
}


.header-right a:hover img.ion-icon
{
    filter : invert(1);
}


.header-right .app-navbar-label
{
    font-size : 0.7rem;
}


/* Navigation
====================================== */
.nav-container
{
    position : fixed;
    bottom   : 0;
    /*background : var(--scheme-colour-d);*/
    /* max-width : 100%;*/
}


.app-navbar-item.user-item
{
    display : none;
}


.navbottom .navbar-toggler:hover
{
    filter : brightness(1.1);
}


/* @media (min-width : 768px) */
/* Use pointer fine to maintain app feel on ipad landscape */
/* @media (pointer : fine) */
@media screen and (min-width : 1200px)
{
    html .nav-outer
    {
        transform  : translateY(0);
        transition : transform var(--transition-short) ease-in-out;
    }

    .page-header
    {
        box-shadow : none;
    }

    .header-right ion-icon
    {
        font-size : 1.5rem;
    }

    .header-right .app-navbar-label
    {
        font-size : 1rem;
    }

    .nav-container
    {
        position    : unset;
        bottom      : unset;
        background  : unset;
        /* max-width   : 1140px; */
        height      : var(--navbar-height);
        display     : flex;
        align-items : center;
    }
}


/* Touchscreen footer navigation */
.navbottom
{
    display          : flex;
    background-color : var(--scheme-colour-d);
    color            : var(--scheme-colour-d-foreground);
    width            : 100%;
    height           : var(--navbar-height);
    padding          : 0.5rem 0;
    z-index          : 1000;
}


/* @media (pointer : fine) */
@media screen and (min-width : 1200px)
{
    .navbottom
    {
        display : none;
    }
}


.iosappstore .navbottom
{
    height : calc(20 + var(--navbar-height))
}


.navbottom .navbar-item
{
    width : 20%;
}


.navbottom .navbottom-link,
.navbar-light .navbar-toggler
{
    display        : flex;
    flex-direction : column;
    align-items    : center;
    font-size      : 1.2rem;
    font-weight    : bold;
    color          : var(--scheme-colour-d-foreground);
    border-radius  : var(--scheme-radius-sm);
}


.navbottom .navbottom-link:hover
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
    text-decoration  : none;
}


.navbottom .navbottom-link:hover .ion-icon
{
    filter : var(--scheme-colour-filt-l-foreground);
}


.navbottom .navbottom-link .app-navbar-label
{
    font-size  : 0.8rem;
    margin-top : 3px;
}


/* Desktop navigation */
nav .nav-link
{
    padding-top     : 3px;
    padding-bottom  : 3px;
    padding-right   : 20px !important;
    height          : 30px;
    font-weight     : 600;
    color           : var(--scheme-colour-d-foreground);
    display         : flex;
    justify-content : center;
    align-items     : center;

}


nav .nav-link:hover,
nav .nav-link:focus
{
    text-decoration : none;
    color           : var(--scheme-colour-d-foreground);
}


nav ion-icon
{
    /*margin-right:4px;*/
    margin-top : 2px;
}


nav img.ion-icon
{
    width      : 20px;
    filter     : var(--scheme-colour-filt-d-foreground);
    transition : all 150ms ease-in-out;
}


.navbar-toggler
{
    padding : 0 0.25rem;
}


.navbar-toggler:focus
{
    box-shadow : unset;
}


.navbar
{
    flex : 1;
}


.navbar-light .navbar-nav .nav-link
{
    transition       : filter var(--transition-short) ease-in-out;
    background-color : var(--scheme-colour-d);
    color            : var(--scheme-colour-d-foreground);
}


.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus
{
    color  : #FFFFFF;
    filter : brightness(1.1);
}


.nav-container .dropdown-menu
{
    position         : absolute;
    display          : block;
    background-color : var(--scheme-colour-d);
    color            : var(--scheme-colour-d-foreground);
    margin-top       : 8px !important;
    border-width     : 0;
    border-radius    : var(--scheme-radius-sm);
    transform        : translate(0, 110%);
    transition       : all var(--transition-short) ease-in-out;
    visibility       : hidden;
    opacity          : 0;
    left             : 0;
    top              : unset;
    bottom           : var(--navbar-height);
    height           : calc(100dvh - var(--header-height) - var(--navbar-height));
    overflow         : auto;
}


.nav-container .dropdown-menu a
{
    border-radius    : var(--scheme-radius-sm);
    background-color : transparent;
    color            : var(--scheme-colour-m-foreground);
    text-decoration  : none;
    box-shadow       : 0 0 0 0 var(--scheme-colour-nav-hover, var(--scheme-colour-l));
    transition       : all 150ms ease-in-out;
    flex             : 1;
}


.nav-container .dropdown-menu .icon-list a
{
    overflow    : visible;
    display     : flex;
    align-items : start;
    gap         : 10px;
    font-size   : 16px;
    margin      : 0 0 12px 0;
}


.nav-container .dropdown-menu .icon-list a .description
{
    font-size  : 85%;
    margin-top : 5px;
    display    : block;
    opacity    : 0.6;
}


.nav-container .dropdown-menu .icon-list a img.ion-icon
{
    width     : 30px;
    translate : 0 -6px;
}


.nav-container .dropdown-menu a:hover
{
    /* color				: var(--scheme-colour-d); */
    background-color : var(--scheme-colour-nav-hover, var(--scheme-colour-l));
    color            : var(--scheme-colour-l-foreground);
    box-shadow       : 0 0 0 4px var(--scheme-colour-nav-hover, var(--scheme-colour-l));
    /*   transition       : box-shadow 150ms ease-in-out 0ms, background-color 0ms linear 0ms; */
}


.nav-container .dropdown-menu a img.ion-icon
{
    filter : var(--scheme-colour-filt-m-foreground);
}


.nav-container .dropdown-menu a:hover img.ion-icon
{
    filter : var(--scheme-colour-filt-l-foreground);
}


.nav-container .dropdown-menu.show
{
    visibility : visible;
    opacity    : 1;
    transform  : translate(0, 0);
}


/* @media (pointer : coarse) */
@media screen and (max-width : 1199px)
{
    .nav-container
    {
        --bs-gutter-x : 0;
    }

    .navbar
    {
        flex-wrap : wrap;
    }

    .navbar-expand .navbar-toggler
    {
        display : flex;
    }

    .nav-container .dropdown-menu
    {
        padding-top : 0 !important;
    }

    .navbar-nav
    {
        height         : calc(100dvh - var(--header-height) - var(--navbar-height));
        width          : 100%;
        padding        : 30px;
        flex-direction : column !important;
    }

    .navbar-subnav
    {
        margin  : 0;
        padding : calc(30px - var(--bs-gutter-x)) !important;
    }

    .iosappstore .navbar-nav
    {
        height : calc(100dvh - var(--header-height) - var(--navbar-height) - 10px);
    }

    .nav-item
    {
        padding : 0 !important;
    }

    .nav-item .nav-link
    {
        font-size       : 1rem;
        font-weight     : 600;
        line-height     : 1.5rem;
        color           : var(--bs-dark);
        padding-top     : 10px;
        padding-bottom  : 10px;
        padding-right   : 20px !important;
        padding-left    : 20px !important;
        margin-bottom   : 0;
        display         : flex;
        justify-content : left;
        align-items     : center;
        height          : auto !important;
        background      : var(--scheme-colour-d);
        color           : var(--scheme-colour-d-foreground);
        border-bottom   : 1px solid var(--scheme-colour-m);
    }

    .nav-item:first-child > .nav-link,
    .nav-item-splitter + .nav-item > .nav-link
    {
        padding-top   : 13px;
        border-radius : var(--scheme-radius-sm) var(--scheme-radius-sm) 0 0;
    }

    .nav-item:last-child > .nav-link,
    .nav-item:has(+ .nav-item-splitter) > .nav-link
    {
        padding-bottom : 13px;
        border-radius  : 0 0 var(--scheme-radius-sm) var(--scheme-radius-sm);
    }

    .nav-item-splitter
    {
        height : 30px;
    }

    .nav-item .nav-link span
    {
        margin-left : 1rem;
    }

    .nav-item .close-but
    {
        height          : calc(36px + 1rem);
        position        : sticky;
        margin-bottom   : 20px;
        background      : var(--scheme-colour-m);
        color           : var(--scheme-colour-m-foreground);
        width           : 100%;
        left            : 0;
        border-radius   : 0;
        z-index         : 1;
        top             : 0;
        opacity         : 0.9;
        display         : flex;
        justify-content : start;
        overflow        : hidden;
        border-style    : none;
        padding-left    : 5px !important;
    }

    .nav-item .close-but::before
    {
        content       : '';
        width         : 36px;
        height        : 36px;
        display       : block;
        /*background    : #FFFFFF;*/
        border-radius : var(--radius-round);
    }

    .nav-item .close-but img
    {
        position : absolute;
        width    : 36px;
        height   : 36px;
        /*filter   : var(--scheme-colour-filt-f);*/
    }
}


/* @media (pointer : fine) */
@media screen and (min-width : 1200px)
{
    nav .nav-link:not(.home) img,
    nav .nav-link.home span
    {
        display : none;
    }

    .navbar-toggler
    {
        padding : 0 0.75rem;
    }

    .nav-container .dropdown-menu
    {
        bottom     : unset;
        top        : inherit;
        transform  : translate(0, -10px);
        box-shadow : rgba(99, 99, 99, 0.2) 0 2px 8px 0;
        height     : auto;
    }

    .navbar-collapse
    {
        overflow : visible;
    }

    .nav-item .close-but
    {
        display : none;
    }
}


.nav-outer
{
    background-color : var(--scheme-colour-d) !important;
    color            : var(--scheme-colour-d-foreground);
}


.navbar-expand-lg .navbar-nav .nav-link.home
{
    padding-left : 0;
}


.dropdown-menu ul
{
    list-style   : none !important;
    padding-left : 0;
}


.nav-tool
{
    text-align      : center;
    font-size       : 61px;
    color           : var(--scheme-colour-f);
    margin          : 20px 0;
    height          : 70px;
    display         : flex;
    align-items     : center;
    justify-content : center;
}


/* @media (max-width : 768px) */
@media (pointer : coarse)
{
    .nav-newin-featured
    {
        background    : var(--scheme-colour-d);
        color         : var(--scheme-colour-d-foreground);
        border-radius : var(--scheme-radius-sm);
    }

    .nav-newin-featured > div:last-child
    {
        margin-bottom : 0 !important;
    }
}


.dropdown-menu ul li a,
.dropdown-menu article
{
    font-family        : var(--scheme-font-family-s), sans-serif;
    font-size          : 13px;
    line-height        : 16px;
    /*margin-bottom      : 15px;*/
    overflow           : hidden;
    display            : -webkit-box;
    -webkit-box-orient : vertical;
    -webkit-line-clamp : 7;
}


.dropdown-menu ul li a
{
    margin : 3px 0;
}


.dropdown-menu ul li a .callout,
.dropdown-menu article .callout,
.new-offers-col .callout
{
    opacity : 0.6;
}


.nav-container .dropdown-menu .hub-link
{
    display     : flex;
    align-items : center;
    flex        : 0;
}


.nav-container .dropdown-menu .hub-link::after
{
    content          : '';
    background-image : url(https://cdn.memberrewards.uk/ionicons/chevron-forward-outline.svg);
    background-size  : 16px;
    filter           : invert(1);
    width            : 16px;
    height           : 16px;
    display          : inline-block;
    margin-left      : 5px;
}


.nav-container .dropdown-menu .hub-link:hover::after
{
    /*filter : var(--scheme-colour-filt-f);*/
}


.dropdown-menu h6.title
{
    border-bottom  : 1px solid #FFFFFF;
    font-family    : var(--scheme-font-family-p), sans-serif;
    font-weight    : 600;
    font-size      : 18px;
    padding-bottom : 2px;
}


.dropdown-menu a h6.caption
{
    border-bottom-width : 0;
    margin-left         : 0;
    font-size           : 14px;
    margin-bottom       : 0 !important;
}


.dropdown-menu.unlabelled a h6.caption
{
    display : none;
}


.dropdown-toggle::after
{
    display : none !important;
}


#navbarSearchWrapper .ui-autocomplete
{
    position : relative;
}


.color-pointer
{
    color        : var(--scheme-colour-m) !important;
    position     : absolute;
    top          : 27px;
    display      : none;
    width        : 0;
    height       : 0;
    border-left  : 10px solid transparent;
    border-right : 10px solid transparent;
    border-top   : 9px solid var(--scheme-colour-d);
}


a.nav-link.show i.color-pointer
{
    display : block;
}


.brands a
{
    display        : flex;
    width          : 100px;
    margin         : 5px auto;
    flex-direction : column;
    align-items    : center;
}


@media (min-width : 991px)
{
    .brands a
    {
        margin : 5px;
    }
}


.brands .col
{
    flex : 1 0 20%;
}


.dropdown-menu .brands .img_link .image_container
{
    border-radius    : var(--radius-round);
    height           : 110px;
    width            : 110px;
    background-color : #FFFFFF;
    overflow         : hidden;
    flex             : none;
}


.dropdown-menu .brands .img_link .image_container img
{
    max-height : 80px;
    max-width  : 80px;
}


.new-offers-col a img
{
    max-height : 100px;
}


.dropdown-menu .img_link
{
    display        : flex;
    flex-direction : column;
    /*align-items     : center;
    justify-content : space-between;*/
    text-align     : center;
    gap            : 5px;
    margin         : 0 auto;
    /*height          : 100%;*/
}


.dropdown-menu .img_link .image_container
{
    display         : flex;
    flex            : 1 1 0;
    align-items     : center;
    justify-content : center;
    width           : 100%;
}


.article-img
{
    height     : 100px;
    width      : 100px;
    object-fit : cover;
}


.img-sq-wrap
{
    width       : 100%;
    padding-top : 100%;
    position    : relative;
}


.img-sq-wrap img
{
    min-width  : 100%;
    min-height : 100%;
    width      : 1px;
    height     : 1px;
    position   : absolute;
    top        : 0;
}


.navbarCategories ul
{
    display   : flex;
    flex-wrap : wrap;
    gap       : 10px;
}


.navbarCategories ul li
{
    width : calc((100% - 10px - 10px) / 2);
}


@media all and (min-width : 900px)
{
    .navbarCategories ul li
    {
        width : calc((100% - 10px - 10px) / 3);
    }
}


/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none)
{
    .navbottom
    {
        padding-bottom : 1.2rem;
    }
}


/* mobile view */
@media (max-width : 991px)
{
    .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse
    {
        overflow-y : auto;
        max-height : 90vh;
        margin-top : 10px;
    }

    i.color-pointer
    {
        display : none !important;
    }

    .ph-widget-wrapper-signup
    {
        max-width : calc(100% - 20px) !important;
        right     : 10px !important;
        bottom    : 70px !important;
    }
}


@media (max-width : 576px)
{
    .ph-widget.ph-widget-signup fieldset
    {
        display        : flex;
        flex-direction : column;
    }

    .ph-widget #ph-signup-email
    {
        order : 1;
    }

    .ph-widget button
    {
        position : unset !important;
        order    : 2;
    }

    .ph-widget fieldset > div
    {
        order : 3;
    }
}


.back-but
{
    border-radius : var(--radius-round);
    position      : fixed;
    top           : 13px;
    left          : 0;
    translate     : -50% 0;
    text-align    : right;
    padding       : 0;
    width         : 50px;
    height        : 50px;
    border        : none;
}


.back-but img
{
    width  : 50%;
    filter : invert(1);
}




/* Carousel
====================================== */
/*.carousel h3 a{
color:var(--bs-dark) !important;
text-decoration:none;
}*/

.ph-widget.ph-widget-monthly-features-2 .ph-nav
{
    background : rgba(0, 0, 0, 0) !important;
}

.ph-widget.ph-widget-brands-showcase .ph-widget-pane .cycle-slide a{pointer-events:none;}


@media all and (min-width : 1360px)
{
    .ph-widget-wrapper.ph-widget-wrapper-monthly-features-2, .ph-widget.ph-widget-monthly-features-2
    {
        overflow : visible !important;
    }

    .ph-widget-monthly-features-2 .ph-nav-l
    {
        translate : -100% 0;
    }

    .ph-widget-monthly-features-2 .ph-nav-r
    {
        translate : 100% 0;
    }
}


.carousel ul
{
    list-style   : none;
    padding-left : 0;
}


.carousel-control-prev, .carousel-control-next
{
    color : var(--body-foreground);
    width : 80px;
}


.carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus
{
    color : var(--body-foreground);
}


.carousel-inner
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


@media (max-width : 640px)
{
    .carousel-control-prev, .carousel-control-next
    {
        align-items : unset;
        padding-top : 20px;
    }
}


/* mobile view */
@media (min-width : 640px)
{
    .carousel-control-prev
    {
        left : -5%;
    }

    .carousel-control-next
    {
        right : -5%;
    }

    .carousel-control-prev-icon, .carousel-control-next-icon
    {
        width  : 3rem;
        height : 3rem;
    }

}


.carousel-control-prev-icon, .carousel-control-next-icon
{
    position : relative;
}


.carousel-control-prev-icon
{
    background-image : url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\' fill=\'%23000\'%3e%3cpath d=\'M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\'/%3e%3c/svg%3e')
}


.carousel-control-next-icon
{
    background-image : url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\' fill=\'%23000\'%3e%3cpath d=\'M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\'/%3e%3c/svg%3e');
}


.carousel-control-prev-icon::before, .carousel-control-next-icon::before
{
    position          : absolute;
    background-color  : var(--scheme-colour-d);
    color             : var(--scheme-colour-d-foreground);
    content           : '';
    display           : block;
    width             : 100%;
    height            : 100%;
    background-repeat : no-repeat;
    z-index           : -1;
    border-radius     : var(--radius-round);
}


/*.carousel-item
{
height : 300px;
}*/
.ph-home-carousel-image
{
    height              : 300px;
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
}


@media (max-width : 767px)
{
    .carousel-control-prev, .carousel-control-next
    {
        align-items : flex-start;
    }

    .carousel-control-next, .carousel-control-prev
    {
        margin-top : 100px;
    }
}


.carousel-inner .find-out a
{
    display          : block;
    background-color : var(--scheme-colour-d);
    color            : var(--scheme-colour-d-foreground);
    padding          : 5px 10px;
    width            : fit-content;
    border-radius    : var(--scheme-radius-sm);
    font-family      : var(--scheme-font-family-p), sans-serif;;
    font-size        : 18px;
}


.carousel-inner .find-out a:hover
{
    text-decoration  : none;
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
    transform        : translateY(-3px);
    transition       : all var(--transition-short) ease-out;
}


/* Savings callouts
====================================== */

.saving
{
    position        : relative;
    padding         : 5px 0;
    --lh            : 1em;
    line-height     : var(--lh);
    display         : flex;
    justify-content : center;
    align-items     : center;
    height          : fit-content;
}


.saving::before
{
    /*position          : absolute;
    display           : block;
    background-color  : var(--scheme-colour-m);
    content           : "";
    width             : 70%;
    height            : 100%;
    background-repeat : no-repeat;
    -ms-transform     : rotate(-2deg);
    transform         : rotate(-2deg);*/
}


.saving .ph-callout
{
    padding          : 5px 1vw;
    display          : block;
    position         : relative;
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
    font-size        : 15px;
    text-align       : center;
    -ms-transform    : rotate(-2deg); /* IE 9 */
    transform        : rotate(-2deg);
    min-width        : 75%;
}


.saving .ph-callout-no-value > .ph-callout-reduced
{
    margin : 0 10px;
}


em
{
    font-style : normal;
}


.saving em
{
    font-size   : 110%;
    font-weight : 600;
}


.promoted-offers .col.saving,
.ph-explorer-offers .col.saving
{
    width     : 100%;
    max-width : 200px;
}


@media (max-width : 992px)
{
    .ph-explorer-offers .col.saving
    {
        margin : auto;
    }
}


.themed-offers .saving
{
    position        : absolute;
    bottom          : 1rem;
    right           : 1rem;
    line-height     : 1em;
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : fit-content;
    margin          : 0 10px 0 auto;
}


/* Personal Updates
====================================== */
.personal-updates img
{
    border-radius    : var(--radius-round);
    height           : 100px;
    width            : 100px;
    object-fit       : contain;
    background-color : #FFFFFF;
    padding          : 5px;
    margin           : 0 5px 5px 5px;
    box-shadow       : rgba(99, 99, 99, 0.2) 0 2px 8px 0;
}


.personal-updates p
{
    font-size   : 14px;
    line-height : 16px;
}


.personal-updates ion-icon
{
    padding-top  : 2px;
    margin-right : 5px;
    transform    : rotate(25deg);
}


.whats-new
{
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-evenly;
}


/* Top */
.form-control
{
    padding    : 1px !important;
    font-size  : 15px !important;
    max-height : 22px;
}


/* Promoted Offers & Explorer page offers
====================================== */
.ph-explorer-offers
{
    /* opacity    : 0; */
    transition : all var(--transition-short) ease-in-out;
}


.ph-explorer-offers.ph_animate_load
{
    opacity : 1;
}


.ph-explorer-offers .category-title
{
    width         : 100% !important;
    margin-bottom : 0 !important;
}


.promoted-offers a
{
    display : block;
    / / color: var(--bs-dark) !important;
    / / text-decoration: none !important;
}


.promoted-offers .ph-animate a
{
    opacity    : 0;
    transform  : translateY(30px);
    transition : all var(--transition-short) ease-in-out;
}


.promoted-offers .ph-animate.ph-is-visible a
{
    opacity          : 1;
    transform        : translateY(0);
    transition-delay : var(--transition-short);
}


.promoted-offers .ph-animate.ph-is-visible:nth-child(2) a
{
    transition-delay : 0.4s;
}


.promoted-offers .ph-animate.ph-is-visible:nth-child(3) a
{
    transition-delay : 0.6s;
}


.promoted-offers .img-container,
.ph-explorer-offers .logo-container
{
    position       : relative;
    overflow       : hidden;
    padding-bottom : 100%;
    margin-bottom  : 20px;
}


.ph-explorer-offers .banner-container .offer-description
{
    position        : absolute;
    top             : 0;
    left            : 0;
    right           : 0;
    bottom          : 0;
    background      : var(--scheme-colour-f);
    color           : var(--scheme-colour-f-foreground);
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    padding         : 20px;
    transform       : translateX(100%);
    transition      : transform var(--transition-short) ease-in-out;
}


.ph-explorer-offers a:hover .banner-container .offer-description
{
    transform : translateX(0);
}


.ph-explorer-offers .logo-container
{
    padding-bottom : 20%;
}


.promoted-offers .img-container img
{
    position      : absolute;
    min-width     : 100%;
    min-height    : 100%;
    left          : 50%;
    top           : 50%;
    transform     : translate(-50%, -50%) scale(1);
    transition    : transform var(--transition-short) ease-in-out;
    object-fit    : cover;
    border-radius : var(--scheme-radius-sm);
}


.ph-explorer-offers .logo-container img
{
    position   : absolute;
    max-width  : 100%;
    max-height : 100%;
    left       : 50%;
    transform  : translateX(-50%);
}


.promoted-offers a:hover .img-container img
{
    transform : translate(-50%, -50%) scale(1.05);
}


.ph-callout-no-value > .ph-callout-reduced
{
    line-height : 13px;
    padding     : 5px 3px;
}


/* Categories accordion
====================================== */
.accordion-outer
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


.accordion-body
{
    padding : 1rem 12px;
}


.accordion-header
{
    margin : 10px 0;
}


.accordion-button:not(.collapsed)
{
    color            : var(--bs-dark);
    background-color : #FFFFFF;
}


.accordion-item
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
    border-width     : 0;
}


.accordion-item h6,
.accordion-item p,
{
    color : var(--scheme-colour-l-foreground);
}


.accordion-button
{
    display     : block;
    padding     : 5px 0;
    font-family : var(--scheme-font-family-p), sans-serif;
    font-size   : unset;
    /*color       : var(--scheme-colour-l-foreground);*/
}


.accordion-button:focus
{
    border-color : var(--scheme-colour-d) !important;
    box-shadow   : 0 0 0 0.1rem rgb(80 80 80 / 5%);
}


.accordion-item:first-of-type .button
{
    border-top-left-radius  : 0;
    border-top-right-radius : 0;
}


.accordion-button::before, .accordion-button::after
{
    content       : '';
    width         : 40px;
    height        : 40px;
    position      : absolute;
    left          : 50%;
    top           : 50%;
    display       : block;
    translate     : -50% -50%;
    border-radius : var(--radius-round);
}


.accordion-button::before
{
    background-color : var(--scheme-colour-d);
    color            : var(--scheme-colour-d-foreground);
}


.accordion-button::after
{
    background-image    : url('https://cdn.memberrewards.uk/ionicons/chevron-expand-outline.svg');
    background-size     : 90%;
    filter              : invert(1);
    background-position : center;
}


.accordion-button:not(.collapsed)::after
{
    /* background-image : url("https://secure.parliament-hill.co.uk/Continuum_Build/S3_staging/images/remove-outline.svg"); */
    background-image : url('https://cdn.memberrewards.uk/ionicons/chevron-collapse-outline.svg');
}


.img-container, .img-container > img, .ph-widget-wrapper.ph-widget-wrapper-monthly-features-2, .ph-widget.ph-widget-monthly-features-2
{
    border-radius : var(--scheme-radius-sm) !important;
}


.ph-widget.ph-widget-monthly-features-2 .ph-widget-pane-wrapper
{
    border-radius : var(--scheme-radius-sm) !important;
    overflow      : hidden;
}


/*.accordion a{
color: var(--bs-dark);
text-decoration: none !important;
}*/
.accordion .img-container
{
    display		  	: flex;
    justify-content	: center;
    align-items		: center;
    position      	: relative;
    overflow      	: hidden;
    margin-bottom 	: 16px;
    height        	: 30vh;
    background-color: #FFFFFF;
}


.accordion .img-container object
{    
    display		: flex;
    align-items	: center;
    width		: 100%;
    height		: 100%;
    object-fit 	: cover;
}


.accordion .img-container.benefit img{
    max-height	: 100%;
    max-width  	: 100%;
    object-fit 	: cover;
}


.accordion p
{
    font-size     : 14px;
    line-height   : 18px;
    margin-bottom : 30px;
}


/* Membership
====================================== */
.membership
{
    /* background-image : url(https://secure.parliament-hill.co.uk/Continuum_Build/S3_staging/images/membership-bg.png);*/
    /*background       : linear-gradient(45deg, var(--scheme-colour-m) 10%, transparent 10%), linear-gradient(135deg, transparent 90%, var(--scheme-colour-m) 90%);
    background-size  : 2em 2em;
    background-color : var(--scheme-colour-l);
    opacity          : 1*/
}


.member-benefits
{
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
}


.membership .benefits-list
{
    display   : flex;
    flex-wrap : wrap;
}


.membership ion-icon
{
    margin-right : 10px;
    font-size    : 1.5em;
}


.membership .benefits-list .benefit-item
{
    display   : flex;
    padding   : 10px 0;
    width     : 50%;
    min-width : 170px;
}


.member-benefits-image
{
    background-image  : url(../images/membership-benefits.jpg);
    min-height        : 330px;
    background-repeat : no-repeat;
    background-size   : cover;
    display           : flex;
    justify-content   : flex-end;
    align-items       : flex-end;
}


.member-benefits-image a
{
    background-color : #FFFFFF;
    border-radius    : var(--scheme-radius-sm);
    text-align       : center;
    display          : inline-block;
    padding          : 5px 10px;
    font-family      : var(--scheme-font-family-p), sans-serif;
    font-weight      : 600;
    margin-bottom    : 0;
}


.testimonial h3 span
{
    color       : var(--scheme-colour-f);
    font-size   : 1.4em;
    line-height : 1.4em;
    display     : inline-block;
    margin      : -1.4em .1em;
}


.testimonial h3
{
    line-height : 1.4em;
}


.testimonial p
{
    text-align    : right;
    padding-right : 5%;
    padding-top   : 10px;
}


.testimonial
{
    position : relative;
    z-index  : 99;
    padding  : 0 10%;
}


.testimonial::before
{
    position         : absolute;
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
    content          : '';
    width            : 90%;
    height           : 90%;
    top              : 0;
    left             : 5%;
    -ms-transform    : rotate(-1deg); /* IE 9 */
    transform        : rotate(-1deg);
    z-index          : -1;
}


/* Themed offers
====================================== */
.themed-offers
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


.themed-offers .ph-animate a
{
    display          : block;
    opacity          : 0;
    transform        : translateX(30px);
    transition       : all var(--transition-short) ease-in-out;
    transition-delay : 0.1s;
    color            : var(--scheme-colour-l-foreground);
}


.themed-offers .ph-animate:nth-child(2) a
{
    transition-delay : 0.2s;
}


.themed-offers .ph-animate:nth-child(3) a
{
    transition-delay : var(--transition-short);
}


.themed-offers .ph-animate:nth-child(4) a
{
    transition-delay : 0.4s;
}


.themed-offers .ph-animate.ph-is-visible a
{
    opacity   : 1;
    transform : translateX(0);
}


.themed-offers .img-container
{
    position      : relative;
    overflow      : hidden;
    margin-bottom : 16px;
    aspect-ratio  : 1/1;
}


.themed-offers .img-container img
{
    height    : min(100%, 400px);
    max-width : unset;
    position  : absolute;
    left      : 50%;
    top       : 50%;
    transform : translate(-50%, -50%);
}


/*.themed-offers a {
color: var(--bs-dark);
}*/
.themed-offers a:hover
{
    text-decoration : none;
    color           : var(--link-foreground-colour-hover);
}


.themed-offers label
{
    display     : inline-block;
    font-family : var(--scheme-font-family-p), sans-serif;
    font-size   : .9em;
}


.themed-offers a:hover label
{
    text-decoration : underline !important;
}


.reel
{
    padding           : 0 0 1em 0;
    display           : grid;
    gap               : 1em;
    grid-auto-flow    : column;
    grid-auto-columns : 40%;
    overflow-x        : scroll;
    scroll-snap-type  : x mandatory;
    scroll-padding    : 1em;
}


.reel > *
{
    scroll-snap-align : start;
}


.reel::-webkit-scrollbar
{
    width : 10px;
}


.reel::-webkit-scrollbar-track
{
    background : unset;
}


.reel::-webkit-scrollbar-thumb
{
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
    border-radius    : 10px;
    border           : 1px solid var(--scheme-colour-m);
}


/* Live Savings
====================================== */
.stripe
{
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
}


.stripe.stripe-light
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


#ph-live-savings-container
{
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
}


#ph-live-savings-container h3
{
    font-size : 1.5rem;
}


.ph-widget-wrapper.ph-widget-wrapper-savings-calculator-3
{
    min-width : 330px !important;
}


.ph-widget-wrapper-signup
{
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
    position         : fixed;
    bottom           : 10px;
    right            : 60px;
    width            : 25em !important;
}


@media (max-width : 767px)
{
    .ph-widget-wrapper-savings-calculator-3.ph-widget-wrapper-narrow #ph-calc-form .label label span
    {
        display : none;
    }
}


#google-signin-button iframe
{

    margin : -2px -10px 0 auto !important;
}


button
{
    font-family      : var(--scheme-font-family-p), sans-serif;
    background-color : var(--scheme-colour-f);
    color            : var(--scheme-colour-f-foreground);
}


/* PWA Promo
====================================== */
.pwa-promo
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


.pwa-promo .button
{
    display : block;
    margin  : auto;
    width   : min(100%, 300px);
}


@media (min-width : 768px)
{
    .pwa-promo .button
    {
        margin : unset;
    }
}


/* Home Page Tools
====================================== */
.tools .tool-outer
{
    display        : flex;
    flex-direction : column;
    align-items    : center;
    padding        : 1em;
    text-align     : center;
    transform      : scale(0.1);
    transition     : transform var(--transition-short) ease-in-out;
}

.tools .ph-is-visible .tool-outer
{
    transform : scale(1);
}

.tools a
{
    display    	: inline-block;
    text-align 	: center;
    color      	: var(--link-foreground-colour);
    transition	: all 0.25s ease-out;
}

.tools a h5,
.tools a p
{
    color      	: var(--link-foreground-colour);
    transition	: all 0.25s ease-out;
}
.tools a img.ion-icon
{
    filter        	: var(--scheme-colour-filt-m);
    width         	: 50px;
    margin-bottom 	: 16px;
    transition		: all 0.25s ease-out;
}

.tools a:hover
{
    text-decoration : none;
}
.tools a:hover h5,
.tools a:hover p
{
    text-decoration : none;
    color           : var(--scheme-colour-f);
}
.tools a:hover img.ion-icon
{
    filter : var(--scheme-colour-filt-f);
}
/* ========== */

.fav-bubble
{
    background-color : var(--ui-colour);
}


.fav-bubble:hover
{
    filter : brightness(1.1);
}


.nav-tool .ion-icon,
.fav-bubble img.ion-icon
{
    filter : var(--scheme-colour-filt-l-foreground);
}


/* Footer
====================================== */
footer
{
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
}


footer a, footer a:hover
{
    color           : var(--footer-foreground);
    text-decoration : underline;
}


.footnote, footer small
{
    font-size : 13px;
}


footer .button-lite
{
    border          : 1px solid var(--footer-foreground);
    color           : var(--footer-foreground);
    text-decoration : none !important;
}


.footer-btn a
{
    border-radius   : var(--scheme-radius-sm);
    display         : block;
    margin          : 8px 0;
    padding         : 3px 8px;
    font-size       : 14px;
    text-decoration : none !important;
}


.footer-btn a:hover
{
    background-color : var(--footer-foreground);
    color            : var(--scheme-colour-m);
    text-decoration  : none !important;
}


/* powered by */
footer .button-lite.powered-message,
footer .button-lite.powered-message:hover
{
    /*background : var(--scheme-colour-d);
    color      : var(--scheme-colour-d-foreground);*/
    background-color:rgba(0,0,0,0.5);
    color:#FFFFFF;
    border     : none;
    padding    : 10px 7px 12px;
}


.ph-footer-logo
{
    display         : flex;
    align-items     : center;
    justify-content : space-around;
}


.ph-footer-logo .ph-logo-marble
{
    max-width : 14%;
}


.ph-footer-logo .ph-logo-text
{
    max-width : 80%;
}


/* ph-signup-container
====================================== */
#ph-signup-container
{
    position : relative;
    z-index  : 1000;
}


@media screen and (max-width : 668px)
{
    #ph-signup-container > .ph-widget-wrapper
    {
        /*margin-bottom: 25px; //where is the signup container? mb-1 mb-0-sm mr-1-sm */
        margin-right : 0;
    }
}


.ph-widget button
{
    color     : var(--bs-dark) !important;
    font-size : .9rem !important;
}


#ph-signup-container .ph-widget-wrapper
{
    box-shadow : rgba(99, 99, 99, 0.2) 0 2px 8px 0;
}


/* Benefit page
=======================================*/
.toggle-fav
{
    display     : flex;
    align-items : center;
    gap         : 5px;
    cursor      : pointer;
    font-size   : 0.9rem;
    color       : var(--scheme-colour-f);
}


.toggle-fav:hover
{
    text-decoration : none;
}


.toggle-fav img.ion-icon
{
    /*filter     : var(--scheme-colour-filt-d);*/
    width      : 24px;
    transition : color var(--transition-short) ease-in-out;
}


/*
.toggle-fav:hover img.ion-icon
{
filter : var(--scheme-colour-filt-f);
}


.tag img.ion-icon
{
width  : 52px;
filter : var(--scheme-colour-filt-d);
}


.tag img.ion-icon.lightbg
{
filter : var(--scheme-colour-filt-f);
}


.tag img.ion-icon.darkbg
{
filter : var(--scheme-colour-filt-l);
}


.cta-outer img.ion-icon
{
width  : 30px;
filter : var(--scheme-colour-filt-l);
}
*/

/* Favourite transitions
=======================================*/

/* Heartbeat */
.favheartbeat-enter-active
{
    animation : bounce-in 0.5s;
}


.favheartbeat-leave-active
{
    animation : bounce-in 0.5s reverse;
}


@keyframes bounce-in
{
    0%
    {
        transform : scale(0);
    }
    50%
    {
        transform : scale(1.25);
    }
    100%
    {
        transform : scale(1);
    }
}


/* fav label fade */
.favlabelfade-enter-active,
.favlabelfade-leave-active
{
    transition : opacity var(--transition-short) ease-in-out;
}


.favlabelfade-enter-from,
.favlabelfade-leave-to
{
    opacity : 0;
}


.stripe-banner
{
    /*background       : linear-gradient(45deg, var(--scheme-colour-m) 10%, transparent 10%), linear-gradient(135deg, transparent 90%, var(--scheme-colour-m) 90%);
    background-size  : 2em 2em;*/
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
    opacity          : 1
}


.over
{
    color          : #FFFFFF;
    background     : rgba(0, 0, 0, 0.4);
    padding-top    : 2rem;
    padding-bottom : 2rem;
}


.over a:not(.button):not(.button-lite)
{
    color           : #FFFFFF;
    text-decoration : underline;
}


.over .inner
{
    /*background-color : rgb(255 255 255 / 25%);*/
}


.over .benefit-title
{
    display     : flex;
    align-items : center;
}


.over h1
{
    font-size : calc(3rem + 0.3vw);
}


.over .panel-inner a
{
    display    : block;
    text-align : center;
}


.over .panel-inner img
{
    padding          : 1em;
    max-height       : 160px;
    background-color : #FFFFFF;
}


@media screen and (max-width : 767px)
{
    .over h1
    {
        font-size : 2em;
    }

    .over .panel-inner img
    {
        padding    : .2em;
        max-height : 70px;
        max-width  : 70vw;
    }

    .over
    {
        padding-bottom : 1em;
    }
}


.over .brand-logo-col
{
    justify-content  : space-around;
    flex-direction   : column;
    background-color : rgba(255, 255, 255, .5);
}


figure
{
    border-radius    : 50%;
    box-sizing       : border-box;
    font-size        : 14px;
    padding          : 20px;
    text-align       : center;

    background-color : rgb(51, 51, 51);
    color            : #FFFFFF;
}


figure em
{
    display     : block;
    font-size   : 26px;
    font-style  : normal;
    font-weight : bold;
    white-space : nowrap;
}


.brands .col
{
    position : relative;
}


.brands figure
{

    width       : 60px;
    position    : absolute;
    translate   : -50% 0;
    height      : 60px;
    padding     : 0;
    font-size   : 11px;
    line-height : 1;
    padding-top : 15px;
    left        : 75%;
}


.brands figure em
{
    font-size : 21px;
}


/*.benefit-body .benefit-highlight ion-icon{
color: var(--scheme-colour-f);
font-size: 3em;
transform: rotate(270deg);
}
.benefit-highlight .saving{
color: var(--scheme-colour-f);
font-weight: 600;
}*/

@media all and (min-width : 1200px)
{
    .benefit-sidepanel
    {
        padding-right : 30px;
    }
}


.benefit-highlight
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
    font-family      : var(--scheme-font-family-p), sans-serif;
    font-size        : 1.2rem;
    line-height      : 2rem;
    flex-grow        : 1;

}


.assoc-so
{
    position   : relative;
    margin-top : -2rem;
}


.assoc-so:before
{
    content          : '';
    background-color : var(--scheme-colour-d);
    color            : var(--scheme-colour-d-foreground);
    inset            : 0;
    position         : absolute;
    opacity          : 0.5;
    backdrop-filter  : blur(5px);
    z-index          : 0;
}


.assoc-so > *
{
    position : relative;
    z-index  : 1;
}


.assoc-so .saving::before
{
    background-color : var(--scheme-colour-f);
    color            : var(--scheme-colour-f-foreground);
}


.assoc-so .saving .ph-callout
{
    font-size   : 1.2em;
    line-height : 1.3em;
}


.assoc-so p.days
{
    text-align : center;
}


.assoc-so h5.redeem
{
    background-color : var(--scheme-colour-f);
    color            : var(--scheme-colour-f-foreground);
    padding          : .4em .8em;
    font-family      : var(--scheme-font-family-s), sans-serif;;
    font-size        : 0.9em;
    border-radius    : var(--scheme-radius-sm);
}


.assoc-so a:hover h5.redeem
{
    background-color : var(--scheme-colour-d);
    color            : var(--scheme-colour-d-foreground);
}


.assoc-so .days
{
    font-family : var(--scheme-font-family-s), sans-serif;;
    font-size   : .8em;
}


.related-offers .col:empty, .related-offers [class^=col-]:empty
{
    display : none;
}


@media (max-width : 767px)
{
    .over .benefit-title
    {
        text-align : center;
    }

    .over .benefit-title
    {
        /*padding : .5em;*/
    }

    .over .brand-logo-col
    {
        position   : absolute;
        top        : 4px;
        align-self : center;
    }

    .article-body
    {
        border-bottom : 3px dotted var(--scheme-colour-m);
    }
}


.cta-outer button
{
    font-size        : 14px !important;
    line-height      : 18px;
    padding          : 5px;
    text-transform   : uppercase;
    font-family      : monospace;
    width            : 50px;
    background-color : var(--scheme-colour-d);
    color            : var(--scheme-colour-d-foreground);
    border           : 1px dashed var(--scheme-colour-f);
    border-radius    : 0 0.25rem 0.25rem 0;
    transform        : translateX(-.25rem);

}


.cta-outer
{
    height : 100%;
}


.cta-outer:hover
{
    transform  : translateY(-4px);
    transition : all var(--transition-short) ease-out;
}


#benefit-ctas > div
{
    margin-bottom : 30px;
}


.ph-benefit-central
{
    width     : 600px;
    max-width : 100%;
    margin    : 0 auto;
}


.copyandredeem
{
    width : 100%;
}


#benefit-ctas .ion-icon
{
    width  : 30px;
    filter : invert(1);
}


.copyandredeem .copy-but
{
    background-color : #E8E8E8;
    color            : var(--scheme-foreground-colour);
    display          : block;
    margin           : 0 15px;
    border           : none;
    width            : calc(100% - 30px);
    max-width        : 264px;
    border-radius    : 0 0 var(--scheme-radius-sm) var(--scheme-radius-sm);
}


/*.redeem-button {
border-radius: 0.25rem 0 0 0.25rem !important;
}*/
.redeem-caption
{
    display     : block;
    margin      : 2px 5px;;
    font-size   : 13px;
    font-weight : normal;
    line-height : 1.2;
    opacity     : 0.7;
    text-wrap   : balance;
}


.redeem-caption code
{
    color       : var(--scheme-colour-f-foreground);
    font-weight : 600;
    font-size   : 1rem;
}


.cta-button .tel-no
{
    font-size : 2rem;
}


.tel-no
{
    line-height : 1.5rem;
}


.cta-button ion-icon
{
    margin-right : 2px;
    transform    : translateY(.2rem);
}


.cta-button .tel-caption
{
    font-size   : .9rem;
    font-family : var(--scheme-font-family-s), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}


.tel-no
{
    line-height : 1em;
}


.promise
{
    /*display             : block;
    background-size     : contain;
    width               : 100%;
    height              : 90%;
    background-repeat   : no-repeat;
    background-position : center;
    min-height          : 88px;
    position            : relative;*/
}


.promise:before
{
    /*content          : attr(data-hover);*/
    /*visibility       : hidden;
    opacity          : 0;
    background-color : var(--scheme-colour-l);
    color            : var(--bs-dark);
    text-align       : center;
    border-radius    : var(--scheme-radius-sm);
    padding          : 5px;
    transition       : opacity var(--transition-short) ease-in-out;
    position         : relative;
    z-index          : 1;
    left             : 20%;
    top              : 50%;*/
}


.promise:hover:before
{
    /*opacity    : 1;
    visibility : visible;*/
}


.promise .pp-inner
{
    /*visibility       : hidden;
    opacity          : 0;
    background-color : var(--scheme-colour-l);
    color            : var(--bs-dark);    
    border-radius    : var(--scheme-radius-sm);
    padding          : 10px;
    transition       : opacity var(--transition-short) ease-in-out;
    position         : absolute;
    z-index          : 1;
    left             : 20%;
    top              : 50%;*/
}


.promise:hover .pp-inner
{
    /*opacity    : 1;
    visibility : visible;*/
}


/* animated tags */
/*.container-has-tags{
width: calc(100% - 201px);
display: inline-block;
}*/
/*.tags{
display: inline-block;
height:67px;
}*/

.tags
{
    width  : 240px;
    height : 225px;
}


.tag
{
    filter                    : drop-shadow(0 5px 5px rgba(0, 0, 0, 0.125));
    width                     : 200px;
    height                    : 80px;
    position                  : absolute;
    font-size                 : 16px;
    line-height               : 80px;
    text-align                : right;
    padding-right             : 10px;
    transform-origin          : 15.3% 51%;
    font-family               : var(--scheme-font-family-p), sans-serif;
    font-weight               : bold;
    box-sizing                : border-box;
    animation-fill-mode       : forwards;
    animation-duration        : 600ms;
    animation-timing-function : ease-in-out;
    animation-delay           : 500ms;
    user-select               : none;
}


.tag:first-child
{
}


.tag:not(:first-child)
{
    cursor : pointer;
}


.tag-outer
{
    width               : 100%;
    height              : 100%;
    background-size     : 80% auto;
    background-repeat   : no-repeat;
    background-position : right;
    clip-path           : url(#svgPath);
    box-shadow          : inset 0 0 25px rgba(0, 0, 0, 0.1);
    background-color    : var(--scheme-colour-f);
    color               : var(--scheme-colour-f-foreground);
    transform           : translateX(0);
    transition          : transform var(--transition-short) ease-in-out;
}


.tag:not(:first-child):hover .tag-outer
{
    transform : translateX(20px);
}


/*
.tags > .tag span
{
position : absolute;
right    : 10px;
bottom   : 10px;
}
*/

.tags > .tag-inner h4
{
    font-size : 23px;
    margin    : 0;
}


.tags > .tag:nth-child(1) .tag-inner,
.tags > .tag:nth-child(2) .tag-inner
{
    height : 100%;
    width  : 100%;
}


.tags > .tag:nth-child(1)
{
    transform       : rotate(0deg) scale(1.2);
    animation-name  : SPREAD5;
    z-index         : 2;
    animation-delay : 600ms;
}


.tags > .tag:nth-child(1) .tag-outer
{
    background-color : var(--scheme-colour-d);
    color            : var(--scheme-colour-d-foreground);
}


.tags > .tag:nth-child(2)
{
    animation-name  : SPREAD35;
    z-index         : 1;
    animation-delay : 700ms;
}


.tags > .tag:nth-child(2) .tag-outer
{
    line-height      : normal;
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


.tags > .tag:nth-child(3)
{
    animation-name  : SPREAD65;
    animation-delay : 800ms;
}


.tags > .tag:nth-child(3) .tag-outer
{
    background-color : var(--scheme-colour-f);
    color            : var(--scheme-colour-f-foreground);
}


.tags > .tag:nth-child(2) .tag-inner,
.tags > .tag:nth-child(3) .tag-inner
{
    display         : flex;
    width           : 100%;
    height          : 100%;
    justify-content : end;
    align-items     : center;
}


.tags > .tag:nth-child(2) span,
.tags > .tag:nth-child(3) span
{
    display      : block;
    max-width    : 55%;
    max-height   : 55%;
    transform    : rotate(-90deg);
    width        : 50px;
    height       : 50px;
    margin-right : 10px;
}


.tags > .tag:nth-child(3) span
{
    color : #FFFFFF;
}


.tags > .tag:nth-child(2) span .ion-icon
{
    filter : var(--scheme-colour-filt-d)
}


.tags > .tag:nth-child(3) span .ion-icon
{
    filter : var(--scheme-colour-filt-l)
}


@keyframes SPREAD5
{
    0%
    {
        transform : rotate(0deg) scale(1.2);
    }
    100%
    {
        transform : rotate(5deg) scale(1.2);
    }
}


@keyframes SPREAD35
{
    0%
    {
        transform : rotate(0deg);
    }
    100%
    {
        transform : rotate(40deg);
    }
}


@keyframes SPREAD65
{
    0%
    {
        transform : rotate(0deg);
    }
    100%
    {
        transform : rotate(75deg);
    }
}


/* end of tags css */
.small-print
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


#terms-accordion .accordion-button
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
    padding-left     : 50px;
}


#terms-accordion .accordion-button::before,
#terms-accordion .accordion-button::after
{
    left      : 0;
    translate : 0 -50%;
}


#terms-accordion .accordion-button
{
    box-shadow : unset;
}


.ph-benefit-rate
{
    padding-top : 16px;
}


.ph-benefit-rate p span
{
    margin : 0 5px;
    color  : var(--scheme-colour-d);
}


.ph-benefit-rate p
{
    font-size   : 1.5em;
    line-height : 1em;
}


.ph-benefit-rate p span.marked-hover
{
    color : var(--scheme-colour-l);
}


.ph-benefit-rate p span.marked
{
    color : #FFFFFF;
}


.ph-benefit-rate-message
{
    display          : none;
    position         : relative;
    left             : 75px;
    top              : -23px;
    font-size        : 12px;
    background-color : #FFFFFF;
    padding          : 5px;
    border           : 1px solid black;
    border-radius    : var(--scheme-radius-sm);
    width            : fit-content;
    z-index          : 1000;
    margin-bottom    : -30px;
}


.ph-feature-box
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
    padding          : 1em;
    border-radius    : var(--scheme-radius-md);
}


.ph-feature-box *:not(input)
{
    color : var(--scheme-colour-l-foreground);
}


.ph-feature-box a:not(.button)
{
    text-decoration : underline;
    color: var(--scheme-colour-l-foreground);
}


.ph-feature-box .ph-feature-box,
.ph-feature-box .ph-feature-box a
{
    color : var(--scheme-foreground-colour);
}


.ph-feature-box-white
{
    background-color : #FFFFFF;
    padding          : 1em;
    color            : #333333;
    border-radius    : var(--scheme-radius-md);
}


.ph-feature-box-white p:last-child
{
    margin-bottom : 0;
}


.ph__benefit dt:not(.button), .ph__benefit dt + dd
{
    padding : 15px 0 15px 30px;
}


.ph__benefit dt:not(.button)
{
    border-bottom : 1px solid #EEEEEE;
    font-weight   : bold;
    cursor        : pointer;
    position      : relative;
}


.ph__benefit dt:not(.button):hover
{
    background-color : #EAEAEA;
}


.ph__benefit dt i
{
    font-size : 175%;
    left      : 0;
    position  : absolute;
}


.ph__benefit dt.button i
{
    top  : 0;
    left : 10px;
}


.ph__benefit dt + dd
{
    display : none;
}


.ph__benefit .ph-benefit-central
{
    width     : 600px;
    max-width : 100%;
    margin    : 0 auto;
}


.ph-benefit-brands
{
    margin-bottom : 20px;
}


.ph-benefit-brands img
{
    max-width      : 120px;
    max-height     : 60px;
    margin         : 0 10px 10px 0;
    vertical-align : middle;
    background     : #FFFFFF;
}


.ph-benefit-brands-grid
{
    margin          : 24px -24px 0 0;
    padding         : 0;
    list-style-type : none;
}


.ph-benefit-brands-grid:after
{
    content : ' ';
    display : table;
    clear   : both;
}


.ph-benefit-brands-grid li
{
    width           : calc(33% - 24px);
    margin          : 0 24px 24px 0;
    box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.15);
    position        : relative;
    float           : left;
    padding         : 0;
    list-style-type : none;
    background      : #FFFFFF;
    aspect-ratio    : 1;
}


@media all and (min-width : 900px)
{
    .ph-benefit-brands-grid li
    {
        width : calc(20% - 24px);
    }
}


.ph-benefit-brands-grid.ph-benefit-brands-grid-4 li
{
    width : calc(25% - 24px);
}


.ph-benefit-brands-grid.ph-benefit-brands-grid-3 li
{
    width : calc(33% - 24px);
}


.ph-benefit-brands-grid li:after
{
    content     : ' ';
    display     : block;
    padding-top : 100%;
}


.ph-benefit-brands-grid img
{
    position   : absolute;
    max-width  : 95%;
    max-height : 95%;
    transform  : translate(-50%, -50%);
    top        : 50%;
    left       : 50%;
}


.ph-benefit-brands-grid:not(.ph-benefit-brands-grid-4) li:nth-child(25) ~ li
{
    display : none;
}


.ph-benefit-brands-grid.ph-benefit-brands-grid-4 li:nth-child(16) ~ li
{
    display : none;
}


.ph-benefit-products-grid li
{
    background-size : cover;
}


.ph-benefit-products-grid li:before
{
    content          : ' ';
    display          : block;
    position         : absolute;
    inset            : 0;
    background-color : rgba(0, 0, 0, 0.4);
    backdrop-filter  : blur(5px);
}


.ph-benefit-products-grid li img
{
    max-width     : 80%;
    max-height    : 80%;
    border-radius : 4px;
}


.ph-benefit-products-grid li h5
{
    line-height : 1.1;
    position    : absolute;
    bottom      : 0;
    color       : #FFFFFF;
    font-weight : bold;
    text-align  : center;
    width       : 100%;
    padding     : 5px;
}


/* EXPLORER PAGE
=======================================*/
main > article.explorer-view
{
    padding-bottom : 30px;
    overflow       : unset;
}


.explorer-title
{
    margin-top    : 0.7em !important;
    margin-bottom : 0 !important;
    font-size     : calc(1.275rem + 0.1vw);
}


@media (max-width : 767px)
{
    .explorer-title
    {
        font-size   : 0.9rem;
        line-height : 1.2rem;
        font-family : var(--scheme-font-family-s), sans-serif;
        padding     : 10px;
    }
}


.explore-filters-wrap
{
    position         : sticky;
    top              : calc(var(--header-height) - 1px);
    z-index          : 1021;
    transform        : translateY(0);
    transition       : all var(--transition-short) ease-in-out;
    background-color : var(--scheme-colour-f);
    color            : var(--scheme-colour-f-foreground);

}


.explore-filters
{
    padding : 10px 0;
    /*box-shadow    : 0 0 0 var(--scheme-colour-l),
    0 0 0 var(--scheme-colour-l);*/
}


@media (min-width : 1200px)
{
    .explore-filters-wrap
    {
        top     : calc(var(--header-height) + var(--navbar-height) - 1px);
        z-index : 1019;
    }

    .scroll-down .explore-filters-wrap.ph-is-sticky
    {
        transform : translateY(calc((var(--header-height) + var(--navbar-height)) * -1));
    }

}


.explore-filters-wrap.ph-is-sticky
{
    /*box-shadow : 50vw 0 0 var(--scheme-colour-l),
    -50vw 0 0 var(--scheme-colour-l);*/
}


.explore-filters a
{
    text-decoration : none;
    color           : #000000;
}


.explore-filters .search-form__field
{

    border-radius    : var(--scheme-radius-sm) 0 0 var(--scheme-radius-sm);
    background-color : #FFFFFF;
}


.explore-filters .search-form .search-form__button
{
    padding : 0 10px;
}


.explore-filters .search-form .search-form__button img.ion-icon,
.explore-filters #search-form__categories-btn img.ion-icon
{
    filter : invert(0);
}


.explore-filters .search-form .search-form__input
{
    width         : 100%;
    height        : 44px;
    border-radius : var(--scheme-radius-sm);
}


.explore-filters .search-form .search-form__input:focus
{
    outline : none;
}


.explore-filters .search-form .search-form__in
{
    display     : flex;
    align-items : center;
    font-size   : 0.75rem;
    padding     : 0 5px;
    opacity     : 0.8;
}


.explore-filters .search-form__categories
{
    width : 170px;
}


.explore-filters .search-form__options
{
    width       : 150px;
    margin-left : 10px;
}


.explore-filters #search-form__categories-btn
{
    background-color : #F2F2F2;
    padding          : 10px;
    border-radius    : 0 var(--scheme-radius-sm) var(--scheme-radius-sm) 0;
}


.explore-filters #search-form__categories-btn.show
{
    background : var(--scheme-colour-m);
    color      : var(--scheme-colour-m-foreground);
}


.explore-filters #search-form__options-btn
{
    background-color : var(--ui-colour);
    color            : #FFFFFF;
    padding          : 10px;
    border-radius    : var(--scheme-radius-sm);
    margin-left      : 10px;
}


.search-form__options-items
{
    /*position         : absolute;
    right            : 10px;
    top              : 70px;*/
    /*background-color : var(--scheme-colour-l) !important;
    box-shadow       : 0 0 0 10px var(--scheme-colour-l), 0 10px 15px rgba(0, 0, 0, 0.1);
    border-radius    : 1px;
    padding          : 0;*/
    /*max-width        : calc(100% - 20px);*/
}


.search-form__categories .search-form__options-items > div
{
    width         : 170px;
    margin-top    : -12px;
    border-radius : 0 0 var(--scheme-radius-sm) var(--scheme-radius-sm);
}


.search-form__options-items .filter-card
{
    padding       : 10px;
    border-radius : var(--scheme-radius-sm);
    margin-bottom : 10px;
}


.search-form__filters-cards h6.title
{
    margin-bottom : 10px;
    color         : #FFFFFF;
}


.search-form__options-items > div:last-child
{
    margin-bottom : 0;
}


.explore-filters .filter-btn-apply
{
    display    : block;
    background : #000000;
    color      : #FFFFFF;
    text-align : center;
    margin-top : 10px;
    box-shadow : 0 0 0 5px var(--scheme-colour-l), 0 0 10px 5px var(--scheme-colour-l);
    position   : sticky;
    bottom     : 0;
}


.filter-card-category .ph-option-category,
.filter-card-topic .topic-filter-items
{
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(170px, 1fr));
}


.search-form__options-items
{
    width      : 100%;
    max-width  : 100%;
    right      : 0;
    top        : 65px;
    max-height : calc(100dvh - var(--header-height) - var(--navbar-height) - 64px); /* 64px = searchbar & filter height */
}


.search-form__options-items.show
{
    overflow-y : auto;
}


@media (max-width : 767px)
{
    .search-form__categories,
    .search-form__options
    {
        display : none;
    }

    .explore-filters
    {
        flex-wrap       : wrap;
        justify-content : end;
    }

    .explore-filters .search-form
    {
        width    : 100%;
        /*  flex-wrap : wrap; */
        position : relative;
    }

    .explore-filters .search-form .search-form__in
    {
        display : none;
    }

    .explore-filters .search-form__categories
    {
        position : absolute;
        bottom   : -54px;
        width    : 49%;
    }

    .explore-filters #search-form__categories-btn
    {
        background    : var(--scheme-colour-m);
        color         : var(--scheme-colour-m-foreground);
        border-radius : var(--scheme-radius-sm);
    }

    .explore-filters #search-form__categories-btn.show
    {
        border-radius : var(--scheme-radius-sm) var(--scheme-radius-sm) 0 0;
    }

    .explore-filters .search-form__categories .search-form__options-items.show
    {
        width : 100%;
    }

    .explore-filters .search-form__categories .search-form__options-items.show > div
    {
        width : 100%;
    }

    .explore-filters .search-form__options
    {
        margin-top : 10px;
        width      : 49%;
    }
}


@media (min-width : 768px)
{
    .search-form__options-items
    {
        grid-template-columns : repeat(8, 1fr);
        gap                   : 10px;
        width                 : 100%;
        top                   : 80px;
    }

    .search-form__options-items.show,
    .search-form__options-items.collapsing
    {
        display : grid;
    }

    .search-form__options-items .filter-card
    {
        margin-bottom : 0;
    }

    .search-form__options-items .filter-card-category,
    .search-form__options-items .filter-card-topic
    {
        grid-column : 1 / span 4;
        grid-row    : 1 / span 2;
    }

    .search-form__options-items .filter-card-type
    {
        grid-column : 5 / span 2;
        grid-row    : 1 / span 2;
    }

    .search-form__options-items .filter-card-sort
    {
        grid-column : 7 / span 2;
    }

    .search-form__options-items .filter-card-view
    {
        grid-column : 7 / span 2;
    }

    .search-form__options-items .filter-btn-apply
    {
        grid-column : 1 / span 8;
        margin-top  : 0;
    }
}


.search-form__mobile-filters #search-form__filters-btn .ion-icon
{
    min-width : 1em;
}


#search-form__options-btn img.ion-icon
{
    filter : invert(1);
}


.explore-filters img.ion-icon, .fav-bubble img.ion-icon
{
    width  : 24px;
    filter : invert(1);
}


@media (min-width : 768px)
{
    .search-form__mobile-filters
    {
        display : none;
    }
}


.result-data
{
    margin-top : 10px
}


#ph-explorer-options
{
    border-bottom : 1px solid #CCCCCC;
    padding       : 2px;
}


.ph-option-item
{
    /*display: flex;
    align-items: center;*/
}


.ph-option-item label
{
    font-size : 80%;
    display   : block;
}


.ph-option-item .ph-option-display
{
    position         : relative;
    margin           : 6px 3px 6px 1.7rem;
    padding          : 2px 10px;
    background-color : transparent;
    color            : #FFFFFF;
    cursor           : pointer;
    transition       : all var(--transition-short) ease-in-out;
    border-radius    : var(--scheme-radius-sm);
    display          : flex;
    align-items      : center;
    justify-content  : space-between;
    min-width        : 70px;
}


.ph-option-item .ph-option-display::after
{
    content    : '';
    display    : block;
    width      : 16px;
    height     : 16px;
    position   : absolute;
    background : transparent;
    top        : 3px;
    left       : -1.5rem;
    border     : 2px solid var(--scheme-colour-l);
}


.ph-option-item .ph-option-display:hover
{
    /*color			 : var(--scheme-colour-d);*/
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


.ph-option-item input[type='radio'],
.ph-option-item input[type='checkbox']
{
    -webkit-appearance : none;
    appearance         : none;
    background-color   : #FFFFFF;
    margin             : 0;
    padding            : 0;
    display            : none;
}


.ph-option-item input[type='radio']:checked + .ph-option-display,
.ph-option-item input[type='checkbox']:checked + .ph-option-display
{
    /*  background-color : var(--scheme-colour-l); */
}


.ph-option-item input[type='radio']:checked + .ph-option-display:after,
.ph-option-item input[type='checkbox']:checked + .ph-option-display:after
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


.ph-option-item input[type='radio']:checked + .ph-option-display:before,
.ph-option-item input[type='checkbox']:checked + .ph-option-display:before
{
    opacity                   : 1;
    height                    : 12px;
    width                     : 6px;
    transform-origin          : left top;
    border-right              : 1px solid #000000;
    border-top                : 1px solid #000000;
    content                   : '';
    left                      : -1.4rem;
    top                       : 11px;
    position                  : absolute;
    transform                 : scaleX(-1) rotate(135deg);
    z-index                   : 1;
    animation-duration        : 650ms;
    animation-timing-function : ease-in-out;
    animation-name            : checkmark;
}


@keyframes checkmark
{
    0%
    {
        height  : 0;
        width   : 0;
        opacity : 1;
    }
    20%
    {
        height  : 0;
        width   : 6px;
        opacity : 1;
    }
    40%
    {
        height  : 12px;
        width   : 6px;
        opacity : 1;
    }
    100%
    {
        height  : 12px;
        width   : 6px;
        opacity : 1;
    }
}


/* #vue-app > main > div:nth-child(2) > div */
.ph-cat-title-container h3
{
    position : relative;
    display  : inline;
    color    : #FFFFFF;
}


.ph-cat-title-container h3::before
{
    content          : '';
    display          : block;
    position         : absolute;
    top              : -10px;
    bottom           : -5px;
    left             : -30px;
    right            : -30px;
    background-color : var(--scheme-colour-m);
    color            : var(--scheme-colour-m-foreground);
    z-index          : -1;
    transform        : rotate(-2deg);
}


.ph-cat-title-container p:first-of-type
{
    padding-top : 10px;
}


/* EXPLORER PAGE - PRODUCT VIEW DEFAULTS (LIST & GRID)
======================================================*/
/* offers transitions */
.offerItems-enter-from,
.offerItems-leave-to
{
    opacity   : 0;
    transform : scale(0.8);
}


.offerItems-enter-active
{
    transition : all var(--transition-short) ease-in-out;
}


.offerItems-leave-active
{
    transition : all var(--transition-short) ease-in-out;
}


.group1000.offerItems-leave-active
{
    position : absolute;
    bottom   : -100px;
    left     : 45%;
    z-index  : -1;
}


.offerItems-move
{
    transition : all var(--transition-short) ease-in-out;
}


.ph-explorer-offers .ph-offer-container
{
    position : relative;
}


.ph-explorer-offers .fav-bubble
{
    position        : absolute;
    right           : 10px;
    top             : 10px;
    z-index         : 100;
    width           : 35px;
    height          : 35px;
    border-radius   : 50%;
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-size       : 1.3rem;
    cursor          : pointer;
    transition      : opacity var(--transition-short) ease-in-out;
}


.ph-explorer-offers .banner-container
{
    position   : relative;
    background : #FFFFFF;
    color      : #333333;
    border-radius: var(--scheme-radius-sm);
    overflow: hidden;
}


.ph-explorer-offers .banner-container:before
{
    content     : '';
    display     : block;
    width       : 100%;
    padding-top : 100%;
}


.ph-explorer-offers .banner-image
{
    width           : 100%;
    height          : 100%;
    position        : absolute;
    top             : 0;
    left            : 0;
    display         : flex;
    justify-content : center;
    align-items     : center;
    overflow        : hidden;
}


.ph-explorer-offers .banner-image img
{
    position   : absolute;
    min-width  : 100%;
    min-height : 100%;
    left       : 0;
    top        : 0;
    /* transform: translate(-50%, -50%) scale(1); */
    transition : transform var(--transition-short) ease-in-out;
    object-fit : cover;
}


@media not all and (hover : none)
{
    .ph-explorer-offers .ph-offer-container:hover .banner-image img
    {
        transform : scale(110%);
    }
}


.brand-item .banner-image img
{
    position   : unset;
    width      : 60%;
    min-width  : 0;
    min-height : 0;
    max-height : 80%;
    object-fit : scale-down;
}


.ph-explorer-offers .logo-container
{
    position       : absolute;
    bottom         : 0;
    right          : 0;
    background     : #FFFFFF;
    width          : 80%;
    max-height     : 20%;
    padding        : 20px;
    padding-bottom : 20%;
    margin-bottom  : 10px;
}


.ph-explorer-offers .brand-item .logo-container
{
    display : none;
}


.ph-explorer-offers .offer-excerpt
{
    display            : -webkit-box;
    -webkit-box-orient : vertical;
    -webkit-line-clamp : 4;
    overflow           : hidden;
}


@media (min-width : 550px)
{
    .ph-explorer-offers .content-container
    {
        margin-top : 0;
    }
}


.ph-explorer-offers h4
{
    font-size   : 0.9em;
    font-weight : bold;
    line-height : 1.2rem;
}


.ph-explorer-offers h6
{
    font-size   : 0.9em;
    line-height : 1.2rem;
}


/* EXPLORER PAGE - GRID VIEW
=======================================*/
.ph-explorer-offers.grid .offer-excerpt
{
    font-size     : 0.8rem;
    line-height   : 1.2rem;
    margin-bottom : 15px;
}


.ph-explorer-offers.grid .content-container
{
    position       : relative;
    display        : flex;
    flex-direction : column;
    flex-grow      : 1;
    margin-top     : 10px;
}


@media (min-width : 768px)
{
    .ph-explorer-offers.grid .content-container
    {
        justify-content : space-between;
    }
}


@media (min-width : 575px)
{
    .ph-explorer-offers.grid .fav-bubble
    {
        right : 25px;
        top   : 25px;
    }
}


/*
.ph-explorer-offers.grid .editorial-true .fav-bubble
{
background : #FFFFFF;
}
*/

@media (min-width : 992px)
{
    #benefit-ctas:not(:has(#price-promise))
    {
        position : sticky;
        top      : calc(var(--header-height) + var(--navbar-height) + 15px);
    }


    .ph-explorer-offers.grid .logo-container
    {
        width : 70%;
    }
}


.ph-explorer-offers.grid .group13 .banner-container img
{
    object-fit : contain;
}


.ph-explorer-offers .logo-container img
{
    position   : absolute;
    max-width  : 80%;
    max-height : 80%;
    left       : 50%;
    transform  : translateX(-50%) translateY(-50%);
    top        : 50%;
}


.ph-explorer-offers .content-columns .content-column:nth-child(2)
{
    display         : flex;
    flex-direction  : column-reverse;
    justify-content : end;
    justify-items   : end;
}


.ph-explorer-offers.grid .content-head
{
    /*  order : 2; */
}


.ph-explorer-offers.grid .content-callout
{
    margin-bottom : 10px;
}


.ph-explorer-offers.grid .content-columns
{
    display : none;
}


.ph-explorer-offers .ph-offer-container
{
    display        : flex;
    flex-direction : column;
    height         : 100%;
}


.ph-explorer-offers.grid .ph-offer-container
{
    flex-direction : column !important;
}


.ph-explorer-offers.grid .col.saving
{
    margin : auto;
}


/* EXPLORER PAGE - lIST VIEW
=======================================*/
@media (min-width : 575px)
{
    .ph-explorer-offers.list h4
    {
        font-size : 1em;
    }
}


@media (min-width : 768px)
{
    .ph-explorer-offers.list h4
    {
        font-size   : 2em;
        font-weight : normal;
        line-height : 2.2rem;
        margin-top  : 0 !important;
    }

    .ph-explorer-offers h6
    {
        font-size : 1.2em;
    }
}


.ph-explorer-offers.list .offer-item
{
    width    : 100% !important;
    position : relative;
}


.ph-explorer-offers.list .offer-item > .ph-offer-container
{
    flex-direction   : row;
    position         : relative;
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
    padding          : 10px;
}


/*
.ph-explorer-offers.list .banner-container
{
padding-bottom : 0;
min-width      : 100%;
max-height     : 300px;
}
*/
.ph-explorer-offers.list .banner-container
{
    min-width   : 40%;
    max-width   : 350px;
    max-height  : unset;
    align-items : center;
}


.ph-explorer-offers.list .logo-container
{
    right          : -2%;
    width          : 90%;
    max-height     : 25%;
    padding-bottom : 25%;
}


@media (min-width : 768px)
{
    .ph-explorer-offers.list .banner-container
    {
        min-width : 33%;
    }
}


@media (min-width : 992px)
{
    .ph-explorer-offers.list .banner-container
    {
        min-width   : 33%;
        max-width   : 350px;
        max-height  : unset;
        align-items : center;
    }

    .ph-explorer-offers.list .logo-container
    {
        right          : -20px;
        width          : 80%;
        max-height     : 20%;
        padding-bottom : 20%;
    }
}


.ph-explorer-offers.list .content-container
{
    display        : flex;
    padding        : 0 15px;
    flex           : 1 1 0;
    flex-direction : column;
}


@media (min-width : 992px)
{
    .ph-explorer-offers.list .content-container
    {
        padding : 15px 30px;
    }
}


.ph-explorer-offers.list .content-head
{
    margin-bottom : 20px;
}


.ph-explorer-offers.list .content-columns
{
    display : none;
}


@media (min-width : 575px)
{
    .ph-explorer-offers.list .content-columns
    {
        display   : flex;
        font-size : 0.7rem;
    }

    .ph-explorer-offers.list .col.saving
    {
        margin : unset;
    }
}


@media (min-width : 768px)
{
    .ph-explorer-offers.list .content-columns
    {
        font-size : 0.9rem;
    }
}


.ph-explorer-offers.list .content-columns .content-column:nth-child(2)
{
    flex-direction  : column;
    justify-content : start;
}


.ph-explorer-offers.list .content-cta
{
    display    : inline-block;
    background : var(--scheme-colour-m);
    color      : var(--scheme-colour-m-foreground);
    margin     : 20px 0;
    padding    : 7px 0 7px;
    width      : 100%;
    text-align : center;
    font-size  : 0.9rem;
}


@media (min-width : 768px)
{
    .ph-explorer-offers.list .content-cta
    {
        font-size : 1.5rem;
    }
}


@media (min-width : 992px)
{
    .ph-explorer-offers.list .content-cta
    {
        width  : 50%;
        margin : 20px 30px;
    }
}


/* EXPLORER PAGE - GRID/lIST VIEW: HIDE/DISPLAY ITEMS
=======================================*/
.ph-explorer-offers .content-container .offer-description,
.ph-explorer-offers .content-cta,
.ph-explorer-offers .content-highlights,
.ph-explorer-offers.list .banner-container .offer-description
{
    display : none;
}


.ph-explorer-offers.list .content-highlights,
.ph-explorer-offers.list .content-container .offer-description
{
    display : block;
}


.ph-explorer-offers.list .content-highlights ul
{
    list-style-type : none;
    margin          : 30px 0;
}


.ph-explorer-offers.list .content-highlights ul li
{
    margin-bottom : 8px;
    position      : relative;
}


.ph-explorer-offers.list .content-highlights ul li:before
{
    content             : '';
    background-image    : url('https://cdn.memberrewards.uk/ionicons/checkmark-outline.svg');
    background-size     : 16px 16px;
    display             : inline-block;
    width               : 2rem;
    height              : 16px;
    /* margin-left: -2rem; */
    background-position : 3px center;
    background-repeat   : no-repeat;
    z-index             : 100;
    position            : absolute;
    left                : -2rem;
    top                 : 3px;
    filter              : var(--scheme-colour-filt-m);
}


.ph-explorer-offers.list .content-highlights ul li:after
{
    content    : '';
    display    : block;
    width      : 16px;
    height     : 16px;
    position   : absolute;
    background : var(--scheme-colour-m);
    color      : var(--scheme-colour-m-foreground);
    top        : 3px;
    left       : -1.5rem;
    opacity    : 0.4;
}


.offer-item.highlight
{
    /*  background : #FFFFFF; */
    z-index : 1000;
}


.offer-item.highlight > .ph-offer-container
{
    background : #FFFFFF;
}


.offer-item::before
{
    content          : '';
    background-color : rgba(0, 0, 0, 0);
    transition       : background-color var(--transition-short) ease-in-out;
}


.offer-item.lightbox::before
{
    content          : '';
    background-color : rgba(0, 0, 0, 0.6);
    transition       : background-color var(--transition-short) ease-in-out;
}


.offer-item.highlight::before
{
    content  : '';
    position : fixed;
    width    : 110%;
    height   : 110%;
    top      : -5%;
    left     : -5%;
    z-index  : -1;
}


.editorial-true
{
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


@media screen and (max-width : 769px)
{
    .editorial-true
    {
        padding : 10px;
    }

    .editorial-true h4, .editorial-true p
    {
        text-align : left;
    }
}


/* EXPLORER PAGE
============================================================== */
.hubItems-enter-from,
.hubItems-leave-to
{
    opacity   : 0;
    transform : scale(0.8);
}


.hubItems-enter-active
{
    transition : all var(--transition-short) ease-in-out;
}


.hubItems-leave-active
{
    transition : all var(--transition-short) ease-in-out;
}


.hubItems-leave-active
{
    position : absolute;
    bottom   : -100px;
    left     : 45%;
    z-index  : -1;
}


.hubItems-move
{
    transition : all var(--transition-short) ease-in-out;
}


.hub-tabs .tab
{
    flex : 1 1 0;
}


.ph-option-display.tab-label
{
    font-size        : 0.9rem;
    justify-content  : center;
    padding          : 10px;
    color            : #FFFFFF;
    background-color : rgba(255, 255, 255, 0.3);
    margin           : 6px 3px;
}


.ph-option-display.tab-label:hover,
.ph-option-item input[type='radio']:checked + .ph-option-display.tab-label,
.ph-option-item input[type='checkbox']:checked + .ph-option-display.tab-label
{
    /* color            : var(--scheme-colour-f); */
    background-color : var(--scheme-colour-l);
    color            : var(--scheme-colour-l-foreground);
}


.ph-option-display.tab-label::before,
.ph-option-display.tab-label::after
{
    display : none;
}


.form_element
{
    background    : #FFFFFF;
    box-shadow    : 0 1px 1px rgba(0, 0, 0, 0.4);
    margin-bottom : 8px;
    border-radius : 2px;
}

.form_element, 
.form_element *{
    color         : #333333;
}

.form_element > div > span{
    color         : #333333;    
}

.form_element:after
{
    content : ' ';
    display : table;
    clear   : both;
}


.form_element input:not([type='checkbox']):not([type='radio']):nth-last-of-type(2), .form_element input:not([type='checkbox']):not([type='radio']):nth-last-of-type(2) + input:not([type='checkbox']):not([type='radio'])
{
    width : 50%;
    float : left;
}


.form_element.wrapper:hover:focus-within,
.form_element.wrapper:focus-within
{
    box-shadow : 0 1px 1px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(0, 0, 0, 0.8);
}


.form_element.wrapper:focus-within > div > label:first-child
{
    color            : #FFFFFF;
    background-color : rgba(0, 0, 0, 0.8);
}


.form_element.wrapper:focus-within > div > label:first-child a
{
    color : #FFFFFF;
}


.form_element.wrapper input
{
    outline : none;
}


.form_element_plain
{
    background : none;
    box-shadow : none;
    min-height : 0 !important;
}


.form_element_plain label
{
    background : none !important;
    height     : auto !important;
}


.form_element_plain input
{
    margin-top : 0 !important;
}


.form_element_plain span
{
    margin-top : 2px !important;
}


.form_element.wrapper:hover
{
    box-shadow : 0 1px 1px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(0, 0, 0, 0.1);
}


.form_element.wrapper.focussed.error
{
    box-shadow : 0 0 0 4px #F84000 !important;
}


.form_element label
{
    background : #E4E4E4;
    color      : #555555;
    display    : block;
    font-size  : 14px;
    min-height : 0;
    padding    : 5px 10px;
    width      : 100%;
}


.form_element label > aside
{
    float : right;
}


.form_element label > a
{
    float   : right;
    display : block;
    color   : var(--ui-colour);
}


.form_element input:not([type='checkbox']):not([type='radio']), .form_element select, .form_element textarea
{
    width : 100%;
}


.form_element input[readonly]
{
    background-color : #F0F0F0;
    color            : #888;

}


.form_element textarea
{
    height : auto;
}


.form_element input[type='checkbox']
{
    margin-left  : 8px;
    /*margin-top  : 7px;*/
    margin-right : 5px;
    width        : auto;
}


.form_element input[type='checkbox'] + span
{

    font-size : 16px;
    /*vertical-align : -10px;*/
}


.form_element label, .form_element input, .form_element select
{
    line-height : 1;
}


.form_element input
{
    padding : 10px;
}


.form_element select
{
    padding : 7px 8px;
}


.form_element input + input, .form_element select + select, .form_element select + input, .form_element input + select
{
    border-left : 1px solid #CCCCCC;
}


.form_element .tip
{
    display : none;
}


.form_element .warning
{
    color   : #F84000;
    display : none;
    padding : 4px 8px;
}


#toast_notification
{
    position        : fixed;
    top             : -30px;
    width           : min(90vw, 600px);
    padding         : 5px 10px;
    border-radius   : var(--scheme-radius-sm);
    background      : var(--scheme-colour-notification, rgba(0, 250, 206, 0.5));
    text-align      : center;
    color           : #000;
    z-index         : 2000;
    left            : 50vw;
    transform       : translateX(-50%);
    height          : 0;
    overflow        : hidden;
    opacity         : 0.9;
    transition      : all var(--transition-short) ease-in-out;
    backdrop-filter : blur(5px);
    font-weight     : bold;
    font-size       : 18px;
}


#toast_notification.active
{
    top     : 27px;
    height  : auto;
    opacity : 1;
}


#toast
{
    background : orange;
    color      : white;
    padding    : 3px;
    /* max-height : 30px; */
}


@media all and (max-width : 767px)
{
    #toast
    {
        margin-bottom : 60px;
    }
}


body > #toast:first-child
{
    position : fixed;
    top      : 0;
    left     : 0;
    width    : 100%;
    z-index  : 10001;
}


#toast:empty
{
    display : none;
}


.benefit code:not(.redeem-button code)
{
    /* background-image: url("../images/copy.svg"); */
    /*  color               : var(--scheme-colour-f); */
    background-color    : var(--scheme-colour-l);
    color               : var(--scheme-colour-l-foreground);
    background-repeat   : no-repeat;
    background-position : right;
    padding             : 3px 7px 3px 6px;
    cursor              : pointer;
    border              : 1px dashed var(--scheme-colour-d);
    border-radius       : var(--scheme-radius-sm);
}


.ph-redeem-caption
{
    font-size   : 13px;
    font-weight : normal;
    line-height : 1.2;
    opacity     : 0.7;
    display     : block;
    margin-top  : 2px;
}


#navbarSearchResults
{
    position : relative;
}


#navbarSearchResults em
{
    font-style : normal;
    display    : block;
    opacity    : 0.7;
}


article#phw-rs
{
    background-color : rgb(75, 157, 201);
    padding-bottom   : 0;
    margin-bottom    : 0;
    height           : 79vh;
    box-sizing       : border-box;
}


#ph-radial-search-container,
.ph-widget-wrapper-radial-search, .ph-widget-radial-search,
.ph-widget-radial-search .ph-widget-pane-wrapper,
.ph-widget-radial-search .ph-widget-pane
{
    height     : 100%;
    box-sizing : border-box;
}


.ph-widget-radial-search
{
    border         : none !important;
    padding-bottom : 10px !important;
}


#phw-rs #phw-rs-map
{
    height : calc(100% - 50px);
}


.ph-widget-wrapper-radial-search .ph-widget-toast
{

    top              : 82px;
    background-color : #333333 !important;
    color            : #FFFFFF;
    max-width        : calc(100vw - 36px);
}


.ph-widget-wrapper-radial-search .ph-widget-toast:not(:empty):after
{
    top    : 3px;
    bottom : auto;
    rotate : 180deg;
    color  : #333333 !important;
}


.ui-widget-content
{
    background : rgba(60, 60, 60, 0.94);
    box-shadow : none;
}


.ui-widget-content li, .ui-widget-content a, .ui-datepicker td span, .ui-datepicker td a
{
    color : #FFFFFF;
}


.ui-menu .ui-state-focus,
.ui-menu .ui-state-active
{
    background : rgba(255, 255, 255, 0.25);
    margin     : 0 !important;
}


.ui-autocomplete
{
    height     : 200px;
    overflow-y : auto;
    z-index    : 10001 !important
}


.ap
{
    background : #888888;
    display    : inline-block;
    padding    : 0 4px;
}


.ui-datepicker
{
    margin  : 4px 0 0 -4px;
    padding : 0;
}


.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year
{
    padding : 1px 0 1px 4px !important;
}


.ui-datepicker-prev
{
    background      : url(//secure.parliament-hill.co.uk/content/_i/s2/arrow_left.png) no-repeat center;
    background-size : 24px;
}


.ui-datepicker-next
{
    background      : url(//secure.parliament-hill.co.uk/content/_i/s2/arrow_right.png) no-repeat center;
    background-size : 24px;
}


.ui-datepicker th
{
    color : #5DB2F2;
}


.ui-datepicker td span, .ui-datepicker td a
{
    border-radius      : 50%;
    height             : 2em;
    line-height        : 1.4em;
    margin             : 0 auto;
    padding            : 0.25em 0.4em !important;
    -moz-transition    : all 0.15s ease-in-out;
    -ms-transition     : all 0.15s ease-in-out;
    -o-transition      : all 0.15s ease-in-out;
    -webkit-transition : all 0.15s ease-in-out;
    transition         : all 0.15s ease-in-out;
    width              : 2em;
}


.ui-datepicker td a:hover
{
    background : rgba(255, 255, 255, 0.25);
    box-shadow : 0 0 0 3px rgba(255, 255, 255, 0.25);
}


.ui-datepicker td.ui-state-disabled span
{
    color : rgba(255, 255, 255, 0.25);
}


.ui-datepicker td.ui-datepicker-other-month a
{
    color : rgba(255, 255, 255, 0.5);
}


.ui-datepicker td.ui-datepicker-current-day a
{
    background : #5DB2F2;
    color      : #333333;
}


.footer-svg
{
    position         : absolute;
    bottom           : 0;
    display          : block;
    left             : 50%;
    translate        : -50% 0;
    transform-origin : 50% 50%;
}


.footer-svg path,
.footer-svg rect,
.footer-svg ellipse
{
    fill : var(--scheme-colour-d);
}


.over .footer-svg
{
    transform : scaleX(-1);
}


.over .footer-svg path,
.over .footer-svg rect,
.over .footer-svg ellipse
{
    fill : var(--scheme-background-colour);
}


.over:has(.footer-svg)
{
    padding-bottom : 65px;
}


@media all and (min-width : 992px)
{
    .over:has(.footer-svg)
    {
        padding-bottom : 125px;
    }
}


@media all and (min-width : 1200px)
{
    .footer-svg path,
    .footer-svg rect
    {
        fill : var(--scheme-colour-m);
    }
}


@media all and (min-width : 768px)
{
    #navbarSearch
    {
        position         : absolute;
        background-color : var(--scheme-colour-l);
        color            : var(--scheme-colour-l-foreground);
        right            : 0;
        top              : 0;
    }

    .navbar-expand-md .navbar-collapse #navbarSearchWrapper
    {
        display : none;
    }

    .navbar-expand-md .navbar-collapse.show #navbarSearchWrapper
    {
        display : block;
    }

    .navbar-expand-md #navbarSearch.navbar-collapse.show
    {
        padding    : 2em;
        box-shadow : rgba(99, 99, 99, 0.2) 0 2px 8px 0;
    }
}


@media all and (max-width : 767px)
{
    #navbarSearchWrapper
    {
        height : 80vh;
    }

    .navbar-expand-md #navbarSearch.navbar-collapse.show
    {
        padding : 1em;
    }
}